add year calculation to other graphs

src/app/components/dashboard/dashboard.component.ts

@@ -1,11 +1,12 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Table } from 'primeng/table';
-import { map, Observable, shareReplay } from 'rxjs';
+import { combineLatest, map, Observable, shareReplay } from 'rxjs';
 
 import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { AppService } from '../../services/app.service';
 import { ClientService } from '../../services/client.service';
+import { AverageTimeToBlockPipe } from 'src/app/pipes/average-time-to-block.pipe';
 
 
 
@@ -24,6 +25,7 @@ export class DashboardComponent implements AfterViewInit {
   public chartOptions: any;
 
   public networkInfo$: Observable<any>;
+  private networkInfo:any;
 
   @ViewChild('dataTable') dataTable!: Table;
 
@@ -35,11 +37,8 @@ export class DashboardComponent implements AfterViewInit {
     private clientService: ClientService,
     private route: ActivatedRoute,
     private appService: AppService
-
   ) {
 
-
-
     this.networkInfo$ = this.appService.getNetworkInfo().pipe(
       shareReplay({ refCount: true, bufferSize: 1 })
     );
@@ -55,17 +54,16 @@ export class DashboardComponent implements AfterViewInit {
 
     }));
 
-
-
     const documentStyle = getComputedStyle(document.documentElement);
     const textColor = documentStyle.getPropertyValue('--text-color');
     const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
     const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 
 
-    this.chartData$ = this.clientService.getClientInfoChart(this.address).pipe(
-      map((chartData) => {
+    this.chartData$ = combineLatest([this.clientService.getClientInfoChart(this.address),  this.networkInfo$]).pipe(
+      map(([chartData, networkInfo]) => {
 
+        this.networkInfo = networkInfo;
         const GROUP_SIZE = 12; //6 = 1 hour
 
 
@@ -143,7 +141,9 @@ export class DashboardComponent implements AfterViewInit {
         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,

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

@@ -92,7 +92,7 @@ export class SplashComponent {
         x: {
           type: 'time',
           time: {
-            unit: 'hour', // Set the unit to 'minute'
+            unit: 'day', // Set the unit to 'minute'
           },
           ticks: {
             color: textColorSecondary

src/app/components/worker-group/worker-group.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { map, Observable, shareReplay } from 'rxjs';
+import { combineLatest, map, Observable, shareReplay } from 'rxjs';
 
 import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { WorkerService } from '../../services/worker.service';
+import { AverageTimeToBlockPipe } from 'src/app/pipes/average-time-to-block.pipe';
+import { AppService } from 'src/app/services/app.service';
 
 @Component({
   selector: 'app-worker-group',
@@ -18,7 +20,14 @@ export class WorkerGroupComponent {
 
   public chartOptions: any;
 
-  constructor(private workerService: WorkerService, private route: ActivatedRoute) {
+  public networkInfo$: Observable<any>;
+  private networkInfo:any;
+
+  constructor(
+    private workerService: WorkerService,
+     private route: ActivatedRoute,
+     private appService: AppService
+    ) {
     const documentStyle = getComputedStyle(document.documentElement);
     const textColor = documentStyle.getPropertyValue('--text-color');
     const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
@@ -26,11 +35,15 @@ export class WorkerGroupComponent {
 
     this.workerInfo$ = this.workerService.getGroupWorkerInfo(this.route.snapshot.params['address'], this.route.snapshot.params['workerName']).pipe(
       shareReplay({ bufferSize: 1, refCount: true })
-    )
+    );
 
-    this.chartData$ = this.workerInfo$.pipe(
-      map((workerInfo: any) => {
+    this.networkInfo$ = this.appService.getNetworkInfo().pipe(
+      shareReplay({ refCount: true, bufferSize: 1 })
+    );
 
+    this.chartData$ = combineLatest([this.workerInfo$, this.networkInfo$]).pipe(
+      map(([workerInfo, networkInfo]) => {
+        this.networkInfo = networkInfo;
         return {
           labels: workerInfo.chartData.map((d: any) => d.label),
           datasets: [
@@ -64,7 +77,7 @@ export class WorkerGroupComponent {
         x: {
           type: 'time',
           time: {
-            unit: 'hour'
+            unit: 'day'
           },
           ticks: {
             color: textColorSecondary
@@ -77,7 +90,9 @@ export class WorkerGroupComponent {
         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,

src/app/components/worker/worker.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { map, Observable, shareReplay } from 'rxjs';
+import { combineLatest, map, Observable, shareReplay } from 'rxjs';
 
 import { HashSuffixPipe } from '../../pipes/hash-suffix.pipe';
 import { WorkerService } from '../../services/worker.service';
+import { AverageTimeToBlockPipe } from 'src/app/pipes/average-time-to-block.pipe';
+import { AppService } from 'src/app/services/app.service';
 
 @Component({
   selector: 'app-worker',
@@ -18,7 +20,15 @@ export class WorkerComponent {
 
   public chartOptions: any;
 
-  constructor(private workerService: WorkerService, private route: ActivatedRoute) {
+  public networkInfo$: Observable<any>;
+  private networkInfo:any;
+
+
+  constructor(
+    private workerService: WorkerService, 
+    private route: ActivatedRoute,
+    private appService: AppService
+  ) {
     const documentStyle = getComputedStyle(document.documentElement);
     const textColor = documentStyle.getPropertyValue('--text-color');
     const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
@@ -26,10 +36,16 @@ export class WorkerComponent {
 
     this.workerInfo$ = this.workerService.getWorkerInfo(this.route.snapshot.params['address'], this.route.snapshot.params['workerName'], this.route.snapshot.params['workerId']).pipe(
       shareReplay({ bufferSize: 1, refCount: true })
-    )
+    );
 
-    this.chartData$ = this.workerInfo$.pipe(
-      map((workerInfo: any) => {
+    this.networkInfo$ = this.appService.getNetworkInfo().pipe(
+      shareReplay({ refCount: true, bufferSize: 1 })
+    );
+
+    this.chartData$ = combineLatest([ this.workerInfo$, this.networkInfo$]).pipe(
+      map(([workerInfo, networkInfo]) => {
+
+        this.networkInfo = networkInfo;
 
         return {
           labels: workerInfo.chartData.map((d: any) => d.label),
@@ -64,7 +80,7 @@ export class WorkerComponent {
         x: {
           type: 'time',
           time: {
-            unit: 'hour'
+            unit: 'day'
           },
           ticks: {
             color: textColorSecondary
@@ -77,7 +93,9 @@ export class WorkerComponent {
         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,

src/app/pipes/average-time-to-block.pipe.ts

@@ -16,6 +16,9 @@ export class AverageTimeToBlockPipe implements PipeTransform {
 
   public transform(value: number, difficulty: number): string {
     const blockTimeInSeconds = this.calculateBlockTime(value, difficulty);
+    if(blockTimeInSeconds > 8000000000000){
+      return '~∞';
+    }
     const date = new Date(new Date().getTime() + (blockTimeInSeconds * 1000));
     return AverageTimeToBlockPipe._dateAgo.transform(date);
   }

src/app/pipes/date-ago.pipe.ts

@@ -26,11 +26,12 @@ export class DateAgoPipe implements PipeTransform {
         counter = Math.floor(seconds / intervals[i]);
         
         if (counter > 0)
-          if (counter === 1) {
-            return number + ' ' + i + ''; // singular (1 day ago)
-          } else {
-            return number + ' ' + i + 's'; // plural (2 days ago)
-          }
+          return number + ' ' + i + 's'; // plural (2 days ago)
+          // if (counter === 1) {
+          //   return number + ' ' + i + ''; // singular (1 day ago)
+          // } else {
+          //   return number + ' ' + i + 's'; // plural (2 days ago)
+          // }
       }
     }
     return value;