@eifi1/ui-kit 0.7.1 → 0.8.1

package/dist/components/series-chart.js

@@ -1,17 +1,54 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { CartesianGrid, Label, Line, LineChart, ReferenceLine, XAxis, YAxis } from "recharts";
+import {
+  Area,
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Label,
+  Line,
+  ReferenceDot,
+  ReferenceLine,
+  XAxis,
+  YAxis
+} from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
-import { DEFAULT_Y_AXIS, withChartZoom } from "./chart-zoom.js";
+import {
+  DEFAULT_Y_AXIS,
+  axisExtent,
+  withChartZoom
+} from "./chart-zoom.js";
 import { STEP_DASH, strokeDash } from "./toggle-legend.js";
 import { DEFAULT_SERIES_CHART_LABELS } from "./series-chart-labels.js";
-import { niceTicks } from "./series-chart-ticks.js";
+import { categoryTicks, integerTicks, niceTicks, timeTicksWithUnit } from "./series-chart-ticks.js";
 import { paletteFor } from "../theme/chart-palette.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
+const TONE_COLOR = {
+  muted: "var(--text-muted)",
+  brand: "var(--brand)",
+  income: "var(--money-income)",
+  expense: "var(--money-expense)",
+  net: "var(--money-net)",
+  success: "var(--success)",
+  warning: "var(--warning)",
+  danger: "var(--danger)",
+  info: "var(--info)"
+};
 const AXIS_TITLE_STRIP = 16;
 const AXIS_TITLE_OFFSET = 10;
+const MAX_TILTED_TICK_BAND = 120;
+const TICK_CHAR_WIDTH = 7;
+const TICK_LINE_HEIGHT = 12;
+const TICK_GAP = 8;
+function tiltedTickBand(labels, angle) {
+  if (!angle) return void 0;
+  const rad = Math.abs(angle) * Math.PI / 180;
+  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH;
+  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT + TICK_GAP;
+  return Math.min(MAX_TILTED_TICK_BAND, Math.max(30, Math.ceil(band)));
+}
 const AXIS_TICK_WIDTH = 48;
 const AUTO_PAD = 0.04;
 function paddedDomain(values) {
@@ -54,6 +91,29 @@ function seriesKey(...parts) {
   const key = parts.map((part) => String(part).replace(/[^A-Za-z0-9_-]/g, "_")).join("_");
   return /^[A-Za-z_]/.test(key) ? key : `_${key}`;
 }
+function anchoredBand(extent) {
+  if (!extent) return void 0;
+  const low = Math.min(0, extent[0]);
+  const high = Math.max(0, extent[1]);
+  const pad = (high - low) * AUTO_PAD || 1;
+  return [low < 0 ? low - pad : 0, high > 0 ? high + pad : 0];
+}
+function visibleSeries(series, hidden) {
+  return series.map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) })).filter((entry) => !hidden.has(entry.key));
+}
+function seriesLegendEntries(series) {
+  return series.map((entry, index) => {
+    const own = entry.dash ?? (entry.dashed ? 1 : 0);
+    const dash = entry.step ? STEP_DASH : own;
+    const line = (entry.type ?? "line") === "line";
+    return {
+      key: entry.key,
+      label: entry.label,
+      color: entry.color ?? paletteFor(index),
+      ...line && dash !== 0 ? { marker: "stroke", dash } : {}
+    };
+  });
+}
 function useDefaultFormat(localeProp) {
   const locale = useKitLocale(localeProp);
   return useMemo(() => {
@@ -62,9 +122,83 @@ function useDefaultFormat(localeProp) {
   }, [locale]);
 }
 const ONE_UNTITLED_AXIS = [{ id: DEFAULT_Y_AXIS, title: "" }];
-function StaticSeriesChart({
-  rows,
-  x = {},
+const PLOTTED_X = "__seriesChartX";
+const finite = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
+function toTime(value) {
+  if (value instanceof Date) return finite(value.getTime());
+  if (typeof value === "number") return finite(value);
+  if (typeof value !== "string") return void 0;
+  const day = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(value);
+  if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3] ?? 1)).getTime();
+  return finite(Date.parse(value));
+}
+const categoryId = (value) => value instanceof Date ? `d:${value.getTime()}` : `${typeof value}:${String(value)}`;
+function xModel(rows, x) {
+  const sourceKey = x.key ?? "x";
+  if (x.type === "category") {
+    const slots = /* @__PURE__ */ new Map();
+    rows.forEach((row, index) => {
+      const id = categoryId(row[sourceKey]);
+      if (!slots.has(id)) slots.set(id, index);
+    });
+    return {
+      kind: "category",
+      sourceKey,
+      plotKey: PLOTTED_X,
+      rows: rows.map((row, index) => ({ ...row, [PLOTTED_X]: index })),
+      source: rows,
+      position: (value) => slots.get(categoryId(value)),
+      valueAt: (position) => rows[Math.round(position)]?.[sourceKey]
+    };
+  }
+  if (x.type === "time") {
+    return {
+      kind: "time",
+      sourceKey,
+      plotKey: PLOTTED_X,
+      rows: rows.map((row) => ({ ...row, [PLOTTED_X]: toTime(row[sourceKey]) })),
+      source: rows,
+      position: toTime,
+      valueAt: (position) => new Date(position)
+    };
+  }
+  return {
+    kind: "number",
+    sourceKey,
+    plotKey: sourceKey,
+    rows,
+    source: rows,
+    position: finite,
+    valueAt: (position) => position
+  };
+}
+function resolveTicks(values, domain, position) {
+  if (!values || !domain) return void 0;
+  const list = typeof values === "function" ? values(domain) : values;
+  if (!list) return void 0;
+  const slack = (domain[1] - domain[0]) * 1e-9;
+  return list.map(position).filter((at) => at !== void 0 && at >= domain[0] - slack && at <= domain[1] + slack);
+}
+function extend(span, values) {
+  let out = span ? [span[0], span[1]] : void 0;
+  for (const value of values) {
+    if (value === void 0 || !Number.isFinite(value)) continue;
+    out = out ? [Math.min(out[0], value), Math.max(out[1], value)] : [value, value];
+  }
+  return out;
+}
+const TIME_TICK_FORMAT = {
+  hour: { hour: "2-digit", minute: "2-digit" },
+  day: { day: "numeric", month: "short" },
+  month: { month: "short", year: "2-digit" },
+  year: { year: "numeric" }
+};
+const LINE_WIDTH = 2;
+const STEP_WIDTH = 1.5;
+const BAR_RADIUS = [3, 3, 0, 0];
+function SeriesPlot({
+  model,
+  xAxis,
   series,
   axes = ONE_UNTITLED_AXIS,
   valueFormat,
@@ -73,18 +207,34 @@ function StaticSeriesChart({
   empty,
   animationMs = 0,
   spans,
+  references,
+  markers,
+  onPointClick,
+  tooltip,
   zoom,
   labels: labelsProp,
-  locale,
+  locale: localeProp,
   className
 }) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
-  const number = useDefaultFormat(locale);
-  if (!rows.length || !series.length) {
-    return /* @__PURE__ */ jsx("div", { className: cn("flex w-full items-center justify-center px-2 text-center", height), children: empty !== void 0 ? empty : /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: labels.empty }) });
+  const locale = useKitLocale(localeProp);
+  const number = useDefaultFormat(localeProp);
+  const heightClass = typeof height === "string" ? height : void 0;
+  const heightStyle = typeof height === "number" ? { height } : void 0;
+  if (!model.source.length || !series.length) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex w-full items-center justify-center px-2 text-center", heightClass),
+        style: heightStyle,
+        children: empty !== void 0 ? empty : /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: labels.empty })
+      }
+    );
   }
-  const xKey = x.key ?? "x";
-  const xFormat = x.format ?? number;
+  const x = xAxis;
+  const xKey = model.plotKey;
+  const plotted = model.rows;
+  const rows = model.source;
   const config = Object.fromEntries(
     series.map((entry, index) => [
       entry.key,
@@ -96,134 +246,374 @@ function StaticSeriesChart({
   const onLeft = visible.some((axis) => (axis.orientation ?? "left") === "left");
   const onRight = visible.some((axis) => axis.orientation === "right");
   const margin = {
-    top: 8,
+    // Room for a marker's label over a point at the top of the band.
+    top: markers?.some((marker) => marker.label) ? 22 : 8,
     right: onRight ? 0 : 10,
     left: onLeft ? 0 : 10,
     // Under the ticks, not under the whole axis: whatever comes next owns the gap.
     bottom: x.title ? 18 : 2
   };
-  const fittedX = zoom?.xDomain ?? paddedDomain(rows.map((row) => row[xKey]));
-  const fittedY = (axis) => zoom?.yDomains[axis.id] ?? axis.domain ?? paddedDomain(
-    series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id).flatMap((entry) => rows.map((row) => row[entry.key]))
+  const refs = references ?? [];
+  const xRefs = refs.filter((ref) => ref.axis === "x");
+  const yRefs = refs.filter((ref) => ref.axis !== "x");
+  const xPos = (value) => model.position(value);
+  const fittedX = zoom?.xDomain ?? (model.kind === "category" ? [-0.5, rows.length - 0.5] : padBand(
+    ...extend(
+      void 0,
+      [
+        ...plotted.map((row) => finite(row[xKey])),
+        ...xRefs.map((ref) => xPos(ref.value)),
+        ...(markers ?? []).map((marker) => xPos(marker.x))
+      ]
+    ) ?? [Infinity, -Infinity]
+  ));
+  const timeUnit = model.kind === "time" ? timeTicksWithUnit(fittedX) : void 0;
+  const integerX = model.kind === "number" && (x.integerTicks ?? plotted.every((row) => {
+    const value = finite(row[xKey]);
+    return value === void 0 || Number.isInteger(value);
+  }));
+  const xTicks = resolveTicks(x.tickValues, fittedX, xPos) ?? (model.kind === "category" ? categoryTicks(fittedX, rows.length) : model.kind === "time" ? timeUnit?.ticks : integerX ? integerTicks(fittedX) ?? niceTicks(fittedX) : niceTicks(fittedX));
+  const timeFormat = new Intl.DateTimeFormat(locale, TIME_TICK_FORMAT[timeUnit?.unit ?? "day"]);
+  const dateFormat = new Intl.DateTimeFormat(locale, {
+    dateStyle: "medium",
+    ...timeUnit?.unit === "hour" ? { timeStyle: "short" } : {}
+  });
+  const categoryText = (value) => value instanceof Date ? dateFormat.format(value) : typeof value === "number" ? number(value) : String(value ?? "");
+  const tickAt = (position) => ({
+    value: model.valueAt(position),
+    ...model.kind === "category" ? { index: Math.round(position) } : {},
+    ...timeUnit ? { unit: timeUnit.unit } : {}
+  });
+  const defaultFormat = (position, tick) => model.kind === "category" ? categoryText(tick.value) : model.kind === "time" ? timeFormat.format(position) : number(position);
+  const format = x.format ?? defaultFormat;
+  const xFormat = (position) => format(position, tickAt(position));
+  const label = x.label ?? (model.kind === "time" ? (position) => dateFormat.format(position) : format);
+  const xLabel = (position) => label(position, tickAt(position));
+  const tickAngle = x.ticks === false ? 0 : x.tickAngle ?? 0;
+  const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle);
+  const source = {
+    rows: plotted,
+    series,
+    axes,
+    xKey
+  };
+  const anchored = (axis) => axis.includeZero ?? series.some(
+    (entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id && (entry.type ?? "line") !== "line"
   );
-  return /* @__PURE__ */ jsx(ChartContainer, { config, className: cn("w-full", height, className), children: /* @__PURE__ */ jsxs(LineChart, { data: rows, margin, children: [
-    /* @__PURE__ */ jsx(CartesianGrid, { yAxisId: gridAxis }),
-    /* @__PURE__ */ jsx(
-      XAxis,
-      {
-        dataKey: xKey,
-        type: "number",
-        domain: fittedX ?? ["dataMin", "dataMax"],
-        ticks: niceTicks(fittedX),
-        allowDataOverflow: zoom?.xDomain !== void 0,
-        tickLine: false,
-        axisLine: false,
-        minTickGap: 32,
-        tick: x.ticks === false ? false : void 0,
-        height: x.ticks === false && !x.title ? 4 : void 0,
-        tickFormatter: xFormat,
-        children: x.title && /* @__PURE__ */ jsx(
-          Label,
+  const onAxis = (axisId) => (ref) => (ref.axis ?? DEFAULT_Y_AXIS) === axisId;
+  const fittedY = (axis) => {
+    const own = [
+      ...yRefs.filter(onAxis(axis.id)).map((ref) => finite(ref.value)),
+      ...(markers ?? []).filter(onAxis(axis.id)).map((marker) => finite(marker.y))
+    ];
+    if (anchored(axis)) {
+      if (zoom?.xDomain) return anchoredBand(axisExtent(source, axis.id, zoom.xDomain)) ?? axis.domain;
+      return axis.domain ?? anchoredBand(extend(axisExtent(source, axis.id), own));
+    }
+    return zoom?.yDomains[axis.id] ?? axis.domain ?? padBand(...extend(axisExtent(source, axis.id), own) ?? [Infinity, -Infinity]);
+  };
+  const xOf = (index) => model.kind === "category" ? rows[index][model.sourceKey] : model.valueAt(finite(plotted[index][xKey]) ?? NaN);
+  const hitAt = (index, key) => {
+    const row = rows[index];
+    return row ? { index, row, x: xOf(index), key } : void 0;
+  };
+  const dotFor = (entry) => {
+    const want = entry.dot;
+    if (!want) return false;
+    const color = `var(--color-${entry.key})`;
+    return (props) => {
+      const { cx, cy, index } = props;
+      const value = finite(rows[index]?.[entry.key]);
+      if (value === void 0 || !Number.isFinite(cx) || !Number.isFinite(cy)) return /* @__PURE__ */ jsx("g", {});
+      const point = {
+        key: entry.key,
+        index,
+        row: rows[index],
+        x: xOf(index),
+        value,
+        cx,
+        cy,
+        color
+      };
+      const drawn = want === true ? true : want(point);
+      if (drawn === true) {
+        return /* @__PURE__ */ jsx(
+          "circle",
           {
-            value: x.title,
-            position: "insideBottom",
-            offset: -12,
-            className: "fill-[var(--text-muted)] text-[11px]"
+            className: "recharts-dot",
+            cx,
+            cy,
+            r: 3,
+            fill: color,
+            stroke: "var(--bg-surface)",
+            strokeWidth: 1.5
           }
-        )
+        );
       }
-    ),
-    axes.map((axis) => {
-      const domain = fittedY(axis);
-      return /* @__PURE__ */ jsx(
-        YAxis,
+      if (drawn === false || drawn == null) return /* @__PURE__ */ jsx("g", {});
+      return /* @__PURE__ */ jsx("g", { children: drawn });
+    };
+  };
+  const animation = {
+    isAnimationActive: animationMs > 0,
+    animationDuration: animationMs,
+    animationEasing: "ease-out"
+  };
+  return /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      config,
+      className: cn("w-full", heightClass, className, onPointClick && "cursor-pointer"),
+      style: heightStyle,
+      children: /* @__PURE__ */ jsxs(
+        ComposedChart,
         {
-          yAxisId: axis.id,
-          hide: axis.hide,
-          domain,
-          ticks: niceTicks(domain),
-          allowDataOverflow: zoom?.yDomains[axis.id] !== void 0,
-          orientation: axis.orientation ?? "left",
-          width: axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide),
-          tickLine: false,
-          axisLine: false,
-          tickFormatter: axis.format ?? number,
-          tick: axis.color ? { fill: axis.color } : void 0,
-          children: axis.title && !axis.hide && /* @__PURE__ */ jsx(
-            Label,
-            {
-              value: axis.title,
-              angle: axis.orientation === "right" ? 90 : -90,
-              position: axis.orientation === "right" ? "insideRight" : "insideLeft",
-              style: { textAnchor: "middle", fill: soleSeriesColor(axis, series) },
-              offset: AXIS_TITLE_OFFSET,
-              className: "fill-[var(--text-muted)] text-[11px]"
-            }
-          )
-        },
-        axis.id
-      );
-    }),
-    /* @__PURE__ */ jsx(
-      ChartTooltip,
-      {
-        content: /* @__PURE__ */ jsx(
-          ChartTooltipContent,
-          {
-            labelFormatter: (value) => (x.label ?? xFormat)(Number(value)),
-            valueFormatter: valueFormat ?? number
-          }
-        )
-      }
-    ),
-    series.map((entry) => /* @__PURE__ */ jsx(
-      Line,
-      {
-        yAxisId: entry.axis ?? DEFAULT_Y_AXIS,
-        type: entry.step ? "stepAfter" : "monotone",
-        dataKey: entry.key,
-        stroke: `var(--color-${entry.key})`,
-        strokeWidth: entry.step ? 1.5 : 2,
-        strokeDasharray: strokeDash(
-          entry.step ? STEP_DASH : entry.dash ?? (entry.dashed ? 1 : 0)
-        ),
-        dot: false,
-        connectNulls,
-        isAnimationActive: animationMs > 0,
-        animationDuration: animationMs,
-        animationEasing: "ease-out"
-      },
-      entry.key
-    )),
-    spans?.map((span) => /* @__PURE__ */ jsx(
-      ReferenceLine,
-      {
-        yAxisId: span.axis ?? DEFAULT_Y_AXIS,
-        segment: [
-          { x: span.x, y: span.from },
-          { x: span.x, y: span.to }
-        ],
-        stroke: span.color ?? "var(--text-muted)",
-        strokeWidth: 2,
-        ifOverflow: "discard"
-      },
-      span.key
-    )),
-    zoom?.layer
-  ] }) });
-}
-const SeriesChart = withChartZoom(StaticSeriesChart);
+          data: plotted,
+          margin,
+          stackOffset: "sign",
+          onClick: onPointClick ? (state) => {
+            const index = Number(state?.activeTooltipIndex ?? state?.activeIndex);
+            const hit = Number.isInteger(index) ? hitAt(index) : void 0;
+            if (hit) onPointClick(hit);
+          } : void 0,
+          children: [
+            /* @__PURE__ */ jsx(CartesianGrid, { yAxisId: gridAxis }),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                dataKey: xKey,
+                type: "number",
+                domain: fittedX ?? ["dataMin", "dataMax"],
+                ticks: xTicks,
+                allowDataOverflow: zoom?.xDomain !== void 0 || model.kind === "category",
+                tickLine: false,
+                axisLine: false,
+                minTickGap: 32,
+                tick: x.ticks === false ? false : void 0,
+                ...tickAngle ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" } : {},
+                height: x.ticks === false && !x.title ? 4 : tickBand,
+                tickFormatter: (value) => xFormat(Number(value)),
+                children: x.title && /* @__PURE__ */ jsx(
+                  Label,
+                  {
+                    value: x.title,
+                    position: "insideBottom",
+                    offset: -12,
+                    className: "fill-[var(--text-muted)] text-[11px]"
+                  }
+                )
+              }
+            ),
+            axes.map((axis) => {
+              const domain = fittedY(axis);
+              const zoomed = anchored(axis) ? zoom?.xDomain !== void 0 : zoom?.yDomains[axis.id] !== void 0;
+              return /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  yAxisId: axis.id,
+                  hide: axis.hide,
+                  domain,
+                  ticks: resolveTicks(axis.tickValues, domain, finite) ?? niceTicks(domain),
+                  allowDataOverflow: zoomed,
+                  orientation: axis.orientation ?? "left",
+                  width: axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide),
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: axis.format ?? number,
+                  tick: axis.color ? { fill: axis.color } : void 0,
+                  children: axis.title && !axis.hide && /* @__PURE__ */ jsx(
+                    Label,
+                    {
+                      value: axis.title,
+                      angle: axis.orientation === "right" ? 90 : -90,
+                      position: axis.orientation === "right" ? "insideRight" : "insideLeft",
+                      style: { textAnchor: "middle", fill: soleSeriesColor(axis, series) },
+                      offset: AXIS_TITLE_OFFSET,
+                      className: "fill-[var(--text-muted)] text-[11px]"
+                    }
+                  )
+                },
+                axis.id
+              );
+            }),
+            /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                ...tooltip?.allowEscapeViewBox || tooltip?.boundary ? { allowEscapeViewBox: tooltip.allowEscapeViewBox ?? { x: true } } : {},
+                ...tooltip?.boundary ? { offset: 0 } : {},
+                content: /* @__PURE__ */ jsx(
+                  ChartTooltipContent,
+                  {
+                    labelFormatter: (value) => xLabel(Number(value)),
+                    valueFormatter: valueFormat ?? number,
+                    boundaryRef: tooltip?.boundary
+                  }
+                )
+              }
+            ),
+            series.map((entry) => {
+              const type = entry.type ?? "line";
+              const yAxisId = entry.axis ?? DEFAULT_Y_AXIS;
+              const color = `var(--color-${entry.key})`;
+              const own = entry.dash ?? (entry.dashed ? 1 : 0);
+              const dash = entry.step ? strokeDash(STEP_DASH) : typeof own === "string" ? own : strokeDash(own);
+              const curve = entry.step ? "stepAfter" : entry.curve ?? "monotone";
+              const width = entry.strokeWidth ?? (entry.step ? STEP_WIDTH : LINE_WIDTH);
+              if (type === "bar") {
+                return /* @__PURE__ */ jsx(
+                  Bar,
+                  {
+                    yAxisId,
+                    dataKey: entry.key,
+                    stackId: entry.stack,
+                    fill: color,
+                    fillOpacity: entry.fillOpacity,
+                    radius: entry.stack === void 0 ? BAR_RADIUS : 0,
+                    onClick: onPointClick ? (_bar, index, event) => {
+                      event.stopPropagation();
+                      const hit = hitAt(index, entry.key);
+                      if (hit) onPointClick(hit);
+                    } : void 0,
+                    ...animation
+                  },
+                  entry.key
+                );
+              }
+              if (type === "area") {
+                return /* @__PURE__ */ jsx(
+                  Area,
+                  {
+                    yAxisId,
+                    type: curve,
+                    dataKey: entry.key,
+                    stackId: entry.stack,
+                    stroke: color,
+                    strokeWidth: width,
+                    strokeDasharray: dash,
+                    fill: color,
+                    fillOpacity: entry.fillOpacity ?? (entry.stack !== void 0 ? 0.55 : 0.2),
+                    dot: dotFor(entry),
+                    ...entry.activeDot !== void 0 ? { activeDot: entry.activeDot } : {},
+                    connectNulls,
+                    ...animation
+                  },
+                  entry.key
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                Line,
+                {
+                  yAxisId,
+                  type: curve,
+                  dataKey: entry.key,
+                  stroke: color,
+                  strokeWidth: width,
+                  strokeDasharray: dash,
+                  dot: dotFor(entry),
+                  ...entry.activeDot !== void 0 ? { activeDot: entry.activeDot } : {},
+                  connectNulls,
+                  ...animation
+                },
+                entry.key
+              );
+            }),
+            spans?.map((span) => /* @__PURE__ */ jsx(
+              ReferenceLine,
+              {
+                yAxisId: span.axis ?? DEFAULT_Y_AXIS,
+                segment: [
+                  { x: span.x, y: span.from },
+                  { x: span.x, y: span.to }
+                ],
+                stroke: span.color ?? "var(--text-muted)",
+                strokeWidth: 2,
+                ifOverflow: "discard"
+              },
+              span.key
+            )),
+            refs.map((ref, index) => {
+              const vertical = ref.axis === "x";
+              const at = vertical ? xPos(ref.value) : finite(ref.value);
+              if (at === void 0) return null;
+              const color = ref.color ?? TONE_COLOR[ref.tone ?? "muted"];
+              return /* @__PURE__ */ jsx(
+                ReferenceLine,
+                {
+                  yAxisId: vertical ? gridAxis : ref.axis ?? DEFAULT_Y_AXIS,
+                  ...vertical ? { x: at } : { y: at },
+                  stroke: color,
+                  strokeWidth: 1,
+                  strokeDasharray: strokeDash(ref.dash ?? 1),
+                  ifOverflow: "discard",
+                  label: ref.label ? {
+                    value: ref.label,
+                    position: "insideTopLeft",
+                    fontSize: 10,
+                    fill: color
+                  } : void 0
+                },
+                ref.key ?? `reference-${index}`
+              );
+            }),
+            markers?.map((marker, index) => {
+              const at = xPos(marker.x);
+              if (at === void 0 || finite(marker.y) === void 0) return null;
+              const color = marker.color ?? TONE_COLOR[marker.tone ?? "brand"];
+              return /* @__PURE__ */ jsx(
+                ReferenceDot,
+                {
+                  yAxisId: marker.axis ?? DEFAULT_Y_AXIS,
+                  x: at,
+                  y: marker.y,
+                  r: marker.r ?? 4.5,
+                  fill: color,
+                  stroke: "var(--bg-surface)",
+                  strokeWidth: 1.5,
+                  ifOverflow: "discard",
+                  label: marker.label ? {
+                    value: marker.label,
+                    position: "top",
+                    fontSize: 11,
+                    fontWeight: 600,
+                    fill: "var(--text-primary)"
+                  } : void 0
+                },
+                marker.key ?? `marker-${index}`
+              );
+            }),
+            zoom?.layer
+          ]
+        }
+      )
+    }
+  );
+}
+const ZoomablePlot = withChartZoom(SeriesPlot);
+function plotProps(props) {
+  const x = props.x ?? {};
+  const model = xModel(props.rows, x);
+  return { ...props, rows: model.rows, x: { key: model.plotKey }, model, xAxis: x };
+}
+function StaticSeriesChart(props) {
+  return /* @__PURE__ */ jsx(SeriesPlot, { ...plotProps(props) });
+}
+function SeriesChart(props) {
+  return /* @__PURE__ */ jsx(ZoomablePlot, { ...plotProps(props) });
+}
 export {
   AXIS_TICK_WIDTH,
   AXIS_TITLE_STRIP,
   SeriesChart,
   StaticSeriesChart,
+  anchoredBand,
   axisBandWidth,
   mergeSeries,
   oneAxis,
   padBand,
   paddedDomain,
   seriesKey,
-  soleSeriesColor
+  seriesLegendEntries,
+  soleSeriesColor,
+  visibleSeries
 };
 //# sourceMappingURL=series-chart.js.map