Skip to content

Keep chart toggle buttons on the legend row - #182

Merged
31b4 merged 1 commit into
mainfrom
bug/181-chart-toggle-legend-row
Oct 27, 2026
Merged

31b4 merged 1 commit into
mainfrom
bug/181-chart-toggle-legend-row

Conversation

@31b4

@31b4 31b4 commented Oct 27, 2026

Copy link
Copy Markdown
Member

Closes #181

Summary

Toggling a chart's reference line (Trend, Net invested) removed the legend row, so the card shrank and the toggle button jumped up. Toggle buttons now share the legend row, keeping the card height and button position stable.

Changes

  • Add an optional footer slot to InteractiveAreaChart, rendered on the legend row (legend left, footer right) and also in privacy-hidden mode.
  • Cash balance chart: Trend and Compare previous month buttons use the footer while the area chart is shown; comparison and too-little-data states keep their separate row.
  • Per-account trend charts: Trend button moved into the footer; current balance stays below.
  • Portfolio history chart: Net invested toggle moved into the footer.

Verification

  • (cd client && npx tsc -b): passed.
  • npm run lint -w client -- --max-warnings=0: passed.
  • npx vitest run src/components (client): 38 files, 343 tests passed.
  • Not yet checked visually in the browser.

Toggling a reference line removed its legend row, shrinking the card and moving the toggle button. Render toggles in a footer slot that shares the legend row.
@31b4
31b4 merged commit 2bc59ee into main Oct 27, 2026
11 checks passed
@31b4
31b4 deleted the bug/181-chart-toggle-legend-row branch October 27, 2026 13:00
@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.

Chart toggle buttons jump when the reference legend is hidden

1 participant