@tensor_1/react 2.38.0 → 2.40.0

package/dist/chart-analytic.cjs

@@ -0,0 +1,1379 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/chart-analytic.tsx
+var chart_analytic_exports = {};
+__export(chart_analytic_exports, {
+  CHART_PANELS_LAYOUT: () => CHART_PANELS_LAYOUT,
+  Chart: () => Chart,
+  ChartLegend: () => ChartLegend,
+  ChartLegendItem: () => ChartLegendItem,
+  ChartMetric: () => ChartMetric,
+  ChartPanels: () => ChartPanels,
+  CorrelationScatter: () => CorrelationScatter,
+  DEFAULT_ANALYTIC_LABELS: () => DEFAULT_ANALYTIC_LABELS,
+  DEFAULT_CHART_LABELS: () => DEFAULT_CHART_LABELS,
+  DEFAULT_CHART_PANELS_LABELS: () => DEFAULT_CHART_PANELS_LABELS,
+  DEFAULT_CORRELATION_SCATTER_LABELS: () => DEFAULT_CORRELATION_SCATTER_LABELS,
+  SCATTER_HIT_SIZE: () => SCATTER_HIT_SIZE,
+  chartPanelsModel: () => chartPanelsModel,
+  combineMarks: () => combineMarks,
+  comparisonSeries: () => comparisonSeries,
+  correlationScatterModel: () => correlationScatterModel,
+  crossingPoints: () => crossingPoints,
+  eventMarks: () => eventMarks,
+  findCrossings: () => findCrossings,
+  forecastSeries: () => forecastSeries,
+  formatCorrelation: () => formatCorrelation,
+  linearFit: () => linearFit,
+  mergeChartTheme: () => mergeChartTheme,
+  niceCeil: () => niceCeil,
+  normalQuantile: () => normalQuantile,
+  partialPeriod: () => partialPeriod,
+  predictionBand: () => predictionBand,
+  quantiles: () => quantiles,
+  studentTQuantile: () => studentTQuantile,
+  thresholdMarks: () => thresholdMarks,
+  uixChartAreaGradient: () => uixChartAreaGradient,
+  uixChartPalette: () => uixChartPalette,
+  uixChartTheme: () => uixChartTheme,
+  uixChartTokens: () => uixChartTokens
+});
+module.exports = __toCommonJS(chart_analytic_exports);
+var echarts = __toESM(require("echarts/core"), 1);
+var import_charts = require("echarts/charts");
+var import_components = require("echarts/components");
+var import_renderers = require("echarts/renderers");
+
+// src/components/ChartCore.tsx
+var import_react = require("react");
+
+// src/cx.ts
+function cx(...args) {
+  return args.filter(Boolean).join(" ");
+}
+
+// src/chart-theme.ts
+function reader(source) {
+  if (typeof source === "function") return source;
+  if (typeof getComputedStyle === "undefined" || typeof document === "undefined") return () => "";
+  const style = getComputedStyle(source ?? document.documentElement);
+  return (token) => style.getPropertyValue(token).trim();
+}
+function uixChartTokens(source) {
+  const read = reader(source);
+  const t = (name) => read(`--uix-${name}`);
+  const unquote = (font) => font.replace(/"/g, "");
+  return {
+    palette: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => t(`chart-${i}`)),
+    neutral: t("chart-neutral"),
+    grid: t("chart-grid"),
+    axis: t("chart-axis"),
+    reference: t("chart-reference"),
+    zoneWarning: t("chart-zone-warning"),
+    zoneDanger: t("chart-zone-danger"),
+    forecastBand: t("chart-forecast-band"),
+    event: t("chart-event"),
+    partial: t("chart-partial"),
+    comparison: t("chart-comparison"),
+    warning: t("warning"),
+    danger: t("danger"),
+    surface: t("surface"),
+    text: t("text"),
+    textMuted: t("text-muted"),
+    border: t("border-strong"),
+    fontSans: unquote(t("font-sans")),
+    fontMono: unquote(t("font-mono"))
+  };
+}
+function uixChartTheme(source) {
+  const k = uixChartTokens(source);
+  const read = reader(source);
+  const axis = {
+    axisLine: { lineStyle: { color: k.axis } },
+    axisTick: { show: false },
+    axisLabel: { color: k.textMuted, fontFamily: k.fontMono, fontSize: 11 },
+    splitLine: { lineStyle: { color: k.grid, type: "solid", width: 1 } }
+  };
+  return {
+    color: k.palette,
+    backgroundColor: "transparent",
+    textStyle: { color: k.textMuted, fontFamily: k.fontSans, fontSize: 12 },
+    title: { textStyle: { color: k.text, fontFamily: k.fontSans }, subtextStyle: { color: k.textMuted, fontFamily: k.fontSans } },
+    legend: { textStyle: { color: k.textMuted, fontFamily: k.fontSans, fontSize: 12 }, icon: "roundRect", itemWidth: 10, itemHeight: 6, itemGap: 12 },
+    tooltip: {
+      backgroundColor: k.surface,
+      borderColor: k.border,
+      borderWidth: 1,
+      padding: [8, 10],
+      textStyle: { color: k.text, fontFamily: k.fontSans, fontSize: 12 },
+      extraCssText: `border-radius:${read("--uix-radius-sm")};box-shadow:${read("--uix-shadow-popover")}`,
+      axisPointer: { lineStyle: { color: k.reference, width: 1 }, crossStyle: { color: k.reference }, shadowStyle: { color: k.forecastBand } }
+    },
+    xAxis: axis,
+    yAxis: axis
+  };
+}
+function uixChartAreaGradient(color) {
+  const alpha = (opacity) => {
+    const hex = color.replace("#", "");
+    if (!/^[0-9a-f]{6}$/i.test(hex)) return color;
+    const [r, g, b] = hex.match(/.{2}/g).map((channel) => Number.parseInt(channel, 16));
+    return `rgba(${r},${g},${b},${opacity})`;
+  };
+  return {
+    type: "linear",
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [{ offset: 0, color: alpha(0.28) }, { offset: 0.72, color: alpha(0.06) }, { offset: 1, color: alpha(0) }]
+  };
+}
+var isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value) && Object.getPrototypeOf(value) === Object.prototype;
+function deepMerge(base, over) {
+  if (over === void 0) return base;
+  if (!isPlainObject(base) || !isPlainObject(over)) return over;
+  const out = { ...base };
+  for (const key of Object.keys(over)) out[key] = deepMerge(base[key], over[key]);
+  return out;
+}
+var STYLED_ONLY = ["xAxis", "yAxis", "legend", "title"];
+function mergeChartTheme(theme, option) {
+  const merged = deepMerge(theme, option);
+  const source = option;
+  const base = theme;
+  for (const key of STYLED_ONLY) {
+    if (Array.isArray(source[key])) merged[key] = source[key].map((axis) => deepMerge(base[key], axis));
+    else if (!(key in source)) delete merged[key];
+  }
+  return merged;
+}
+
+// src/components/ChartCore.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function readToken(name) {
+  if (typeof getComputedStyle === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function uixChartPalette() {
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
+}
+function themed(option, theme, element) {
+  const resolved = typeof option === "function" ? option(uixChartTokens(element)) : option;
+  return theme === "none" ? resolved : mergeChartTheme(uixChartTheme(element), resolved);
+}
+function motionSafe(option) {
+  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return { ...option, animation: false };
+  }
+  return option;
+}
+var DEFAULT_CHART_LABELS = {
+  loading: "Loading chart\u2026",
+  chart: "Chart",
+  dataTableSuffix: "data table"
+};
+function ChartCore({
+  engine,
+  option,
+  title,
+  subtitle,
+  height = 280,
+  className,
+  style,
+  ariaLabel,
+  tableData,
+  tableHeaders,
+  onReady,
+  header,
+  headerAction,
+  footer,
+  loading = false,
+  empty,
+  labels: labelOverrides,
+  theme = "uix",
+  group,
+  onEvents,
+  tables
+}) {
+  const labels = { ...DEFAULT_CHART_LABELS, ...labelOverrides };
+  const containerRef = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  const appliedOptionRef = (0, import_react.useRef)(null);
+  const onEventsRef = (0, import_react.useRef)(onEvents);
+  onEventsRef.current = onEvents;
+  const latestOptionRef = (0, import_react.useRef)(option);
+  const onReadyRef = (0, import_react.useRef)(onReady);
+  const tableId = (0, import_react.useId)();
+  const hasEmpty = empty != null;
+  const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length || tables?.length);
+  const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
+  const themeRef = (0, import_react.useRef)(theme);
+  latestOptionRef.current = option;
+  themeRef.current = theme;
+  onReadyRef.current = onReady;
+  hasTextAlternativeRef.current = hasTextAlternative;
+  (0, import_react.useEffect)(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const chart = engine.init(element, null, { renderer: "svg" });
+    chartRef.current = chart;
+    chart.setOption(motionSafe(themed(latestOptionRef.current, themeRef.current, element)));
+    appliedOptionRef.current = latestOptionRef.current;
+    onReadyRef.current?.(chart);
+    const retheme = () => {
+      if (themeRef.current === "none") return;
+      chart.setOption(motionSafe(themed(latestOptionRef.current, themeRef.current, element)));
+    };
+    const themeObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(retheme);
+    themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme"] });
+    const scheme = typeof matchMedia === "undefined" ? null : matchMedia("(prefers-color-scheme: dark)");
+    scheme?.addEventListener?.("change", retheme);
+    if (!hasTextAlternativeRef.current) {
+      console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
+    }
+    let frame = 0;
+    let width = element.clientWidth;
+    let height2 = element.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      const nextHeight = element.clientHeight;
+      if (nextWidth === width && nextHeight === height2) return;
+      width = nextWidth;
+      height2 = nextHeight;
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        chart.resize();
+      });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      themeObserver?.disconnect();
+      scheme?.removeEventListener?.("change", retheme);
+      if (frame) cancelAnimationFrame(frame);
+      chart.dispose();
+      chartRef.current = null;
+      appliedOptionRef.current = null;
+    };
+  }, [engine, hasEmpty]);
+  const eventNames = Object.keys(onEvents ?? {}).sort().join("|");
+  (0, import_react.useEffect)(() => {
+    const chart = chartRef.current;
+    if (!chart || !eventNames) return;
+    const bound = eventNames.split("|").map((name) => {
+      const handler = (params) => onEventsRef.current?.[name]?.(params);
+      chart.on(name, handler);
+      return [name, handler];
+    });
+    return () => {
+      if (chart.isDisposed()) return;
+      for (const [name, handler] of bound) chart.off(name, handler);
+    };
+  }, [engine, hasEmpty, eventNames]);
+  (0, import_react.useEffect)(() => {
+    const chart = chartRef.current;
+    if (!chart || !group) return;
+    chart.group = group;
+    engine.connect?.(group);
+    return () => {
+      if (!chart.isDisposed()) chart.group = "";
+    };
+  }, [engine, hasEmpty, group]);
+  (0, import_react.useEffect)(() => {
+    const chart = chartRef.current;
+    const element = containerRef.current;
+    if (!chart || !element || appliedOptionRef.current === option) return;
+    chart.setOption(motionSafe(themed(option, theme, element)), { notMerge: false });
+    appliedOptionRef.current = option;
+  }, [option, theme]);
+  const heightValue = typeof height === "number" ? `${height}px` : height;
+  const effectiveAriaLabel = ariaLabel ?? title ?? labels.chart;
+  const hasTable = Boolean(tableData?.length && tableHeaders?.length);
+  const extraTables = (tables ?? []).filter((table) => table.headers.length && table.rows.length);
+  const describedBy = [hasTable ? tableId : null, ...extraTables.map((_, index) => `${tableId}-${index}`)].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
+    title != null || subtitle != null || header != null || headerAction != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__heading", children: [
+        header,
+        title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+      ] }),
+      headerAction
+    ] }) : null,
+    hasEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uix-chart__loading", children: labels.loading }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: containerRef,
+          style: { height: heightValue },
+          role: "img",
+          "aria-label": effectiveAriaLabel,
+          "aria-describedby": describedBy
+        }
+      )
+    ] }),
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 ${labels.dataTableSuffix}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
+    ] }) : null,
+    extraTables.map((table, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: `${tableId}-${index}`, className: "uix-visually-hidden", "aria-label": table.caption, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: table.headers.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: table.headers.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, rowIndex)) })
+    ] }, index)),
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__footer", children: footer })
+  ] });
+}
+function ChartMetric({ value, label, delta, deltaTone = "neutral", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart__metric", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__metric-value", children: value }),
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__metric-label", children: label }),
+    delta != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__delta", "data-tone": deltaTone, children: delta })
+  ] });
+}
+function ChartLegend({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: cx("uix-legend", className), ...props, children });
+}
+function ChartLegendItem({ label, color, swatch = "block", className, style, ...props }) {
+  const mergedStyle = color ? { "--legend-color": color, ...style } : style;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: cx("uix-legend__item", className), style: mergedStyle, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("uix-legend__swatch", swatch !== "block" && `uix-legend__swatch--${swatch}`), "aria-hidden": "true" }),
+    label
+  ] });
+}
+
+// src/components/ChartPanels.tsx
+var import_react2 = require("react");
+
+// src/chart-analytic-model.ts
+var DEFAULT_ANALYTIC_LABELS = {
+  projection: "Projection",
+  range: (level) => `${Math.round(level * 100)}% range`,
+  partial: "Partial",
+  crossed: (x) => `Crossed ${x}`,
+  lower: "Lower",
+  upper: "Upper",
+  threshold: "Threshold",
+  event: "Event",
+  formatX: (x) => String(x)
+};
+var GUTTER_LABEL_WIDTH = 88;
+var markLineBase = (data) => ({
+  silent: true,
+  symbol: "none",
+  animation: false,
+  data
+});
+var markAreaBase = (data) => ({ silent: true, animation: false, data });
+function combineMarks(...fragments) {
+  const lines = [];
+  const areas = [];
+  const points = [];
+  for (const fragment of fragments) {
+    if (!fragment) continue;
+    if (fragment.markLine?.data) lines.push(...fragment.markLine.data);
+    if (fragment.markArea?.data) areas.push(...fragment.markArea.data);
+    if (fragment.markPoint?.data) points.push(...fragment.markPoint.data);
+  }
+  const out = {};
+  if (lines.length) out.markLine = markLineBase(lines);
+  if (areas.length) out.markArea = markAreaBase(areas);
+  if (points.length) out.markPoint = { animation: false, data: points };
+  return out;
+}
+var zoneColor = (tone, tokens) => tone === "danger" ? tokens.zoneDanger : tone === "warning" ? tokens.zoneWarning : tokens.forecastBand;
+function thresholdMarks(thresholds, options) {
+  const { tokens, extent } = options;
+  const lines = [];
+  const areas = [];
+  for (const threshold of thresholds) {
+    if (!Number.isFinite(threshold.value)) continue;
+    const zoneTo = threshold.to ?? (threshold.badSide && extent ? threshold.badSide === "above" ? extent[1] : extent[0] : void 0);
+    if (zoneTo != null && Number.isFinite(zoneTo) && zoneTo !== threshold.value) {
+      areas.push([
+        { yAxis: Math.min(threshold.value, zoneTo), itemStyle: { color: zoneColor(threshold.tone, tokens) } },
+        { yAxis: Math.max(threshold.value, zoneTo) }
+      ]);
+    }
+    lines.push({
+      yAxis: threshold.value,
+      lineStyle: { color: tokens.reference, width: 1, type: "solid" },
+      label: {
+        show: true,
+        position: "end",
+        formatter: threshold.label,
+        color: tokens.textMuted,
+        fontFamily: tokens.fontSans,
+        fontSize: 11,
+        width: GUTTER_LABEL_WIDTH,
+        overflow: "truncate",
+        distance: 6
+      }
+    });
+  }
+  return combineMarks(
+    lines.length ? { markLine: markLineBase(lines) } : null,
+    areas.length ? { markArea: markAreaBase(areas) } : null
+  );
+}
+var PIN_SYMBOL = {
+  neutral: "circle",
+  warning: "triangle",
+  danger: "diamond"
+};
+function eventMarks(events, options) {
+  const { tokens } = options;
+  const lines = [];
+  const areas = [];
+  events.forEach((event) => {
+    if (event.to != null) {
+      areas.push([{ xAxis: event.at, itemStyle: { color: tokens.forecastBand } }, { xAxis: event.to }]);
+    }
+    lines.push({ xAxis: event.at, lineStyle: { color: tokens.event, width: 1, type: "solid", opacity: 0.7 }, label: { show: false } });
+  });
+  const lane = {
+    series: {
+      id: options.seriesId ?? "uix-event-lane",
+      type: "scatter",
+      xAxisIndex: options.xAxisIndex ?? 0,
+      yAxisIndex: options.yAxisIndex ?? 0,
+      data: events.map((event, index) => ({
+        value: [event.at, 0, index],
+        symbol: PIN_SYMBOL[event.tone ?? "neutral"]
+      })),
+      symbolSize: 10,
+      itemStyle: { color: tokens.event, borderColor: tokens.surface, borderWidth: 2 },
+      emphasis: { scale: 1.3 },
+      cursor: "pointer",
+      animation: false,
+      z: 5
+    }
+  };
+  return {
+    ...combineMarks(
+      lines.length ? { markLine: markLineBase(lines) } : null,
+      areas.length ? { markArea: markAreaBase(areas) } : null
+    ),
+    lane
+  };
+}
+function forecastSeries(forecast, options) {
+  const labels = { ...DEFAULT_ANALYTIC_LABELS, ...options.labels };
+  const { tokens } = options;
+  const color = tokens.palette[(options.colorIndex ?? 0) % tokens.palette.length] || tokens.palette[0];
+  const stack = `${options.idPrefix ?? "forecast"}-band`;
+  const axes = { xAxisIndex: options.xAxisIndex ?? 0, yAxisIndex: options.yAxisIndex ?? 0 };
+  const points = forecast.points.filter((p) => [p.y, p.lower, p.upper].every(Number.isFinite));
+  const start = options.fromValue != null && Number.isFinite(options.fromValue) ? [{ x: forecast.from, y: options.fromValue, lower: options.fromValue, upper: options.fromValue }] : [];
+  const all = [...start, ...points];
+  const last = points[points.length - 1];
+  const prefix = options.idPrefix ?? "forecast";
+  return [
+    {
+      id: `${prefix}-lower`,
+      name: `${options.name} \xB7 ${labels.lower}`,
+      type: "line",
+      ...axes,
+      stack,
+      data: all.map((p) => [p.x, p.lower]),
+      lineStyle: { opacity: 0 },
+      symbol: "none",
+      silent: true,
+      tooltip: { show: false },
+      animation: false,
+      z: 1
+    },
+    {
+      id: `${prefix}-band`,
+      name: `${options.name} \xB7 ${labels.range(forecast.level)}`,
+      type: "line",
+      ...axes,
+      stack,
+      data: all.map((p) => [p.x, p.upper - p.lower]),
+      lineStyle: { opacity: 0 },
+      areaStyle: { color: tokens.forecastBand, opacity: 1 },
+      symbol: "none",
+      silent: true,
+      tooltip: { show: false },
+      animation: false,
+      z: 1
+    },
+    {
+      id: `${prefix}-centre`,
+      name: `${options.name} \xB7 ${labels.projection}`,
+      type: "line",
+      ...axes,
+      data: all.map((p) => [p.x, p.y]),
+      lineStyle: { color, width: 2, type: "dashed" },
+      itemStyle: { color },
+      symbol: "none",
+      animation: false,
+      z: 3,
+      ...last ? {
+        markArea: markAreaBase([[
+          {
+            xAxis: forecast.from,
+            itemStyle: { color: "transparent" },
+            label: { show: true, position: "insideTop", formatter: labels.projection, color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 11 }
+          },
+          { xAxis: last.x }
+        ]])
+      } : {}
+    }
+  ];
+}
+function comparisonSeries(comparison, options) {
+  return {
+    id: options.id ?? "comparison",
+    name: comparison.label,
+    type: "line",
+    xAxisIndex: options.xAxisIndex ?? 0,
+    yAxisIndex: options.yAxisIndex ?? 0,
+    data: options.x.map((x, i) => [x, comparison.values[i] ?? null]),
+    lineStyle: { color: options.tokens.comparison, width: 1.5, type: "solid" },
+    itemStyle: { color: options.tokens.comparison },
+    symbol: "none",
+    connectNulls: false,
+    animation: false,
+    z: 1
+  };
+}
+function partialPeriod(lastX, options) {
+  const labels = { ...DEFAULT_ANALYTIC_LABELS, ...options.labels };
+  return {
+    markArea: markAreaBase([[
+      {
+        xAxis: options.from ?? lastX,
+        itemStyle: { color: options.tokens.partial },
+        label: { show: true, position: "insideBottom", formatter: labels.partial, color: options.tokens.textMuted, fontFamily: options.tokens.fontSans, fontSize: 11 }
+      },
+      { xAxis: lastX }
+    ]])
+  };
+}
+function findCrossings(values, threshold) {
+  const side = threshold.badSide ?? (threshold.kind === "floor" ? "below" : "above");
+  const bad = (v) => side === "above" ? v > threshold.value : v < threshold.value;
+  const out = [];
+  let previous = null;
+  values.forEach((value, index) => {
+    if (value == null || !Number.isFinite(value)) {
+      previous = null;
+      return;
+    }
+    const isBad = bad(value);
+    if (isBad && previous === false) out.push(index);
+    previous = isBad;
+  });
+  return out;
+}
+function crossingPoints(values, threshold, options) {
+  const labels = { ...DEFAULT_ANALYTIC_LABELS, ...options.labels };
+  const crossings = findCrossings(values, threshold);
+  const label = (text, show) => ({
+    show,
+    position: "top",
+    distance: 8,
+    formatter: text,
+    color: options.tokens.text,
+    fontFamily: options.tokens.fontSans,
+    fontSize: 11
+  });
+  const data = crossings.map((index, i) => {
+    const text = labels.crossed(labels.formatX(options.x[index]));
+    const latest = i === crossings.length - 1;
+    return {
+      name: text,
+      coord: [options.x[index], values[index]],
+      symbol: "circle",
+      symbolSize: 10,
+      itemStyle: { color: options.tokens.surface, borderColor: options.tokens.text, borderWidth: 2 },
+      label: label(text, latest),
+      ...latest ? {} : { emphasis: { label: label(text, true) } }
+    };
+  });
+  return data.length ? { markPoint: { animation: false, data } } : {};
+}
+
+// src/chart-panels-model.ts
+var defaultNumber = new Intl.NumberFormat("en", { maximumFractionDigits: 1 });
+var DEFAULT_CHART_PANELS_LABELS = {
+  ...DEFAULT_ANALYTIC_LABELS,
+  x: "Period",
+  table: (title) => `${title} \u2014 data table`,
+  formatValue: (value, unit) => {
+    const text = defaultNumber.format(value);
+    if (!unit) return text;
+    return unit === "%" ? `${text}%` : `${text} ${unit}`;
+  }
+};
+var CHART_PANELS_LAYOUT = {
+  top: 8,
+  lane: 14,
+  laneGap: 10,
+  title: 28,
+  panelHeight: 112,
+  panelGap: 14,
+  axisBand: 30,
+  left: 52,
+  right: 16,
+  gutter: 100
+};
+function niceCeil(value) {
+  if (!(value > 0)) return value === 0 ? 1 : value;
+  const exponent = Math.floor(Math.log10(value));
+  const base = 10 ** exponent;
+  for (const step of [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]) {
+    if (step * base >= value - 1e-12) return step * base;
+  }
+  return 10 * base;
+}
+var escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);
+var finite = (v) => typeof v === "number" && Number.isFinite(v);
+var sameX = (a, b) => String(a) === String(b);
+function chartPanelsModel(spec, tokens, labelOverrides) {
+  const labels = { ...DEFAULT_CHART_PANELS_LABELS, ...labelOverrides };
+  const L = CHART_PANELS_LAYOUT;
+  const events = spec.events ?? [];
+  const hasLane = events.length > 0;
+  const hasGutter = spec.panels.some((panel) => panel.thresholds?.length);
+  const right = hasGutter ? L.gutter : L.right;
+  const anyBar = spec.panels.some((panel) => panel.kind === "bar");
+  const categories = [...spec.x.values];
+  for (const panel of spec.panels) {
+    for (const point of panel.forecast?.points ?? []) {
+      if (!categories.some((x) => sameX(x, point.x))) categories.push(point.x);
+    }
+  }
+  const lastActual = spec.x.values[spec.x.values.length - 1];
+  const previousActual = spec.x.values[spec.x.values.length - 2];
+  const grids = [];
+  const xAxes = [];
+  const yAxes = [];
+  const series = [];
+  const seriesPanel = {};
+  const legend = [];
+  let cursor = L.top;
+  const xAxisBase = (gridIndex, showLabels) => {
+    const common = {
+      gridIndex,
+      axisLabel: {
+        show: showLabels,
+        hideOverlap: true,
+        showMaxLabel: true,
+        // the first and last labels align inward, so neither runs into the y-axis labels or the gutter
+        alignMinLabel: "left",
+        alignMaxLabel: "right",
+        formatter: (value) => labels.formatX(value)
+      },
+      axisLine: { show: true },
+      splitLine: { show: false }
+    };
+    return spec.x.type === "time" ? { type: "time", ...common } : { type: "category", data: categories.map(String), boundaryGap: anyBar, ...common };
+  };
+  let laneSeriesId = "";
+  let eventFragment = null;
+  if (hasLane) {
+    grids.push({ top: cursor, height: L.lane, left: L.left, right, containLabel: false });
+    xAxes.push({ ...xAxisBase(0, false), axisLine: { show: false } });
+    yAxes.push({ type: "value", gridIndex: 0, min: -1, max: 1, show: false });
+    const marks = eventMarks(events, { tokens, xAxisIndex: 0, yAxisIndex: 0, seriesId: "uix-event-lane" });
+    laneSeriesId = "uix-event-lane";
+    series.push(marks.lane.series);
+    eventFragment = { markLine: marks.markLine, markArea: marks.markArea };
+    cursor += L.lane + L.laneGap;
+  }
+  const tables = [];
+  spec.panels.forEach((panel, panelIndex) => {
+    const gridIndex = grids.length;
+    const isLast = panelIndex === spec.panels.length - 1;
+    const height = panel.height ?? L.panelHeight;
+    cursor += L.title;
+    grids.push({ top: cursor, height, left: L.left, right, containLabel: false });
+    cursor += height + (isLast ? L.axisBand : L.panelGap);
+    const values = [];
+    for (const s of panel.series) values.push(...s.values.filter(finite));
+    values.push(...panel.comparison?.values.filter(finite) ?? []);
+    for (const p of panel.forecast?.points ?? []) values.push(p.lower, p.upper, p.y);
+    for (const t of panel.thresholds ?? []) values.push(t.value, ...finite(t.to) ? [t.to] : []);
+    const usable = values.filter(Number.isFinite);
+    const dataMax = usable.length ? Math.max(...usable) : 1;
+    const dataMin = usable.length ? Math.min(...usable) : 0;
+    const max = niceCeil(dataMax * 1.08);
+    const min = dataMin < 0 ? -niceCeil(-dataMin * 1.08) : 0;
+    xAxes.push(xAxisBase(gridIndex, isLast));
+    yAxes.push({
+      type: "value",
+      gridIndex,
+      min,
+      max,
+      // three ticks (min, half way, max): a short panel never prints a crowded extra max label
+      interval: (max - min) / 2,
+      name: panel.unit ? `${panel.title} (${panel.unit})` : panel.title,
+      nameLocation: "end",
+      nameGap: 14,
+      nameTextStyle: { align: "left", padding: [0, 0, 0, -L.left + 4], color: tokens.text, fontFamily: tokens.fontSans, fontSize: 12, fontWeight: 600, width: 320, overflow: "truncate" },
+      axisLabel: { formatter: (value) => labels.formatValue(value, panel.unit === "%" ? "%" : void 0) }
+    });
+    const axes = { xAxisIndex: gridIndex, yAxisIndex: gridIndex };
+    const pairs = (vals) => spec.x.values.map((x, i) => [x, vals[i] ?? null]);
+    panel.series.forEach((s, seriesIndex) => {
+      const colorIndex = s.colorIndex ?? seriesIndex;
+      const color = tokens.palette[colorIndex % tokens.palette.length];
+      const id = `${panel.id}:${s.id}`;
+      seriesPanel[id] = panel.id;
+      const isPrimary = seriesIndex === 0;
+      let marks = {};
+      if (isPrimary) {
+        const crossings = (panel.thresholds ?? []).filter((t) => t.kind !== "target" && (t.badSide || t.kind === "limit" || t.kind === "budget" || t.kind === "floor")).slice(0, 1).map((t) => crossingPoints(s.values.slice(0, spec.x.values.length), t, { x: spec.x.values, tokens, labels }));
+        marks = combineMarks(
+          panel.thresholds?.length ? thresholdMarks(panel.thresholds, { tokens, extent: [min, max] }) : null,
+          eventFragment,
+          spec.partialLast && lastActual != null ? partialWash(partialPeriod(lastActual, { tokens, from: previousActual, labels }), panelIndex === 0) : null,
+          ...crossings
+        );
+      }
+      if (panel.kind === "bar") {
+        series.push({
+          id,
+          name: s.label,
+          type: "bar",
+          ...axes,
+          data: pairs(s.values),
+          barMaxWidth: 24,
+          itemStyle: { color, borderRadius: [4, 4, 0, 0], borderColor: tokens.surface, borderWidth: 1 },
+          animation: false,
+          z: 2,
+          ...marks
+        });
+      } else {
+        series.push({
+          id,
+          name: s.label,
+          type: "line",
+          ...axes,
+          data: pairs(s.values),
+          symbol: "circle",
+          symbolSize: 8,
+          showSymbol: false,
+          connectNulls: false,
+          lineStyle: { color, width: 2, type: "solid" },
+          itemStyle: { color, borderColor: tokens.surface, borderWidth: 2 },
+          ...panel.kind === "area" ? { areaStyle: { color: uixChartAreaGradient(color) } } : {},
+          emphasis: { focus: "none" },
+          animation: false,
+          z: 2,
+          ...marks
+        });
+      }
+      if (panel.series.length > 1 || panel.comparison || panel.forecast) legend.push({ label: s.label, color, swatch: panel.kind === "bar" ? "block" : "line" });
+    });
+    if (panel.comparison) {
+      const id = `${panel.id}:comparison`;
+      seriesPanel[id] = panel.id;
+      series.push(comparisonSeries(panel.comparison, { x: spec.x.values, tokens, ...axes, id }));
+      if (!legend.some((item) => item.label === panel.comparison.label)) legend.push({ label: panel.comparison.label, color: tokens.comparison, swatch: "line" });
+    }
+    if (panel.forecast && panel.series[0]) {
+      const primary = panel.series[0];
+      const fromIndex = spec.x.values.findIndex((x) => sameX(x, panel.forecast.from));
+      const fromValue = fromIndex >= 0 ? primary.values[fromIndex] ?? null : null;
+      const colorIndex = primary.colorIndex ?? 0;
+      const fc = forecastSeries(panel.forecast, { name: primary.label, colorIndex, tokens, labels, fromValue, ...axes, idPrefix: `${panel.id}:forecast` });
+      for (const s of fc) seriesPanel[String(s.id)] = panel.id;
+      series.push(...fc);
+      if (!legend.some((item) => item.swatch === "dash")) {
+        legend.push({ label: labels.projection, color: tokens.palette[colorIndex % tokens.palette.length], swatch: "dash" });
+        legend.push({ label: labels.range(panel.forecast.level), color: tokens.forecastBand, swatch: "block" });
+      }
+    }
+    tables.push(panelTable(spec, panel, categories, events, labels));
+  });
+  const allX = xAxes.map((_, i) => i);
+  const option = {
+    animation: false,
+    grid: grids,
+    xAxis: xAxes,
+    yAxis: yAxes,
+    axisPointer: { link: [{ xAxisIndex: "all" }], label: { show: false } },
+    tooltip: {
+      trigger: "axis",
+      confine: true,
+      axisPointer: { type: "line" },
+      formatter: (params) => tooltipHtml(params, spec, categories, events, labels)
+    },
+    series,
+    ...spec.zoom ? { dataZoom: [{ type: "inside", xAxisIndex: allX, filterMode: "none" }] } : {}
+  };
+  return { option, height: cursor, legend, tables, categories, seriesPanel, laneSeriesId };
+}
+function partialWash(marks, labelled) {
+  if (labelled || !marks.markArea?.data) return marks;
+  const data = marks.markArea.data.map(([from, to]) => [{ ...from, label: { show: false } }, to]);
+  return { markArea: { ...marks.markArea, data } };
+}
+function panelTable(spec, panel, categories, events, labels) {
+  const headers = [labels.x, ...panel.series.map((s) => s.label)];
+  if (panel.comparison) headers.push(panel.comparison.label);
+  if (panel.forecast) headers.push(labels.projection, labels.lower, labels.upper);
+  for (const t of panel.thresholds ?? []) headers.push(`${labels.threshold}: ${t.label}`);
+  if (events.length) headers.push(labels.event);
+  const unit = panel.unit;
+  const fmt = (v) => finite(v) ? labels.formatValue(v, unit) : "";
+  const rows = categories.map((x, i) => {
+    const row = { [labels.x]: labels.formatX(x) };
+    for (const s of panel.series) row[s.label] = i < spec.x.values.length ? fmt(s.values[i]) : "";
+    if (panel.comparison) row[panel.comparison.label] = i < spec.x.values.length ? fmt(panel.comparison.values[i]) : "";
+    if (panel.forecast) {
+      const p = panel.forecast.points.find((point) => sameX(point.x, x));
+      row[labels.projection] = fmt(p?.y);
+      row[labels.lower] = fmt(p?.lower);
+      row[labels.upper] = fmt(p?.upper);
+    }
+    for (const t of panel.thresholds ?? []) row[`${labels.threshold}: ${t.label}`] = finite(t.to) ? `${fmt(t.value)}\u2013${fmt(t.to)}` : fmt(t.value);
+    if (events.length) row[labels.event] = events.filter((e) => sameX(e.at, x)).map((e) => e.label).join("; ");
+    return row;
+  });
+  return { caption: labels.table(panel.title), headers, rows };
+}
+function tooltipHtml(params, spec, categories, events, labels) {
+  const list = Array.isArray(params) ? params : [params];
+  const first = list[0];
+  if (!first) return "";
+  const axisValue = first.axisValue ?? (Array.isArray(first.value) ? first.value[0] : void 0);
+  const index = categories.findIndex((x2) => sameX(x2, axisValue));
+  if (index < 0) return "";
+  const x = categories[index];
+  const lines = [`<div style="font-weight:600;margin-bottom:4px">${escapeHtml(labels.formatX(x))}</div>`];
+  const row = (name, value) => `<div style="display:flex;justify-content:space-between;gap:16px"><span>${escapeHtml(name)}</span><span style="font-variant-numeric:tabular-nums">${escapeHtml(value)}</span></div>`;
+  for (const panel of spec.panels) {
+    for (const s of panel.series) {
+      const v = index < spec.x.values.length ? s.values[index] : null;
+      if (finite(v)) lines.push(row(s.label, labels.formatValue(v, panel.unit)));
+    }
+    const c = panel.comparison && index < spec.x.values.length ? panel.comparison.values[index] : null;
+    if (panel.comparison && finite(c)) lines.push(row(panel.comparison.label, labels.formatValue(c, panel.unit)));
+    const p = panel.forecast?.points.find((point) => sameX(point.x, x));
+    if (p && panel.forecast) {
+      lines.push(row(`${labels.projection} (${panel.forecast.method})`, labels.formatValue(p.y, panel.unit)));
+      lines.push(row(labels.range(panel.forecast.level), `${labels.formatValue(p.lower, panel.unit)} \u2013 ${labels.formatValue(p.upper, panel.unit)}`));
+    }
+  }
+  for (const e of events.filter((event) => sameX(event.at, x))) lines.push(row(e.kind, e.label));
+  if (spec.partialLast && index === spec.x.values.length - 1) lines.push(`<div style="opacity:.75">${escapeHtml(labels.partial)}</div>`);
+  return lines.join("");
+}
+
+// src/chart-stats.ts
+var finite2 = (value) => typeof value === "number" && Number.isFinite(value);
+function linearFit(points) {
+  const usable = points.filter((p) => finite2(p.x) && finite2(p.y));
+  const n = usable.length;
+  if (n < 2) return null;
+  let sumX = 0;
+  let sumY = 0;
+  for (const p of usable) {
+    sumX += p.x;
+    sumY += p.y;
+  }
+  const xMean = sumX / n;
+  const yMean = sumY / n;
+  let sxx = 0;
+  let syy = 0;
+  let sxy = 0;
+  for (const p of usable) {
+    const dx = p.x - xMean;
+    const dy = p.y - yMean;
+    sxx += dx * dx;
+    syy += dy * dy;
+    sxy += dx * dy;
+  }
+  if (sxx === 0) return null;
+  const slope = sxy / sxx;
+  const intercept = yMean - slope * xMean;
+  let sse = 0;
+  for (const p of usable) {
+    const residual = p.y - (intercept + slope * p.x);
+    sse += residual * residual;
+  }
+  const r = syy === 0 ? null : Math.max(-1, Math.min(1, sxy / Math.sqrt(sxx * syy)));
+  const residualStdError = n > 2 ? Math.sqrt(sse / (n - 2)) : 0;
+  return { slope, intercept, r, n, xMean, sxx, residualStdError };
+}
+function quantiles(values, ps) {
+  const sorted = values.filter(finite2).slice().sort((a, b) => a - b);
+  return ps.map((p) => {
+    if (!sorted.length || !finite2(p)) return null;
+    const clamped = Math.max(0, Math.min(1, p));
+    const h = (sorted.length - 1) * clamped;
+    const lo = Math.floor(h);
+    const hi = Math.ceil(h);
+    return sorted[lo] + (h - lo) * (sorted[hi] - sorted[lo]);
+  });
+}
+function normalQuantile(p) {
+  if (!(p > 0 && p < 1)) return p === 0 ? -Infinity : p === 1 ? Infinity : Number.NaN;
+  const a = [-39.69683028665376, 220.9460984245205, -275.9285104469687, 138.357751867269, -30.66479806614716, 2.506628277459239];
+  const b = [-54.47609879822406, 161.5858368580409, -155.6989798598866, 66.80131188771972, -13.28068155288572];
+  const c = [-0.007784894002430293, -0.3223964580411365, -2.400758277161838, -2.549732539343734, 4.374664141464968, 2.938163982698783];
+  const d = [0.007784695709041462, 0.3224671290700398, 2.445134137142996, 3.754408661907416];
+  const low = 0.02425;
+  if (p < low) {
+    const q2 = Math.sqrt(-2 * Math.log(p));
+    return (((((c[0] * q2 + c[1]) * q2 + c[2]) * q2 + c[3]) * q2 + c[4]) * q2 + c[5]) / ((((d[0] * q2 + d[1]) * q2 + d[2]) * q2 + d[3]) * q2 + 1);
+  }
+  if (p > 1 - low) {
+    const q2 = Math.sqrt(-2 * Math.log(1 - p));
+    return -(((((c[0] * q2 + c[1]) * q2 + c[2]) * q2 + c[3]) * q2 + c[4]) * q2 + c[5]) / ((((d[0] * q2 + d[1]) * q2 + d[2]) * q2 + d[3]) * q2 + 1);
+  }
+  const q = p - 0.5;
+  const r = q * q;
+  return (((((a[0] * r + a[1]) * r + a[2]) * r + a[3]) * r + a[4]) * r + a[5]) * q / (((((b[0] * r + b[1]) * r + b[2]) * r + b[3]) * r + b[4]) * r + 1);
+}
+function studentTQuantile(p, df) {
+  const z = normalQuantile(p);
+  if (!Number.isFinite(z) || !(df > 0)) return z;
+  const z3 = z ** 3;
+  const z5 = z ** 5;
+  const z7 = z ** 7;
+  return z + (z3 + z) / (4 * df) + (5 * z5 + 16 * z3 + 3 * z) / (96 * df ** 2) + (3 * z7 + 19 * z5 + 17 * z3 - 15 * z) / (384 * df ** 3);
+}
+function predictionBand(fit, xs, level = 0.8) {
+  const coverage = Math.max(0.01, Math.min(0.999, level));
+  const t = fit.n > 2 ? studentTQuantile(1 - (1 - coverage) / 2, fit.n - 2) : 0;
+  return xs.filter(finite2).map((x) => {
+    const y = fit.intercept + fit.slope * x;
+    const spread = t * fit.residualStdError * Math.sqrt(1 + 1 / fit.n + (x - fit.xMean) ** 2 / fit.sxx);
+    return { x, y, lower: y - spread, upper: y + spread };
+  });
+}
+
+// src/correlation-scatter-model.ts
+var defaultNumber2 = new Intl.NumberFormat("en", { maximumFractionDigits: 2 });
+function formatCorrelation(r) {
+  const shown = Math.abs(r) < 1 ? Math.trunc(r * 100) / 100 : Math.sign(r);
+  return shown.toFixed(2);
+}
+var DEFAULT_CORRELATION_SCATTER_LABELS = {
+  stats: ({ r, n }) => `${r == null ? "" : `r = ${formatCorrelation(r)} \xB7 `}n = ${n} \xB7 association, not cause`,
+  notEnough: (n, min) => `Not enough data (n = ${n} of ${min})`,
+  percentile: (p) => `p${p}`,
+  trend: "Trend",
+  point: "Point",
+  formatX: (x) => defaultNumber2.format(x),
+  formatY: (y) => defaultNumber2.format(y)
+};
+var SCATTER_HIT_SIZE = 26;
+var DOT_SIZE = 9;
+var escapeHtml2 = (text) => text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);
+var niceRange = (values) => {
+  const lo = Math.min(...values);
+  const hi = Math.max(...values);
+  const max = niceCeil(hi > 0 ? hi * 1.08 : hi || 1);
+  const min = lo >= 0 ? 0 : -niceCeil(-lo * 1.08);
+  return [min, max];
+};
+function correlationScatterModel(spec, tokens, labelOverrides) {
+  const labels = { ...DEFAULT_CORRELATION_SCATTER_LABELS, ...labelOverrides };
+  const minPoints = Math.max(2, spec.minPoints ?? 8);
+  const points = spec.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));
+  const n = points.length;
+  const enough = n >= minPoints;
+  const fit = enough && spec.trend !== "none" ? linearFit(points) : null;
+  const statsText = labels.stats({ r: fit?.r ?? null, n });
+  const xs = [...points.map((p) => p.x), ...(spec.thresholds?.x ?? []).map((t) => t.value), ...spec.breakpoint ? [spec.breakpoint.x] : []];
+  const ys = [...points.map((p) => p.y), ...(spec.thresholds?.y ?? []).map((t) => t.value)];
+  const [xMin, xMax] = xs.length ? niceRange(xs) : [0, 1];
+  const [yMin, yMax] = ys.length ? niceRange(ys) : [0, 1];
+  const dotData = points.map((p) => ({
+    value: [p.x, p.y],
+    symbol: p.emphasis === "danger" ? "diamond" : p.emphasis === "warning" ? "triangle" : "circle",
+    symbolSize: p.emphasis ? DOT_SIZE + 3 : DOT_SIZE,
+    itemStyle: {
+      color: p.emphasis === "danger" ? tokens.danger : p.emphasis === "warning" ? tokens.warning : tokens.palette[0],
+      borderColor: tokens.surface,
+      borderWidth: 2,
+      opacity: 1
+    }
+  }));
+  const pcts = (spec.percentiles ?? []).filter((p) => p > 0 && p < 100);
+  const pctValues = quantiles(points.map((p) => p.y), pcts.map((p) => p / 100));
+  const percentileLines = enough && pcts.length ? {
+    markLine: {
+      silent: true,
+      symbol: "none",
+      animation: false,
+      data: pcts.flatMap((p, i) => {
+        const value = pctValues[i];
+        return value == null ? [] : [{
+          yAxis: value,
+          lineStyle: { color: tokens.reference, width: 1, type: "solid", opacity: 0.6 },
+          label: { show: true, position: "end", formatter: labels.percentile(p), color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 11, distance: 6 }
+        }];
+      })
+    }
+  } : {};
+  const xLines = {
+    markLine: {
+      silent: true,
+      symbol: "none",
+      animation: false,
+      data: [
+        ...(spec.thresholds?.x ?? []).map((t) => ({
+          xAxis: t.value,
+          lineStyle: { color: tokens.reference, width: 1, type: "solid" },
+          label: { show: true, position: "end", formatter: t.label, color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 11 }
+        })),
+        ...spec.breakpoint && enough ? [{
+          xAxis: spec.breakpoint.x,
+          lineStyle: { color: tokens.text, width: 1, type: "solid" },
+          label: { show: true, position: "end", formatter: spec.breakpoint.label, color: tokens.text, fontFamily: tokens.fontSans, fontSize: 11, fontWeight: 600 }
+        }] : []
+      ]
+    }
+  };
+  const marks = combineMarks(
+    spec.thresholds?.y?.length ? thresholdMarks(spec.thresholds.y, { tokens, extent: [yMin, yMax] }) : null,
+    percentileLines,
+    (xLines.markLine?.data).length ? xLines : null
+  );
+  const series = [
+    {
+      id: "points",
+      name: spec.yLabel,
+      type: "scatter",
+      data: dotData,
+      silent: true,
+      animation: false,
+      z: 3,
+      ...marks
+    },
+    {
+      // the hit layer: transparent 24 px targets over the dots carry the tooltip and the click
+      id: "points-hit",
+      name: spec.yLabel,
+      type: "scatter",
+      data: points.map((p, index) => ({ value: [p.x, p.y, index] })),
+      symbol: "circle",
+      symbolSize: SCATTER_HIT_SIZE,
+      itemStyle: { color: "rgba(0,0,0,0)" },
+      emphasis: { itemStyle: { color: "rgba(0,0,0,0)", borderColor: tokens.text, borderWidth: 1 } },
+      cursor: "pointer",
+      animation: false,
+      z: 4
+    }
+  ];
+  if (fit) {
+    series.push({
+      id: "trend",
+      name: labels.trend,
+      type: "line",
+      data: [[xMin, fit.intercept + fit.slope * xMin], [xMax, fit.intercept + fit.slope * xMax]],
+      symbol: "none",
+      silent: true,
+      lineStyle: { color: tokens.reference, width: 1.5, type: "solid" },
+      tooltip: { show: false },
+      animation: false,
+      clip: true,
+      z: 2
+    });
+  }
+  const option = {
+    animation: false,
+    grid: { top: 28, right: spec.thresholds?.y?.length || pcts.length ? 100 : 20, bottom: 44, left: 52, containLabel: false },
+    xAxis: {
+      type: "value",
+      min: xMin,
+      max: xMax,
+      name: spec.xLabel,
+      nameLocation: "middle",
+      nameGap: 28,
+      nameTextStyle: { color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 12 },
+      axisLabel: { formatter: (v) => labels.formatX(v) },
+      splitLine: { show: true }
+    },
+    yAxis: {
+      type: "value",
+      min: yMin,
+      max: yMax,
+      name: spec.yLabel,
+      nameLocation: "end",
+      nameGap: 10,
+      nameTextStyle: { align: "left", padding: [0, 0, 0, -48], color: tokens.textMuted, fontFamily: tokens.fontSans, fontSize: 12 },
+      axisLabel: { formatter: (v) => labels.formatY(v) }
+    },
+    tooltip: {
+      trigger: "item",
+      confine: true,
+      formatter: (params) => {
+        const p = params;
+        if (p.seriesId !== "points-hit" || !Array.isArray(p.value)) return "";
+        const point = points[Number(p.value[2])];
+        if (!point) return "";
+        return `<div style="font-weight:600;margin-bottom:4px">${escapeHtml2(point.label)}</div><div>${escapeHtml2(spec.xLabel)}: ${escapeHtml2(labels.formatX(point.x))}</div><div>${escapeHtml2(spec.yLabel)}: ${escapeHtml2(labels.formatY(point.y))}</div>`;
+      }
+    },
+    series
+  };
+  const headers = [labels.point, spec.xLabel, spec.yLabel];
+  const rows = points.map((p) => ({ [labels.point]: p.label, [spec.xLabel]: labels.formatX(p.x), [spec.yLabel]: labels.formatY(p.y) }));
+  return { enough, n, minPoints, fit, option, statsText, table: { headers, rows }, hitSeriesId: "points-hit" };
+}
+
+// src/components/ChartPanels.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CSS_VAR_TOKENS = {
+  palette: [1, 2, 3, 4, 5, 6, 7, 8].map((i) => `var(--uix-chart-${i})`),
+  neutral: "var(--uix-chart-neutral)",
+  grid: "var(--uix-chart-grid)",
+  axis: "var(--uix-chart-axis)",
+  reference: "var(--uix-chart-reference)",
+  zoneWarning: "var(--uix-chart-zone-warning)",
+  zoneDanger: "var(--uix-chart-zone-danger)",
+  forecastBand: "var(--uix-chart-forecast-band)",
+  event: "var(--uix-chart-event)",
+  partial: "var(--uix-chart-partial)",
+  comparison: "var(--uix-chart-comparison)",
+  warning: "var(--uix-warning)",
+  danger: "var(--uix-danger)",
+  surface: "var(--uix-surface)",
+  text: "var(--uix-text)",
+  textMuted: "var(--uix-text-muted)",
+  border: "var(--uix-border-strong)",
+  fontSans: "inherit",
+  fontMono: "inherit"
+};
+function ChartPanelsCore({
+  engine,
+  x,
+  panels,
+  events,
+  partialLast,
+  zoom,
+  ariaLabel,
+  title,
+  subtitle,
+  header,
+  headerAction,
+  footer,
+  loading,
+  empty,
+  className,
+  group,
+  labels,
+  onPointClick,
+  onEventClick,
+  legend
+}) {
+  const spec = (0, import_react2.useMemo)(() => ({ x, panels, events, partialLast, zoom }), [x, panels, events, partialLast, zoom]);
+  const layout = (0, import_react2.useMemo)(() => chartPanelsModel(spec, CSS_VAR_TOKENS, labels), [spec, labels]);
+  const option = (0, import_react2.useMemo)(() => (tokens) => chartPanelsModel(spec, tokens, labels).option, [spec, labels]);
+  const onEvents = (0, import_react2.useMemo)(() => ({
+    click: (raw) => {
+      const params = raw;
+      const value = Array.isArray(params.value) ? params.value : [];
+      if (params.seriesId && params.seriesId === layout.laneSeriesId) {
+        const event = spec.events?.[Number(value[2])];
+        if (!event) return;
+        if (onEventClick) onEventClick(event);
+        else if (event.href && typeof window !== "undefined") window.location.assign(event.href);
+        return;
+      }
+      const panelId = params.seriesId ? layout.seriesPanel[params.seriesId] : void 0;
+      if (panelId && onPointClick) onPointClick(panelId, value[0] ?? params.name);
+    }
+  }), [layout, spec.events, onEventClick, onPointClick]);
+  const showLegend = legend ?? layout.legend.length > 0;
+  const legendNode = showLegend && layout.legend.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegend, { children: layout.legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartLegendItem, { label: item.label, color: item.color, swatch: item.swatch }, `${item.swatch}:${item.label}`)) }) : null;
+  const footerNode = legendNode || footer != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    legendNode,
+    footer
+  ] }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ChartCore,
+    {
+      engine,
+      option,
+      height: layout.height,
+      ariaLabel,
+      title,
+      subtitle,
+      header,
+      headerAction,
+      footer: footerNode,
+      loading,
+      empty,
+      className,
+      group,
+      labels,
+      onEvents,
+      tables: layout.tables
+    }
+  );
+}
+function CorrelationScatterCore({
+  engine,
+  points,
+  xLabel,
+  yLabel,
+  trend,
+  percentiles,
+  thresholds,
+  breakpoint,
+  minPoints,
+  ariaLabel,
+  title,
+  subtitle,
+  header,
+  headerAction,
+  footer,
+  loading,
+  empty,
+  className,
+  group,
+  labels,
+  showStats = true,
+  height = 280,
+  onPointClick
+}) {
+  const spec = (0, import_react2.useMemo)(
+    () => ({ points, xLabel, yLabel, trend, percentiles, thresholds, breakpoint, minPoints }),
+    [points, xLabel, yLabel, trend, percentiles, thresholds, breakpoint, minPoints]
+  );
+  const layout = (0, import_react2.useMemo)(() => correlationScatterModel(spec, CSS_VAR_TOKENS, labels), [spec, labels]);
+  const option = (0, import_react2.useMemo)(() => (tokens) => correlationScatterModel(spec, tokens, labels).option, [spec, labels]);
+  const usable = (0, import_react2.useMemo)(() => spec.points.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y)), [spec.points]);
+  const onEvents = (0, import_react2.useMemo)(() => ({
+    click: (raw) => {
+      const params = raw;
+      if (params.seriesId !== layout.hitSeriesId || !Array.isArray(params.value)) return;
+      const point = usable[Number(params.value[2])];
+      if (!point) return;
+      if (onPointClick) onPointClick(point);
+      else if (point.href && typeof window !== "undefined") window.location.assign(point.href);
+    }
+  }), [layout.hitSeriesId, usable, onPointClick]);
+  const notEnough = !layout.enough ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "uix-chart__insufficient", children: (labels?.notEnough ?? DEFAULT_CORRELATION_SCATTER_LABELS.notEnough)(layout.n, layout.minPoints) }) : null;
+  const stats = showStats && layout.enough ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "uix-chart__stats", children: layout.statsText }) : null;
+  const footerNode = stats || footer != null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    stats,
+    footer
+  ] }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    ChartCore,
+    {
+      engine,
+      option,
+      height,
+      ariaLabel,
+      title,
+      subtitle,
+      header,
+      headerAction,
+      footer: footerNode,
+      loading,
+      empty: empty ?? notEnough ?? void 0,
+      className,
+      group,
+      labels,
+      onEvents,
+      tableHeaders: layout.table.headers,
+      tableData: layout.table.rows
+    }
+  );
+}
+
+// src/chart-analytic.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+echarts.use([
+  import_charts.BarChart,
+  import_charts.LineChart,
+  import_charts.ScatterChart,
+  import_components.AxisPointerComponent,
+  import_components.DataZoomInsideComponent,
+  import_components.GridComponent,
+  import_components.LegendComponent,
+  import_components.MarkAreaComponent,
+  import_components.MarkLineComponent,
+  import_components.MarkPointComponent,
+  import_components.TooltipComponent,
+  import_components.VisualMapPiecewiseComponent,
+  import_renderers.SVGRenderer
+]);
+var analyticEngine = echarts;
+function Chart(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartCore, { ...props, engine: analyticEngine });
+}
+function ChartPanels(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartPanelsCore, { ...props, engine: analyticEngine });
+}
+function CorrelationScatter(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CorrelationScatterCore, { ...props, engine: analyticEngine });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CHART_PANELS_LAYOUT,
+  Chart,
+  ChartLegend,
+  ChartLegendItem,
+  ChartMetric,
+  ChartPanels,
+  CorrelationScatter,
+  DEFAULT_ANALYTIC_LABELS,
+  DEFAULT_CHART_LABELS,
+  DEFAULT_CHART_PANELS_LABELS,
+  DEFAULT_CORRELATION_SCATTER_LABELS,
+  SCATTER_HIT_SIZE,
+  chartPanelsModel,
+  combineMarks,
+  comparisonSeries,
+  correlationScatterModel,
+  crossingPoints,
+  eventMarks,
+  findCrossings,
+  forecastSeries,
+  formatCorrelation,
+  linearFit,
+  mergeChartTheme,
+  niceCeil,
+  normalQuantile,
+  partialPeriod,
+  predictionBand,
+  quantiles,
+  studentTQuantile,
+  thresholdMarks,
+  uixChartAreaGradient,
+  uixChartPalette,
+  uixChartTheme,
+  uixChartTokens
+});