@tensor_1/react 2.37.0 → 2.39.0

package/dist/chart-panels-model.js

@@ -0,0 +1,284 @@
+import { uixChartAreaGradient } from "./chart-theme.js";
+import {
+  DEFAULT_ANALYTIC_LABELS,
+  combineMarks,
+  comparisonSeries,
+  crossingPoints,
+  eventMarks,
+  forecastSeries,
+  partialPeriod,
+  thresholdMarks
+} from "./chart-analytic-model.js";
+const defaultNumber = new Intl.NumberFormat("en", { maximumFractionDigits: 1 });
+const 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}`;
+  }
+};
+const 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;
+}
+const escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);
+const finite = (v) => typeof v === "number" && Number.isFinite(v);
+const 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("");
+}
+export {
+  CHART_PANELS_LAYOUT,
+  DEFAULT_CHART_PANELS_LABELS,
+  chartPanelsModel,
+  niceCeil
+};

package/dist/chart-preset.cjs

@@ -79,6 +79,8 @@ function uixChartTokens(source) {
     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"),
@@ -161,7 +163,8 @@ function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
 function themed(option, theme, element) {
-  return theme === "none" ? option : mergeChartTheme(uixChartTheme(element), option);
+  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) {
@@ -192,17 +195,22 @@ function ChartCore({
   loading = false,
   empty,
   labels: labelOverrides,
-  theme = "uix"
+  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);
+  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;
@@ -254,6 +262,29 @@ function ChartCore({
       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;
@@ -264,6 +295,8 @@ function ChartCore({
   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: [
@@ -282,7 +315,7 @@ function ChartCore({
           style: { height: heightValue },
           role: "img",
           "aria-label": effectiveAriaLabel,
-          "aria-describedby": hasTable ? tableId : void 0
+          "aria-describedby": describedBy
         }
       )
     ] }),
@@ -290,6 +323,10 @@ function ChartCore({
       /* @__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 })
   ] });
 }

package/dist/chart-preset.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { C as ChartProps } from './chart-theme-Cl0IrkKQ.cjs';
-export { a as ChartLabels, b as ChartLegend, c as ChartLegendItem, d as ChartLegendItemProps, e as ChartLegendProps, f as ChartMetric, g as ChartMetricProps, h as ChartTableRow, i as ChartTokenSource, D as DEFAULT_CHART_LABELS, U as UixChartTokens, m as mergeChartTheme, u as uixChartAreaGradient, j as uixChartPalette, k as uixChartTheme, l as uixChartTokens } from './chart-theme-Cl0IrkKQ.cjs';
+import { a as ChartProps } from './ChartCore-BKK2HEfi.cjs';
+export { c as ChartEventHandler, C as ChartLabels, d as ChartLegend, e as ChartLegendItem, f as ChartLegendItemProps, g as ChartLegendProps, h as ChartMetric, i as ChartMetricProps, j as ChartOption, k as ChartTable, l as ChartTableRow, m as ChartTokenSource, D as DEFAULT_CHART_LABELS, U as UixChartTokens, n as mergeChartTheme, u as uixChartAreaGradient, o as uixChartPalette, p as uixChartTheme, q as uixChartTokens } from './ChartCore-BKK2HEfi.cjs';
 import 'echarts';
 
 /** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */

package/dist/chart-preset.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ChartProps } from './components/ChartCore.js';
-export { ChartLabels, ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette } from './components/ChartCore.js';
+export { ChartEventHandler, ChartLabels, ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartOption, ChartTable, ChartTableRow, DEFAULT_CHART_LABELS, uixChartPalette } from './components/ChartCore.js';
 export { ChartTokenSource, UixChartTokens, mergeChartTheme, uixChartAreaGradient, uixChartTheme, uixChartTokens } from './chart-theme.js';
 import 'echarts';
 

package/dist/chart-stats-o4zDhpVm.d.cts

@@ -0,0 +1,46 @@
+/** One observation for {@link linearFit}. */
+interface ChartStatPoint {
+    x: number;
+    y: number;
+}
+/** An ordinary least-squares line through the points, with what a prediction band needs. */
+interface LinearFit {
+    slope: number;
+    intercept: number;
+    /** Pearson correlation; `null` when y is constant (undefined, not zero). */
+    r: number | null;
+    /** Points used (non-finite x or y are skipped). */
+    n: number;
+    /** Mean of x. */
+    xMean: number;
+    /** Sum of squared deviations of x from its mean. */
+    sxx: number;
+    /** Residual standard error, √(SSE / (n − 2)); 0 when n = 2. */
+    residualStdError: number;
+}
+/** A band around the fitted line at each requested x. */
+interface PredictionBandPoint {
+    x: number;
+    y: number;
+    lower: number;
+    upper: number;
+}
+/** Least-squares line through `points`; `null` below two usable points or when every x is equal. */
+declare function linearFit(points: readonly ChartStatPoint[]): LinearFit | null;
+/**
+ * Quantiles by linear interpolation between order statistics (the "type 7" rule of R and NumPy).
+ * `ps` are fractions in [0, 1]; non-finite values are skipped. An empty input gives `null`s.
+ */
+declare function quantiles(values: readonly number[], ps: readonly number[]): (number | null)[];
+/** Inverse of the standard normal CDF (Acklam's rational approximation, |error| < 1.2e-9). */
+declare function normalQuantile(p: number): number;
+/** Student-t quantile by the Cornish–Fisher expansion around the normal (good to ~1e-3 from 3 df). */
+declare function studentTQuantile(p: number, df: number): number;
+/**
+ * A prediction band for new observations at `xs`: ŷ ± t·s·√(1 + 1/n + (x − x̄)² / Sxx), with `level`
+ * the central coverage (0.8 = 80 %). With n = 2 there is no residual error to widen by, so the band
+ * collapses onto the line.
+ */
+declare function predictionBand(fit: LinearFit, xs: readonly number[], level?: number): PredictionBandPoint[];
+
+export { type ChartStatPoint as C, type LinearFit as L, type PredictionBandPoint as P, linearFit as l, normalQuantile as n, predictionBand as p, quantiles as q, studentTQuantile as s };

package/dist/chart-stats.d.ts

@@ -0,0 +1,46 @@
+/** One observation for {@link linearFit}. */
+interface ChartStatPoint {
+    x: number;
+    y: number;
+}
+/** An ordinary least-squares line through the points, with what a prediction band needs. */
+interface LinearFit {
+    slope: number;
+    intercept: number;
+    /** Pearson correlation; `null` when y is constant (undefined, not zero). */
+    r: number | null;
+    /** Points used (non-finite x or y are skipped). */
+    n: number;
+    /** Mean of x. */
+    xMean: number;
+    /** Sum of squared deviations of x from its mean. */
+    sxx: number;
+    /** Residual standard error, √(SSE / (n − 2)); 0 when n = 2. */
+    residualStdError: number;
+}
+/** A band around the fitted line at each requested x. */
+interface PredictionBandPoint {
+    x: number;
+    y: number;
+    lower: number;
+    upper: number;
+}
+/** Least-squares line through `points`; `null` below two usable points or when every x is equal. */
+declare function linearFit(points: readonly ChartStatPoint[]): LinearFit | null;
+/**
+ * Quantiles by linear interpolation between order statistics (the "type 7" rule of R and NumPy).
+ * `ps` are fractions in [0, 1]; non-finite values are skipped. An empty input gives `null`s.
+ */
+declare function quantiles(values: readonly number[], ps: readonly number[]): (number | null)[];
+/** Inverse of the standard normal CDF (Acklam's rational approximation, |error| < 1.2e-9). */
+declare function normalQuantile(p: number): number;
+/** Student-t quantile by the Cornish–Fisher expansion around the normal (good to ~1e-3 from 3 df). */
+declare function studentTQuantile(p: number, df: number): number;
+/**
+ * A prediction band for new observations at `xs`: ŷ ± t·s·√(1 + 1/n + (x − x̄)² / Sxx), with `level`
+ * the central coverage (0.8 = 80 %). With n = 2 there is no residual error to widen by, so the band
+ * collapses onto the line.
+ */
+declare function predictionBand(fit: LinearFit, xs: readonly number[], level?: number): PredictionBandPoint[];
+
+export { type ChartStatPoint, type LinearFit, type PredictionBandPoint, linearFit, normalQuantile, predictionBand, quantiles, studentTQuantile };

package/dist/chart-stats.js

@@ -0,0 +1,89 @@
+const finite = (value) => typeof value === "number" && Number.isFinite(value);
+function linearFit(points) {
+  const usable = points.filter((p) => finite(p.x) && finite(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(finite).slice().sort((a, b) => a - b);
+  return ps.map((p) => {
+    if (!sorted.length || !finite(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(finite).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 };
+  });
+}
+export {
+  linearFit,
+  normalQuantile,
+  predictionBand,
+  quantiles,
+  studentTQuantile
+};

package/dist/chart-theme.d.ts

@@ -15,6 +15,9 @@ interface UixChartTokens {
     event: string;
     partial: string;
     comparison: string;
+    /** Status hues for an emphasised mark (a point that breaches); never a series colour. */
+    warning: string;
+    danger: string;
     surface: string;
     text: string;
     textMuted: string;

package/dist/chart-theme.js

@@ -20,6 +20,8 @@ function uixChartTokens(source) {
     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"),