Spending Panel
A treemap chart showing how current-month expenses break down by category. Cell size is proportional to spending amount, giving an immediate visual sense of where money is going.
What It Shows
An ECharts treemap where each cell represents one expense category:
| Element | Detail |
|---|---|
| Cell size | Proportional to total spend in that category |
| Cell color | Matches the category color from category settings |
| Cell label | Category name + compact NZD amount |
| Header | Total expenses for the current month |
| Empty state | "No spending data" when there are no expense transactions |
Key Features
- Proportional sizing -- Categories with higher spend occupy more visual area, making the largest expenses immediately obvious.
- Category colors -- Each cell uses the color assigned to that category (same colors used across Transactions, Budget, and Spending panels).
- Rich labels -- Each cell displays both the category name and a compact formatted amount.
- Total in header -- The panel header shows the total expense figure for quick reference.
Interactivity
| Action | Result |
|---|---|
| Hover cell | Tooltip with category name and exact amount |
This panel is primarily a visualization. Category management is handled in the Transactions Panel.
Related Panels
- Budget Panel -- same categories with budget targets
- Transactions Panel -- source transactions and category management
- Cashflow Panel -- expenses over time