makersclaw 0.2.0 → 0.3.0

package/registry/blocks/chart/cartesian.jsx

@@ -0,0 +1,642 @@
+"use client";
+
+import { useId, useMemo, useState } from "react";
+import { cx } from "../../ui";
+import {
+  ChartEmpty,
+  ChartLegend,
+  DataTable,
+  TooltipBox,
+  defaultFormat,
+  humanize,
+  idFrom,
+  niceTicks,
+  num,
+  textWidth,
+  tone,
+  toneOf,
+  useReveal,
+  useWidth,
+} from "./core";
+
+// LineChart, AreaChart and BarChart — one drawing, three marks. Rows in,
+// one x key, the series to draw; the block owns the rest: the scale and its
+// round ticks, gridlines, labels thinned to fit, a width that follows the
+// container, the tooltip and crosshair under a pointer or the arrow keys,
+// the legend that hides a series, the reveal (none with reduced motion),
+// and the words and table a screen reader gets instead of the picture.
+
+// ---- paths -------------------------------------------------------------------
+
+const f = (n) => Math.round(n * 100) / 100;
+
+function linear(pts) {
+  return pts.map(([x, y], i) => `${i ? "L" : "M"}${f(x)},${f(y)}`).join("");
+}
+
+function step(pts) {
+  let d = `M${f(pts[0][0])},${f(pts[0][1])}`;
+  for (let i = 1; i < pts.length; i++) {
+    const mid = (pts[i - 1][0] + pts[i][0]) / 2;
+    d += `H${f(mid)}V${f(pts[i][1])}H${f(pts[i][0])}`;
+  }
+  return d;
+}
+
+// Monotone cubic (Fritsch–Carlson): smooth, and never overshoots a point,
+// so a curve does not invent a dip below zero or a peak that was not there.
+function monotone(pts) {
+  const n = pts.length;
+  if (n < 3) return linear(pts);
+  const dx = [];
+  const m = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx[i] = pts[i + 1][0] - pts[i][0];
+    m[i] = dx[i] === 0 ? 0 : (pts[i + 1][1] - pts[i][1]) / dx[i];
+  }
+  const t = new Array(n);
+  t[0] = m[0];
+  t[n - 1] = m[n - 2];
+  for (let i = 1; i < n - 1; i++) {
+    t[i] = m[i - 1] * m[i] <= 0 ? 0 : (3 * (dx[i - 1] + dx[i])) / ((2 * dx[i] + dx[i - 1]) / m[i - 1] + (dx[i] + 2 * dx[i - 1]) / m[i]);
+  }
+  let d = `M${f(pts[0][0])},${f(pts[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const h = dx[i] / 3;
+    d += `C${f(pts[i][0] + h)},${f(pts[i][1] + t[i] * h)} ${f(pts[i + 1][0] - h)},${f(pts[i + 1][1] - t[i + 1] * h)} ${f(pts[i + 1][0])},${f(pts[i + 1][1])}`;
+  }
+  return d;
+}
+
+function curvePath(pts, curve) {
+  if (!pts.length) return "";
+  if (curve === "step") return step(pts);
+  if (curve === "linear") return linear(pts);
+  return monotone(pts);
+}
+
+// A bar with its outer end rounded (the end away from zero).
+function barPath(x, y, w, h, r, side) {
+  const q = Math.max(0, Math.min(r, w / 2, h / 2));
+  if (!q || !side) return `M${f(x)},${f(y)}h${f(w)}v${f(h)}h${f(-w)}Z`;
+  const X = f(x);
+  const Y = f(y);
+  if (side === "top") return `M${X},${f(y + h)}V${f(y + q)}Q${X},${Y} ${f(x + q)},${Y}H${f(x + w - q)}Q${f(x + w)},${Y} ${f(x + w)},${f(y + q)}V${f(y + h)}Z`;
+  if (side === "bottom") return `M${X},${Y}V${f(y + h - q)}Q${X},${f(y + h)} ${f(x + q)},${f(y + h)}H${f(x + w - q)}Q${f(x + w)},${f(y + h)} ${f(x + w)},${f(y + h - q)}V${Y}Z`;
+  if (side === "right") return `M${X},${Y}H${f(x + w - q)}Q${f(x + w)},${Y} ${f(x + w)},${f(y + q)}V${f(y + h - q)}Q${f(x + w)},${f(y + h)} ${f(x + w - q)},${f(y + h)}H${X}Z`;
+  return `M${f(x + w)},${Y}H${f(x + q)}Q${X},${Y} ${X},${f(y + q)}V${f(y + h - q)}Q${X},${f(y + h)} ${f(x + q)},${f(y + h)}H${f(x + w)}Z`;
+}
+
+// ---- the chart ----------------------------------------------------------------
+
+function Cartesian({
+  kind,
+  data,
+  x,
+  series,
+  format = defaultFormat,
+  formatAxis,
+  formatX = (v) => (v == null ? "" : String(v)),
+  label = "Chart",
+  description,
+  xLabel,
+  height = 240,
+  stacked = false,
+  orientation = "vertical",
+  valueLabels = false,
+  track = false,
+  curve = "monotone",
+  dots = false,
+  grid = true,
+  xAxis = true,
+  yAxis = true,
+  legend,
+  tooltip = true,
+  onSelect,
+  emptyLabel = "No data yet",
+  emptyBody,
+  className,
+}) {
+  const uid = idFrom(useId());
+  const fmt = (v) => (v == null ? "—" : format(v));
+  const [boxRef, width] = useWidth();
+  const [hidden, setHidden] = useState(() => new Set());
+  const [active, setActive] = useState(null);
+  const [keyed, setKeyed] = useState(false);
+
+  const rows = Array.isArray(data) ? data : [];
+  // A `muted` series with no tone of its own is the grey: a comparison
+  // (last period) that sits behind the series it is compared with.
+  const all = useMemo(
+    () => (series ?? []).map((s, i) => ({ ...s, label: s.label ?? humanize(s.key), tone: s.muted && s.tone == null ? "muted" : toneOf(s, i) })),
+    [series],
+  );
+  const live = all.filter((s) => !hidden.has(s.key));
+  // Lines and areas draw muted series first, so they sit underneath.
+  const order = live.map((_, j) => j).sort((a, b) => Number(Boolean(live[b].muted)) - Number(Boolean(live[a].muted)));
+  const horizontal = kind === "bar" && orientation === "horizontal";
+  const stack = stacked && kind !== "line";
+  const axisFormat = formatAxis ?? format;
+  const showLegend = legend ?? all.length > 1;
+  const shown = useReveal(width > 0);
+
+  // Each series' [from, to] per row: stacked marks start where the one
+  // below ended (positives up, negatives down); the rest start at zero.
+  const spans = useMemo(() => {
+    const up = rows.map(() => 0);
+    const down = rows.map(() => 0);
+    return live.map((s) =>
+      rows.map((r, i) => {
+        const v = num(r?.[s.key]);
+        if (v == null) return null;
+        if (!stack) return [0, v];
+        if (v >= 0) {
+          const from = up[i];
+          up[i] += v;
+          return [from, up[i]];
+        }
+        const from = down[i];
+        down[i] += v;
+        return [from, down[i]];
+      }),
+    );
+  }, [rows, live, stack]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  let lo = 0;
+  let hi = 0;
+  for (const s of spans) for (const p of s) if (p) (lo = Math.min(lo, p[0], p[1])), (hi = Math.max(hi, p[0], p[1]));
+  const valueLen = horizontal ? Math.max(0, width - 16) : height - 32;
+  const ticks = niceTicks(lo, hi, Math.max(2, Math.min(6, Math.floor(valueLen / (horizontal ? 80 : 48)))));
+  const vMin = ticks[0];
+  const vMax = ticks[ticks.length - 1];
+
+  const xNames = rows.map((r) => formatX(r?.[x], r));
+  const tickNames = ticks.map((t) => axisFormat(t));
+
+  // BarChart's value labels: one at the outer end of every bar, or of every
+  // stack (its total). [{ i, j, v, text }]; j is the series (-1: a stack).
+  const barLabels = [];
+  if (kind === "bar" && valueLabels && live.length) {
+    const say = (v, row, key) => (typeof valueLabels === "function" ? valueLabels(v, row, key) : fmt(v));
+    rows.forEach((row, i) => {
+      if (stack) {
+        const vals = live.map((s) => num(row?.[s.key])).filter((v) => v != null);
+        if (!vals.length) return;
+        const v = vals.reduce((a, b) => a + b, 0);
+        barLabels.push({ i, j: -1, v, text: say(v, row, null) });
+      } else {
+        live.forEach((s, j) => {
+          const v = num(row?.[s.key]);
+          if (v != null) barLabels.push({ i, j, v, text: say(v, row, s.key) });
+        });
+      }
+    });
+  }
+  const labelRoom = barLabels.length ? Math.max(...barLabels.map((l) => textWidth(l.text))) + 6 : 0;
+
+  // Margins from what the labels need.
+  const catW = horizontal && yAxis ? Math.min(Math.max(...xNames.map(textWidth), 24) + 8, width * 0.4) : 0;
+  const valW = !horizontal && yAxis ? Math.max(...tickNames.map(textWidth)) + 8 : 0;
+  const m = {
+    top: barLabels.length && !horizontal ? 22 : 8,
+    right: horizontal ? Math.max(8, textWidth(tickNames[tickNames.length - 1]) / 2, labelRoom) : 8,
+    bottom: xAxis ? 24 : 4,
+    left: horizontal ? catW : valW,
+  };
+  // Points sit on the plot's edges (bars sit inside their band), so the
+  // first and last x labels, centred on them, need room outside it.
+  if (kind !== "bar" && xAxis && rows.length) {
+    m.left = Math.max(m.left, textWidth(xNames[0]) / 2);
+    m.right = Math.max(m.right, textWidth(xNames[xNames.length - 1]) / 2);
+  }
+  const plotW = Math.max(0, width - m.left - m.right);
+  const plotH = Math.max(0, height - m.top - m.bottom);
+  const n = rows.length;
+
+  // Value → pixel along the value axis; index → pixel along the category axis.
+  const vPos = (v) => (horizontal ? m.left + ((v - vMin) / (vMax - vMin || 1)) * plotW : m.top + plotH - ((v - vMin) / (vMax - vMin || 1)) * plotH);
+  const band = (horizontal ? plotH : plotW) / Math.max(1, n);
+  const cPos =
+    kind === "bar"
+      ? (i) => (horizontal ? m.top : m.left) + band * (i + 0.5)
+      : (i) => m.left + (n === 1 ? plotW / 2 : (i * plotW) / (n - 1));
+  const zero = vPos(Math.max(vMin, Math.min(0, vMax)));
+
+  // Category labels thinned so they never collide.
+  const labelEvery = horizontal
+    ? Math.max(1, Math.ceil(16 / Math.max(1, band)))
+    : Math.max(1, Math.ceil((Math.max(...xNames.map(textWidth), 0) + 12) / Math.max(1, kind === "bar" ? band : plotW / Math.max(1, n - 1))));
+
+  function indexAt(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const p = horizontal ? e.clientY - rect.top : e.clientX - rect.left;
+    if (kind === "bar") return Math.max(0, Math.min(n - 1, Math.floor((p - (horizontal ? m.top : m.left)) / band)));
+    if (n === 1) return 0;
+    return Math.max(0, Math.min(n - 1, Math.round(((p - m.left) / plotW) * (n - 1))));
+  }
+
+  function onKeyDown(e) {
+    if (!n) return;
+    const back = horizontal ? "ArrowUp" : "ArrowLeft";
+    const fwd = horizontal ? "ArrowDown" : "ArrowRight";
+    let next = null;
+    if (e.key === fwd || e.key === (horizontal ? "ArrowRight" : "ArrowDown")) next = active == null ? 0 : Math.min(n - 1, active + 1);
+    else if (e.key === back || e.key === (horizontal ? "ArrowLeft" : "ArrowUp")) next = active == null ? n - 1 : Math.max(0, active - 1);
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = n - 1;
+    else if (e.key === "Escape") {
+      setActive(null);
+      return;
+    } else if ((e.key === "Enter" || e.key === " ") && onSelect && active != null) {
+      e.preventDefault();
+      onSelect(rows[active], active);
+      return;
+    }
+    if (next == null) return;
+    e.preventDefault();
+    setKeyed(true);
+    setActive(next);
+  }
+
+  // ---- words -------------------------------------------------------------------
+
+  const summary = useMemo(() => {
+    if (!n || !live.length) return "";
+    const parts = live.map((s) => {
+      const vals = rows.map((r) => num(r?.[s.key]));
+      const idx = vals.reduce((best, v, i) => (v != null && (best < 0 || v > vals[best]) ? i : best), -1);
+      const first = vals.find((v) => v != null);
+      const last = [...vals].reverse().find((v) => v != null);
+      return `${s.label}: ${kind === "bar" ? "" : `from ${fmt(first)} to ${fmt(last)}, `}highest ${fmt(vals[idx])} at ${xNames[idx]}`;
+    });
+    return `${n} ${n === 1 ? "point" : "points"}, ${xNames[0]} to ${xNames[n - 1]}. ${parts.join("; ")}.`;
+  }, [rows, live, n]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const tipRows =
+    active == null
+      ? []
+      : live.map((s) => ({ key: s.key, label: s.label, tone: s.tone, dashed: s.dashed, value: fmt(num(rows[active]?.[s.key])) }));
+  const total = active == null ? null : live.reduce((sum, s) => sum + (num(rows[active]?.[s.key]) ?? 0), 0);
+  const announce = active == null ? "" : `${xNames[active]}: ${tipRows.map((r) => `${r.label} ${r.value}`).join(", ")}`;
+
+  const legendNode = showLegend ? (
+    <ChartLegend
+      items={all}
+      hidden={hidden}
+      onToggle={(key) =>
+        setHidden((h) => {
+          const next = new Set(h);
+          if (next.has(key)) next.delete(key);
+          else next.add(key);
+          return next;
+        })
+      }
+      label={`${label}: series`}
+    />
+  ) : null;
+
+  if (!n) {
+    return (
+      <div className={cx("grid gap-3", className)}>
+        <ChartEmpty height={height} title={emptyLabel} body={emptyBody} />
+      </div>
+    );
+  }
+
+  // ---- marks -------------------------------------------------------------------
+
+  const tipAt =
+    active == null || !tooltip
+      ? null
+      : horizontal
+        ? { x: Math.min(width - 12, Math.max(...live.map((_, k) => vPos(spans[k][active]?.[1] ?? 0)), zero)), y: cPos(active), flip: false, middle: true }
+        : { x: cPos(active), y: m.top, flip: cPos(active) > width / 2 };
+  if (tipAt && horizontal) tipAt.flip = tipAt.x > width * 0.6;
+
+  const revealStyle = (axis) => ({
+    transform: shown ? "none" : axis === "x" ? "scaleX(0)" : "scaleY(0)",
+    transformOrigin: axis === "x" ? `${zero}px 0` : `0 ${zero}px`,
+  });
+
+  let marks = null;
+  if (kind === "bar") {
+    const k = live.length;
+    const groupW = Math.min(band * (stack ? 0.62 : 0.8), stack ? 56 : 28 * Math.max(1, k) + 4 * (k - 1));
+    const gap = k > 1 && !stack ? Math.min(4, groupW * 0.06) : 0;
+    const barW = stack ? groupW : Math.max(1, (groupW - gap * (k - 1)) / Math.max(1, k));
+    const r = Math.min(4, barW / 3);
+    // Which series ends each stack (its outer end is the rounded one).
+    const outer = rows.map((_, i) => {
+      let top = -1;
+      let bottom = -1;
+      live.forEach((s, j) => {
+        const p = spans[j][i];
+        if (!p || p[1] === p[0]) return;
+        if (p[1] > p[0]) top = j;
+        else bottom = j;
+      });
+      return { top, bottom };
+    });
+    // Where the stacked total ends: the far end of the stack on its side.
+    const stackEnd = (i, v) => {
+      let end = 0;
+      live.forEach((_, j) => {
+        const p = spans[j][i];
+        if (p) end = v >= 0 ? Math.max(end, p[1]) : Math.min(end, p[1]);
+      });
+      return end;
+    };
+    const tracks = track ? (
+      <g aria-hidden="true" className="fill-accent">
+        {rows.map((_, i) => {
+          const c = cPos(i) - groupW / 2;
+          return horizontal ? (
+            <rect key={i} x={m.left} y={c} width={plotW} height={groupW} rx={r} />
+          ) : (
+            <rect key={i} x={c} y={m.top} width={groupW} height={plotH} rx={r} />
+          );
+        })}
+      </g>
+    ) : null;
+    const labels = barLabels.length ? (
+      <g
+        aria-hidden="true"
+        className="fill-foreground text-2xs font-medium motion-safe:transition-opacity motion-safe:duration-500"
+        style={{ opacity: shown ? 1 : 0 }}
+        data-nums
+      >
+        {barLabels.map(({ i, j, v, text }) => {
+          const end = vPos(j < 0 ? stackEnd(i, v) : v);
+          const c = cPos(i) + (j < 0 ? 0 : -groupW / 2 + j * (barW + gap) + barW / 2);
+          const up = v >= 0;
+          return horizontal ? (
+            <text key={`${i}-${j}`} x={end + (up ? 6 : -6)} y={c} dy="0.32em" textAnchor={up ? "start" : "end"}>
+              {text}
+            </text>
+          ) : (
+            <text key={`${i}-${j}`} x={c} y={end + (up ? -6 : 12)} textAnchor="middle">
+              {text}
+            </text>
+          );
+        })}
+      </g>
+    ) : null;
+    marks = (
+      <>
+        {tracks}
+        <g style={revealStyle(horizontal ? "x" : "y")} className="motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-out">
+          {live.map((s, j) => (
+            <g key={s.key} className={tone(s.tone, "fill")}>
+              {rows.map((_, i) => {
+                const p = spans[j][i];
+                if (!p || p[0] === p[1]) return null;
+                const a = vPos(p[0]);
+                const b = vPos(p[1]);
+                const offset = stack ? -groupW / 2 : -groupW / 2 + j * (barW + gap);
+                const c = cPos(i) + offset;
+                const positive = p[1] > p[0];
+                const isOuter = !stack || (positive ? outer[i].top === j : outer[i].bottom === j);
+                const side = !isOuter ? null : horizontal ? (positive ? "right" : "left") : positive ? "top" : "bottom";
+                const d = horizontal
+                  ? barPath(Math.min(a, b), c, Math.abs(b - a), barW, r, side)
+                  : barPath(c, Math.min(a, b), barW, Math.abs(b - a), r, side);
+                return <path key={i} d={d} className={cx(active != null && active !== i && "opacity-60", "motion-safe:transition-opacity")} />;
+              })}
+            </g>
+          ))}
+        </g>
+        {labels}
+      </>
+    );
+  } else {
+    const clip = `${uid}-clip`;
+    const fade = `${uid}-fade`;
+    marks = (
+      <>
+        <defs>
+          <clipPath id={clip}>
+            <rect
+              x={m.left - 4}
+              y={0}
+              width={plotW + 8}
+              height={height}
+              style={{ transform: shown ? "none" : "scaleX(0)", transformOrigin: `${m.left}px 0` }}
+              className="motion-safe:transition-transform motion-safe:duration-700 motion-safe:ease-out"
+            />
+          </clipPath>
+          {/* An alpha mask, not a colour: the area fades toward zero. */}
+          <linearGradient id={`${fade}-g`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stopOpacity="1" />
+            <stop offset="1" stopOpacity="0.15" />
+          </linearGradient>
+          <mask id={fade} style={{ maskType: "alpha" }} maskUnits="userSpaceOnUse" x={0} y={0} width={width} height={height}>
+            <rect x={0} y={m.top} width={width} height={plotH} fill={`url(#${fade}-g)`} />
+          </mask>
+        </defs>
+        <g clipPath={`url(#${clip})`}>
+          {kind === "area"
+            ? order.map((j) => {
+                const s = live[j];
+                // A dashed series is a line only: a comparison has no fill.
+                if (s.dashed && !stack) return null;
+                const top = [];
+                const base = [];
+                spans[j].forEach((p, i) => {
+                  top.push([cPos(i), vPos(p ? p[1] : stack ? 0 : 0)]);
+                  base.push([cPos(i), vPos(p ? p[0] : 0)]);
+                });
+                const back = curvePath([...base].reverse(), curve).replace(/^M/, "L");
+                return (
+                  <path
+                    key={s.key}
+                    d={`${curvePath(top, curve)}${back}Z`}
+                    className={tone(s.tone, "fill")}
+                    fillOpacity={stack ? 0.4 : s.muted ? 0.2 : 0.45}
+                    mask={stack ? undefined : `url(#${fade})`}
+                  />
+                );
+              })
+            : null}
+          {order.map((j) => {
+            const s = live[j];
+            // A line breaks where a value is missing.
+            const segs = [];
+            let cur = [];
+            spans[j].forEach((p, i) => {
+              if (!p && kind === "line") {
+                if (cur.length) segs.push(cur);
+                cur = [];
+                return;
+              }
+              cur.push([cPos(i), vPos(p ? p[1] : 0)]);
+            });
+            if (cur.length) segs.push(cur);
+            return (
+              <g
+                key={s.key}
+                className={tone(s.tone, "stroke")}
+                fill="none"
+                strokeWidth={s.muted ? 1.5 : 2}
+                strokeDasharray={s.dashed ? "5 4" : undefined}
+                strokeLinejoin="round"
+                strokeLinecap={s.dashed ? "butt" : "round"}
+              >
+                {segs.map((seg, k) => (
+                  <path key={k} d={curvePath(seg, curve)} />
+                ))}
+                {dots
+                  ? spans[j].map((p, i) =>
+                      p ? <circle key={i} cx={cPos(i)} cy={vPos(p[1])} r={3} className={cx(tone(s.tone, "fill"), "stroke-card")} strokeWidth={1.5} strokeDasharray="none" /> : null,
+                    )
+                  : null}
+              </g>
+            );
+          })}
+        </g>
+      </>
+    );
+  }
+
+  const cursor =
+    active == null
+      ? null
+      : kind === "bar"
+        ? horizontal
+          ? <rect x={m.left} y={m.top + band * active} width={plotW} height={band} className="fill-muted" />
+          : <rect x={m.left + band * active} y={m.top} width={band} height={plotH} className="fill-muted" />
+        : <line x1={cPos(active)} x2={cPos(active)} y1={m.top} y2={m.top + plotH} className="stroke-muted-foreground" strokeDasharray="3 3" strokeWidth={1} />;
+
+  const activeDots =
+    active == null || kind === "bar"
+      ? null
+      : live.map((s, j) => {
+          const p = spans[j][active];
+          if (!p) return null;
+          return <circle key={s.key} cx={cPos(active)} cy={vPos(p[1])} r={4.5} className={cx(tone(s.tone, "fill"), "stroke-card")} strokeWidth={2} />;
+        });
+
+  return (
+    <div className={cx("grid min-w-0 gap-3", className)}>
+      <div
+        ref={boxRef}
+        tabIndex={0}
+        role="group"
+        aria-label={`${label}. Arrow keys read each value.`}
+        onKeyDown={onKeyDown}
+        onFocus={(e) => {
+          if (e.currentTarget.matches(":focus-visible") && active == null) {
+            setKeyed(true);
+            setActive(0);
+          }
+        }}
+        onBlur={() => {
+          setKeyed(false);
+          setActive(null);
+        }}
+        className="relative min-w-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        style={{ height }}
+      >
+        {width > 0 ? (
+          <svg
+            role="img"
+            aria-label={`${label}. ${description ?? summary}`}
+            width={width}
+            height={height}
+            viewBox={`0 0 ${width} ${height}`}
+            className={cx("block touch-pan-y select-none overflow-visible", onSelect && "cursor-pointer")}
+            onPointerMove={(e) => {
+              setKeyed(false);
+              setActive(indexAt(e));
+            }}
+            onPointerDown={(e) => setActive(indexAt(e))}
+            onPointerLeave={() => !keyed && setActive(null)}
+            onClick={(e) => onSelect?.(rows[indexAt(e)], indexAt(e))}
+          >
+            {/* raw: an SVG drawing — no kit part draws a chart. */}
+            {cursor}
+            {grid
+              ? ticks.map((t) => {
+                  const p = f(vPos(t));
+                  return horizontal ? (
+                    <line key={t} x1={p} x2={p} y1={m.top} y2={m.top + plotH} className="stroke-border" strokeDasharray={t === 0 ? undefined : "3 3"} />
+                  ) : (
+                    <line key={t} x1={m.left} x2={m.left + plotW} y1={p} y2={p} className="stroke-border" strokeDasharray={t === 0 ? undefined : "3 3"} />
+                  );
+                })
+              : null}
+            {marks}
+            {activeDots}
+            <g aria-hidden="true" className="fill-muted-foreground text-2xs" data-nums>
+              {/* The value axis. */}
+              {(horizontal ? xAxis : yAxis)
+                ? ticks.map((t, i) =>
+                    horizontal ? (
+                      <text key={t} x={vPos(t)} y={height - 6} textAnchor="middle">
+                        {tickNames[i]}
+                      </text>
+                    ) : (
+                      <text key={t} x={m.left - 8} y={vPos(t)} dy="0.32em" textAnchor="end">
+                        {tickNames[i]}
+                      </text>
+                    ),
+                  )
+                : null}
+              {/* The category axis. */}
+              {(horizontal ? yAxis : xAxis)
+                ? xNames.map((name, i) => {
+                    if (i % labelEvery !== 0) return null;
+                    if (horizontal) {
+                      return (
+                        <text key={i} x={m.left - 8} y={cPos(i)} dy="0.32em" textAnchor="end">
+                          {name}
+                        </text>
+                      );
+                    }
+                    return (
+                      <text key={i} x={cPos(i)} y={height - 6} textAnchor="middle">
+                        {name}
+                      </text>
+                    );
+                  })
+                : null}
+            </g>
+          </svg>
+        ) : null}
+        {tipAt ? (
+          <TooltipBox
+            at={tipAt}
+            title={xNames[active]}
+            rows={tipRows}
+            footer={stack && live.length > 1 ? { label: "Total", value: fmt(total) } : null}
+          />
+        ) : null}
+        <div className="sr-only" aria-live="polite">
+          {keyed ? announce : ""}
+        </div>
+      </div>
+      {live.length === 0 ? <p className="text-center text-xs text-muted-foreground">Every series is hidden. Press one below to show it.</p> : null}
+      {legendNode}
+      <DataTable
+        caption={label}
+        head={[xLabel ?? humanize(x), ...all.map((s) => s.label)]}
+        body={rows.map((r, i) => [xNames[i], ...all.map((s) => fmt(num(r?.[s.key])))])}
+      />
+    </div>
+  );
+}
+
+/** Values over an ordered x (time): lines, optionally curved or stepped. */
+export function LineChart(props) {
+  return <Cartesian {...props} kind="line" />;
+}
+
+/** Lines filled to zero; `stacked` piles the series into a total. */
+export function AreaChart(props) {
+  return <Cartesian {...props} kind="area" />;
+}
+
+/** Bars per category: grouped side by side, or `stacked`; columns
+ *  (`orientation="vertical"`, the default) or bars (`"horizontal"`). */
+export function BarChart(props) {
+  return <Cartesian {...props} kind="bar" />;
+}