Household income card

<HouseholdIncomeCard data={incomePlan} />

Usage

import { HouseholdIncomeCard, type HouseholdIncomeData } from "@reva/ui";

Renders the household income tool output (wiring lands with the follow-up agent tool). One stacked bar per calendar year splits the household's income by source — while people work spending is met from employment and company income, then each person's retirement, pension access and state pension layer in on the shared axis. One chart for everyone; it scales to any number of people. An optional expenditure value per point overlays the household's planned spend as a dashed line, so income and spend read against each other (the tooltip adds Spend and Short/Surplus rows on those years; omit a year's value to gap the line).

Series are generic: series names each source and sets the stack order bottom to top, and each point's values map carries decimal strings keyed by series key (a missing key plots as zero). Colours come from the positional chart-role ramp (neutral, positive, primary, accent, negative — wrapping for five or more series), so the payload never carries colour.

Pass data with a stable reference (module scope, state or useMemo). The x-axis is categorical, so event years must land on plotted years — an event between points renders no marker.

Examples

Life plan with events

The full state: four income sources stacking across a fifty-year horizon, per-person event flags on a staggered rail above the bars, and the dashed spend line reading against the stack. Hover a bar for the year, age, per-source split, total, spend and that year's events.

<HouseholdIncomeCarddata={{  reporting_currency: "GBP",  series: [    { key: "employment", label: "Employment / company income" },    { key: "bridge", label: "Bridge pots" },    { key: "drawdown", label: "Pension drawdown" },    { key: "state", label: "State pensions" },  ],  points, // one per year, ~50 years  events: [    { year: 2036, label: "Michael retires" },    { year: 2044, label: "Michael pension" },    { year: 2055, label: "Michael state pension" },  ],}}/>

Bars only

Without events or expenditure the flag headroom collapses — just the stacked income series and the legend.

<HouseholdIncomeCard data={{ reporting_currency: "GBP", series, points }} />

Short horizon

At a twelve-year horizon the bars widen and every year keeps its tick.

<HouseholdIncomeCard data={shortPlan} />

Props

The data fields: