Skip to content

Use calendar-aligned axes on every date chart - #186

Merged
31b4 merged 1 commit into
mainfrom
bug/185-calendar-axes-everywhere
Oct 28, 2026
Merged

31b4 merged 1 commit into
mainfrom
bug/185-calendar-axes-everywhere

Conversation

@31b4

@31b4 31b4 commented Oct 28, 2026

Copy link
Copy Markdown
Member

Closes #185

Summary

Follow-up to #183: every date chart now uses calendar-aligned x-axis labels, and year labels among month labels are emphasized. Per-account trend charts also start on the period's first day and show correct balances for past periods.

Changes

  • Calendar axis everywhere: InteractiveAreaChart always uses calendarTicks, so the per-account trends and portfolio history get them (the opt-in prop is removed). A new useCalendarAxis hook (common/calendar-axis.tsx) measures the chart width and gives Recharts time axes the same ticks with edge-aware anchors. It is used by the investment detail chart, manual valuations and the AI cash outlook (which keeps its local-midnight timestamps).
  • Year emphasis: calendarTicks marks a year label among month labels as major. Those labels render in the foreground colour at semibold weight, and the area chart adds a faint dashed guide at each year start. Year-only axes stay unemphasized.
  • Per-account trends: balances are rebuilt from the account's whole ledger, then clipped with clipBalancesToPeriod, as Cash Balance Trend does. Before, past months and years were walked back from today's balance without the later movements, so they were offset. 1M now fills daily from the 1st with the carried balance, and finished periods carry to their last day. Accounts still appear only when they have a transaction in the period.

Verification

  • npm test -w client: 61 files, 572 tests passed. New tests cover major year ticks, area-chart year emphasis, the Recharts tick hook (UTC and local times, empty range) and per-account clipping for current and past months.
  • npm run lint -w client -- --max-warnings=0: clean.
  • VITE_API_AUTH_MODE=public VITE_API_DOMAIN=localhost:8787 npm run build: built.
  • Manual check against a local API with two years of synthetic data:
    • Analytics All, desktop: Cash Balance Trend and the per-account chart both show 2025 Apr Jul Oct 2026 Apr Jul Oct, with the years bold.
    • Analytics All, mobile (375px): 2025 Jul 2026 Jul, no horizontal scroll.
    • 1Y: Jan … Oct. 1M: Oct 1, 4 … 28.
    • Previous month (September): the per-account chart matches Cash Balance Trend, running Sep 1–30 with the same closing balance.
    • Portfolio history (no holdings): calendar days.
  • Not checked visually: the investment detail chart, manual valuations and the AI cash outlook, because the local data has no holdings, appraisals or forecast snapshot. Unit tests cover their shared hook.

Per-account trends, portfolio history, the investment detail chart,
manual valuations and the AI cash outlook now share the calendar ticks
from #183, and year labels among months are emphasized. Per-account
balances are rebuilt from the whole ledger and clipped to the period,
so past months are correct and 1M/1Y open on the first day.
@31b4
31b4 merged commit 4a6e81d into main Oct 28, 2026
11 checks passed
@31b4
31b4 deleted the bug/185-calendar-axes-everywhere branch October 28, 2026 11:01
@31b4 31b4 mentioned this pull request Oct 28, 2026
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.

Use calendar-aligned axes on every date chart

1 participant