Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2025-12-23 20:28:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve line graph tooltip (#3601)

Browse Source
This commit is contained in:
yubiuser
2025-10-04 08:58:29 +02:00
committed by GitHub
parent a6c372eb7f 2c1876879d
commit 94e8e909b7
2 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
scripts/js/charts.js
View File

@@ -260,6 +260,10 @@ function positionTooltip(tooltipEl, tooltip, context) {
const arrowMinIndent = 2 * tooltip.options.cornerRadius;
const arrowSize = 5;
// Check if this is a queryOverTimeChart or clientsChart - these should stick to x-axis
const canvasId = context.chart.canvas.id;
const isTimelineChart = canvasId === "queryOverTimeChart" || canvasId === "clientsChart";
let tooltipX = offsetX + caretX;
let arrowX;
@@ -316,27 +320,37 @@ function positionTooltip(tooltipEl, tooltip, context) {
arrowX = offsetX + caretX - tooltipX;
}
let tooltipY = offsetY + caretY;
let tooltipY;
// Compute Y position
switch (tooltip.yAlign) {
case "top": {
tooltipY += arrowSize + caretPadding;
break;
}
if (isTimelineChart) {
// For timeline charts, always position tooltip below the chart with caret pointing to x-axis
const chartArea = context.chart.chartArea;
const canvasBottom = chartArea.bottom;
tooltipY = offsetY + canvasBottom + arrowSize + caretPadding;
case "center": {
tooltipY -= tooltipHeight / 2;
if (tooltip.xAlign === "left") tooltipX += arrowSize;
if (tooltip.xAlign === "right") tooltipX -= arrowSize;
break;
}
// Ensure the arrow points to the correct X position
arrowX = tooltip.caretX - (tooltipX - offsetX);
} else {
tooltipY = offsetY + caretY;
switch (tooltip.yAlign) {
case "top": {
tooltipY += arrowSize + caretPadding;
break;
}
case "bottom": {
tooltipY -= tooltipHeight + arrowSize + caretPadding;
break;
case "center": {
tooltipY -= tooltipHeight / 2;
if (tooltip.xAlign === "left") tooltipX += arrowSize;
if (tooltip.xAlign === "right") tooltipX -= arrowSize;
break;
}
case "bottom": {
tooltipY -= tooltipHeight + arrowSize + caretPadding;
break;
}
// No default
}
// No default
}
// Position tooltip and display