visualizer: draw marker in history plot after selecting a packet
This commit is contained in:
parent
da68467fd2
commit
d5fb4eee34
|
@ -22,6 +22,10 @@ function updatePause(pause) {
|
|||
button.value = 'Continue';
|
||||
} else {
|
||||
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;
|
||||
}
|
||||
|
@ -60,8 +64,16 @@ function addTrace(type, data) {
|
|||
updatePause(true);
|
||||
updateChart(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
|
||||
chartConstellation.update();
|
||||
chartHistoryHz.update();
|
||||
chartHistoryDb.update();
|
||||
chartHistoryMisc.update();
|
||||
};
|
||||
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(
|
||||
document.querySelector('#constellation-canvas'), {
|
||||
type: 'scatter',
|
||||
|
@ -114,7 +150,13 @@ const chartHistoryHz = new Chart(
|
|||
options: {
|
||||
animation: false,
|
||||
maintainAspectRatio: false, // use full width
|
||||
plugins: {
|
||||
lineMarker: {},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
lineMarkerPlugin,
|
||||
],
|
||||
});
|
||||
const chartHistoryDb = new Chart(
|
||||
document.querySelector('#history-db-canvas'), {
|
||||
|
@ -126,7 +168,13 @@ const chartHistoryDb = new Chart(
|
|||
options: {
|
||||
animation: false,
|
||||
maintainAspectRatio: false, // use full width
|
||||
plugins: {
|
||||
lineMarker: {},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
lineMarkerPlugin,
|
||||
],
|
||||
});
|
||||
const chartHistoryMisc = new Chart(
|
||||
document.querySelector('#history-misc-canvas'), {
|
||||
|
@ -138,7 +186,13 @@ const chartHistoryMisc = new Chart(
|
|||
options: {
|
||||
animation: false,
|
||||
maintainAspectRatio: false, // use full width
|
||||
plugins: {
|
||||
lineMarker: {},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
lineMarkerPlugin,
|
||||
],
|
||||
});
|
||||
|
||||
function updateChart(packet) {
|
||||
|
|
Loading…
Reference in a new issue