add 2hr chart

src/app/components/dashboard/dashboard.component.html

@@ -63,9 +63,9 @@
 
     </div>
 
-    <div class="col-12" *ngIf="chartData$ | async as chartData">
+    <div *ngIf="chartData$ | async as chartData">
         <div class="card">
-            <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+            <p-chart [data]="chartData" [options]="chartOptions"></p-chart>
         </div>
     </div>
 

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

@@ -34,17 +34,51 @@ export class DashboardComponent {
     this.chartData$ = this.clientInfo$.pipe(
       map((workerInfo: any) => {
 
+        const hourly = (workerInfo.chartData as any[]).reduce((pre, cur, idx, arr) => {
+
+
+          if (idx % 11 == 0 && idx != 0) {
+            pre[pre.length - 1].y = pre[pre.length - 1].y / 12;
+          }
+
+          if (idx + 11 > arr.length) {
+            return pre;
+          }
+
+          if (idx % 11 == 0) {
+            pre.push({ y: cur.data, x: cur.label });
+          }
+          pre[pre.length - 1].y += cur.data;
+
+          return pre;
+
+        }, []);
+
+
+        const data = workerInfo.chartData.map((d: any) => { return { y: d.data, x: d.label } });
+
         return {
           labels: workerInfo.chartData.map((d: any) => d.label),
           datasets: [
             {
-              label: address,
+              type: 'line',
-              data: workerInfo.chartData.map((d: any) => d.data),
+              label: '2 Hour',
+              data: hourly,
+              fill: false,
+              backgroundColor: documentStyle.getPropertyValue('--primary-color'),
+              borderColor: documentStyle.getPropertyValue('--primary-color'),
+              tension: .4
+            },
+            {
+              type: 'line',
+              label: '5 Minute',
+              data: data,
               fill: false,
               backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
               borderColor: documentStyle.getPropertyValue('--bluegray-700'),
               tension: .4
-            }
+            },
+
           ]
         }
       })
@@ -64,16 +98,15 @@ export class DashboardComponent {
         x: {
           type: 'time',
           time: {
-            unit: 'minute', // Set the unit to 'minute'
+            unit: 'hour', // Set the unit to 'minute'
-            stepSize: 10, // Set the desired interval between labels in minutes
-
           },
           ticks: {
             color: textColorSecondary
           },
           grid: {
             color: surfaceBorder,
-            drawBorder: false
+            drawBorder: false,
+            display: true
           }
         },
         y: {