ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: refresh chart tooltip on live updates while hovering

This commit is contained in:
nate 2026-03-18 20:40:07 +04:00
parent dae1d5f77a
commit 86d36a87fc
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web/src/views/detail.ejs
View File

@ -374,14 +374,17 @@
const chartContainer = document.getElementById('latency-chart'); const chartContainer = document.getElementById('latency-chart');
const tooltip = document.getElementById('chart-tooltip'); const tooltip = document.getElementById('chart-tooltip');
const crosshair = document.getElementById('chart-crosshair'); const crosshair = document.getElementById('chart-crosshair');
let _hoverX = null; // track last mouse x for re-rendering tooltip on chart update
chartContainer.addEventListener('mousemove', (e) => { function updateTooltip(mx) {
const canvas = document.getElementById('chart-canvas'); const canvas = document.getElementById('chart-canvas');
if (!canvas._regionPoints) return; if (!canvas._regionPoints || mx == null) {
const rect = canvas.getBoundingClientRect(); tooltip.classList.add('hidden');
const mx = e.clientX - rect.left; crosshair.classList.add('hidden');
return;
}
const result = getRunGroup(mx, canvas._regionPoints, canvas._cW, canvas._pad); const result = getRunGroup(mx, canvas._regionPoints);
if (!result) { if (!result) {
tooltip.classList.add('hidden'); tooltip.classList.add('hidden');
crosshair.classList.add('hidden'); crosshair.classList.add('hidden');
@ -417,9 +420,16 @@
const left = result.x + 12; const left = result.x + 12;
tooltip.style.left = (left + tw > containerW ? result.x - tw - 12 : left) + 'px'; tooltip.style.left = (left + tw > containerW ? result.x - tw - 12 : left) + 'px';
tooltip.style.top = '4px'; tooltip.style.top = '4px';
}
chartContainer.addEventListener('mousemove', (e) => {
const rect = document.getElementById('chart-canvas').getBoundingClientRect();
_hoverX = e.clientX - rect.left;
updateTooltip(_hoverX);
}); });
chartContainer.addEventListener('mouseleave', () => { chartContainer.addEventListener('mouseleave', () => {
_hoverX = null;
tooltip.classList.add('hidden'); tooltip.classList.add('hidden');
crosshair.classList.add('hidden'); crosshair.classList.add('hidden');
}); });
@ -497,6 +507,7 @@
}); });
trimChartRuns(); trimChartRuns();
renderChart(); renderChart();
updateTooltip(_hoverX);
}); });
</script> </script>