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

Let a day be left out of the stats

Browse Source 
Every logged day was treated as equally trustworthy, and they aren't. A day
someone else had the puppy leaves a thin record that reads exactly like a real
one — five hours of sleep, two pees, no walk — and then drags down the average,
widens the longest gap in the Timing panel and puts a trough in every chart
that never happened. "Not counted", in the overview panel's heading, takes the
day you are looking at out of everything that aggregates across days.

Nothing is deleted or hidden. The day's own overview, history and sleep & wake
list are exactly as they were, dimmed and labelled; navigate to it and it is
all still there. Only the cross-day views stop seeing it, and weight and notes
keep counting wherever they fall — a weigh-in and a vet note are facts you
recorded, not behaviour a sparse logger distorts.

The mark is an ordinary event, the way a training session is. That was the
whole reason to do it this way: a set of marks that sync per-item with
last-write-wins and tombstones is exactly what the event contract already
provides, so un-marking is a delete, offline works, and two devices marking the
same day resolve themselves. An excluded_days table would have meant a table,
an endpoint, a request/response pair and a client cache to re-derive semantics
already in hand. Every renderer selects events by type, so a new type is inert
everywhere it isn't wanted; only the History log has to filter it out, being
the one view that shows whatever it is handed.

render() already computed the event list once and fanned it out, which made the
seam a single place: day-scoped panels keep the full list, weight and notes
keep it too, and the seven cross-day renderers take a counted one.

Filtering alone gets two things wrong, and those are most of the diff.

An empty slot lies. A marked day with no events draws a zero bar, which reads
as "the puppy barely slept" — precisely the misreading the mark exists to
prevent. So weeklyData zeroes the day's figures and flags it, and the four bar
charts, both actograms and the training grid paint a hatch in the slot instead.
Zeroing centrally rather than in each chart means every axis maximum, total and
tooltip downstream is already right. The slot stays: dropping it would make
consecutive bars stop being consecutive days.

Gaps balloon. gapsBetween subtracts consecutive events, so with a day's events
gone Tuesday's last pee sits next to Thursday's first and the subtraction
invents thirty hours — worse for the panel than the sparse day ever was. Any
gap whose interval touches a marked day is therefore discarded rather than
measured. Sleep and walk durations need no such care: sleepMsInRange and
walkMsInRange already clip to the day being measured, so a nap running in from
a marked day contributes only its counted part.

Both trend charts skip marked days explicitly rather than leaning on their
existing "any sleep at all" guard, which would have let a nap crossing midnight
give a marked day a non-zero total and sneak it back into the average.

Owner-only, alongside the rest of what a guest may not decide: a sitter should
not be able to rule their own thin day out, nor quietly take a good one out of
the averages. The server drops day-excluded events arriving on a guest session;
the client hides the control to match.
This commit is contained in:
Alexander Heldt
2026-09-07 19:01:06 +00:00
parent e22031ed4f
commit da68b733e4
7 changed files with 389 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.js
+231 -61
View File
@@ -464,6 +464,53 @@
return d;
}
// ---------- days that don't count ----------
// Not every logged day is equally trustworthy: a day someone else had the
// puppy produces a thin record that reads exactly like a real one, and then
// drags down every average. Marking a day "not counted" keeps its data
// untouched and fully visible on the day itself, but takes it out of
// everything that aggregates across days.
//
// A mark is an ordinary event, the way a training session is: it rides the
// existing sync with per-item last-write-wins and tombstones (un-marking is
// just a delete), so it needs no table, endpoint or contract of its own.
// Timestamped at noon so the day it lands on is unambiguous under the same
// ymd() bucketing every other event uses.
const EXCLUDED_TYPE = "day-excluded";
// Behaviour is what a sparse logger distorts. A weigh-in and a note are
// records of fact, so they keep counting even on a day that doesn't.
const ALWAYS_COUNTS = new Set(["weight", "note"]);
// Refreshed once per render() and read like chartDays() — the chart drawers
// need to know which day slots to hatch, not just which events to drop.
let excludedSet = new Set();
function excludedDays(events) {
return new Set(
events.filter(e => e.type === EXCLUDED_TYPE).map(e => ymd(new Date(e.at)))
);
}
const isExcluded = (date) => excludedSet.has(ymd(date));
// The event list the cross-day panels see.
function countedEvents(events) {
if (excludedSet.size === 0) return events;
return events.filter(e =>
ALWAYS_COUNTS.has(e.type) || !excludedSet.has(ymd(new Date(e.at))));
}
// True if any part of [from, to] falls on an excluded day. Used to throw away
// measurements that reach across one — see gapsBetween.
function spansExcluded(from, to) {
if (excludedSet.size === 0) return false;
for (let d = startOfDay(new Date(from)); d.getTime() <= to; d.setDate(d.getDate() + 1)) {
if (isExcluded(d)) return true;
}
return false;
}
function formatTime(ts) {
return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
}
@@ -749,7 +796,16 @@
.map(e => e.at)
.sort((a, b) => a - b);
const gaps = [];
for (let i = 1; i < times.length; i++) gaps.push(times[i] - times[i - 1]);
for (let i = 1; i < times.length; i++) {
// A gap reaching across a day that doesn't count is not a real gap: the
// events in between were dropped, so Tuesday's last pee now sits next to
// Thursday's first and the subtraction invents thirty hours. Discarding
// the pair is the only honest answer — measuring it would blow out the
// "longest" figure far worse than the sparse day this feature exists to
// take out of the numbers.
if (spansExcluded(times[i - 1], times[i])) continue;
gaps.push(times[i] - times[i - 1]);
}
return gaps.sort((a, b) => a - b);
}
@@ -1109,7 +1165,9 @@
function renderHistory(events) {
const day = selectedDay();
const chronological = eventsForDay(events, day);
// The "not counted" mark is bookkeeping about the day, not something that
// happened to the puppy, so it never appears as a row in the log.
const chronological = eventsForDay(events, day).filter(e => e.type !== EXCLUDED_TYPE);
const rails = historyRails(events, chronological, day);
const dayEvents = [...chronological].reverse();
const exNames = exerciseNames();
@@ -1300,11 +1358,18 @@
d.setDate(d.getDate() - i);
const from = startOfDay(d).getTime();
const to = (i === 0) ? now : endOfDay(d).getTime();
const sleepMs = sleepMsInRange(events, from, to);
const dayEvents = eventsForDay(events, d);
// A day marked "not counted" keeps its slot on the axis — dropping it
// would make consecutive bars stop being consecutive days — but carries
// no figures. Zeroing them here rather than in each chart means every
// axis maximum, total and tooltip downstream is already right, and the
// drawers only have to decide what to paint in the empty slot.
const excluded = isExcluded(d);
const sleepMs = excluded ? 0 : sleepMsInRange(events, from, to);
const dayEvents = excluded ? [] : eventsForDay(events, d);
days.push({
date: d,
ymd: ymd(d),
excluded,
sleepHours: sleepMs / 3_600_000,
pees: dayEvents.filter(e => e.type === "pee").length,
poos: dayEvents.filter(e => e.type === "poo").length,
@@ -1312,12 +1377,21 @@
grams: dayEvents
.filter(e => e.type === "eat" && Number.isFinite(e.grams))
.reduce((s, e) => s + e.grams, 0),
walkMinutes: walkMsInRange(events, from, to) / 60_000,
walkMinutes: excluded ? 0 : walkMsInRange(events, from, to) / 60_000,
});
}
return days;
}
// A day that doesn't count gets a hatched column where its bar would be, so
// the gap reads as deliberate rather than as a day the puppy barely did
// anything. Shared by all four daily bar charts, which differ only in height.
function excludedSlot(d, x, barW, top, innerH) {
const title = `${d.date.toLocaleDateString(undefined, { weekday: "long", month: "short", day: "numeric" })} — not counted`;
return `<rect class="bar bar-excluded" data-day="${d.ymd}" x="${x}" y="${top}" ` +
`width="${barW}" height="${innerH}" rx="3"><title>${escapeText(title)}</title></rect>`;
}
function dayLabel(date, isToday) {
if (isToday) return "Today";
return date.toLocaleDateString(undefined, { weekday: "short" });
@@ -1421,11 +1495,15 @@
if (isSel) {
parts.push(`<rect class="day-highlight" x="${(x - gap / 2).toFixed(1)}" y="${MT}" width="${(barW + gap).toFixed(1)}" height="${innerH}" rx="3"/>`);
}
parts.push(
`<rect class="bar bar-sleep ${isToday ? "" : "bar-faded"}" data-day="${d.ymd}" ` +
`x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="3">` +
`<title>${escapeText(title)}</title></rect>`
);
if (d.excluded) {
parts.push(excludedSlot(d, x, barW, MT, innerH));
} else {
parts.push(
`<rect class="bar bar-sleep ${isToday ? "" : "bar-faded"}" data-day="${d.ymd}" ` +
`x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="3">` +
`<title>${escapeText(title)}</title></rect>`
);
}
// The selected day always gets a label (accent-colored), even on wide
// windows that would otherwise skip it.
if (showDayLabel(i, days.length) || isSel) {
@@ -1477,18 +1555,23 @@
if (isSel) {
parts.push(`<rect class="day-highlight" x="${(groupX - groupGap / 2).toFixed(1)}" y="${MT}" width="${(groupW + groupGap).toFixed(1)}" height="${innerH}" rx="3"/>`);
}
series.forEach((s, j) => {
const val = d[s.key];
const x = groupX + j * (barW + innerBarGap);
const h = (val / yMax) * innerH;
const y = MT + innerH - h;
const title = `${d.date.toLocaleDateString(undefined, { weekday: "long", month: "short", day: "numeric" })} — ${s.label}: ${val}`;
parts.push(
`<rect class="bar ${s.cls} ${isToday ? "" : "bar-faded"}" data-day="${d.ymd}" ` +
`x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="2">` +
`<title>${escapeText(title)}</title></rect>`
);
});
if (d.excluded) {
// One hatch across the whole group rather than three empty bars.
parts.push(excludedSlot(d, groupX, groupW, MT, innerH));
} else {
series.forEach((s, j) => {
const val = d[s.key];
const x = groupX + j * (barW + innerBarGap);
const h = (val / yMax) * innerH;
const y = MT + innerH - h;
const title = `${d.date.toLocaleDateString(undefined, { weekday: "long", month: "short", day: "numeric" })} — ${s.label}: ${val}`;
parts.push(
`<rect class="bar ${s.cls} ${isToday ? "" : "bar-faded"}" data-day="${d.ymd}" ` +
`x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="2">` +
`<title>${escapeText(title)}</title></rect>`
);
});
}
if (showDayLabel(i, days.length) || isSel) {
parts.push(
@@ -1539,11 +1622,15 @@
if (isSel) {
parts.push(`<rect class="day-highlight" x="${(x - gap / 2).toFixed(1)}" y="${MT}" width="${(barW + gap).toFixed(1)}" height="${innerH}" rx="3"/>`);
}
parts.push(
`<rect class="bar bar-eat ${isToday ? "" : "bar-faded"}" data-day="${d.ymd}" ` +
`x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="3">` +
`<title>${escapeText(title)}</title></rect>`
);
if (d.excluded) {
parts.push(excludedSlot(d, x, barW, MT, innerH));
} else {
parts.push(
`<rect class="bar bar-eat ${isToday ? "" : "bar-faded"}" data-day="${d.ymd}" ` +
`x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="3">` +
`<title>${escapeText(title)}</title></rect>`
);
}
if (showDayLabel(i, days.length) || isSel) {
parts.push(
`<text class="${isSel ? "day-label-sel" : ""}" x="${x + barW / 2}" y="${H - MB + 14}" text-anchor="middle">` +
@@ -1593,11 +1680,15 @@
if (isSel) {
parts.push(`<rect class="day-highlight" x="${(x - gap / 2).toFixed(1)}" y="${MT}" width="${(barW + gap).toFixed(1)}" height="${innerH}" rx="3"/>`);
}
parts.push(
`<rect class="bar bar-walk ${isToday ? "" : "bar-faded"}" data-day="${d.ymd}" ` +
`x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="3">` +
`<title>${escapeText(title)}</title></rect>`
);
if (d.excluded) {
parts.push(excludedSlot(d, x, barW, MT, innerH));
} else {
parts.push(
`<rect class="bar bar-walk ${isToday ? "" : "bar-faded"}" data-day="${d.ymd}" ` +
`x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="3">` +
`<title>${escapeText(title)}</title></rect>`
);
}
if (showDayLabel(i, days.length) || isSel) {
parts.push(
`<text class="${isSel ? "day-label-sel" : ""}" x="${x + barW / 2}" y="${H - MB + 14}" text-anchor="middle">` +
@@ -1685,19 +1776,27 @@
parts.push(`<rect class="stl-track${isSel ? " stl-selected" : ""}" x="${ML}" y="${y.toFixed(1)}" width="${innerW}" height="${rowH.toFixed(1)}" rx="2"/>`);
for (const wdw of windows) {
const s = Math.max(wdw.start, dayStart);
const e = Math.min(wdw.end, dayEnd);
if (e <= s) continue;
const x = xOf((s - dayStart) / dayMs);
const wpx = ((e - s) / dayMs) * innerW;
parts.push(`<rect class="${barCls}" x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${Math.max(0.6, wpx).toFixed(1)}" height="${rowH.toFixed(1)}" rx="1.5"/>`);
// A day that doesn't count keeps its row — the rows are a calendar, so
// dropping one would misalign every day above it — but is hatched right
// across instead of showing the sparse windows that made it untrustworthy.
if (isExcluded(day)) {
parts.push(`<rect class="bar-excluded" x="${ML}" y="${y.toFixed(1)}" width="${innerW}" height="${rowH.toFixed(1)}" rx="2"/>`);
} else {
for (const wdw of windows) {
const s = Math.max(wdw.start, dayStart);
const e = Math.min(wdw.end, dayEnd);
if (e <= s) continue;
const x = xOf((s - dayStart) / dayMs);
const wpx = ((e - s) / dayMs) * innerW;
parts.push(`<rect class="${barCls}" x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${Math.max(0.6, wpx).toFixed(1)}" height="${rowH.toFixed(1)}" rx="1.5"/>`);
}
}
const label = isToday ? "Today" : `${day.toLocaleDateString(undefined, { weekday: "short" })} ${day.getDate()}`;
parts.push(`<text class="stl-day ${isToday ? "stl-today" : ""}${isSel ? " stl-sel" : ""}" x="${ML - 6}" y="${(y + rowH / 2 + 3).toFixed(1)}" text-anchor="end">${escapeText(label)}</text>`);
const title = day.toLocaleDateString(undefined, { weekday: "long", month: "short", day: "numeric" });
const dateText = day.toLocaleDateString(undefined, { weekday: "long", month: "short", day: "numeric" });
const title = isExcluded(day) ? `${dateText} — not counted` : dateText;
parts.push(`<rect class="bar stl-hit" data-day="${ymd(day)}" x="${ML}" y="${y.toFixed(1)}" width="${innerW}" height="${rowH.toFixed(1)}"><title>${escapeText(title)}</title></rect>`);
}
@@ -1751,11 +1850,12 @@
};
const day = selectedDay();
const isToday = ymd(day) === ymd(new Date());
const dayStartTs = (daysAgo) => {
const dayAgo = (daysAgo) => {
const d = startOfDay(day);
d.setDate(d.getDate() - daysAgo);
return d.getTime();
return d;
};
const dayStartTs = (daysAgo) => dayAgo(daysAgo).getTime();
const pointsAt = (start, stops) =>
stops.map(t => ({ x: (t - start) / HOUR, y: walkedMs(start, t) / MIN }));
@@ -1779,14 +1879,17 @@
const totalOf = (pts) => pts[pts.length - 1].y;
const today = curveFor(dayStartTs(0), isToday ? Date.now() : null);
// Same as the sleep trend: a day that doesn't count is dropped as a
// comparison rather than drawn flat at zero.
const prev = curveFor(dayStartTs(1));
const yesterday = totalOf(prev) > 0 ? prev : null;
const yesterday = (!isExcluded(dayAgo(1)) && totalOf(prev) > 0) ? prev : null;
// Mean of the last N days, skipping days with no walk at all so a gap in
// logging doesn't drag the average toward zero.
// Mean of the last N days, skipping days that don't count and days with no
// walk at all, so a gap in logging doesn't drag the average toward zero.
const avgDays = chartDays();
const dayCurves = [];
for (let i = 1; i <= avgDays; i++) {
if (isExcluded(dayAgo(i))) continue;
const c = hourlyFor(dayStartTs(i));
if (c[24].y > 0) dayCurves.push(c);
}
@@ -1995,11 +2098,12 @@
};
const day = selectedDay();
const isToday = ymd(day) === ymd(new Date());
const dayStartTs = (daysAgo) => {
const dayAgo = (daysAgo) => {
const d = startOfDay(day);
d.setDate(d.getDate() - daysAgo);
return d.getTime();
return d;
};
const dayStartTs = (daysAgo) => dayAgo(daysAgo).getTime();
// capTs (today only) truncates the curve at "now" with a final fractional
// point, so the line visibly ends where the day currently stands.
const curveFor = (start, capTs) => {
@@ -2018,14 +2122,22 @@
// A past day is complete, so its curve runs the full 24h uncapped.
const today = curveFor(dayStartTs(0), isToday ? Date.now() : null);
// A day that doesn't count is no comparison at all, so it is dropped
// outright rather than drawn as a flat line at zero. Checked explicitly
// rather than leaning on the "any sleep at all" guard below: a nap running
// in from the previous, counted day would give an excluded day a non-zero
// total and sneak it back in.
const yesterdayCurve = curveFor(dayStartTs(1));
const yesterday = yesterdayCurve[24].y > 0 ? yesterdayCurve : null;
const yesterday =
(!isExcluded(dayAgo(1)) && yesterdayCurve[24].y > 0) ? yesterdayCurve : null;
// Mean of the last N full days, skipping days with no sleep at all so a
// young log (or a tracking gap) doesn't drag the average toward zero.
// Mean of the last N full days, skipping days that don't count and days
// with no sleep at all, so a young log (or a tracking gap) doesn't drag the
// average toward zero.
const avgDays = chartDays();
const dayCurves = [];
for (let i = 1; i <= avgDays; i++) {
if (isExcluded(dayAgo(i))) continue;
const c = curveFor(dayStartTs(i));
if (c[24].y > 0) dayCurves.push(c);
}
@@ -2427,14 +2539,26 @@
const max = Math.max(1, ...counts[r]);
for (let c = 0; c < N; c++) {
const n = counts[r][c];
const op = n === 0 ? 0.06 : 0.35 + 0.65 * (n / max);
const d = dayList[c];
const title = `${x.name} · ${d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" })}: ${n}`;
const dateText = d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
// A day that doesn't count would otherwise show as the palest cell —
// indistinguishable from "trained nothing that day", which is the one
// reading the mark is there to rule out.
if (isExcluded(d)) {
parts.push(
`<rect class="bar bar-excluded" data-day="${ymd(d)}" ` +
`x="${(ML + c * cellW).toFixed(1)}" y="${y.toFixed(1)}" ` +
`width="${(cellW - 1.5).toFixed(1)}" height="${rowH}" rx="2">` +
`<title>${escapeText(`${x.name} · ${dateText}: not counted`)}</title></rect>`
);
continue;
}
const op = n === 0 ? 0.06 : 0.35 + 0.65 * (n / max);
parts.push(
`<rect class="bar hm-cell hm-training" data-day="${ymd(d)}" ` +
`x="${(ML + c * cellW).toFixed(1)}" y="${y.toFixed(1)}" ` +
`width="${(cellW - 1.5).toFixed(1)}" height="${rowH}" rx="2" fill-opacity="${op.toFixed(2)}">` +
`<title>${escapeText(title)}</title></rect>`
`<title>${escapeText(`${x.name} · ${dateText}: ${n}`)}</title></rect>`
);
}
const name = x.name.length > 12 ? x.name.slice(0, 11) + "…" : x.name;
@@ -2553,6 +2677,40 @@
? "Today's overview"
: day.toLocaleDateString(undefined, { weekday: "long", month: "short", day: "numeric" });
}
renderExcludeToggle(day);
}
// The "not counted" switch, and the overview's own dimmed state while it is
// on, so the mark is legible from the day itself and not only from the charts.
function renderExcludeToggle(day) {
const btn = document.getElementById("exclude-day");
const note = document.getElementById("excluded-note");
const panel = document.querySelector('[data-panel="overview"]');
// Deciding a day doesn't count is a judgment about the owner's own record,
// so it sits with the rest of what a guest cannot do.
btn.hidden = isGuest();
const off = isExcluded(day);
btn.setAttribute("aria-pressed", String(off));
btn.classList.toggle("active", off);
note.hidden = !off;
panel.classList.toggle("day-excluded", off);
}
// Marking is adding an event; un-marking is deleting it — so both ride the
// ordinary sync, offline included, with no special casing anywhere.
function toggleExcludedDay(day) {
const key = ymd(day);
const existing = live().filter(
e => e.type === EXCLUDED_TYPE && ymd(new Date(e.at)) === key);
if (existing.length > 0) {
// Plural in principle: two devices could each mark the same day offline.
for (const e of existing) deleteEvent(e.id);
} else {
// Noon, so the day it lands on survives any clock or timezone wobble.
const at = startOfDay(day);
at.setHours(12, 0, 0, 0);
addEvent(EXCLUDED_TYPE, "", at.getTime());
}
}
function renderHeader() {
@@ -2611,25 +2769,34 @@
function render() {
const events = live();
// Which days don't count is read straight off the event list, and settles
// before anything draws — the chart drawers consult excludedSet directly.
excludedSet = excludedDays(events);
const counted = countedEvents(events);
renderHeader();
renderDayBar();
renderChartWindow();
// Day-scoped panels get the full list: you navigated to this day, so you
// should see what is actually on it, marked or not.
renderBigClock(events);
renderActionHints(events);
renderStats(events);
renderLasts(events);
renderTiming(events);
renderSleepWake(events);
renderWalks(events);
renderWeekly(events);
renderSleepTimeline(events);
renderWalkPatterns(events);
renderSleepTrend(events);
renderHourHeatmap(events);
renderTraining(events);
renderHistory(events);
// Weight and notes are records of fact rather than behaviour a sparse
// logger distorts, so they count everywhere regardless.
renderWeight(events);
renderNotes(events);
renderHistory(events);
// Everything that aggregates across days works from the counted list.
renderTiming(counted);
renderWeekly(counted);
renderSleepTimeline(counted);
renderWalkPatterns(counted);
renderSleepTrend(counted);
renderHourHeatmap(counted);
renderTraining(counted);
}
// ---------- sync ----------
@@ -4556,6 +4723,9 @@
dayPicker.value = ymd(new Date());
render();
});
document.getElementById("exclude-day").addEventListener("click", () => {
toggleExcludedDay(selectedDay()); // addEvent/deleteEvent re-render for us
});
// Clicking the status pill forces an immediate sync.
statusEl.style.cursor = "pointer";