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

Show each curve's slept hours in the Sleep trend legend

Browse Source 
Today, Yesterday and the N-day average chips now carry their totals
(e.g. "Yesterday 12.8h"), matching the projected chip.
This commit is contained in:
Alexander Heldt
2026-07-15 10:43:22 +00:00
parent ab0e51108c
commit 0e24ac989d
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.js
+19 -12
View File
@@ -1394,18 +1394,25 @@
const curves = sleepTrendCurves(events);
drawSleepTrendChart(curves);
// Drop legend chips for missing reference lines (no data for them yet),
// and keep the average chip's label in step with the chart-days picker.
const yLegend = document.getElementById("legend-trend-yesterday");
const aLegend = document.getElementById("legend-trend-avg");
const aText = document.getElementById("legend-trend-avg-text");
const pLegend = document.getElementById("legend-trend-projected");
const pText = document.getElementById("legend-trend-projected-text");
if (yLegend) yLegend.hidden = !curves.yesterday;
if (aLegend) aLegend.hidden = !curves.avg;
if (aText) aText.textContent = `${curves.avgDays}-day avg`;
if (pLegend) pLegend.hidden = !curves.projected;
if (pText && curves.projected) {
pText.textContent = `Projected ~${curves.projected[curves.projected.length - 1].y.toFixed(1)}h`;
// keep the average chip's label in step with the chart-days picker, and
// write each curve's slept-hours total into its chip.
const chip = (id) => document.getElementById(id);
const hrs = (pts) => `${pts[pts.length - 1].y.toFixed(1)}h`;
chip("legend-trend-today-text").textContent = `Today ${hrs(curves.today)}`;
const yLegend = chip("legend-trend-yesterday");
yLegend.hidden = !curves.yesterday;
if (curves.yesterday) {
chip("legend-trend-yesterday-text").textContent = `Yesterday ${hrs(curves.yesterday)}`;
}
const aLegend = chip("legend-trend-avg");
aLegend.hidden = !curves.avg;
if (curves.avg) {
chip("legend-trend-avg-text").textContent = `${curves.avgDays}-day avg ${hrs(curves.avg)}`;
}
const pLegend = chip("legend-trend-projected");
pLegend.hidden = !curves.projected;
if (curves.projected) {
chip("legend-trend-projected-text").textContent = `Projected ~${hrs(curves.projected)}`;
}
}
src/changelog.json
+1
View File
@@ -1,4 +1,5 @@
[
{ "date": "2026-07-15", "text": "The Sleep trend legend shows the hours for each line — Today, Yesterday and the average, next to the projection" },
{ "date": "2026-07-15", "text": "The Sleep trend chart projects where today will land by midnight — a dashed tail continues today's line following the average day's rhythm" },
{ "date": "2026-07-15", "text": "The charts highlight the selected day, so it's easy to spot which bars, rows and cells you're looking at" },
{ "date": "2026-07-15", "text": "New Sleep trend chart: today's running sleep total through the day, against yesterday and the average over your chart window (7/14/30 days)" },
src/index.html
+2 -2
View File
@@ -224,9 +224,9 @@
<h2>Sleep trend</h2>
<svg id="chart-sleep-trend" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Cumulative sleep hours through the day: today, yesterday, the recent average and the projected end-of-day total"></svg>
<div class="legend">
<span class="lg trend-today"><span class="sw"></span>Today</span>
<span class="lg trend-today"><span class="sw"></span><span id="legend-trend-today-text">Today</span></span>
<span class="lg trend-projected" id="legend-trend-projected" hidden><span class="sw"></span><span id="legend-trend-projected-text">Projected</span></span>
<span class="lg trend-yesterday" id="legend-trend-yesterday"><span class="sw"></span>Yesterday</span>
<span class="lg trend-yesterday" id="legend-trend-yesterday"><span class="sw"></span><span id="legend-trend-yesterday-text">Yesterday</span></span>
<span class="lg trend-avg" id="legend-trend-avg"><span class="sw"></span><span id="legend-trend-avg-text">7-day avg</span></span>
</div>
<p class="muted-note">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.</p>