diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index 1add0f9..5f8a616 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -61,6 +61,12 @@
+
+
+
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index 133dd12..a88dc4d 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,6 +1,6 @@
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
+import { map, Observable, shareReplay } from 'rxjs';
import { ClientService } from '../../services/client.service';
@@ -13,11 +13,81 @@ export class DashboardComponent {
public clientInfo$: Observable;
+ public chartData$: Observable;
+
+ public chartOptions: any;
constructor(private clientService: ClientService, private route: ActivatedRoute) {
- this.clientInfo$ = this.clientService.getClientInfo(this.route.snapshot.params['address']);
+ const address = this.route.snapshot.params['address'];
+ this.clientInfo$ = this.clientService.getClientInfo(address).pipe(
+ shareReplay({ refCount: true, bufferSize: 1 })
+ )
+ 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.clientInfo$.pipe(
+ map((workerInfo: any) => {
+
+ return {
+ labels: workerInfo.chartData.map((d: any) => d.label),
+ datasets: [
+ {
+ label: address,
+ data: workerInfo.chartData.map((d: any) => d.data),
+ fill: false,
+ backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
+ borderColor: documentStyle.getPropertyValue('--bluegray-700'),
+ tension: .4
+ }
+ ]
+ }
+ })
+ );
+
+
+
+ this.chartOptions = {
+ plugins: {
+ legend: {
+ labels: {
+ color: textColor
+ }
+ }
+ },
+ scales: {
+ x: {
+ type: 'time',
+ time: {
+ unit: 'minute', // Set the unit to 'minute'
+ stepSize: 10, // Set the desired interval between labels in minutes
+
+ },
+ ticks: {
+ color: textColorSecondary
+ },
+ grid: {
+ color: surfaceBorder,
+ drawBorder: false
+ }
+ },
+ y: {
+ ticks: {
+ color: textColorSecondary,
+ callback: (value: number) => value + ' GH/s',
+ },
+ grid: {
+ color: surfaceBorder,
+ drawBorder: false
+ }
+ }
+ }
+ };
}
diff --git a/src/app/components/worker-group/worker-group.component.html b/src/app/components/worker-group/worker-group.component.html
index 74a0b40..2cf4949 100644
--- a/src/app/components/worker-group/worker-group.component.html
+++ b/src/app/components/worker-group/worker-group.component.html
@@ -13,7 +13,7 @@
- {{workerInfo.sessionId}}
+
@@ -32,7 +32,7 @@
{{workerInfo.bestDifficulty | number}}
-
+
+
Since {{workerInfo.startTime | date : 'short'}}
-
+ -->