Retirement drawdown card

<RetirementDrawdownCard data={drawdown} title="Can you retire at 50?" />

Usage

import { RetirementDrawdownCard, type RetirementDrawdownData } from "@reva/ui";

Renders the retirement drawdown tool output (wiring lands with the follow-up agent tool). The series list names each investable wrapper in stack order (bottom to top), each point carries the wrapper balances for a date as decimal strings, and the optional required value on a point draws the dashed "pot each date demands" line. When a target is set, the card adds the headline stat, the short or surplus badge, the amber target tick and a bracket on the chart marking the gap between the projected stack and the required pot at that date.

Pass data with a stable reference (module scope, state or useMemo). The x-axis is categorical, so the target and event years must land on plotted years — a year between points renders no marker, though the stat block still renders from the wire numbers. When every point carries an age, the x-axis plots age instead of the calendar year.

Examples

Shortfall at the target age

The full state: four wrappers stacked, the required line climbing to the target then holding flat, the gap bracket reading short, an event flag on the business sale and a narrative footer. Hover the chart for the per-wrapper values, total, required pot and gap at any date.

<RetirementDrawdownCarddata={{  reporting_currency: "GBP",  series: [    { key: "cash", label: "Cash" },    { key: "isa", label: "ISA" },    { key: "gia", label: "GIA" },    { key: "pension", label: "Pension" },  ],  points, // one per year, each with assets keyed by series and a required value  target: { year: 2036, age: 50, required: "2000000", projected: "1180000" },  events: [{ year: 2035, label: "Business sale", sublabel: "GIA" }],}}title="Can you retire at 50?"subtitle="Your forecast's investable assets against the line each date demands"narrative="By 50 you're £820k short of the pots."/>

Surplus

When the projected stack clears the required pot, the badge and the bracket flip constructive.

<RetirementDrawdownCard data={surplusDrawdown} title="Can you retire at 50?" />

Minimal

Two wrappers over a short horizon, no events and no narrative — the flag headroom collapses and the default title reads through.

<RetirementDrawdownCard data={minimalDrawdown} />

Without a target

No target and no required values: the stat block, badge, bracket and dashed line all skip, and the legend reads at the end of the horizon.

<RetirementDrawdownCard data={wrappersOnly} />

Props

The data fields:

Series colours assign positionally over the chart role token families — neutral (brass), positive (fern), primary (amber), accent (gold), negative (mulberry) — so the canonical wrapper order lands Cash on brass, ISA on fern, GIA on amber and Pension on gold, and every hue flips with colour mode.