makiolaj/SimpleFinanceDash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(04-02): complete chart tooltip currency formatting plan

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jean-Luc Makiola
2026-03-12 09:28:20 +01:00
parent 5a70899cf8
commit bd84a80ac4
5 changed files with 131 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.planning/REQUIREMENTS.md
View File

@@ -34,7 +34,7 @@ Requirements for this milestone. Each maps to roadmap phases.
- [x] **IXTN-01**: Form submit buttons show a spinner during async operations (login, register, budget create/edit)
- [x] **IXTN-02**: Inline-editable rows show a pencil icon on hover as an edit affordance
- [x] **IXTN-03**: Inline edit saves show a brief visual confirmation (row background flash)
- [ ] **IXTN-04**: Chart tooltips display values formatted with the budget's currency
- [x] **IXTN-04**: Chart tooltips display values formatted with the budget's currency
- [x] **IXTN-05**: Category deletion triggers a confirmation dialog before executing
### Empty & Loading States
@@ -110,7 +110,7 @@ Which phases cover which requirements. Updated during roadmap creation.
| STATE-01 | Phase 3 | Complete |
| STATE-02 | Phase 3 | Complete |
| STATE-03 | Phase 3 | Complete |
| IXTN-04 | Phase 4 | Pending |
| IXTN-04 | Phase 4 | Complete |
| FIX-01 | Phase 4 | Complete |
**Coverage:**

6
.planning/ROADMAP.md
View File

@@ -15,7 +15,7 @@ Decimal phases appear between their surrounding integers in numeric order.
- [x] **Phase 1: Design Token Foundation** - Establish the pastel CSS variable system and semantic color tokens that all subsequent phases depend on (completed 2026-03-11)
- [ ] **Phase 2: Layout and Brand Identity** - Polish the surfaces users see on every page load — login, sidebar, card headers, typography
- [ ] **Phase 3: Interaction Quality and Completeness** - Add loading, empty, and error states plus inline edit affordances to eliminate the "unfinished" feeling
- [ ] **Phase 4: Chart Polish and Bug Fixes** - Finalize chart styling with semantic colors, formatted tooltips, and fix the currency locale bug
- [x] **Phase 4: Chart Polish and Bug Fixes** - Finalize chart styling with semantic colors, formatted tooltips, and fix the currency locale bug (completed 2026-03-12)
## Phase Details
@@ -74,7 +74,7 @@ Plans:
1. All chart fills (donut slices, bar segments) use the semantic category colors from `lib/palette.ts` — "Bills" is the same color in the donut chart as it is in the FinancialOverview table
2. Chart tooltips display values formatted with the budget's currency (e.g., "1,234.56" not "1234.56")
3. The `formatCurrency` function uses the user's locale preference from their settings instead of the hardcoded `de-DE` — an English-locale user sees their numbers formatted correctly
**Plans:** 1/2 plans executed
**Plans:** 2/2 plans complete
Plans:
- [ ] 04-01-PLAN.md — TDD: formatCurrency locale parameter fix (FIX-01)
- [ ] 04-02-PLAN.md — Chart tooltip wiring and locale threading (IXTN-04)
@@ -89,4 +89,4 @@ Phases execute in numeric order: 1 -> 2 -> 3 -> 4
| 1. Design Token Foundation | 2/2 | Complete | 2026-03-11 |
| 2. Layout and Brand Identity | 0/2 | In progress | - |
| 3. Interaction Quality and Completeness | 0/4 | Not started | - |
| 4. Chart Polish and Bug Fixes | 1/2 | In Progress| |
| 4. Chart Polish and Bug Fixes | 2/2 | Complete | 2026-03-12 |

15
.planning/STATE.md
View File

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
milestone: v1.0
milestone_name: milestone
status: planning
stopped_at: Completed 04-01-PLAN.md
last_updated: "2026-03-12T08:24:41.212Z"
stopped_at: Completed 04-02-PLAN.md
last_updated: "2026-03-12T08:28:10.884Z"
last_activity: 2026-03-11 — Roadmap created from requirements and research
progress:
total_phases: 4
completed_phases: 3
completed_phases: 4
total_plans: 10
completed_plans: 9
completed_plans: 10
percent: 0
---
@@ -59,6 +59,7 @@ Progress: [░░░░░░░░░░] 0%
| Phase 03-interaction-quality-and-completeness P02 | 5 | 2 tasks | 3 files |
| Phase 03-interaction-quality-and-completeness P03 | 5 | 2 tasks | 4 files |
| Phase 04-chart-polish-and-bug-fixes P01 | 1 | 2 tasks | 2 files |
| Phase 04-chart-polish-and-bug-fixes P02 | 10 | 2 tasks | 4 files |
## Accumulated Context
@@ -90,6 +91,8 @@ Recent decisions affecting current work:
- [Phase 03-interaction-quality-and-completeness]: Empty tracker sections show tinted skeleton card (not null) — section always visible with palette-tinted placeholders when no items exist
- [Phase 04-chart-polish-and-bug-fixes]: formatCurrency third parameter defaults to 'en', replacing hardcoded 'de-DE' — all existing 2-arg call sites now produce English formatting (FIX-01)
- [Phase 04-chart-polish-and-bug-fixes]: Defensive locale || 'en' guard in formatCurrency prevents RangeError when empty string is passed
- [Phase 04-chart-polish-and-bug-fixes]: Custom Tooltip content renderer replicates ChartTooltipContent styling without importing shadcn source — aligned with project rule forbidding edits to src/components/ui/
- [Phase 04-chart-polish-and-bug-fixes]: DashboardPage.test.tsx mocks useAuth to prevent i18n initReactI18next import error triggered by new useAuth dependency
### Pending Todos
@@ -102,6 +105,6 @@ None yet.
## Session Continuity
Last session: 2026-03-12T08:24:41.210Z
Stopped at: Completed 04-01-PLAN.md
Last session: 2026-03-12T08:28:10.883Z
Stopped at: Completed 04-02-PLAN.md
Resume file: None

2
.planning/config.json
View File

@@ -9,6 +9,6 @@
"plan_check": true,
"verifier": true,
"nyquist_validation": true,
"_auto_chain_active": false
"_auto_chain_active": true
}
}

116
.planning/phases/04-chart-polish-and-bug-fixes/04-02-SUMMARY.md Normal file
View File

@@ -0,0 +1,116 @@
---
phase: 04-chart-polish-and-bug-fixes
plan: "02"
subsystem: ui
tags: [recharts, react, typescript, i18n, locale, formatCurrency]
# Dependency graph
requires:
- phase: 04-chart-polish-and-bug-fixes
provides: "formatCurrency(amount, currency?, locale?) with defensive locale guard"
provides:
- "Custom Recharts Tooltip on ExpenseBreakdown pie chart showing category name + formatted currency"
- "Custom Recharts Tooltip on AvailableBalance donut chart showing segment name + formatted currency"
- "AvailableBalance center text locale-aware via locale prop"
- "DashboardPage threads user.preferred_locale from useAuth to both chart components"
affects: [future-chart-components, locale-threading]
# Tech tracking
tech-stack:
added: []
patterns:
- "Custom Recharts Tooltip via content prop with shadcn design-token styling (bg-background, border-border/50, shadow-xl)"
- "Locale threaded from useAuth() in page component down to leaf chart components as optional prop with 'en' default"
key-files:
created: []
modified:
- frontend/src/components/ExpenseBreakdown.tsx
- frontend/src/components/AvailableBalance.tsx
- frontend/src/pages/DashboardPage.tsx
- frontend/src/pages/DashboardPage.test.tsx
key-decisions:
- "Custom Tooltip content renderer replicates ChartTooltipContent styling without importing shadcn source — aligned with project rule forbidding edits to src/components/ui/"
- "useAuth() called in DashboardPage is idempotent — reads from same React state as App.tsx, no double-fetch"
- "Locale threading scoped to chart components only in this plan — table components (BillsTracker, etc.) use 'en' default from formatCurrency, full threading deferred"
- "DashboardPage.test.tsx mocks useAuth to prevent i18n initReactI18next import error triggered by new useAuth dependency"
patterns-established:
- "Pattern: locale prop on chart components is optional with 'en' default — callers that don't have locale context still work"
requirements-completed: [IXTN-04]
# Metrics
duration: 10min
completed: 2026-03-12
---
# Phase 4 Plan 02: Chart Tooltip Currency Formatting Summary
**Custom Recharts tooltips on both charts show locale-aware formatted currency, with user.preferred_locale threaded from useAuth through DashboardPage**
## Performance
- **Duration:** 10 min
- **Started:** 2026-03-12T09:25:00Z
- **Completed:** 2026-03-12T09:35:00Z
- **Tasks:** 2
- **Files modified:** 4
## Accomplishments
- ExpenseBreakdown pie chart replaces bare `<Tooltip />` with custom content renderer showing category name and formatCurrency-formatted value
- AvailableBalance donut chart gains a Tooltip for the first time, using same custom renderer pattern; center text also receives locale
- DashboardPage imports useAuth, derives userLocale with fallback to 'en', and passes it as locale prop to both chart components
## Task Commits
Each task was committed atomically:
1. **Task 1: Add locale prop and custom Tooltip to both chart components** - `f141c4f` (feat)
2. **Task 2: Thread user locale from useAuth through DashboardPage to chart components** - `5a70899` (feat)
**Plan metadata:** (docs commit — see final_commit)
## Files Created/Modified
- `frontend/src/components/ExpenseBreakdown.tsx` - Added locale prop, formatCurrency import, custom Tooltip content renderer
- `frontend/src/components/AvailableBalance.tsx` - Added locale prop, Tooltip import, custom Tooltip content renderer, locale passed to center text formatCurrency
- `frontend/src/pages/DashboardPage.tsx` - Added useAuth import, userLocale derivation, locale prop passed to AvailableBalance and ExpenseBreakdown
- `frontend/src/pages/DashboardPage.test.tsx` - Added useAuth mock to prevent i18n initReactI18next error
## Decisions Made
- Custom Tooltip uses shadcn CSS variable classes (bg-background, border-border/50, shadow-xl) rather than importing ChartTooltipContent — aligns with project rule against editing ui/ source files
- Locale threading scoped to chart components only — table components already have 'en' default via formatCurrency, full threading deferred per plan spec
- DashboardPage.test.tsx required a useAuth mock because useAuth imports @/i18n which calls i18n.use(initReactI18next) — the existing react-i18next mock did not export initReactI18next
## Deviations from Plan
### Auto-fixed Issues
**1. [Rule 1 - Bug] DashboardPage test broken by new useAuth import**
- **Found during:** Task 2 (Thread user locale from useAuth through DashboardPage)
- **Issue:** Adding `useAuth` to DashboardPage caused the test file to fail with "No initReactI18next export defined on react-i18next mock" — because useAuth transitively imports @/i18n which calls i18n.use(initReactI18next)
- **Fix:** Added `vi.mock('@/hooks/useAuth', ...)` to DashboardPage.test.tsx, returning a user with preferred_locale: 'en'
- **Files modified:** frontend/src/pages/DashboardPage.test.tsx
- **Verification:** Full test suite passes (51 tests), production build succeeds with no TypeScript errors
- **Committed in:** `5a70899` (Task 2 commit)
---
**Total deviations:** 1 auto-fixed (Rule 1 - bug introduced by task change)
**Impact on plan:** Auto-fix was necessary to restore test suite. No scope creep.
## Issues Encountered
None beyond the auto-fixed test breakage above.
## User Setup Required
None - no external service configuration required.
## Next Phase Readiness
- Both chart components now display locale-aware currency tooltips
- Locale threading pattern established: page-level useAuth() call + optional locale prop with 'en' default
- Ready to extend locale threading to table components if desired in a future plan
---
*Phase: 04-chart-polish-and-bug-fixes*
*Completed: 2026-03-12*