Chart

"use client";
import * as React from "react";
import { ChartAxis, ChartGrid, ChartGuide, ChartHalo, ChartHero, ChartPill, ChartSurface, ChartTable, ChartYLabels, InkArea, InkLine, areaPath, niceTicks, smoothPath, useChartWidth, useInkDraw } from "@/components/ui/notchset/chart";
import { SegmentedControl } from "@/components/ui/notchset/segmented-control";

/* A fictional shop's orders per day: the chart family's parts assembled into one line chart. */
const DAYS = Array.from({ length: 90 }, (_, i) => ({ label: `Day ${i + 1}`, value: Math.round(120 + i * 1.6 + Math.sin(i / 4) * 14 + (i > 60 ? 18 : 0)) }));

export default function ChartDemo() {
  const [box, W] = useChartWidth<HTMLDivElement>(560);
  const [range, setRange] = React.useState("90");
  const [at, setAt] = React.useState<number | null>(null);
  const drawn = useInkDraw(range);
  const shown = DAYS.slice(DAYS.length - Number(range));
  const H = 200, PT = 24;
  const lo = Math.min(...shown.map((d) => d.value)) * 0.9, hi = Math.max(...shown.map((d) => d.value)) * 1.05;
  const X = (i: number) => (i / (shown.length - 1)) * (W - 12) + 6;
  const Y = (v: number) => PT + (1 - (v - lo) / (hi - lo)) * (H - PT - 4);
  const pts = shown.map((d, i) => [X(i), Y(d.value)] as [number, number]);
  const line = smoothPath(pts);
  const i = at ?? shown.length - 1;
  const d = shown[i]!;
  const grid = niceTicks(lo, hi, 3);
  return (
    <div className="flex w-full max-w-[640px] flex-col gap-4">
      <div className="flex items-start justify-between gap-4">
        <ChartHero label="Orders a day" value={String(d.value)} detail={at == null ? "today" : d.label} instant={at != null} />
        <SegmentedControl size="sm" label="Range" value={range} onValueChange={setRange} options={[{ value: "30", label: "30D" }, { value: "90", label: "90D" }]} />
      </div>
      <div ref={box}>
        <ChartSurface label="Orders a day" valueText={`${d.label}: ${d.value} orders`} count={shown.length} active={at} rest={shown.length - 1} onActive={setAt} height={H} padX={[6, 6]}>
          <svg width={W} height={H} aria-hidden className="absolute inset-0">
            <ChartGrid ys={grid.map(Y)} x2={W} />
            <InkArea d={areaPath(line, pts, H)} top={PT} bottom={H} drawn={drawn} />
            <InkLine d={line} drawn={drawn} />
          </svg>
          <ChartYLabels ticks={grid.map((v) => ({ y: Y(v), label: String(Math.round(v)) }))} />
          <ChartGuide x={X(i)} on={at != null} />
          <ChartHalo x={X(i)} y={Y(d.value)} />
          <ChartPill x={X(i)} y={Y(d.value)} width={W} on={at != null} value={`${d.value} orders`} detail={d.label} />
        </ChartSurface>
        <ChartAxis width={W} active={X(i)} ticks={shown.flatMap((s, k) => (k % 15 === 0 ? [{ x: X(k), label: s.label }] : []))} />
      </div>
      <ChartTable caption="Orders a day" head={["Day", "Orders"]} rows={shown.map((s) => [s.label, s.value])} />
    </div>
  );
}