alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Label every 1h gridline on both sleep charts

Browse Source 
Instead of thinning labels on dense axes, keep them all and drop the
label font to 7px past 12 steps (bars) / 16 steps (trend).
This commit is contained in:
Alexander Heldt
2026-07-15 12:45:53 +00:00
parent 83af641a12
commit 6d54ecf238
3 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.js
+8 -11
View File
@@ -980,18 +980,16 @@
const gap = days.length > 14 ? 2 : 4;
const barW = (innerW - (days.length - 1) * gap) / days.length;
// Every gridline gets a label unless that would crowd the 9px text
// (this chart's plot area is shorter than the trend chart's).
const labelEvery = ySteps > 12 ? 2 : 1;
// Label every 1h gridline; smaller text once the axis is dense so the
// labels stay apart (this chart's plot area is shorter than the trend's).
const yLabelCls = ySteps > 12 ? "y-dense" : "";
const parts = [];
for (let i = 0; i <= ySteps; i++) {
const y = MT + innerH * (1 - i / ySteps);
const v = Math.round(yMax * i / ySteps * 10) / 10;
const vText = v % 1 === 0 ? v : v.toFixed(1);
parts.push(`<line class="grid" x1="${ML}" y1="${y}" x2="${W - MR}" y2="${y}"/>`);
if (i % labelEvery === 0) {
parts.push(`<text x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
}
parts.push(`<text class="${yLabelCls}" x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
}
const selYmd = ymd(selectedDay());
@@ -1368,17 +1366,16 @@
const xOf = (hour) => ML + (hour / 24) * innerW;
const yOf = (v) => MT + innerH * (1 - v / yMax);
// Every gridline gets a label unless that would crowd the 9px text.
const labelEvery = ySteps > 16 ? 2 : 1;
// Label every 1h gridline; smaller text once the axis is dense so the
// labels stay apart.
const yLabelCls = ySteps > 16 ? "y-dense" : "";
const parts = [];
for (let i = 0; i <= ySteps; i++) {
const y = MT + innerH * (1 - i / ySteps);
const v = Math.round(yMax * i / ySteps * 10) / 10;
const vText = v % 1 === 0 ? v : v.toFixed(1);
parts.push(`<line class="grid" x1="${ML}" y1="${y}" x2="${W - MR}" y2="${y}"/>`);
if (i % labelEvery === 0) {
parts.push(`<text x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
}
parts.push(`<text class="${yLabelCls}" x="${ML - 4}" y="${y + 3}" text-anchor="end">${vText}h</text>`);
}
for (const hr of [0, 6, 12, 18, 24]) {
const x = xOf(hr);