Chart

1"use client";2​3import * as React from "react";4​5import { cn } from "@/lib/utils";6​7// Charts drawn in SVG (extrapolated from the Inkbox console, Figma 427:2715: its 12px muted labels, lilac rules, white8// floating panels and the purple, pink, blue, teal and green of its states). ChartContainer takes a config that names9// and colors each series (series-1 purple, then pink, avatar blue, info teal, success green) and holds the chart, its10// tooltip and its legend. Lines draw in from the left and bars rise from the axis once, on mount (700ms and 400ms, the11// strong ease-out); with reduced motion they fade in. Hovering or moving with the arrow keys shows the tooltip.12​13export type ChartConfig = Record<string, { label?: React.ReactNode; icon?: React.ComponentType<{ className?: string }>; color?: string }>;14​15type Datum = Record<string, string | number>;16type Active = { index: number; x: number; y: number } | null;17type ChartContextProps = {18  config: ChartConfig;19  data: Datum[];20  setData: (data: Datum[], index: string, keys: string[]) => void;21  index: string;22  keys: string[];23  active: Active;24  setActive: (active: Active) => void;25  hidden: Set<string>;26  toggle: (key: string) => void;27};28​29const ChartContext = React.createContext<ChartContextProps | null>(null);30​31function useChart() {32  const context = React.useContext(ChartContext);33  if (!context) throw new Error("useChart must be used within a <ChartContainer />");34  return context;35}36​37const SERIES = ["var(--ds-color-chart-series-1)", "var(--ds-color-chart-series-2)", "var(--ds-color-chart-series-3)", "var(--ds-color-chart-series-4)", "var(--ds-color-chart-series-5)"];38const colorOf = (config: ChartConfig, key: string, i: number) => `var(--color-${key}, ${config[key]?.color ?? SERIES[i % SERIES.length]})`;39​40/** Kept for API parity: ChartContainer already sets each series' color as --color-<key> on itself. */41function ChartStyle(_props: { id?: string; config: ChartConfig }) {42  return null;43}44​45function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & { config: ChartConfig }) {46  const [data, setDataState] = React.useState<Datum[]>([]);47  const [index, setIndex] = React.useState("");48  const [keys, setKeys] = React.useState<string[]>([]);49  const [active, setActive] = React.useState<Active>(null);50  const [hidden, setHidden] = React.useState<Set<string>>(new Set());51  const setData = React.useCallback((d: Datum[], i: string, k: string[]) => {52    setDataState(d);53    setIndex(i);54    setKeys(k);55  }, []);56  const toggle = React.useCallback((key: string) => setHidden((h) => {57    const next = new Set(h);58    if (next.has(key)) next.delete(key);59    else next.add(key);60    return next;61  }), []);62  const style = Object.fromEntries(Object.entries(config).map(([key, v], i) => [`--color-${key}`, v.color ?? SERIES[i % SERIES.length]])) as React.CSSProperties;63  return (64    <ChartContext.Provider value={{ config, data, setData, index, keys, active, setActive, hidden, toggle }}>65      <div data-slot="chart" data-chart={id} style={style} className={cn("relative flex aspect-video w-full flex-col justify-center font-sans text-caption text-fg-muted", className)} {...props}>66        {children}67      </div>68    </ChartContext.Provider>69  );70}71​72function useSize<T extends HTMLElement>() {73  const ref = React.useRef<T>(null);74  const [size, setSize] = React.useState({ width: 0, height: 0 });75  React.useLayoutEffect(() => {76    const el = ref.current;77    if (!el) return;78    const observer = new ResizeObserver(([entry]) => setSize({ width: entry.contentRect.width, height: entry.contentRect.height }));79    observer.observe(el);80    return () => observer.disconnect();81  }, []);82  return [ref, size] as const;83}84​85const PAD = { top: 12, right: 12, bottom: 28, left: 12 };86​87function niceMax(max: number) {88  if (max <= 0) return 1;89  const step = 10 ** Math.floor(Math.log10(max));90  return Math.ceil(max / step) * step;91}92​93/** A smooth path through the points (monotone in x), or straight segments. */94function pathOf(points: [number, number][], curve: "monotone" | "linear") {95  if (!points.length) return "";96  if (curve === "linear" || points.length < 3) return points.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join("");97  let d = `M${points[0][0]},${points[0][1]}`;98  for (let i = 0; i < points.length - 1; i++) {99    const [x0, y0] = points[i - 1] ?? points[i];100    const [x1, y1] = points[i];101    const [x2, y2] = points[i + 1];102    const [x3, y3] = points[i + 2] ?? points[i + 1];103    const c1 = [x1 + (x2 - x0) / 6, y1 + (y2 - y0) / 6];104    const c2 = [x2 - (x3 - x1) / 6, y2 - (y3 - y1) / 6];105    d += `C${c1[0]},${c1[1]} ${c2[0]},${c2[1]} ${x2},${y2}`;106  }107  return d;108}109​110type CartesianProps = {111  data: Datum[];112  /** The key of each datum's label on the x axis (month, day). */113  index: string;114  /** The series to draw, in order; defaults to every key in the config. */115  keys?: string[];116  showGrid?: boolean;117  showXAxis?: boolean;118  showYAxis?: boolean;119  /** Format the x labels (e.g. the first three letters of a month). */120  tickFormatter?: (value: string) => string;121  valueFormatter?: (value: number) => string;122  className?: string;123  "aria-label"?: string;124};125​126function useCartesian(kind: "line" | "area" | "bar", { data, index, keys: keysProp, showYAxis }: CartesianProps, stacked: boolean) {127  const chart = useChart();128  const keys = React.useMemo(() => keysProp ?? Object.keys(chart.config), [keysProp, chart.config]);129  const { setData } = chart;130  React.useEffect(() => setData(data, index, keys), [data, index, keys, setData]);131  const [ref, size] = useSize<HTMLDivElement>();132  const visible = keys.filter((k) => !chart.hidden.has(k));133  const values = data.map((d) => (stacked ? visible.reduce((s, k) => s + Number(d[k] ?? 0), 0) : Math.max(0, ...visible.map((k) => Number(d[k] ?? 0)))));134  const max = niceMax(Math.max(0, ...values));135  const left = PAD.left + (showYAxis ? 32 : 0);136  const innerW = Math.max(0, size.width - left - PAD.right);137  // Lines and areas keep their first and last points (and labels) clear of the edges.138  const inset = kind === "bar" ? 0 : 16;139  const innerH = Math.max(0, size.height - PAD.top - PAD.bottom);140  const band = data.length ? innerW / data.length : 0;141  const xAt = (i: number) => (kind === "bar" ? left + band * i + band / 2 : left + inset + (data.length > 1 ? ((innerW - inset * 2) * i) / (data.length - 1) : innerW / 2 - inset));142  const yAt = (v: number) => PAD.top + innerH - (innerH * v) / max;143  return { chart, keys, visible, ref, size, max, left, innerW, innerH, band, xAt, yAt };144}145​146function Frame({ kind, props, geometry, children }: { kind: "line" | "area" | "bar"; props: CartesianProps; geometry: ReturnType<typeof useCartesian>; children: React.ReactNode }) {147  const { chart, ref, size, max, left, innerW, innerH, band, xAt, yAt } = geometry;148  const { data, index, showGrid = true, showXAxis = true, showYAxis = false, tickFormatter = (v: string) => v, valueFormatter = (v: number) => v.toLocaleString() } = props;149  const ticks = [0, 0.25, 0.5, 0.75, 1].map((t) => max * t);150  const pick = (clientX: number, rect: DOMRect) => {151    const x = clientX - rect.left;152    let best = 0;153    for (let i = 0; i < data.length; i++) if (Math.abs(xAt(i) - x) < Math.abs(xAt(best) - x)) best = i;154    return best;155  };156  const activate = (i: number) => chart.setActive({ index: i, x: xAt(i), y: PAD.top });157  const labelStep = Math.max(1, Math.ceil(data.length / Math.max(1, Math.floor(innerW / 56))));158  return (159    <div ref={ref} className={cn("relative h-full min-h-0 w-full flex-1", props.className)}>160      {size.width > 0 && (161        <svg162          width={size.width}163          height={size.height}164          role="img"165          tabIndex={0}166          aria-label={props["aria-label"] ?? "Chart"}167          className="block overflow-visible rounded-control outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"168          onPointerMove={(e) => activate(pick(e.clientX, e.currentTarget.getBoundingClientRect()))}169          onPointerLeave={() => chart.setActive(null)}170          onBlur={() => chart.setActive(null)}171          onFocus={() => activate(chart.active?.index ?? 0)}172          onKeyDown={(e) => {173            if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;174            e.preventDefault();175            const current = chart.active?.index ?? 0;176            activate(Math.min(data.length - 1, Math.max(0, current + (e.key === "ArrowRight" ? 1 : -1))));177          }}178        >179          {showGrid && ticks.map((t) => <line key={t} x1={left} x2={left + innerW} y1={yAt(t)} y2={yAt(t)} className="stroke-line-subtle" strokeWidth={1} strokeDasharray={t === 0 ? undefined : "3 3"} />)}180          {showYAxis && ticks.map((t) => (181            <text key={t} x={left - 8} y={yAt(t)} dy="0.32em" textAnchor="end" className="fill-fg-muted text-caption">182              {valueFormatter(t)}183            </text>184          ))}185          {chart.active && kind !== "bar" && <line x1={xAt(chart.active.index)} x2={xAt(chart.active.index)} y1={PAD.top} y2={PAD.top + innerH} className="stroke-line-field" strokeWidth={1} />}186          {chart.active && kind === "bar" && <rect x={xAt(chart.active.index) - band / 2} y={PAD.top} width={band} height={innerH} rx={6} className="fill-subtle" />}187          {children}188          {showXAxis && data.map((d, i) => (i % labelStep === 0 ? (189            <text key={i} x={xAt(i)} y={PAD.top + innerH + 18} textAnchor="middle" className="fill-fg-muted text-caption">190              {tickFormatter(String(d[index]))}191            </text>192          ) : null))}193        </svg>194      )}195    </div>196  );197}198​199function LineChart(props: CartesianProps & { curve?: "monotone" | "linear"; dots?: boolean }) {200  const g = useCartesian("line", props, false);201  const { curve = "monotone", dots = false } = props;202  return (203    <Frame kind="line" props={props} geometry={g}>204      {g.visible.map((key) => {205        const i = g.keys.indexOf(key);206        const points = props.data.map((d, n) => [g.xAt(n), g.yAt(Number(d[key] ?? 0))] as [number, number]);207        return (208          <g key={key} data-series={key}>209            <path d={pathOf(points, curve)} fill="none" stroke={colorOf(g.chart.config, key, i)} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" pathLength={1} strokeDasharray="1 1" className="animate-chart-line" />210            {(dots || g.chart.active) && points.map(([x, y], n) => (dots || g.chart.active?.index === n ? <circle key={n} cx={x} cy={y} r={g.chart.active?.index === n ? 4 : 3} fill="var(--ds-color-bg-default)" stroke={colorOf(g.chart.config, key, i)} strokeWidth={2} /> : null))}211          </g>212        );213      })}214    </Frame>215  );216}217​218function AreaChart(props: CartesianProps & { curve?: "monotone" | "linear"; stacked?: boolean }) {219  const { curve = "monotone", stacked = false } = props;220  const g = useCartesian("area", props, stacked);221  const base = props.data.map(() => 0);222  const id = React.useId().replace(/:/g, "");223  return (224    <Frame kind="area" props={props} geometry={g}>225      <defs>226        {g.visible.map((key) => (227          <linearGradient key={key} id={`${id}-${key}`} x1="0" x2="0" y1="0" y2="1">228            <stop offset="0%" stopColor={colorOf(g.chart.config, key, g.keys.indexOf(key))} stopOpacity={0.32} />229            <stop offset="100%" stopColor={colorOf(g.chart.config, key, g.keys.indexOf(key))} stopOpacity={0.02} />230          </linearGradient>231        ))}232      </defs>233      {g.visible.map((key) => {234        const i = g.keys.indexOf(key);235        const lows = stacked ? [...base] : props.data.map(() => 0);236        const highs = props.data.map((d, n) => lows[n] + Number(d[key] ?? 0));237        if (stacked) highs.forEach((h, n) => (base[n] = h));238        const top = highs.map((v, n) => [g.xAt(n), g.yAt(v)] as [number, number]);239        const bottom = lows.map((v, n) => [g.xAt(n), g.yAt(v)] as [number, number]).reverse();240        const line = pathOf(top, curve);241        const area = `${line}L${bottom.map(([x, y]) => `${x},${y}`).join("L")}Z`;242        return (243          <g key={key} data-series={key}>244            <path d={area} fill={`url(#${id}-${key})`} className="animate-fade-in" />245            <path d={line} fill="none" stroke={colorOf(g.chart.config, key, i)} strokeWidth={2} strokeLinecap="round" pathLength={1} strokeDasharray="1 1" className="animate-chart-line" />246          </g>247        );248      })}249    </Frame>250  );251}252​253function BarChart(props: CartesianProps & { stacked?: boolean; radius?: number }) {254  const { stacked = false, radius = 4 } = props;255  const g = useCartesian("bar", props, stacked);256  const gap = 4;257  const groupW = Math.max(0, g.band * 0.72);258  const barW = stacked ? groupW : Math.max(2, (groupW - gap * (g.visible.length - 1)) / Math.max(1, g.visible.length));259  return (260    <Frame kind="bar" props={props} geometry={g}>261      {props.data.map((d, n) => {262        let acc = 0;263        return (264          <g key={n}>265            {g.visible.map((key, k) => {266              const value = Number(d[key] ?? 0);267              const x = stacked ? g.xAt(n) - groupW / 2 : g.xAt(n) - groupW / 2 + k * (barW + gap);268              const y0 = g.yAt(acc);269              const y1 = g.yAt(acc + value);270              if (stacked) acc += value;271              const top = !stacked || k === g.visible.length - 1;272              return (273                <rect274                  key={key}275                  x={x}276                  y={y1}277                  width={barW}278                  height={Math.max(0, y0 - y1)}279                  rx={top ? Math.min(radius, barW / 2) : 0}280                  fill={colorOf(g.chart.config, key, g.keys.indexOf(key))}281                  style={{ transformOrigin: `0 ${g.yAt(0)}px`, animationDelay: `${n * 30}ms` }}282                  className="animate-chart-bar"283                />284              );285            })}286          </g>287        );288      })}289    </Frame>290  );291}292​293function PieChart({ data, index, value, innerRadius = 0.6, className, ...props }: { data: Datum[]; index: string; value: string; innerRadius?: number; className?: string; "aria-label"?: string }) {294  const chart = useChart();295  const { setData } = chart;296  React.useEffect(() => setData(data, index, [value]), [data, index, value, setData]);297  const [ref, size] = useSize<HTMLDivElement>();298  const shown = data.filter((d) => !chart.hidden.has(String(d[index])));299  const total = shown.reduce((s, d) => s + Number(d[value] ?? 0), 0) || 1;300  const r = Math.max(0, Math.min(size.width, size.height) / 2 - 8);301  const cx = size.width / 2;302  const cy = size.height / 2;303  let angle = -Math.PI / 2;304  return (305    <div ref={ref} className={cn("relative h-full min-h-0 w-full flex-1", className)}>306      {r > 0 && (307        <svg width={size.width} height={size.height} role="img" aria-label={props["aria-label"] ?? "Chart"} className="block animate-pop-in origin-center" onPointerLeave={() => chart.setActive(null)}>308          {shown.map((d) => {309            const key = String(d[index]);310            const n = data.indexOf(d);311            const sweep = (Number(d[value] ?? 0) / total) * Math.PI * 2;312            const a0 = angle;313            const a1 = angle + sweep;314            angle = a1;315            const ri = r * innerRadius;316            const large = sweep > Math.PI ? 1 : 0;317            const p = (a: number, rr: number) => `${cx + rr * Math.cos(a)},${cy + rr * Math.sin(a)}`;318            const dPath = sweep >= Math.PI * 2 - 1e-6319              ? `M${cx - r},${cy}a${r},${r} 0 1,0 ${r * 2},0a${r},${r} 0 1,0 ${-r * 2},0${ri ? `M${cx - ri},${cy}a${ri},${ri} 0 1,1 ${ri * 2},0a${ri},${ri} 0 1,1 ${-ri * 2},0` : ""}`320              : `M${p(a0, r)}A${r},${r} 0 ${large} 1 ${p(a1, r)}${ri ? `L${p(a1, ri)}A${ri},${ri} 0 ${large} 0 ${p(a0, ri)}` : `L${cx},${cy}`}Z`;321            return (322              <path323                key={key}324                d={dPath}325                fillRule="evenodd"326                fill={colorOf(chart.config, key, n)}327                stroke="var(--ds-color-bg-default)"328                strokeWidth={2}329                className={cn("transition-opacity duration-150 ease-out", chart.active && chart.active.index !== n && "opacity-60")}330                onPointerMove={(e) => {331                  const rect = e.currentTarget.ownerSVGElement!.getBoundingClientRect();332                  chart.setActive({ index: n, x: e.clientX - rect.left, y: e.clientY - rect.top });333                }}334              />335            );336          })}337        </svg>338      )}339    </div>340  );341}342​343type TooltipItem = { key: string; name: React.ReactNode; value: number; color: string };344​345/** Where the tooltip shows: pass `content` (usually <ChartTooltipContent />). It follows the hovered point. */346function ChartTooltip({ content, cursor: _cursor }: { content?: React.ReactElement<ChartTooltipContentProps>; cursor?: boolean }) {347  const chart = useChart();348  if (!chart.active || !chart.data.length) return null;349  const datum = chart.data[chart.active.index];350  if (!datum) return null;351  const pie = chart.keys.length === 1 && !(chart.keys[0] in chart.config) && String(datum[chart.index]) in chart.config;352  const payload: TooltipItem[] = pie353    ? [{ key: String(datum[chart.index]), name: chart.config[String(datum[chart.index])]?.label ?? String(datum[chart.index]), value: Number(datum[chart.keys[0]] ?? 0), color: colorOf(chart.config, String(datum[chart.index]), chart.active.index) }]354    : chart.keys.filter((k) => !chart.hidden.has(k)).map((k, i) => ({ key: k, name: chart.config[k]?.label ?? k, value: Number(datum[k] ?? 0), color: colorOf(chart.config, k, chart.keys.indexOf(k) ?? i) }));355  const element = content ?? <ChartTooltipContent />;356  return (357    <div358      data-slot="chart-tooltip"359      role="status"360      className="pointer-events-none absolute z-10 animate-fade-in"361      style={{ left: chart.active.x, top: chart.active.y, transform: `translate(${chart.active.x > 160 ? "calc(-100% - 12px)" : "12px"}, 0)` }}362    >363      {React.cloneElement(element, { payload, label: pie ? undefined : String(datum[chart.index]) })}364    </div>365  );366}367​368type ChartTooltipContentProps = React.ComponentProps<"div"> & {369  payload?: TooltipItem[];370  label?: string;371  indicator?: "dot" | "line" | "dashed";372  hideLabel?: boolean;373  hideIndicator?: boolean;374  labelFormatter?: (label: string) => React.ReactNode;375  formatter?: (value: number, name: React.ReactNode, key: string) => React.ReactNode;376};377​378/** The tooltip's panel: white, 8px corners, the floating shadow, the label in 13px medium ink, a row per series. */379function ChartTooltipContent({ payload = [], label, indicator = "dot", hideLabel = false, hideIndicator = false, labelFormatter, formatter, className, ...props }: ChartTooltipContentProps) {380  return (381    <div data-slot="chart-tooltip-content" className={cn("grid min-w-32 gap-1.5 rounded-control bg-surface px-3 py-2 text-caption leading-tight text-fg shadow-floating", className)} {...props}>382      {!hideLabel && label !== undefined && <p className="text-body-sm font-medium text-fg">{labelFormatter ? labelFormatter(label) : label}</p>}383      <div className="grid gap-1">384        {payload.map((item) => (385          <div key={item.key} className="flex items-center gap-2">386            {!hideIndicator && (387              <span388                aria-hidden389                className={cn("shrink-0", indicator === "dot" ? "size-2.5 rounded-xs" : "h-3 w-1 rounded-xs", indicator === "dashed" && "border border-dashed bg-transparent")}390                style={indicator === "dashed" ? { borderColor: item.color } : { background: item.color }}391              />392            )}393            {formatter ? formatter(item.value, item.name, item.key) : (394              <>395                <span className="text-fg-muted">{item.name}</span>396                <span className="ml-auto pl-3 font-medium text-fg tabular-nums">{item.value.toLocaleString()}</span>397              </>398            )}399          </div>400        ))}401      </div>402    </div>403  );404}405​406/** Where the legend shows: pass `content` (usually <ChartLegendContent />). */407function ChartLegend({ content, verticalAlign = "bottom" }: { content?: React.ReactElement<React.ComponentProps<typeof ChartLegendContent>>; verticalAlign?: "top" | "bottom" }) {408  const element = content ?? <ChartLegendContent />;409  return <div className={cn(verticalAlign === "top" ? "order-first pb-3" : "pt-3")}>{element}</div>;410}411​412/** A row of 12px muted labels with their color keys; each toggles its series when `interactive`. */413function ChartLegendContent({ className, hideIcon = false, interactive = true, ...props }: React.ComponentProps<"div"> & { hideIcon?: boolean; interactive?: boolean }) {414  const chart = useChart();415  const keys = chart.keys.length === 1 && !(chart.keys[0] in chart.config) ? chart.data.map((d) => String(d[chart.index])) : chart.keys;416  return (417    <div data-slot="chart-legend-content" className={cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5", className)} {...props}>418      {keys.map((key, i) => {419        const item = chart.config[key];420        const Icon = item?.icon;421        const off = chart.hidden.has(key);422        const body = (423          <>424            {Icon && !hideIcon ? <Icon className="size-3.5" /> : <span aria-hidden className="size-2.5 rounded-xs" style={{ background: colorOf(chart.config, key, i) }} />}425            {item?.label ?? key}426          </>427        );428        return interactive ? (429          <button key={key} type="button" aria-pressed={!off} onClick={() => chart.toggle(key)} className={cn("inline-flex items-center gap-1.5 rounded-xs text-caption leading-tight text-fg-secondary outline-none transition-opacity duration-150 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring motion-reduce:transition-none", off && "opacity-40")}>430            {body}431          </button>432        ) : (433          <span key={key} className="inline-flex items-center gap-1.5 text-caption leading-tight text-fg-secondary">434            {body}435          </span>436        );437      })}438    </div>439  );440}441​442export { AreaChart, BarChart, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, LineChart, PieChart, useChart };