From e037ab2716c4fe36f6cff6c6202a0cad4aee9d86 Mon Sep 17 00:00:00 2001 From: Alexander Heldt Date: Mon, 31 Aug 2026 21:51:33 +0000 Subject: [PATCH] Group the charts by subject, not by window MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit "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. --- src/app.js | 2 -- src/changelog.json | 1 + src/index.html | 59 ++++++++++++++++++++++++++-------------------- src/style.css | 3 +++ 4 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/app.js b/src/app.js index ec2928a..7e6ddd1 100644 --- a/src/app.js +++ b/src/app.js @@ -1258,8 +1258,6 @@ // Sync every "(last N days)" header and the picker's active button. function renderChartWindow() { const n = chartDays(); - const title = document.getElementById("daily-charts-title"); - if (title) title.textContent = `Last ${n} days`; document.querySelectorAll("[data-chart-days-label]").forEach(el => { el.textContent = `(last ${n} days)`; }); diff --git a/src/changelog.json b/src/changelog.json index c06696c..1f73a1e 100644 --- a/src/changelog.json +++ b/src/changelog.json @@ -1,4 +1,5 @@ [ + { "date": "2026-08-31", "text": "The charts are grouped by subject instead of all sharing one “Last 7 days” panel. Sleep hours per day is now its own Sleep panel, sitting just above the “When … sleeps” timeline with the rest of the sleep views. Daily counts and Food have joined the by-hour chart in one “Pees, poos & meals” panel, so how many a day, how much food went with them and what hours they fall in read together. Minutes walked per day has moved into the Walks panel. The 7d / 14d / 30d picker now sits in the Sleep panel and still sets the window for every one of these charts" }, { "date": "2026-08-31", "text": "A sleep or walk pair is now tied together in the History log by a dotted rail down the side, in that pair's colour, running from the start row to the end row. Anything logged in between sits inside the bracket, so a pee taken on a walk reads as having happened during it. A pair still in progress, or one that ran over from yesterday, leaves its end of the rail open" }, { "date": "2026-08-31", "text": "Added walks: tap 🦮 Walk start when you head out and 🏁 Walk end when you get home, and the time in between is counted as exercise. The pair gets its own row under the sleep buttons. Today's total and the number of walks show in the overview, every walk of the day is listed in a new Walks section (with the age-based rule of thumb of about five minutes per month of age, twice a day), and the daily charts gain a “Walks (minutes)” bar chart once you have logged one. Like sleep, only the boundary that makes sense is tappable — no walk running means Walk end is greyed out" }, { "date": "2026-08-31", "text": "The Log event buttons are grouped into rows now instead of flowing into one grid: 😴 Sleep start and ⏰ Sleep end side by side on their own row, then 💧 Pee and 💩 Poo, and last the three that ask for a value — 🍽️ Ate / ⚖️ Weight / 📝 Note — three across. The two halves of a sleep pair can no longer end up split across a wrap, and no button is left stranded alone on the last row. The weigh-in button is now just ⚖️ Weight, which fits the narrower slot; weigh-ins read as “Weight” in the history log to match" }, diff --git a/src/index.html b/src/index.html index 9a20298..ae2137d 100644 --- a/src/index.html +++ b/src/index.html @@ -237,36 +237,27 @@ + -
-

Last 7 days

+ +
+

Sleep (last 7 days)

-
Sleep (hours)
+
Hours per day
-
-
Daily counts
- -
- - - -
-
- -
@@ -288,11 +279,29 @@

Hours slept so far at each point of the day, against yesterday and the average over the picked chart window. The dashed tail continues today's line the way the average day usually plays out. The axis is stretched above 10h to give the hours around the goal more room.

-
-

By hour of day (last 7 days)

- -

-

Darker = happens more often at that hour.

+ +
+

Pees, poos & meals (last 7 days)

+
+
Daily counts
+ +
+ + + +
+
+ +
+
By hour of day
+ +

+

Darker = happens more often at that hour.

+
diff --git a/src/style.css b/src/style.css index b304afd..4cb514f 100644 --- a/src/style.css +++ b/src/style.css @@ -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 {