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.

Data Source

Store	Fields
useFinanceStore	monthlySummary (filtered to EXPENSE type)

Chart rendered via BaseChart.tsx. All amounts formatted with formatNZD().

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