@oprt/react 0.0.0-stage → 0.1.0

package/dist/Chart/Chart.js

@@ -0,0 +1,1200 @@
+"use client";
+
+// src/Chart/Chart.tsx
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useLocale, useNumberFormatter } from "react-aria";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { usePartIds } from "../_internal/fieldIds.js";
+import { NumberText } from "../_internal/numberText.js";
+import { FocusableWhenUnavailableProvider } from "../_internal/unavailable.js";
+import { useElementWidth } from "../_internal/useElementWidth.js";
+import { ChartManifest } from "./Chart.manifest.js";
+import { ChartInspection, ChartRangeSelector } from "./ChartControls.js";
+import {
+  extent,
+  fraction,
+  indexByX,
+  interpolate,
+  intervalSeparator,
+  isFinitePoint,
+  linePath,
+  markerPoints,
+  nearestIndex,
+  niceAxis,
+  scale,
+  segments,
+  sequentialClasses,
+  seriesColorClass,
+  seriesIdentity,
+  tickLabels,
+  ticks,
+  withoutFloatNoise
+} from "./geometry.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var chartStyles = cva(
+  "min-w-0 w-full border border-oprt-border bg-oprt-surface-1 p-3u font-sans text-oprt-text",
+  {
+    variants: { variant: { line: "", area: "", bar: "", scatter: "", histogram: "", heatmap: "" } },
+    defaultVariants: { variant: "line" }
+  }
+);
+var LEFT = 72;
+var Y_LABEL_CHARACTER_WIDTH = (LEFT - 8) / 9;
+var TOP = 16;
+var BOTTOM = 236;
+var HEIGHT = BOTTOM - TOP;
+var SVG_HEIGHT = 270;
+var LABEL_CHARACTER_WIDTH = 8;
+var cellClass = "border-b border-oprt-border px-2u py-1u text-left";
+var dashPatterns = [void 0, "7 3", "2 3", "8 3 2 3", "12 4", "4 2", "1 4", "9 2 1 2"];
+var withUnit = (label, unit) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  label,
+  unit && /* @__PURE__ */ jsxs("span", { className: "normal-case tracking-normal", children: [
+    " (",
+    unit,
+    ")"
+  ] })
+] });
+var valueWithUnit = (value, unit) => `${value}${unit ? ` ${unit}` : ""}`;
+var EXACT_NUMBER = { maximumSignificantDigits: 21 };
+var CELL_NUMBER = { maximumSignificantDigits: 4 };
+var colorClass = (item) => seriesColorClass(item.id, item.color);
+var KEEP_COLORS = "forced-colors:[forced-color-adjust:none]";
+var shortenLabel = (label, limit) => label.length > limit ? `${label.slice(0, Math.max(1, limit - 1))}\u2026` : label;
+function Marker({
+  identity,
+  x,
+  y,
+  size = 3,
+  solid = false
+}) {
+  const common = {
+    fill: solid ? "currentColor" : "var(--oprt-surface-1)",
+    stroke: "currentColor",
+    strokeWidth: "var(--oprt-chart-stroke-width)",
+    vectorEffect: "non-scaling-stroke"
+  };
+  switch (identity) {
+    case 1:
+      return /* @__PURE__ */ jsx("rect", { ...common, x: x - size, y: y - size, width: size * 2, height: size * 2 });
+    case 2:
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          ...common,
+          d: `M${x},${y - size * 1.4} L${x + size},${y} L${x},${y + size * 1.4} L${x - size},${y} Z`
+        }
+      );
+    case 3:
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          ...common,
+          d: `M${x},${y - size * 1.3} L${x + size * 1.2},${y + size} L${x - size * 1.2},${y + size} Z`
+        }
+      );
+    case 4:
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          ...common,
+          d: `M${x},${y + size * 1.3} L${x + size * 1.2},${y - size} L${x - size * 1.2},${y - size} Z`
+        }
+      );
+    case 5:
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          ...common,
+          d: `M${x - size},${y} H${x + size} M${x},${y - size} V${y + size}`,
+          fill: "none"
+        }
+      );
+    case 6:
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          ...common,
+          d: `M${x - size},${y - size} L${x + size},${y + size} M${x + size},${y - size} L${x - size},${y + size}`,
+          fill: "none"
+        }
+      );
+    case 7:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("circle", { ...common, cx: x, cy: y, r: size, fill: "var(--oprt-surface-1)" }),
+        solid && /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: 1, fill: "currentColor" })
+      ] });
+    default:
+      return /* @__PURE__ */ jsx("circle", { ...common, cx: x, cy: y, r: size });
+  }
+}
+function histogram(series, bins) {
+  const finite = series.flatMap((item) => item.data.filter(isFinitePoint));
+  const domain = extent(finite.map((point) => point.y));
+  const count = domain.min === domain.max ? 1 : Number.isFinite(bins) ? Math.min(100, Math.max(1, Math.floor(bins))) : 10;
+  const edges = Array.from({ length: count + 1 }, (_, index) => interpolate(domain, index / count));
+  const counts = /* @__PURE__ */ new Map();
+  let missing = 0;
+  for (const item of series) {
+    const values = Array(count).fill(0);
+    for (const point of item.data) {
+      if (!isFinitePoint(point)) {
+        missing++;
+        continue;
+      }
+      const index = Math.min(count - 1, Math.floor(fraction(point.y, domain) * count));
+      values[index] = (values[index] ?? 0) + 1;
+    }
+    counts.set(item.id, values);
+  }
+  return { domain, edges, counts, missing };
+}
+function binLabel(data, index, formatNumber, separator) {
+  const start = formatNumber(withoutFloatNoise(data.edges[index]));
+  const end = formatNumber(withoutFloatNoise(data.edges[index + 1]));
+  return start === end ? start : `[${start}${separator}${end}${index === data.edges.length - 2 ? "]" : ")"}`;
+}
+var DataView = memo(function DataView2({
+  id,
+  label,
+  series,
+  hidden,
+  distribution,
+  xHeading,
+  yHeading,
+  formatX,
+  formatNumber,
+  separator
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: "max-h-screen overflow-auto border border-oprt-border focus-visible:outline-hidden focus-visible:shadow-oprt-focus",
+      tabIndex: 0,
+      role: "region",
+      "aria-label": `${label} data table`,
+      children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-oprt-base", "aria-label": `${label} data`, children: [
+        /* @__PURE__ */ jsxs("caption", { className: "sr-only", children: [
+          label,
+          " data.",
+          " ",
+          distribution ? "Bin intervals include their lower boundary; the final bin also includes its upper boundary." : "All supplied samples, including hidden series. Missing means a null or non-finite value."
+        ] }),
+        /* @__PURE__ */ jsx("thead", { className: "bg-oprt-surface-2 font-semibold uppercase tracking-oprt-caps", children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { scope: "col", className: cellClass, children: "Series" }),
+          /* @__PURE__ */ jsx("th", { scope: "col", className: cellClass, children: xHeading }),
+          /* @__PURE__ */ jsx("th", { scope: "col", className: cellClass, children: yHeading }),
+          /* @__PURE__ */ jsx("th", { scope: "col", className: cellClass, children: "Visibility" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: series.flatMap(
+          (item) => distribution ? (distribution.counts.get(item.id) ?? []).map((count, index) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", className: clsx(cellClass, "font-medium"), children: item.label }),
+            /* @__PURE__ */ jsx("td", { className: clsx(cellClass, "font-mono"), children: binLabel(distribution, index, formatNumber, separator) }),
+            /* @__PURE__ */ jsx("td", { className: clsx(cellClass, "font-mono"), children: formatNumber(count) }),
+            /* @__PURE__ */ jsx("td", { className: cellClass, children: hidden.has(item.id) ? "Hidden" : "Visible" })
+          ] }, `${item.id}:${index}`)) : item.data.map((point, index) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", className: clsx(cellClass, "font-medium"), children: item.label }),
+            /* @__PURE__ */ jsx("td", { className: clsx(cellClass, "font-mono"), children: Number.isFinite(point.x) ? point.label ?? formatX?.(point.x) ?? formatNumber(point.x) : "Missing" }),
+            /* @__PURE__ */ jsx("td", { className: clsx(cellClass, "font-mono"), children: point.y !== null && Number.isFinite(point.y) ? formatNumber(point.y) : "Missing" }),
+            /* @__PURE__ */ jsx("td", { className: cellClass, children: hidden.has(item.id) ? "Hidden" : "Visible" })
+          ] }, `${item.id}:${index}`))
+        ) })
+      ] })
+    }
+  );
+});
+function seriesMarks(item, seriesIndex, samples, context) {
+  const {
+    variant,
+    fill,
+    hatchId,
+    geometry: { left, x, y, baseline, width, groupWidth },
+    visibleCount,
+    distribution,
+    xValues,
+    heatDomain,
+    unit,
+    formatX,
+    formatNumber,
+    formatCell,
+    separator
+  } = context;
+  const identity = seriesIdentity(item.id);
+  if (variant === "histogram" && distribution) {
+    const values = distribution.counts.get(item.id) ?? [];
+    const binWidth = width / Math.max(1, values.length);
+    const barWidth = binWidth * 0.8 / Math.max(1, visibleCount);
+    return values.map((count, index) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: left + index * binWidth + binWidth * 0.1 + seriesIndex * barWidth,
+          y: Math.min(y(count), baseline),
+          width: barWidth,
+          height: Math.abs(y(count) - baseline),
+          fill: "currentColor",
+          fillOpacity: "var(--oprt-chart-bar-opacity)",
+          stroke: "currentColor",
+          strokeWidth: "var(--oprt-chart-stroke-width)",
+          vectorEffect: "non-scaling-stroke"
+        }
+      ),
+      count > 0 && /* @__PURE__ */ jsx(
+        Marker,
+        {
+          identity,
+          x: left + index * binWidth + binWidth * 0.1 + (seriesIndex + 0.5) * barWidth,
+          y: y(count),
+          size: Math.min(3, barWidth / 3)
+        }
+      ),
+      /* @__PURE__ */ jsx("title", { children: `${item.label}: ${binLabel(distribution, index, formatNumber, separator)}, ${formatNumber(count)} samples` })
+    ] }, index));
+  }
+  if (variant === "bar") {
+    const barWidth = groupWidth / Math.max(1, visibleCount);
+    return item.data.filter(isFinitePoint).map((point, index) => /* @__PURE__ */ jsxs("g", { "data-chart-point": "", children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: x(point.x) - groupWidth / 2 + barWidth * seriesIndex,
+          y: Math.min(y(point.y), baseline),
+          width: barWidth * 0.9,
+          height: Math.abs(y(point.y) - baseline),
+          fill: fill === "hatched" ? `url(#${hatchId})` : "currentColor",
+          fillOpacity: fill === "hatched" ? 1 : "var(--oprt-chart-bar-opacity)",
+          stroke: "currentColor",
+          strokeWidth: "var(--oprt-chart-stroke-width)",
+          vectorEffect: "non-scaling-stroke"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Marker,
+        {
+          identity,
+          x: x(point.x) - groupWidth / 2 + barWidth * (seriesIndex + 0.45),
+          y: y(point.y),
+          size: Math.min(3, barWidth / 3)
+        }
+      ),
+      /* @__PURE__ */ jsx("title", { children: `${item.label}: ${point.label ?? formatX?.(point.x) ?? formatNumber(point.x)}, ${valueWithUnit(formatNumber(point.y), unit)}` })
+    ] }, index));
+  }
+  if (variant === "heatmap") {
+    const cellWidth = width / Math.max(1, xValues.length);
+    const cellHeight = HEIGHT / Math.max(1, visibleCount);
+    return xValues.map((value, index) => {
+      const point = samples?.get(value);
+      const valid2 = point && isFinitePoint(point);
+      const className = valid2 ? sequentialClasses[Math.min(4, Math.floor(fraction(point.y, heatDomain) * 5))] : "text-oprt-chart-grid";
+      const cellX = left + index * cellWidth;
+      const cellY = TOP + seriesIndex * cellHeight;
+      return /* @__PURE__ */ jsxs("g", { "data-chart-cell": "", "data-chart-missing": valid2 ? void 0 : "", children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: cellX + 1,
+            y: cellY + 1,
+            width: Math.max(0, cellWidth - 2),
+            height: Math.max(0, cellHeight - 2),
+            className: clsx(className, valid2 && KEEP_COLORS),
+            fill: valid2 ? "currentColor" : "none",
+            stroke: valid2 ? "none" : "currentColor"
+          }
+        ),
+        xValues.length <= 12 && visibleCount <= 8 && cellHeight >= 24 && (valid2 ? formatCell(point.y).length : 1) * LABEL_CHARACTER_WIDTH + 8 <= cellWidth && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: cellX + cellWidth / 2,
+            y: cellY + cellHeight / 2,
+            dominantBaseline: "middle",
+            textAnchor: "middle",
+            className: clsx(
+              "font-mono text-oprt-base",
+              valid2 ? clsx("fill-current text-oprt-bg", KEEP_COLORS) : "fill-current text-oprt-text-dim"
+            ),
+            children: valid2 ? formatCell(point.y) : "\u2014"
+          }
+        ),
+        /* @__PURE__ */ jsx("title", { children: `${item.label}: ${point?.label ?? formatX?.(value) ?? formatNumber(value)}, ${valid2 ? valueWithUnit(formatNumber(point.y), unit) : "Missing"}` })
+      ] }, value);
+    });
+  }
+  const valid = item.data.filter(isFinitePoint);
+  if (variant === "scatter") {
+    return valid.map((point, index) => /* @__PURE__ */ jsxs("g", { "data-chart-point": "", children: [
+      /* @__PURE__ */ jsx("circle", { cx: x(point.x), cy: y(point.y), r: 8, fill: "transparent" }),
+      /* @__PURE__ */ jsx("g", { "data-chart-marker": "", children: /* @__PURE__ */ jsx(Marker, { identity, x: x(point.x), y: y(point.y), size: 3.5 }) }),
+      /* @__PURE__ */ jsx("title", { children: `${item.label}: ${point.label ?? formatX?.(point.x) ?? formatNumber(point.x)}, ${valueWithUnit(formatNumber(point.y), unit)}` })
+    ] }, index));
+  }
+  const runs = segments(item.data);
+  const last = valid[valid.length - 1];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    runs.map((segment, index) => {
+      const path = linePath(segment, x, y);
+      return /* @__PURE__ */ jsxs("g", { "data-chart-segment": item.id, children: [
+        variant === "area" && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `${path} L${x(segment[segment.length - 1].x)},${baseline} L${x(segment[0].x)},${baseline} Z`,
+            fill: "currentColor",
+            fillOpacity: "var(--oprt-chart-area-opacity)"
+          }
+        ),
+        variant === "area" && fill === "hatched" && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `${path} L${x(segment[segment.length - 1].x)},${baseline} L${x(segment[0].x)},${baseline} Z`,
+            fill: `url(#${hatchId})`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            "data-chart-line": "",
+            d: path,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "var(--oprt-chart-stroke-width)",
+            strokeDasharray: dashPatterns[identity],
+            strokeLinecap: "butt",
+            strokeLinejoin: "miter",
+            strokeMiterlimit: 2,
+            vectorEffect: "non-scaling-stroke"
+          }
+        )
+      ] }, index);
+    }),
+    [...markerPoints(runs, x)].map((point, index) => /* @__PURE__ */ jsx("g", { "data-chart-marker": "", children: /* @__PURE__ */ jsx(
+      Marker,
+      {
+        identity,
+        x: x(point.x),
+        y: y(point.y),
+        size: 2.5,
+        solid: point === last
+      }
+    ) }, index))
+  ] });
+}
+var Chart = forwardRef((allProps, ref) => {
+  const {
+    label,
+    series,
+    variant = "line",
+    fill = "solid",
+    description,
+    xLabel,
+    xUnit,
+    yLabel,
+    unit,
+    hiddenSeries,
+    onHiddenSeriesChange,
+    disabled = false,
+    bins = 10,
+    formatX,
+    threshold,
+    rangeSelection = false,
+    xDomain: suppliedXDomain,
+    range,
+    onRangeChange,
+    cursor,
+    cursorLabel = "Review position",
+    className,
+    ...props
+  } = allProps;
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("Chart", ChartManifest.Chart.props, { ...allProps });
+  }
+  const labelRef = useRef(null);
+  const { locale } = useLocale();
+  const numberFormat = useNumberFormatter(EXACT_NUMBER);
+  const separator = useMemo(() => intervalSeparator(locale), [locale]);
+  const formatNumber = useCallback(
+    (value) => numberFormat.format(value + 0),
+    [numberFormat]
+  );
+  const cellFormat = useNumberFormatter(CELL_NUMBER);
+  const formatCell = useCallback((value) => cellFormat.format(value + 0), [cellFormat]);
+  const ids = usePartIds(["label", "description", "hatch", "data"], {
+    readRendered: () => labelRef.current?.id.replace(/-label$/, "")
+  });
+  const plotRef = useRef(null);
+  const plotWidth = useElementWidth(plotRef, { initial: 640, min: 0 });
+  const [localHidden, setLocalHidden] = useState([]);
+  const [showData, setShowData] = useState(false);
+  const [localRange, setLocalRange] = useState();
+  const [inspection, setInspection] = useState(null);
+  const [pinned, setPinned] = useState(false);
+  const [inspectionFocused, setInspectionFocused] = useState(false);
+  const [emphasized, setEmphasized] = useState(null);
+  const inspectionRef = useRef(null);
+  const hiddenKey = JSON.stringify(hiddenSeries ?? localHidden);
+  const hidden = useMemo(() => new Set(JSON.parse(hiddenKey)), [hiddenKey]);
+  const inspectable = variant === "line" || variant === "area" || variant === "bar";
+  const fullVisible = useMemo(
+    () => series.filter((item) => !hidden.has(item.id)),
+    [series, hidden]
+  );
+  const dataDomain = useMemo(
+    () => extent(series.flatMap((item) => item.data.map((point) => point.x))),
+    [series]
+  );
+  const suppliedStart = suppliedXDomain?.start;
+  const suppliedEnd = suppliedXDomain?.end;
+  const fullDomain = useMemo(
+    () => inspectable && suppliedStart !== void 0 && suppliedEnd !== void 0 && Number.isFinite(suppliedStart) && Number.isFinite(suppliedEnd) && suppliedStart < suppliedEnd ? { min: suppliedStart, max: suppliedEnd } : dataDomain,
+    [inspectable, suppliedStart, suppliedEnd, dataDomain]
+  );
+  const requested = range ?? localRange;
+  const requestedStart = requested?.start;
+  const requestedEnd = requested?.end;
+  const controlledRange = range !== void 0;
+  const view = useMemo(() => {
+    const full = { start: fullDomain.min, end: fullDomain.max, valid: false };
+    if (!inspectable || requestedStart === void 0 || requestedEnd === void 0) return full;
+    if (!Number.isFinite(requestedStart) || !Number.isFinite(requestedEnd) || requestedStart >= requestedEnd)
+      return full;
+    if (requestedEnd >= fullDomain.min && requestedStart <= fullDomain.max) {
+      return {
+        start: Math.max(fullDomain.min, requestedStart),
+        end: Math.min(fullDomain.max, requestedEnd),
+        valid: true
+      };
+    }
+    return controlledRange ? { start: requestedStart, end: requestedEnd, valid: true } : { ...full, valid: true };
+  }, [inspectable, requestedStart, requestedEnd, controlledRange, fullDomain]);
+  const narrowed = inspectable && (view.start > dataDomain.min || view.end < dataDomain.max);
+  const visible = useMemo(
+    () => narrowed ? fullVisible.map((item) => ({
+      ...item,
+      data: item.data.filter(
+        (point) => !Number.isFinite(point.x) || point.x >= view.start && point.x <= view.end
+      )
+    })) : fullVisible,
+    [narrowed, fullVisible, view.start, view.end]
+  );
+  const samplesAt = useMemo(
+    () => new Map(visible.map((item) => [item, indexByX(item.data)])),
+    [visible]
+  );
+  const finite = useMemo(
+    () => visible.flatMap((item) => item.data.filter(isFinitePoint)),
+    [visible]
+  );
+  const distribution = useMemo(
+    () => variant === "histogram" ? histogram(visible, bins) : void 0,
+    [variant, visible, bins]
+  );
+  const thresholdValue = variant !== "heatmap" && threshold && Number.isFinite(threshold.value) ? threshold.value : void 0;
+  const yAxis = useMemo(() => {
+    const values = distribution ? [...distribution.counts.values()].flat() : finite.map((point) => point.y);
+    if (thresholdValue !== void 0) values.push(thresholdValue);
+    return niceAxis(
+      extent(values, variant === "bar" || variant === "area" || variant === "histogram"),
+      variant === "histogram"
+    );
+  }, [distribution, finite, thresholdValue, variant]);
+  const xValues = useMemo(
+    () => [
+      ...new Set(
+        visible.flatMap((item) => item.data.map((point) => point.x)).filter(Number.isFinite)
+      )
+    ].sort((a, b) => a - b),
+    [visible]
+  );
+  const windowedAxis = inspectable && (rangeSelection || view.valid || suppliedXDomain !== void 0);
+  const xDomain = useMemo(
+    () => windowedAxis ? { min: view.start, max: view.end } : distribution?.domain ?? (xValues.length > 0 ? { min: xValues[0], max: xValues[xValues.length - 1] } : extent([])),
+    [windowedAxis, view.start, view.end, distribution, xValues]
+  );
+  const heatDomain = useMemo(
+    () => variant === "heatmap" ? extent(finite.map((point) => point.y)) : dataDomain,
+    [variant, finite, dataDomain]
+  );
+  const anyFiniteX = useMemo(
+    () => series.some((item) => item.data.some((point) => Number.isFinite(point.x))),
+    [series]
+  );
+  const missing = useMemo(
+    () => visible.reduce(
+      (total, item) => total + item.data.filter((point) => !isFinitePoint(point)).length,
+      0
+    ),
+    [visible]
+  );
+  const histogramView = distribution !== void 0;
+  const xHeading = useMemo(
+    () => histogramView ? withUnit(xLabel ?? "Value", unit) : withUnit(xLabel ?? "Sample", xUnit),
+    [histogramView, xLabel, xUnit, unit]
+  );
+  const yHeading = useMemo(
+    () => histogramView ? yLabel ?? "Count" : withUnit(yLabel ?? "Value", unit),
+    [histogramView, yLabel, unit]
+  );
+  const empty = series.length === 0 ? "No data to display." : visible.length === 0 ? "All series are hidden." : narrowed && xValues.length === 0 ? "No samples in this range." : finite.length === 0 ? "No finite data to display." : void 0;
+  const yLabels = useMemo(
+    () => variant === "heatmap" ? [] : tickLabels(yAxis.ticks, locale),
+    [variant, yAxis, locale]
+  );
+  const longestYLabel = Math.max(9, ...yLabels.map((label2) => label2.length));
+  const left = Math.max(LEFT, Math.ceil(8 + longestYLabel * Y_LABEL_CHARACTER_WIDTH));
+  const geometry = useMemo(() => {
+    const right = Math.max(left + 1, plotWidth - 24);
+    const width = right - left;
+    const initialX = scale(xDomain, left, right);
+    let slotWidth = width;
+    for (let index = 1; index < xValues.length; index++)
+      slotWidth = Math.min(slotWidth, initialX(xValues[index]) - initialX(xValues[index - 1]));
+    const groupWidth = Math.min(48, slotWidth * 0.7);
+    const inset = variant === "bar" ? groupWidth / 2 : 0;
+    const y2 = scale(yAxis.domain, BOTTOM, TOP);
+    return {
+      left,
+      right,
+      width,
+      groupWidth,
+      x: scale(xDomain, left + inset, right - inset),
+      y: y2,
+      baseline: y2(0)
+    };
+  }, [left, plotWidth, xDomain, xValues, variant, yAxis]);
+  const xTickLabels = useMemo(() => {
+    const { left: left2, width, x: x2 } = geometry;
+    const textFor = (value, interpolated) => formatX && !histogramView ? formatX(value) : formatNumber(interpolated ? withoutFloatNoise(value) : value);
+    const columnText = variant === "heatmap" && xValues.length <= 6 ? xValues.map((value) => textFor(value, false)) : [];
+    const heatmapTicksFit = columnText.length > 0 && columnText.every(
+      (text) => text.length * LABEL_CHARACTER_WIDTH + 16 <= width / Math.max(1, xValues.length)
+    );
+    const xTicks = variant === "heatmap" ? xValues.flatMap(
+      (value, index) => heatmapTicksFit || index === 0 || index === xValues.length - 1 ? [
+        {
+          value,
+          position: left2 + (index + 0.5) * width / xValues.length,
+          interpolated: false
+        }
+      ] : []
+    ) : ticks(xDomain, width < 384 ? 2 : 3).map((value, index, all) => ({
+      value,
+      position: x2(value),
+      interpolated: index > 0 && index < all.length - 1
+    }));
+    const texts = xTicks.map((tick) => textFor(tick.value, tick.interpolated));
+    return xTicks.map(({ position }, index) => {
+      const start = index === 0 ? 0 : Math.min(plotWidth, (xTicks[index - 1].position + position) / 2 + 4);
+      const end = index === xTicks.length - 1 ? plotWidth : Math.min(plotWidth, (position + xTicks[index + 1].position) / 2 - 4);
+      const text = texts[index];
+      const shortText = shortenLabel(
+        text,
+        Math.max(1, Math.floor((end - start) / LABEL_CHARACTER_WIDTH))
+      );
+      const halfWidth = shortText.length * LABEL_CHARACTER_WIDTH / 2;
+      return {
+        text,
+        shortText,
+        x: Math.max(start + halfWidth, Math.min(end - halfWidth, position))
+      };
+    });
+  }, [geometry, histogramView, formatX, formatNumber, xValues, variant, xDomain, plotWidth]);
+  const hatchId = ids.hatch;
+  const marksLayer = useMemo(() => {
+    const context = {
+      variant,
+      fill,
+      hatchId,
+      geometry,
+      visibleCount: visible.length,
+      distribution,
+      xValues,
+      heatDomain,
+      unit,
+      formatX,
+      formatNumber,
+      formatCell,
+      separator
+    };
+    return visible.map((item, index) => /* @__PURE__ */ jsx("g", { "data-chart-series": item.id, className: colorClass(item), children: seriesMarks(item, index, samplesAt.get(item), context) }));
+  }, [
+    variant,
+    fill,
+    hatchId,
+    geometry,
+    visible,
+    distribution,
+    xValues,
+    heatDomain,
+    unit,
+    formatX,
+    formatNumber,
+    formatCell,
+    separator,
+    samplesAt
+  ]);
+  const seriesNumber = useMemo(
+    () => new Map(series.map((item, index) => [item.id, index + 1])),
+    [series]
+  );
+  const yAxisLayer = useMemo(() => {
+    if (variant === "heatmap") {
+      return /* @__PURE__ */ jsx("g", { "aria-hidden": "true", children: visible.map((item, index) => /* @__PURE__ */ jsx(
+        "text",
+        {
+          "data-chart-row": "",
+          x: geometry.left - 8,
+          y: TOP + HEIGHT / visible.length * (index + 0.5),
+          textAnchor: "end",
+          dominantBaseline: "middle",
+          className: "fill-current font-mono text-oprt-base text-oprt-chart-axis",
+          children: seriesNumber.get(item.id)
+        },
+        item.id
+      )) });
+    }
+    return /* @__PURE__ */ jsx("g", { "data-chart-y-axis": "", "aria-hidden": "true", children: yAxis.ticks.map((value, index) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: geometry.left,
+          x2: geometry.right,
+          y1: Math.round(geometry.y(value)) + 0.5,
+          y2: Math.round(geometry.y(value)) + 0.5,
+          className: "text-oprt-chart-grid",
+          stroke: "currentColor",
+          strokeWidth: "var(--oprt-chart-guide-width)",
+          strokeDasharray: value === 0 ? void 0 : "2 4",
+          strokeOpacity: value === 0 ? 1 : 0.65
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: geometry.left - 4,
+          x2: geometry.left,
+          y1: Math.round(geometry.y(value)) + 0.5,
+          y2: Math.round(geometry.y(value)) + 0.5,
+          className: "text-oprt-chart-axis",
+          stroke: "currentColor",
+          strokeWidth: "var(--oprt-chart-guide-width)"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "text",
+        {
+          x: geometry.left - 8,
+          y: geometry.y(value),
+          textAnchor: "end",
+          dominantBaseline: "middle",
+          className: "fill-current font-mono text-oprt-base text-oprt-chart-axis",
+          children: [
+            yLabels[index],
+            /* @__PURE__ */ jsx("title", { children: formatNumber(value) })
+          ]
+        }
+      )
+    ] }, index)) });
+  }, [variant, visible, yAxis, yLabels, geometry, seriesNumber, formatNumber]);
+  const xAxisLayer = useMemo(
+    () => /* @__PURE__ */ jsx("g", { "data-chart-x-axis": "", "aria-hidden": "true", children: xTickLabels.map((tick, index) => /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: tick.x,
+        y: BOTTOM + 22,
+        textAnchor: "middle",
+        className: "fill-current font-mono text-oprt-base text-oprt-chart-axis",
+        children: [
+          tick.shortText,
+          /* @__PURE__ */ jsx("title", { children: tick.text })
+        ]
+      },
+      index
+    )) }),
+    [xTickLabels]
+  );
+  const xIndex = useMemo(
+    () => new Map(xValues.map((value, index) => [value, index])),
+    [xValues]
+  );
+  const activeIndex = inspection === null ? void 0 : xIndex.get(inspection);
+  const activeX = activeIndex === void 0 ? null : inspection;
+  const reviewCursor = inspectable && cursor != null && Number.isFinite(cursor) && cursor >= xDomain.min && cursor <= xDomain.max ? cursor : null;
+  useEffect(() => {
+    if (activeX === null || !inspectable) {
+      setInspection(null);
+      setPinned(false);
+    }
+    if (!inspectable || xValues.length === 0) setInspectionFocused(false);
+  }, [activeX, inspectable, xValues.length]);
+  const inspectIndex = activeIndex ?? Math.max(0, xValues.length - 1);
+  const formatPosition = useCallback(
+    (value) => valueWithUnit(formatX?.(value) ?? formatNumber(value), xUnit),
+    [formatX, formatNumber, xUnit]
+  );
+  function authoredLabel(value) {
+    let found;
+    for (const item of visible) {
+      const point = samplesAt.get(item)?.get(value);
+      if (!point) continue;
+      if (!point.label || found !== void 0 && point.label !== found) return void 0;
+      found = point.label;
+    }
+    return found;
+  }
+  const renderSamplePosition = (value) => authoredLabel(value) ?? /* @__PURE__ */ jsx(NumberText, { value: formatX?.(value) ?? formatNumber(value), unit: xUnit });
+  function describeSample(index) {
+    const value = xValues[index];
+    if (value === void 0) return "No sample";
+    return `${authoredLabel(value) ?? formatPosition(value)}. ${visible.map((item) => {
+      const point = samplesAt.get(item)?.get(value);
+      return `${item.label}: ${point && isFinitePoint(point) ? valueWithUnit(formatNumber(point.y), unit) : "Missing"}`;
+    }).join(". ")}`;
+  }
+  function inspectPointer(event) {
+    if (!inspectable || !xValues.length) return;
+    const bounds = event.currentTarget.getBoundingClientRect();
+    if (!bounds.width) return;
+    const px = (event.clientX - bounds.left) * plotWidth / bounds.width;
+    if (px < geometry.left || px > geometry.right) return;
+    setInspection(xValues[nearestIndex(xValues, px, geometry.x)] ?? null);
+  }
+  const changeRange = useCallback(
+    (next) => {
+      if (disabled) return;
+      if (!controlledRange) setLocalRange(next);
+      onRangeChange?.(next);
+      setInspection(null);
+      setPinned(false);
+    },
+    [disabled, controlledRange, onRangeChange]
+  );
+  function toggle(item) {
+    const next = new Set(hidden);
+    if (next.has(item.id)) next.delete(item.id);
+    else next.add(item.id);
+    const ids2 = [...next];
+    if (hiddenSeries === void 0) setLocalHidden(ids2);
+    onHiddenSeriesChange?.(ids2);
+  }
+  const firstX = xValues[0];
+  const lastX = xValues[xValues.length - 1];
+  const windowEnds = empty ? null : variant === "heatmap" ? firstX === void 0 || lastX === void 0 ? null : [firstX, lastX] : [xDomain.min, xDomain.max];
+  const renderPosition = useCallback(
+    (value) => histogramView ? /* @__PURE__ */ jsx(NumberText, { value: formatNumber(value), unit }) : /* @__PURE__ */ jsx(NumberText, { value: formatX?.(value) ?? formatNumber(value), unit: xUnit }),
+    [histogramView, unit, formatX, formatNumber, xUnit]
+  );
+  const { x, y } = geometry;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref,
+      "data-oprt-chart": variant,
+      className: clsx(chartStyles({ variant }), className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2u", children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              ref: labelRef,
+              id: ids.label,
+              className: "m-0 min-w-0 flex-1 font-semibold text-oprt-base uppercase tracking-oprt-caps oprt-wrap-anywhere",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "sm",
+              "aria-expanded": showData,
+              "aria-controls": showData ? ids.data : void 0,
+              onClick: () => setShowData(!showData),
+              children: "View data"
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "m-0 mt-1u text-oprt-base text-oprt-text-dim oprt-wrap-anywhere", children: description }),
+        /* @__PURE__ */ jsxs("p", { id: ids.description, className: "sr-only", children: [
+          description ? `${description} ` : "",
+          variant,
+          " chart. ",
+          formatNumber(visible.length),
+          " visible series. ",
+          formatNumber(missing),
+          " ",
+          "missing samples. ",
+          empty ?? "Use View data to inspect values."
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2u flex justify-between gap-2u text-oprt-base uppercase tracking-oprt-caps text-oprt-text-dim", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere", children: variant === "heatmap" ? "Series" : yHeading }),
+          variant === "heatmap" && /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere", children: yHeading })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: plotRef,
+            className: "relative min-w-0 w-full border border-transparent focus-within:border-oprt-border-focus focus-within:shadow-oprt-focus",
+            onKeyDownCapture: (event) => {
+              if (event.key !== "Escape" || activeX === null && !pinned) return;
+              event.preventDefault();
+              event.stopPropagation();
+              setInspection(null);
+              setPinned(false);
+            },
+            children: [
+              inspectable && xValues.length > 0 && /* @__PURE__ */ jsx(
+                ChartInspection,
+                {
+                  label,
+                  index: inspectIndex,
+                  count: xValues.length,
+                  describe: describeSample,
+                  inputRef: inspectionRef,
+                  onChange: (index) => {
+                    setInspection(xValues[index] ?? null);
+                    setPinned(true);
+                  },
+                  onFocus: () => {
+                    setInspectionFocused(true);
+                    setInspection(xValues[inspectIndex] ?? null);
+                    setPinned(true);
+                  },
+                  onBlur: () => setInspectionFocused(false)
+                }
+              ),
+              empty ? /* @__PURE__ */ jsx("p", { className: "m-0 py-6u text-oprt-base text-oprt-text-dim", role: "status", children: empty }) : /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  role: "img",
+                  "aria-labelledby": ids.label,
+                  "aria-describedby": ids.description,
+                  viewBox: `0 0 ${plotWidth} ${SVG_HEIGHT}`,
+                  height: SVG_HEIGHT,
+                  preserveAspectRatio: "xMinYMin meet",
+                  className: "block w-full overflow-hidden",
+                  onPointerMove: (event) => {
+                    if (!pinned && !inspectionFocused) inspectPointer(event);
+                  },
+                  onPointerLeave: () => {
+                    if (!pinned && !inspectionFocused) setInspection(null);
+                  },
+                  onPointerDown: (event) => {
+                    if (inspectable && event.button === 0) {
+                      inspectionRef.current?.focus({ preventScroll: true });
+                      inspectPointer(event);
+                      setPinned(true);
+                    }
+                  },
+                  children: [
+                    fill === "hatched" && (variant === "area" || variant === "bar") && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: hatchId, width: 8, height: 8, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M-2 2 L2 -2 M0 8 L8 0 M6 10 L10 6",
+                        stroke: "var(--oprt-text-dim)",
+                        strokeWidth: "var(--oprt-chart-guide-width)",
+                        strokeOpacity: "var(--oprt-chart-bar-opacity)"
+                      }
+                    ) }) }),
+                    yAxisLayer,
+                    visible.map((item, index) => /* @__PURE__ */ jsx(
+                      "g",
+                      {
+                        className: "transition-opacity duration-oprt-normal motion-reduce:transition-none",
+                        opacity: emphasized && emphasized !== item.id ? 0.35 : 1,
+                        "aria-hidden": "true",
+                        children: marksLayer[index]
+                      },
+                      item.id
+                    )),
+                    thresholdValue !== void 0 && /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        "data-chart-threshold": "",
+                        x1: geometry.left,
+                        x2: geometry.right,
+                        y1: y(thresholdValue),
+                        y2: y(thresholdValue),
+                        className: "text-oprt-chart-threshold",
+                        stroke: "currentColor",
+                        strokeWidth: "var(--oprt-chart-guide-width)",
+                        strokeDasharray: "6 4"
+                      }
+                    ),
+                    reviewCursor !== null && /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        "data-chart-cursor": "",
+                        "aria-hidden": "true",
+                        pointerEvents: "none",
+                        x1: x(reviewCursor),
+                        x2: x(reviewCursor),
+                        y1: TOP,
+                        y2: BOTTOM,
+                        className: "text-oprt-accent",
+                        stroke: "currentColor",
+                        strokeWidth: "var(--oprt-chart-stroke-width)"
+                      }
+                    ),
+                    inspectable && activeX !== null && /* @__PURE__ */ jsxs("g", { "data-chart-crosshair": "", "aria-hidden": "true", pointerEvents: "none", children: [
+                      /* @__PURE__ */ jsx(
+                        "line",
+                        {
+                          x1: x(activeX),
+                          x2: x(activeX),
+                          y1: TOP,
+                          y2: BOTTOM,
+                          stroke: "var(--oprt-text-dim)",
+                          strokeWidth: "var(--oprt-chart-guide-width)",
+                          strokeDasharray: "3 3"
+                        }
+                      ),
+                      visible.map((item, index) => {
+                        const point = samplesAt.get(item)?.get(activeX);
+                        if (!point || !isFinitePoint(point)) return null;
+                        const pointX = variant === "bar" ? x(activeX) - geometry.groupWidth / 2 + geometry.groupWidth / visible.length * (index + 0.45) : x(activeX);
+                        return /* @__PURE__ */ jsx("g", { className: colorClass(item), children: /* @__PURE__ */ jsx(
+                          Marker,
+                          {
+                            identity: seriesIdentity(item.id),
+                            x: pointX,
+                            y: y(point.y),
+                            size: 4,
+                            solid: true
+                          }
+                        ) }, item.id);
+                      })
+                    ] }),
+                    xAxisLayer
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-2u", children: [
+          windowEnds && /* @__PURE__ */ jsxs(
+            "p",
+            {
+              "data-chart-window": "",
+              className: "m-0 min-w-0 font-mono text-oprt-base text-oprt-text-dim oprt-wrap-anywhere",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "inline-block max-w-full", children: renderPosition(windowEnds[0]) }),
+                " to ",
+                /* @__PURE__ */ jsx("span", { className: "inline-block max-w-full", children: renderPosition(windowEnds[1]) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "m-0 ml-auto min-w-0 text-right text-oprt-base uppercase tracking-oprt-caps text-oprt-text-dim oprt-wrap-anywhere", children: xHeading })
+        ] }),
+        reviewCursor !== null && /* @__PURE__ */ jsxs("p", { className: "m-0 text-oprt-base text-oprt-text-dim oprt-wrap-anywhere", children: [
+          cursorLabel,
+          ": ",
+          renderSamplePosition(reviewCursor)
+        ] }),
+        inspectable && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "region",
+            "aria-label": `${label} readout`,
+            className: "mt-2u border-y border-oprt-border bg-oprt-surface-2 px-2u py-1u",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-h-3u flex-wrap items-center justify-between gap-1u", children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 font-mono text-oprt-base oprt-wrap-anywhere", children: activeX !== null ? renderSamplePosition(activeX) : "Hover or focus the plot to inspect" }),
+                /* @__PURE__ */ jsx(FocusableWhenUnavailableProvider, { value: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    disabled: activeX === null,
+                    onClick: () => {
+                      setInspection(null);
+                      setPinned(false);
+                    },
+                    children: "Clear inspection"
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx("dl", { className: "m-0 flex flex-wrap gap-x-3u gap-y-1u pb-1u", children: visible.map((item) => {
+                const point = activeX === null ? void 0 : samplesAt.get(item)?.get(activeX);
+                return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1u", children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      "aria-hidden": "true",
+                      className: clsx("shrink-0", colorClass(item)),
+                      children: /* @__PURE__ */ jsx(Marker, { identity: seriesIdentity(item.id), x: 8, y: 8, size: 3 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("dt", { className: "min-w-0 text-oprt-base text-oprt-text-dim oprt-wrap-anywhere", children: item.label }),
+                  /* @__PURE__ */ jsx("dd", { className: "m-0 font-mono text-oprt-base", children: activeX === null ? "\u2014" : point && isFinitePoint(point) ? /* @__PURE__ */ jsx(NumberText, { value: formatNumber(point.y), unit }) : "Missing" })
+                ] }, item.id);
+              }) })
+            ]
+          }
+        ),
+        thresholdValue !== void 0 && threshold && /* @__PURE__ */ jsxs("p", { className: "m-0 mt-1u font-mono text-oprt-base text-oprt-chart-threshold oprt-wrap-anywhere", children: [
+          threshold.label,
+          ":",
+          " ",
+          /* @__PURE__ */ jsx(NumberText, { value: formatNumber(thresholdValue), unit: distribution ? void 0 : unit })
+        ] }),
+        missing > 0 && /* @__PURE__ */ jsx("p", { className: "m-0 mt-1u text-oprt-base text-oprt-text-dim", children: distribution ? `${formatNumber(missing)} missing samples excluded from bins.` : `${formatNumber(missing)} missing samples shown as gaps.` }),
+        variant === "heatmap" && finite.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mt-2u flex flex-wrap items-center gap-1u text-oprt-base",
+            "aria-label": "Value scale",
+            children: [
+              /* @__PURE__ */ jsx(
+                NumberText,
+                {
+                  value: formatNumber(heatDomain.min),
+                  unit,
+                  className: "min-w-0 font-mono"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex shrink-0 gap-1u", "aria-hidden": "true", children: sequentialClasses.map((color) => /* @__PURE__ */ jsx("span", { className: clsx("h-1u w-3u bg-current", color, KEEP_COLORS) }, color)) }),
+              /* @__PURE__ */ jsx(
+                NumberText,
+                {
+                  value: formatNumber(heatDomain.max),
+                  unit,
+                  className: "min-w-0 font-mono"
+                }
+              )
+            ]
+          }
+        ),
+        series.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-2u flex flex-wrap gap-1u",
+            role: "group",
+            "aria-label": `${label} series visibility`,
+            children: series.map((item) => /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "min-w-0 max-w-full oprt-wrap-anywhere",
+                "aria-label": variant === "heatmap" ? `${seriesNumber.get(item.id)} ${item.label}` : item.label,
+                "aria-pressed": !hidden.has(item.id),
+                disabled,
+                onClick: () => {
+                  toggle(item);
+                  setEmphasized(null);
+                },
+                onPointerEnter: () => {
+                  if (!hidden.has(item.id)) setEmphasized(item.id);
+                },
+                onPointerLeave: () => setEmphasized(null),
+                onFocus: () => {
+                  if (!hidden.has(item.id)) setEmphasized(item.id);
+                },
+                onBlur: () => setEmphasized(null),
+                children: [
+                  variant !== "heatmap" && /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      "aria-hidden": "true",
+                      width: "28",
+                      height: "16",
+                      viewBox: "0 0 28 16",
+                      className: clsx("mr-1u shrink-0", colorClass(item)),
+                      children: [
+                        (variant === "line" || variant === "area") && /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M1 8 H27",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "var(--oprt-chart-stroke-width)",
+                            strokeDasharray: dashPatterns[seriesIdentity(item.id)]
+                          }
+                        ),
+                        (variant === "bar" || variant === "histogram") && /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            x: 8,
+                            y: 5,
+                            width: 12,
+                            height: 9,
+                            fill: "currentColor",
+                            fillOpacity: "var(--oprt-chart-bar-opacity)",
+                            stroke: "currentColor",
+                            strokeWidth: "var(--oprt-chart-stroke-width)"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Marker,
+                          {
+                            identity: seriesIdentity(item.id),
+                            x: 14,
+                            y: variant === "bar" || variant === "histogram" ? 5 : 8,
+                            size: 2.5,
+                            solid: variant === "line" || variant === "area"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  variant === "heatmap" && /* @__PURE__ */ jsx("span", { className: "mr-1u font-mono", children: seriesNumber.get(item.id) }),
+                  item.label,
+                  hidden.has(item.id) && /* @__PURE__ */ jsx("span", { className: "ml-1u text-oprt-text-dim", children: "Hidden" })
+                ]
+              },
+              item.id
+            ))
+          }
+        ),
+        rangeSelection && inspectable && fullDomain.min < fullDomain.max && anyFiniteX && /* @__PURE__ */ jsx(
+          ChartRangeSelector,
+          {
+            label,
+            series: fullVisible,
+            domain: fullDomain,
+            range: view,
+            format: formatPosition,
+            renderPosition,
+            disabled,
+            onChange: changeRange
+          }
+        ),
+        showData && /* @__PURE__ */ jsx("div", { className: "mt-2u", children: /* @__PURE__ */ jsx(
+          DataView,
+          {
+            id: ids.data,
+            label,
+            series: distribution ? visible : series,
+            hidden,
+            distribution,
+            xHeading,
+            yHeading,
+            formatX,
+            formatNumber,
+            separator
+          }
+        ) })
+      ]
+    }
+  );
+});
+Chart.displayName = "Chart";
+export {
+  Chart
+};