@zuilib/charts 0.3.0

package/dist/chunk-YMPZODMC.js

@@ -0,0 +1,1084 @@
+import {
+  activeCategoryValues,
+  categoryOf,
+  markDimOpacity,
+  reportMarkClick
+} from "./chunk-HNJKYOPE.js";
+import {
+  warnOnce
+} from "./chunk-3VGLTPGL.js";
+import {
+  ChartTooltipPanel
+} from "./chunk-PV27RZSV.js";
+import {
+  ChartLegendList
+} from "./chunk-SHQZRND7.js";
+import {
+  cartesianGridDefaults,
+  chartColorVar,
+  seriesColorVar,
+  tooltipCrosshairDefaults,
+  tooltipCursorDefaults,
+  xAxisDefaults,
+  yAxisDefaults
+} from "./chunk-7WJ26NHR.js";
+
+// src/charts/area.tsx
+import { Area, AreaChart } from "recharts";
+
+// src/charts/cartesian.tsx
+import { Brush, CartesianGrid, Legend, ReferenceLine, Tooltip, XAxis, YAxis } from "recharts";
+import { jsx } from "react/jsx-runtime";
+function stackIdOf(series, stacked) {
+  return series.stackId ?? (stacked ? "stack" : void 0);
+}
+function valueFormatOf(spec, stacked) {
+  return stacked === "percent" ? "percent" : spec.yAxis?.format ?? "number";
+}
+function renderXAxis(xKey, spec, formats, options) {
+  const axis = spec.xAxis ?? {};
+  const numeric = options?.numeric || axis.scale !== void 0 && axis.scale !== "band";
+  return /* @__PURE__ */ jsx(
+    XAxis,
+    {
+      dataKey: xKey,
+      ...xAxisDefaults,
+      type: numeric ? "number" : "category",
+      ...axis.scale === "log" ? { scale: "log", domain: ["auto", "auto"] } : {},
+      ...axis.scale === "time" ? { domain: ["dataMin", "dataMax"] } : {},
+      hide: axis.hidden,
+      tickCount: axis.tickCount,
+      tickFormatter: formats.resolve(axis.format, "none"),
+      label: axis.label ? { value: axis.label, position: "insideBottom", offset: -4, fill: "var(--muted-foreground)" } : void 0
+    },
+    "x"
+  );
+}
+function renderYAxes(spec, formats, valueFormat, hasSecondary) {
+  const y = spec.yAxis ?? {};
+  const axes = [
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        yAxisId: "primary",
+        ...yAxisDefaults,
+        hide: y.hidden,
+        domain: y.domain,
+        tickCount: y.tickCount,
+        tickFormatter: formats.resolve(y.format, valueFormat),
+        label: y.label ? { value: y.label, angle: -90, position: "insideLeft", fill: "var(--muted-foreground)" } : void 0
+      },
+      "y"
+    )
+  ];
+  if (hasSecondary) {
+    const secondary = spec.secondaryAxis ?? {};
+    axes.push(
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          yAxisId: "secondary",
+          orientation: "right",
+          ...yAxisDefaults,
+          hide: secondary.hidden,
+          domain: secondary.domain,
+          tickCount: secondary.tickCount,
+          tickFormatter: formats.resolve(secondary.format, "number"),
+          label: secondary.label ? { value: secondary.label, angle: 90, position: "insideRight", fill: "var(--muted-foreground)" } : void 0
+        },
+        "y-secondary"
+      )
+    );
+  }
+  return axes;
+}
+function yAxisIdOf(series) {
+  return series.axis === "secondary" ? "secondary" : "primary";
+}
+function renderGrid(spec) {
+  if (spec.grid === false) return null;
+  const grid = typeof spec.grid === "object" ? spec.grid : {};
+  return /* @__PURE__ */ jsx(
+    CartesianGrid,
+    {
+      ...cartesianGridDefaults,
+      horizontal: grid.horizontal ?? true,
+      vertical: grid.vertical ?? false
+    },
+    "grid"
+  );
+}
+function renderReferenceLines(spec) {
+  return (spec.referenceLines ?? []).map((line, index) => /* @__PURE__ */ jsx(
+    ReferenceLine,
+    {
+      ...line.axis === "x" ? { x: line.value } : { y: line.value },
+      yAxisId: line.axis === "y2" ? "secondary" : "primary",
+      stroke: line.paletteSlot ? chartColorVar(line.paletteSlot) : "var(--muted-foreground)",
+      strokeDasharray: line.dashed === false ? void 0 : "4 4",
+      label: line.label ? { value: line.label, position: line.axis === "x" ? "top" : "insideTopRight", fill: "var(--muted-foreground)", fontSize: 12 } : void 0
+    },
+    `ref-${line.axis}-${String(line.value)}-${index}`
+  ));
+}
+function renderBrush(xKey, spec) {
+  if (!spec.brush) return null;
+  return /* @__PURE__ */ jsx(
+    Brush,
+    {
+      dataKey: xKey,
+      height: 24,
+      stroke: "var(--muted-foreground)",
+      fill: "var(--muted)",
+      travellerWidth: 8
+    },
+    "brush"
+  );
+}
+function legendEnabled(spec, entryCount) {
+  if (spec.legend === void 0) return entryCount >= 2;
+  return spec.legend !== false;
+}
+function renderLegend(spec, entryCount) {
+  if (!legendEnabled(spec, entryCount)) return null;
+  const placement = typeof spec.legend === "object" ? spec.legend.placement : "bottom";
+  return /* @__PURE__ */ jsx(Legend, { verticalAlign: placement, content: /* @__PURE__ */ jsx(ChartLegendList, {}) }, "legend");
+}
+function renderTooltip(spec, valueFormat, cursor) {
+  if (spec.tooltip === false) return null;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      cursor,
+      content: /* @__PURE__ */ jsx(ChartTooltipPanel, { labelFormat: spec.xAxis?.format, valueFormat })
+    },
+    "tooltip"
+  );
+}
+function chartClickHandler(spec, rows, interaction) {
+  return (state, event) => {
+    const value = state?.activeLabel;
+    if (value === void 0 || value === null || value === "") return;
+    const row = rows.find((r) => r[spec.xKey] === value) ?? {};
+    const additive = Boolean(event?.shiftKey);
+    reportMarkClick(interaction, value, void 0, row, additive);
+  };
+}
+function warnOnSpecIssues(spec) {
+  const count = spec.series?.length ?? 0;
+  if (count > 8) {
+    warnOnce(
+      `series-${spec.type}-${count}`,
+      `@zuilib/charts: ${spec.type} spec declares ${count} series; the palette has 8 slots and never cycles \u2014 fold the rest into "Other" or use small multiples.`
+    );
+  }
+}
+
+// src/charts/area.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AreaChartRenderer({
+  spec,
+  rows,
+  formats,
+  hiddenSeries,
+  markInteraction,
+  width,
+  height,
+  animate
+}) {
+  warnOnSpecIssues(spec);
+  const hasSecondary = spec.series.some((s) => s.axis === "secondary");
+  const valueFormat = valueFormatOf(spec, spec.stacked);
+  return /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      data: rows,
+      width,
+      height,
+      onClick: chartClickHandler(spec, rows, markInteraction),
+      stackOffset: spec.stacked === "percent" ? "expand" : void 0,
+      margin: { top: 8, bottom: 4 },
+      children: [
+        renderGrid(spec),
+        renderXAxis(spec.xKey, spec, formats),
+        renderYAxes(spec, formats, valueFormat, hasSecondary),
+        renderTooltip(spec, valueFormat, tooltipCrosshairDefaults),
+        renderLegend(spec, spec.series.length),
+        renderReferenceLines(spec),
+        spec.series.map((series) => /* @__PURE__ */ jsx2(
+          Area,
+          {
+            yAxisId: yAxisIdOf(series),
+            dataKey: series.field,
+            name: series.label ?? series.field,
+            type: spec.curve ?? "monotone",
+            stackId: stackIdOf(series, spec.stacked),
+            stroke: seriesColorVar(series.field),
+            strokeWidth: 2,
+            fill: seriesColorVar(series.field),
+            fillOpacity: 0.2,
+            dot: false,
+            activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
+            hide: hiddenSeries.includes(series.field),
+            isAnimationActive: animate
+          },
+          series.field
+        )),
+        renderBrush(spec.xKey, spec)
+      ]
+    }
+  );
+}
+
+// src/charts/bar.tsx
+import { Bar, BarChart, Cell, XAxis as XAxis2, YAxis as YAxis2 } from "recharts";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function BarChartRenderer({
+  spec,
+  rows,
+  formats,
+  hiddenSeries,
+  markInteraction,
+  width,
+  height,
+  animate
+}) {
+  warnOnSpecIssues(spec);
+  const horizontal = spec.orientation === "horizontal";
+  const hasSecondary = !horizontal && spec.series.some((s) => s.axis === "secondary");
+  const valueFormat = valueFormatOf(spec, spec.stacked);
+  const active = activeCategoryValues(markInteraction);
+  const radius = spec.stacked ? [0, 0, 0, 0] : horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0];
+  const bars = spec.series.map((series) => /* @__PURE__ */ jsx3(
+    Bar,
+    {
+      yAxisId: horizontal ? void 0 : yAxisIdOf(series),
+      dataKey: series.field,
+      name: series.label ?? series.field,
+      stackId: stackIdOf(series, spec.stacked),
+      fill: seriesColorVar(series.field),
+      radius,
+      stroke: spec.stacked ? "var(--background)" : void 0,
+      strokeWidth: spec.stacked ? 2 : 0,
+      hide: hiddenSeries.includes(series.field),
+      isAnimationActive: animate,
+      children: rows.map((row, index) => /* @__PURE__ */ jsx3(Cell, { opacity: markDimOpacity(active, row[spec.xKey]) }, `${String(row[spec.xKey])}-${index}`))
+    },
+    series.field
+  ));
+  if (horizontal) {
+    return /* @__PURE__ */ jsxs2(
+      BarChart,
+      {
+        data: rows,
+        width,
+        height,
+        layout: "vertical",
+        onClick: chartClickHandler(spec, rows, markInteraction),
+        margin: { top: 8, bottom: 4 },
+        children: [
+          renderGrid(spec),
+          /* @__PURE__ */ jsx3(
+            XAxis2,
+            {
+              type: "number",
+              ...xAxisDefaults,
+              hide: spec.yAxis?.hidden,
+              domain: spec.yAxis?.domain,
+              tickFormatter: formats.resolve(spec.yAxis?.format, valueFormat)
+            },
+            "x"
+          ),
+          /* @__PURE__ */ jsx3(
+            YAxis2,
+            {
+              type: "category",
+              dataKey: spec.xKey,
+              ...yAxisDefaults,
+              hide: spec.xAxis?.hidden,
+              tickFormatter: formats.resolve(spec.xAxis?.format, "none")
+            },
+            "y"
+          ),
+          renderTooltip(spec, valueFormat, tooltipCursorDefaults),
+          renderLegend(spec, spec.series.length),
+          bars
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    BarChart,
+    {
+      data: rows,
+      width,
+      height,
+      onClick: chartClickHandler(spec, rows, markInteraction),
+      stackOffset: spec.stacked === "percent" ? "expand" : void 0,
+      margin: { top: 8, bottom: 4 },
+      children: [
+        renderGrid(spec),
+        renderXAxis(spec.xKey, spec, formats),
+        renderYAxes(spec, formats, valueFormat, hasSecondary),
+        renderTooltip(spec, valueFormat, tooltipCursorDefaults),
+        renderLegend(spec, spec.series.length),
+        renderReferenceLines(spec),
+        bars,
+        renderBrush(spec.xKey, spec)
+      ]
+    }
+  );
+}
+
+// src/charts/composed.tsx
+import { Area as Area2, Bar as Bar2, ComposedChart, Line } from "recharts";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function renderSeries(series, spec, hidden, animate) {
+  const shared = {
+    key: series.field,
+    yAxisId: yAxisIdOf(series),
+    dataKey: series.field,
+    name: series.label ?? series.field,
+    hide: hidden,
+    isAnimationActive: animate
+  };
+  const color = seriesColorVar(series.field);
+  switch (series.mark ?? "bar") {
+    case "line":
+      return /* @__PURE__ */ jsx4(
+        Line,
+        {
+          ...shared,
+          type: "monotone",
+          stroke: color,
+          strokeWidth: 2,
+          dot: false,
+          activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" }
+        }
+      );
+    case "area":
+      return /* @__PURE__ */ jsx4(Area2, { ...shared, type: "monotone", stroke: color, strokeWidth: 2, fill: color, fillOpacity: 0.2, dot: false });
+    default:
+      return /* @__PURE__ */ jsx4(
+        Bar2,
+        {
+          ...shared,
+          stackId: stackIdOf(series, spec.stacked),
+          fill: color,
+          radius: spec.stacked ? [0, 0, 0, 0] : [4, 4, 0, 0]
+        }
+      );
+  }
+}
+function ComposedChartRenderer({
+  spec,
+  rows,
+  formats,
+  hiddenSeries,
+  markInteraction,
+  width,
+  height,
+  animate
+}) {
+  warnOnSpecIssues(spec);
+  const hasSecondary = spec.series.some((s) => s.axis === "secondary");
+  const valueFormat = valueFormatOf(spec);
+  return /* @__PURE__ */ jsxs3(
+    ComposedChart,
+    {
+      data: rows,
+      width,
+      height,
+      onClick: chartClickHandler(spec, rows, markInteraction),
+      margin: { top: 8, bottom: 4 },
+      children: [
+        renderGrid(spec),
+        renderXAxis(spec.xKey, spec, formats),
+        renderYAxes(spec, formats, valueFormat, hasSecondary),
+        renderTooltip(spec, valueFormat, tooltipCursorDefaults),
+        renderLegend(spec, spec.series.length),
+        renderReferenceLines(spec),
+        spec.series.map((series) => renderSeries(series, spec, hiddenSeries.includes(series.field), animate)),
+        renderBrush(spec.xKey, spec)
+      ]
+    }
+  );
+}
+
+// src/charts/funnel.tsx
+import { Cell as Cell2, Funnel, FunnelChart, LabelList, Tooltip as Tooltip2 } from "recharts";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function FunnelChartRenderer({
+  spec,
+  rows,
+  markInteraction,
+  width,
+  height,
+  animate
+}) {
+  const active = activeCategoryValues(markInteraction);
+  return /* @__PURE__ */ jsxs4(FunnelChart, { width, height, margin: { top: 8, bottom: 4 }, children: [
+    spec.tooltip !== false && /* @__PURE__ */ jsx5(Tooltip2, { content: /* @__PURE__ */ jsx5(ChartTooltipPanel, { showLabel: false, valueFormat: spec.format ?? "number" }) }),
+    renderLegend(spec, rows.length),
+    /* @__PURE__ */ jsxs4(
+      Funnel,
+      {
+        data: rows,
+        dataKey: spec.valueKey,
+        nameKey: spec.nameKey,
+        stroke: "var(--background)",
+        strokeWidth: 2,
+        isAnimationActive: animate,
+        onClick: (entry, index, event) => {
+          const row = entry?.payload ?? rows[index] ?? {};
+          const value = categoryOf(row, spec.nameKey);
+          if (value === null) return;
+          reportMarkClick(markInteraction, value, void 0, row, Boolean(event?.shiftKey));
+        },
+        children: [
+          /* @__PURE__ */ jsx5(LabelList, { dataKey: spec.nameKey, position: "right", fill: "var(--muted-foreground)", stroke: "none", fontSize: 12 }),
+          rows.map((row, index) => /* @__PURE__ */ jsx5(
+            Cell2,
+            {
+              fill: chartColorVar(index + 1),
+              opacity: markDimOpacity(active, row[spec.nameKey])
+            },
+            `${String(row[spec.nameKey])}-${index}`
+          ))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/charts/line.tsx
+import { Line as Line2, LineChart } from "recharts";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function LineChartRenderer({
+  spec,
+  rows,
+  formats,
+  hiddenSeries,
+  markInteraction,
+  width,
+  height,
+  animate
+}) {
+  warnOnSpecIssues(spec);
+  const hasSecondary = spec.series.some((s) => s.axis === "secondary");
+  const valueFormat = valueFormatOf(spec);
+  return /* @__PURE__ */ jsxs5(
+    LineChart,
+    {
+      data: rows,
+      width,
+      height,
+      onClick: chartClickHandler(spec, rows, markInteraction),
+      margin: { top: 8, bottom: 4 },
+      children: [
+        renderGrid(spec),
+        renderXAxis(spec.xKey, spec, formats),
+        renderYAxes(spec, formats, valueFormat, hasSecondary),
+        renderTooltip(spec, valueFormat, tooltipCrosshairDefaults),
+        renderLegend(spec, spec.series.length),
+        renderReferenceLines(spec),
+        spec.series.map((series) => /* @__PURE__ */ jsx6(
+          Line2,
+          {
+            yAxisId: yAxisIdOf(series),
+            dataKey: series.field,
+            name: series.label ?? series.field,
+            type: spec.curve ?? "monotone",
+            stroke: seriesColorVar(series.field),
+            strokeWidth: 2,
+            dot: spec.dots ? { r: 3, fill: seriesColorVar(series.field), strokeWidth: 0 } : false,
+            activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
+            hide: hiddenSeries.includes(series.field),
+            isAnimationActive: animate
+          },
+          series.field
+        )),
+        renderBrush(spec.xKey, spec)
+      ]
+    }
+  );
+}
+
+// src/charts/pie.tsx
+import { Cell as Cell3, Pie, PieChart, Tooltip as Tooltip3 } from "recharts";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function PieChartRenderer({ spec, rows, markInteraction, width, height, animate }) {
+  const active = activeCategoryValues(markInteraction);
+  return /* @__PURE__ */ jsxs6(PieChart, { width, height, margin: { top: 8, bottom: 4 }, children: [
+    spec.tooltip !== false && /* @__PURE__ */ jsx7(Tooltip3, { content: /* @__PURE__ */ jsx7(ChartTooltipPanel, { showLabel: false, valueFormat: spec.format ?? "number" }) }),
+    renderLegend(spec, rows.length),
+    /* @__PURE__ */ jsx7(
+      Pie,
+      {
+        data: rows,
+        dataKey: spec.valueKey,
+        nameKey: spec.nameKey,
+        innerRadius: spec.type === "donut" ? "55%" : 0,
+        stroke: "var(--background)",
+        strokeWidth: 2,
+        paddingAngle: spec.type === "donut" ? 1 : 0,
+        isAnimationActive: animate,
+        label: spec.labels ? { fill: "var(--muted-foreground)", fontSize: 12 } : false,
+        labelLine: spec.labels ? { stroke: "var(--border)" } : false,
+        onClick: (entry, index, event) => {
+          const row = entry?.payload ?? rows[index] ?? {};
+          const value = categoryOf(row, spec.nameKey);
+          if (value === null) return;
+          reportMarkClick(markInteraction, value, void 0, row, Boolean(event?.shiftKey));
+        },
+        children: rows.map((row, index) => /* @__PURE__ */ jsx7(
+          Cell3,
+          {
+            fill: chartColorVar(index + 1),
+            opacity: markDimOpacity(active, row[spec.nameKey])
+          },
+          `${String(row[spec.nameKey])}-${index}`
+        ))
+      }
+    )
+  ] });
+}
+
+// src/charts/radar.tsx
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, Tooltip as Tooltip4 } from "recharts";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function RadarChartRenderer({
+  spec,
+  rows,
+  formats,
+  hiddenSeries,
+  width,
+  height,
+  animate
+}) {
+  warnOnSpecIssues(spec);
+  return /* @__PURE__ */ jsxs7(RadarChart, { data: rows, width, height, margin: { top: 8, bottom: 4 }, children: [
+    /* @__PURE__ */ jsx8(PolarGrid, { stroke: "var(--border)" }),
+    /* @__PURE__ */ jsx8(
+      PolarAngleAxis,
+      {
+        dataKey: spec.xKey,
+        tick: { fill: "var(--muted-foreground)", fontSize: 12 },
+        tickFormatter: formats.resolve(void 0, "none")
+      }
+    ),
+    /* @__PURE__ */ jsx8(PolarRadiusAxis, { tick: false, axisLine: false }),
+    spec.tooltip !== false && /* @__PURE__ */ jsx8(Tooltip4, { content: /* @__PURE__ */ jsx8(ChartTooltipPanel, { valueFormat: "number" }) }),
+    renderLegend(spec, spec.series.length),
+    spec.series.map((series) => /* @__PURE__ */ jsx8(
+      Radar,
+      {
+        dataKey: series.field,
+        name: series.label ?? series.field,
+        stroke: seriesColorVar(series.field),
+        strokeWidth: 2,
+        fill: seriesColorVar(series.field),
+        fillOpacity: spec.filled === false ? 0 : 0.2,
+        hide: hiddenSeries.includes(series.field),
+        isAnimationActive: animate
+      },
+      series.field
+    ))
+  ] });
+}
+
+// src/charts/radial-bar.tsx
+import { Cell as Cell4, PolarAngleAxis as PolarAngleAxis2, RadialBar, RadialBarChart, Tooltip as Tooltip5 } from "recharts";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function RadialBarChartRenderer({
+  spec,
+  rows,
+  markInteraction,
+  width,
+  height,
+  animate
+}) {
+  const active = activeCategoryValues(markInteraction);
+  const max = spec.max ?? rows.reduce((top, row) => {
+    const value = row[spec.valueKey];
+    return typeof value === "number" && value > top ? value : top;
+  }, 0);
+  return /* @__PURE__ */ jsxs8(
+    RadialBarChart,
+    {
+      data: rows,
+      width,
+      height,
+      innerRadius: "25%",
+      outerRadius: "100%",
+      startAngle: 90,
+      endAngle: -270,
+      margin: { top: 8, bottom: 4 },
+      children: [
+        /* @__PURE__ */ jsx9(PolarAngleAxis2, { type: "number", domain: [spec.min ?? 0, max], tick: false }),
+        spec.tooltip !== false && /* @__PURE__ */ jsx9(Tooltip5, { content: /* @__PURE__ */ jsx9(ChartTooltipPanel, { showLabel: false, valueFormat: spec.format ?? "number" }) }),
+        renderLegend(spec, rows.length),
+        /* @__PURE__ */ jsx9(
+          RadialBar,
+          {
+            dataKey: spec.valueKey,
+            background: { fill: "var(--muted)" },
+            cornerRadius: 4,
+            isAnimationActive: animate,
+            onClick: (entry, index, event) => {
+              const row = entry?.payload ?? rows[index] ?? {};
+              const value = categoryOf(row, spec.nameKey);
+              if (value === null) return;
+              reportMarkClick(markInteraction, value, void 0, row, Boolean(event?.shiftKey));
+            },
+            children: rows.map((row, index) => /* @__PURE__ */ jsx9(
+              Cell4,
+              {
+                fill: chartColorVar(index + 1),
+                opacity: markDimOpacity(active, row[spec.nameKey])
+              },
+              `${String(row[spec.nameKey])}-${index}`
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/charts/scatter.tsx
+import { Scatter, ScatterChart, ZAxis } from "recharts";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var SCATTER_MAX_GROUPS = 3;
+function ScatterChartRenderer({
+  spec,
+  rows,
+  formats,
+  markInteraction,
+  width,
+  height,
+  animate
+}) {
+  const groups = spec.groupKey ? [...new Set(rows.map((row) => categoryOf(row, spec.groupKey)).filter((v) => v !== null))] : [null];
+  if (groups.length > SCATTER_MAX_GROUPS) {
+    warnOnce(
+      `scatter-${spec.groupKey}`,
+      `@zuilib/charts: scatter groups by "${spec.groupKey}" into ${groups.length} groups; only the first ${SCATTER_MAX_GROUPS} palette slots are validated for all-pairs discrimination \u2014 facet or filter instead.`
+    );
+  }
+  const active = activeCategoryValues(markInteraction);
+  const valueFormat = spec.yAxis?.format ?? "number";
+  return /* @__PURE__ */ jsxs9(ScatterChart, { width, height, margin: { top: 8, bottom: 4 }, children: [
+    renderGrid(spec),
+    renderXAxis(spec.xKey, spec, formats, { numeric: true }),
+    renderYAxes(spec, formats, valueFormat, false),
+    spec.sizeKey && /* @__PURE__ */ jsx10(ZAxis, { dataKey: spec.sizeKey, range: spec.sizeRange ?? [64, 400] }),
+    renderTooltip(spec, valueFormat, tooltipCrosshairDefaults),
+    spec.groupKey ? renderLegend(spec, groups.length) : null,
+    renderReferenceLines(spec),
+    groups.map((group, index) => {
+      const groupRows = group === null ? rows : rows.filter((row) => row[spec.groupKey] === group);
+      return /* @__PURE__ */ jsx10(
+        Scatter,
+        {
+          yAxisId: "primary",
+          name: group === null ? void 0 : String(group),
+          data: groupRows,
+          dataKey: spec.yKey,
+          fill: chartColorVar(index + 1),
+          stroke: "var(--background)",
+          strokeWidth: 2,
+          isAnimationActive: animate,
+          opacity: group === null ? void 0 : markDimOpacity(active, group),
+          onClick: (entry, _index, event) => {
+            const row = entry?.payload ?? {};
+            const value = group ?? categoryOf(row, spec.xKey);
+            if (value === null) return;
+            reportMarkClick(markInteraction, value, void 0, row, Boolean(event?.shiftKey));
+          }
+        },
+        group === null ? "all" : String(group)
+      );
+    })
+  ] });
+}
+
+// src/charts/treemap.tsx
+import { Tooltip as Tooltip6, Treemap } from "recharts";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function TreemapNode({
+  x = 0,
+  y = 0,
+  width = 0,
+  height = 0,
+  depth = 0,
+  name,
+  root,
+  colorOf,
+  opacityOf,
+  onNodeClick
+}) {
+  if (depth === 0) return null;
+  const groupName = depth === 1 ? name : root?.name;
+  const leaf = depth >= 1;
+  const showLabel = leaf && width > 48 && height > 24;
+  return /* @__PURE__ */ jsxs10("g", { onClick: (event) => onNodeClick(name, event), style: { cursor: "pointer" }, children: [
+    /* @__PURE__ */ jsx11(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        fill: colorOf(groupName),
+        opacity: opacityOf(name),
+        stroke: "var(--background)",
+        strokeWidth: 2
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx11("text", { x: x + 6, y: y + 16, fill: "var(--background)", fontSize: 12, pointerEvents: "none", children: name })
+  ] });
+}
+function TreemapChartRenderer({ spec, rows, markInteraction, width, height }) {
+  const active = activeCategoryValues(markInteraction);
+  const groups = [];
+  let treeRows = rows;
+  if (spec.groupKey) {
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      const group = String(row[spec.groupKey] ?? "");
+      if (!byGroup.has(group)) byGroup.set(group, []);
+      byGroup.get(group)?.push(row);
+    }
+    groups.push(...byGroup.keys());
+    treeRows = groups.map((group) => ({
+      [spec.nameKey]: group,
+      children: byGroup.get(group)
+    }));
+  } else {
+    groups.push(...rows.map((row) => String(row[spec.nameKey] ?? "")));
+  }
+  const colorOf = (name) => {
+    const index = groups.indexOf(name ?? "");
+    return chartColorVar((index === -1 ? 0 : index) + 1);
+  };
+  const opacityOf = (name) => name === void 0 ? void 0 : markDimOpacity(active, name);
+  const onNodeClick = (name, event) => {
+    if (name === void 0) return;
+    const row = rows.find((r) => categoryOf(r, spec.nameKey) === name) ?? { [spec.nameKey]: name };
+    reportMarkClick(markInteraction, name, void 0, row, event.shiftKey);
+  };
+  return /* @__PURE__ */ jsx11(
+    Treemap,
+    {
+      data: treeRows,
+      width,
+      height,
+      dataKey: spec.sizeKey,
+      nameKey: spec.nameKey,
+      isAnimationActive: false,
+      content: /* @__PURE__ */ jsx11(TreemapNode, { colorOf, opacityOf, onNodeClick }),
+      children: spec.tooltip !== false && /* @__PURE__ */ jsx11(Tooltip6, { content: /* @__PURE__ */ jsx11(ChartTooltipPanel, { showLabel: false, valueFormat: spec.format ?? "number" }) })
+    }
+  );
+}
+
+// src/registry.ts
+function defineChartType(def) {
+  return def;
+}
+function createChartRegistry(...sources) {
+  const types = /* @__PURE__ */ new Map();
+  for (const source of sources) {
+    const defs = Array.isArray(source) ? source : source.types.values();
+    for (const def of defs) types.set(def.type, def);
+  }
+  return { types };
+}
+var FORMAT_TOKEN = {
+  type: "string",
+  description: 'Format token, e.g. "number", "compact", "percent", "currency:USD", "date:short".'
+};
+var PALETTE_SLOT = { type: "number", minimum: 1, maximum: 8, description: "Palette slot (--chart-N)." };
+var COMMON_PROPERTIES = {
+  version: { const: 1, description: "Contract version of this spec." },
+  title: { type: "string", description: "Figure title, also the default accessible name." },
+  description: { type: "string", description: "Longer description for assistive tech." },
+  legend: {
+    anyOf: [
+      { type: "boolean" },
+      {
+        type: "object",
+        properties: { placement: { enum: ["top", "bottom"] } },
+        required: ["placement"],
+        additionalProperties: false
+      }
+    ],
+    description: "Legend visibility/placement. Defaults to true for two or more series."
+  },
+  tooltip: { type: "boolean" },
+  interaction: {
+    enum: ["filter", "highlight", "none"],
+    description: 'What a mark click does inside a CrossFilterProvider. Defaults to "filter".'
+  }
+};
+var AXIS_SCHEMA = {
+  type: "object",
+  properties: {
+    label: { type: "string", description: "Axis title." },
+    format: FORMAT_TOKEN,
+    domain: {
+      type: "array",
+      prefixItems: [
+        { anyOf: [{ type: "number" }, { enum: ["auto", "dataMin"] }] },
+        { anyOf: [{ type: "number" }, { enum: ["auto", "dataMax"] }] }
+      ],
+      items: false,
+      minItems: 2,
+      description: 'Value-axis domain. Defaults to ["auto", "auto"].'
+    },
+    tickCount: { type: "number", description: "Suggested tick count." },
+    hidden: { type: "boolean", description: "Hides the axis entirely." },
+    scale: { enum: ["band", "number", "time", "log"], description: 'X axis only. Defaults to "band".' }
+  },
+  additionalProperties: false
+};
+var SERIES_ITEM_SCHEMA = {
+  type: "object",
+  properties: {
+    field: { type: "string", description: "Row field holding this series' value." },
+    label: { type: "string", description: "Legend / tooltip name. Defaults to the field." },
+    paletteSlot: PALETTE_SLOT,
+    axis: { enum: ["primary", "secondary"], description: 'Value axis; "secondary" enables the secondary axis.' },
+    stackId: { type: "string", description: "Series sharing a stackId stack." },
+    mark: { enum: ["line", "area", "bar"], description: "Composed charts only: how this series is drawn." },
+    format: FORMAT_TOKEN
+  },
+  required: ["field"],
+  additionalProperties: false
+};
+var REFERENCE_LINE_SCHEMA = {
+  type: "object",
+  properties: {
+    axis: { enum: ["x", "y", "y2"], description: '"y"/"y2" draw horizontal lines ("y2" on the secondary axis), "x" vertical.' },
+    value: { anyOf: [{ type: "number" }, { type: "string" }], description: "Position on that axis." },
+    label: { type: "string", description: "Text beside the line." },
+    paletteSlot: PALETTE_SLOT,
+    dashed: { type: "boolean" }
+  },
+  required: ["axis", "value"],
+  additionalProperties: false
+};
+var FRAME_PROPERTIES = {
+  xAxis: AXIS_SCHEMA,
+  yAxis: AXIS_SCHEMA,
+  secondaryAxis: { ...AXIS_SCHEMA, description: 'Secondary value axis; used by series with axis: "secondary".' },
+  grid: {
+    anyOf: [
+      { type: "boolean" },
+      {
+        type: "object",
+        properties: { horizontal: { type: "boolean" }, vertical: { type: "boolean" } },
+        additionalProperties: false
+      }
+    ],
+    description: "Grid lines. Defaults to horizontal only."
+  },
+  referenceLines: { type: "array", items: REFERENCE_LINE_SCHEMA },
+  brush: { type: "boolean", description: "Renders a range brush under the plot." }
+};
+var CARTESIAN_PROPERTIES = {
+  ...FRAME_PROPERTIES,
+  xKey: { type: "string", description: "Category / x field. Also the cross-filter field." },
+  series: {
+    type: "array",
+    items: SERIES_ITEM_SCHEMA,
+    minItems: 1,
+    description: "The plotted series, in palette-slot order."
+  }
+};
+var STACKED_SCHEMA = {
+  anyOf: [{ type: "boolean" }, { const: "percent" }],
+  description: 'true stacks the series; "percent" normalizes each stack to 100%.'
+};
+function chartTypeSchema(type, properties, required) {
+  return {
+    type: "object",
+    properties: { ...COMMON_PROPERTIES, type: { const: type }, ...properties },
+    required: ["version", "type", ...required],
+    additionalProperties: false
+  };
+}
+function namedConfig(spec) {
+  return { [spec.valueKey]: { label: spec.title ?? spec.valueKey, format: spec.format } };
+}
+function pieDef(type) {
+  return defineChartType({
+    type,
+    family: "named",
+    render: PieChartRenderer,
+    crossFilterField: (spec) => spec.nameKey,
+    categoryField: (spec) => spec.nameKey,
+    configFrom: namedConfig,
+    schema: chartTypeSchema(type, {
+      nameKey: { type: "string", description: "Row field of the slice name; also the cross-filter field." },
+      valueKey: { type: "string", description: "Row field of the slice value." },
+      format: FORMAT_TOKEN,
+      labels: { type: "boolean", description: "Direct labels beside the slices." }
+    }, ["nameKey", "valueKey"])
+  });
+}
+var defaultChartTypes = [
+  defineChartType({
+    type: "line",
+    family: "cartesian",
+    render: LineChartRenderer,
+    crossFilterField: (spec) => spec.xKey,
+    schema: chartTypeSchema("line", {
+      ...CARTESIAN_PROPERTIES,
+      curve: { enum: ["linear", "monotone", "step"] },
+      dots: { type: "boolean", description: "Dots on every point (dots always show on hover)." }
+    }, ["xKey", "series"])
+  }),
+  defineChartType({
+    type: "area",
+    family: "cartesian",
+    render: AreaChartRenderer,
+    crossFilterField: (spec) => spec.xKey,
+    schema: chartTypeSchema("area", {
+      ...CARTESIAN_PROPERTIES,
+      curve: { enum: ["linear", "monotone", "step"] },
+      stacked: STACKED_SCHEMA
+    }, ["xKey", "series"])
+  }),
+  defineChartType({
+    type: "bar",
+    family: "cartesian",
+    render: BarChartRenderer,
+    crossFilterField: (spec) => spec.xKey,
+    schema: chartTypeSchema("bar", {
+      ...CARTESIAN_PROPERTIES,
+      orientation: { enum: ["vertical", "horizontal"], description: 'Bar direction: "horizontal" lays categories on the y axis.' },
+      stacked: STACKED_SCHEMA
+    }, ["xKey", "series"])
+  }),
+  defineChartType({
+    type: "composed",
+    family: "cartesian",
+    render: ComposedChartRenderer,
+    crossFilterField: (spec) => spec.xKey,
+    schema: chartTypeSchema("composed", {
+      ...CARTESIAN_PROPERTIES,
+      stacked: { type: "boolean", description: "Stacks the bar series." }
+    }, ["xKey", "series"])
+  }),
+  defineChartType({
+    type: "scatter",
+    family: "scatter",
+    render: ScatterChartRenderer,
+    crossFilterField: (spec) => spec.groupKey ?? spec.xKey,
+    categoryField: (spec) => spec.groupKey,
+    configFrom: (spec) => ({
+      [spec.yKey]: { label: spec.yAxis?.label ?? spec.yKey, format: spec.yAxis?.format }
+    }),
+    schema: chartTypeSchema("scatter", {
+      ...FRAME_PROPERTIES,
+      xKey: { type: "string", description: "Row field of the x value (numeric)." },
+      yKey: { type: "string", description: "Row field of the y value." },
+      groupKey: {
+        type: "string",
+        description: "Row field that splits points into colored groups (at most 3); also the cross-filter field."
+      },
+      sizeKey: { type: "string", description: "Row field sized into bubble area." },
+      sizeRange: {
+        type: "array",
+        prefixItems: [{ type: "number" }, { type: "number" }],
+        items: false,
+        minItems: 2,
+        description: "Bubble size range in px\xB2. Defaults to [64, 400]."
+      }
+    }, ["xKey", "yKey"])
+  }),
+  pieDef("pie"),
+  pieDef("donut"),
+  defineChartType({
+    type: "radar",
+    family: "radar",
+    render: RadarChartRenderer,
+    crossFilterField: (spec) => spec.xKey,
+    schema: chartTypeSchema("radar", {
+      xKey: { type: "string", description: "Row field of the spoke name." },
+      series: { type: "array", items: SERIES_ITEM_SCHEMA, minItems: 1 },
+      filled: { type: "boolean", description: "Translucent fill under each outline." }
+    }, ["xKey", "series"])
+  }),
+  defineChartType({
+    type: "radial-bar",
+    family: "named",
+    render: RadialBarChartRenderer,
+    crossFilterField: (spec) => spec.nameKey,
+    categoryField: (spec) => spec.nameKey,
+    configFrom: namedConfig,
+    schema: chartTypeSchema("radial-bar", {
+      nameKey: { type: "string", description: "Row field of the ring name; also the cross-filter field." },
+      valueKey: { type: "string", description: "Row field of the ring value." },
+      min: { type: "number", description: "Domain start. Defaults to 0." },
+      max: { type: "number", description: "Domain end. Defaults to the data max." },
+      format: FORMAT_TOKEN
+    }, ["nameKey", "valueKey"])
+  }),
+  defineChartType({
+    type: "funnel",
+    family: "named",
+    render: FunnelChartRenderer,
+    crossFilterField: (spec) => spec.nameKey,
+    categoryField: (spec) => spec.nameKey,
+    configFrom: namedConfig,
+    schema: chartTypeSchema("funnel", {
+      nameKey: { type: "string", description: "Row field of the stage name; also the cross-filter field." },
+      valueKey: { type: "string", description: "Row field of the stage value." },
+      format: FORMAT_TOKEN
+    }, ["nameKey", "valueKey"])
+  }),
+  defineChartType({
+    type: "treemap",
+    family: "treemap",
+    render: TreemapChartRenderer,
+    crossFilterField: (spec) => spec.nameKey,
+    categoryField: (spec) => spec.nameKey,
+    configFrom: (spec) => ({
+      [spec.sizeKey]: { label: spec.title ?? spec.sizeKey, format: spec.format }
+    }),
+    schema: chartTypeSchema("treemap", {
+      nameKey: { type: "string", description: "Row field of the tile name; also the cross-filter field." },
+      sizeKey: { type: "string", description: "Row field sized into tile area." },
+      groupKey: { type: "string", description: "Row field that groups tiles into colored clusters." },
+      format: FORMAT_TOKEN
+    }, ["nameKey", "sizeKey"])
+  })
+];
+var defaultChartRegistry = createChartRegistry(defaultChartTypes);
+function chartSpecJsonSchema(registry = defaultChartRegistry) {
+  const defs = [...registry.types.values()];
+  return {
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    title: "ChartSpec",
+    description: 'The serializable chart description <Chart> renders. Discriminated on "type".',
+    type: "object",
+    properties: { type: { enum: defs.map((def) => def.type) } },
+    required: ["type"],
+    allOf: defs.map((def) => ({
+      if: { properties: { type: { const: def.type } }, required: ["type"] },
+      then: def.schema
+    }))
+  };
+}
+
+export {
+  defineChartType,
+  createChartRegistry,
+  chartTypeSchema,
+  defaultChartTypes,
+  defaultChartRegistry,
+  chartSpecJsonSchema
+};