plotagents 0.5.0 → 0.7.0

package/src/runtime.js

@@ -6,6 +6,7 @@ import { themeFor, FONT_CSS } from './theme.js';
 import { ensureData, fieldKind, uniq, num, PlotError } from './data.js';
 import { parseDate, formatDate } from './format.js';
 import { dateUnit } from './scale.js';
+import { isGeoUrl } from './geo/registry.js';
 
 let plotFn = null;
 let resolveFn = null;
@@ -26,22 +27,34 @@ function ensureAssets() {
   const st = document.createElement('style');
   st.id = 'pa-runtime-css';
   st.textContent = `
-.pa-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:4px 0 2px;font-size:12px;color:var(--pa-muted);user-select:none}
-.pa-play{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:var(--pa-accent);color:var(--pa-surface);cursor:pointer;display:grid;place-items:center;padding:0}
-.pa-play:focus-visible{outline:2px solid var(--pa-accent);outline-offset:2px}
+.pa-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 0 4px;font-size:12.5px;color:var(--pa-muted);user-select:none;font-variant-numeric:tabular-nums}
+.pa-play{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--pa-line);background:transparent;color:var(--pa-ink);cursor:pointer;display:grid;place-items:center;padding:0 0 0 1px;transition:border-color .15s}
+.pa-play[aria-pressed=true]{padding:0}
+.pa-play:hover{border-color:var(--pa-ink)}
+.pa-play:focus-visible,.pa-seg button:focus-visible{outline:2px solid var(--pa-accent);outline-offset:2px}
 .pa-play svg{display:block}
-.pa-track{position:relative;flex:1 1 220px;min-width:0;height:40px}
-.pa-track svg.pa-ov{position:absolute;left:0;top:0;width:100%;height:28px;overflow:visible}
-.pa-track input[type=range]{position:absolute;left:0;width:100%;top:6px;margin:0;height:22px;background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none}
-.pa-track input[type=range]::-webkit-slider-runnable-track{background:transparent;height:22px}
-.pa-track input[type=range]::-moz-range-track{background:transparent;height:22px}
-.pa-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--pa-accent);border:2px solid var(--pa-surface);box-shadow:0 1px 4px rgba(11,15,43,.3);cursor:grab}
-.pa-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;background:var(--pa-accent);border:2px solid var(--pa-surface);box-shadow:0 1px 4px rgba(11,15,43,.3);cursor:grab}
-.pa-track input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--pa-accent);outline-offset:2px}
-.pa-ticks{position:absolute;left:0;right:0;top:28px;height:12px;font-size:10.5px;color:var(--pa-muted)}
-.pa-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
-.pa-now{flex:none;font-weight:600;color:var(--pa-ink);font-size:13px;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
-.pa-chart [data-drill],.pa-chart [data-node]{cursor:pointer}
+.pa-seg{display:flex;flex-wrap:wrap;gap:2px 4px}
+.pa-seg button{font:inherit;font-size:12.5px;color:var(--pa-muted);background:none;border:0;border-radius:0;padding:5px 6px;cursor:pointer;box-shadow:inset 0 -1px 0 transparent;transition:color .15s}
+.pa-seg button:hover{color:var(--pa-ink)}
+.pa-seg button[aria-checked=true]{color:var(--pa-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--pa-accent)}
+.pa-track{position:relative;flex:1 1 200px;min-width:0;height:34px}
+.pa-track input[type=range]{position:absolute;left:0;width:100%;top:4px;margin:0;height:16px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--pa-ink) var(--pa-p,100%),var(--pa-line) var(--pa-p,100%)) center/100% 2px no-repeat;cursor:pointer}
+.pa-dual input[type=range]{background:none;pointer-events:none}
+.pa-dual::before,.pa-dual::after{content:'';position:absolute;top:11px;height:2px;border-radius:1px}
+.pa-dual::before{left:0;right:0;background:var(--pa-line)}
+.pa-dual::after{left:var(--pa-a,0%);right:calc(100% - var(--pa-b,100%));background:var(--pa-ink)}
+.pa-track input[type=range]::-webkit-slider-runnable-track{background:transparent;height:16px}
+.pa-track input[type=range]::-moz-range-track{background:transparent;height:16px}
+.pa-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:12px;height:12px;margin-top:2px;border-radius:50%;background:var(--pa-ink);border:2px solid var(--pa-surface);box-shadow:0 0 0 1px var(--pa-ink);cursor:grab;position:relative;z-index:1}
+.pa-track input[type=range]::-moz-range-thumb{pointer-events:auto;width:10px;height:10px;border-radius:50%;background:var(--pa-ink);border:2px solid var(--pa-surface);box-shadow:0 0 0 1px var(--pa-ink);cursor:grab}
+.pa-track input[type=range]:focus-visible{outline:none}
+.pa-track input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--pa-ink),0 0 0 4px color-mix(in srgb,var(--pa-accent) 35%,transparent)}
+.pa-ends{position:absolute;left:0;right:0;top:22px;display:flex;justify-content:space-between;font-size:10.5px;color:var(--pa-muted);pointer-events:none}
+.pa-now{flex:none;font-weight:600;color:var(--pa-ink);font-size:12.5px;min-width:4ch;text-align:right}
+.pa-chart [data-drill],.pa-chart [data-node],.pa-chart [data-group]{cursor:pointer}
+.pa-chart [data-group]:focus-visible,.pa-chart .pa-key:focus-visible{outline:2px solid var(--pa-accent,#3A47B8);outline-offset:1px}
+.pa-live .pa-chev{opacity:1!important}
+.pa-chart .pa-gh:hover .pa-hit{fill:var(--pa-tint,#ECEEF8);fill-opacity:.5}
 .pa-chart [data-node]:focus-visible{outline:none;stroke:var(--pa-accent);stroke-width:3px}
 @media (prefers-reduced-motion: reduce){.pa-m{transition:none!important}}`;
   document.head.appendChild(st);
@@ -51,9 +64,44 @@ function ensureAssets() {
  * Dibuja `spec` en un elemento (o selector) del navegador.
  * Devuelve { svg, spec, update(spec), destroy() }.
  */
+const geoCache = new Map();
+/** Descarga (una vez por URL) un GeoJSON o TopoJSON. */
+export function loadGeo(url) {
+  if (!geoCache.has(url)) geoCache.set(url, fetch(url).then((r) => { if (!r.ok) throw new PlotError(`No pude descargar el mapa (${r.status}): ${url}`); return r.json(); }));
+  return geoCache.get(url);
+}
+
+/**
+ * `geo` como URL ("/mapas/comunas.geojson", "https://…/x.topojson"): se
+ * descarga y luego se dibuja. Devuelve el mismo objeto que render(), con
+ * `ready` (una promesa) mientras llega el archivo.
+ */
+function renderRemote(host, spec, opts) {
+  let inner = null, pending = null, dead = false;
+  const handle = {
+    get svg() { return inner?.svg ?? null; },
+    get spec() { return inner?.spec ?? spec; },
+    update(s) { if (inner) return inner.update(s); pending = s; },
+    destroy() { dead = true; inner?.destroy(); },
+  };
+  host.setAttribute('aria-busy', 'true');
+  handle.ready = loadGeo(spec.geo).then((geo) => {
+    host.removeAttribute('aria-busy');
+    if (dead) return handle;
+    inner = render(host, { ...(pending || spec), geo }, opts);
+    return handle;
+  }, (e) => {
+    host.removeAttribute('aria-busy');
+    host.innerHTML = `<p style="font:13px system-ui;color:#C9531A">${String(e.message).replace(/</g, '&lt;')}</p>`;
+    throw e;
+  });
+  return handle;
+}
+
 export function render(target, spec, opts = {}) {
   const host = typeof target === 'string' ? document.querySelector(target) : target;
   if (!host) throw new PlotError('No encontré el elemento destino.', 'render("#grafico", spec) o render(elemento, spec)');
+  if (spec && typeof spec.geo === 'string' && typeof fetch !== 'undefined' && isGeoUrl(spec.geo)) return renderRemote(host, spec, opts);
   ensureAssets();
   let state = resolveFn ? resolveFn(spec) : { ...spec };
   // Fuente propia (configure({ font }) o spec.font): se carga una sola vez.
@@ -72,14 +120,14 @@ export function render(target, spec, opts = {}) {
   // Posiciones anteriores de los nodos (para animar el cambio de foco).
   const nodePos = () => {
     const m = new Map();
-    for (const c of chart.querySelectorAll('[data-node]')) m.set(c.getAttribute('data-node'), [+c.getAttribute('cx'), +c.getAttribute('cy')]);
+    for (const c of chart.querySelectorAll('circle[data-node]')) m.set(c.getAttribute('data-node'), [+c.getAttribute('cx'), +c.getAttribute('cy')]);
     return m;
   };
   const reduced = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
   const animateFrom = (before) => {
     if (reduced || !before.size || typeof Element === 'undefined' || !Element.prototype.animate) return;
     const ease = 'cubic-bezier(.2,.7,.2,1)';
-    for (const c of chart.querySelectorAll('[data-node]')) {
+    for (const c of chart.querySelectorAll('circle[data-node]')) {
       const old = before.get(c.getAttribute('data-node'));
       if (!old) continue;
       const dx = old[0] - +c.getAttribute('cx'), dy = old[1] - +c.getAttribute('cy');
@@ -104,6 +152,34 @@ export function render(target, spec, opts = {}) {
       if (old && /^#/.test(now || '') && old.toLowerCase() !== now.toLowerCase()) n.animate([{ fill: old }, { fill: now }], { duration: 420, easing: 'ease-out' });
     }
   };
+  // Leyenda: en treemap y sunburst, clic = ver solo esa categoría en todo el
+  // plano (otro clic vuelve); en todos los gráficos, shift + clic la excluye
+  // (o la vuelve a sumar). Devuelve true si tomó el clic.
+  const onLegend = (key, e) => {
+    const v = key.getAttribute('data-value');
+    if (v === null || key.getAttribute('data-color') === 'dashed') return false;
+    const ex = [].concat(state.exclude ?? []).map(String);
+    if (e.shiftKey || key.classList.contains('pa-key-off')) {
+      const next = ex.includes(v) ? ex.filter((x) => x !== v) : [...ex, v];
+      // Colores fijos: los de la leyenda actual, para que nada cambie de color.
+      const colors = { ...(state.colors || {}) };
+      for (const k of chart.querySelectorAll('.pa-key[data-value]')) {
+        const c = k.getAttribute('data-color');
+        if (/^#/.test(c || '') && !k.classList.contains('pa-key-off') && !(k.getAttribute('data-value') in colors)) colors[k.getAttribute('data-value')] = c;
+      }
+      const f = Array.isArray(state.focus) && state.focus[0] === v ? undefined : state.focus;
+      state = { ...state, exclude: next.length ? next : undefined, colors, focus: f };
+      draw();
+      return true;
+    }
+    if (state.type === 'treemap' || state.type === 'sunburst') {
+      const cur = Array.isArray(state.focus) ? state.focus : [];
+      state = { ...state, focus: cur.length === 1 && cur[0] === v ? [] : [v] };
+      draw();
+      return true;
+    }
+    return false;
+  };
   const draw = () => {
     const before = nodePos();
     const fills = regionFills();
@@ -111,11 +187,18 @@ export function render(target, spec, opts = {}) {
     animateFrom(before);
     tweenFills(fills);
     chart.__pa = false;
+    chart.__paLegend = onLegend;
     attach(chart);
+    const svgNode = chart.querySelector('svg');
+    if (svgNode) svgNode.classList.add('pa-live');
     // Red: clic en un nodo lo lleva al centro y destaca sus conexiones; otro clic (o Esc) vuelve.
     for (const n of chart.querySelectorAll('[data-node]')) {
-      n.setAttribute('tabindex', '0');
-      n.setAttribute('role', 'button');
+      // Solo los círculos son paradas de tabulación; las etiquetas también responden al clic.
+      if (n.tagName.toLowerCase() === 'circle') {
+        n.setAttribute('tabindex', '0');
+        n.setAttribute('role', 'button');
+        n.setAttribute('aria-label', (n.getAttribute('data-tip') || n.getAttribute('data-node')).split('\n')[0]);
+      }
       const id = n.getAttribute('data-node');
       const go = () => { state = { ...state, focus: String(state.focus) === id ? undefined : id }; draw(); };
       n.addEventListener('click', go);
@@ -128,57 +211,102 @@ export function render(target, spec, opts = {}) {
       n.addEventListener('click', go);
       n.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); } });
     }
+    // Gantt: clic en una fase la pliega en una barra-resumen; otro clic la despliega.
+    // Alt + clic pliega o despliega todas.
+    const groupsAll = [...chart.querySelectorAll('[data-group]')].map((n) => n.getAttribute('data-group'));
+    for (const n of chart.querySelectorAll('[data-group]')) {
+      if (!n.querySelector('.pa-chev')) continue; // collapsible: false
+      const name = n.getAttribute('data-group');
+      n.setAttribute('tabindex', '0');
+      n.setAttribute('role', 'button');
+      n.setAttribute('aria-expanded', n.getAttribute('data-collapsed') === 'true' ? 'false' : 'true');
+      const go = (e) => {
+        let cur = state.collapsed === true ? [...groupsAll] : [].concat(state.collapsed || []).map(String);
+        if (e && e.altKey) cur = cur.length === groupsAll.length ? [] : [...groupsAll];
+        else cur = cur.includes(name) ? cur.filter((g) => g !== name) : [...cur, name];
+        state = { ...state, collapsed: cur };
+        draw();
+        const again = [...chart.querySelectorAll('[data-group]')].find((m) => m.getAttribute('data-group') === name);
+        if (again && e && e.type === 'keydown') again.focus();
+      };
+      n.addEventListener('click', go);
+      n.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(e); } });
+    }
   };
   const schedule = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(draw); };
 
   const theme = themeFor(state);
   ctl.className = 'pa-ctl';
-  ctl.style.cssText = `--pa-accent:${theme.categorical[0]};--pa-surface:${theme.surface};--pa-ink:${theme.ink};--pa-muted:${theme.muted};--pa-tint:${theme.tint};background:${theme.surface};padding-left:${state.padding ?? 24}px;padding-right:${state.padding ?? 24}px;padding-bottom:6px;font-family:${(theme.font?.family || 'system-ui').replace(/"/g, "'")}`;
+  ctl.style.cssText = `--pa-accent:${theme.categorical[0]};--pa-surface:${theme.surface};--pa-ink:${theme.ink};--pa-muted:${theme.muted};--pa-tint:${theme.tint};--pa-line:${theme.axis};background:${theme.surface};padding-left:${state.padding ?? 24}px;padding-right:${state.padding ?? 24}px;padding-bottom:6px;font-family:${(theme.font?.family || 'system-ui').replace(/"/g, "'")}`;
   ctl.hidden = true;
 
-  if (opts.controls !== false && state.slider !== false) {
-    if (state.time && !SNAP_EXCLUDE.has(state.type) && state.x !== state.time) buildPeriod();
+  // Controles de tiempo: SOLO si se piden (`slider: true`, "buttons" o "slider").
+  // Con pocos periodos van botones; con muchos, un slider mínimo.
+  const want = controlMode(state, opts);
+  if (want) {
+    if (state.time && !SNAP_EXCLUDE.has(state.type) && state.x !== state.time) buildPeriod(want);
     else if (RANGE_TYPES.has(state.type)) buildRange();
   }
 
-  // ── Periodo único con "play" (d3plus time) ──────────────────────────────
-  function buildPeriod() {
+  // ── Periodo único: botones o slider, con un play sobrio ─────────────────
+  function buildPeriod(mode) {
     const vals = timeValuesOf(state);
     if (vals.length < 2) return;
     let i = vals.findIndex((v) => String(v) === String(state.timeValue ?? vals[vals.length - 1]));
     if (i < 0) i = vals.length - 1;
     ctl.hidden = false;
-    const play = button();
-    const track = document.createElement('div'); track.className = 'pa-track';
-    const ov = svgEl('svg', { class: 'pa-ov', viewBox: '0 0 100 28', preserveAspectRatio: 'none' });
-    ov.appendChild(svgEl('rect', { x: 0, y: 13, width: 100, height: 3, rx: 1.5, fill: theme.tint2 || theme.tint }));
-    const fill = svgEl('rect', { x: 0, y: 13, height: 3, rx: 1.5, fill: theme.categorical[0] });
-    ov.appendChild(fill);
-    track.appendChild(ov);
-    const input = range(0, vals.length - 1, i, 'Periodo');
-    track.appendChild(input);
-    const now = document.createElement('span'); now.className = 'pa-now';
-    if (state.play === false) ctl.append(track, now); else ctl.append(play, track, now);
-    track.appendChild(ticks(vals.map(String), (k) => k / (vals.length - 1), null, track));
+    const labels = vals.map(String);
+    const buttons = mode === 'buttons' || (mode === 'auto' && vals.length <= 8 && labels.join('').length <= 64);
+    const play = state.play === false ? null : button();
+    if (play) ctl.append(play);
+    let setUI;
+    if (buttons) {
+      const group = document.createElement('div');
+      group.className = 'pa-seg'; group.setAttribute('role', 'radiogroup'); group.setAttribute('aria-label', String(state.time));
+      const btns = labels.map((l, k) => {
+        const b = document.createElement('button');
+        b.type = 'button'; b.textContent = l; b.setAttribute('role', 'radio');
+        b.addEventListener('click', () => { stop(); set(k); });
+        b.addEventListener('keydown', (e) => {
+          const d = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 0;
+          if (!d) return;
+          e.preventDefault(); stop();
+          const k2 = Math.max(0, Math.min(vals.length - 1, i + d)); set(k2); btns[k2].focus();
+        });
+        group.appendChild(b);
+        return b;
+      });
+      ctl.append(group);
+      setUI = (k) => btns.forEach((b, j) => { b.setAttribute('aria-checked', j === k ? 'true' : 'false'); b.tabIndex = j === k ? 0 : -1; });
+    } else {
+      const track = document.createElement('div'); track.className = 'pa-track';
+      const input = range(0, vals.length - 1, i, String(state.time));
+      input.style.setProperty('--pa-p', '100%');
+      const ends = document.createElement('div'); ends.className = 'pa-ends';
+      ends.innerHTML = '<span></span><span></span>';
+      ends.children[0].textContent = labels[0]; ends.children[1].textContent = labels[labels.length - 1];
+      track.append(input, ends);
+      const now = document.createElement('span'); now.className = 'pa-now';
+      ctl.append(track, now);
+      input.addEventListener('input', () => { stop(); set(+input.value); });
+      setUI = (k) => { input.value = k; input.style.setProperty('--pa-p', (100 * k) / (vals.length - 1) + '%'); now.textContent = labels[k]; };
+    }
     const set = (k) => {
-      i = k; input.value = k;
-      fill.setAttribute('width', (100 * k) / (vals.length - 1));
-      now.textContent = String(vals[k]);
+      i = k; setUI(k);
       state = { ...state, timeValue: vals[k] };
       schedule();
     };
-    input.addEventListener('input', () => { stop(); set(+input.value); });
-    play.addEventListener('click', () => {
+    if (play) play.addEventListener('click', () => {
       if (timer) return stop();
       if (i >= vals.length - 1) set(0);
       setIcon(play, 'pause');
-      timer = setInterval(() => { if (i >= vals.length - 1) return stop(); set(i + 1); }, state.playInterval ?? 1000);
+      timer = setInterval(() => { if (i >= vals.length - 1) return stop(); set(i + 1); }, state.playInterval ?? 1200);
     });
-    function stop() { clearInterval(timer); timer = null; setIcon(play, 'play'); }
-    set(i);
+    function stop() { clearInterval(timer); timer = null; if (play) setIcon(play, 'play'); }
+    setUI(i);
   }
 
-  // ── Rango con vista general (series de tiempo) ──────────────────────────
+  // ── Rango (series de tiempo): dos tiradores sobre una línea fina ────────
   function buildRange() {
     const data = ensureData(state);
     const xf = state.x;
@@ -188,75 +316,43 @@ export function render(target, spec, opts = {}) {
     const raw = uniq(data.map((r) => r[xf]));
     const val = (v) => (kind === 'date' ? parseDate(v) : num(v));
     const xs = raw.map((v) => ({ v, t: val(v) })).filter((p) => Number.isFinite(p.t)).sort((a, b) => a.t - b.t);
-    if (xs.length < (state.sliderMin ?? 6)) return;
+    if (xs.length < 3) return;
     ctl.hidden = false;
-    // Vista general: suma de todas las series por x.
-    const ys = Array.isArray(state.y) ? state.y : [state.y];
-    const tot = new Map(xs.map((p) => [p.t, 0]));
-    for (const r of data) { const t = val(r[xf]); if (tot.has(t)) tot.set(t, tot.get(t) + ys.reduce((a, f) => a + (Number.isFinite(num(r[f])) ? num(r[f]) : 0), 0)); }
-    const tv = xs.map((p) => tot.get(p.t));
-    const mn = Math.min(...tv), mx = Math.max(...tv);
-    const t0 = xs[0].t, t1 = xs[xs.length - 1].t;
-    const px = (t) => (100 * (t - t0)) / (t1 - t0 || 1);
-    const py = (v) => 26 - (22 * (v - mn)) / (mx - mn || 1);
-    const track = document.createElement('div'); track.className = 'pa-track';
-    const ov = svgEl('svg', { class: 'pa-ov', viewBox: '0 0 100 28', preserveAspectRatio: 'none' });
-    const d = xs.map((p, k) => `${k ? 'L' : 'M'}${px(p.t).toFixed(2)},${py(tv[k]).toFixed(2)}`).join('');
-    ov.appendChild(svgEl('path', { d: d + `L100,28L0,28Z`, fill: theme.muted, 'fill-opacity': 0.12 }));
-    ov.appendChild(svgEl('path', { d, fill: 'none', stroke: theme.muted, 'stroke-width': 1, 'vector-effect': 'non-scaling-stroke' }));
-    const sel = svgEl('rect', { y: 0, height: 28, rx: 3, fill: theme.categorical[0], 'fill-opacity': 0.08 });
-    ov.appendChild(sel);
-    track.appendChild(ov);
     const fmtX = (p) => (kind === 'date' ? formatDate(p.t, dateUnit(xs.map((q) => q.t)), state.locale || 'es') : String(p.v));
     let lo = 0, hi = xs.length - 1;
     if (state.xRange) {
       const a = xs.findIndex((p) => p.t >= val(state.xRange[0])), b = xs.map((p) => p.t <= val(state.xRange[1])).lastIndexOf(true);
       if (a >= 0) lo = a; if (b >= 0) hi = b;
     }
+    const track = document.createElement('div'); track.className = 'pa-track pa-dual';
     const a = range(0, xs.length - 1, lo, 'Desde'), b = range(0, xs.length - 1, hi, 'Hasta');
-    // Con fechas, las marcas del slider son años (o el primer valor de cada año).
-    const yearOf = (p) => new Date(p.t).getUTCFullYear();
-    const tickLabels = kind === 'date' ? xs.map((p) => String(yearOf(p))) : xs.map(fmtX);
-    const keep = kind === 'date' ? (k) => k === 0 || yearOf(xs[k]) !== yearOf(xs[k - 1]) : null;
-    track.append(a, b);
+    const ends = document.createElement('div'); ends.className = 'pa-ends';
+    ends.innerHTML = '<span></span><span></span>';
+    ends.children[0].textContent = fmtX(xs[0]); ends.children[1].textContent = fmtX(xs[xs.length - 1]);
+    track.append(a, b, ends);
     const now = document.createElement('span'); now.className = 'pa-now';
-    now.textContent = `${fmtX(xs[0])} – ${fmtX(xs[xs.length - 1])}`;
     ctl.append(track, now);
-    track.appendChild(ticks(tickLabels, (k) => px(xs[k].t) / 100, keep, track));
+    const n = xs.length - 1;
     const set = () => {
       let i0 = +a.value, i1 = +b.value;
-      if (i1 - i0 < 1) { if (document.activeElement === a) a.value = i0 = Math.max(0, i1 - 1); else b.value = i1 = Math.min(xs.length - 1, i0 + 1); }
-      sel.setAttribute('x', px(xs[i0].t)); sel.setAttribute('width', Math.max(0.5, px(xs[i1].t) - px(xs[i0].t)));
+      if (i1 - i0 < 1) { if (document.activeElement === a) a.value = i0 = Math.max(0, i1 - 1); else b.value = i1 = Math.min(n, i0 + 1); }
+      track.style.setProperty('--pa-a', (100 * i0) / n + '%');
+      track.style.setProperty('--pa-b', (100 * i1) / n + '%');
       now.textContent = `${fmtX(xs[i0])} – ${fmtX(xs[i1])}`;
-      state = { ...state, xRange: i0 === 0 && i1 === xs.length - 1 ? undefined : [xs[i0].v, xs[i1].v] };
+      state = { ...state, xRange: i0 === 0 && i1 === n ? undefined : [xs[i0].v, xs[i1].v] };
       schedule();
     };
     a.addEventListener('input', set); b.addEventListener('input', set);
     set();
   }
 
-  function ticks(labels, pos, keep, trackEl) {
-    const box = document.createElement('div'); box.className = 'pa-ticks';
-    const n = labels.length;
-    const trackW = Math.max(120, (trackEl && trackEl.clientWidth) || (host.clientWidth || 600) - 180);
-    const lw = Math.max(...labels.map((l) => String(l).length)) * 6.2 + 14;
-    const every = Math.max(1, Math.ceil((n * lw) / trackW));
-    let lastPx = -Infinity;
-    labels.forEach((l, k) => {
-      if (keep ? !keep(k) : k % every && k !== n - 1) return;
-      const px = pos(k) * trackW;
-      if (px - lastPx < lw && k !== n - 1) return;
-      if (k === n - 1 && px - lastPx < lw) return;
-      lastPx = px;
-      const s = document.createElement('span'); s.textContent = l; s.style.left = (pos(k) * 100).toFixed(2) + '%';
-      if (k === 0) s.style.transform = 'none';
-      if (k === n - 1) s.style.transform = 'translateX(-100%)';
-      box.appendChild(s);
-    });
-    return box;
-  }
-
-  host.addEventListener('keydown', (e) => { if (e.key === 'Escape' && state.focus !== undefined && state.type === 'network') { state = { ...state, focus: undefined }; draw(); } });
+  host.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    if (state.focus !== undefined && state.type === 'network') { state = { ...state, focus: undefined }; draw(); return; }
+    // Treemap/sunburst: Esc sube un nivel; en la raíz, vuelve a sumar lo excluido.
+    if (Array.isArray(state.focus) && state.focus.length) { state = { ...state, focus: state.focus.slice(0, -1) }; draw(); return; }
+    if (state.exclude && [].concat(state.exclude).length) { state = { ...state, exclude: undefined }; draw(); }
+  });
 
   draw();
   if (state.width === undefined && typeof ResizeObserver !== 'undefined') {
@@ -272,6 +368,21 @@ export function render(target, spec, opts = {}) {
   };
 }
 
+/**
+ * ¿Qué control de tiempo dibujar? Ninguno por defecto: el gráfico muestra el
+ * último periodo (o `timeValue`). `slider: true` (o `controls: true`) elige
+ * botones o slider según cuántos periodos haya; "buttons" y "slider" fuerzan
+ * uno. `render(el, spec, { controls: false })` los apaga siempre.
+ */
+export function controlMode(s, opts = {}) {
+  if (opts.controls === false) return null;
+  const v = s.slider ?? s.controls ?? opts.controls;
+  if (v === true || v === 'auto') return 'auto';
+  if (v === 'buttons' || v === 'button' || v === 'botones') return 'buttons';
+  if (v === 'slider' || v === 'range') return 'slider';
+  return null;
+}
+
 function timeValuesOf(s) {
   const data = ensureData(s);
   const k = fieldKind(data, s.time);
@@ -298,7 +409,8 @@ function button() {
 }
 function setIcon(b, kind) {
   b.setAttribute('aria-label', kind === 'play' ? 'Reproducir' : 'Pausar');
+  b.setAttribute('aria-pressed', kind === 'play' ? 'false' : 'true');
   b.innerHTML = kind === 'play'
-    ? '<svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 1.5v9l7.5-4.5z" fill="currentColor"/></svg>'
-    : '<svg width="12" height="12" viewBox="0 0 12 12"><rect x="2.5" y="1.5" width="2.5" height="9" rx="1" fill="currentColor"/><rect x="7" y="1.5" width="2.5" height="9" rx="1" fill="currentColor"/></svg>';
+    ? '<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M2.6 1.4v7.2L8.6 5z" fill="currentColor" stroke="currentColor" stroke-width=".8" stroke-linejoin="round"/></svg>'
+    : '<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M3 1.6v6.8M7 1.6v6.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';
 }

package/src/scale.js

@@ -10,18 +10,33 @@ export function niceStep(span, count = 5) {
   return f * mag;
 }
 
-/** Dominio "bonito": extremos redondeados al paso de las marcas. */
-export function niceDomain(min, max, count = 5) {
+/** Paso entero (1, 2, 5, 10, 20, 25…): nunca < 1 ni 2,5. */
+export const intStep = (step) => (!(step >= 1) ? 1 : Math.abs(step - 2.5) < 1e-9 ? 2 : step);
+
+/**
+ * Dominio "bonito": extremos redondeados al paso de las marcas.
+ * `integer: true` (valores enteros, como conteos) garantiza paso ≥ 1 y sin 2,5
+ * (como `minInterval: 1` de ECharts): nunca marcas en 0,5.
+ */
+export function niceDomain(min, max, count = 5, { integer = false } = {}) {
+  const st = (span) => (integer ? intStep(niceStep(span, count)) : niceStep(span, count));
+  // Sin valores finitos (todo nulo o texto): dominio [0, 1] en vez de un bucle infinito.
+  if (!Number.isFinite(min) || !Number.isFinite(max)) {
+    if (Number.isFinite(min)) max = min;
+    else if (Number.isFinite(max)) min = max;
+    else return integer ? { min: 0, max: 1, step: 1 } : { min: 0, max: 1, step: 0.2 };
+  }
+  if (min > max) [min, max] = [max, min];
   if (min === max) {
-    if (min === 0) return { min: 0, max: 1, step: 0.2 };
-    const pad = Math.abs(min) * 0.1;
+    if (min === 0) return integer ? { min: 0, max: 1, step: 1 } : { min: 0, max: 1, step: 0.2 };
+    const pad = integer ? 0.5 : Math.abs(min) * 0.1;
     min -= pad;
     max += pad;
   }
-  let step = niceStep(max - min, count);
+  let step = st(max - min);
   let lo = Math.floor(min / step + 1e-9) * step;
   let hi = Math.ceil(max / step - 1e-9) * step;
-  step = niceStep(hi - lo, count);
+  step = st(hi - lo);
   lo = Math.floor(min / step + 1e-9) * step;
   hi = Math.ceil(max / step - 1e-9) * step;
   return { min: lo, max: hi, step };
@@ -35,9 +50,14 @@ export function linear(d0, d1, r0, r1) {
   s.range = [r0, r1];
   s.ticks = (step) => {
     const out = [];
-    const st = step || niceStep(d1 - d0, 5);
-    const start = Math.ceil(Math.min(d0, d1) / st - 1e-9) * st;
-    for (let v = start; v <= Math.max(d0, d1) + st * 1e-9; v += st) out.push(Math.abs(v) < st * 1e-9 ? 0 : +v.toPrecision(12));
+    if (!Number.isFinite(d0) || !Number.isFinite(d1)) return out;
+    let st = step > 0 && Number.isFinite(step) ? step : niceStep(Math.abs(d1 - d0), 5);
+    const lo = Math.min(d0, d1), hi = Math.max(d0, d1);
+    // Nunca más de ~1000 marcas (paso diminuto frente al dominio, o paso que no avanza).
+    if ((hi - lo) / st > 1000) st = niceStep(hi - lo, 5);
+    const start = Math.ceil(lo / st - 1e-9) * st;
+    if (start + st === start) return [lo];
+    for (let i = 0, v = start; v <= hi + st * 1e-9 && i <= 1000; i++, v = start + i * st) out.push(Math.abs(v) < st * 1e-9 ? 0 : +v.toPrecision(12));
     return out;
   };
   return s;
@@ -53,6 +73,7 @@ export function log(d0, d1, r0, r1) {
   s.range = [r0, r1];
   // Marcas 1-2-5 cuando hay pocas décadas; solo potencias de 10 si hay muchas.
   s.ticks = (max = 7) => {
+    if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [];
     const cap = Number.isInteger(max) && max >= 2 ? max : 7;
     const gen = (mult) => {
       const out = [];
@@ -71,6 +92,15 @@ export function log(d0, d1, r0, r1) {
     const every = Math.ceil(t.length / cap);
     return t.filter((_, i) => i % every === 0);
   };
+  // Rango estrecho (120–180 → solo "100, 200"): marcas lineales dentro del dominio.
+  const logTicks = s.ticks;
+  s.ticks = (max = 7) => {
+    const t = logTicks(max);
+    if (t.length >= 3 || !(d1 > d0)) return t;
+    const st = niceStep(d1 - d0, 5);
+    const lin = linear(d0, d1, 0, 1).ticks(st).filter((v) => v > 0);
+    return lin.length > t.length ? lin : t;
+  };
   return s;
 }
 
@@ -79,6 +109,8 @@ export function logDomain(min, max) {
   const steps = [1, 2, 5, 10];
   const down = (v) => { const e = Math.floor(Math.log10(v)); const m = v / 10 ** e; const k = [...steps].reverse().find((s) => s <= m + 1e-9) || 1; return k * 10 ** e; };
   const up = (v) => { const e = Math.floor(Math.log10(v)); const m = v / 10 ** e; const k = steps.find((s) => s >= m - 1e-9) || 10; return k * 10 ** e; };
+  if (!Number.isFinite(min) || !(min > 0)) min = Number.isFinite(max) && max > 0 ? max / 10 : 1;
+  if (!Number.isFinite(max) || !(max > 0)) max = min * 10;
   const lo = down(Math.max(min, 1e-12)), hi = up(Math.max(max, 1e-12));
   return { min: lo, max: hi === lo ? lo * 10 : hi };
 }
@@ -101,9 +133,19 @@ export function band(domain, r0, r1, { inner = 0.3, outer = 0.15 } = {}) {
 // ---------------------------------------------------------------------------
 // Tiempo
 
-const DAY = 864e5;
+const MIN = 6e4, HOUR = 36e5, DAY = 864e5;
 const UNITS = [
+  ['minute', 1, MIN],
+  ['minute', 5, 5 * MIN],
+  ['minute', 15, 15 * MIN],
+  ['minute', 30, 30 * MIN],
+  ['hour', 1, HOUR],
+  ['hour', 3, 3 * HOUR],
+  ['hour', 6, 6 * HOUR],
+  ['hour', 12, 12 * HOUR],
   ['day', 1, DAY],
+  ['day', 2, 2 * DAY],
+  ['day', 3, 3 * DAY],
   ['day', 7, 7 * DAY],
   ['month', 1, 30.44 * DAY],
   ['month', 3, 91.3 * DAY],
@@ -114,10 +156,14 @@ const UNITS = [
   ['year', 10, 3652 * DAY],
   ['year', 25, 9131 * DAY],
   ['year', 50, 18262 * DAY],
+  ['year', 100, 36525 * DAY],
+  ['year', 250, 91312 * DAY],
+  ['year', 500, 182625 * DAY],
 ];
 
 /** Marcas de tiempo legibles: elige la unidad que da ≤ `count` marcas. */
 export function timeTicks(t0, t1, count = 6, locale = 'es') {
+  if (!Number.isFinite(t0) || !Number.isFinite(t1)) return { ticks: [], unit: 'day', every: 1 };
   const span = Math.max(1, t1 - t0);
   let [unit, every] = UNITS.find(([, , ms]) => span / ms <= count) || UNITS[UNITS.length - 1];
   const out = [];
@@ -140,6 +186,14 @@ export function timeTicks(t0, t1, count = 6, locale = 'es') {
       const c = new Date(cur);
       cur = Date.UTC(c.getUTCFullYear(), c.getUTCMonth() + every, 1);
     }
+  } else if (unit === 'hour' || unit === 'minute') {
+    // Múltiplos exactos del paso en UTC (las horas 1/3/6/12 dividen el día).
+    const ms = every * (unit === 'hour' ? HOUR : MIN);
+    cur = Math.ceil(t0 / ms - 1e-9) * ms;
+    while (cur <= t1) {
+      out.push(cur);
+      cur += ms;
+    }
   } else {
     cur = Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
     if (cur < t0) cur += DAY;
@@ -148,9 +202,18 @@ export function timeTicks(t0, t1, count = 6, locale = 'es') {
       cur += every * DAY;
     }
   }
+  const dayOf = (t) => Math.floor(t / DAY);
   const label = (t, i) => {
     const dt = new Date(t);
     if (unit === 'year') return formatDate(t, 'year', locale);
+    // Hora "HH:mm"; la fecha solo cuando cambia el día (a medianoche, solo la fecha).
+    if (unit === 'hour' || unit === 'minute') {
+      const newDay = i === 0 || dayOf(out[i - 1]) !== dayOf(t);
+      if (!newDay) return formatDate(t, unit, locale, false);
+      const prevY = i > 0 ? new Date(out[i - 1]).getUTCFullYear() : null;
+      const date = formatDate(t, 'day', locale, i > 0 && prevY !== dt.getUTCFullYear());
+      return t % DAY === 0 && i > 0 ? date : `${date} ${formatDate(t, unit, locale, false)}`;
+    }
     if (unit === 'month') {
       const first = i === 0 || dt.getUTCMonth() < every;
       if (every === 3) return formatDate(t, 'quarter', locale, first);
@@ -165,7 +228,14 @@ export function timeTicks(t0, t1, count = 6, locale = 'es') {
 /** Unidad natural de una serie de fechas (para tooltips). */
 export function dateUnit(times) {
   const ds = times.map((t) => new Date(t));
+  if (ds.some((d) => d.getUTCSeconds() || d.getUTCMinutes())) return 'minute';
+  if (ds.some((d) => d.getUTCHours())) return 'hour';
   if (ds.every((d) => d.getUTCMonth() === 0 && d.getUTCDate() === 1)) return 'year';
   if (ds.every((d) => d.getUTCDate() === 1)) return 'month';
   return 'day';
 }
+
+/** Mitad de la unidad natural (para centrar una sola fecha en el eje). */
+export function halfUnit(unit) {
+  return { minute: MIN / 2, hour: HOUR / 2, day: DAY / 2, month: 15 * DAY, year: 182.6 * DAY }[unit] ?? DAY / 2;
+}