From 0c0ca21ac88f79d632780e6423686ce44bf00bf7 Mon Sep 17 00:00:00 2001
From: Ben Wilson <ben@registrationmax.com>
Date: Sun, 25 Jun 2023 09:16:27 -0400
Subject: [PATCH] charts

---
 .../dashboard/dashboard.component.html        |  6 ++
 .../dashboard/dashboard.component.ts          | 74 ++++++++++++++++++-
 .../worker-group/worker-group.component.html  |  8 +-
 .../worker-group/worker-group.component.ts    |  2 +-
 src/app/services/worker.service.ts            |  3 +
 5 files changed, 86 insertions(+), 7 deletions(-)

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 @@
 
 
 
+    </div>
+
+    <div class="col-12" *ngIf="chartData$ | async as chartData">
+        <div class="card">
+            <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+        </div>
     </div>
 
 
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<any>;
+  public chartData$: Observable<any>;
+
+  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 @@
                     </div>
                 </div>
                 <!-- <span class="text-green-500 font-medium">24 new </span> -->
-                <span class="text-500">{{workerInfo.sessionId}}</span>
+                <span class="text-500">&nbsp;</span>
             </div>
         </div>
         <div class="col-12 lg:col-6 xl:col-3">
@@ -32,7 +32,7 @@
                 <span class="text-green-500 font-medium">{{workerInfo.bestDifficulty | number}}</span>
             </div>
         </div>
-        <div class="col-12 lg:col-6 xl:col-3">
+        <!-- <div class="col-12 lg:col-6 xl:col-3">
             <div class="card mb-0">
                 <div class="flex justify-content-between mb-3">
                     <div>
@@ -44,10 +44,10 @@
                         <i class="pi pi-clock text-cyan-500 text-xl"></i>
                     </div>
                 </div>
-                <!-- <span class="text-green-500 font-medium">520 </span>-->
+
                 <span class="text-500">Since {{workerInfo.startTime | date : 'short'}}</span>
             </div>
-        </div>
+        </div> -->
         <!-- <div class="col-12 lg:col-6 xl:col-3">
         <div class="card mb-0">
             <div class="flex justify-content-between mb-3">
diff --git a/src/app/components/worker-group/worker-group.component.ts b/src/app/components/worker-group/worker-group.component.ts
index 7b3a2c9..b42587f 100644
--- a/src/app/components/worker-group/worker-group.component.ts
+++ b/src/app/components/worker-group/worker-group.component.ts
@@ -23,7 +23,7 @@ export class WorkerGroupComponent {
     const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
     const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 
-    this.workerInfo$ = this.workerService.getWorkerInfo(this.route.snapshot.params['address'], this.route.snapshot.params['workerName'], this.route.snapshot.params['workerId']).pipe(
+    this.workerInfo$ = this.workerService.getGroupWorkerInfo(this.route.snapshot.params['address'], this.route.snapshot.params['workerName']).pipe(
       shareReplay({ bufferSize: 1, refCount: true })
     )
 
diff --git a/src/app/services/worker.service.ts b/src/app/services/worker.service.ts
index 1460969..9105b47 100644
--- a/src/app/services/worker.service.ts
+++ b/src/app/services/worker.service.ts
@@ -14,6 +14,9 @@ export class WorkerService {
     private httpClient: HttpClient
   ) { }
 
+  public getGroupWorkerInfo(address: string, workerName: string): Observable<any> {
+    return this.httpClient.get(`${environment.API_URL}/api/client/${address}/${workerName}`);
+  }
   public getWorkerInfo(address: string, workerName: string, workerId: string): Observable<any> {
     return this.httpClient.get(`${environment.API_URL}/api/client/${address}/${workerName}/${workerId}`);
   }