Group the charts by subject, not by window

"Last 7 days" collected four charts for no better reason than sharing an axis,
which put sleep hours a full panel away from the two sleep patterns and the
counts chart nowhere near the by-hour view of the same events.

Each chart now sits with its subject. Sleep hours per day becomes its own Sleep
panel directly above the sleep timeline, so the three sleep views read in
sequence. Daily counts and Food join the heatmap in one "Pees, poos & meals"
panel: how many a day, how much food went with them, and what hours they fall
in are three views of one set of events and belong on one card. Minutes walked
per day goes to the Walks panel, which is the same move applied to the chart
the split didn't mention.

The day-window picker stays a single control, in the Sleep panel, because it
was never scoped to the panel holding it — it drives the training grid, both
sleep patterns and the counts panel too. That is unchanged, and the panel it
lives in occupies the slot the old one did, so it has not moved on screen. A
comment says so, since a global control sitting inside one card does not
announce itself. Duplicating it into each panel would work as-is (both the
labels and the buttons are addressed by querySelectorAll) if reaching it ever
becomes a scroll.

Both new panels take new data-panel keys, so anyone who had the old panels
folded gets the new ones open rather than inheriting a collapse they chose for
something else. The dead #daily-charts-title lookup goes with the heading.
This commit is contained in:
Alexander Heldt
2026-08-31 21:51:33 +00:00
parent 7a1c0f3808
commit e037ab2716
4 changed files with 38 additions and 27 deletions
+3
View File
@@ -1164,7 +1164,10 @@ button.ex-log {
button.ex-edit { padding: 6px 12px; flex-shrink: 0; }
.training-add { width: 100%; }
/* Charts that sit under a panel's list rather than being the whole panel, so
they need the separation a list-then-chart stack doesn't get for free. */
.training-chart { margin-top: 16px; }
.walk-chart { margin-top: 16px; }
/* ---------- collapsible panels ---------- */
section.collapsible > h2 {