From b3302fb84c2f462afc88c873b251dbff16820afb Mon Sep 17 00:00:00 2001 From: Ben Wilson Date: Sun, 25 Jun 2023 16:35:29 -0400 Subject: [PATCH] add 2hr chart --- .../dashboard/dashboard.component.html | 4 +- .../dashboard/dashboard.component.ts | 47 ++++++++++++++++--- 2 files changed, 42 insertions(+), 9 deletions(-) diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html index 5f8a616..303889b 100644 --- a/src/app/components/dashboard/dashboard.component.html +++ b/src/app/components/dashboard/dashboard.component.html @@ -63,9 +63,9 @@ -
+
- +
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts index a88dc4d..d3ef029 100644 --- a/src/app/components/dashboard/dashboard.component.ts +++ b/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, - data: workerInfo.chartData.map((d: any) => d.data), + type: 'line', + 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' - stepSize: 10, // Set the desired interval between labels in minutes - + unit: 'hour', // Set the unit to 'minute' }, ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, - drawBorder: false + drawBorder: false, + display: true } }, y: {