Skip to content

feat: add weekday × hour punch card to dashboard usage history - #43

Open
long-910 wants to merge 1 commit into
claude/feat-model-pricing-y9ahrwfrom
claude/feat-punchcard-y9ahrw
Open

long-910 wants to merge 1 commit into
claude/feat-model-pricing-y9ahrwfrom
claude/feat-punchcard-y9ahrw

Conversation

@long-910

@long-910 long-910 commented Jul 7, 2026

Copy link
Copy Markdown
Owner

Stacked on #39 (chain: #37#38#39 → this) because it touches the same heatmap.ts / panel.ts code paths. Merge the parents first; GitHub retargets the base automatically.

Summary

The dashboard's Usage History card gains a GitHub-style punch card: a 7 × 24 weekday × hour matrix showing where in the week cost is spent, over the last 30 days in local time. Complements the existing calendar heatmap (which days) and hourly bar chart (which hours on average) by exposing weekly patterns — e.g. "Monday mornings and weekday evenings".

        0  1  2  3 … 21 22 23
Sun     ·  ·  ·  ·    ·  ·  ·
Mon     ·  ·  ▪  ▪    ▪  ▪  ·
…

Implementation

  • heatmap.ts: new aggregateByDowHour(entries, days)number[7][24] grid of total USD per (day-of-week, hour) cell, row 0 = Sunday; HeatmapData gains dowHour, computed in the same pass as the existing aggregates (no extra file reads).
  • panel.ts: CSS-grid punch card reusing the heatmap's intensity classes (getCostLevel, hm-cell l0–l4) so both visualizations share one color language. Localized short weekday labels (toLocaleString), column labels every 3 hours, per-cell tooltip Mon 09:00 — $0.312. Hidden automatically when dowHour is absent.
  • l10n: section title in EN / JA / ZH.
  • Docs: new "Punch Card (Weekday × Hour)" section in docs/features/05-heatmap.md; CHANGELOG.

Tests

New aggregateByDowHour suite: 7×24 zero-grid shape, cost accumulation into the correct cell (with a no-leakage total check), and the 30-day window cutoff — all with timestamps constructed to be deterministic. npm run lint ✅, npm run compile ✅, unit suites ✅ via mocha; @vscode/test-electron cannot download VS Code in this sandbox — please rely on CI for the extension-host suites.

🤖 Generated with Claude Code

https://claude.ai/code/session_012ZLCLQeudf1LQBnBSyyr4f


Generated by Claude Code

Shows where in the week cost is spent — a 7x24 matrix over the last 30
days (local time) rendered below the heatmap legend.

- heatmap.ts: aggregateByDowHour(entries, days) returns a number[7][24]
  grid of total USD per (day-of-week, hour); HeatmapData gains dowHour
- panel.ts: punch-card grid reusing the heatmap intensity levels
  (getCostLevel / hm-cell l0-l4), localized weekday row labels, 3-hourly
  column labels, per-cell cost tooltips
- l10n: EN/JA/ZH section title
- Docs: punch card section in docs/features/05-heatmap.md, CHANGELOG
- Tests: empty grid shape, cell accumulation, window cutoff

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012ZLCLQeudf1LQBnBSyyr4f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants