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:
@@ -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)`;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user