@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/core/cartesian/cartesian-chart.js

@@ -0,0 +1,1068 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../../utils/cn.js";
+import { AxisBottom, AxisLeft, AxisRight, GridLines } from "../axes.js";
+import { ChartFrame } from "../chart-frame.js";
+import { ChartDataTable } from "../data-table.js";
+import { sharedSampleIndices } from "../downsample.js";
+import { formatPercent, resolveFormat } from "../format.js";
+import { createAxisMap } from "../ink.js";
+import { ChartLegend } from "../legend.js";
+import { EASE_OUT, fadeIn, revealClip, useEntryAnimation } from "../motion.js";
+import { seriesColor } from "../palette.js";
+import { ChartPatternDefs } from "../pattern-defs.js";
+import { patternId } from "../patterns.js";
+import { formatDate } from "../scales/time.js";
+import { ChartTooltip } from "../tooltip.js";
+import { resolveLabels } from "../types.js";
+import { useSeriesState } from "../use-series-state.js";
+import { AnnotationLayer } from "./annotations.js";
+import { ChartBrush } from "./brush.js";
+import { CategoryGroupAxis } from "./category-group-axis.js";
+import { categoryGroupSpans } from "./category-groups.js";
+import {
+  computeLayout,
+  defaultXLabel
+} from "./layout.js";
+import { BarMark, DataLabels, LineAreaMark } from "./marks.js";
+import { syncKeyOf, useChartSync } from "./sync.js";
+const DEFAULT_MAX_POINTS = 2e3;
+function samplingThreshold(maxPoints, orientation, resolved) {
+  if (maxPoints === false || orientation !== "vertical") return null;
+  return resolved.some((item) => item.kind === "column") ? null : maxPoints;
+}
+function pick(values, indices) {
+  return indices ? indices.map((index) => values[index]) : values;
+}
+const BRUSH_HEIGHT = 52;
+const BRUSH_GAP = 12;
+function legendShape(kind, dashed) {
+  if (kind === "line") return dashed ? "dashed" : "line";
+  return "square";
+}
+function safeId(raw) {
+  return raw.replace(/[^a-zA-Z0-9_-]/g, "");
+}
+function titleOf(value, xLabel, custom) {
+  if (value instanceof Date && !custom) return formatDate(value);
+  return xLabel(value);
+}
+function CartesianChart({
+  categories,
+  series,
+  title,
+  description,
+  height = 300,
+  aspectRatio,
+  orientation = "vertical",
+  stack = "none",
+  curve = "linear",
+  markers = false,
+  dataLabels = false,
+  gradient = true,
+  lineGradient = false,
+  transition = false,
+  maxPoints = DEFAULT_MAX_POINTS,
+  syncId,
+  onPointClick,
+  barRadius = 6,
+  valueFormat,
+  xFormat,
+  xScale = "auto",
+  yAxis,
+  rightAxis,
+  axes,
+  grid = true,
+  legend,
+  tooltip = true,
+  annotations,
+  categoryGroups,
+  categoryLabelRotation,
+  onCategoryClick,
+  brush = false,
+  rangeSelect,
+  overlay,
+  loading = false,
+  animate = true,
+  initialHidden,
+  labels: labelsProp,
+  className
+}) {
+  const labels = resolveLabels(labelsProp);
+  const state = useSeriesState(initialHidden);
+  const [range, setRange] = useState(null);
+  const count = categories.length;
+  const xLabel = xFormat ?? defaultXLabel;
+  const sync = useChartSync(syncId);
+  const publishRange = sync.setRange;
+  const syncedRange = sync.channel.range;
+  useEffect(() => setRange(null), [count]);
+  useEffect(() => {
+    if (!syncId) return;
+    if (!syncedRange) {
+      setRange(null);
+      return;
+    }
+    const lo = categories.findIndex((value) => syncKeyOf(value) === syncedRange[0]);
+    const hi = categories.findIndex((value) => syncKeyOf(value) === syncedRange[1]);
+    if (lo < 0 || hi < 0 || hi <= lo) return;
+    setRange((current) => current && current[0] === lo && current[1] === hi ? current : [lo, hi]);
+  }, [syncId, syncedRange, categories]);
+  const changeRange = useCallback(
+    (next) => {
+      setRange(next);
+      publishRange(
+        next ? [syncKeyOf(categories[next[0]]), syncKeyOf(categories[next[1]])] : null
+      );
+    },
+    [publishRange, categories]
+  );
+  const resolved = useMemo(
+    () => series.map((item, index) => ({
+      id: item.id,
+      name: item.name,
+      kind: item.kind,
+      axis: item.axis ?? "left",
+      color: seriesColor(index, item.color),
+      dashed: item.dashed ?? false,
+      format: resolveFormat(item.format ?? valueFormat),
+      data: item.data,
+      from: item.from,
+      stackGroup: item.stackGroup,
+      pointColors: item.pointColors,
+      pattern: item.pattern
+    })),
+    [series, valueFormat]
+  );
+  const empty = count === 0 || resolved.every((item) => item.data.every((value) => value == null));
+  const legendPlacement = legend === false ? null : legend === true || legend == null ? "top" : legend;
+  const showLegend = legendPlacement != null && (legend != null || series.length > 1);
+  const brushOn = brush && count > 2 && orientation === "vertical";
+  const brushExtra = BRUSH_HEIGHT + BRUSH_GAP;
+  const legendItems = resolved.map((item) => ({
+    id: item.id,
+    name: item.name,
+    color: item.color,
+    shape: legendShape(item.kind, item.dashed),
+    hidden: state.isHidden(item.id)
+  }));
+  const tableSample = useMemo(() => {
+    const threshold = samplingThreshold(maxPoints, orientation, resolved);
+    return threshold == null ? null : sharedSampleIndices(
+      resolved.map((item) => item.data),
+      threshold
+    );
+  }, [maxPoints, orientation, resolved]);
+  const table = /* @__PURE__ */ jsx(
+    ChartDataTable,
+    {
+      caption: description ? `${title}. ${description}` : title,
+      categoryHeader: labels.category,
+      categories: pick(categories, tableSample).map(
+        (value) => titleOf(value, xLabel, xFormat != null)
+      ),
+      columns: resolved.map((item) => ({
+        id: item.id,
+        name: item.name,
+        values: pick(item.data, tableSample).map((value, index) => {
+          if (value == null) return "";
+          const origin = item.from?.[tableSample ? tableSample[index] : index];
+          return origin == null ? item.format(value) : `${item.format(origin)} \u2013 ${item.format(value)}`;
+        })
+      }))
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height: height === "fill" || !brushOn ? height : height + brushExtra,
+      aspectRatio,
+      labels,
+      loading,
+      empty,
+      skeleton: series.some((item) => item.kind === "column") ? "bars" : "line",
+      legendPosition: legendPlacement ?? "top",
+      legend: showLegend ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          items: legendItems,
+          onToggle: state.toggle,
+          onHighlight: state.setHighlighted
+        }
+      ) : null,
+      table,
+      className,
+      children: (width, drawingHeight) => /* @__PURE__ */ jsx(
+        CartesianPlot,
+        {
+          width,
+          height: brushOn ? drawingHeight - brushExtra : drawingHeight,
+          categories,
+          resolved,
+          hidden: state.hidden,
+          highlighted: state.highlighted,
+          range,
+          onRangeChange: changeRange,
+          brush: brushOn,
+          title,
+          labels,
+          orientation,
+          stack,
+          curve,
+          markers,
+          dataLabels,
+          gradient,
+          lineGradient,
+          transition,
+          maxPoints,
+          syncId,
+          onPointClick,
+          barRadius,
+          valueFormat,
+          xLabel,
+          customXLabel: xFormat != null,
+          xScale,
+          yAxis,
+          rightAxis,
+          axes,
+          grid,
+          tooltip,
+          annotations,
+          categoryGroups,
+          categoryLabelRotation,
+          onCategoryClick,
+          rangeSelect,
+          overlay,
+          animate
+        }
+      )
+    }
+  );
+}
+function CartesianPlot({
+  width,
+  height,
+  categories,
+  resolved,
+  hidden,
+  highlighted,
+  range,
+  onRangeChange,
+  brush,
+  title,
+  labels,
+  orientation = "vertical",
+  stack = "none",
+  curve = "linear",
+  markers = false,
+  dataLabels = false,
+  gradient = true,
+  lineGradient = false,
+  transition = false,
+  maxPoints = DEFAULT_MAX_POINTS,
+  syncId,
+  onPointClick,
+  barRadius = 6,
+  valueFormat,
+  xLabel,
+  customXLabel,
+  xScale = "auto",
+  yAxis,
+  rightAxis,
+  axes,
+  grid = true,
+  tooltip = true,
+  annotations,
+  categoryGroups,
+  categoryLabelRotation,
+  onCategoryClick,
+  rangeSelect,
+  overlay,
+  animate = true
+}) {
+  const uid = safeId(useId());
+  const svgRef = useRef(null);
+  const owner = useId();
+  const sync = useChartSync(syncId);
+  const [localActive, setActive] = useState(null);
+  const [noteKey, setNoteKey] = useState(null);
+  const [pointer, setPointer] = useState(null);
+  const [selection, setSelection] = useState(null);
+  const dragStart = useRef(null);
+  const dragged = useRef(false);
+  const total = categories.length;
+  const start = range ? range[0] : 0;
+  const end = range ? range[1] : total - 1;
+  const visible = useMemo(
+    () => resolved.filter((item) => !hidden.has(item.id)).map(
+      (item) => range ? {
+        ...item,
+        data: item.data.slice(start, end + 1),
+        from: item.from?.slice(start, end + 1),
+        pointColors: item.pointColors?.slice(start, end + 1)
+      } : item
+    ),
+    [resolved, hidden, range, start, end]
+  );
+  const brushSeries = useMemo(
+    () => resolved.filter((item) => !hidden.has(item.id)),
+    [resolved, hidden]
+  );
+  const windowCategories = useMemo(
+    () => range ? categories.slice(start, end + 1) : categories,
+    [categories, range, start, end]
+  );
+  const groupsOn = !range && orientation === "vertical" && (categoryGroups?.length ?? 0) > 0;
+  const threshold = samplingThreshold(maxPoints, orientation, resolved);
+  const sampled = useMemo(() => {
+    const indices = threshold == null ? null : sharedSampleIndices(
+      visible.map((item) => item.data),
+      threshold
+    );
+    if (!indices) return { indices, series: visible, categories: windowCategories };
+    return {
+      indices,
+      series: visible.map((item) => ({ ...item, data: pick(item.data, indices) })),
+      categories: pick(windowCategories, indices)
+    };
+  }, [visible, windowCategories, threshold]);
+  const brushSample = useMemo(
+    () => brush && threshold != null ? sharedSampleIndices(
+      brushSeries.map((item) => item.data),
+      threshold
+    ) : null,
+    [brush, threshold, brushSeries]
+  );
+  const brushSampled = useMemo(
+    () => brushSeries.map((item) => ({ ...item, data: pick(item.data, brushSample) })),
+    [brushSeries, brushSample]
+  );
+  const original = (index) => sampled.indices ? sampled.indices[index] : index;
+  const layoutInput = useMemo(
+    () => ({
+      width,
+      height,
+      categories: sampled.categories,
+      series: sampled.series,
+      orientation,
+      stack,
+      curve,
+      dataLabels,
+      barRadius,
+      xScale,
+      xLabel,
+      valueFormat,
+      yAxis: yAxis ?? {},
+      rightAxis: rightAxis ?? {},
+      axes,
+      annotations: annotations ?? [],
+      categoryGroups: groupsOn,
+      labelRotation: categoryLabelRotation
+    }),
+    [
+      width,
+      height,
+      sampled,
+      orientation,
+      stack,
+      curve,
+      dataLabels,
+      barRadius,
+      xScale,
+      xLabel,
+      valueFormat,
+      yAxis,
+      rightAxis,
+      axes,
+      annotations,
+      groupsOn,
+      categoryLabelRotation
+    ]
+  );
+  const natural = useMemo(() => computeLayout(layoutInput), [layoutInput]);
+  const { setMargin } = sync;
+  const naturalLeft = natural.margin.left;
+  const naturalRight = natural.margin.right;
+  useEffect(() => {
+    setMargin(owner, { left: naturalLeft, right: naturalRight });
+    return () => setMargin(owner, null);
+  }, [owner, setMargin, naturalLeft, naturalRight]);
+  const groupMargin = syncId ? sync.channel.margin : null;
+  const layout = useMemo(
+    () => groupMargin && (groupMargin.left > naturalLeft || groupMargin.right > naturalRight) ? computeLayout({ ...layoutInput, minMargin: groupMargin }) : natural,
+    [natural, layoutInput, groupMargin, naturalLeft, naturalRight]
+  );
+  const { margin, innerWidth, innerHeight, horizontal } = layout;
+  const groupSpans = useMemo(
+    () => groupsOn && categoryGroups ? categoryGroupSpans(categoryGroups, layout.positions, layout.step) : [],
+    [groupsOn, categoryGroups, layout.positions, layout.step]
+  );
+  const hasBars = layout.geometry.some((item) => item.kind === "column");
+  const stackedAreas = stack !== "none";
+  const count = sampled.categories.length;
+  const syncedHover = syncId ? sync.channel.hover : null;
+  const syncedOwner = sync.channel.owner;
+  const syncedIndex = useMemo(() => {
+    if (syncedHover == null || syncedOwner === owner || count === 0) return null;
+    let best = -1;
+    let gap = Number.POSITIVE_INFINITY;
+    sampled.categories.forEach((value, index) => {
+      const key = syncKeyOf(value);
+      const distance = typeof key === "number" && typeof syncedHover === "number" ? Math.abs(key - syncedHover) : key === syncedHover ? 0 : Number.POSITIVE_INFINITY;
+      if (distance < gap) {
+        gap = distance;
+        best = index;
+      }
+    });
+    return best < 0 ? null : best;
+  }, [syncedHover, syncedOwner, owner, sampled.categories, count]);
+  const active = localActive ?? syncedIndex;
+  const { setHover, clearHover } = sync;
+  const hoverKey = localActive != null && localActive < count ? syncKeyOf(sampled.categories[localActive]) : null;
+  useEffect(() => {
+    if (hoverKey == null) clearHover(owner);
+    else setHover(hoverKey, owner);
+  }, [hoverKey, owner, setHover, clearHover]);
+  useEffect(() => () => clearHover(owner), [owner, clearHover]);
+  useEffect(() => {
+    setActive((current) => current != null && current >= count ? null : current);
+  }, [count]);
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      const clip = root.querySelector("[data-reveal]");
+      if (clip) revealClip(clip, 900);
+      const bars = root.querySelectorAll("[data-bar]");
+      const perBar = Math.min(28, 420 / Math.max(1, bars.length));
+      bars.forEach((bar, index) => {
+        bar.animate(
+          [
+            { transform: horizontal ? "scaleX(0)" : "scaleY(0)" },
+            { transform: horizontal ? "scaleX(1)" : "scaleY(1)" }
+          ],
+          { duration: 620, delay: index * perBar, easing: EASE_OUT, fill: "backwards" }
+        );
+      });
+      for (const label of root.querySelectorAll("[data-fade]")) fadeIn(label, 360, 650);
+    },
+    { disabled: !animate }
+  );
+  const plotInfo = useMemo(() => {
+    if (!overlay || count === 0) return null;
+    const time = !horizontal && layout.mode === "time";
+    const values = sampled.categories.map(
+      (category, index) => time ? new Date(category).getTime() : start + (sampled.indices ? sampled.indices[index] : index)
+    );
+    const xMap = createAxisMap(layout.positions, values);
+    const format = resolveFormat(valueFormat);
+    return {
+      left: margin.left,
+      top: margin.top,
+      width: innerWidth,
+      height: innerHeight,
+      horizontal,
+      xKind: time ? "time" : "index",
+      toX: xMap.toPixel,
+      fromX: xMap.fromPixel,
+      toY: layout.valueScale.map,
+      fromY: layout.valueScale.invert,
+      formatX: (value) => {
+        if (time) return formatDate(new Date(value));
+        const at = Math.min(total - 1, Math.max(0, Math.round(value)));
+        return titleOf(categories[at], xLabel, customXLabel);
+      },
+      formatY: (value) => format(value)
+    };
+  }, [
+    overlay,
+    horizontal,
+    count,
+    layout,
+    sampled,
+    start,
+    margin,
+    innerWidth,
+    innerHeight,
+    valueFormat,
+    total,
+    categories,
+    xLabel,
+    customXLabel
+  ]);
+  const valueDomain = layout.valueScale.domain;
+  const baseline = hasBars && layout.valueScale.type !== "log" && valueDomain[0] <= 0 && valueDomain[1] >= 0 ? layout.valueScale.map(0) : layout.zero;
+  const along = (point) => horizontal ? point.y : point.x;
+  const localPoint = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const onPointerDown = (event) => {
+    if (!brush && !rangeSelect || event.pointerType === "touch" || event.button !== 0) return;
+    dragStart.current = localPoint(event).x;
+    dragged.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const notesAt = (point) => {
+    let best = null;
+    let gap = 14;
+    for (const note2 of layout.annotations) {
+      if (note2.kind !== "point" && note2.kind !== "text" || !note2.tooltip) continue;
+      const distance = Math.hypot(note2.x - point.x, note2.y - point.y);
+      if (distance <= gap) {
+        gap = distance;
+        best = note2.key;
+      }
+    }
+    return best;
+  };
+  const emitClick = (index, across) => {
+    if (!onPointClick) return;
+    let seriesId = sampled.series[0]?.id ?? "";
+    let value = null;
+    let nearest = Number.POSITIVE_INFINITY;
+    for (const item of sampled.series) {
+      const raw = item.data[index] ?? null;
+      const point = layout.geometry.find((geometry) => geometry.id === item.id)?.points[index];
+      if (raw == null || !point) continue;
+      const distance = across == null ? 0 : Math.abs((horizontal ? point.x : point.y) - across);
+      if (distance < nearest) {
+        nearest = distance;
+        seriesId = item.id;
+        value = raw;
+      }
+    }
+    const at = start + original(index);
+    onPointClick({ index: at, category: categories[at], seriesId, value });
+  };
+  const onClick = (event) => {
+    if (!onPointClick || dragged.current) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const point = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    emitClick(layout.indexAt(along(point)), horizontal ? point.x : point.y);
+  };
+  const onPointerMove = (event) => {
+    const point = localPoint(event);
+    setPointer(point);
+    setActive(layout.indexAt(along(point)));
+    setNoteKey(notesAt(point));
+    if (dragStart.current != null && Math.abs(point.x - dragStart.current) > 4) {
+      dragged.current = true;
+      const x = Math.min(Math.max(point.x, 0), innerWidth);
+      setSelection({ from: Math.min(dragStart.current, x), to: Math.max(dragStart.current, x) });
+    }
+  };
+  const onPointerUp = (event) => {
+    if (dragStart.current != null && selection) {
+      const lo = layout.indexAt(selection.from);
+      const hi = layout.indexAt(selection.to);
+      if (rangeSelect) rangeSelect.onChange([start + original(lo), start + original(hi)]);
+      else if (hi - lo >= 1) onRangeChange([start + original(lo), start + original(hi)]);
+    }
+    dragStart.current = null;
+    setSelection(null);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const onPointerLeave = () => {
+    if (dragStart.current != null) return;
+    setActive(null);
+    setPointer(null);
+    setNoteKey(null);
+  };
+  const pickCategory = () => {
+    if (active != null && active < count) onCategoryClick?.(start + original(active));
+  };
+  const selectBand = (event) => {
+    if (!rangeSelect || dragged.current) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const at = start + original(layout.indexAt(event.clientX - rect.left));
+    const current = rangeSelect.value;
+    rangeSelect.onChange(current && current[0] === at && current[1] === at ? null : [at, at]);
+  };
+  const onClickPlot = (event) => {
+    selectBand(event);
+    if (onPointClick) onClick(event);
+    if (onCategoryClick && !dragged.current) pickCategory();
+  };
+  const onKeyDown = (event) => {
+    if ((event.key === "Enter" || event.key === " ") && onCategoryClick) {
+      event.preventDefault();
+      pickCategory();
+      if (onPointClick && active != null) emitClick(active, null);
+      return;
+    }
+    const last = count - 1;
+    let move;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      move = (current) => Math.min(last, current + 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      move = (current) => Math.max(0, current - 1);
+    } else if (event.key === "Home") move = () => 0;
+    else if (event.key === "End") move = () => last;
+    else if (event.key === "Escape") {
+      setActive(null);
+      return;
+    } else if ((event.key === "Enter" || event.key === " ") && onPointClick && active != null) {
+      event.preventDefault();
+      emitClick(active, null);
+      return;
+    } else return;
+    event.preventDefault();
+    setPointer(null);
+    setActive((current) => move(current ?? -1));
+  };
+  const describe = useCallback(
+    (index) => {
+      const category = sampled.categories[index];
+      const rows = [];
+      let sum = 0;
+      let stackable = 0;
+      for (const item of sampled.series) {
+        const raw = item.data[index];
+        const layer = layout.layers.get(item.id);
+        let note2;
+        if (layer && stack === "percent" && raw != null) {
+          note2 = formatPercent(layer.y1[index] - layer.y0[index]);
+        }
+        if (layer && raw != null) {
+          sum += raw;
+          stackable += 1;
+        }
+        rows.push({
+          id: item.id,
+          name: item.name,
+          value: raw == null ? "\u2014" : item.from?.[index] != null ? `${item.format(item.from[index])} \u2013 ${item.format(raw)}` : item.format(raw),
+          color: item.pointColors?.[index] ?? item.color,
+          shape: legendShape(item.kind, item.dashed),
+          note: note2
+        });
+      }
+      const groups = new Set(sampled.series.map((item) => item.stackGroup ?? ""));
+      if (stack === "normal" && stackable > 1 && groups.size <= 1) {
+        const format = resolveFormat(valueFormat);
+        rows.push({
+          id: "__total",
+          name: labels.total,
+          value: format(sum),
+          color: "transparent",
+          emphasis: true
+        });
+      }
+      return { title: titleOf(category, xLabel, customXLabel), rows };
+    },
+    [sampled, layout, stack, valueFormat, labels.total, xLabel, customXLabel]
+  );
+  const details = active != null && active < count ? describe(active) : null;
+  const valueText = details ? `${details.title}: ${details.rows.map((row) => `${row.name} ${row.value}`).join(", ")}` : labels.explore;
+  let anchor = null;
+  if (active != null && active < count) {
+    const position = layout.positions[active];
+    const ends = layout.geometry.map((item) => item.points[active]).filter((point) => point != null);
+    if (horizontal) {
+      const reach = ends.length ? Math.max(...ends.map((point) => point.x)) : innerWidth / 2;
+      anchor = {
+        x: margin.left + (pointer ? pointer.x : reach),
+        y: margin.top + position
+      };
+    } else {
+      const highest = ends.length ? Math.min(...ends.map((point) => point.y)) : innerHeight / 2;
+      const y = pointer && hasBars ? pointer.y : highest;
+      anchor = {
+        x: margin.left + position,
+        y: margin.top + Math.min(Math.max(y, 28), innerHeight - 28)
+      };
+    }
+  }
+  const activePosition = active != null ? layout.positions[active] : void 0;
+  const bandSize = layout.mode === "band" ? layout.step : 0;
+  const gradientId = (seriesId) => `${uid}-g-${safeId(seriesId)}`;
+  const strokeGradientId = (seriesId) => `${uid}-s-${safeId(seriesId)}`;
+  const markProps = (id) => ({
+    strokeGradientId: lineGradient ? strokeGradientId(id) : void 0,
+    transition
+  });
+  const note = noteKey ? layout.annotations.find((item) => item.key === noteKey) : void 0;
+  const rangeText = (from, to) => `${titleOf(categories[from], xLabel, customXLabel)} \u2013 ${titleOf(
+    categories[to],
+    xLabel,
+    customXLabel
+  )}`;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", style: { width }, children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        role: "img",
+        "aria-label": title,
+        width,
+        height,
+        className: "block overflow-visible",
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsx("clipPath", { id: `${uid}-reveal`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                "data-reveal": "",
+                x: -6,
+                y: -24,
+                width: innerWidth + 12,
+                height: innerHeight + 48,
+                style: { transformBox: "fill-box", transformOrigin: "left center" }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              ChartPatternDefs,
+              {
+                items: layout.geometry.flatMap(
+                  (item) => item.pattern ? [
+                    {
+                      id: patternId(uid, item.id),
+                      pattern: item.pattern,
+                      color: item.color
+                    }
+                  ] : []
+                )
+              }
+            ),
+            lineGradient ? layout.geometry.map((item, index) => ({ item, index })).filter(({ item }) => item.kind !== "column").map(({ item, index }) => /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: strokeGradientId(item.id),
+                gradientUnits: "userSpaceOnUse",
+                x1: 0,
+                x2: Math.max(1, innerWidth),
+                y1: 0,
+                y2: 0,
+                children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", style: { stopColor: item.color } }),
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      style: {
+                        stopColor: `color-mix(in oklab, ${item.color} 45%, ${seriesColor(index + 1)})`
+                      }
+                    }
+                  )
+                ]
+              },
+              item.id
+            )) : null,
+            gradient ? layout.geometry.filter((item) => item.kind === "area").map((item) => /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: gradientId(item.id),
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "0%",
+                      style: { stopColor: item.color, stopOpacity: stackedAreas ? 0.55 : 0.36 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "stop",
+                    {
+                      offset: "100%",
+                      style: { stopColor: item.color, stopOpacity: stackedAreas ? 0.22 : 0.02 }
+                    }
+                  )
+                ]
+              },
+              item.id
+            )) : null
+          ] }),
+          /* @__PURE__ */ jsxs("g", { transform: `translate(${margin.left},${margin.top})`, children: [
+            grid ? /* @__PURE__ */ jsx(
+              GridLines,
+              {
+                ticks: layout.valueTicks,
+                direction: horizontal ? "vertical" : "horizontal",
+                length: horizontal ? innerHeight : innerWidth
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              AnnotationLayer,
+              {
+                annotations: layout.annotations,
+                width: innerWidth,
+                height: innerHeight,
+                layer: "under"
+              }
+            ),
+            activePosition != null && bandSize > 0 ? /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: horizontal ? 0 : activePosition - bandSize / 2,
+                y: horizontal ? activePosition - bandSize / 2 : 0,
+                width: horizontal ? innerWidth : bandSize,
+                height: horizontal ? bandSize : innerHeight,
+                rx: 8,
+                style: { fill: "var(--chart-grid)" }
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("g", { clipPath: `url(#${uid}-reveal)`, children: layout.geometry.map(
+              (item) => item.kind === "area" ? /* @__PURE__ */ jsx(
+                LineAreaMark,
+                {
+                  geometry: item,
+                  dimmed: highlighted != null && highlighted !== item.id,
+                  gradientId: gradient ? gradientId(item.id) : void 0,
+                  markers: markers && count <= Math.max(2, innerWidth / 9),
+                  stacked: stackedAreas,
+                  ...markProps(item.id)
+                },
+                item.id
+              ) : null
+            ) }),
+            layout.geometry.map(
+              (item) => item.kind === "column" ? /* @__PURE__ */ jsx(
+                BarMark,
+                {
+                  geometry: item,
+                  horizontal,
+                  patternId: item.pattern ? patternId(uid, item.id) : void 0,
+                  dimmed: highlighted != null && highlighted !== item.id
+                },
+                item.id
+              ) : null
+            ),
+            /* @__PURE__ */ jsx("g", { clipPath: `url(#${uid}-reveal)`, children: layout.geometry.map(
+              (item) => item.kind === "line" ? /* @__PURE__ */ jsx(
+                LineAreaMark,
+                {
+                  geometry: item,
+                  dimmed: highlighted != null && highlighted !== item.id,
+                  markers: markers && count <= Math.max(2, innerWidth / 9),
+                  stacked: stackedAreas,
+                  ...markProps(item.id)
+                },
+                item.id
+              ) : null
+            ) }),
+            baseline != null ? /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: horizontal ? baseline : 0,
+                x2: horizontal ? baseline : innerWidth,
+                y1: horizontal ? 0 : baseline,
+                y2: horizontal ? innerHeight : baseline,
+                shapeRendering: "crispEdges",
+                style: { stroke: "var(--line-strong)" }
+              }
+            ) : null,
+            activePosition != null && bandSize === 0 ? /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: 0,
+                x2: 0,
+                y1: 0,
+                y2: innerHeight,
+                strokeDasharray: "3 4",
+                className: "motion-safe:transition-transform motion-safe:duration-100 motion-safe:ease-out",
+                style: {
+                  stroke: "var(--chart-crosshair)",
+                  transform: `translateX(${activePosition}px)`
+                }
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              AnnotationLayer,
+              {
+                annotations: layout.annotations,
+                width: innerWidth,
+                height: innerHeight,
+                layer: "over"
+              }
+            ),
+            horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(AxisLeft, { ticks: layout.categoryTicks, offset: 0 }),
+              /* @__PURE__ */ jsx(AxisBottom, { ticks: layout.valueTicks, offset: innerHeight })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                AxisBottom,
+                {
+                  ticks: layout.categoryTicks,
+                  offset: innerHeight,
+                  rotate: categoryLabelRotation
+                }
+              ),
+              groupSpans.length ? /* @__PURE__ */ jsx(CategoryGroupAxis, { spans: groupSpans, offset: innerHeight + margin.bottom - 20 }) : null,
+              layout.axes.map((axis) => {
+                const left = axis.side === "left";
+                const at = left ? -axis.offset : innerWidth + axis.offset;
+                const Axis = left ? AxisLeft : AxisRight;
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  axis.color || axis.offset > 0 ? /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: at,
+                      x2: at,
+                      y1: 0,
+                      y2: innerHeight,
+                      shapeRendering: "crispEdges",
+                      style: { stroke: axis.color ?? "var(--line-strong)", strokeOpacity: 0.55 }
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(Axis, { ticks: axis.ticks, offset: at, title: axis.title, color: axis.color })
+                ] }, axis.id);
+              })
+            ] }),
+            dataLabels ? layout.geometry.map((item) => /* @__PURE__ */ jsx(
+              DataLabels,
+              {
+                geometry: item,
+                dimmed: highlighted != null && highlighted !== item.id
+              },
+              item.id
+            )) : null,
+            active != null ? layout.geometry.map((item) => {
+              const point = item.points[active];
+              if (!point || item.kind === "column") return null;
+              return /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 5,
+                  strokeWidth: 2.5,
+                  style: { fill: item.color, stroke: "var(--surface)" }
+                },
+                item.id
+              );
+            }) : null,
+            rangeSelect?.value && !horizontal && count > 0 ? /* @__PURE__ */ jsx(
+              "rect",
+              {
+                "data-export-keep": "",
+                x: layout.positions[Math.min(count - 1, Math.max(0, rangeSelect.value[0] - start))] - layout.step / 2,
+                y: 0,
+                width: layout.positions[Math.min(count - 1, Math.max(0, rangeSelect.value[1] - start))] - layout.positions[Math.min(count - 1, Math.max(0, rangeSelect.value[0] - start))] + layout.step,
+                height: innerHeight,
+                rx: 6,
+                strokeWidth: 1.25,
+                pointerEvents: "none",
+                style: { fill: "var(--accent)", fillOpacity: 0.12, stroke: "var(--accent-word)" }
+              }
+            ) : null,
+            plotInfo ? overlay?.svg?.(plotInfo) : null,
+            selection ? /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: selection.from,
+                y: 0,
+                width: selection.to - selection.from,
+                height: innerHeight,
+                rx: 6,
+                strokeWidth: 1,
+                style: { fill: "var(--accent)", fillOpacity: 0.14, stroke: "var(--accent-word)" }
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": labels.explore,
+        "aria-valuemin": 1,
+        "aria-valuemax": Math.max(1, count),
+        "aria-valuenow": (active ?? 0) + 1,
+        "aria-valuetext": valueText,
+        onKeyDown,
+        onFocus: () => setActive((current) => current ?? 0),
+        onBlur: () => setActive(null),
+        onPointerDown,
+        onPointerMove,
+        onPointerUp,
+        onPointerCancel: onPointerUp,
+        onPointerLeave,
+        onClick: onClickPlot,
+        className: cn(
+          "absolute rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-4",
+          brush || rangeSelect ? "cursor-crosshair" : onPointClick || onCategoryClick ? "cursor-pointer" : "cursor-default"
+        ),
+        style: { left: margin.left, top: margin.top, width: innerWidth, height: innerHeight }
+      }
+    ),
+    plotInfo ? overlay?.html?.(plotInfo) : null,
+    note && (note.kind === "point" || note.kind === "text") ? /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: margin.left + note.x,
+        y: margin.top + note.y,
+        containerWidth: width,
+        title: note.label,
+        body: note.tooltip,
+        rows: []
+      }
+    ) : tooltip && details && anchor ? /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: anchor.x,
+        y: anchor.y,
+        containerWidth: width,
+        title: details.title,
+        rows: details.rows
+      }
+    ) : null,
+    range ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onRangeChange(null),
+        className: "absolute top-0 right-0 inline-flex h-7 cursor-pointer items-center gap-1 rounded-button border-0 bg-surface-2 px-3 font-semibold text-[12px] text-ink-2 hover:bg-sunken hover:text-ink",
+        children: [
+          /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M3 12a9 9 0 1 0 3-6.7M3 4v5h5",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.4",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }),
+          labels.resetZoom
+        ]
+      }
+    ) : null,
+    brush ? /* @__PURE__ */ jsx(
+      ChartBrush,
+      {
+        className: "mt-3",
+        count: total,
+        width,
+        left: margin.left,
+        right: margin.right,
+        height: BRUSH_HEIGHT,
+        series: brushSampled,
+        indices: brushSample ?? void 0,
+        range: range ?? [0, total - 1],
+        onChange: (next) => onRangeChange(next[0] === 0 && next[1] === total - 1 ? null : next),
+        label: labels.brush,
+        valueText: rangeText(start, end)
+      }
+    ) : null
+  ] });
+}
+export {
+  CartesianChart
+};