Apply the chart window to the timing panel

The 7d/14d/30d picker already drove every chart on the page, but the timing
panel was not a chart and got missed: gapsBetween defaulted to a literal 7 and
the heading said "(last 7 days)" as fixed text, so picking 30d widened the
counts and heatmap while the pee, poo and meal gaps under them stayed on a
week. Two panels describing the same events over different windows is the kind
of disagreement nobody thinks to check for.

The default is now chartDays(), read at call time so it tracks the picker
rather than freezing at load, and the heading joins the other panels in
deriving its "(last N days)" from the same place. The two sentences that
quoted seven days — the empty-row fallback and the range tooltip — say the
picked number, and the note about the faded stretch says "the window" rather
than "the week", which is no longer always true.

An explicit days argument still wins, so a future caller wanting a fixed
window is not forced through the picker.
This commit is contained in:
Alexander Heldt
2026-08-31 22:01:19 +00:00
parent e037ab2716
commit 079eb41672
3 changed files with 9 additions and 6 deletions
+6 -4
View File
@@ -727,8 +727,10 @@
// Gaps (ms) between consecutive events of `type` logged within the last
// `days` days, sorted ascending. These intervals are what tell you how
// often the puppy needs to go out.
function gapsBetween(events, type, days = 7) {
// often the puppy needs to go out. Defaults to the picked chart window, so
// the 7d/14d/30d buttons widen the timing panel along with the charts —
// read at call time, not at definition, so a change takes on the next render.
function gapsBetween(events, type, days = chartDays()) {
const cutoff = startOfDay(new Date());
cutoff.setDate(cutoff.getDate() - (days - 1));
const from = cutoff.getTime();
@@ -795,7 +797,7 @@
svg.style.display = "none";
note.hidden = false;
note.textContent = since == null
? `No ${row.noun}s logged in the last 7 days.`
? `No ${row.noun}s logged in the last ${chartDays()} days.`
: `One ${row.noun} logged, ${formatDuration(since)} ago — log another to see the typical gap.`;
return;
}
@@ -840,7 +842,7 @@
const parts = [
`<rect class="tm-track" x="${ML}" y="${trackY}" width="${innerW}" height="${trackH}" rx="${trackH / 2}"/>`,
bandRect(`tm-range ${row.cls}`, xShort, xLong,
`<title>${escapeText(`${formatDuration(shortest)}${formatDuration(longest)} between ${row.noun}s over the last 7 days`)}</title>`),
`<title>${escapeText(`${formatDuration(shortest)}${formatDuration(longest)} between ${row.noun}s over the last ${chartDays()} days`)}</title>`),
bandRect(`tm-band ${row.cls}`, xShort, xTypical,
`<title>${escapeText(`Typically ${formatDuration(typical)} between ${row.noun}s`)}</title>`),
];