authorgravatar for admin@snappeh.comTristan Knight <admin@snappeh.com> 2026-08-17 19:45:13+01:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-17 14:45:13-04:00
loga4cc1367b03ee0c1dc2b50fceac81ef5e63212e2
tree05b84b9b1d182964926391251abea944899fccb8
parent33a8b07dd3b46e5cab8661a323faec20823ed9cb
signature Signed by PGP key B5690EEEBB952194

fix(web): show all usage breakdown periods (#7219)

1 files changed, 6 insertions(+), 4 deletions(-)

apps/web/src/components/usage/UsagePage.tsx+6-4
...@@ -61,8 +61,10 @@ export function UsagePage() {...@@ -61,8 +61,10 @@ export function UsagePage() {
61 : enumerateHourStarts(window.sinceTime, window.untilTime),61 : enumerateHourStarts(window.sinceTime, window.untilTime),
62 [window.sinceTime, window.untilTime],62 [window.sinceTime, window.untilTime],
63 );63 );
64 const recentPeriods = useMemo<readonly (DailyTotals | HourlyTotals)[]>(64 // Newest first: the window can run 90 periods, so the interesting end
65 () => (isPast24Hours ? merged.hourly : merged.daily).toReversed().slice(0, 8),65 // belongs at the top of the table.
66 const breakdownPeriods = useMemo<readonly (DailyTotals | HourlyTotals)[]>(
67 () => (isPast24Hours ? merged.hourly : merged.daily).toReversed(),
66 [isPast24Hours, merged.daily, merged.hourly],68 [isPast24Hours, merged.daily, merged.hourly],
67 );69 );
6870
...@@ -393,14 +395,14 @@ export function UsagePage() {...@@ -393,14 +395,14 @@ export function UsagePage() {
393 </tr>395 </tr>
394 </thead>396 </thead>
395 <tbody>397 <tbody>
396 {recentPeriods.length === 0 ? (398 {breakdownPeriods.length === 0 ? (
397 <tr>399 <tr>
398 <td colSpan={5} className="py-6 text-center text-muted-foreground">400 <td colSpan={5} className="py-6 text-center text-muted-foreground">
399 No activity in this window.401 No activity in this window.
400 </td>402 </td>
401 </tr>403 </tr>
402 ) : (404 ) : (
403 recentPeriods.map((period) => (405 breakdownPeriods.map((period) => (
404 <tr406 <tr
405 key={"hourStart" in period ? period.hourStart : period.day}407 key={"hourStart" in period ? period.hourStart : period.day}
406 className="border-b border-border/50"408 className="border-b border-border/50"