plotagents 0.5.0 → 0.8.0

package/src/stats.js

@@ -6,6 +6,20 @@ export const finite = (vs) => vs.filter((v) => Number.isFinite(v));
 export const sum = (vs) => vs.reduce((a, b) => a + b, 0);
 export const mean = (vs) => (vs.length ? sum(vs) / vs.length : NaN);
 
+/**
+ * [mín, máx] de los valores finitos con un bucle: `Math.min(...arr)` desborda
+ * la pila con ~150 mil elementos. Vacío → [Infinity, -Infinity] (como Math.min()).
+ */
+export function extent(vs) {
+  let lo = Infinity, hi = -Infinity;
+  for (const v of vs) {
+    if (!Number.isFinite(v)) continue;
+    if (v < lo) lo = v;
+    if (v > hi) hi = v;
+  }
+  return [lo, hi];
+}
+
 export function variance(vs) {
   const n = vs.length;
   if (n < 2) return 0;
@@ -97,11 +111,13 @@ export function histogram(vs, { bins, binWidth, domain } = {}) {
     }
     step = bins ? (hi - lo) / bins : niceBinStep(hi - lo, n);
   }
-  const start = bins ? lo : Math.floor(lo / step + 1e-9) * step;
+  const start = bins ? lo : +(Math.floor(lo / step + 1e-9) * step).toPrecision(15);
   const count = Math.max(1, Math.ceil((hi - start) / step - 1e-9));
-  const out = Array.from({ length: count }, (_, i) => ({ x0: start + i * step, x1: start + (i + 1) * step, count: 0 }));
+  const out = Array.from({ length: count }, (_, i) => ({ x0: +(start + i * step).toPrecision(15), x1: +(start + (i + 1) * step).toPrecision(15), count: 0 }));
   for (const v of s) {
-    let i = Math.floor((v - start) / step);
+    // Con `domain`, lo que cae fuera no se cuenta (antes se apilaba en la última barra).
+    if (domain && (v < domain[0] || v > domain[1])) continue;
+    let i = Math.floor((v - start) / step + 1e-9);
     if (i >= count) i = count - 1;
     if (i >= 0) out[i].count++;
   }
@@ -112,11 +128,16 @@ export function histogram(vs, { bins, binWidth, domain } = {}) {
 export function scottBandwidth(vs) {
   const v = finite(vs);
   const s = sd(v);
-  const iqr = quantile([...v].sort((a, b) => a - b), 0.75) - quantile([...v].sort((a, b) => a - b), 0.25);
+  const sorted = [...v].sort((a, b) => a - b);
+  const iqr = quantile(sorted, 0.75) - quantile(sorted, 0.25);
   const sigma = Math.min(s, iqr / 1.349) || s || 1;
   return 1.06 * sigma * v.length ** -0.2;
 }
 
+const extentOf = extent;
+/** Sobre este número de valores, la KDE usa binning lineal. */
+export const KDE_BIN_MIN = 2048;
+
 /**
  * Densidad por kernel gaussiano. Devuelve [[x, densidad], ...] en una grilla.
  * `cut` extiende la grilla `cut` anchos de banda más allá de los extremos.
@@ -125,14 +146,29 @@ export function kde(vs, { bandwidth, adjust = 1, gridSize = 160, extent, cut = 3
   const v = finite(vs);
   if (!v.length) return [];
   const bw = (bandwidth ?? scottBandwidth(v)) * adjust || 1;
-  let [lo, hi] = extent || [Math.min(...v) - cut * bw, Math.max(...v) + cut * bw];
+  const [vmin, vmax] = extentOf(v);
+  let [lo, hi] = extent || [vmin - cut * bw, vmax + cut * bw];
   if (clip) { lo = Math.max(lo, clip[0]); hi = Math.min(hi, clip[1]); }
   const k = 1 / (v.length * bw * Math.sqrt(2 * Math.PI));
+  // Muchos valores: binning lineal en ~1024 nodos (cada valor reparte su peso
+  // entre los dos nodos vecinos). Error despreciable frente al ancho de banda.
+  let xsK = v, ws = null;
+  if (v.length > KDE_BIN_MIN && vmax > vmin) {
+    const B = 1024, dx = (vmax - vmin) / (B - 1);
+    ws = new Float64Array(B);
+    for (const xi of v) {
+      const t = (xi - vmin) / dx, j = Math.min(B - 2, Math.floor(t)), f = t - j;
+      ws[j] += 1 - f; ws[j + 1] += f;
+    }
+    xsK = Array.from({ length: B }, (_, j) => vmin + j * dx);
+  }
   const out = [];
   for (let i = 0; i < gridSize; i++) {
     const x = lo + ((hi - lo) * i) / (gridSize - 1);
     let d = 0;
-    for (const xi of v) { const u = (x - xi) / bw; if (u > -6 && u < 6) d += Math.exp(-0.5 * u * u); }
+    if (ws) {
+      for (let j = 0; j < xsK.length; j++) { if (!ws[j]) continue; const u = (x - xsK[j]) / bw; if (u > -6 && u < 6) d += ws[j] * Math.exp(-0.5 * u * u); }
+    } else for (const xi of v) { const u = (x - xi) / bw; if (u > -6 && u < 6) d += Math.exp(-0.5 * u * u); }
     out.push([x, d * k]);
   }
   return out;
@@ -216,28 +252,51 @@ export function pearson(xs, ys) {
   return sxx && syy ? sxy / Math.sqrt(sxx * syy) : 0;
 }
 
-/** LOWESS (Cleveland): suavizado local robusto. Devuelve [[x, y], ...] ordenado. */
-export function lowess(xs, ys, { frac = 2 / 3, iters = 2 } = {}) {
+/**
+ * LOWESS (Cleveland): suavizado local robusto. Devuelve [[x, y], ...] ordenado.
+ * Como x está ordenado, los r vecinos más cercanos forman una ventana contigua
+ * (dos punteros, sin ordenar distancias). Con muchos puntos (> 400) se ajusta
+ * solo en ~200 anclas y se interpola entre ellas (el `delta` de statsmodels).
+ */
+export function lowess(xs, ys, { frac = 2 / 3, iters = 2, delta } = {}) {
   const pts = xs.map((x, i) => [x, ys[i]]).filter(([x, y]) => Number.isFinite(x) && Number.isFinite(y)).sort((a, b) => a[0] - b[0]);
   const n = pts.length;
   if (n < 3) return pts;
-  const r = Math.max(2, Math.ceil(frac * n));
+  const X = pts.map((p) => p[0]), Y = pts.map((p) => p[1]);
+  const r = Math.min(n, Math.max(2, Math.ceil(frac * n)));
+  const dl = delta ?? (n > 400 ? (X[n - 1] - X[0]) / 200 : 0);
+  // Anclas: el primero, luego el primer punto a más de `dl` del ancla anterior, y el último.
+  const anchors = [0];
+  if (dl > 0) {
+    for (let i = 1; i < n; i++) if (X[i] > X[anchors[anchors.length - 1]] + dl) anchors.push(i);
+    if (anchors[anchors.length - 1] !== n - 1) anchors.push(n - 1);
+  } else for (let i = 1; i < n; i++) anchors.push(i);
   let robust = new Array(n).fill(1);
-  let fit = new Array(n).fill(0);
+  const fit = new Array(n).fill(0);
   for (let it = 0; it <= iters; it++) {
-    for (let i = 0; i < n; i++) {
-      const x0 = pts[i][0];
-      const d = pts.map(([x]) => Math.abs(x - x0)).sort((a, b) => a - b);
-      const h = d[Math.min(n - 1, r - 1)] || 1e-12;
+    let lo = 0;
+    for (const i of anchors) {
+      const x0 = X[i];
+      while (lo + r < n && X[lo + r] - x0 < x0 - X[lo]) lo++;
+      const hiI = lo + r - 1;
+      const h = Math.max(x0 - X[lo], X[hiI] - x0) || 1e-12;
       let sw = 0, swx = 0, swy = 0, swxx = 0, swxy = 0;
-      for (let j = 0; j < n; j++) {
-        const u = Math.abs(pts[j][0] - x0) / h;
+      for (let j = lo; j <= hiI; j++) {
+        const u = Math.abs(X[j] - x0) / h;
         const w = u < 1 ? (1 - u ** 3) ** 3 * robust[j] : 0;
-        sw += w; swx += w * pts[j][0]; swy += w * pts[j][1]; swxx += w * pts[j][0] ** 2; swxy += w * pts[j][0] * pts[j][1];
+        sw += w; swx += w * X[j]; swy += w * Y[j]; swxx += w * X[j] ** 2; swxy += w * X[j] * Y[j];
       }
       const den = sw * swxx - swx * swx;
       fit[i] = Math.abs(den) < 1e-12 ? swy / (sw || 1) : ((swxx * swy - swx * swxy) + (sw * swxy - swx * swy) * x0) / den;
     }
+    // Entre anclas: interpolación lineal (mismo x → mismo valor).
+    for (let a = 0; a < anchors.length - 1; a++) {
+      const i0 = anchors[a], i1 = anchors[a + 1];
+      for (let i = i0 + 1; i < i1; i++) {
+        const span = X[i1] - X[i0];
+        fit[i] = span ? fit[i0] + ((fit[i1] - fit[i0]) * (X[i] - X[i0])) / span : fit[i0];
+      }
+    }
     const res = pts.map(([, y], i) => Math.abs(y - fit[i]));
     const m = median(res) || 1e-12;
     robust = res.map((e) => { const u = e / (6 * m); return u < 1 ? (1 - u * u) ** 2 : 0; });

package/src/svg.js

@@ -3,7 +3,10 @@
 import { ctx } from './context.js';
 
 const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
-export const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ESC[c]);
+// Además de escapar, quita los caracteres que XML 1.0 prohíbe (controles y
+// sustitutos sueltos): un solo \x00 en un dato invalida todo el SVG.
+const BAD_XML = /[\x00-\x08\x0B\x0C\x0E-\x1F\uFFFE\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g;
+export const esc = (s) => String(s ?? '').replace(BAD_XML, '').replace(/[&<>"']/g, (c) => ESC[c]);
 
 /** Redondea a 2 decimales para SVG compactos. */
 export const r2 = (n) => Math.round(n * 100) / 100;

package/src/text.js

@@ -24,6 +24,11 @@ set('—', 0.9);
 set('▲▼■●', 0.9);
 set('·', 0.3);
 set('→', 0.9);
+set('\u202F', 0.17); // espacio fino (miles en francés)
+set('\u00A0', 0.27);
+set('✓✗', 0.7);
+set('‹›', 0.32);
+set('#', 0.6);
 
 export function measure(str, size = 12, weight = 400) {
   let w = 0;

package/src/theme.js

@@ -14,6 +14,8 @@ export const MONO = "'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, mon
 export const FONT_CSS =
   'https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@400;500;600;700&display=swap';
 
+import { resolveColorScale, interpolate, sample } from './colorscales.js';
+
 // Tokens no cromáticos, compartidos por ambos temas y configurables por JSON.
 const STRUCT = {
   font: { family: FONT, mono: MONO, import: FONT_CSS },
@@ -105,28 +107,111 @@ export function deepMerge(base, over) {
   return out;
 }
 
+// Colores válidos: hex, rgb()/hsl() y nombres CSS. Cualquier otra cosa se
+// descarta: los colores viajan a atributos, CSS y tooltips (sin inyección).
+const COLOR_RE = /^(#[0-9a-f]{3,8}|(rgba?|hsla?)\([\d\s.,%/+-]+\)|[a-z]{3,20}|transparent|none)$/i;
+export const isColor = (c) => typeof c === 'string' && COLOR_RE.test(c.trim());
+const COLOR_KEYS = ['surface', 'ink', 'lede', 'muted', 'grid', 'axis', 'tint', 'tint2', 'dim', 'other'];
+
+/** Alias legibles de los tokens (background → surface, text → ink, …). */
+function normalizeTokens(t) {
+  if (!isObj(t)) return t;
+  const o = { ...t };
+  if (o.background !== undefined && o.surface === undefined) o.surface = o.background;
+  if (o.text !== undefined && o.ink === undefined) o.ink = o.text;
+  if (o.textMuted !== undefined && o.muted === undefined) o.muted = o.textMuted;
+  // grid: color o { color, dash, width }.
+  if (isObj(o.grid)) { o.gridStyle = { ...(o.gridStyle || {}), ...o.grid }; if (o.grid.color) o.grid = o.grid.color; else delete o.grid; }
+  if (isObj(o.axis)) { o.axisStyle = { ...(o.axisStyle || {}), ...o.axis }; if (o.axis.color) o.axis = o.axis.color; else delete o.axis; }
+  if (o.barRadius !== undefined) o.marks = { ...(o.marks || {}), barRadius: o.barRadius };
+  if (o.radius !== undefined) o.marks = { ...(o.marks || {}), barRadius: o.marks?.barRadius ?? o.radius, radius: o.radius };
+  if (o.lineWidth !== undefined) o.marks = { ...(o.marks || {}), lineWidth: o.lineWidth };
+  if (o.padding !== undefined) o.layout = { ...(o.layout || {}), padding: o.padding };
+  if (typeof o.font === 'string') o.font = fontSpec(o.font);
+  return o;
+}
+
+/** Descarta colores inválidos (vuelve al del tema base). */
+function sanitize(theme, base) {
+  for (const k of COLOR_KEYS) if (theme[k] !== undefined && !isColor(theme[k])) theme[k] = base[k];
+  for (const k of ['categorical', 'sequential', 'diverging']) {
+    if (Array.isArray(theme[k])) { const ok = theme[k].filter(isColor); theme[k] = ok.length ? ok : base[k]; }
+  }
+  if (theme.accent !== undefined && !isColor(theme.accent)) delete theme.accent;
+  if (isObj(theme.tooltip)) for (const k of ['bg', 'ink']) if (theme.tooltip[k] !== undefined && !isColor(theme.tooltip[k])) delete theme.tooltip[k];
+  if (isObj(theme.status)) for (const k of Object.keys(theme.status)) if (!isColor(theme.status[k])) theme.status[k] = base.status?.[k];
+  if (theme.font && typeof theme.font.import === 'string' && !/^https:\/\/[^\s'"()<>\\]+$/.test(theme.font.import)) theme.font = { ...theme.font, import: undefined };
+  if (theme.font && typeof theme.font.family === 'string') theme.font = { ...theme.font, family: theme.font.family.replace(/[<>{};]/g, '') };
+  return theme;
+}
+
+/** Paleta categórica por nombre: propias, matplotlib cualitativas o muestras de una colormap. */
+function namedPalette(name, n = 8) {
+  if (palettes[name]) return palettes[name];
+  const cs = resolveColorScale(name);
+  if (!cs) return null;
+  if (cs.kind === 'qualitative') return cs.stops;
+  // Escala continua como paleta: n muestras sin los extremos (estilo seaborn).
+  return Array.from({ length: n }, (_, i) => interpolate(cs.stops, (i + 1) / (n + 1)));
+}
+
+/** Rampa secuencial/divergente por nombre: propias o cualquier colormap. */
+function namedRamp(name) {
+  if (ramps[name]) return ramps[name];
+  const cs = resolveColorScale(name);
+  return cs && cs.kind !== 'qualitative' ? sample(cs.stops, 17) : null;
+}
+
 /**
- * Tema = JSON. Acepta un nombre ("papel", "noche") o un objeto parcial que se
- * fusiona en profundidad sobre `extends` (por defecto "papel"):
+ * Registra un tema con nombre (se fusiona sobre `extends`, por defecto papel):
+ *   registerTheme('acme', { background: '#FFF', ink: '#111', categorical: 'tab10', grid: { dash: '2 3' } })
+ *   configure({ theme: 'acme' })   // todos los gráficos
+ */
+export function registerTheme(name, theme) {
+  if (!name || typeof name !== 'string') throw new TypeError('registerTheme(name, theme): falta el nombre.');
+  if (name === 'papel' || name === 'noche' || name === 'light' || name === 'dark') throw new TypeError(`"${name}" es un tema de fábrica: usa otro nombre o { extends: "${name}" }.`);
+  themes[name] = { ...getTheme(theme || {}), name };
+  return themes[name];
+}
+
+/**
+ * Tema = JSON. Acepta un nombre ("papel", "noche" o uno registrado) o un
+ * objeto parcial que se fusiona en profundidad sobre `extends` (por defecto
+ * "papel"):
  *   { extends: "noche", categorical: ["#..."], type: { title: 24 }, marks: { lineWidth: 3 } }
- * `categorical`, `sequential` y `diverging` aceptan también un nombre de paleta.
+ * Alias: background, text, accent, grid { color, dash, width }, tooltip { bg, ink }, radius, barRadius, font.
+ * `categorical`, `sequential` y `diverging` aceptan también un nombre de paleta o colormap.
  */
 export function getTheme(t) {
   if (!t) return papel;
   if (typeof t === 'string') return themes[t] || papel;
-  const base = themes[t.extends] || (t.mode === 'dark' ? noche : papel);
-  const merged = deepMerge(base, t);
-  if (typeof merged.categorical === 'string') merged.categorical = palettes[merged.categorical] || base.categorical;
-  if (typeof merged.sequential === 'string') merged.sequential = ramps[merged.sequential] || base.sequential;
-  if (typeof merged.diverging === 'string') merged.diverging = ramps[merged.diverging] || base.diverging;
-  return merged;
+  const over = normalizeTokens(t);
+  const base = (typeof over.extends === 'string' ? themes[over.extends] : isObj(over.extends) ? getTheme(over.extends) : null) || (over.mode === 'dark' ? noche : papel);
+  const merged = deepMerge(base, over);
+  delete merged.extends;
+  if (typeof merged.categorical === 'string') merged.categorical = namedPalette(merged.categorical) || base.categorical;
+  if (typeof merged.sequential === 'string') merged.sequential = namedRamp(merged.sequential) || base.sequential;
+  if (typeof merged.diverging === 'string') merged.diverging = namedRamp(merged.diverging) || base.diverging;
+  return sanitize(merged, base);
 }
 
-/** Tema efectivo de un spec: `theme` + atajos `palette` y `ramp`. */
+/** Tema efectivo de un spec: `theme` + atajos `palette`, `ramp` y `colorScale`. */
 export function themeFor(spec = {}) {
   let t = getTheme(spec.theme);
-  if (spec.palette) t = { ...t, categorical: Array.isArray(spec.palette) ? spec.palette : palettes[spec.palette] || t.categorical };
-  if (spec.ramp) t = { ...t, sequential: Array.isArray(spec.ramp) ? spec.ramp : ramps[spec.ramp] || t.sequential };
+  if (spec.palette) {
+    const p = Array.isArray(spec.palette) ? spec.palette.filter(isColor) : namedPalette(spec.palette);
+    if (p && p.length) t = { ...t, categorical: p };
+  }
+  if (spec.ramp) {
+    const r = Array.isArray(spec.ramp) ? spec.ramp.filter(isColor) : namedRamp(spec.ramp);
+    if (r && r.length >= 2) t = { ...t, sequential: r };
+  }
+  const cs = resolveColorScale(spec.colorScale ?? spec.cmap ?? spec.colormap);
+  if (cs && cs.kind !== 'qualitative') {
+    const stops = sample(cs.stops, 17);
+    // `cmap`: la escala se usa completa (sin recortar el extremo claro como la rampa de fábrica).
+    t = cs.kind === 'diverging' ? { ...t, diverging: stops, cmap: cs.name } : { ...t, sequential: [stops[0], ...stops], cmap: cs.name };
+  }
   return t;
 }
 
@@ -185,11 +270,13 @@ export function ramp(stops, t) {
  */
 export function colorMap(keys, theme, overrides = {}) {
   const map = new Map();
+  // Los colores fijados por el usuario no se repiten en las demás entidades.
+  const taken = new Set(Object.values(overrides || {}).map((c) => String(c).toLowerCase()));
+  const free = theme.categorical.filter((c) => !taken.has(String(c).toLowerCase()));
   let i = 0;
   for (const k of keys) {
     if (overrides && overrides[k]) map.set(k, overrides[k]);
-    else map.set(k, i < theme.categorical.length ? theme.categorical[i] : theme.other);
-    if (!(overrides && overrides[k])) i++;
+    else map.set(k, i < free.length ? free[i++] : theme.other);
   }
   return map;
 }