From 0e24ac989dc4fda8c9d7cf961c20e92cbb04387e Mon Sep 17 00:00:00 2001 From: Alexander Heldt Date: Wed, 15 Jul 2026 10:43:22 +0000 Subject: [PATCH] Show each curve's slept hours in the Sleep trend legend Today, Yesterday and the N-day average chips now carry their totals (e.g. "Yesterday 12.8h"), matching the projected chip. --- src/app.js | 31 +++++++++++++++++++------------ src/changelog.json | 1 + src/index.html | 4 ++-- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/app.js b/src/app.js index 6be6634..307849f 100644 --- a/src/app.js +++ b/src/app.js @@ -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)}`; } } diff --git a/src/changelog.json b/src/changelog.json index 525eeff..77b355d 100644 --- a/src/changelog.json +++ b/src/changelog.json @@ -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)" }, diff --git a/src/index.html b/src/index.html index f5021c7..497a900 100644 --- a/src/index.html +++ b/src/index.html @@ -224,9 +224,9 @@

Sleep trend

- Today + Today - Yesterday + Yesterday 7-day avg

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.