Cashflow Panel

A vertically stacked, multi-grid ECharts visualization combining income/expense bars, cumulative savings, and savings rate percentage into a single synchronized view with forecasting.

What It Shows

Three sub-charts sharing a common x-axis (months), stacked vertically:

Grid	Height	Content
Top (55%)	Income/expense bars + net income line	Bar chart with income (green) and expenses (red) side by side, plus a net income line overlay
Middle (25%)	Cumulative savings area	Area chart showing running total of net savings over time
Bottom (20%)	Savings rate % bars	Bar chart showing (income - expenses) / income * 100 per month

An average income markLine (dashed) runs across the top grid for reference.

Key Features

• Cross-grid hover sync -- Moving the cursor over any grid highlights the same month across all three via axisPointer.link.

• Date range selector -- Four preset ranges:

  Button	Periods
  6M	6 months
  12M	12 months
  2Y	24 months
  All	Full history

• Layer toggles -- Five independently toggleable data layers:

  Layer	Key	Default
  Income	income	On
  Expenses	expenses	On
  Net	net	On
  Cumulative	cumulative	On
  Rate	rate	On

  Toggling a layer off removes its grid and redistributes the remaining grids proportionally.

• Forecast mode -- Three modes via useSimulation hook:

  Mode	Effect
  Actual	Historical data only
  3M	Three-month forward projection
  12M	Twelve-month forward projection

  Forecast periods render at 50% opacity to visually distinguish them from actuals.

• WhatIfSimulator integration -- When the What-If Simulator is active, adjusted income/expense values flow into the forecast.

Data Source

Store / Hook	Fields
useFinanceStore	monthlySummary, simulation
useSimulation	Forecast periods, adjusted values

Chart rendered via BaseChart.tsx (handles ResizeObserver and theme integration).

Interactivity

Action	Result
Hover any grid	Cross-grid tooltip sync
Click range button	Changes visible date window
Toggle layer	Shows/hides that data series and resizes grids
Switch forecast mode	Extends chart with projected periods

Related Panels

• What-If Simulator -- scenario adjustments reflected in forecast
• Net Worth Panel -- monthly net figure matches the net line
• Runway Panel -- burn rate derived from the same monthly data