sjs/spirit-tracker
1
0
Fork 0
mirror of https://github.com/samsonjs/spirit-tracker.git synced 2026-03-25 09:25:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX Improvements

Browse source
This commit is contained in:
Brennan Wilkes (Text Groove) 2026-02-09 22:25:25 -08:00
parent a4f68eef3f
commit 2cb9a075a7
1 changed files with 27 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
viz/app/item_page.js
View file

@ -164,26 +164,36 @@ const StaticMarkerLinesPlugin = {
ctx.lineTo(right, py);
ctx.stroke();
// tiny tick mark on the y-axis edge
// Compute a safe "axis x" (works across Chart.js versions)
const axisXRaw =
(Number.isFinite(y?.left) && y.left) ||
(Number.isFinite(y?.right) && y.right) ||
left;
// clamp inside canvas so it never disappears off-screen
const axisX = Math.max(0, Math.min(axisXRaw, chart.width));
// tiny tick mark starting at axisX
ctx.beginPath();
ctx.moveTo(left, py);
ctx.lineTo(left + 6, py);
ctx.moveTo(axisX, py);
ctx.lineTo(axisX + 6, py);
ctx.stroke();
// label just to the left of the plot area, aligned like an axis marker
// label anchored to axisX (no background)
const text = String(m?.text || "");
if (text) {
ctx.globalAlpha = 0.95;
ctx.fillStyle = String(m?.labelColor || labelColor);
ctx.textBaseline = "middle";
const axisX = y.left; // actual y-axis pixel
ctx.textAlign = "right";
ctx.textBaseline = "middle";
ctx.fillText(text, axisX - axisInset, py);
ctx.fillText(text, Math.max(0, axisX - axisInset), py);
// DEBUG: show axis anchor point (remove later)
// ctx.save();
// ctx.globalAlpha = 0.9;
// ctx.fillStyle = "red";
// ctx.fillRect(axisX - 1, py - 1, 2, 2);
// ctx.restore();
}
}