Burn-up

"use client";
import * as React from "react";
import { ChartFact, ChartHero } from "@/components/ui/notchset/chart";
import { BurnUp } from "@/components/ui/notchset/blocks/burn-up";

/* A fictional project, 84 days in: scope grew in week 7 and jumped by 10 after the pilot; the forecast says when half and most runs finish. */
const DAYS = Array.from({ length: 85 }, (_, i) => ({ label: `Day ${i + 1}`, done: Math.round((i / 84) ** 1.15 * 48), scope: i < 49 ? 52 : i < 62 ? Math.min(58, 52 + Math.round((i - 49) * 0.5)) : 68 }));
const TICKS = [0, 28, 56, 84].map((day, k) => ({ day, label: ["Aug", "Sep", "Oct", "Nov"][k]! }));

export default function BurnUpDemo() {
  const [range, setRange] = React.useState("all");
  const [day, setDay] = React.useState<number | null>(null);
  const row = day == null ? null : DAYS[day];
  return (
    <div className="w-full max-w-[760px]">
      <BurnUp
        label="Route planner v2"
        days={DAYS}
        ahead={44}
        forecast={{ p50: 30, p85: 37 }}
        health={{ tone: "warn", word: "At risk" }}
        scopeNote={(day) => (day === 62 ? "pilot feedback" : undefined)}
        target={{ day: 31, label: "Nov 20" }}
        ticks={[...TICKS, { day: 112, label: "Dec" }]}
        ranges={[
          { value: "all", label: "Whole project", from: 0 },
          { value: "near", label: "From 4 weeks ago", from: 57 },
        ]}
        range={range}
        onRangeChange={setRange}
        onScrub={setDay}
        head={
          <>
            <ChartHero label="Likely finish" value="Thu, Nov 19" />
            <ChartFact label="Could slip to" value="Thu, Nov 26" />
            <ChartFact label={row ? `Done by ${row.label}` : "Done so far"} value={row ? `${row.done} of ${row.scope}` : "48 of 68"} instant={day != null} />
          </>
        }
      />
    </div>
  );
}