Repository navigation
Use calendar-aligned axes on every date chart - #186
Merged
Merged
Conversation
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.
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
InteractiveAreaChartalways usescalendarTicks, so the per-account trends and portfolio history get them (the opt-in prop is removed). A newuseCalendarAxishook (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).calendarTicksmarks a year label among month labels asmajor. 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.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.2025 Apr Jul Oct 2026 Apr Jul Oct, with the years bold.2025 Jul 2026 Jul, no horizontal scroll.Jan … Oct. 1M:Oct 1, 4 … 28.