sjs/spirit-tracker
1
0
Fork 0
mirror of https://github.com/samsonjs/spirit-tracker.git synced 2026-04-27 15:07:43 +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 23:57:53 -08:00
parent 01c16007df
commit e91315557e
1 changed files with 30 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
viz/app/item_page.js
View file

@ -117,9 +117,6 @@ const StaticMarkerLinesPlugin = {
const markers = Array.isArray(opts?.markers) ? opts.markers : []; const markers = Array.isArray(opts?.markers) ? opts.markers : [];
if (!markers.length) return; if (!markers.length) return;
const markerYs = markers.map(m => Number(m.y)).filter(Number.isFinite);
const HIDE_TICK_PX = 9; // tweak 6–12 depending on font size
// Find y-scale (v2/v3 tolerant) // Find y-scale (v2/v3 tolerant)
const scalesObj = chart?.scales || {}; const scalesObj = chart?.scales || {};
const scales = Object.values(scalesObj); const scales = Object.values(scalesObj);
@ -997,6 +994,8 @@ export async function renderItem($app, skuInput) {
y: { y: {
...ySug, ...ySug,
y: {
...ySug,
ticks: { ticks: {
stepSize: step, stepSize: step,
maxTicksLimit: MAX_TICKS, maxTicksLimit: MAX_TICKS,
@ -1005,11 +1004,21 @@ export async function renderItem($app, skuInput) {
const val = Number(v); const val = Number(v);
if (!Number.isFinite(val)) return ""; if (!Number.isFinite(val)) return "";
// `this` is the y-scale in Chart.js (v2/v3/v4) // if no markers or scale API missing, just render normally
if (!markerYs.length || typeof this.getPixelForValue !== "function") {
return `$${val.toFixed(0)}`;
}
const py = this.getPixelForValue(val); const py = this.getPixelForValue(val);
if (!Number.isFinite(py)) return `$${val.toFixed(0)}`;
for (const my of markerYs) { for (const my of markerYs) {
const pmy = this.getPixelForValue(my); const pmy = this.getPixelForValue(my);
if (!Number.isFinite(pmy)) continue;
// only consider markers actually in view
if (pmy < this.top || pmy > this.bottom) continue;
if (Math.abs(py - pmy) <= HIDE_TICK_PX) return ""; // hide $ tick label if (Math.abs(py - pmy) <= HIDE_TICK_PX) return ""; // hide $ tick label
} }
@ -1019,6 +1028,7 @@ export async function renderItem($app, skuInput) {
}, },
}, },
}, },
},
}); });
const yScale = CHART.scales?.y; const yScale = CHART.scales?.y;