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,39 +184,59 @@ function addHistory(packet) {
             || x === 'data_symbols') {
             continue;
         }
-        keys.push(x);
-    }
-    keys.sort();
-
-    if (chartHistory.data.datasets.length === 0) {
-        for (const x of keys) {
-            chartHistory.data.datasets.push({
-                label: x,
-                data: [],
-            })
+        if (x.endsWith('Hz')) {
+            keysHz.push(x);
+        } else if (x.endsWith('dB')) {
+            keysDb.push(x);
+        } else {
+            keysMisc.push(x);
         }
     }
+    keysHz.sort();
+    keysDb.sort();
+    keysMisc.sort();
+
+    if (chartHistoryHz.data.datasets.length === 0) {
+        const run = (chart, keys) => {
+            for (const x of keys) {
+                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();
     }
 
-    let i = 0;
-    for (const x of keys) {
-        let data = packet[x];
-        if (data == -1e38 /* "NaN" */) {
-            data = undefined;
+    const run = (chart, keys) => {
+        let i = 0;
+        for (const x of keys) {
+            let data = packet[x];
+            if (data == -1e38 /* "NaN" */) {
+                data = undefined;
+            }
+            if (shift) {
+                chart.data.datasets[i].data.shift();
+            }
+            chart.data.datasets[i].data.push(data);
+            i++;
         }
-        if (shift) {
-            chartHistory.data.datasets[i].data.shift();
-        }
-        chartHistory.data.datasets[i].data.push(data);
-        i++;
-    }
-    chartHistory.data.labels.push(packet._id);
-    // .update() is deferred, see redrawPlots()
+        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 */);