From 713f997d15c08ada5d41f574abd79da74619ddd0 Mon Sep 17 00:00:00 2001
From: Grabt234 <gnorrie12@gmail.com>
Date: Sat, 25 Nov 2023 21:29:11 +0200
Subject: [PATCH] Feat: Can poorly update the plot with data

---
 src/lib/SensorGroup.svelte | 19 +++++++++--
 src/routes/+page.svelte    | 68 +++++++++++++++++---------------------
 2 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/src/lib/SensorGroup.svelte b/src/lib/SensorGroup.svelte
index b49152b..5a4ac5b 100644
--- a/src/lib/SensorGroup.svelte
+++ b/src/lib/SensorGroup.svelte
@@ -11,7 +11,7 @@
 
 	let ctxTime;
 	let TimeDomainChart;
-	let TimeDomainYValues = [0];
+	export let TimeDomainYValues = [0];
 	let TimeDomainXValues = [0];
 
 	let ctxFreq;
@@ -19,8 +19,6 @@
 	let FreqDomainYValues = [0];
 	let FreqDomainXValues = [0];
 
-	// export function InitialiseTimeGraph() {
-
 	function initTimeCanvas() {
 		ctxTime = document.getElementById('TimeDomainChart');
 		TimeDomainChart = new Chart(ctxTime, {
@@ -43,6 +41,8 @@
 				}
 			}
 		});
+
+		console.log(TimeDomainChart);
 	}
 
 	function initFreqCanvas() {
@@ -69,9 +69,22 @@
 	}
 
 	onMount(() => {
+		console.log('00000');
 		initFreqCanvas();
 		initTimeCanvas();
 	});
+
+	// Reactive statement to watch 'data' changes and update the plot
+	function updatePlot() {
+		// Update chart data efficiently
+		if (ctxTime) {
+			console.log(TimeDomainChart);
+			TimeDomainChart.data.datasets.data = TimeDomainYValues;
+			TimeDomainChart.data.labels = Array.from({ length: 512 }, (_, index) => index + 1);
+			TimeDomainChart.update();
+		}
+	}
+	$: updatePlot();
 </script>
 
 <div class-="sensorGroup">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f143377..1e2371a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -79,54 +79,46 @@
 			// Check if parsed data exists, otherwise parse it once
 			console.log('here1');
 
-			if (!parsedData) {
-				const receivedMessage = event.data;
-				parsedData = JSON.parse(receivedMessage);
-				// Create datasets array
-				const colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple'];
-				for (
-					let channelIndex = 0;
-					channelIndex < parsedData['TimeChunk']['NumChannels'];
-					channelIndex++
-				) {
-					const dataset = {
-						labels: undefined,
-						data: [],
-						borderColor: colors[channelIndex],
-						fill: false
-					};
-					datasets.push(dataset);
-				}
-
-				console.log(parsedData['TimeChunk']['SourceIndentifier']);
-			}
-
+			// if (!parsedData) {
+			const receivedMessage = event.data;
+
+			// 	// Create datasets array
+			// 	const colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple'];
+			// 	for (
+			// 		let channelIndex = 0;
+			// 		channelIndex < parsedData['TimeChunk']['NumChannels'];
+			// 		channelIndex++
+			// 	) {
+			// 		const dataset = {
+			// 			labels: undefined,
+			// 			data: [],
+			// 			borderColor: colors[channelIndex],
+			// 			fill: false
+			// 		};
+			// 		datasets.push(dataset);
+			// 	}
+
+			// 	console.log(parsedData['TimeChunk']['SourceIndentifier']);
+			// }
+			parsedData = JSON.parse(receivedMessage);
 			console.log('here');
 
 			// Lets try get the source identifier key
 			let sourceIdentifierKey = JSON.parse(event.data)['TimeChunk']['SourceIndentifier'];
 			// Check if we are tracking it in the mpa already
 			// And if not then track it
+			const newData = JSON.parse(event.data)['TimeChunk']['Channels'];
+			const numChannels = JSON.parse(event.data)['TimeChunk']['NumChannels'];
+			for (let channelIndex = 0; channelIndex < numChannels; channelIndex++) {
+				datasets[channelIndex] = newData[channelIndex];
+			}
+
 			updateItemInMap(JSON.parse(event.data)['TimeChunk']['SourceIndentifier'], {
 				timeSampleRate: JSON.parse(event.data)['TimeChunk']['SampleRate'],
 				timeChunkSize: JSON.parse(event.data)['TimeChunk']['ChunkSize'],
-				sourceIdentifier: JSON.parse(event.data)['TimeChunk']['SourceIndentifier']
+				sourceIdentifier: JSON.parse(event.data)['TimeChunk']['SourceIndentifier'],
+				TimeDomainYValues: datasets
 			});
-
-			// const numChannels = JSON.parse(event.data)['TimeChunk']['NumChannels'];
-			// for (let channelIndex = 0; channelIndex < numChannels; channelIndex++) {
-			// 	datasets[channelIndex].data = newData[channelIndex];
-			// }
-			// // Update chart data efficiently
-			// TimeDomainChart.data.datasets = datasets;
-			// TimeDomainChart.data.labels = Array.from({ length: 512 }, (_, index) => index + 1);
-			// TimeDomainChart.update();
-			// if (timeSampleRate !== JSON.parse(event.data)['TimeChunk']['SampleRate']) {
-			// 	timeSampleRate = JSON.parse(event.data)['TimeChunk']['SampleRate'];
-			// }
-			// if (timeChunkSize !== JSON.parse(event.data)['TimeChunk']['ChunkSize']) {
-			// 	timeChunkSize = JSON.parse(event.data)['TimeChunk']['ChunkSize'];
-			// }
 		});
 		// 	const FreqWebSocket = new WebSocket('ws://localhost:10100/DataTypes/FFTMagnitudeChunk');
 		// 	let FreqParsedData = null;