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

…ents for graph-component changes
Northeastern-Electric-Racing · Aug 23, 2024 · 2b787bb · 2b787bb
2 parents 74909ef + c746522
commit 2b787bb
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 50 deletions.
diff --git a/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts b/angular-client/src/components/acceleration-graphs/acceleration-graphs.component.ts
@@ -41,15 +41,6 @@ export class AccelerationGraphs implements OnInit {
         y: y1
       });
 
-      //limits the data storage to 400 to prevent lag
-      if (this.xData.length > this.maxDataPoints) {
-        this.xData = this.xData.slice(1);
-      }
-
-      if (this.yData.length > this.maxDataPoints) {
-        this.yData = this.yData.slice(1);
-      }
-
       //checks if there is a new max
       this.xMax = Math.max(Math.abs(x1), this.xMax);
       this.yMax = Math.max(Math.abs(y1), this.yMax);

diff --git a/...src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts b/...src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts
@@ -10,16 +10,12 @@ import { GraphData } from 'src/utils/types.utils';
 })
 export default class AccelerationOverTimeDisplay {
   data: GraphData[] = [];
-  maxDataPoints = 100;
 
   constructor(private storage: Storage) {}
 
   ngOnInit() {
     this.storage.get(IdentifierDataType.ACCELERATION).subscribe((value) => {
       this.data.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
-      if (this.data.length > 100) {
-        this.data.shift();
-      }
     });
   }
 }
diff --git a/angular-client/src/components/graph/graph.component.ts b/angular-client/src/components/graph/graph.component.ts
@@ -110,6 +110,7 @@ export class GraphComponent implements OnInit {
       xaxis: {
         type: 'category',
         tickAmount: 2,
+        range: 120000,
         labels: {
           show: true,
           style: {

diff --git a/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.ts b/angular-client/src/components/speed-over-time-display/speed-over-time-display.component.ts
@@ -10,15 +10,11 @@ import { GraphData } from 'src/utils/types.utils';
 })
 export default class SpeedOverTimeDisplay implements OnInit {
   data: GraphData[] = [];
-  maxDataPoints = 100;
 
   constructor(private storage: Storage) {}
   ngOnInit() {
     this.storage.get(IdentifierDataType.SPEED).subscribe((value) => {
       this.data.push({ x: new Date().getTime(), y: parseInt(value.values[0]) });
-      if (this.data.length > 100) {
-        this.data.shift();
-      }
     });
   }
 }
diff --git a/angular-client/src/pages/graph-page/graph-page.component.ts b/angular-client/src/pages/graph-page/graph-page.component.ts
@@ -60,7 +60,7 @@ export default class GraphPage implements OnInit {
     this.clearDataType = () => {
       if (this.subscription) this.subscription.unsubscribe();
       this.selectedDataType.next({ name: '', unit: '' });
-      this.selectedDataTypeValuesSubject.next([]);
+      this.selectedDataTypeValuesSubject = new BehaviorSubject<GraphData[]>([]);
     };
 
     this.setSelectedDataType = (dataType: DataType) => {

diff --git a/angular-client/src/pages/graph-page/graph/graph.component.ts b/angular-client/src/pages/graph-page/graph/graph.component.ts
@@ -1,21 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } 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 { BehaviorSubject } from 'rxjs';
 import { convertUTCtoLocal } from 'src/utils/pipes.utils';
 import { GraphData } from 'src/utils/types.utils';
 
 type ChartOptions = {
-  series: ApexAxisChartSeries;
   chart: ApexChart;
   xaxis: ApexXAxis;
   yaxis: ApexYAxis;
@@ -32,38 +22,54 @@ type ChartOptions = {
   templateUrl: './graph.component.html',
   styleUrls: ['./graph.component.css']
 })
-export default class Graph implements OnInit {
+export default class Graph implements OnChanges {
   @Input() valuesSubject!: BehaviorSubject<GraphData[]>;
   options!: ChartOptions;
   chart!: ApexCharts;
   previousDataLength: number = 0;
-  series: ApexAxisChartSeries = [
-    {
-      name: 'Data Series',
-      data: []
-    }
-  ];
+  data!: Map<number, number>;
+  timeDiffMs: number = 0;
+  isSliding: boolean = false;
 
   updateChart = () => {
-    if (this.previousDataLength !== this.series[0].data.length) {
-      this.previousDataLength = this.series[0].data.length;
-      this.chart.updateSeries(this.series);
+    if (this.previousDataLength !== Array.from(this.data).length) {
+      this.previousDataLength = Array.from(this.data).length;
+      this.chart.updateSeries([
+        {
+          name: 'Data Series',
+          data: Array.from(this.data)
+        }
+      ]);
+
+      if (!this.isSliding && this.timeDiffMs > 120000) {
+        this.isSliding = true;
+        this.chart.updateOptions({
+          ...this.options,
+          xaxis: {
+            ...this.options.xaxis,
+            range: 120000
+          }
+        });
+      }
     }
     setTimeout(() => {
       this.updateChart();
-    }, 1000);
+    }, 800);
   };
 
   ngOnInit(): void {
+    this.data = new Map();
     this.valuesSubject.subscribe((values: GraphData[]) => {
-      const mappedValues = values.map((value: GraphData) => [convertUTCtoLocal(value.x), +value.y.toFixed(3)]);
-      const newSeries = [
-        {
-          name: 'Data Series',
-          data: mappedValues
+      values.forEach((value) => {
+        if (!this.data.has(convertUTCtoLocal(value.x))) {
+          this.data.set(convertUTCtoLocal(value.x), +value.y.toFixed(3));
         }
-      ];
-      this.series = newSeries;
+      });
+
+      if (!this.isSliding) {
+        const times = Array.from(this.data.keys());
+        this.timeDiffMs = times[times.length - 1] - times[0];
+      }
     });
 
     const chartContainer = document.getElementById('chart-container');
@@ -73,7 +79,6 @@ export default class Graph implements OnInit {
     }
 
     this.options = {
-      series: [],
       chart: {
         id: 'graph',
         type: 'line',
@@ -136,10 +141,28 @@ export default class Graph implements OnInit {
 
     // Weird rendering stuff with apex charts, view link to see why https://github.com/apexcharts/react-apexcharts/issues/187
     setTimeout(() => {
-      this.chart = new ApexCharts(chartContainer, this.options);
+      this.chart = new ApexCharts(chartContainer, { series: [{ data: [] }], ...this.options });
 
       this.chart.render();
       this.updateChart();
     }, 0);
   }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.data = new Map();
+    this.isSliding = false;
+
+    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.isSliding) {
+        const times = Array.from(this.data.keys());
+        this.timeDiffMs = times[times.length - 1] - times[0];
+      }
+    });
+  }
 }