Block · finance

ARR Movement Waterfall

Waterfall of ARR movement (new, expansion, contraction, churn) with NRR/GRR and a movement narrative.

State

Size

Mode

ARR movement · KPI · Q1 2026

$4.96M

+$760k net new · 103% NRR · 93% GRR

Gains
Losses
Balance

ARR ended Q1 2026 at $4.96M (+$760k net new), with 102.7% net and 92.7% gross retention.

Acme analytics · updated hourly

Demo data is illustrative. Replace with your own typed data prop.

How it computes

ARR movement decomposition into new / expansion / contraction / churn (± reactivation), with NRR and GRR.

ending = start + new + expansion + reactivation − contraction − churn;  NRR = (start + expansion − contraction − churn)/start;  GRR = (start − contraction − churn)/start

Assumptions

Movement components are mutually exclusive (no dollar counted twice).
All figures are already in ARR terms.
Reactivation is optional and excluded from the NRR/GRR base.

Honest about

NRR and GRR both fall back to 0 when starting ARR = 0 (divide-by-zero guard).
Churn and contraction are supplied as positive magnitudes; the code negates them internally.
There's no cohort tracking — a reactivated customer and a brand-new logo flow through different buckets but aren't reconciled.

Use it with your data

Data contract

Passed via the data prop — an object: validated at runtime, so a bad shape degrades to the error state rather than crashing.

Field	Type	Required
startingArr	number	yes
newArr	number	yes
expansion	number	yes
contraction	number	yes
churn	number	yes
reactivation	number	no

Static props

import { FpaArrWaterfall } from "@/components/blocks/fpa-arr-waterfall/fpa-arr-waterfall";

<FpaArrWaterfall data={myData} />

Client fetch (SWR)

const { data, isLoading, error } = useSWR("/api/metric", fetcher);
// route isLoading/error through <ChartStates>, then:
<FpaArrWaterfall data={data} />

Server component (RSC)

const data = await fetch(url, {
  next: { revalidate: 3600 },
}).then((r) => r.json());

<FpaArrWaterfall data={data} />

Map arbitrary rows

import { mapRows } from "@/lib/sextant/column-map";

const out = mapRows(rows, { /* contractKey: "yourColumn" */ }, dataSchema);
if (out.ok) <FpaArrWaterfall data={out.data} />;

Make it yours

Every customization below is an optional prop — omit them all and you get the defaults shown above. Recolor, reformat, restyle, or drop the card chrome without forking the component.

Recolor or rename a series (gain, loss, anchor)

<FpaArrWaterfall
  series={{ gain: { color: "var(--chart-3)", label: "…" } }}
/>

Format numbers (currency / locale)

const eur = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
  notation: "compact",
});

<FpaArrWaterfall valueFormatter={(n) => eur.format(n)} />

Replace or hide the narrative

<FpaArrWaterfall narrative="Your own one-liner." />

// …or hide it entirely:
<FpaArrWaterfall narrative={false} />

Restyle any region

<FpaArrWaterfall
  className="max-w-xl"
  classNames={{ body: "bg-muted/20" }}
/>

Drop the card chrome (headless plot)

import { FpaArrWaterfallPlot } from "@/components/blocks/fpa-arr-waterfall/fpa-arr-waterfall";

// Just the chart body — bring your own card/layout:
<FpaArrWaterfallPlot data={data} config={config} />

Step	Amount
Start	$4.2M
+ New	+$580k
+ Expansion	+$420k
+ Reactivation	+$65k
− Contraction	-$120k
− Churn	-$185k
End	$4.96M