Appearance
Radar Panel
Financial HealthPreview
A spider/radar chart scoring your overall financial health across six dimensions. Each axis is scored 0--100, and the filled polygon reveals strengths and weaknesses at a glance.
Chart Type
| Property | Value |
|---|---|
| Library | Apache ECharts via BaseChart |
| Series type | radar |
| Shape | polygon |
| Source file | src/components/panels/RadarPanel.tsx |
What It Shows
Six financial health dimensions, each computed from real account data:
| Dimension | Calculation | Score Range |
|---|---|---|
| Savings Rate | ((income - expenses) / income) * 100 | 0 -- 100 |
| Budget Adherence | Average % under budget across all budgets | 0 -- 100 |
| Expense Diversity | Shannon entropy index of expense distribution | 0 -- 100 |
| Runway Score | Months of runway, capped at 24 months = 100 | 0 -- 100 |
| Debt Management | (1 - liabilities / assets) * 100 | 0 -- 100 |
| Consistency | Inverse coefficient of variation of monthly net | 0 -- 100 |
Score Details
- Savings Rate -- percentage of income not consumed by expenses. Clamped to 0--100.
- Budget Adherence -- for each budget, calculates how far under (or over) budget spending is. Averaged across all budgets. Score of 100 if no budgets exist.
- Expense Diversity -- uses Shannon entropy normalized by maximum entropy (
log2(N)where N is the number of expense categories). Higher diversity = more evenly spread spending. - Runway Score -- uses the base runway from
useSimulation. 24+ months of runway = perfect score. - Debt Management -- ratio of liabilities to assets. Zero debt = 100, liabilities equal to assets = 0.
- Consistency -- coefficient of variation (std dev / mean) of monthly net values from cashflow. Requires at least 3 months of data; defaults to 75 otherwise.
Key Features
| Feature | Detail |
|---|---|
| Overall score in header | Average of all 6 dimension scores, displayed as XX/100 |
| Score color coding | Green (accent) >= 70, Yellow (warning) 40--69, Red (danger) < 40 |
| Filled polygon | 25% opacity accent fill (${accent}25) |
| WhatIf integration | Reacts to WhatIfSimulator adjustments via useSimulation |
Visual Details
- Radar radius: 65%, centered at
[50%, 55%] - Axis name: secondary text color, mono font, 10px
- Axis line: panel border color
- Split lines: panel header background color
- Split area: alternating transparent and 25% opacity header background
- Data line: accent color, 2px width
- Data points: circle symbol, size 6, accent fill with panel background border (2px)
Interactivity
- Hover -- standard ECharts radar tooltip
- WhatIf reactivity -- the Runway Score dimension updates in real time when the WhatIfSimulator panel adjusts income/expense assumptions
Data Source
| Store | Fields |
|---|---|
useFinanceStore | netWorth (income, expenses, assets, liabilities), budgets, monthlySummary, cashflow |
useSimulation | baseRunway for runway months |
useChartTheme | Accent, warning, danger, border, and background colors |