average time to block calc

src/app/components/splash/splash.component.html

@@ -65,6 +65,7 @@
                 <div class="text-center mb-2">Uptime: {{uptime$ | async | dateAgo}}</div>
 
                 <ng-container *ngIf="chartData$ | async as chartData; else loadingChart">
+                    
                     <p-chart [responsive]="true" type="line" [data]="chartData" [options]="chartOptions"></p-chart>
 
                 </ng-container>

src/app/components/splash/splash.component.ts

@@ -1,11 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { map, Observable, shareReplay } from 'rxjs';
+import { combineLatest, map, Observable, shareReplay } from 'rxjs';
 
 import { environment } from '../../../environments/environment';
 import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { AppService } from '../../services/app.service';
 import { bitcoinAddressValidator } from '../../validators/bitcoin-address.validator';
+import { AverageTimeToBlockPipe } from 'src/app/pipes/average-time-to-block.pipe';
+
 
 @Component({
   selector: 'app-splash',
@@ -26,10 +28,13 @@ export class SplashComponent {
 
   public stratumURL = '';
 
-  constructor(private appService: AppService) {
+  private info$: Observable<any>;
 
-    const info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+  private networkInfo:any;
 
+  constructor(private appService: AppService, private cdr: ChangeDetectorRef) {
+
+    this.info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
 
     if (environment.STRATUM_URL.length > 1) {
       this.stratumURL = environment.STRATUM_URL;
@@ -37,13 +42,14 @@ export class SplashComponent {
       this.stratumURL = window.location.hostname + ':3333';
     }
 
-    this.blockData$ = info$.pipe(map(info => info.blockData));
-    this.userAgents$ = info$.pipe(map(info => info.userAgents));
-    this.highScores$ = info$.pipe(map(info => info.highScores));
-    this.uptime$ = info$.pipe(map(info => info.uptime))
+    this.blockData$ = this.info$.pipe(map(info => info.blockData));
+    this.userAgents$ = this.info$.pipe(map(info => info.userAgents));
+    this.highScores$ = this.info$.pipe(map(info => info.highScores));
+    this.uptime$ = this.info$.pipe(map(info => info.uptime))
 
-    this.chartData$ = this.appService.getInfoChart().pipe(
-      map((chartData: any) => {
+    this.chartData$ = combineLatest([this.appService.getInfoChart(), this.appService.getNetworkInfo()]).pipe(
+      map(([chartData, networkInfo]) => {
+        this.networkInfo = networkInfo;
         return {
 
           labels: chartData.map((d: any) => d.label),
@@ -100,7 +106,9 @@ export class SplashComponent {
         y: {
           ticks: {
             color: textColorSecondary,
-            callback: (value: number) => HashSuffixPipe.transform(value)
+            callback: (value: number) => {
+                return HashSuffixPipe.transform(value) + " - " + AverageTimeToBlockPipe.transform(value, this.networkInfo.difficulty);
+            }
           },
           grid: {
             color: surfaceBorder,