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.
What It Shows
A three-column flow:
- Left column -- income sources (Salary, Freelance, etc.)
- Centre 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
- Three-column layout -- Income to Available to Outflows
- Colour-coded nodes -- each category uses its own colour
- Flow colouring -- links inherit the source node's colour at reduced opacity
- Net Saved -- appears in sky blue only when you're saving money
- Adjacency emphasis -- hovering a node highlights all connected flows
Tooltip
On a flow: shows the source, destination, and amount (e.g. Salary to Available, $8,500.00).
On a node: shows the node name and total amount flowing through it.
Interactivity
- Hover on node -- highlights the node and all directly connected flows
- Hover on flow -- highlights the specific flow path
Empty State
Displays "No flow data" when there are no income or expense entries for the current month.