origam 2.3.0 → 2.5.0

package/dist/src/utils/Chart/box-plot.util.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Tukey five-number summary computation with 1.5·IQR outlier detection.
+ *
+ * Algorithm:
+ *  1. Sort samples ascending.
+ *  2. Compute Q1 and Q3 via linear interpolation at the 25th and 75th
+ *     percentile positions (same as PERCENTILE.INC in Excel / numpy).
+ *  3. Compute IQR = Q3 − Q1.
+ *  4. Lower fence = Q1 − 1.5·IQR; upper fence = Q3 + 1.5·IQR.
+ *  5. Whisker min = smallest sample >= lower fence.
+ *     Whisker max = largest sample <= upper fence.
+ *  6. Outliers = samples outside [lower fence, upper fence].
+ */
+import type { IBoxPlotStats } from '../../interfaces/Chart/chart-box-plot.interface';
+export type { IBoxPlotStats };
+/**
+ * Computes the five-number Tukey summary for the given sample array.
+ *
+ * @param samples - Array of numeric observations (need not be sorted,
+ *   may be empty).
+ * @returns Statistical summary with whisker bounds and outlier list.
+ */
+export declare function computeQuartiles(samples: Array<number>): IBoxPlotStats;
+/**
+ * Returns `true` if the given datum is a raw-samples datum (has a
+ * `samples` array property rather than pre-aggregated stats).
+ */
+export declare function isRawDatum(datum: unknown): datum is {
+    category: string;
+    samples: Array<number>;
+    color?: string;
+};

package/dist/src/utils/Chart/box-plot.util.js

@@ -0,0 +1,47 @@
+const interpolate = (sorted, p) => {
+  const n = sorted.length;
+  if (n === 0) return 0;
+  if (n === 1) return sorted[0];
+  const pos = p * (n - 1);
+  const lo = Math.floor(pos);
+  const hi = Math.ceil(pos);
+  const frac = pos - lo;
+  if (lo === hi) return sorted[lo];
+  return sorted[lo] + frac * (sorted[hi] - sorted[lo]);
+};
+export function computeQuartiles(samples) {
+  const finite = samples.filter((v) => Number.isFinite(v));
+  if (finite.length === 0) {
+    return { min: 0, q1: 0, median: 0, q3: 0, max: 0, iqr: 0, outliers: [] };
+  }
+  const sorted = [...finite].sort((a, b) => a - b);
+  const q1 = interpolate(sorted, 0.25);
+  const median = interpolate(sorted, 0.5);
+  const q3 = interpolate(sorted, 0.75);
+  const iqr = q3 - q1;
+  const lowerFence = q1 - 1.5 * iqr;
+  const upperFence = q3 + 1.5 * iqr;
+  const outliers = [];
+  const inliers = [];
+  for (const v of sorted) {
+    if (v < lowerFence || v > upperFence) {
+      outliers.push(v);
+    } else {
+      inliers.push(v);
+    }
+  }
+  const whiskerMin = inliers.length > 0 ? inliers[0] : sorted[0];
+  const whiskerMax = inliers.length > 0 ? inliers[inliers.length - 1] : sorted[sorted.length - 1];
+  return {
+    min: whiskerMin,
+    q1,
+    median,
+    q3,
+    max: whiskerMax,
+    iqr,
+    outliers
+  };
+}
+export function isRawDatum(datum) {
+  return typeof datum === "object" && datum !== null && Array.isArray(datum.samples);
+}

package/dist/src/utils/Chart/mercator.util.cjs

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mercatorProject = mercatorProject;
+exports.multiPolygonCentroid = multiPolygonCentroid;
+exports.multiPolygonToSvgPath = multiPolygonToSvgPath;
+exports.polygonToSvgPath = polygonToSvgPath;
+const LNG_MIN = -180;
+const LNG_MAX = 180;
+const LAT_MAX_MERCATOR = 85.051129;
+function mercatorY(lat) {
+  const radLat = lat * Math.PI / 180;
+  return Math.log(Math.tan(Math.PI / 4 + radLat / 2));
+}
+const MERC_Y_MIN = mercatorY(-LAT_MAX_MERCATOR);
+const MERC_Y_MAX = mercatorY(LAT_MAX_MERCATOR);
+function mercatorProject(lng, lat, width = 1e3, height = 500) {
+  const clampedLat = Math.max(-LAT_MAX_MERCATOR, Math.min(LAT_MAX_MERCATOR, lat));
+  const x = (lng - LNG_MIN) / (LNG_MAX - LNG_MIN) * width;
+  const my = mercatorY(clampedLat);
+  const y = (MERC_Y_MAX - my) / (MERC_Y_MAX - MERC_Y_MIN) * height;
+  return [Math.round(x * 10) / 10, Math.round(y * 10) / 10];
+}
+function polygonToSvgPath(polygon, width = 1e3, height = 500) {
+  if (polygon.length < 3) return "";
+  const projected = polygon.map(([lng, lat]) => mercatorProject(lng, lat, width, height));
+  const [first, ...rest] = projected;
+  const parts = [`M${first[0]},${first[1]}`];
+  for (const [px, py] of rest) {
+    parts.push(`L${px},${py}`);
+  }
+  parts.push("Z");
+  return parts.join(" ");
+}
+function multiPolygonToSvgPath(multi, width = 1e3, height = 500) {
+  return multi.map(polygon => polygonToSvgPath(polygon, width, height)).filter(Boolean).join(" ");
+}
+function multiPolygonCentroid(multi, width = 1e3, height = 500) {
+  let lngSum = 0;
+  let latSum = 0;
+  let count = 0;
+  for (const polygon of multi) {
+    for (const [lng, lat] of polygon) {
+      lngSum += lng;
+      latSum += lat;
+      count++;
+    }
+  }
+  if (count === 0) return [width / 2, height / 2];
+  return mercatorProject(lngSum / count, latSum / count, width, height);
+}

package/dist/src/utils/Chart/mercator.util.d.ts

@@ -0,0 +1,51 @@
+/**
+ * mercator.util.ts
+ *
+ * Web Mercator projection helpers for the OrigamChartMap component.
+ *
+ * Reference system: 1000 × 500 canvas, longitude [-180, 180], latitude [-85, 85].
+ * The projection clips at ±85° latitude to avoid Mercator divergence at the poles.
+ *
+ * Verified reference point:
+ *   Paris (lng=2.35, lat=48.85) → ~(506, 162) on a 1000×500 canvas.
+ */
+/**
+ * Projects a geographic coordinate (WGS-84) into SVG pixel space.
+ * Uses the Web Mercator (EPSG:3857) formula normalised to [0, width] × [0, height].
+ *
+ * @param lng   Longitude in degrees, range [-180, 180]
+ * @param lat   Latitude in degrees, range [-85, 85]
+ * @param width  SVG canvas width  (default 1000)
+ * @param height SVG canvas height (default 500)
+ * @returns [x, y] in SVG pixel space
+ */
+export declare function mercatorProject(lng: number, lat: number, width?: number, height?: number): [number, number];
+/**
+ * Converts a single polygon (array of [lng, lat] pairs) to an SVG path string.
+ *
+ * @param polygon  Array of [lng, lat] geographic pairs
+ * @param width    SVG canvas width  (default 1000)
+ * @param height   SVG canvas height (default 500)
+ * @returns SVG `d` attribute string (closed polygon with Z)
+ */
+export declare function polygonToSvgPath(polygon: Array<[number, number]>, width?: number, height?: number): string;
+/**
+ * Converts a multi-polygon (array of polygon rings) to a single compound SVG path string.
+ * All polygons are joined into one `d` attribute, allowing SVG fill rules to apply.
+ *
+ * @param multi   Array of polygons, each polygon is Array<[lng, lat]>
+ * @param width   SVG canvas width  (default 1000)
+ * @param height  SVG canvas height (default 500)
+ * @returns SVG `d` attribute string (multiple M…Z subpaths)
+ */
+export declare function multiPolygonToSvgPath(multi: Array<Array<[number, number]>>, width?: number, height?: number): string;
+/**
+ * Computes the geographic centroid of a set of polygons (arithmetic mean of all vertices).
+ * Returns the centroid projected into SVG pixel space.
+ *
+ * @param multi   Multi-polygon data (Array<Array<[lng, lat]>>)
+ * @param width   SVG canvas width  (default 1000)
+ * @param height  SVG canvas height (default 500)
+ * @returns [x, y] centroid in SVG pixel space
+ */
+export declare function multiPolygonCentroid(multi: Array<Array<[number, number]>>, width?: number, height?: number): [number, number];

package/dist/src/utils/Chart/mercator.util.js

@@ -0,0 +1,44 @@
+const LNG_MIN = -180;
+const LNG_MAX = 180;
+const LAT_MAX_MERCATOR = 85.051129;
+function mercatorY(lat) {
+  const radLat = lat * Math.PI / 180;
+  return Math.log(Math.tan(Math.PI / 4 + radLat / 2));
+}
+const MERC_Y_MIN = mercatorY(-LAT_MAX_MERCATOR);
+const MERC_Y_MAX = mercatorY(LAT_MAX_MERCATOR);
+export function mercatorProject(lng, lat, width = 1e3, height = 500) {
+  const clampedLat = Math.max(-LAT_MAX_MERCATOR, Math.min(LAT_MAX_MERCATOR, lat));
+  const x = (lng - LNG_MIN) / (LNG_MAX - LNG_MIN) * width;
+  const my = mercatorY(clampedLat);
+  const y = (MERC_Y_MAX - my) / (MERC_Y_MAX - MERC_Y_MIN) * height;
+  return [Math.round(x * 10) / 10, Math.round(y * 10) / 10];
+}
+export function polygonToSvgPath(polygon, width = 1e3, height = 500) {
+  if (polygon.length < 3) return "";
+  const projected = polygon.map(([lng, lat]) => mercatorProject(lng, lat, width, height));
+  const [first, ...rest] = projected;
+  const parts = [`M${first[0]},${first[1]}`];
+  for (const [px, py] of rest) {
+    parts.push(`L${px},${py}`);
+  }
+  parts.push("Z");
+  return parts.join(" ");
+}
+export function multiPolygonToSvgPath(multi, width = 1e3, height = 500) {
+  return multi.map((polygon) => polygonToSvgPath(polygon, width, height)).filter(Boolean).join(" ");
+}
+export function multiPolygonCentroid(multi, width = 1e3, height = 500) {
+  let lngSum = 0;
+  let latSum = 0;
+  let count = 0;
+  for (const polygon of multi) {
+    for (const [lng, lat] of polygon) {
+      lngSum += lng;
+      latSum += lat;
+      count++;
+    }
+  }
+  if (count === 0) return [width / 2, height / 2];
+  return mercatorProject(lngSum / count, latSum / count, width, height);
+}

package/dist/src/utils/Chart/path.util.cjs

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.steppedPathLength = exports.steppedPath = exports.smoothPath = exports.polygonPath = exports.polarToCartesian = exports.pathLength = exports.monotonePath = exports.linePath = exports.areaPath = exports.arcPath = void 0;
+const linePath = points => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  const head = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  const tail = rest.map(([x, y]) => `L${formatNum(x)},${formatNum(y)}`).join(" ");
+  return tail.length ? `${head} ${tail}` : head;
+};
+exports.linePath = linePath;
+const smoothPath = points => {
+  if (points.length < 3) return linePath(points);
+  const [first] = points;
+  let d = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i - 1] ?? points[i];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[i + 2] ?? p2;
+    const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
+    const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
+    const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
+    const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
+    d += ` C${formatNum(cp1x)},${formatNum(cp1y)} ${formatNum(cp2x)},${formatNum(cp2y)} ${formatNum(p2[0])},${formatNum(p2[1])}`;
+  }
+  return d;
+};
+exports.smoothPath = smoothPath;
+const monotonePath = points => {
+  if (points.length < 3) return linePath(points);
+  const n = points.length;
+  const dx = [];
+  const dy = [];
+  const m = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx.push(points[i + 1][0] - points[i][0]);
+    dy.push(points[i + 1][1] - points[i][1]);
+    m.push(dx[i] === 0 ? 0 : dy[i] / dx[i]);
+  }
+  const t = new Array(n);
+  t[0] = m[0];
+  t[n - 1] = m[n - 2];
+  for (let i = 1; i < n - 1; i++) {
+    if (m[i - 1] * m[i] <= 0) {
+      t[i] = 0;
+    } else {
+      const w1 = 2 * dx[i] + dx[i - 1];
+      const w2 = dx[i] + 2 * dx[i - 1];
+      t[i] = (w1 + w2) / (w1 / m[i - 1] + w2 / m[i]);
+    }
+  }
+  let d = `M${formatNum(points[0][0])},${formatNum(points[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const cp1x = points[i][0] + dx[i] / 3;
+    const cp1y = points[i][1] + t[i] * dx[i] / 3;
+    const cp2x = points[i + 1][0] - dx[i] / 3;
+    const cp2y = points[i + 1][1] - t[i + 1] * dx[i] / 3;
+    d += ` C${formatNum(cp1x)},${formatNum(cp1y)} ${formatNum(cp2x)},${formatNum(cp2y)} ${formatNum(points[i + 1][0])},${formatNum(points[i + 1][1])}`;
+  }
+  return d;
+};
+exports.monotonePath = monotonePath;
+const steppedPath = points => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  let d = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  let prevY = first[1];
+  for (const [x, y] of rest) {
+    d += ` L${formatNum(x)},${formatNum(prevY)} L${formatNum(x)},${formatNum(y)}`;
+    prevY = y;
+  }
+  return d;
+};
+exports.steppedPath = steppedPath;
+const areaPath = (points, baselineY, smooth = false) => {
+  if (!points.length) return "";
+  let lineD;
+  if (smooth === "monotone") lineD = monotonePath(points);else if (smooth === "stepped") lineD = steppedPath(points);else if (smooth === true) lineD = smoothPath(points);else lineD = linePath(points);
+  const lastX = points[points.length - 1][0];
+  const firstX = points[0][0];
+  return `${lineD} L${formatNum(lastX)},${formatNum(baselineY)} L${formatNum(firstX)},${formatNum(baselineY)} Z`;
+};
+exports.areaPath = areaPath;
+const arcPath = (cx, cy, outerR, innerR, startAngle, endAngle) => {
+  const sweep = endAngle - startAngle;
+  if (Math.abs(sweep) < 1e-6) return "";
+  const toSvg = a => a - Math.PI / 2;
+  const sa = toSvg(startAngle);
+  const ea = toSvg(endAngle);
+  const largeArc = Math.abs(sweep) > Math.PI ? 1 : 0;
+  const sweepFlag = sweep > 0 ? 1 : 0;
+  const x1 = cx + outerR * Math.cos(sa);
+  const y1 = cy + outerR * Math.sin(sa);
+  const x2 = cx + outerR * Math.cos(ea);
+  const y2 = cy + outerR * Math.sin(ea);
+  if (innerR <= 0) {
+    return `M${formatNum(cx)},${formatNum(cy)} L${formatNum(x1)},${formatNum(y1)} A${formatNum(outerR)},${formatNum(outerR)} 0 ${largeArc},${sweepFlag} ${formatNum(x2)},${formatNum(y2)} Z`;
+  }
+  const ix1 = cx + innerR * Math.cos(sa);
+  const iy1 = cy + innerR * Math.sin(sa);
+  const ix2 = cx + innerR * Math.cos(ea);
+  const iy2 = cy + innerR * Math.sin(ea);
+  const innerSweepFlag = sweep > 0 ? 0 : 1;
+  return [`M${formatNum(x1)},${formatNum(y1)}`, `A${formatNum(outerR)},${formatNum(outerR)} 0 ${largeArc},${sweepFlag} ${formatNum(x2)},${formatNum(y2)}`, `L${formatNum(ix2)},${formatNum(iy2)}`, `A${formatNum(innerR)},${formatNum(innerR)} 0 ${largeArc},${innerSweepFlag} ${formatNum(ix1)},${formatNum(iy1)}`, "Z"].join(" ");
+};
+exports.arcPath = arcPath;
+const polygonPath = points => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  const head = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  const tail = rest.map(([x, y]) => `L${formatNum(x)},${formatNum(y)}`).join(" ");
+  return tail.length ? `${head} ${tail} Z` : `${head} Z`;
+};
+exports.polygonPath = polygonPath;
+const pathLength = points => {
+  if (points.length < 2) return 0;
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i][0] - points[i - 1][0];
+    const dy = points[i][1] - points[i - 1][1];
+    total += Math.sqrt(dx * dx + dy * dy);
+  }
+  return total;
+};
+exports.pathLength = pathLength;
+const steppedPathLength = points => {
+  if (points.length < 2) return 0;
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = Math.abs(points[i][0] - points[i - 1][0]);
+    const dy = Math.abs(points[i][1] - points[i - 1][1]);
+    total += dx + dy;
+  }
+  return total;
+};
+exports.steppedPathLength = steppedPathLength;
+const polarToCartesian = (cx, cy, radius, angle) => {
+  const a = angle - Math.PI / 2;
+  return [cx + radius * Math.cos(a), cy + radius * Math.sin(a)];
+};
+exports.polarToCartesian = polarToCartesian;
+const formatNum = n => {
+  if (!Number.isFinite(n)) return "0";
+  const rounded = Math.round(n * 1e3) / 1e3;
+  return rounded === 0 ? "0" : String(rounded);
+};

package/dist/src/utils/Chart/path.util.d.ts

@@ -0,0 +1,116 @@
+/**
+ * Pure SVG path-string helpers consumed by `useChart`. Each function
+ * is intentionally **stateless** — given the same coordinates it
+ * always returns the same string. Keeping them out of the composable
+ * is what makes the chart render-safe on the server (no DOM
+ * measurement, no `getBBox()`, no `window.*`).
+ *
+ * The helpers are intentionally low-level: they expect already-scaled
+ * pixel coordinates and don't know about data ranges, padding, or
+ * categorical axes — `useChart` handles the scale and feeds the
+ * scaled points in.
+ */
+/** A pre-scaled `[x, y]` coordinate pair (pixels in the SVG viewBox). */
+export type TPathPoint = [number, number];
+/**
+ * Joins a list of pixel points with straight segments.
+ *
+ * Returns an empty string when `points` is empty so callers don't
+ * emit `<path d="">` (Chrome logs a warning).
+ *
+ * ```ts
+ * linePath([[0,0],[10,10],[20,5]])  // 'M0,0 L10,10 L20,5'
+ * ```
+ */
+export declare const linePath: (points: Array<TPathPoint>) => string;
+/**
+ * Catmull-Rom-derived cubic-Bezier path through `points`. Produces a
+ * visually smoother line than `linePath` at the cost of a small
+ * overshoot near sharp peaks (documented in `<OrigamChart>` doc).
+ *
+ * Falls back to `linePath` when there are fewer than 3 points (a
+ * single segment doesn't have enough neighbours to compute tangents).
+ */
+export declare const smoothPath: (points: Array<TPathPoint>) => string;
+/**
+ * Monotone cubic-Bezier spline through `points`. Unlike
+ * `smoothPath`, the Fritsch-Carlson tangent estimate guarantees
+ * the curve is monotone between every pair of points — no
+ * overshoot at sharp peaks, no spurious bumps. Most production
+ * "spline" charts (Highcharts, ApexCharts, Chart.js) use this
+ * algorithm rather than naive Catmull-Rom.
+ *
+ * Falls back to `linePath` when there are fewer than 3 points.
+ */
+export declare const monotonePath: (points: Array<TPathPoint>) => string;
+/**
+ * Stepped (staircase) polyline through `points`. Each segment
+ * draws horizontally from `points[i]` to `points[i+1].x`, then
+ * vertically to `points[i+1].y`. Used by the `stepped-line` chart
+ * type for "event log" / "discrete state" visualisations.
+ *
+ * Returns an empty string when `points` is empty.
+ */
+export declare const steppedPath: (points: Array<TPathPoint>) => string;
+/**
+ * Closes the path produced by `linePath` / `smoothPath` /
+ * `monotonePath` / `steppedPath` down to the `baselineY` then back
+ * to the first X — the canonical "area chart" shape.
+ *
+ * `smooth` accepts:
+ *   - `false` — straight line segments (default).
+ *   - `true` — Catmull-Rom Bezier (`smoothPath`).
+ *   - `'monotone'` — Fritsch-Carlson Bezier (`monotonePath`).
+ *   - `'stepped'` — staircase (`steppedPath`).
+ */
+export declare const areaPath: (points: Array<TPathPoint>, baselineY: number, smooth?: boolean | "monotone" | "stepped") => string;
+/**
+ * SVG arc path for a pie / donut slice.
+ *
+ * - `cx`, `cy` — center of the chart.
+ * - `outerR` — outer radius (pie radius).
+ * - `innerR` — inner radius (`0` for pie, `> 0` for donut).
+ * - `startAngle`, `endAngle` — radians, mathematical convention
+ *   (zero at 3 o'clock, increasing counter-clockwise). The helper
+ *   converts internally to the SVG convention (zero at noon,
+ *   clockwise) so callers can reason in standard math.
+ *
+ * Returns an empty string when the sweep is zero (avoids a
+ * malformed `M…A…M…A…Z`).
+ */
+export declare const arcPath: (cx: number, cy: number, outerR: number, innerR: number, startAngle: number, endAngle: number) => string;
+/**
+ * Polygon path through `points` (radar / area-fill of a radar).
+ *
+ * Returns an empty string when `points` is empty. The path is
+ * **closed** (`Z` at the end) so the consumer can fill it without
+ * worrying about the start/end gap.
+ */
+export declare const polygonPath: (points: Array<TPathPoint>) => string;
+/**
+ * Cartesian length of a polyline. Used by the chart to seed
+ * `stroke-dasharray` / `stroke-dashoffset` for the entrance
+ * animation (the "drawing" effect on line / area charts).
+ */
+export declare const pathLength: (points: Array<TPathPoint>) => number;
+/**
+ * Manhattan length of a stepped polyline — the actual SVG `d`
+ * generated by `steppedPath` draws BOTH a horizontal AND a
+ * vertical segment between every pair of input points, so the
+ * total rendered length is `Σ(|Δx| + |Δy|)`, not
+ * `Σ(sqrt(Δx² + Δy²))`.
+ *
+ * Using the Cartesian `pathLength` here would make the
+ * `stroke-dasharray` animation truncate the visible stroke
+ * partway through (the symptom: stepped-line tail not drawn).
+ */
+export declare const steppedPathLength: (points: Array<TPathPoint>) => number;
+/**
+ * Convert a polar (cx, cy, radius, angle) into a Cartesian
+ * `[x, y]` pixel pair. Used by radar and pie to position labels.
+ *
+ * Angles use the mathematical convention (radians, zero at 3
+ * o'clock, CCW) — `arcPath` and `polarToCartesian` are
+ * consistent.
+ */
+export declare const polarToCartesian: (cx: number, cy: number, radius: number, angle: number) => TPathPoint;

package/dist/src/utils/Chart/path.util.js

@@ -0,0 +1,143 @@
+export const linePath = (points) => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  const head = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  const tail = rest.map(([x, y]) => `L${formatNum(x)},${formatNum(y)}`).join(" ");
+  return tail.length ? `${head} ${tail}` : head;
+};
+export const smoothPath = (points) => {
+  if (points.length < 3) return linePath(points);
+  const [first] = points;
+  let d = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i - 1] ?? points[i];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[i + 2] ?? p2;
+    const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
+    const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
+    const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
+    const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
+    d += ` C${formatNum(cp1x)},${formatNum(cp1y)} ${formatNum(cp2x)},${formatNum(cp2y)} ${formatNum(p2[0])},${formatNum(p2[1])}`;
+  }
+  return d;
+};
+export const monotonePath = (points) => {
+  if (points.length < 3) return linePath(points);
+  const n = points.length;
+  const dx = [];
+  const dy = [];
+  const m = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx.push(points[i + 1][0] - points[i][0]);
+    dy.push(points[i + 1][1] - points[i][1]);
+    m.push(dx[i] === 0 ? 0 : dy[i] / dx[i]);
+  }
+  const t = new Array(n);
+  t[0] = m[0];
+  t[n - 1] = m[n - 2];
+  for (let i = 1; i < n - 1; i++) {
+    if (m[i - 1] * m[i] <= 0) {
+      t[i] = 0;
+    } else {
+      const w1 = 2 * dx[i] + dx[i - 1];
+      const w2 = dx[i] + 2 * dx[i - 1];
+      t[i] = (w1 + w2) / (w1 / m[i - 1] + w2 / m[i]);
+    }
+  }
+  let d = `M${formatNum(points[0][0])},${formatNum(points[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const cp1x = points[i][0] + dx[i] / 3;
+    const cp1y = points[i][1] + t[i] * dx[i] / 3;
+    const cp2x = points[i + 1][0] - dx[i] / 3;
+    const cp2y = points[i + 1][1] - t[i + 1] * dx[i] / 3;
+    d += ` C${formatNum(cp1x)},${formatNum(cp1y)} ${formatNum(cp2x)},${formatNum(cp2y)} ${formatNum(points[i + 1][0])},${formatNum(points[i + 1][1])}`;
+  }
+  return d;
+};
+export const steppedPath = (points) => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  let d = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  let prevY = first[1];
+  for (const [x, y] of rest) {
+    d += ` L${formatNum(x)},${formatNum(prevY)} L${formatNum(x)},${formatNum(y)}`;
+    prevY = y;
+  }
+  return d;
+};
+export const areaPath = (points, baselineY, smooth = false) => {
+  if (!points.length) return "";
+  let lineD;
+  if (smooth === "monotone") lineD = monotonePath(points);
+  else if (smooth === "stepped") lineD = steppedPath(points);
+  else if (smooth === true) lineD = smoothPath(points);
+  else lineD = linePath(points);
+  const lastX = points[points.length - 1][0];
+  const firstX = points[0][0];
+  return `${lineD} L${formatNum(lastX)},${formatNum(baselineY)} L${formatNum(firstX)},${formatNum(baselineY)} Z`;
+};
+export const arcPath = (cx, cy, outerR, innerR, startAngle, endAngle) => {
+  const sweep = endAngle - startAngle;
+  if (Math.abs(sweep) < 1e-6) return "";
+  const toSvg = (a) => a - Math.PI / 2;
+  const sa = toSvg(startAngle);
+  const ea = toSvg(endAngle);
+  const largeArc = Math.abs(sweep) > Math.PI ? 1 : 0;
+  const sweepFlag = sweep > 0 ? 1 : 0;
+  const x1 = cx + outerR * Math.cos(sa);
+  const y1 = cy + outerR * Math.sin(sa);
+  const x2 = cx + outerR * Math.cos(ea);
+  const y2 = cy + outerR * Math.sin(ea);
+  if (innerR <= 0) {
+    return `M${formatNum(cx)},${formatNum(cy)} L${formatNum(x1)},${formatNum(y1)} A${formatNum(outerR)},${formatNum(outerR)} 0 ${largeArc},${sweepFlag} ${formatNum(x2)},${formatNum(y2)} Z`;
+  }
+  const ix1 = cx + innerR * Math.cos(sa);
+  const iy1 = cy + innerR * Math.sin(sa);
+  const ix2 = cx + innerR * Math.cos(ea);
+  const iy2 = cy + innerR * Math.sin(ea);
+  const innerSweepFlag = sweep > 0 ? 0 : 1;
+  return [
+    `M${formatNum(x1)},${formatNum(y1)}`,
+    `A${formatNum(outerR)},${formatNum(outerR)} 0 ${largeArc},${sweepFlag} ${formatNum(x2)},${formatNum(y2)}`,
+    `L${formatNum(ix2)},${formatNum(iy2)}`,
+    `A${formatNum(innerR)},${formatNum(innerR)} 0 ${largeArc},${innerSweepFlag} ${formatNum(ix1)},${formatNum(iy1)}`,
+    "Z"
+  ].join(" ");
+};
+export const polygonPath = (points) => {
+  if (!points.length) return "";
+  const [first, ...rest] = points;
+  const head = `M${formatNum(first[0])},${formatNum(first[1])}`;
+  const tail = rest.map(([x, y]) => `L${formatNum(x)},${formatNum(y)}`).join(" ");
+  return tail.length ? `${head} ${tail} Z` : `${head} Z`;
+};
+export const pathLength = (points) => {
+  if (points.length < 2) return 0;
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = points[i][0] - points[i - 1][0];
+    const dy = points[i][1] - points[i - 1][1];
+    total += Math.sqrt(dx * dx + dy * dy);
+  }
+  return total;
+};
+export const steppedPathLength = (points) => {
+  if (points.length < 2) return 0;
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    const dx = Math.abs(points[i][0] - points[i - 1][0]);
+    const dy = Math.abs(points[i][1] - points[i - 1][1]);
+    total += dx + dy;
+  }
+  return total;
+};
+export const polarToCartesian = (cx, cy, radius, angle) => {
+  const a = angle - Math.PI / 2;
+  return [cx + radius * Math.cos(a), cy + radius * Math.sin(a)];
+};
+const formatNum = (n) => {
+  if (!Number.isFinite(n)) return "0";
+  const rounded = Math.round(n * 1e3) / 1e3;
+  return rounded === 0 ? "0" : String(rounded);
+};