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

Draw each timing row as a range chart

Browse Source 
A pair of numbers per type says how long the gaps are but not where the puppy
currently sits between them, which is the thing you actually want when
deciding whether to go out now. Each row becomes a small chart instead: a band
from the shortest to the typical gap, a marker for time since the last one,
and a scale of [min(shortest, since), max(typical, since)] so the marker is
free to land inside the band, off its left end (just went) or off its right
end (due).

Three cases the layout has to survive. A gap in tracking can leave "since" at
days against a typical gap of hours, so past twice the typical the marker
parks at the right edge behind a chevron and its label keeps the real number —
squashing the band to a sliver would be worse, and clamping silently would
read as being in range. A band too narrow to hang a label off each end carries
both values centred over its middle rather than pinned to the track ends,
where they would imply a spread the band does not have. Under two events there
is no gap at all, so the row falls back to a sentence instead of an axis with
nothing on it.

The marker is ink over a surface-coloured ring so it stays legible on any band
colour in either theme, and the gap between a label's word and its value is an
explicit dx: a trailing space inside a tspan does not survive XML whitespace
normalisation.
This commit is contained in:
Alexander Heldt
2026-08-24 13:14:45 +00:00
parent 29b961c1b0
commit b42ea2e309
4 changed files with 187 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+19 -7
View File
@@ -171,13 +171,25 @@
<section class="timing" data-panel="timing">
<h2>Timing <span class="muted-note">(last 7 days)</span></h2>
<div class="lasts">
<div class="last-row"><span>Typical time between pees</span><span id="gap-pee">—</span></div>
<div class="last-row"><span>Shortest between pees</span><span id="gap-pee-min">—</span></div>
<div class="last-row"><span>Typical time between poos</span><span id="gap-poo">—</span></div>
<div class="last-row"><span>Shortest between poos</span><span id="gap-poo-min">—</span></div>
<div class="last-row"><span>Typical time between meals</span><span id="gap-eat">—</span></div>
<div class="last-row"><span>Shortest between meals</span><span id="gap-eat-min">—</span></div>
<!-- One range chart per type, drawn by drawTimingChart: the band spans
the shortest to the typical gap and the marker is how long it has
been since the last one, so a marker past the band reads as due. -->
<div class="timing-charts">
<div class="timing-item">
<div class="timing-name">Pees</div>
<svg id="timing-chart-pee" class="timing-chart" viewBox="0 0 320 50" role="img"></svg>
<p class="muted-note timing-note" id="timing-note-pee" hidden></p>
</div>
<div class="timing-item">
<div class="timing-name">Poos</div>
<svg id="timing-chart-poo" class="timing-chart" viewBox="0 0 320 50" role="img"></svg>
<p class="muted-note timing-note" id="timing-note-poo" hidden></p>
</div>
<div class="timing-item">
<div class="timing-name">Meals</div>
<svg id="timing-chart-eat" class="timing-chart" viewBox="0 0 320 50" role="img"></svg>
<p class="muted-note timing-note" id="timing-note-eat" hidden></p>
</div>
</div>
<p class="muted-note timing-hint" id="timing-hint"></p>
</section>