plotagents 0.5.0 → 0.8.0

package/src/format.js

@@ -4,19 +4,29 @@
 const SEP = {
   es: { group: '.', dec: ',' },
   en: { group: ',', dec: '.' },
+  pt: { group: '.', dec: ',' },
+  de: { group: '.', dec: ',' },
+  fr: { group: '\u202F', dec: ',' }, // espacio fino: 1 234,5
 };
 
 const COMPACT = {
   es: [[1e12, ' B'], [1e6, ' M'], [1e3, ' mil']],
   en: [[1e12, 'T'], [1e9, 'B'], [1e6, 'M'], [1e3, 'K']],
+  pt: [[1e12, ' tri'], [1e9, ' bi'], [1e6, ' mi'], [1e3, ' mil']],
+  fr: [[1e12, ' Bn'], [1e9, ' Md'], [1e6, ' M'], [1e3, ' k']],
+  de: [[1e12, ' Bio.'], [1e9, ' Mrd.'], [1e6, ' Mio.'], [1e3, ' Tsd.']],
 };
 
 export const MONTHS = {
   es: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
   en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  pt: ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set', 'out', 'nov', 'dez'],
+  fr: ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
+  de: ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
 };
 
-const loc = (l) => (l && String(l).toLowerCase().startsWith('en') ? 'en' : 'es');
+/** Idioma de formato: es, en, pt, fr o de ("pt-BR" → pt); cualquier otro, es. */
+const loc = (l) => { const k = String(l || 'es').toLowerCase().slice(0, 2); return k in SEP ? k : 'es'; };
 
 /** Número con separadores. `decimals` fijo; `trim` quita ceros finales. */
 export function formatNumber(v, decimals = 0, locale = 'es', trim = false) {
@@ -24,7 +34,8 @@ export function formatNumber(v, decimals = 0, locale = 'es', trim = false) {
   if (!Number.isFinite(v)) return v > 0 ? '∞' : '-∞';
   const { group, dec } = SEP[loc(locale)];
   const neg = v < 0;
-  let [int, frac = ''] = Math.abs(v).toFixed(Math.max(0, decimals)).split('.');
+  const fixed = Math.abs(v) >= 1e21 ? BigInt(Math.abs(v)).toString() : Math.abs(v).toFixed(Math.max(0, Math.min(20, Math.round(+decimals) || 0))); // toFixed pasa a "1e+21"
+  let [int, frac = ''] = fixed.split('.');
   int = int.replace(/\B(?=(\d{3})+(?!\d))/g, group);
   if (trim) frac = frac.replace(/0+$/, '');
   const out = frac ? int + dec + frac : int;
@@ -34,19 +45,26 @@ export function formatNumber(v, decimals = 0, locale = 'es', trim = false) {
 /** Decimales "inteligentes" según la magnitud. */
 export function smartDecimals(v) {
   const a = Math.abs(v);
-  if (a === 0 || a >= 100) return 0;
+  if (a === 0 || !Number.isFinite(a) || a >= 100) return 0;
   if (a >= 10) return 1;
   if (a >= 1) return 2;
-  return Math.min(4, 1 - Math.floor(Math.log10(a)) + 1);
+  // Bajo 1: tres cifras significativas (0,123 · 0,00012), nunca "0".
+  return Math.min(20, 2 - Math.floor(Math.log10(a)));
 }
 
 export function formatCompact(v, locale = 'es', decimals) {
   const l = loc(locale);
   const a = Math.abs(v);
-  for (const [n, suf] of COMPACT[l]) {
+  const tbl = COMPACT[l];
+  for (let i = 0; i < tbl.length; i++) {
+    let [n, suf] = tbl[i];
     if (a >= n) {
-      const s = v / n;
-      const d = decimals ?? (Math.abs(s) < 10 ? 1 : 0);
+      let s = v / n;
+      let d = decimals ?? (Math.abs(s) < 10 ? 1 : 0);
+      // 999.999 → "1.000 mil" no: al redondear llega a 1000, sube a la unidad siguiente (1 M).
+      if (i > 0 && tbl[i - 1][0] / n === 1000 && Math.abs(+Math.abs(s).toFixed(d)) >= 1000) {
+        [n, suf] = tbl[i - 1]; s = v / n; d = decimals ?? (Math.abs(s) < 10 ? 1 : 0);
+      }
       return formatNumber(s, d, l, decimals === undefined) + suf;
     }
   }
@@ -102,24 +120,26 @@ export function makeFormat(fmt, locale = 'es', values = []) {
     return pre + s + suf;
   };
   f.type = type;
-  f.tick = (step) => tickFormat(step, o, type, l, pre, suf, max, d);
+  // `ticks` (opcional): las marcas del eje, o la mayor |marca|. Fija una sola
+  // unidad compacta para todo el eje (sin "500 M" junto a "1.000,0 M").
+  f.tick = (step, ticks) => tickFormat(step, o, type, l, pre, suf, max, d, ticks);
   return f;
 }
 
-function currencyPrefix(cur, l) {
+export function currencyPrefix(cur, l) {
   if (!cur) return '$';
   const c = String(cur).toUpperCase();
   return { USD: 'US$', CLP: '$', EUR: '€', UF: 'UF ', GBP: '£', PEN: 'S/ ', MXN: 'MX$', BRL: 'R$' }[c] || c + ' ';
 }
 
 /** Formateador de marcas de eje: decimales según el paso, nunca ruido. */
-function tickFormat(step, o, type, l, pre, suf, max, dFixed) {
+function tickFormat(step, o, type, l, pre, suf, max, dFixed, ticks) {
   // Decimales mínimos para escribir el paso exacto (2,5 → 1; 0,25 → 2).
   const decFor = (s) => {
     const a = Math.abs(s) || 1;
     let d = Math.max(0, -Math.floor(Math.log10(a) + 1e-9));
-    while (d < 6 && Math.abs(Math.round(a * 10 ** d) - a * 10 ** d) > 1e-6 * 10 ** d) d++;
-    return Math.min(6, d);
+    while (d < 12 && Math.abs(Math.round(a * 10 ** d) - a * 10 ** d) > 1e-6 * 10 ** d) d++;
+    return Math.min(12, d);
   };
   let core;
   if (type === 'year') core = (v) => String(Math.round(v));
@@ -127,15 +147,23 @@ function tickFormat(step, o, type, l, pre, suf, max, dFixed) {
     const scale = o.scale ?? (max > 1.5 ? 1 : 100);
     core = (v) => formatNumber(v * scale, decFor(step * scale), l) + '%';
   } else if (type === 'compact' || max >= 1e4 && type !== 'integer') {
-    core = (v) => {
-      const a = Math.abs(v);
-      const unit = a >= 1e12 ? 1e12 : a >= 1e9 ? 1e9 : a >= 1e6 ? 1e6 : a >= 1e3 ? 1e3 : 1;
-      if (unit === 1) return formatNumber(v, decFor(step), l);
-      return formatCompact(v, l, decFor(step / unit));
-    };
+    // Una sola unidad por eje, la de la mayor marca, entre las que tiene el idioma
+    // (en español no hay "mil millones": 1.000 M). Sin ceros finales.
+    let top;
+    if (Array.isArray(ticks)) top = ticks.reduce((m, t) => (Number.isFinite(t) ? Math.max(m, Math.abs(t)) : m), 0);
+    else if (Number.isFinite(ticks)) top = Math.abs(ticks);
+    else top = step > 0 ? Math.ceil(max / step - 1e-9) * step : max;
+    const [unit, sufx] = COMPACT[l].find(([n]) => top >= n) || [1, ''];
+    core = unit === 1
+      ? (v) => formatNumber(v, decFor(step), l)
+      : (v) => formatNumber(v / unit, decFor(step / unit), l, true) + sufx;
   } else core = (v) => formatNumber(v, dFixed ?? decFor(step), l);
+  // Una marca entera se escribe sin ",0" (600, no 600,0); las fraccionarias
+  // conservan sus decimales (0 · 0,5 · 1 · 1,5).
+  const zeroFrac = new RegExp('\\' + SEP[l].dec + '0+(?!\\d)');
   return (v) => {
-    const s = core(v);
+    if (v === 0 && dFixed === undefined && type !== 'year') return pre + '0' + (type === 'percent' ? '%' : '') + suf;
+    const s = core(v).replace(zeroFrac, '');
     if (pre && s.startsWith('−')) return '−' + pre + s.slice(1) + suf;
     return pre + s + suf;
   };
@@ -144,28 +172,55 @@ function tickFormat(step, o, type, l, pre, suf, max, dFixed) {
 // ---------------------------------------------------------------------------
 // Fechas
 
-const ISO = /^(\d{4})-(\d{2})(?:-(\d{2}))?(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/;
+const ISO = /^(\d{4})-(\d{2})(?:-(\d{2}))?(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:[.,](\d+))?)?\s*(Z|[+-]\d{2}(?::?\d{2})?)?)?/i;
 
-/** Convierte Date | 'YYYY-MM' | 'YYYY-MM-DD' | ISO a milisegundos (UTC). */
+/**
+ * Convierte Date | 'YYYY-MM' | 'YYYY-MM-DD' | ISO a milisegundos (UTC).
+ * Sin zona horaria, la hora se toma tal cual (como UTC); con `Z` o `±hh:mm`
+ * se respeta el desfase, así datos con zonas distintas se ordenan bien.
+ */
 export function parseDate(v) {
   if (v instanceof Date) return v.getTime();
   if (typeof v === 'string') {
     const m = ISO.exec(v.trim());
-    if (m) return Date.UTC(+m[1], +m[2] - 1, +(m[3] || 1), +(m[4] || 0), +(m[5] || 0), +(m[6] || 0));
+    // Rangos válidos: "2020-21" (temporada) o "2024-13" no son fechas.
+    if (m && +m[2] >= 1 && +m[2] <= 12 && +(m[3] || 1) >= 1 && +(m[3] || 1) <= new Date(Date.UTC(+m[1], +m[2], 0)).getUTCDate() && +(m[4] || 0) < 24 && +(m[5] || 0) < 60 && +(m[6] || 0) < 60) {
+      const ms = m[7] ? Math.round(+('0.' + m[7]) * 1000) : 0;
+      let t = Date.UTC(+m[1], +m[2] - 1, +(m[3] || 1), +(m[4] || 0), +(m[5] || 0), +(m[6] || 0), ms);
+      const z = m[8];
+      if (z && z.toUpperCase() !== 'Z') {
+        const sign = z[0] === '-' ? -1 : 1;
+        const hh = +z.slice(1, 3), mm = +(z.slice(1).replace(':', '').slice(2, 4) || 0);
+        t -= sign * (hh * 60 + mm) * 6e4;
+      }
+      return t;
+    }
   }
   return NaN;
 }
 
-export const isDateLike = (v) => v instanceof Date || (typeof v === 'string' && ISO.test(v.trim()));
+export const isDateLike = (v) => v instanceof Date || (typeof v === 'string' && Number.isFinite(parseDate(v)));
 
+/**
+ * Fecha legible. `unit`: 'year' | 'quarter' | 'month' | 'day' | 'hour' | 'minute'.
+ * En 'hour'/'minute', `withYear`: true → fecha completa + "HH:mm";
+ * 'day' → fecha sin año + hora; false → solo "HH:mm".
+ */
 export function formatDate(ms, unit, locale = 'es', withYear = true) {
   const d = new Date(ms);
   const l = loc(locale);
   const y = d.getUTCFullYear();
   const m = MONTHS[l][d.getUTCMonth()];
+  if (unit === 'hour' || unit === 'minute') {
+    const hm = String(d.getUTCHours()).padStart(2, '0') + ':' + String(d.getUTCMinutes()).padStart(2, '0');
+    if (withYear === false) return hm;
+    return formatDate(ms, 'day', l, withYear !== 'day') + ' ' + hm;
+  }
   if (unit === 'year') return String(y);
-  if (unit === 'quarter') return `T${Math.floor(d.getUTCMonth() / 3) + 1}${withYear ? ' ' + y : ''}`.replace('T', l === 'en' ? 'Q' : 'T');
+  if (unit === 'quarter') return `T${Math.floor(d.getUTCMonth() / 3) + 1}${withYear ? ' ' + y : ''}`.replace('T', l === 'en' || l === 'de' ? 'Q' : 'T');
   if (unit === 'month') return withYear ? `${m} ${y}` : m;
   const day = d.getUTCDate();
-  return l === 'en' ? `${m} ${day}${withYear ? ', ' + y : ''}` : `${day} ${m}${withYear ? ' ' + y : ''}`;
+  if (l === 'en') return `${m} ${day}${withYear ? ', ' + y : ''}`;
+  if (l === 'de') return `${day}. ${m}${withYear ? ' ' + y : ''}`;
+  return `${day} ${m}${withYear ? ' ' + y : ''}`;
 }

package/src/frame.js

@@ -1,9 +1,10 @@
 // Marco común de cada gráfico: título (un hecho), bajada, leyenda, área de
 // trazado y línea de fuente chica a la derecha. Nada de cajas ni filetes.
 import { el, esc, g, text, r2 } from './svg.js';
-import { measure, wrap } from './text.js';
+import { measure, wrap, truncate } from './text.js';
 import { FONT, FONT_CSS } from './theme.js';
 import { ctx } from './context.js';
+import { words } from './i18n.js';
 
 export const SIZES = {
   title: 22,
@@ -18,7 +19,11 @@ export function createFrame(spec, theme, defaults = {}) {
   const width = Math.max(240, +spec.width || defaults.width || 720);
   // Con textos más grandes (textScale), el alto por defecto crece para no aplastar los datos.
   const XS = ctx.textScale;
-  let height = Math.max(160, +spec.height || Math.round((defaults.height || 420) * (1 + 0.55 * (XS - 1))));
+  // En gráficos anchos el alto por defecto crece con el ancho (hasta ~2,8:1),
+  // para que una lámina de 1500 px no quede como una franja vacía.
+  const h0 = defaults.height || 420;
+  const hW = defaults.fixedHeight ? h0 : Math.max(h0, Math.min(Math.round(h0 * 1.35), Math.round(width * 0.36)));
+  let height = Math.max(160, +spec.height || Math.round(hW * (1 + 0.55 * (XS - 1))));
   // Responsivo: en pantallas angostas, menos margen y títulos algo menores
   // (nunca bajo 11 px en ejes). El ancho útil es lo que más importa en móvil.
   const k = width < 420 ? 0.86 : width < 560 ? 0.93 : 1;
@@ -45,39 +50,67 @@ export function createFrame(spec, theme, defaults = {}) {
   if (subLines.length) y += subLines.length * slh + 2;
   if (titleLines.length || subLines.length) y += 10;
 
-  const sourceH = spec.source ? Math.round(18 * Math.max(1, X * 0.95)) : 0;
+  const srcText = spec.source ? (/^(fuente|source|fonte|quelle)/i.test(spec.source) ? spec.source : words(spec.locale).source + spec.source) : '';
+  // Una fuente larga salta a una segunda línea en vez de salirse por la izquierda.
+  const srcLines = srcText ? wrap(srcText, innerW, T.source, 400, 2) : [];
+  const srcLH = Math.round(T.source * X * 1.35);
+  const sourceH = srcText ? Math.round(18 * Math.max(1, X * 0.95)) + (srcLines.length - 1) * srcLH : 0;
+  const legendPos = legendPosition(spec, width);
+  let legendBottom = null; // leyenda inferior: se dibuja en finish(), cuando el alto es definitivo
 
   const frame = {
     width,
     pad,
     theme,
+    legendPosition: legendPos,
     get height() { return height; },
     top: y,
-    get bottom() { return height - pad - sourceH; },
-    /** Alto extra fuera del área de trazado (pie + margen). */
-    chrome: pad + sourceH,
-    /** Dibuja la leyenda y devuelve el área de trazado restante. */
+    get bottom() { return height - pad - sourceH - (legendBottom ? legendBottom.h + 12 : 0); },
+    /** Alto extra fuera del área de trazado (pie + margen + leyenda inferior). */
+    get chrome() { return pad + sourceH + (legendBottom ? legendBottom.h + 12 : 0); },
+    /**
+     * Dibuja la leyenda y devuelve el área de trazado restante. La leyenda va
+     * arriba por defecto; `legend: "bottom" | "left" | "right"` la mueve.
+     */
     layout(legend = [], opts = {}) {
       let ly = y;
-      if (legend && legend.length) {
-        const { svg, h } = drawLegend(legend, pad, ly, innerW, theme, { ...opts, size: T.legend });
+      const items = withExcluded(legend, spec, theme);
+      const extraBottom = Math.max(0, (XS - 1) * 22);
+      if (items.length && (legendPos === 'left' || legendPos === 'right')) {
+        const colW = Math.min(innerW * 0.32, Math.max(90, legendWidth(items, T.legend)));
+        const { svg } = drawLegend(items, legendPos === 'left' ? pad : width - pad - colW, ly + 2, colW, theme, { ...opts, size: T.legend, vertical: true });
+        header.push(svg);
+        const gap = 16;
+        return { x: legendPos === 'left' ? pad + colW + gap : pad, y: ly, w: innerW - colW - gap, h: Math.max(40, frame.bottom - ly - extraBottom) };
+      }
+      if (items.length && legendPos === 'bottom') {
+        const probe = drawLegend(items, pad, 0, innerW, theme, { ...opts, size: T.legend });
+        legendBottom = { items, opts, h: probe.h };
+        return { x: pad, y: ly, w: innerW, h: Math.max(40, frame.bottom - ly - extraBottom) };
+      }
+      if (items.length) {
+        const { svg, h } = drawLegend(items, pad, ly, innerW, theme, { ...opts, size: T.legend });
         header.push(svg);
         ly += h + 10; // la leyenda pegada al gráfico que explica
       }
       // Banda extra bajo el área para etiquetas y títulos de eje agrandados.
-      return { x: pad, y: ly, w: innerW, h: Math.max(40, frame.bottom - ly - Math.max(0, (XS - 1) * 22)) };
+      return { x: pad, y: ly, w: innerW, h: Math.max(40, frame.bottom - ly - extraBottom) };
     },
     /** Permite a gráficos de alto automático (kpi) fijar el alto final. */
     setHeight(h) { height = h; },
-    finish(body, { desc = '', type = 'chart', defs = '' } = {}) {
-      if (spec.source) {
-        const src = /^fuente|^source/i.test(spec.source) ? spec.source : (String(spec.locale || 'es').startsWith('en') ? 'Source: ' : 'Fuente: ') + spec.source;
-        parts.push(text(width - pad, height - pad - 2, src, { fill: theme.muted, fontSize: T.source, textAnchor: 'end' }));
+    finish(body, { desc = '', type = 'chart', defs = '', role = 'img', css = '' } = {}) {
+      if (legendBottom) {
+        const { svg } = drawLegend(legendBottom.items, pad, height - pad - sourceH - legendBottom.h - 2, innerW, theme, { ...legendBottom.opts, size: T.legend });
+        header.push(svg);
       }
-      const id = 'pa' + Math.abs(hash((spec.title || '') + type + width)).toString(36);
+      srcLines.forEach((l, i) => parts.push(text(width - pad, height - pad - 2 - (srcLines.length - 1 - i) * srcLH, l, { fill: theme.muted, fontSize: T.source, textAnchor: 'end' })));
+      // Id estable pero distinto entre gráficos sin título del mismo tipo (aria-labelledby).
+      const id = 'pa' + Math.abs(hash((spec.title || '') + type + width + desc)).toString(36);
       const fontImport = spec.fontImport ? `@import url('${theme.font?.import || FONT_CSS}');` : '';
-      const style = `${fontImport}.pa-m{transition:opacity .15s ease}.pa-focus .pa-m{opacity:.28}.pa-focus .pa-m.pa-on{opacity:1}`
-        + (/^(choropleth|symbolmap)$/.test(type) ? '.pa-zoom path,.pa-zoom circle,.pa-zoom rect{vector-effect:non-scaling-stroke}.pa-zoom-hide{transition:opacity .2s ease}.pa-zoomed .pa-zoom-hide{opacity:0}' : '');
+      const style = `${fontImport}.pa-m{transition:opacity .15s ease}.pa-focus .pa-m{opacity:.28}.pa-focus .pa-m.pa-on{opacity:1}@media (prefers-reduced-motion:reduce){.pa-m{transition:none}}.pa-chart:focus-visible{outline:2px solid ${theme.categorical[0]};outline-offset:2px}`
+        + (type === 'network' ? '.pa-focus .pa-net .pa-m{opacity:.12}.pa-focus .pa-net .pa-m.pa-on{opacity:1}' : '')
+        + (/^(choropleth|symbolmap|pointmap)$/.test(type) ? '.pa-zoom path,.pa-zoom circle,.pa-zoom rect{vector-effect:non-scaling-stroke}.pa-zoom-hide{transition:opacity .2s ease}.pa-zoomed .pa-zoom-hide{opacity:0}' : '')
+        + css;
       return el(
         'svg',
         {
@@ -85,13 +118,16 @@ export function createFrame(spec, theme, defaults = {}) {
           viewBox: `0 0 ${width} ${r2(height)}`,
           width,
           height: r2(height),
-          role: 'img',
-          'aria-labelledby': `${id}-t ${id}-d`,
+          role,
+          'aria-labelledby': role === 'img' ? `${id}-t ${id}-d` : `${id}-t`,
+          'aria-describedby': role === 'img' ? null : `${id}-d`,
           fontFamily: spec.fontFamily || theme.font?.family || FONT,
           class: 'pa-chart',
           'data-pa-type': type,
           'data-pa-mode': theme.mode,
           'data-pa-lang': String(spec.locale || 'es').slice(0, 2),
+          'data-pa-top': r2(frame.top),
+          'data-pa-tip': theme.tooltip && (theme.tooltip.bg || theme.tooltip.ink) ? `${theme.tooltip.bg || ''},${theme.tooltip.ink || ''}` : null,
           style: 'max-width:100%;height:auto;font-variant-numeric:lining-nums',
         },
         [
@@ -110,40 +146,76 @@ export function createFrame(spec, theme, defaults = {}) {
   return frame;
 }
 
+/** Posición de la leyenda: `legend: "top" | "bottom" | "left" | "right"` (o { position }). */
+export function legendPosition(spec, width = 720) {
+  const v = typeof spec.legend === 'string' ? spec.legend : spec.legend && typeof spec.legend === 'object' ? spec.legend.position : spec.legendPosition;
+  const p = String(v || 'top').toLowerCase();
+  const pos = { arriba: 'top', abajo: 'bottom', izquierda: 'left', derecha: 'right' }[p] || p;
+  if (!['top', 'bottom', 'left', 'right'].includes(pos)) return 'top';
+  // En pantallas angostas una columna lateral roba demasiado ancho: va abajo.
+  if ((pos === 'left' || pos === 'right') && width < 520) return 'bottom';
+  return pos;
+}
+
+/** Entradas excluidas con shift + clic (spec.exclude): siguen en la leyenda, apagadas, para volver a sumarlas. */
+function withExcluded(items, spec, theme) {
+  const ex = spec._excluded;
+  if (!ex || !ex.length || !items.length) return items;
+  const have = new Set(items.map((it) => String(it.value ?? it.label)));
+  const extra = ex.filter((v) => !have.has(String(v))).map((v) => ({ label: String(v), value: v, color: (spec.colors && spec.colors[v]) || theme.dim, shape: items[0]?.shape === 'line' ? 'line' : items[0]?.shape || 'square', off: true }));
+  return [...items, ...extra];
+}
+
+function legendWidth(items, size) {
+  const X = ctx.textScale;
+  return Math.max(...items.map((it) => (it.type === 'ramp' ? 220 : 18 * X + measure(String(it.label), size) + 12)));
+}
+
 function drawLegend(items, x0, y0, maxW, theme, opts) {
   const out = [];
   const size = opts.size ?? SIZES.legend;
   const X = ctx.textScale;
-  const rowH = Math.round(20 * X);
+  const rowH = Math.round((opts.vertical ? 22 : 20) * X);
+  const vertical = !!opts.vertical;
   let x = x0, y = y0, rows = 1;
   for (const it of items) {
     if (it.type === 'ramp') {
+      if (vertical && x > x0) { x = x0; y += rowH; rows++; }
       const w = Math.min(220, maxW);
       const gid = 'pa-ramp-' + Math.abs(hash(it.stops.join(''))).toString(36);
       const stops = it.stops.map((c, i) => el('stop', { offset: `${(i / (it.stops.length - 1)) * 100}%`, stopColor: c }));
       out.push(el('defs', {}, el('linearGradient', { id: gid }, stops)));
-      if (it.title) { out.push(text(x, y + 10, it.title, { fill: theme.lede, fontSize: size })); x += measure(it.title, size) + 10; }
+      if (it.title) {
+        out.push(text(x, y + 10, it.title, { fill: theme.lede, fontSize: size }));
+        if (vertical) { y += rowH; rows++; } else x += measure(it.title, size) + 10;
+      }
       out.push(text(x, y + 10, it.min, { fill: theme.muted, fontSize: SIZES.axis }));
       x += measure(it.min, SIZES.axis) + 6;
-      out.push(el('rect', { x, y: y + 2, width: w * 0.6, height: 10, rx: 5, fill: `url(#${gid})` }));
-      x += w * 0.6 + 6;
+      const rw = vertical ? Math.max(40, Math.min(w * 0.6, maxW - (x - x0) - measure(it.max, SIZES.axis) - 6)) : w * 0.6;
+      out.push(el('rect', { x, y: y + 2, width: rw, height: 10, rx: 5, fill: `url(#${gid})` }));
+      x += rw + 6;
       out.push(text(x, y + 10, it.max, { fill: theme.muted, fontSize: SIZES.axis }));
       x += measure(it.max, SIZES.axis) + 18;
       continue;
     }
-    const label = String(it.label);
+    const sw = 10 * Math.min(1.6, X);
+    let label = String(it.label);
+    if (vertical) label = truncate(label, maxW - sw - 10, size);
     const w = 18 * X + measure(label, size) + 18;
-    if (x + w > x0 + maxW && x > x0) { x = x0; y += rowH; rows++; }
+    if ((vertical || x + w > x0 + maxW) && x > x0) { x = x0; y += rowH; rows++; }
     const cy = y + 6.5 * X;
-    out.push(`<g class="pa-key" data-color="${esc(it.key ?? it.color)}" style="cursor:pointer">`);
+    const v = it.value !== undefined ? it.value : it.key ? undefined : it.label;
+    const val = v !== undefined ? ` data-value="${esc(String(v))}"` : '';
+    const faded = it.off ? 0.45 : it.active === false ? 0.5 : null;
+    out.push(`<g class="pa-key${it.off ? ' pa-key-off' : ''}" data-color="${esc(it.key ?? it.color)}"${val}${it.active ? ' aria-pressed="true"' : ''}${faded ? ` opacity="${faded}"` : ''} style="cursor:pointer">`);
     out.push(el('rect', { x: x - 3, y: y - 3, width: w - 10, height: rowH - 1, rx: 4, fill: 'transparent' }));
-    const sw = 10 * Math.min(1.6, X);
     // Entradas punteadas: línea discontinua o cuadro rayado con borde discontinuo.
-    if (it.shape === 'line') out.push(el('line', { x1: x, x2: x + sw * 1.2, y1: cy, y2: cy, stroke: it.color, strokeWidth: 2.5, strokeLinecap: it.dashed ? 'butt' : 'round', strokeDasharray: it.dashed ? '4 2.5' : null }));
+    if (it.off) out.push(el('rect', { x: x + 0.75, y: cy - sw / 2 + 0.75, width: sw - 1.5, height: sw - 1.5, rx: 2, fill: 'none', stroke: it.color, strokeWidth: 1.5 }));
+    else if (it.shape === 'line') out.push(el('line', { x1: x, x2: x + sw * 1.2, y1: cy, y2: cy, stroke: it.color, strokeWidth: 2.5, strokeLinecap: it.dashed ? 'butt' : 'round', strokeDasharray: it.dashed ? '4 2.5' : null }));
     else if (it.shape === 'square' && it.dashed) out.push(el('rect', { x: x + 0.6, y: cy - sw / 2 + 0.6, width: sw - 1.2, height: sw - 1.2, rx: 2, fill: it.fill || it.color, stroke: it.stroke || it.color, strokeWidth: 1.2, strokeDasharray: '3 2' }));
     else if (it.shape === 'square') out.push(el('rect', { x, y: cy - sw / 2, width: sw, height: sw, rx: 2.5, fill: it.color }));
     else out.push(el('circle', { cx: x + sw / 2, cy, r: sw / 2, fill: it.color }));
-    out.push(text(x + sw + 6, y + 11 * X, label, { fill: theme.lede, fontSize: size }));
+    out.push(text(x + sw + 6, y + 11 * X, label, { fill: theme.lede, fontSize: size, textDecoration: it.off ? 'line-through' : null }));
     out.push('</g>');
     x += w;
   }

package/src/geo/projection.js

@@ -61,19 +61,71 @@ export function albersUsa() {
   return f;
 }
 
-export const projections = { mercator, equalEarth, 'equal-earth': equalEarth, albersUsa, 'albers-usa': albersUsa, albers: albersUsa };
+/** Equirectangular (placa carré): lon/lat tal cual. Útil para mapas chicos o datos ya en grados. */
+export function equirectangular() {
+  return ([lon, lat]) => [lon * RAD, -lat * RAD];
+}
+
+/**
+ * Coordenadas planas, sin proyectar: para GeoJSON en metros (UTM), en
+ * píxeles o dibujado a mano. `identity` deja el eje y hacia abajo (como
+ * SVG); `planar` lo invierte (y hacia arriba, como un plano cartesiano o UTM).
+ */
+export function identity() { const f = ([x, y]) => [x, y]; f.continuous = true; return f; }
+export function planar() { const f = ([x, y]) => [x, -y]; f.continuous = true; return f; }
+
+/** Cónica de áreas iguales con paralelos y meridiano central propios. */
+export function conicEqualArea({ parallels = [29.5, 45.5], rotate, center = [0, 0] } = {}) {
+  const lon0 = rotate !== undefined ? -[].concat(rotate)[0] : center[0];
+  const f = conic(-lon0, [lon0, center[1] ?? 0], parallels);
+  return ([lon, lat]) => f(lon, lat);
+}
+
+export const projections = {
+  mercator, equalEarth, 'equal-earth': equalEarth, albersUsa, 'albers-usa': albersUsa, albers: albersUsa,
+  equirectangular, 'plate-carree': equirectangular, latlon: equirectangular,
+  identity, none: identity, pixels: identity, planar, cartesian: planar, utm: planar,
+  conic: conicEqualArea, conicEqualArea, 'conic-equal-area': conicEqualArea,
+};
+
+/**
+ * Proyección desde el spec: un nombre ("mercator", "identity"…) o un objeto
+ * { type: "conic", parallels: [-30, -45], rotate: 72 }. Devuelve null si no
+ * se reconoce (se elige una automáticamente).
+ */
+export function makeProjection(p) {
+  if (!p) return null;
+  // Sin distinguir mayúsculas ni guiones: "equalearth", "Equal-Earth" y "equalEarth" son lo mismo.
+  const find = (n) => { const k = String(n ?? '').toLowerCase().replace(/[-_\s]/g, ''); const hit = Object.keys(projections).find((x) => x.toLowerCase().replace(/[-_\s]/g, '') === k); return hit ? projections[hit] : null; };
+  if (typeof p === 'string') { const f = projections[p] || find(p); return f ? f() : null; }
+  if (typeof p === 'object') { const f = projections[p.type || p.name] || find(p.type || p.name); return f ? f(p) : null; }
+  return null;
+}
 
-/** Recorre todos los anillos de una geometría. */
+/**
+ * Todas las secuencias de puntos de una geometría (anillos de polígonos,
+ * líneas y puntos): sirve para encuadrar y para saber si la forma existe.
+ */
 export function rings(geom) {
-  if (!geom) return [];
-  if (geom.type === 'Polygon') return geom.coordinates;
-  if (geom.type === 'MultiPolygon') return geom.coordinates.flat();
-  return [];
+  if (!geom || !geom.type) return [];
+  const c = geom.coordinates;
+  switch (geom.type) {
+    case 'Polygon': case 'MultiLineString': return c || [];
+    case 'MultiPolygon': return (c || []).flat();
+    case 'LineString': case 'MultiPoint': return c && c.length ? [c] : [];
+    case 'Point': return c && c.length >= 2 ? [[c]] : [];
+    case 'GeometryCollection': return (geom.geometries || []).flatMap(rings);
+    default: return [];
+  }
 }
+/** ¿La geometría es de puntos o de líneas (sin área)? */
+export const isPointGeom = (geom) => !!geom && (geom.type === 'Point' || geom.type === 'MultiPoint');
+export const isLineGeom = (geom) => !!geom && (geom.type === 'LineString' || geom.type === 'MultiLineString');
 export function polygonsOf(geom) {
   if (!geom) return [];
   if (geom.type === 'Polygon') return [geom.coordinates];
   if (geom.type === 'MultiPolygon') return geom.coordinates;
+  if (geom.type === 'GeometryCollection') return (geom.geometries || []).flatMap(polygonsOf);
   return [];
 }
 
@@ -114,9 +166,17 @@ const r1 = (v) => Math.round(v * 10) / 10;
 
 /**
  * Geometría → atributo d de SVG. Los anillos que saltan más de 180° de
- * longitud (antimeridiano) se cortan para no cruzar el mapa entero.
+ * longitud (antimeridiano) se cortan para no cruzar el mapa entero. Las
+ * líneas quedan abiertas y los puntos se dibujan como círculos de radio `r`.
  */
-export function pathD(geom, proj) {
+export function pathD(geom, proj, { r = 4.5 } = {}) {
+  if (!geom) return '';
+  if (geom.type === 'GeometryCollection') return (geom.geometries || []).map((x) => pathD(x, proj, { r })).join('');
+  if (isPointGeom(geom)) {
+    const pts = geom.type === 'Point' ? [geom.coordinates] : geom.coordinates || [];
+    return pts.map((p) => { const [x, y] = proj(p); return `M${r1(x - r)},${r1(y)}a${r},${r} 0 1,0 ${2 * r},0a${r},${r} 0 1,0 ${-2 * r},0`; }).join('');
+  }
+  const open = isLineGeom(geom);
   let d = '';
   const cut = !proj.continuous;
   for (const ring of rings(geom)) {
@@ -130,13 +190,20 @@ export function pathD(geom, proj) {
       d += (started ? 'L' : 'M') + X + ',' + Y;
       started = true; lx = X; ly = Y; n++;
     }
-    if (n) d += 'Z';
+    if (n && !open) d += 'Z';
   }
   return d;
 }
 
 /** Área (en px²) y centroide del polígono proyectado más grande. */
 export function centroid(geom, proj) {
+  if (!polygonsOf(geom).length) {
+    // Puntos y líneas: el promedio de sus vértices (área chica fija para las etiquetas).
+    const pts = rings(geom).flat().map(proj);
+    if (!pts.length) return { x: 0, y: 0, area: 0 };
+    const mid = isLineGeom(geom) ? pts[Math.floor(pts.length / 2)] : [pts.reduce((a, p) => a + p[0], 0) / pts.length, pts.reduce((a, p) => a + p[1], 0) / pts.length];
+    return { x: mid[0], y: mid[1], area: 0, point: true };
+  }
   let best = null;
   for (const poly of polygonsOf(geom)) {
     const pts = poly[0].map(proj);