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

44
viz/app/item_page.js
View file

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