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
|
|
@ -32,7 +32,12 @@ export function DayChart({ labels, series }: { labels: string[]; series: ChartSe
|
|||
height: 220,
|
||||
legend: { show: series.length > 1 },
|
||||
cursor: { drag: { x: false, y: false } },
|
||||
scales: { x: { time: false } },
|
||||
// distr: 2 (ordinal) — the default (1, linear) lets uPlot's tick
|
||||
// generator pick fractional increments on a short/sparse series,
|
||||
// and the label lookup below (`labels[v]`) misses on a non-integer
|
||||
// v, rendering a blank tick. Ordinal forces whole-number splits,
|
||||
// which is what an index-based x-axis always wants anyway (#55).
|
||||
scales: { x: { time: false, distr: 2 } },
|
||||
axes: [
|
||||
{ stroke: '#888', grid: { stroke: '#333' }, values: (_u, vals) => vals.map(v => labels[v] ?? '') },
|
||||
{ stroke: '#888', grid: { stroke: '#333' } },
|
||||
|
|
|
|||
|
|
@ -135,26 +135,40 @@ function Dashboard({ data, isAdmin, onReset }: { data: StatsData; isAdmin: boole
|
|||
// by_day/per_drink_by_day come pre-sorted from the server (by_day newest
|
||||
// first for the table below, per_drink_by_day oldest first for the
|
||||
// chart's left-to-right reading order) — no re-sort needed here.
|
||||
const revenueSeries = useMemo(
|
||||
() => [...data.by_day].reverse().map(d => ({ x: fmtDayShort(d.day), y: d.paid_cents / 100 })),
|
||||
[data.by_day]
|
||||
);
|
||||
const txSeries = useMemo(
|
||||
() => [...data.by_day].reverse().map(d => ({ x: fmtDayShort(d.day), y: d.tx_count })),
|
||||
[data.by_day]
|
||||
);
|
||||
//
|
||||
// Each of these produces the full {labels, series} shape DayChart wants,
|
||||
// memoized as one object (#55) — building `series`/`labels` as fresh
|
||||
// array/object literals inline in JSX on every render defeats DayChart's
|
||||
// effect (keyed on those props by reference, not deep-equality), so
|
||||
// Dashboard re-rendering for any unrelated reason (e.g. the isAdmin
|
||||
// check resolving after data already loaded) would destroy/recreate
|
||||
// every uPlot instance for no data-related reason.
|
||||
const revenueChart = useMemo(() => {
|
||||
const days = [...data.by_day].reverse();
|
||||
return { labels: days.map(d => fmtDayShort(d.day)), series: [{ name: 'Umsatz (€)', values: days.map(d => d.paid_cents / 100) }] };
|
||||
}, [data.by_day]);
|
||||
const txChart = useMemo(() => {
|
||||
const days = [...data.by_day].reverse();
|
||||
return { labels: days.map(d => fmtDayShort(d.day)), series: [{ name: 'Transaktionen', values: days.map(d => d.tx_count) }] };
|
||||
}, [data.by_day]);
|
||||
|
||||
// #45's two hourly readings — see the by_hour/by_hour_of_day comment on
|
||||
// computeStats() server-side for why they're separate. Revenue only
|
||||
// here (not also a tx-count variant like the per-day charts above) to
|
||||
// keep the page from growing a chart per metric per granularity; ask if
|
||||
// you want tx-count broken out hourly too.
|
||||
const hourlyRevenue = useMemo(
|
||||
() => data.by_hour.map(h => ({ x: fmtHour(h.hour), y: h.paid_cents / 100 })),
|
||||
const hourlyRevenueChart = useMemo(
|
||||
() => ({
|
||||
labels: data.by_hour.map(h => fmtHour(h.hour)),
|
||||
series: [{ name: 'Umsatz (€)', values: data.by_hour.map(h => h.paid_cents / 100) }],
|
||||
}),
|
||||
[data.by_hour]
|
||||
);
|
||||
const hourOfDayRevenue = useMemo(
|
||||
() => data.by_hour_of_day.map(h => ({ x: `${String(h.hour_of_day).padStart(2, '0')}h`, y: h.paid_cents / 100 })),
|
||||
const hourOfDayRevenueChart = useMemo(
|
||||
() => ({
|
||||
labels: data.by_hour_of_day.map(h => `${String(h.hour_of_day).padStart(2, '0')}h`),
|
||||
series: [{ name: 'Umsatz (€)', values: data.by_hour_of_day.map(h => h.paid_cents / 100) }],
|
||||
}),
|
||||
[data.by_hour_of_day]
|
||||
);
|
||||
|
||||
|
|
@ -187,24 +201,24 @@ function Dashboard({ data, isAdmin, onReset }: { data: StatsData; isAdmin: boole
|
|||
</div>
|
||||
|
||||
<h2>Umsatz pro Tag</h2>
|
||||
{revenueSeries.length === 0
|
||||
{revenueChart.labels.length === 0
|
||||
? <p class="muted">Noch keine Verkäufe</p>
|
||||
: <DayChart labels={revenueSeries.map(p => p.x)} series={[{ name: 'Umsatz (€)', values: revenueSeries.map(p => p.y) }]} />}
|
||||
: <DayChart labels={revenueChart.labels} series={revenueChart.series} />}
|
||||
|
||||
<h2>Transaktionen pro Tag</h2>
|
||||
{txSeries.length === 0
|
||||
{txChart.labels.length === 0
|
||||
? <p class="muted">Noch keine Verkäufe</p>
|
||||
: <DayChart labels={txSeries.map(p => p.x)} series={[{ name: 'Transaktionen', values: txSeries.map(p => p.y) }]} />}
|
||||
: <DayChart labels={txChart.labels} series={txChart.series} />}
|
||||
|
||||
<h2>Umsatz nach Stunde</h2>
|
||||
{hourlyRevenue.length === 0
|
||||
{hourlyRevenueChart.labels.length === 0
|
||||
? <p class="muted">Noch keine Verkäufe</p>
|
||||
: <DayChart labels={hourlyRevenue.map(p => p.x)} series={[{ name: 'Umsatz (€)', values: hourlyRevenue.map(p => p.y) }]} />}
|
||||
: <DayChart labels={hourlyRevenueChart.labels} series={hourlyRevenueChart.series} />}
|
||||
|
||||
<h2>Umsatz nach Tageszeit</h2>
|
||||
{hourOfDayRevenue.every(p => p.y === 0)
|
||||
{hourOfDayRevenueChart.series[0]!.values.every(v => v === 0)
|
||||
? <p class="muted">Noch keine Verkäufe</p>
|
||||
: <DayChart labels={hourOfDayRevenue.map(p => p.x)} series={[{ name: 'Umsatz (€)', values: hourOfDayRevenue.map(p => p.y) }]} />}
|
||||
: <DayChart labels={hourOfDayRevenueChart.labels} series={hourOfDayRevenueChart.series} />}
|
||||
|
||||
<h2>Top-Getränke im Verlauf</h2>
|
||||
{drinkTrend.series.length === 0
|
||||
|
|
|
|||
Loading…
Reference in a new issue