From fd1ec5ca10bf4a49b7357d741671a30443954740 Mon Sep 17 00:00:00 2001 From: RChandler234 <29521172+RChandler234@users.noreply.github.com> Date: Mon, 12 Aug 2024 01:44:38 -0400 Subject: [PATCH 1/5] #178 - added set range, making progress --- .../src/pages/graph-page/graph/graph.component.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/angular-client/src/pages/graph-page/graph/graph.component.ts b/angular-client/src/pages/graph-page/graph/graph.component.ts index f999b064..18c347eb 100644 --- a/angular-client/src/pages/graph-page/graph/graph.component.ts +++ b/angular-client/src/pages/graph-page/graph/graph.component.ts @@ -51,12 +51,14 @@ export default class Graph implements OnInit { } setTimeout(() => { this.updateChart(); - }, 1000); + }, 800); }; ngOnInit(): void { this.valuesSubject.subscribe((values: GraphData[]) => { - const mappedValues = values.map((value: GraphData) => [convertUTCtoLocal(value.x), +value.y.toFixed(3)]); + const mappedValues = values.map((value: GraphData) => { + return { x: convertUTCtoLocal(value.x), y: +value.y.toFixed(3) }; + }); const newSeries = [ { name: 'Data Series', @@ -73,9 +75,9 @@ export default class Graph implements OnInit { } this.options = { - series: [], + series: [{ data: [] }], chart: { - id: 'graph', + id: 'realtime', type: 'line', height: '100%', zoom: { @@ -101,6 +103,7 @@ export default class Graph implements OnInit { xaxis: { type: 'datetime', tickAmount: 6, + range: 50000, labels: { style: { colors: '#fff' From fa11a096a22f18d9d47aca450f5956eb1e1b7a9e Mon Sep 17 00:00:00 2001 From: RChandler234 <29521172+RChandler234@users.noreply.github.com> Date: Mon, 12 Aug 2024 13:41:43 -0400 Subject: [PATCH 2/5] #178 - working flow graph! --- .../pages/graph-page/graph/graph.component.ts | 33 ++++++++----------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/angular-client/src/pages/graph-page/graph/graph.component.ts b/angular-client/src/pages/graph-page/graph/graph.component.ts index 18c347eb..94c5e657 100644 --- a/angular-client/src/pages/graph-page/graph/graph.component.ts +++ b/angular-client/src/pages/graph-page/graph/graph.component.ts @@ -37,17 +37,17 @@ export default class Graph implements OnInit { options!: ChartOptions; chart!: ApexCharts; previousDataLength: number = 0; - series: ApexAxisChartSeries = [ - { - name: 'Data Series', - data: [] - } - ]; + data: Map = new Map(); 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) + } + ]); } setTimeout(() => { this.updateChart(); @@ -56,16 +56,11 @@ export default class Graph implements OnInit { ngOnInit(): void { this.valuesSubject.subscribe((values: GraphData[]) => { - const mappedValues = values.map((value: GraphData) => { - return { x: convertUTCtoLocal(value.x), y: +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; + }); }); const chartContainer = document.getElementById('chart-container'); @@ -103,7 +98,7 @@ export default class Graph implements OnInit { xaxis: { type: 'datetime', tickAmount: 6, - range: 50000, + range: 120000, labels: { style: { colors: '#fff' From 25069cabe47cb129604faa3eeb384efd66c24e33 Mon Sep 17 00:00:00 2001 From: RChandler234 <29521172+RChandler234@users.noreply.github.com> Date: Mon, 12 Aug 2024 15:48:02 -0400 Subject: [PATCH 3/5] #178 - update graphs on landing page --- .../acceleration-graphs/acceleration-graphs.component.ts | 9 --------- .../acceleration-over-time-display.component.ts | 4 ---- angular-client/src/components/graph/graph.component.ts | 1 + .../speed-over-time-display.component.ts | 4 ---- .../src/pages/graph-page/graph/graph.component.ts | 2 +- 5 files changed, 2 insertions(+), 18 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 index bd2e59fa..e5a1786a 100644 --- 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/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts b/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts index fda364f2..954ce462 100644 --- a/angular-client/src/components/acceleration-over-time-display/acceleration-over-time-display.component.ts +++ b/angular-client/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 index dc33dfdc..709dc338 100644 --- 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 index 3a7181ef..bb9ce697 100644 --- 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/graph.component.ts b/angular-client/src/pages/graph-page/graph/graph.component.ts index 94c5e657..ec1db5b3 100644 --- a/angular-client/src/pages/graph-page/graph/graph.component.ts +++ b/angular-client/src/pages/graph-page/graph/graph.component.ts @@ -72,7 +72,7 @@ export default class Graph implements OnInit { this.options = { series: [{ data: [] }], chart: { - id: 'realtime', + id: 'graph', type: 'line', height: '100%', zoom: { From 608c5df924e099ad2aaacde0dce7ff427fcbb20d Mon Sep 17 00:00:00 2001 From: RChandler234 <29521172+RChandler234@users.noreply.github.com> Date: Tue, 13 Aug 2024 21:12:20 -0400 Subject: [PATCH 4/5] #178 - clean resizing, clear data type button works again --- .../pages/graph-page/graph-page.component.ts | 2 +- .../pages/graph-page/graph/graph.component.ts | 59 +++++++++++++------ 2 files changed, 43 insertions(+), 18 deletions(-) diff --git a/angular-client/src/pages/graph-page/graph-page.component.ts b/angular-client/src/pages/graph-page/graph-page.component.ts index 502fe7f7..9ab40eac 100644 --- 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([]); }; 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 index ec1db5b3..5e08f150 100644 --- 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, OnInit, 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,12 +22,14 @@ 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; options!: ChartOptions; chart!: ApexCharts; previousDataLength: number = 0; - data: Map = new Map(); + data!: Map; + timeDiffMs: number = 0; + isSliding: boolean = false; updateChart = () => { if (this.previousDataLength !== Array.from(this.data).length) { @@ -48,6 +40,17 @@ export default class Graph implements OnInit { 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(); @@ -55,12 +58,18 @@ export default class Graph implements OnInit { }; ngOnInit(): void { + 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.isSliding) { + const times = Array.from(this.data.keys()); + this.timeDiffMs = times[times.length - 1] - times[0]; + } }); const chartContainer = document.getElementById('chart-container'); @@ -70,7 +79,6 @@ export default class Graph implements OnInit { } this.options = { - series: [{ data: [] }], chart: { id: 'graph', type: 'line', @@ -98,7 +106,6 @@ export default class Graph implements OnInit { xaxis: { type: 'datetime', tickAmount: 6, - range: 120000, labels: { style: { colors: '#fff' @@ -134,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]; + } + }); + } } From c7465222f42f82c7b6b4642e1ef25400c8e86980 Mon Sep 17 00:00:00 2001 From: RChandler234 <29521172+RChandler234@users.noreply.github.com> Date: Tue, 13 Aug 2024 21:12:48 -0400 Subject: [PATCH 5/5] #178 - unused import --- angular-client/src/pages/graph-page/graph/graph.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/angular-client/src/pages/graph-page/graph/graph.component.ts b/angular-client/src/pages/graph-page/graph/graph.component.ts index 5e08f150..efb55351 100644 --- a/angular-client/src/pages/graph-page/graph/graph.component.ts +++ b/angular-client/src/pages/graph-page/graph/graph.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; +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';