visualizer: use multiple plots for history

impl/utils/visualizer/static/index.css

@@ -8,18 +8,21 @@
 
 #main {
     display: flex;
+    height: 90vh;
 }
 
 #constellation {
-    height: 85vh;
     width: 30vw;
 }
 #data {
-    padding-top: 1em;
-    padding-right: 1em;
-    text-wrap: nowrap;
+    width: 20vw;
 }
 #history {
-    max-height: 80vh;
-    flex-grow: 1;
+    width: 50vw;
+
+    display: flex;
+    flex-direction: column;
+}
+#history-hz, #history-db, #history-misc {
+    height: 30vh;
 }

impl/utils/visualizer/static/index.html

@@ -32,7 +32,15 @@
     </div>
     <div id="data"></div>
     <div id="history">
-      <canvas id="history-canvas"></canvas>
+      <div id="history-hz">
+        <canvas id="history-hz-canvas"></canvas>
+      </div>
+      <div id="history-db">
+        <canvas id="history-db-canvas"></canvas>
+      </div>
+      <div id="history-misc">
+        <canvas id="history-misc-canvas"></canvas>
+      </div>
     </div>
   </div>
 

impl/utils/visualizer/static/index.js

@@ -104,8 +104,8 @@ const chartConstellation = new Chart(
         },
     });
 
-const chartHistory = new Chart(
-    document.querySelector('#history-canvas'), {
+const chartHistoryHz = new Chart(
+    document.querySelector('#history-hz-canvas'), {
         type: 'line',
         data: {
             labels: [],
@@ -113,6 +113,31 @@ const chartHistory = new Chart(
         },
         options: {
             animation: false,
+            maintainAspectRatio: false, // use full width
+        },
+    });
+const chartHistoryDb = new Chart(
+    document.querySelector('#history-db-canvas'), {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [],
+        },
+        options: {
+            animation: false,
+            maintainAspectRatio: false, // use full width
+        },
+    });
+const chartHistoryMisc = new Chart(
+    document.querySelector('#history-misc-canvas'), {
+        type: 'line',
+        data: {
+            labels: [],
+            datasets: [],
+        },
+        options: {
+            animation: false,
+            maintainAspectRatio: false, // use full width
         },
     });
 
@@ -151,7 +176,7 @@ function updateData(packet) {
 }
 
 function addHistory(packet) {
-    const keys = [];
+    const keysHz = [], keysDb = [], keysMisc = [];
     for (const x in packet) {
         if (x === '_id'
             || x === 'preamble_symbols'
@@ -159,25 +184,41 @@ function addHistory(packet) {
             || x === 'data_symbols') {
             continue;
         }
-        keys.push(x);
+        if (x.endsWith('Hz')) {
+            keysHz.push(x);
+        } else if (x.endsWith('dB')) {
+            keysDb.push(x);
+        } else {
+            keysMisc.push(x);
         }
-    keys.sort();
+    }
+    keysHz.sort();
+    keysDb.sort();
+    keysMisc.sort();
 
-    if (chartHistory.data.datasets.length === 0) {
+    if (chartHistoryHz.data.datasets.length === 0) {
+        const run = (chart, keys) => {
             for (const x of keys) {
-            chartHistory.data.datasets.push({
+                chart.data.datasets.push({
                     label: x,
                     data: [],
                 })
             }
+        };
+        run(chartHistoryHz, keysHz);
+        run(chartHistoryDb, keysDb);
+        run(chartHistoryMisc, keysMisc);
     }
 
     // Limit to historyMaxPackets items
     const shift = chartHistoryHz.data.labels.length == historyMaxPackets;
     if (shift) {
-        chartHistory.data.labels.shift();
+        chartHistoryHz.data.labels.shift();
+        chartHistoryDb.data.labels.shift();
+        chartHistoryMisc.data.labels.shift();
     }
 
+    const run = (chart, keys) => {
         let i = 0;
         for (const x of keys) {
             let data = packet[x];
@@ -185,13 +226,17 @@ function addHistory(packet) {
                 data = undefined;
             }
             if (shift) {
-            chartHistory.data.datasets[i].data.shift();
+                chart.data.datasets[i].data.shift();
             }
-        chartHistory.data.datasets[i].data.push(data);
+            chart.data.datasets[i].data.push(data);
             i++;
         }
-    chartHistory.data.labels.push(packet._id);
+        chart.data.labels.push(packet._id);
         // .update() is deferred, see redrawPlots()
+    };
+    run(chartHistoryHz, keysHz);
+    run(chartHistoryDb, keysDb);
+    run(chartHistoryMisc, keysMisc);
 }
 
 let redrawPending = false;
@@ -206,7 +251,9 @@ function redrawPlots() {
 
     redrawPending = true;
     window.setTimeout(() => {
-        chartHistory.update();
+        chartHistoryHz.update();
+        chartHistoryDb.update();
+        chartHistoryMisc.update();
         chartConstellation.update();
         redrawPending = false;
     }, 10 /* ms */);