Appearance
Funnel Panel
FunnelPreview
A descending funnel chart that answers "where are the money holes?" Shows income progressively shrinking as it passes through fixed costs, essentials, and lifestyle spending, revealing how much reaches the bottom as net savings.
Chart Type
| Property | Value |
|---|---|
| Library | Apache ECharts via BaseChart |
| Series type | funnel |
| Sort | descending |
| Source file | src/components/panels/FunnelPanel.tsx |
What It Shows
Five stages, each showing the remaining amount after subtracting that tier's expenses:
| Stage | Categories Deducted |
|---|---|
| Income | None (total monthly income) |
| After Fixed | Rent, Insurance, Internet, Utilities |
| After Essentials | Groceries, Fuel, Transport, Health |
| After Lifestyle | Dining, Shopping, Entertainment, Subscriptions |
| Net Saved | Final remaining amount |
Each stage's value is max(0, previous - tier_expenses), ensuring the funnel never goes negative.
Key Features
| Feature | Detail |
|---|---|
| 5-stage descending funnel | Income attenuates through three spending tiers |
| Leak tooltips | Tooltip shows the amount "leaked" at each stage |
| Rich labels | Bold name + NZD value inside each funnel segment |
| Minimum size | minSize: '20%' ensures all stages remain visible |
| Stage gap | 4px between stages |
Color Progression
| Stage | Color |
|---|---|
| Income | Accent (#00d4aa) |
| After Fixed | Sky (#38bdf8) |
| After Essentials | Warning (amber) |
| After Lifestyle | Orange (#f97316) |
| Net Saved | Accent if positive, Danger (red) if zero |
Visual Details
- Width: 80% of container, centered at 10% left offset
- Border: panel background color, 2px
- Shadow: 8px blur,
rgba(0,0,0,0.15) - Label font: mono, bold name at 12px, value at 11px with 80% white opacity
- Emphasis: label size increases to 14px on hover
Tooltip
Shows the stage name and remaining value. For the middle three stages, also displays the "leak" amount and label in danger red:
After Fixed
$6,850.00
-$1,650.00 Fixed costsData Source
| Store | Fields |
|---|---|
useFinanceStore | monthlySummary (expense categories by type), netWorth (monthlyIncome) |
useChartTheme | Accent, warning, danger colors; panel background |
Empty State
Displays "No income data" centered in the panel when netWorth.monthlyIncome is zero or negative.