Give walks the two sleep pattern views
Walks had the overview tile, the window list and minutes per day, but not the two views that answer the questions sleep already answers: when in the day does it actually happen, and is today keeping up. "When … walks" is the sleep actogram drawn from walk windows, so the drawing moves into drawActogram(svgId, windows, barCls) and both timelines become one line each. Nothing about that picture was ever sleep-specific — it clips windows to day rows and shades them — so the third caller costs nothing. "Walk trend" is the sleep trend's shape with three deliberate differences. Today and yesterday are built from their own walk boundaries rather than hourly samples, so the steps stay square: a 30-minute walk is a step, not an hour-wide ramp. The average keeps hourly sampling, since a mean over many days is a smooth reference with no steps of its own to preserve. And there is no projected tail — sleep is a state the puppy drifts back into, so continuing today's line by what the average day adds is a fair guess, while walks are decisions, and projecting them would be predicting the handler, not the dog. The goal is a line, not a band: the five-minute rule gives one number to reach with no upper bound a band would imply. With no projection to carry it, the ✓ that marks being on track goes on today's own chip. The axis stays linear where the sleep trend stretches above 10h. That stretch exists because sleep's interesting hours crowd a 16h goal; a walk total reads the same at 10 minutes as at 60. Both panels sit with the other walk views rather than beside their sleep twins, following the grouping-by-subject the charts just moved to, and both hide themselves until a walk exists so they cost nothing to anyone not logging them.
This commit is contained in:
@@ -1035,6 +1035,8 @@ input.switch:checked::after { transform: translateX(18px); }
|
||||
stroke-width: 0.5;
|
||||
}
|
||||
.chart-svg .stl-sleep { fill: var(--sleep); }
|
||||
/* Same actogram, walk windows instead of sleep ones (see drawActogram). */
|
||||
.chart-svg .wtl-walk { fill: var(--walk); }
|
||||
.chart-svg .stl-today { fill: var(--accent); font-weight: 600; }
|
||||
/* Selected day: accent ring on the row's track + accent label. */
|
||||
.chart-svg .stl-track.stl-selected {
|
||||
@@ -1085,6 +1087,41 @@ input.switch:checked::after { transform: translateX(18px); }
|
||||
.lg.trend-projected .sw { background: color-mix(in srgb, var(--sleep) 40%, var(--surface)); }
|
||||
.lg.trend-yesterday .sw { background: var(--eat); }
|
||||
.lg.trend-avg .sw { background: var(--weight); }
|
||||
|
||||
/* Walk trend: the sleep trend's line weights, in the walk palette. The goal is
|
||||
a single line rather than a band — a walk total is a target to reach, with no
|
||||
upper bound to overshoot. */
|
||||
.chart-svg .wtrend-today {
|
||||
stroke: var(--walk);
|
||||
stroke-width: 2.5;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.chart-svg .wtrend-yesterday {
|
||||
stroke: var(--eat);
|
||||
stroke-width: 1.5;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.chart-svg .wtrend-avg {
|
||||
stroke: var(--weight);
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 4 3;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.chart-svg .wtrend-goal {
|
||||
stroke: var(--walk);
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 2 3;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.lg.wtrend-today .sw { background: var(--walk); }
|
||||
.lg.wtrend-yesterday .sw { background: var(--eat); }
|
||||
.lg.wtrend-avg .sw { background: var(--weight); }
|
||||
.lg.wtrend-goal .sw { background: color-mix(in srgb, var(--walk) 45%, var(--surface)); }
|
||||
.lg[hidden] { display: none; }
|
||||
|
||||
.chart-svg .hm-cell { stroke: none; }
|
||||
|
||||
Reference in New Issue
Block a user