Cumulative chart and bar list

"use client";
import { BarList, CumulativeChart } from "@/components/ui/notchset/blocks/cumulative-chart";

/* [week, $k won to date] */
const WON: [number, number][] = [[0, 0], [1, 42], [2, 42], [3, 110], [4, 152], [5, 210], [6, 268]];
const PROJECTED: [number, number][] = [[6, 268], [8, 420], [10, 560], [12, 690]];
const TARGET: [number, number][] = [[0, 0], [12, 800]];

export default function CumulativeChartDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      <CumulativeChart
        label="Revenue won, cumulative by week, this quarter, against target"
        domain={[0, 12]}
        floor={800}
        format={(v) => `$${v}k`}
        stopLabel={(x) => `Week ${x + 1}`}
        ticks={["Oct 1", "Oct 15", "Nov 1", "Nov 15", "Dec 1", "Dec 15", "Dec 31"].map((label, i) => ({ x: i * 2, label }))}
        today={{ x: 6, label: "Today" }}
        series={[
          { key: "won", label: "Won to date", kind: "actual", points: WON },
          { key: "proj", label: "Projected from won + commit", kind: "projection", points: PROJECTED, endLabel: "Projected $690k" },
          { key: "target", label: "Target", kind: "comparison", points: TARGET, endLabel: "Target $800k" },
        ]}
      />
      <BarList
        className="max-w-md"
        rows={[
          { key: "1", label: "Discovery → Evaluation", pct: 62, figure: "62%" },
          { key: "2", label: "Evaluation → Proposal", pct: 48, figure: "48%" },
          { key: "3", label: "Proposal → Won", pct: 31, figure: "31%" },
        ]}
      />
      {/* split rows: each bar in two parts with a two-item key; the figure is the sum */}
      <BarList
        className="max-w-md"
        splitKey={["Won", "Open"]}
        rows={[
          { key: "in", label: "Inbound", pct: 100, figure: "$420k", split: { a: 180, b: 240, aFigure: "$180k", bFigure: "$240k" } },
          { key: "re", label: "Referral", pct: 62, figure: "$260k", split: { a: 150, b: 110, aFigure: "$150k", bFigure: "$110k" } },
          { key: "out", label: "Outbound", pct: 33, figure: "$140k", split: { a: 20, b: 120, aFigure: "$20k", bFigure: "$120k" } },
        ]}
        total={{ label: "Won + open", figure: "$820k" }}
      />
    </div>
  );
}