stats: zero-fill by_hour gaps; fix chart blank labels + unnecessary rebuilds
Closes #52, closes #55. Follow-ups from the #47 review round. #52: by_hour_of_day was already zero-filled across 0-23 (deliberately, so a quiet hour doesn't misread as missing data) but by_hour — the continuous timeline — wasn't. The client renders it on a categorical axis, so closed hours between two festival nights collapsed to nothing and the last hour of one night sat directly next to the first hour of the next. Now zero-filled between the first and last real bucket, same reasoning as by_hour_of_day. #55, two fixes: - DayChart's x scale is now explicitly ordinal (distr: 2). The prior default (linear) let uPlot's tick generator pick fractional increments on a short series, and the index-based label lookup misses on a non-integer tick, rendering a blank label. - The four per-day/per-hour chart data preps in Stats.tsx now produce a single memoized {labels, series} object each, instead of building fresh labels/series array literals inline in JSX on every render. DayChart's effect is keyed on those props by reference, so the old code destroyed and recreated every uPlot instance on any unrelated Dashboard re-render (e.g. the isAdmin check resolving after data already loaded). Both sides build/typecheck clean. Manually verified the zero-fill against a seeded DB with a 3-hour gap between two transactions — by_hour correctly returned 4 buckets (2 real, 2 zero-filled) in order.
This commit is contained in:
parent
6c2a938b91
commit
f576fbde3e
3 changed files with 73 additions and 23 deletions
|
|
@ -166,8 +166,39 @@ function computeStats(db: DB) {
|
|||
bumpHourAgg(hodAgg, r);
|
||||
}
|
||||
// Oldest first, same reasoning as perDrinkByDay below — this feeds a
|
||||
// left-to-right timeline chart.
|
||||
const byHour = [...hourMap.values()].sort((a, b) => a.hour.localeCompare(b.hour));
|
||||
// left-to-right timeline chart. Zero-filled between the first and last
|
||||
// bucket (issue #52) for the same reason byHourOfDay is zero-filled
|
||||
// below: the client renders this on a categorical axis, so a hidden gap
|
||||
// (closed hours between two festival nights) would sit flush against
|
||||
// real data and read as "quiet", not "closed". The fill walks the
|
||||
// bucket *strings* as if they were UTC wall-clock (Date.UTC, +1h steps)
|
||||
// rather than real local time — deliberately: this only needs a
|
||||
// monotonic hour sequence with correct calendar rollover, not real DST
|
||||
// handling, and reusing localHourBucket()'s actual local-time path here
|
||||
// would double-apply the DST question this file already takes a
|
||||
// documented, deliberate simplification on (see localHourBucket's own
|
||||
// comment in time.ts).
|
||||
const hourKeyToDate = (key: string): Date => {
|
||||
const [datePart, timePart] = key.split(' ');
|
||||
const [y, m, d] = datePart!.split('-').map(Number);
|
||||
const h = Number(timePart!.split(':')[0]);
|
||||
return new Date(Date.UTC(y!, m! - 1, d!, h));
|
||||
};
|
||||
const dateToHourKey = (d: Date): string => {
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:00`;
|
||||
};
|
||||
const sortedHourKeys = [...hourMap.keys()].sort();
|
||||
const byHour: Array<{ hour: string } & HourAgg> = [];
|
||||
if (sortedHourKeys.length > 0) {
|
||||
let cursor = hourKeyToDate(sortedHourKeys[0]!);
|
||||
const end = hourKeyToDate(sortedHourKeys[sortedHourKeys.length - 1]!);
|
||||
while (cursor <= end) {
|
||||
const key = dateToHourKey(cursor);
|
||||
byHour.push(hourMap.get(key) ?? { hour: key, tx_count: 0, paid_cents: 0, crew_count: 0, pfand_returns: 0 });
|
||||
cursor = new Date(cursor.getTime() + 60 * 60 * 1000);
|
||||
}
|
||||
}
|
||||
// Full 0-23 axis, zero-filled — a bar chart with silently missing hours
|
||||
// (e.g. no sales at 6am) reads as a data gap, not "zero", if the bucket
|
||||
// is just absent.
|
||||
|
|
|
|||
Loading…
Reference in a new issue