diff --git a/src/app.js b/src/app.js index 9d0be5e..41b30cc 100644 --- a/src/app.js +++ b/src/app.js @@ -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(``); - if (i % labelEvery === 0) { - parts.push(`${vText}h`); - } + parts.push(`${vText}h`); } 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(``); - if (i % labelEvery === 0) { - parts.push(`${vText}h`); - } + parts.push(`${vText}h`); } for (const hr of [0, 6, 12, 18, 24]) { const x = xOf(hr); diff --git a/src/changelog.json b/src/changelog.json index fd5817d..61ea6b5 100644 --- a/src/changelog.json +++ b/src/changelog.json @@ -1,4 +1,5 @@ [ + { "date": "2026-07-15", "text": "Every 1-hour gridline on the sleep charts now shows its hour mark" }, { "date": "2026-07-15", "text": "The Sleep chart in the last-N-days card now has 1-hour gridlines too" }, { "date": "2026-07-15", "text": "The Sleep trend chart is taller with 1-hour gridlines, so nearby lines are easier to tell apart" }, { "date": "2026-07-15", "text": "The Sleep trend legend shows the hours for each line — Today, Yesterday and the average, next to the projection" }, diff --git a/src/style.css b/src/style.css index 659f9f8..29857b0 100644 --- a/src/style.css +++ b/src/style.css @@ -597,6 +597,8 @@ dialog menu { } .chart-svg { display: block; width: 100%; height: auto; } .chart-svg text { fill: var(--muted); font-size: 9px; } +/* Dense 1h y-axes: smaller labels so every gridline can carry one. */ +.chart-svg text.y-dense { font-size: 7px; } .chart-svg .grid { stroke: var(--border); stroke-dasharray: 2 3;