From bb03ec81e005550a2f5321d9c2f5a4450684e38b Mon Sep 17 00:00:00 2001
From: Grabt234 <gnorrie12@gmail.com>
Date: Fri, 24 Nov 2023 07:59:38 +0200
Subject: [PATCH] Feat: Intial dynamic addition of component to UI

---
 src/lib/SensorGroup.svelte | 125 ++++++++++++++++++-------------------
 src/routes/+page.svelte    | 121 +++++++++++++++++++++--------------
 2 files changed, 135 insertions(+), 111 deletions(-)

diff --git a/src/lib/SensorGroup.svelte b/src/lib/SensorGroup.svelte
index f834b99..75c0daa 100644
--- a/src/lib/SensorGroup.svelte
+++ b/src/lib/SensorGroup.svelte
@@ -1,68 +1,65 @@
-<script lang="ts" context="module">
+<script lang="ts">
 	import Chart from 'chart.js/auto';
 
-	// Time domain vars
-	export let timeSampleRate;
-	export let timeChunkSize;
+	// Define the props expected by SensorGroup
+	export let timeSampleRate: number = -1;
+	export let timeChunkSize: number = -1;
+	export let freqSampleRate: number = -1;
+	export let freqChunkSize: number = -1;
 
-	// Frequency domain vars
-	export let freqSampleRate;
-	export let freqChunkSize;
+	// export let TimeDomainChart;
+	// export let TimeDomainYValues = [0];
+	// export let TimeDomainXValues = [0];
+	// export let ctxTime;
 
-	export let TimeDomainChart;
-	export let TimeDomainYValues = [0];
-	export let TimeDomainXValues = [0];
-	export let ctxTime;
+	// export let FreqDomainChart;
+	// export let FreqDomainYValues = [0];
+	// export let FreqDomainXValues = [0];
+	// export let ctxFreq;
 
-	export let FreqDomainChart;
-	export let FreqDomainYValues = [0];
-	export let FreqDomainXValues = [0];
-	export let ctxFreq;
-
-	export function InitialiseTimeGraph() {
-		return (TimeDomainChart = new Chart(ctxTime, {
-			type: 'line',
-			data: {
-				labels: TimeDomainXValues,
-				datasets: [
-					{
-						data: TimeDomainYValues,
-						borderColor: 'red',
-						fill: false
-					}
-				]
-			},
-			options: {
-				legend: { display: false },
-				animation: {
-					// Disable animations
-					duration: 1 // Set the duration to 0 for all animations
-				}
-			}
-		}));
-	}
-
-	export function InitialiseFreqGraph() {
-		return (FreqDomainChart = new Chart(ctxFreq, {
-			type: 'line',
-			data: {
-				labels: FreqDomainXValues,
-				datasets: [
-					{
-						data: FreqDomainYValues,
-						borderColor: 'red',
-						fill: false
-					}
-				]
-			},
-			options: {
-				legend: { display: false },
-				animation: {
-					duration: 1
-				}
-			}
-		}));
-	}
+	// export function InitialiseTimeGraph() {
+	// 	return (TimeDomainChart = new Chart(ctxTime, {
+	// 		type: 'line',
+	// 		data: {
+	// 			labels: TimeDomainXValues,
+	// 			datasets: [
+	// 				{
+	// 					data: TimeDomainYValues,
+	// 					borderColor: 'red',
+	// 					fill: false
+	// 				}
+	// 			]
+	// 		},
+	// 		options: {
+	// 			legend: { display: false },
+	// 			animation: {
+	// 				// Disable animations
+	// 				duration: 1 // Set the duration to 0 for all animations
+	// 			}
+	// 		}
+	// 	}));
+	// }
+	// export function InitialiseFreqGraph() {
+	// 	return (FreqDomainChart = new Chart(ctxFreq, {
+	// 		type: 'line',
+	// 		data: {
+	// 			labels: FreqDomainXValues,
+	// 			datasets: [
+	// 				{
+	// 					data: FreqDomainYValues,
+	// 					borderColor: 'red',
+	// 					fill: false
+	// 				}
+	// 			]
+	// 		},
+	// 		options: {
+	// 			legend: { display: false },
+	// 			animation: {
+	// 				duration: 1
+	// 			}
+	// 		}
+	// 	}));
+	// }
 </script>
 
 <div class-="sensorGroup">
@@ -73,18 +70,18 @@
 				<p class="parameter">Sample Rate: {timeSampleRate}</p>
 				<p class="parameter">Chunk Size: {timeChunkSize}</p>
 			</div>
-			<div>
+			<!-- <div>
 				<canvas class="canvas" bind:this={TimeDomainChart} id="TimeDomainChart" />
-			</div>
+			</div> -->
 		</div>
 		<div class="graphGroup">
 			<div class="parameterContainer">
 				<p class="parameter">Sample Rate: {freqSampleRate}</p>
 				<p class="parameter">Chunk Size: {freqChunkSize}</p>
 			</div>
-			<div>
+			<!-- <div>
 				<canvas class="canvas" bind:this={FreqDomainChart} id="FreqDomainChart" />
-			</div>
+			</div> -->
 		</div>
 	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4eae5ea..2583d4b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import Chart from 'chart.js/auto';
 	import SensorGroup from '$lib/SensorGroup.svelte';
 	import { onMount } from 'svelte';
+
 	// Setting up of time domain plot
 	// let TimeDomainChart;
 	// let TimeDomainYValues = [0];
@@ -19,14 +20,25 @@
 	// export let freqSampleRate = 'X';
 	// export let freqChunkSize = 'X';
 
-	let sensorGroup = [
+	// $: sensorGroup = [];
+
+	// Define your sensorGroup array
+	let sensorGroup: {
+		timeSampleRate: number;
+		timeChunkSize: number;
+		freqSampleRate: number;
+		freqChunkSize: number;
+	}[] = [
 		{
 			timeSampleRate: 1000,
 			timeChunkSize: 512,
-			FreqDomainChart: SensorGroup.InitialiseTimeGraph(),
-			TimeDomainChart: SensorGroup.InitialiseFreqGraph()
+			freqSampleRate: 1000,
+			freqChunkSize: 512
 		}
+		// Add more objects as needed for multiple SensorGroup components
+		// ...
 	];
+
 	// Callback function used to connect to the websocket, retrieve data
 	// and update the time domain plot
 	$: {
@@ -40,46 +52,60 @@
 
 	// Create the time domain chart and link mount it to the HTML canvas
 	onMount(() => {
-		// const TimeWebSocket = new WebSocket('ws://localhost:10100/DataTypes/TimeChunk');
-		// let parsedData = null;
-		// let datasets = [];
-		// 	TimeWebSocket.addEventListener('message', async (event) => {
-		// 		// Check if parsed data exists, otherwise parse it once
-		// 		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);
-		// 			}
-		// 		}
-		// 		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].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 TimeWebSocket = new WebSocket('ws://localhost:10100/DataTypes/TimeChunk');
+		let parsedData = null;
+		let datasets = [];
+
+		// sensorGroup = [
+		// 	...sensorGroup,
+		// 	{
+		// 		timeSampleRate: 1000,
+		// 		timeChunkSize: 512,
+		// 		freqSampleRate: 1000,
+		// 		freqChunkSize: 512
+		// 	}
+		// ];
+
+		// console.log(sensorGroup);
+
+		TimeWebSocket.addEventListener('message', async (event) => {
+			// Check if parsed data exists, otherwise parse it once
+
+			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);
+				}
+			}
+			// 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].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;
 		// 	let freqDatasets = [];
@@ -150,10 +176,11 @@
 </svelte:head>
 
 <div>
-	<div id="sensors" />
-	{#each sensorGroup as sensor}
-		<sensorGroup {...sensor} />
-	{/each}
+	<div id="sensors">
+		{#each sensorGroup as sensor}
+			<SensorGroup {...sensor} />
+		{/each}
+	</div>
 </div>
 
 <style>