origam 2.3.0 → 2.5.0

package/dist/src/composables/Chart/chart.composable.js

@@ -0,0 +1,829 @@
+import {
+  computed,
+  ref
+} from "vue";
+import { CHART_STACKING } from "../../enums/index.js";
+import {
+  arcPath,
+  areaPath,
+  linePath,
+  monotonePath,
+  pathLength as computePathLength,
+  steppedPathLength,
+  polarToCartesian,
+  polygonPath,
+  smoothPath,
+  steppedPath
+} from "../../utils/Chart/path.util.js";
+import { CHART_Y_TICK_COUNT } from "../../consts/Chart/chart.const.js";
+import { intentBgExpr, isIntent } from "../../utils/Commons/color.util.js";
+const DEFAULT_PALETTE = [
+  "primary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "secondary",
+  "ghost",
+  "neutral"
+];
+const resolveColor = (raw) => {
+  if (!raw) return "currentColor";
+  if (/^(#|rgb|hsl|var|currentColor|transparent|linear-gradient|radial-gradient|conic-gradient)/i.test(raw)) {
+    return raw;
+  }
+  if (isIntent(raw)) {
+    return intentBgExpr(raw, "default");
+  }
+  return "currentColor";
+};
+const dashArray = (dash) => {
+  if (dash === "dotted") return "2 4";
+  if (dash === "solid") return "none";
+  return "6 4";
+};
+const resolveCategoryX = (value, categories, plotX0, plotX1) => {
+  const idx = typeof value === "string" ? categories.indexOf(value) : value;
+  const slots = Math.max(1, categories.length);
+  if (slots === 1) return (plotX0 + plotX1) / 2;
+  const clamped = Math.max(0, Math.min(slots - 1, idx));
+  return plotX0 + clamped / (slots - 1) * (plotX1 - plotX0);
+};
+export const computePlotBandGeometry = (band, scales, categories, plotX0, plotX1, plotY0, plotY1) => {
+  const axis = band.axis ?? "y";
+  const fill = resolveColor(band.color ?? "warning");
+  const opacity = band.opacity ?? 0.15;
+  const labelColor = resolveColor(band.labelColor ?? void 0);
+  if (axis === "y") {
+    const fromPx2 = scales.y(Number(band.from));
+    const toPx2 = scales.y(Number(band.to));
+    const top = Math.min(fromPx2, toPx2);
+    const bot = Math.max(fromPx2, toPx2);
+    const clampedTop = Math.max(plotY0, Math.min(plotY1, top));
+    const clampedBot = Math.max(plotY0, Math.min(plotY1, bot));
+    const h = clampedBot - clampedTop;
+    if (h <= 0) return null;
+    return {
+      x: plotX0,
+      y: clampedTop,
+      width: plotX1 - plotX0,
+      height: h,
+      fill,
+      opacity,
+      label: band.label,
+      labelX: (plotX0 + plotX1) / 2,
+      labelY: clampedTop + h / 2,
+      labelColor
+    };
+  }
+  const fromPx = resolveCategoryX(band.from, categories, plotX0, plotX1);
+  const toPx = resolveCategoryX(band.to, categories, plotX0, plotX1);
+  const left = Math.min(fromPx, toPx);
+  const right = Math.max(fromPx, toPx);
+  const clampedLeft = Math.max(plotX0, Math.min(plotX1, left));
+  const clampedRight = Math.max(plotX0, Math.min(plotX1, right));
+  const w = clampedRight - clampedLeft;
+  if (w <= 0) return null;
+  return {
+    x: clampedLeft,
+    y: plotY0,
+    width: w,
+    height: plotY1 - plotY0,
+    fill,
+    opacity,
+    label: band.label,
+    labelX: clampedLeft + w / 2,
+    labelY: (plotY0 + plotY1) / 2,
+    labelColor
+  };
+};
+export const computePlotLineGeometry = (line, scales, categories, plotX0, plotX1, plotY0, plotY1) => {
+  const axis = line.axis ?? "y";
+  const stroke = resolveColor(line.color ?? "danger");
+  const strokeWidth = line.width ?? 1.5;
+  const strokeDasharray = dashArray(line.dash);
+  if (axis === "y") {
+    const py = scales.y(Number(line.value));
+    if (py < plotY0 || py > plotY1) return null;
+    const isRight = (line.labelAlign ?? "right") === "right";
+    return {
+      x1: plotX0,
+      y1: py,
+      x2: plotX1,
+      y2: py,
+      stroke,
+      strokeWidth,
+      strokeDasharray,
+      label: line.label,
+      labelX: isRight ? plotX1 : plotX0,
+      labelY: py - 4,
+      labelAnchor: isRight ? "end" : "start"
+    };
+  }
+  const px = resolveCategoryX(line.value, categories, plotX0, plotX1);
+  if (px < plotX0 || px > plotX1) return null;
+  return {
+    x1: px,
+    y1: plotY0,
+    x2: px,
+    y2: plotY1,
+    stroke,
+    strokeWidth,
+    strokeDasharray,
+    label: line.label,
+    labelX: px + 4,
+    labelY: plotY0 + 12,
+    labelAnchor: "start"
+  };
+};
+const arrowheadPoints = (tx, ty, hx, hy, size) => {
+  const angle = Math.atan2(hy - ty, hx - tx);
+  const spread = Math.PI / 5;
+  const left = angle + Math.PI - spread;
+  const right = angle + Math.PI + spread;
+  const lx = hx + size * Math.cos(left);
+  const ly = hy + size * Math.sin(left);
+  const rx = hx + size * Math.cos(right);
+  const ry = hy + size * Math.sin(right);
+  return `${hx.toFixed(2)},${hy.toFixed(2)} ${lx.toFixed(2)},${ly.toFixed(2)} ${rx.toFixed(2)},${ry.toFixed(2)}`;
+};
+export const computeAnnotationGeometry = (anno, scales, categories, categoryCount) => {
+  const stroke = resolveColor(anno.color ?? "primary");
+  const strokeWidth = anno.width ?? 1.5;
+  const dx = anno.dx ?? 0;
+  const dy = anno.dy ?? -14;
+  const radius = anno.radius ?? 12;
+  const ax = scales.x(anno.x, typeof anno.x === "number" ? anno.x : categories.indexOf(anno.x), categoryCount);
+  const ay = scales.y(anno.y);
+  const bxRaw = anno.x2 !== void 0 ? anno.x2 : anno.x;
+  const byRaw = anno.y2 !== void 0 ? anno.y2 : anno.y;
+  const bx = scales.x(bxRaw, typeof bxRaw === "number" ? bxRaw : categories.indexOf(bxRaw), categoryCount);
+  const by = scales.y(byRaw);
+  if (!Number.isFinite(ax) || !Number.isFinite(ay)) return null;
+  const base = {
+    kind: anno.kind,
+    stroke,
+    strokeWidth,
+    ax,
+    ay,
+    bx: Number.isFinite(bx) ? bx : ax,
+    by: Number.isFinite(by) ? by : ay,
+    dx,
+    dy,
+    radius,
+    text: anno.text
+  };
+  if (anno.kind === "arrow") {
+    const size = Math.max(6, strokeWidth * 4);
+    return {
+      ...base,
+      arrowPoints: arrowheadPoints(ax, ay, base.bx, base.by, size)
+    };
+  }
+  if (anno.kind === "label") {
+    const text = anno.text ?? "";
+    const charWidth = 7;
+    const padding = 8;
+    const boxW = Math.max(48, text.length * charWidth + padding * 2);
+    const boxH = 24;
+    const calloutX = ax + dx - boxW / 2;
+    const calloutY = ay + dy - boxH;
+    return {
+      ...base,
+      callout: { x: calloutX, y: calloutY, width: boxW, height: boxH },
+      leaderEnd: { x: ax + dx, y: calloutY + boxH }
+    };
+  }
+  return base;
+};
+const toPoints = (series) => {
+  if (!series.data?.length) return [];
+  return series.data.map((entry, i) => {
+    if (typeof entry === "number") {
+      return { x: i, y: entry, dataIndex: i };
+    }
+    return { x: entry.x, y: entry.y, z: entry.z, dataIndex: i };
+  });
+};
+const computeYRange = (series, stacked, stacking, yMinOverride, yMaxOverride) => {
+  const visible = series.filter((s) => s.visible !== false);
+  if (!visible.length) return { min: 0, max: 1 };
+  if (stacked && stacking === CHART_STACKING.PERCENT) {
+    return { min: 0, max: 100 };
+  }
+  if (stacked) {
+    const dataLengths = visible.map((s) => s.data.length);
+    const maxLength = Math.max(...dataLengths);
+    let stackMax = 0;
+    let stackMin = 0;
+    for (let i = 0; i < maxLength; i++) {
+      let positive = 0;
+      let negative = 0;
+      for (const s of visible) {
+        const entry = s.data[i];
+        const y = typeof entry === "number" ? entry : entry?.y ?? 0;
+        if (y >= 0) positive += y;
+        else negative += y;
+      }
+      stackMax = Math.max(stackMax, positive);
+      stackMin = Math.min(stackMin, negative);
+    }
+    return {
+      min: yMinOverride ?? stackMin,
+      max: yMaxOverride ?? stackMax
+    };
+  }
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (const s of visible) {
+    for (const entry of s.data) {
+      const y = typeof entry === "number" ? entry : entry.y;
+      if (y < min) min = y;
+      if (y > max) max = y;
+    }
+  }
+  if (!Number.isFinite(min)) min = 0;
+  if (!Number.isFinite(max)) max = 1;
+  if (min === max) {
+    max = min + 1;
+  }
+  return {
+    min: yMinOverride ?? Math.min(0, min),
+    max: yMaxOverride ?? max
+  };
+};
+const niceStep = (range, count) => {
+  if (range <= 0 || count <= 0) return 1;
+  const rough = range / count;
+  const pow10 = Math.pow(10, Math.floor(Math.log10(rough)));
+  const norm = rough / pow10;
+  let nice;
+  if (norm < 1.5) nice = 1;
+  else if (norm < 3) nice = 2;
+  else if (norm < 7) nice = 5;
+  else nice = 10;
+  return nice * pow10;
+};
+export const useChart = (options) => {
+  const hover = ref(null);
+  const padding = computed(() => options.padding());
+  const width = computed(() => options.width());
+  const height = computed(() => options.height());
+  const viewBox = computed(
+    () => `0 0 ${width.value} ${height.value}`
+  );
+  const plot = computed(() => {
+    const pad = padding.value;
+    return {
+      x0: pad.left,
+      y0: pad.top,
+      x1: width.value - pad.right,
+      y1: height.value - pad.bottom,
+      cx: (pad.left + width.value - pad.right) / 2,
+      cy: (pad.top + height.value - pad.bottom) / 2
+    };
+  });
+  const effectiveStacking = computed(
+    () => options.stacking?.() ?? CHART_STACKING.NORMAL
+  );
+  const yRange = computed(
+    () => computeYRange(
+      options.series().filter((s) => (s.yAxis ?? 0) === 0),
+      options.stacked(),
+      effectiveStacking.value,
+      options.yMin(),
+      options.yMax()
+    )
+  );
+  const secondaryYRange = computed(() => {
+    const secondary = options.secondaryYAxis?.();
+    const axis1Series = options.series().filter((s) => (s.yAxis ?? 0) === 1 && s.visible !== false);
+    if (!axis1Series.length && !secondary) return { min: 0, max: 1 };
+    return computeYRange(
+      axis1Series,
+      false,
+      CHART_STACKING.NORMAL,
+      secondary?.min,
+      secondary?.max
+    );
+  });
+  const categories = computed(() => options.categories());
+  const scales = computed(() => {
+    const { x0, x1, y0, y1 } = plot.value;
+    const { min, max } = yRange.value;
+    const cats = categories.value;
+    const yPxPerUnit = (y1 - y0) / Math.max(1e-9, max - min);
+    const x = (value, dataIndex, categoryCount) => {
+      if (typeof value === "number" && !cats.length) {
+        const count = categoryCount ?? Math.max(1, dataIndex ?? 0);
+        if (count <= 1) return x0;
+        return x0 + value / (count - 1) * (x1 - x0);
+      }
+      const idx = typeof value === "string" ? cats.indexOf(value) : dataIndex ?? 0;
+      const slots = Math.max(1, cats.length || (categoryCount ?? 1));
+      if (slots === 1) return (x0 + x1) / 2;
+      return x0 + idx / (slots - 1) * (x1 - x0);
+    };
+    const y = (value) => {
+      const px = y1 - (value - min) * yPxPerUnit;
+      if (px < y0) return y0;
+      if (px > y1) return y1;
+      return px;
+    };
+    return { x, y };
+  });
+  const scaleY1 = computed(() => {
+    const { y0, y1 } = plot.value;
+    const { min, max } = secondaryYRange.value;
+    const yPxPerUnit = (y1 - y0) / Math.max(1e-9, max - min);
+    return (value) => {
+      const px = y1 - (value - min) * yPxPerUnit;
+      if (px < y0) return y0;
+      if (px > y1) return y1;
+      return px;
+    };
+  });
+  const ticks = computed(() => {
+    const isPercentMode = options.stacked() && effectiveStacking.value === CHART_STACKING.PERCENT;
+    let niceMin;
+    let niceMax;
+    let step;
+    if (isPercentMode) {
+      niceMin = 0;
+      niceMax = 100;
+      step = 25;
+    } else {
+      const { min, max } = yRange.value;
+      step = niceStep(max - min, CHART_Y_TICK_COUNT);
+      niceMin = Math.floor(min / step) * step;
+      niceMax = Math.ceil(max / step) * step;
+    }
+    const cats = categories.value;
+    const allSeries = options.series();
+    const isBarMode = options.type() === "bar" || allSeries.some((s) => s.type === "bar");
+    const valueTicks = [];
+    for (let v = niceMin; v <= niceMax + 1e-9; v += step) {
+      const label = isPercentMode ? `${Math.round(v)}%` : String(Math.round(v * 1e3) / 1e3);
+      valueTicks.push({
+        value: v,
+        label,
+        position: isBarMode ? (() => {
+          const { x0, x1 } = plot.value;
+          const range = Math.max(1e-9, niceMax - niceMin);
+          const ratio = (v - niceMin) / range;
+          return x0 + ratio * (x1 - x0);
+        })() : scales.value.y(v)
+      });
+    }
+    const categoryTicks = cats.length ? cats.map((cat, i) => ({
+      value: cat,
+      label: cat,
+      position: isBarMode ? (() => {
+        const { y0, y1 } = plot.value;
+        const slotPx = (y1 - y0) / Math.max(1, cats.length);
+        return y0 + (i + 0.5) * slotPx;
+      })() : scales.value.x(cat, i, cats.length)
+    })) : [];
+    return isBarMode ? { x: valueTicks, y: categoryTicks } : { x: categoryTicks, y: valueTicks };
+  });
+  const secondaryTicks = computed(() => {
+    const secondary = options.secondaryYAxis?.();
+    const axis1Series = options.series().filter((s) => (s.yAxis ?? 0) === 1 && s.visible !== false);
+    const allSeries = options.series();
+    const isBarMode = options.type() === "bar" || allSeries.some((s) => s.type === "bar");
+    if (isBarMode) return [];
+    if (!secondary && !axis1Series.length) return [];
+    const { min, max } = secondaryYRange.value;
+    const step = niceStep(max - min, CHART_Y_TICK_COUNT);
+    const niceMin = Math.floor(min / step) * step;
+    const niceMax = Math.ceil(max / step) * step;
+    const out = [];
+    for (let v = niceMin; v <= niceMax + 1e-9; v += step) {
+      out.push({
+        value: v,
+        label: String(Math.round(v * 1e3) / 1e3),
+        position: scaleY1.value(v)
+      });
+    }
+    return out;
+  });
+  const colorFor = (series, index) => {
+    if (series.color) return resolveColor(series.color);
+    const scheme = options.colorScheme();
+    const palette = scheme.length ? scheme : DEFAULT_PALETTE;
+    return resolveColor(palette[index % palette.length]);
+  };
+  const legend = computed(() => {
+    const allSeries = options.series();
+    const pieSeriesList = allSeries.filter((s) => effectiveType(s) === "pie" || effectiveType(s) === "donut");
+    const cats = options.categories();
+    const scheme = options.colorScheme().length ? options.colorScheme() : DEFAULT_PALETTE;
+    const hidden = options.hiddenLabels?.() ?? /* @__PURE__ */ new Set();
+    if (pieSeriesList.length === 1 && pieSeriesList[0].data.length > 1) {
+      const s = pieSeriesList[0];
+      const data = s.data;
+      return data.map((entry, i) => {
+        const label = cats[i] ?? (typeof entry === "object" && entry !== null ? String(entry.x) : `Slice ${i + 1}`);
+        const labelStr = String(label);
+        const sliceSeries = {
+          ...s,
+          name: labelStr,
+          data: [entry],
+          visible: !hidden.has(labelStr)
+        };
+        return {
+          series: sliceSeries,
+          index: i,
+          color: s.color ? resolveColor(s.color) : resolveColor(scheme[i % scheme.length]),
+          visible: !hidden.has(labelStr)
+        };
+      });
+    }
+    return allSeries.map((series, index) => ({
+      series,
+      index,
+      color: colorFor(series, index),
+      visible: series.visible !== false
+    }));
+  });
+  const slotCount = computed(() => {
+    const cats = categories.value;
+    if (cats.length) return cats.length;
+    let max = 0;
+    for (const s of options.series()) {
+      if (s.data.length > max) max = s.data.length;
+    }
+    return Math.max(1, max);
+  });
+  const effectiveType = (series) => series.type ?? options.type();
+  const stackOffsets = computed(() => {
+    const offsets = /* @__PURE__ */ new Map();
+    if (!options.stacked()) return offsets;
+    const isPercent = effectiveStacking.value === CHART_STACKING.PERCENT;
+    const visible = options.series().map((s, i) => ({ s, i })).filter(({ s }) => s.visible !== false);
+    const length = Math.max(...visible.map(({ s }) => s.data.length), 0);
+    if (isPercent) {
+      for (let dataIdx = 0; dataIdx < length; dataIdx++) {
+        let total = 0;
+        for (const { s } of visible) {
+          const entry = s.data[dataIdx];
+          const y = typeof entry === "number" ? entry : entry?.y ?? 0;
+          if (y > 0) total += y;
+        }
+        const safeTot = total || 1;
+        let runningPct = 0;
+        for (const { s, i } of visible) {
+          const entry = s.data[dataIdx];
+          const y = typeof entry === "number" ? entry : entry?.y ?? 0;
+          if (!offsets.has(i)) offsets.set(i, []);
+          offsets.get(i)[dataIdx] = runningPct;
+          if (y > 0) runningPct += y / safeTot * 100;
+        }
+      }
+    } else {
+      for (let dataIdx = 0; dataIdx < length; dataIdx++) {
+        let runningPositive = 0;
+        let runningNegative = 0;
+        for (const { s, i } of visible) {
+          const entry = s.data[dataIdx];
+          const y = typeof entry === "number" ? entry : entry?.y ?? 0;
+          if (!offsets.has(i)) offsets.set(i, []);
+          offsets.get(i)[dataIdx] = y >= 0 ? runningPositive : runningNegative;
+          if (y >= 0) runningPositive += y;
+          else runningNegative += y;
+        }
+      }
+    }
+    return offsets;
+  });
+  const percentValues = computed(() => {
+    const pctMap = /* @__PURE__ */ new Map();
+    if (!options.stacked() || effectiveStacking.value !== CHART_STACKING.PERCENT) return pctMap;
+    const visible = options.series().map((s, i) => ({ s, i })).filter(({ s }) => s.visible !== false);
+    const length = Math.max(...visible.map(({ s }) => s.data.length), 0);
+    for (let dataIdx = 0; dataIdx < length; dataIdx++) {
+      let total = 0;
+      for (const { s } of visible) {
+        const entry = s.data[dataIdx];
+        const y = typeof entry === "number" ? entry : entry?.y ?? 0;
+        if (y > 0) total += y;
+      }
+      const safeTot = total || 1;
+      for (const { s, i } of visible) {
+        const entry = s.data[dataIdx];
+        const y = typeof entry === "number" ? entry : entry?.y ?? 0;
+        if (!pctMap.has(i)) pctMap.set(i, []);
+        pctMap.get(i)[dataIdx] = y > 0 ? y / safeTot * 100 : 0;
+      }
+    }
+    return pctMap;
+  });
+  const pieTotal = computed(() => {
+    const first = options.series()[0];
+    if (!first) return 0;
+    let total = 0;
+    for (const entry of first.data) {
+      const y = typeof entry === "number" ? entry : entry.y;
+      if (y > 0) total += y;
+    }
+    return total;
+  });
+  const paths = computed(() => {
+    const out = [];
+    const series = options.series();
+    const cats = categories.value;
+    const { x0, x1, y0, y1, cx, cy } = plot.value;
+    const baseline = scales.value.y(Math.max(0, yRange.value.min));
+    const smoothing = options.smoothing();
+    const pieSeriesList = series.filter((s) => effectiveType(s) === "pie" || effectiveType(s) === "donut");
+    if (pieSeriesList.length > 0) {
+      const outerR = Math.max(10, Math.min(x1 - x0, y1 - y0) / 2 - 4);
+      const isDonut = effectiveType(pieSeriesList[0]) === "donut";
+      const baseInner = isDonut ? outerR * options.donutHoleSize() : 0;
+      const scheme = options.colorScheme().length ? options.colorScheme() : DEFAULT_PALETTE;
+      const visibleSeries = pieSeriesList.filter((s) => s.visible !== false);
+      if (visibleSeries.length === 0) return out;
+      const bandThickness = (outerR - baseInner) / visibleSeries.length;
+      const hidden = options.hiddenLabels?.() ?? /* @__PURE__ */ new Set();
+      const cats2 = options.categories();
+      const isSingleRing = visibleSeries.length === 1;
+      const categoryColor = (dataIdx, fallbackSeries) => {
+        if (fallbackSeries.color) return resolveColor(fallbackSeries.color);
+        return resolveColor(scheme[dataIdx % scheme.length]);
+      };
+      const labelFor = (i, entry) => {
+        if (cats2[i] != null) return String(cats2[i]);
+        if (entry != null && typeof entry === "object") return String(entry.x);
+        return `Slice ${i + 1}`;
+      };
+      for (let ringIdx = 0; ringIdx < visibleSeries.length; ringIdx++) {
+        const s = visibleSeries[ringIdx];
+        const ringInner = baseInner + bandThickness * ringIdx;
+        const ringOuter = baseInner + bandThickness * (ringIdx + 1);
+        const data = s.data;
+        const ringTotal = data.reduce((acc, entry, i) => {
+          if (isSingleRing && hidden.has(labelFor(i, entry))) return acc;
+          const v = typeof entry === "number" ? entry : entry?.y ?? 0;
+          return acc + (Number.isFinite(v) && v > 0 ? v : 0);
+        }, 0);
+        if (ringTotal === 0) continue;
+        let angle = 0;
+        for (let i = 0; i < data.length; i++) {
+          const entry = data[i];
+          if (isSingleRing && hidden.has(labelFor(i, entry))) continue;
+          const v = typeof entry === "number" ? entry : entry?.y ?? 0;
+          if (!Number.isFinite(v) || v <= 0) continue;
+          const sweep = v / ringTotal * Math.PI * 2;
+          const endAngle = angle + sweep;
+          out.push({
+            seriesIndex: series.indexOf(s),
+            kind: "path",
+            d: arcPath(cx, cy, ringOuter, ringInner, angle, endAngle),
+            color: categoryColor(i, s),
+            series: s,
+            dataIndex: i
+          });
+          angle = endAngle;
+        }
+      }
+      return out;
+    }
+    for (let seriesIdx = 0; seriesIdx < series.length; seriesIdx++) {
+      const s = series[seriesIdx];
+      if (s.visible === false) continue;
+      const color = colorFor(s, seriesIdx);
+      const kind = effectiveType(s);
+      const normalised = toPoints(s);
+      const seriesAxisIndex = s.yAxis ?? 0;
+      const yFn = seriesAxisIndex === 1 ? scaleY1.value : scales.value.y;
+      const seriesRange = seriesAxisIndex === 1 ? secondaryYRange.value : yRange.value;
+      const seriesBaseline = yFn(Math.max(0, seriesRange.min));
+      if (kind === "line" || kind === "area" || kind === "spline" || kind === "stepped-line") {
+        const pts = normalised.map((p) => [
+          scales.value.x(p.x, p.dataIndex, slotCount.value),
+          yFn(p.y)
+        ]);
+        const effectiveSmoothing = kind === "spline" && smoothing === "none" ? "monotone" : smoothing;
+        let dLine;
+        let areaMode = false;
+        if (kind === "stepped-line") {
+          dLine = steppedPath(pts);
+          areaMode = "stepped";
+        } else if (effectiveSmoothing === "monotone") {
+          dLine = monotonePath(pts);
+          areaMode = "monotone";
+        } else if (effectiveSmoothing === "curve") {
+          dLine = smoothPath(pts);
+          areaMode = true;
+        } else {
+          dLine = linePath(pts);
+          areaMode = false;
+        }
+        const length = kind === "stepped-line" ? steppedPathLength(pts) : computePathLength(pts);
+        if (kind === "area") {
+          out.push({
+            seriesIndex: seriesIdx,
+            kind: "path",
+            d: areaPath(pts, seriesBaseline, areaMode),
+            color,
+            series: s,
+            pathLength: length,
+            variant: "fill"
+          });
+        }
+        out.push({
+          seriesIndex: seriesIdx,
+          kind: "path",
+          d: dLine,
+          color,
+          series: s,
+          pathLength: length,
+          variant: kind === "area" ? "stroke" : void 0
+        });
+        {
+          for (let dataIdx = 0; dataIdx < pts.length; dataIdx++) {
+            out.push({
+              seriesIndex: seriesIdx,
+              kind: "circle",
+              circle: { cx: pts[dataIdx][0], cy: pts[dataIdx][1], r: 4 },
+              color,
+              series: s,
+              dataIndex: dataIdx
+            });
+          }
+        }
+        continue;
+      }
+      if (kind === "bar" || kind === "column") {
+        const visibleCount = series.filter((other) => other.visible !== false).length;
+        const groupCount = slotCount.value;
+        const slotPx = kind === "column" ? (x1 - x0) / Math.max(1, groupCount) : (y1 - y0) / Math.max(1, groupCount);
+        const stacked = options.stacked();
+        const isPercent = stacked && effectiveStacking.value === CHART_STACKING.PERCENT;
+        const visibleIdxInGroup = series.slice(0, seriesIdx).filter((other) => other.visible !== false).length;
+        const stackOff = stackOffsets.value.get(seriesIdx) ?? [];
+        const horizRange = yRange.value;
+        const horizSpan = Math.max(1e-9, horizRange.max - horizRange.min);
+        const xValuePx = (v) => {
+          const ratio = (v - horizRange.min) / horizSpan;
+          const px = x0 + ratio * (x1 - x0);
+          if (px < x0) return x0;
+          if (px > x1) return x1;
+          return px;
+        };
+        for (let dataIdx = 0; dataIdx < normalised.length; dataIdx++) {
+          const p = normalised[dataIdx];
+          const renderY = isPercent ? percentValues.value.get(seriesIdx)?.[dataIdx] ?? 0 : p.y;
+          if (kind === "column") {
+            const centerX = x0 + (dataIdx + 0.5) * slotPx;
+            const barWidth = stacked ? slotPx * 0.7 : slotPx * 0.7 / Math.max(1, visibleCount);
+            const left = stacked ? centerX - barWidth / 2 : centerX - slotPx * 0.7 / 2 + visibleIdxInGroup * barWidth;
+            const offset = stacked ? stackOff[dataIdx] ?? 0 : 0;
+            const top = yFn(renderY + offset);
+            const base = yFn(offset);
+            out.push({
+              seriesIndex: seriesIdx,
+              kind: "rect",
+              rect: {
+                x: left,
+                y: Math.min(top, base),
+                width: barWidth,
+                height: Math.abs(base - top)
+              },
+              color,
+              series: s,
+              dataIndex: dataIdx
+            });
+          } else {
+            const slots = Math.max(1, groupCount);
+            const slotCenterY = slots === 1 ? (y0 + y1) / 2 : y0 + (dataIdx + 0.5) * slotPx;
+            const barHeight = stacked ? slotPx * 0.7 : slotPx * 0.7 / Math.max(1, visibleCount);
+            const top = stacked ? slotCenterY - barHeight / 2 : slotCenterY - slotPx * 0.7 / 2 + visibleIdxInGroup * barHeight;
+            const offset = stacked ? stackOff[dataIdx] ?? 0 : 0;
+            const rightPx = xValuePx(renderY + offset);
+            const basePx = xValuePx(offset);
+            out.push({
+              seriesIndex: seriesIdx,
+              kind: "rect",
+              rect: {
+                x: Math.min(rightPx, basePx),
+                y: top,
+                width: Math.abs(rightPx - basePx),
+                height: barHeight
+              },
+              color,
+              series: s,
+              dataIndex: dataIdx
+            });
+          }
+        }
+        continue;
+      }
+      if (kind === "scatter") {
+        const SCATTER_DEFAULT_R = 5;
+        const SCATTER_MIN_R = 5;
+        const SCATTER_MAX_R = 36;
+        const scatterSeries = series.filter((other) => effectiveType(other) === "scatter" && other.visible !== false);
+        let xMin = Infinity;
+        let xMax = -Infinity;
+        let zMin = Infinity;
+        let zMax = -Infinity;
+        let hasZ = false;
+        for (const sp of scatterSeries) {
+          for (const entry of sp.data) {
+            const xv = typeof entry === "number" ? entry : entry.x;
+            const x = typeof xv === "number" ? xv : 0;
+            if (x < xMin) xMin = x;
+            if (x > xMax) xMax = x;
+            if (typeof entry !== "number" && typeof entry.z === "number" && Number.isFinite(entry.z)) {
+              hasZ = true;
+              if (entry.z < zMin) zMin = entry.z;
+              if (entry.z > zMax) zMax = entry.z;
+            }
+          }
+        }
+        const xSpan = Math.max(1e-9, xMax - xMin);
+        const xPx = (v) => {
+          const ratio = (v - xMin) / xSpan;
+          const px = x0 + ratio * (x1 - x0);
+          if (px < x0) return x0;
+          if (px > x1) return x1;
+          return px;
+        };
+        const zSpan = Math.max(1e-9, zMax - zMin);
+        const radiusFor = (z) => {
+          if (!hasZ || typeof z !== "number" || !Number.isFinite(z)) return SCATTER_DEFAULT_R;
+          const ratio = zSpan === 0 ? 0.5 : (z - zMin) / zSpan;
+          return SCATTER_MIN_R + ratio * (SCATTER_MAX_R - SCATTER_MIN_R);
+        };
+        for (let dataIdx = 0; dataIdx < normalised.length; dataIdx++) {
+          const p = normalised[dataIdx];
+          const cxRaw = typeof p.x === "number" ? p.x : Number(p.x);
+          out.push({
+            seriesIndex: seriesIdx,
+            kind: "circle",
+            circle: {
+              cx: xPx(Number.isFinite(cxRaw) ? cxRaw : 0),
+              cy: yFn(p.y),
+              r: radiusFor(p.z)
+            },
+            color,
+            series: s,
+            dataIndex: dataIdx
+          });
+        }
+        continue;
+      }
+      if (kind === "radar") {
+        const axes = Math.max(cats.length, normalised.length);
+        if (!axes) continue;
+        const radius = Math.max(10, Math.min(x1 - x0, y1 - y0) / 2 - 8);
+        const pts = normalised.map((p, i) => {
+          const yRangeSize = Math.max(1e-9, yRange.value.max - yRange.value.min);
+          const ratio = (p.y - yRange.value.min) / yRangeSize;
+          const angle = i / axes * Math.PI * 2;
+          return polarToCartesian(cx, cy, radius * ratio, angle);
+        });
+        out.push({
+          seriesIndex: seriesIdx,
+          kind: "polygon",
+          d: polygonPath(pts),
+          color,
+          series: s
+        });
+        for (let i = 0; i < pts.length; i++) {
+          out.push({
+            seriesIndex: seriesIdx,
+            kind: "circle",
+            circle: { cx: pts[i][0], cy: pts[i][1], r: 3.5 },
+            color,
+            series: s,
+            dataIndex: i
+          });
+        }
+      }
+    }
+    return out;
+  });
+  const onPointHover = (point) => {
+    hover.value = point;
+  };
+  return {
+    viewBox,
+    scales,
+    ticks,
+    secondaryTicks,
+    paths,
+    legend,
+    hover,
+    onPointHover,
+    plot,
+    yRange,
+    secondaryYRange,
+    slotCount,
+    colorFor,
+    effectiveType,
+    effectiveStacking,
+    percentValues
+  };
+};