@tensor_1/react 2.38.0 → 2.40.0

package/dist/correlation-scatter-model.js

@@ -0,0 +1,179 @@
+import { linearFit, quantiles } from "./chart-stats.js";
+import { combineMarks, thresholdMarks } from "./chart-analytic-model.js";
+import { niceCeil } from "./chart-panels-model.js";
+const defaultNumber = 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);
+}
+const 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) => defaultNumber.format(x),
+  formatY: (y) => defaultNumber.format(y)
+};
+const SCATTER_HIT_SIZE = 26;
+const DOT_SIZE = 9;
+const escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);
+const 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">${escapeHtml(point.label)}</div><div>${escapeHtml(spec.xLabel)}: ${escapeHtml(labels.formatX(point.x))}</div><div>${escapeHtml(spec.yLabel)}: ${escapeHtml(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" };
+}
+export {
+  DEFAULT_CORRELATION_SCATTER_LABELS,
+  SCATTER_HIT_SIZE,
+  correlationScatterModel,
+  formatCorrelation
+};

package/dist/icons/Icon.d.ts

@@ -19,14 +19,27 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     z?: number | string | undefined | undefined;
     opacity?: number | string | undefined | undefined;
     r?: number | string | undefined | undefined;
-    id?: string | undefined | undefined;
+    target?: string | undefined | undefined;
+    min?: number | string | undefined | undefined;
+    max?: number | string | undefined | undefined;
     name?: string | undefined | undefined;
+    rotate?: number | string | undefined | undefined;
+    offset?: number | string | undefined | undefined;
+    overflow?: number | string | undefined | undefined;
+    end?: number | string | undefined | undefined;
+    scale?: number | string | undefined | undefined;
+    to?: number | string | undefined | undefined;
     x?: number | string | undefined | undefined;
-    y?: number | string | undefined | undefined;
     cursor?: number | string | undefined | undefined;
+    id?: string | undefined | undefined;
+    radius?: number | string | undefined | undefined;
+    from?: number | string | undefined | undefined;
+    y?: number | string | undefined | undefined;
+    slope?: number | string | undefined | undefined;
+    intercept?: number | string | undefined | undefined;
+    points?: string | undefined | undefined;
     children?: react.ReactNode;
     clipPath?: string | undefined | undefined;
-    radius?: number | string | undefined | undefined;
     media?: string | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
     lang?: string | undefined | undefined;
@@ -246,7 +259,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     onAnimationIterationCapture?: react.AnimationEventHandler<SVGSVGElement> | undefined;
     onTransitionEnd?: react.TransitionEventHandler<SVGSVGElement> | undefined;
     onTransitionEndCapture?: react.TransitionEventHandler<SVGSVGElement> | undefined;
-    end?: number | string | undefined | undefined;
     alphabetic?: number | string | undefined | undefined;
     ideographic?: number | string | undefined | undefined;
     mathematical?: number | string | undefined | undefined;
@@ -256,17 +268,14 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     unicode?: number | string | undefined | undefined;
     clip?: number | string | undefined | undefined;
     stroke: string;
-    offset?: number | string | undefined | undefined;
+    href?: string | undefined | undefined;
     capHeight?: number | string | undefined | undefined;
     dy?: number | string | undefined | undefined;
     dx?: number | string | undefined | undefined;
     transform?: string | undefined | undefined;
     mask?: string | undefined | undefined;
     path?: string | undefined | undefined;
-    max?: number | string | undefined | undefined;
     method?: string | undefined | undefined;
-    min?: number | string | undefined | undefined;
-    target?: string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     accentHeight?: number | string | undefined | undefined;
     additive?: "replace" | "sum" | undefined | undefined;
@@ -323,7 +332,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     fontVariant?: number | string | undefined | undefined;
     format?: number | string | undefined | undefined;
     fr?: number | string | undefined | undefined;
-    from?: number | string | undefined | undefined;
     fx?: number | string | undefined | undefined;
     fy?: number | string | undefined | undefined;
     g1?: number | string | undefined | undefined;
@@ -336,11 +344,9 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     gradientUnits?: string | undefined | undefined;
     horizAdvX?: number | string | undefined | undefined;
     horizOriginX?: number | string | undefined | undefined;
-    href?: string | undefined | undefined;
     imageRendering?: number | string | undefined | undefined;
     in2?: number | string | undefined | undefined;
     in?: string | undefined | undefined;
-    intercept?: number | string | undefined | undefined;
     k1?: number | string | undefined | undefined;
     k2?: number | string | undefined | undefined;
     k3?: number | string | undefined | undefined;
@@ -371,7 +377,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     orient?: number | string | undefined | undefined;
     orientation?: number | string | undefined | undefined;
     origin?: number | string | undefined | undefined;
-    overflow?: number | string | undefined | undefined;
     overlinePosition?: number | string | undefined | undefined;
     overlineThickness?: number | string | undefined | undefined;
     paintOrder?: number | string | undefined | undefined;
@@ -381,7 +386,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     patternTransform?: number | string | undefined | undefined;
     patternUnits?: string | undefined | undefined;
     pointerEvents?: number | string | undefined | undefined;
-    points?: string | undefined | undefined;
     pointsAtX?: number | string | undefined | undefined;
     pointsAtY?: number | string | undefined | undefined;
     pointsAtZ?: number | string | undefined | undefined;
@@ -397,13 +401,10 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     requiredFeatures?: number | string | undefined | undefined;
     restart?: number | string | undefined | undefined;
     result?: string | undefined | undefined;
-    rotate?: number | string | undefined | undefined;
     rx?: number | string | undefined | undefined;
     ry?: number | string | undefined | undefined;
-    scale?: number | string | undefined | undefined;
     seed?: number | string | undefined | undefined;
     shapeRendering?: number | string | undefined | undefined;
-    slope?: number | string | undefined | undefined;
     spacing?: number | string | undefined | undefined;
     specularConstant?: number | string | undefined | undefined;
     specularExponent?: number | string | undefined | undefined;
@@ -433,7 +434,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     textDecoration?: number | string | undefined | undefined;
     textLength?: number | string | undefined | undefined;
     textRendering?: number | string | undefined | undefined;
-    to?: number | string | undefined | undefined;
     transformOrigin?: string | undefined | undefined;
     u1?: number | string | undefined | undefined;
     u2?: number | string | undefined | undefined;