updated and fixed charts

RotaxMonitor/data/script.js

@@ -3,16 +3,23 @@ let lastMessageTimestamp = 0;
 const IDLE_THRESHOLD_MS = 1000;
 const loadingIndicator = document.getElementById("loadingIndicator");
 
-let chart;
-let chartData = {
+let chartA, chartB;
+
+let dataA = {
     labels: [],
     datasets: [
-        { label: "BoxA RPM", data: [] },
-        { label: "BoxB RPM", data: [] },
-        { label: "Coils12A Delay", data: [] },
-        { label: "Coils34A Delay", data: [] },
-        { label: "Coils12B Delay", data: [] },
-        { label: "Coils34B Delay", data: [] }
+        { label: "RPM", data: [] },
+        { label: "Coils12 Delay", data: [] },
+        { label: "Coils34 Delay", data: [] }
+    ]
+};
+
+let dataB = {
+    labels: [],
+    datasets: [
+        { label: "RPM", data: [] },
+        { label: "Coils12 Delay", data: [] },
+        { label: "Coils34 Delay", data: [] }
     ]
 };
 
@@ -64,7 +71,7 @@ function connectWS() {
         lastMessageTimestamp = Date.now();
         setLoadingIndicator(false);
 
-        updateChart(data)
+        updateCharts(data)
 
         // Update Box_A
         if (data.box_a) {
@@ -138,42 +145,49 @@ function connectWS() {
     };
 }
 
-function updateChart(data) {
-    const time = new Date().toLocaleTimeString();
+function updateCharts(data) {
 
-    chartData.labels.push(time);
+    const t = new Date().toLocaleTimeString();
 
+    // ===== BOX A =====
+    dataA.labels.push(t);
     if (data.box_a) {
-        const boxA = data.box_a;
-        const coils12A = boxA.coils12 || {};
-        const coils34A = boxA.coils34 || {};
-        chartData.datasets[0].data.push(boxA.eng_rpm / 10);
-        chartData.datasets[2].data.push(coils12A.spark_delay);
-        chartData.datasets[3].data.push(coils34A.spark_delay);
-        chartData.datasets[1].data.push(0);
-        chartData.datasets[4].data.push(0);
-        chartData.datasets[5].data.push(0);
+        dataA.datasets[0].data.push(data.box_a.eng_rpm / 10);
+        dataA.datasets[1].data.push(data.box_a.coils12.spark_delay);
+        dataA.datasets[2].data.push(data.box_a.coils34.spark_delay);
+    } else {
+        dataA.datasets[0].data.push(undefined);
+        dataA.datasets[1].data.push(undefined);
+        dataA.datasets[2].data.push(undefined);
     }
 
+    // ===== BOX B =====
+    dataB.labels.push(t);
     if (data.box_b) {
-        const boxB = data.box_b;
-        const coils12B = boxB.coils12 || {};
-        const coils34B = boxB.coils34 || {};
-        chartData.datasets[1].data.push(boxB.eng_rpm / 10);
-        chartData.datasets[4].data.push(coils12B.spark_delay);
-        chartData.datasets[5].data.push(coils34B.spark_delay);
-        chartData.datasets[0].data.push(0);
-        chartData.datasets[2].data.push(0);
-        chartData.datasets[3].data.push(0);
+        dataB.datasets[0].data.push(data.box_b.eng_rpm / 10);
+        dataB.datasets[1].data.push(data.box_b.coils12.spark_delay);
+        dataB.datasets[2].data.push(data.box_b.coils34.spark_delay);
+    } else {
+        dataB.datasets[0].data.push(undefined);
+        dataB.datasets[1].data.push(undefined);
+        dataB.datasets[2].data.push(undefined);
     }
 
-    // limite punti (tipo buffer)
-    if (chartData.labels.length > 100) {
-        chartData.labels.shift();
-        chartData.datasets.forEach(d => d.data.shift());
+    // limite buffer
+    const maxPoints = 100;
+
+    if (dataA.labels.length > maxPoints) {
+        dataA.labels.shift();
+        dataA.datasets.forEach(d => d.data.shift());
     }
 
-    chart.update();
+    if (dataB.labels.length > maxPoints) {
+        dataB.labels.shift();
+        dataB.datasets.forEach(d => d.data.shift());
+    }
+
+    chartA.update();
+    chartB.update();
 }
 
 function start() {
@@ -232,12 +246,29 @@ function openTab(tabId) {
     event.target.classList.add('active');
 }
 
-function initChart() {
-    const ctx = document.getElementById('chart').getContext('2d');
+function initCharts() {
+    const ctxA = document.getElementById('chartA').getContext('2d');
+    const ctxB = document.getElementById('chartB').getContext('2d');
 
-    chart = new Chart(ctx, {
+    chartA = new Chart(ctxA, {
         type: 'line',
-        data: chartData,
+        data: dataA,
+        options: {
+            animation: false,
+            responsive: true,
+            scales: {
+                x: {
+                    display: true
+                },
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+    chartB = new Chart(ctxB, {
+        type: 'line',
+        data: dataB,
         options: {
             animation: false,
             responsive: true,
@@ -254,7 +285,7 @@ function initChart() {
 }
 
 window.onload = () => {
-    initChart();
+    initCharts();
 };
 
 setInterval(updateLoadingState, 200);