69 lines
3.1 KiB
Markdown
69 lines
3.1 KiB
Markdown
---
|
|
id: TASK-2
|
|
title: Render category expense chart values as positive slices
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2026-06-15 14:34'
|
|
updated_date: '2026-06-15 19:54'
|
|
labels: []
|
|
dependencies: []
|
|
priority: high
|
|
ordinal: 2000
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Fix the dashboard category expense pie chart so negative expense totals render as visible pie slices while preserving expense-style formatting in the UI.
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 Category breakdown pie renders visible slices for negative expense totals
|
|
- [x] #2 Tooltip still displays expense values with the existing currency formatting
|
|
- [x] #3 Build or focused verification passes, or blockers are documented
|
|
<!-- AC:END -->
|
|
|
|
## Implementation Plan
|
|
|
|
<!-- SECTION:PLAN:BEGIN -->
|
|
1. Normalize category breakdown values for chart rendering
|
|
2. Keep tooltip currency formatting consistent with expense values
|
|
3. Run focused build/type verification
|
|
4. Record verification notes and leave task In Progress pending user confirmation
|
|
<!-- SECTION:PLAN:END -->
|
|
|
|
## Implementation Notes
|
|
|
|
<!-- SECTION:NOTES:BEGIN -->
|
|
RED verified: npx vitest src/components/charts/CategoryBreakdownChart.test.ts --run fails because toCategoryPieData is missing.
|
|
|
|
Implemented category pie normalization via src/components/charts/categoryBreakdownData.ts and wired CategoryBreakdownChart to use chartAmount for Recharts while formatting tooltip values from the original signed amount.
|
|
|
|
Verification:
|
|
- PASS npx vitest src/components/charts/CategoryBreakdownChart.test.ts --run
|
|
- PASS npx eslint src/components/charts/CategoryBreakdownChart.tsx src/components/charts/CategoryBreakdownChart.test.ts src/components/charts/categoryBreakdownData.ts vitest.config.ts
|
|
- PASS npm run build
|
|
|
|
Note: npm run build still emits the existing Vite chunk-size warning for the main bundle.
|
|
|
|
Manual browser verification not completed in-agent because the in-app Browser target iab is unavailable in this session. Vite dev server is running at http://127.0.0.1:5173/ for user verification.
|
|
|
|
User requested readability improvement: place the pie chart on the left and category list on the right instead of using the crowded default legend below the chart.
|
|
|
|
Layout update: replaced the crowded Recharts category legend and slice labels with a responsive two-column layout: pie chart on the left, scrollable category list with swatches, signed amounts, and percentage shares on the right. Added stable min dimensions for the chart container after Vite logged Recharts container-size warnings during HMR.
|
|
|
|
Verification after layout update:
|
|
- PASS npx vitest src/components/charts/CategoryBreakdownChart.test.ts --run
|
|
- PASS npx eslint src/components/charts/CategoryBreakdownChart.tsx src/components/charts/CategoryBreakdownChart.test.ts src/components/charts/categoryBreakdownData.ts vitest.config.ts
|
|
- PASS npm run build
|
|
|
|
Note: npm run build still emits the existing Vite chunk-size warning for the main bundle.
|
|
<!-- SECTION:NOTES:END -->
|
|
|
|
## Final Summary
|
|
|
|
<!-- SECTION:FINAL_SUMMARY:BEGIN -->
|
|
Closed as Done after explicit user confirmation to mark all tasks done.
|
|
<!-- SECTION:FINAL_SUMMARY:END -->
|