From 80081e337d3af829b0edf3990ad97ea430bd73d4 Mon Sep 17 00:00:00 2001 From: Benjamin Wilson Date: Sat, 24 Aug 2024 21:17:03 -0400 Subject: [PATCH] add year calculation to other graphs --- .../dashboard/dashboard.component.ts | 18 +++++------ src/app/components/splash/splash.component.ts | 2 +- .../worker-group/worker-group.component.ts | 29 +++++++++++++---- src/app/components/worker/worker.component.ts | 32 +++++++++++++++---- src/app/pipes/average-time-to-block.pipe.ts | 3 ++ src/app/pipes/date-ago.pipe.ts | 11 ++++--- 6 files changed, 66 insertions(+), 29 deletions(-) diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts index d886512..77b3a8b 100644 --- a/src/app/components/dashboard/dashboard.component.ts +++ b/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; + 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, diff --git a/src/app/components/splash/splash.component.ts b/src/app/components/splash/splash.component.ts index 5f75367..27836b0 100644 --- a/src/app/components/splash/splash.component.ts +++ b/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 diff --git a/src/app/components/worker-group/worker-group.component.ts b/src/app/components/worker-group/worker-group.component.ts index 15d0641..78fce69 100644 --- a/src/app/components/worker-group/worker-group.component.ts +++ b/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; + 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, diff --git a/src/app/components/worker/worker.component.ts b/src/app/components/worker/worker.component.ts index 77fb927..9e925ae 100644 --- a/src/app/components/worker/worker.component.ts +++ b/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; + 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, diff --git a/src/app/pipes/average-time-to-block.pipe.ts b/src/app/pipes/average-time-to-block.pipe.ts index afd0a0f..b593ed2 100644 --- a/src/app/pipes/average-time-to-block.pipe.ts +++ b/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); } diff --git a/src/app/pipes/date-ago.pipe.ts b/src/app/pipes/date-ago.pipe.ts index 2283c63..4490754 100644 --- a/src/app/pipes/date-ago.pipe.ts +++ b/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;