visualizer: draw marker in history plot after selecting a packet

This commit is contained in:
Simon Ruderich 2024-05-11 18:04:39 +02:00
parent 7024964cae
commit 21220deed7

View file

@ -22,6 +22,10 @@ function updatePause(pause) {
button.value = 'Continue'; button.value = 'Continue';
} else { } else {
button.value = 'Pause'; button.value = 'Pause';
// Hide line markers
chartHistoryHz.options.plugins.lineMarker.index = undefined;
chartHistoryDb.options.plugins.lineMarker.index = undefined;
chartHistoryMisc.options.plugins.lineMarker.index = undefined;
} }
state.paused = pause; state.paused = pause;
} }
@ -60,8 +64,16 @@ function addTrace(type, data) {
updatePause(true); updatePause(true);
updateChart(data.packet); updateChart(data.packet);
updateData(data.packet); updateData(data.packet);
// Mark current packet in history plot
const index = data.packet._id - chartHistoryHz.data.labels[0];
chartHistoryHz.options.plugins.lineMarker.index = index;
chartHistoryDb.options.plugins.lineMarker.index = index;
chartHistoryMisc.options.plugins.lineMarker.index = index;
// Redraw // Redraw
chartConstellation.update(); chartConstellation.update();
chartHistoryHz.update();
chartHistoryDb.update();
chartHistoryMisc.update();
}; };
span.style.cursor = 'pointer'; span.style.cursor = 'pointer';
} }
@ -74,6 +86,30 @@ function addTrace(type, data) {
} }
const lineMarkerPlugin = {
id: 'lineMarker',
beforeDatasetsDraw: (chart, args, plugins) => {
// Nothing drawn yet
if (chart.scales.x === undefined) {
return;
}
// Not yet configured to show a line
if (plugins.index === undefined) {
return;
}
const x = chart.scales.x.getPixelForValue(plugins.index);
const ctx = chart.ctx;
ctx.save();
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.moveTo(x, chart.chartArea.top);
ctx.lineTo(x, chart.chartArea.bottom);
ctx.stroke();
},
};
const chartConstellation = new Chart( const chartConstellation = new Chart(
document.querySelector('#constellation-canvas'), { document.querySelector('#constellation-canvas'), {
type: 'scatter', type: 'scatter',
@ -114,7 +150,13 @@ const chartHistoryHz = new Chart(
options: { options: {
animation: false, animation: false,
maintainAspectRatio: false, // use full width maintainAspectRatio: false, // use full width
plugins: {
lineMarker: {},
},
}, },
plugins: [
lineMarkerPlugin,
],
}); });
const chartHistoryDb = new Chart( const chartHistoryDb = new Chart(
document.querySelector('#history-db-canvas'), { document.querySelector('#history-db-canvas'), {
@ -126,7 +168,13 @@ const chartHistoryDb = new Chart(
options: { options: {
animation: false, animation: false,
maintainAspectRatio: false, // use full width maintainAspectRatio: false, // use full width
plugins: {
lineMarker: {},
},
}, },
plugins: [
lineMarkerPlugin,
],
}); });
const chartHistoryMisc = new Chart( const chartHistoryMisc = new Chart(
document.querySelector('#history-misc-canvas'), { document.querySelector('#history-misc-canvas'), {
@ -138,7 +186,13 @@ const chartHistoryMisc = new Chart(
options: { options: {
animation: false, animation: false,
maintainAspectRatio: false, // use full width maintainAspectRatio: false, // use full width
plugins: {
lineMarker: {},
},
}, },
plugins: [
lineMarkerPlugin,
],
}); });
function updateChart(packet) { function updateChart(packet) {