Merge branch '#178-graph-resizing' into #172-charging-screen-improvem…

…ents
Northeastern-Electric-Racing · Sep 14, 2024 · e54a09b · e54a09b
2 parents 470e6b0 + f0cd163
commit e54a09b
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 39 deletions.
diff --git a/angular-client/src/components/graph/graph.component.ts b/angular-client/src/components/graph/graph.component.ts
@@ -1,21 +1,11 @@
 import { Component, Input, OnInit } from '@angular/core';
 import * as ApexCharts from 'apexcharts';
-import {
-  ApexAxisChartSeries,
-  ApexXAxis,
-  ApexDataLabels,
-  ApexChart,
-  ApexMarkers,
-  ApexGrid,
-  ApexTooltip,
-  ApexFill
-} from 'ng-apexcharts';
+import { ApexXAxis, ApexDataLabels, ApexChart, ApexMarkers, ApexGrid, ApexTooltip, ApexFill } from 'ng-apexcharts';
 import { DialogService } from 'primeng/dynamicdialog';
 import { GraphDialog } from '../graph-dialog/graph-dialog.component';
 import { GraphData } from 'src/utils/types.utils';
 
 type ChartOptions = {
-  series: ApexAxisChartSeries;
   chart: ApexChart;
   xaxis: ApexXAxis;
   yaxis: ApexYAxis;
@@ -38,14 +28,12 @@ export class GraphComponent implements OnInit {
   @Input() color!: string; // Must be hex
   @Input() title?: string;
   @Input() graphContainerId!: string;
+  @Input({ required: false }) timeRangeSec!: number;
   options!: ChartOptions;
   chart!: ApexCharts;
-  series: ApexAxisChartSeries = [
-    {
-      name: this.title,
-      data: []
-    }
-  ];
+  timeDiffMs: number = 0;
+  isSliding: boolean = false;
+  timeRangeMs: number = 120000; // 2 minutes in ms
 
   constructor(public dialogService: DialogService) {}
 
@@ -61,23 +49,37 @@ export class GraphComponent implements OnInit {
   };
 
   updateChart = () => {
-    this.series[0].data = this.data;
-    this.chart.updateSeries(this.series);
+    this.chart.updateSeries([
+      {
+        name: 'Data Series',
+        data: Array.from(this.data)
+      }
+    ]);
+
+    if (!this.isSliding && this.data.length > 2) {
+      this.timeDiffMs = this.data[this.data.length - 1].x - this.data[0].x;
+    }
+
+    if (!this.isSliding && this.timeDiffMs > this.timeRangeMs) {
+      this.isSliding = true;
+      this.chart.updateOptions({
+        ...this.options,
+        xaxis: {
+          ...this.options.xaxis,
+          range: this.timeRangeMs
+        }
+      });
+    }
+
     setTimeout(() => {
       this.updateChart();
-    }, 1000);
+    }, 800);
   };
 
   ngOnInit(): void {
-    this.series = [
-      {
-        name: this.title,
-        data: this.data
-      }
-    ];
+    this.timeRangeMs = (this.timeRangeSec ?? 120) * 1000;
 
     this.options = {
-      series: [],
       chart: {
         id: 'graph',
         type: 'line',
@@ -110,14 +112,20 @@ export class GraphComponent implements OnInit {
       xaxis: {
         type: 'category',
         tickAmount: 2,
-        range: 120000,
         labels: {
           show: true,
           style: {
             colors: '#FFFFFF'
           },
           formatter: (value) => {
-            return '' + new Date(value).getHours() + ':' + new Date(value).getMinutes() + ':' + new Date(value).getSeconds();
+            return (
+              '' +
+              new Date(value).getHours() +
+              ':' +
+              ((new Date(value).getMinutes() < 10 ? '0' : '') + new Date(value).getMinutes()) +
+              ':' +
+              ((new Date(value).getSeconds() < 10 ? '0' : '') + new Date(value).getSeconds())
+            );
           }
         },
         axisBorder: {
@@ -164,7 +172,7 @@ export class GraphComponent implements OnInit {
         return;
       }
 
-      this.chart = new ApexCharts(chartContainer, this.options);
+      this.chart = new ApexCharts(chartContainer, { series: [{ data: [] }], ...this.options });
 
       this.chart.render();
       this.updateChart();

diff --git a/angular-client/src/pages/graph-page/graph-page.component.ts b/angular-client/src/pages/graph-page/graph-page.component.ts
@@ -65,7 +65,7 @@ export default class GraphPage implements OnInit {
 
     this.setSelectedDataType = (dataType: DataType) => {
       this.selectedDataType.next(dataType);
-      this.selectedDataTypeValuesSubject.next([]);
+      this.selectedDataTypeValuesSubject = new BehaviorSubject<GraphData[]>([]);
       if (this.realTime) {
         if (this.subscription) this.subscription.unsubscribe();
         const key = dataType.name;

diff --git a/angular-client/src/pages/graph-page/graph/graph.component.ts b/angular-client/src/pages/graph-page/graph/graph.component.ts
@@ -2,7 +2,6 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import * as ApexCharts from 'apexcharts';
 import { ApexXAxis, ApexDataLabels, ApexChart, ApexMarkers, ApexGrid, ApexTooltip, ApexFill } from 'ng-apexcharts';
 import { BehaviorSubject } from 'rxjs';
-import { convertUTCtoLocal } from 'src/utils/pipes.utils';
 import { GraphData } from 'src/utils/types.utils';
 
 type ChartOptions = {
@@ -30,6 +29,7 @@ export default class Graph implements OnChanges {
   data!: Map<number, number>;
   timeDiffMs: number = 0;
   isSliding: boolean = false;
+  timeRangeMs = 120000;
 
   updateChart = () => {
     if (this.previousDataLength !== Array.from(this.data).length) {
@@ -41,13 +41,13 @@ export default class Graph implements OnChanges {
         }
       ]);
 
-      if (!this.isSliding && this.timeDiffMs > 120000) {
+      if (!this.isSliding && this.timeDiffMs > this.timeRangeMs) {
         this.isSliding = true;
         this.chart.updateOptions({
           ...this.options,
           xaxis: {
             ...this.options.xaxis,
-            range: 120000
+            range: this.timeRangeMs
           }
         });
       }
@@ -61,8 +61,8 @@ export default class Graph implements OnChanges {
     this.data = new Map();
     this.valuesSubject.subscribe((values: GraphData[]) => {
       values.forEach((value) => {
-        if (!this.data.has(convertUTCtoLocal(value.x))) {
-          this.data.set(convertUTCtoLocal(value.x), +value.y.toFixed(3));
+        if (!this.data.has(value.x)) {
+          this.data.set(value.x, +value.y.toFixed(3));
         }
       });
 
@@ -104,11 +104,21 @@ export default class Graph implements OnChanges {
         size: 0
       },
       xaxis: {
-        type: 'datetime',
+        type: 'category',
         tickAmount: 6,
         labels: {
           style: {
             colors: '#fff'
+          },
+          formatter: (value) => {
+            return (
+              '' +
+              new Date(value).getHours() +
+              ':' +
+              ((new Date(value).getMinutes() < 10 ? '0' : '') + new Date(value).getMinutes()) +
+              ':' +
+              ((new Date(value).getSeconds() < 10 ? '0' : '') + new Date(value).getSeconds())
+            );
           }
         }
       },
@@ -152,10 +162,19 @@ export default class Graph implements OnChanges {
     this.data = new Map();
     this.isSliding = false;
 
+    //set range to undefined
+    this.chart.updateOptions({
+      ...this.options,
+      xaxis: {
+        ...this.options.xaxis,
+        range: undefined
+      }
+    });
+
     this.valuesSubject.subscribe((values: GraphData[]) => {
       values.forEach((value) => {
-        if (!this.data.has(convertUTCtoLocal(value.x))) {
-          this.data.set(convertUTCtoLocal(value.x), +value.y.toFixed(3));
+        if (!this.data.has(value.x)) {
+          this.data.set(value.x, +value.y.toFixed(3));
         }
       });