Cumulative flow

import { CumulativeFlow } from "@/components/ui/notchset/blocks/cumulative-flow";

/* 60 days of a fictional project: [done, in review, in progress, to do] each day */
const DAYS = Array.from({ length: 60 }, (_, i) => {
  const done = Math.round(i * 0.7), review = 2 + (i % 5 === 0 ? 1 : 0), doing = 4 + Math.round(i / 15), todo = Math.max(2, 50 + Math.round(i / 3) - done - review - doing);
  return { label: `Day ${i + 1}`, counts: [done, review, doing, todo] };
});

export default function CumulativeFlowDemo() {
  return (
    <div className="w-full max-w-[640px]">
      <CumulativeFlow
        label="Route planner v2"
        bands={[
          { key: "done", label: "Done" },
          { key: "review", label: "In review" },
          { key: "doing", label: "In progress" },
          { key: "todo", label: "To do" },
        ]}
        days={DAYS}
        ticks={[0, 20, 40].map((day, k) => ({ day, label: ["Aug", "Sep", "Oct"][k]! }))}
      />
    </div>
  );
}