visualizer: use multiple plots for history

This commit is contained in:
Simon Ruderich 2024-05-11 17:11:52 +02:00
parent a2e23fceff
commit 7024964cae
3 changed files with 93 additions and 35 deletions

View file

@ -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;
}

View file

@ -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>

View file

@ -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 */);