Waterfall chart

"use client";

import { WaterfallChart } from "@/components/beautiful-charts/themes/instrument/recharts/waterfall-chart";

// Rows are changes; a row with total: true states the level itself. If a stated total disagrees with the
// changes before it, the chart draws it as stated and says by how much it differs.
const data = [
  { item: "Start MRR", amount: 84000, total: true },
  { item: "New", amount: 12400 },
  { item: "Expansion", amount: 5200 },
  { item: "Contraction", amount: -2100 },
  { item: "Churn", amount: -6800 },
];

export function MrrBridge() {
  return <WaterfallChart data={data} nameKey="item" valueKey="amount" totalKey="total" showTotal="End MRR" valueFormatter={(v) => `$${(v / 1000).toFixed(1)}k`} title="How MRR moved this month" />;
}

export type Selection<TDatum> = {
  /** Index into the data you passed in, even when a brush shows a subset. */
  dataIndex: number;
  datum: TDatum;
  seriesKey: string | null;
  source: "pointer" | "keyboard" | "table";
  /** For a grouped segment (a donut's "Other"): the indexes of every row it stands for. `dataIndex` is the largest. */
  members?: number[] | undefined;
};

export type TooltipContext<TDatum> = {
  datum: TDatum;
  /** Index into the data you passed in. */
  dataIndex: number;
  /** Visible series at this index. `value` is your raw value; `share` is its part of the row in 100% mode. */
  series: { key: string; label: ReactNode; value: number | null; share?: number | null | undefined; color: string; selected: boolean }[];
};