Sankey Panel

Money FlowPreview

A Sankey flow diagram showing how money moves from income sources through a central pool to expenses, savings, and net savings. The width of each flow is proportional to the amount.

Chart Type

Property	Value
Library	Apache ECharts via BaseChart
Series type	sankey
Orientation	horizontal
Source file	src/components/panels/SankeyPanel.tsx

What It Shows

A three-column flow:

Income Sources  -->  Available  -->  Expenses
                                -->  Savings
                                -->  Net Saved

• Left column -- income sources (Salary, Freelance, etc.)
• Center node -- "Available" pool (total income)
• Right column -- expense categories (sorted by amount), savings categories, and optionally "Net Saved"

The "Net Saved" node only appears when total income exceeds total expenses plus savings.

Key Features

Feature	Detail
Three-column layout	Income -> Available -> Outflows
Node coloring	Per-category color from the monthly summary
Link coloring	Source node color at 50% opacity (hex 80 suffix)
Net Saved node	Sky blue (#38bdf8), appears only when positive
Adjacency emphasis	focus: 'adjacency' on hover
Right-aligned labels	Mono font, 11px, secondary text color

Visual Details

Property	Value
Node width	20px
Node gap	12px
Node alignment	justify
Link curveness	0.5
Node border	0px (borderless)
Layout iterations	0 (manual layout via layout: 'none')
"Available" node color	Accent (#00d4aa)
"Net Saved" node color	Sky blue (#38bdf8)

Tooltip

Two formats depending on what is hovered:

Edge (flow):

Salary -> Available
$8,500.00

Node:

Available
$8,500.00

Interactivity

• Hover on node -- highlights the node and all directly connected flows (adjacency focus)
• Hover on edge -- highlights the specific flow path
• Trigger -- mousemove for responsive tracking

Data Source

Store	Fields
useFinanceStore	monthlySummary (split into INCOME, EXPENSE, and SAVINGS types)
useChartTheme	Accent color, text colors, panel background

Income items are filtered by type === 'INCOME' and total > 0. Expense items are filtered by type === 'EXPENSE' and total < 0 (sorted by amount descending). Savings items are filtered by type === 'SAVINGS' and total < 0.

Empty State

Displays "No flow data" centered in the panel when there are no income or expense entries in the monthly summary.