@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/chart/engine.ts

@@ -0,0 +1,838 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { requestFrame } from '../../core/frame';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, warnOnce, type Instance } from '../../core/types';
+
+/*
+ * Chart: line, area and bar (grouped or stacked) drawn as SVG from the app's
+ * data — no chart runtime. The look is Melon Mind's Indicadores: one series is
+ * monochrome (the text colour, 2.5 px), only the zero baseline is drawn (value
+ * labels on request), the last value sits in a pill at the end of the line with
+ * its point ringed in the surface colour, the selection is a dotted guide with
+ * markers that pop, and the tooltip is the inverse glass. Bars are up to 24 px
+ * wide with 3 px rounded ends, 2 px gaps and the stack total above.
+ * Motion: lines wipe in (700 ms, .38,.49,0,1), bars grow from the baseline,
+ * and new data glides from the drawn values to the new ones (scale included).
+ * Pointer, touch and keyboard (arrows, Home, End, Escape) select a point; a
+ * table carries every value for screen readers. Resizes with its container.
+ */
+
+export type ChartType = 'line' | 'area' | 'bar' | 'composed';
+
+export interface ChartPoint {
+  label: string;
+  value: number | null;
+}
+
+export interface ChartSeries {
+  name: string;
+  /** One value per label; null is a gap (no data). */
+  values: Array<number | null>;
+  /** Per-series mark in a composed chart (default line). */
+  type?: 'line' | 'area' | 'bar';
+  /** An area's lower boundary; values is the upper boundary. Nulls leave gaps. */
+  lowerValues?: Array<number | null>;
+  /** Any CSS colour; default: monochrome for one series, else the --mk-chart-N slot. */
+  color?: string;
+  /** Lines: an SVG dash pattern, e.g. '5 5' (a pace or goal) or '1 6' (a projection). */
+  dash?: string;
+}
+
+export interface ChartOptions {
+  type?: ChartType;
+  labels?: string[];
+  series?: ChartSeries[];
+  /** One series as label/value pairs (instead of labels + series). */
+  points?: ChartPoint[];
+  /** Bars only: stack the series. */
+  stacked?: boolean;
+  formatValue?: (value: number) => string;
+  /** Accessible name (and table caption). */
+  label?: string;
+  /** Plot height in px (default 240). */
+  height?: number;
+  emptyLabel?: string;
+  /** Legend (default: two or more series). */
+  legend?: boolean;
+  /** Value labels and hairlines on the y axis (default false: the baseline only). */
+  axis?: boolean;
+  /** Lines: the last value of the first series in a pill at its end (default true). */
+  endLabel?: boolean;
+  /** The built-in tooltip card (default true); false keeps the guide and markers for chart-tooltip. */
+  tooltip?: boolean;
+  onSelect?: (index: number | null) => void;
+}
+
+export interface ChartInstance extends Instance {
+  /** Merge new options and draw again (keeps the selection when it still exists). */
+  update(options: ChartOptions): void;
+  select(index: number | null): void;
+  readonly selected: number | null;
+}
+
+const SVG = 'http://www.w3.org/2000/svg';
+const SLOTS = 8;
+const BAR_MAX = 24;
+const GAP = 2;
+const END_RADIUS = 3;
+let sequence = 0;
+
+const svg = <K extends keyof SVGElementTagNameMap>(tag: K, attrs: Record<string, string | number> = {}) => {
+  const element = document.createElementNS(SVG, tag);
+  for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, String(value));
+  return element;
+};
+const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);
+const round = (n: number) => Math.round(n * 100) / 100;
+
+/** 1, 2, 2.5 or 5 × 10ⁿ just above `raw`. */
+function niceStep(raw: number) {
+  const power = 10 ** Math.floor(Math.log10(raw));
+  const fraction = raw / power;
+  return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10) * power;
+}
+
+/** Bar path from the baseline `base` to `end`, rounded only at the data end. */
+function barPath(x: number, width: number, base: number, end: number, rounded: boolean) {
+  const height = Math.abs(base - end);
+  const r = rounded ? Math.min(END_RADIUS, width / 2, height) : 0;
+  const dir = end < base ? 1 : -1;
+  if (!r) return `M${round(x)},${round(base)}V${round(end)}H${round(x + width)}V${round(base)}Z`;
+  return `M${round(x)},${round(base)}V${round(end + dir * r)}Q${round(x)},${round(end)} ${round(x + r)},${round(end)}H${round(x + width - r)}Q${round(x + width)},${round(end)} ${round(x + width)},${round(end + dir * r)}V${round(base)}Z`;
+}
+
+interface Model {
+  labels: string[];
+  series: Array<ChartSeries & { color: string }>;
+}
+
+function modelOf(options: ChartOptions): Model {
+  const fromPoints = options.points?.length ? { labels: options.points.map((point) => String(point.label)), series: [{ name: options.label ?? '', values: options.points.map((point) => point.value) }] } : null;
+  const labels = fromPoints?.labels ?? (options.labels ?? []).map(String);
+  const raw: ChartSeries[] = fromPoints?.series ?? options.series ?? [];
+  if (raw.length > SLOTS) warnOnce(`chart: ${raw.length} series; past ${SLOTS} they share a neutral colour — fold the rest into "Other"`);
+  const count = Math.max(labels.length, ...raw.map((series) => series.values.length), 0);
+  const fullLabels = Array.from({ length: count }, (_, i) => labels[i] ?? String(i + 1));
+  const mono = raw.length === 1;
+  const series = raw.map((series, i) => ({
+    name: String(series.name ?? ''),
+    values: Array.from({ length: count }, (_, j) => (finite(series.values[j]) ? series.values[j]! : null)),
+    color: series.color ?? (mono ? 'var(--mk-chart-mono)' : i < SLOTS ? `var(--mk-chart-${i + 1})` : 'var(--mk-chart-other)'),
+    dash: series.dash,
+    type: series.type,
+    lowerValues: series.lowerValues ? Array.from({ length: count }, (_, j) => finite(series.lowerValues![j]) ? series.lowerValues![j]! : null) : undefined,
+  }));
+  return { labels: fullLabels, series };
+}
+
+type Values = Array<Array<number | null>>;
+
+export function createChart(root: HTMLElement | null, initial: ChartOptions = {}): ChartInstance {
+  if (!root) return inert({ update() {}, select() {}, selected: null });
+  registerMotion();
+  const scope = createScope();
+  const uid = `mk-chart-${++sequence}`;
+  let options: ChartOptions = { ...initial };
+  let selected: number | null = null;
+  let model = modelOf(options);
+
+  const made = <K extends keyof HTMLElementTagNameMap>(tag: K, parent: Element = root) => {
+    const element = document.createElement(tag);
+    parent.append(element);
+    scope.add(() => element.remove());
+    return element;
+  };
+  const plot = made('div');
+  plot.dataset.mkChartPlot = '';
+  const canvas = svg('svg');
+  canvas.dataset.mkChartSvg = '';
+  canvas.setAttribute('role', 'img');
+  canvas.setAttribute('tabindex', '0');
+  canvas.setAttribute('focusable', 'true');
+  plot.append(canvas);
+  const pill = made('span', plot);
+  pill.dataset.mkChartEnd = '';
+  pill.setAttribute('aria-hidden', 'true');
+  pill.hidden = true;
+  const tooltip = made('div', plot);
+  tooltip.dataset.mkChartTooltip = '';
+  tooltip.setAttribute('aria-hidden', 'true');
+  tooltip.hidden = true;
+  const empty = made('p');
+  empty.dataset.mkChartEmpty = '';
+  empty.hidden = true;
+  const legend = made('ul');
+  legend.dataset.mkChartLegend = '';
+  const table = made('table');
+  table.dataset.mkChartTable = '';
+  table.className = 'mk-sr-only';
+  const live = made('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  scope.attr(root, 'data-mk-ready', '');
+
+  // Layout of the last paint, for selection.
+  let geometry = { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0, xs: [] as number[], y: (n: number) => n, base: 0 };
+  let cursor: SVGGElement | null = null;
+  let band: SVGRectElement | null = null;
+  /** What is drawn now: values and domain (they trail the model while gliding). */
+  let shown: { values: Values; lower: Values; lo: number; hi: number; type: ChartType; stacked: boolean } | null = null;
+  let glide: gsap.core.Tween | null = null;
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation) => {
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    glide?.kill();
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    gsap.killTweensOf(tooltip);
+  });
+
+  const format = (value: number) => {
+    if (options.formatValue) return options.formatValue(value);
+    return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
+  };
+  const type = (): ChartType => (options.type === 'bar' || options.type === 'area' || options.type === 'composed' ? options.type : 'line');
+  const seriesType = (index: number) => type() === 'composed' ? model.series[index]!.type ?? 'line' : type();
+  const hasBars = () => model.series.some((_, index) => seriesType(index) === 'bar');
+  const stacked = () => type() === 'bar' && Boolean(options.stacked) && model.series.length > 1;
+  const hasData = () => model.labels.length > 0 && model.series.some((series) => series.values.some(finite));
+
+  const totalsOf = (values: Values, index: number) => {
+    let up = 0;
+    let down = 0;
+    for (const list of values) {
+      const value = list[index];
+      if (!finite(value)) continue;
+      if (value >= 0) up += value;
+      else down += value;
+    }
+    return { up, down };
+  };
+  const targetValues = (): Values => model.series.map((series) => series.values);
+  const lowerValues = (): Values => model.series.map((series) => series.lowerValues ?? []);
+  const rangeText = (series: Model['series'][number], index: number) => {
+    const value = series.values[index];
+    const lower = series.lowerValues?.[index];
+    if (!finite(value)) return '—';
+    return finite(lower) ? `${format(lower)} – ${format(value)}` : format(value);
+  };
+  const totals = (index: number) => totalsOf(targetValues(), index);
+
+  const domainOf = (values: Values) => {
+    let lo = 0;
+    let hi = 0;
+    model.labels.forEach((_, i) => {
+      if (stacked()) {
+        const { up, down } = totalsOf(values, i);
+        hi = Math.max(hi, up);
+        lo = Math.min(lo, down);
+      } else {
+        for (const list of values) {
+          const value = list[i];
+          if (!finite(value)) continue;
+          hi = Math.max(hi, value);
+          lo = Math.min(lo, value);
+        }
+      }
+      for (const list of lowerValues()) {
+        if (finite(list[i])) { lo = Math.min(lo, list[i]!); hi = Math.max(hi, list[i]!); }
+      }
+    });
+    if (hi === lo) hi = lo + 1;
+    const step = niceStep((hi - lo) / 4);
+    // With value labels the scale rounds to them; without, it is the data ×1.04 (Melonmind).
+    if (!options.axis) return { lo: lo * 1.04, hi: hi * 1.04, step: Math.max(hi * 1.04 - lo * 1.04, 1e-9) };
+    return { lo: Math.floor(lo / step + 1e-9) * step, hi: Math.ceil(hi / step - 1e-9) * step, step };
+  };
+
+  const describe = () => {
+    const name = options.label ?? 'Gráfica';
+    if (!hasData()) return `${name}: ${options.emptyLabel ?? 'sin datos'}`;
+    const names = model.series.map((series) => series.name).filter(Boolean).join(', ');
+    return `${name}. ${model.labels.length} ${model.labels.length === 1 ? 'punto' : 'puntos'}, de ${model.labels[0]} a ${model.labels[model.labels.length - 1]}${names ? `. Series: ${names}` : ''}. Usa las flechas para recorrer los valores.`;
+  };
+
+  const renderTable = () => {
+    table.replaceChildren();
+    const caption = document.createElement('caption');
+    caption.textContent = options.label ?? 'Gráfica';
+    const head = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    const corner = document.createElement('th');
+    corner.scope = 'col';
+    corner.textContent = 'Etiqueta';
+    headRow.append(corner);
+    for (const series of model.series) {
+      const th = document.createElement('th');
+      th.scope = 'col';
+      th.textContent = series.name || 'Valor';
+      headRow.append(th);
+    }
+    if (stacked()) {
+      const th = document.createElement('th');
+      th.scope = 'col';
+      th.textContent = 'Total';
+      headRow.append(th);
+    }
+    head.append(headRow);
+    const body = document.createElement('tbody');
+    model.labels.forEach((label, i) => {
+      const row = document.createElement('tr');
+      const th = document.createElement('th');
+      th.scope = 'row';
+      th.textContent = label;
+      row.append(th);
+      for (const series of model.series) {
+        const td = document.createElement('td');
+        const value = series.values[i];
+        td.textContent = rangeText(series, i);
+        row.append(td);
+      }
+      if (stacked()) {
+        const td = document.createElement('td');
+        const { up, down } = totals(i);
+        td.textContent = format(up + down);
+        row.append(td);
+      }
+      body.append(row);
+    });
+    table.append(caption, head, body);
+  };
+
+  const renderLegend = () => {
+    legend.replaceChildren();
+    const show = options.legend ?? model.series.length > 1;
+    legend.hidden = !show || !hasData();
+    if (legend.hidden) return;
+    for (const [index, series] of model.series.entries()) {
+      const item = document.createElement('li');
+      const swatch = document.createElement('span');
+      swatch.dataset.mkChartSwatch = '';
+      swatch.dataset.mkType = seriesType(index);
+      swatch.style.background = series.color;
+      swatch.style.color = series.color;
+      if (series.dash) swatch.dataset.mkDash = '';
+      swatch.setAttribute('aria-hidden', 'true');
+      const name = document.createElement('span');
+      name.textContent = series.name;
+      item.append(swatch, name);
+      legend.append(item);
+    }
+  };
+
+  const lastPoint = (list: Array<number | null> | undefined) => {
+    if (!list) return -1;
+    for (let i = list.length - 1; i >= 0; i--) if (finite(list[i])) return i;
+    return -1;
+  };
+
+  /** Draw `values` on the domain lo…hi (called every frame while gliding). */
+  const paint = (values: Values, lo: number, hi: number, step: number, lower: Values = lowerValues()) => {
+    canvas.replaceChildren();
+    const width = Math.max(120, Math.round(plot.clientWidth || root.clientWidth || 600));
+    const height = Math.max(80, Math.round(finite(options.height) ? options.height : 240));
+    canvas.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    canvas.setAttribute('width', String(width));
+    canvas.setAttribute('height', String(height));
+    const bar = hasBars();
+    const axis = Boolean(options.axis);
+    const ticks: number[] = [];
+    for (let t = lo; t <= hi + step / 2; t += step) ticks.push(Number(t.toPrecision(12)));
+    const tickText = ticks.map(format);
+    const withEnd = seriesType(0) !== 'bar' && options.endLabel !== false && lastPoint(values[0]) >= 0;
+    const left = axis ? Math.min(96, Math.max(28, Math.max(...tickText.map((text) => text.length)) * 7 + 12)) : 4;
+    const top = 16;
+    const right = withEnd ? Math.min(120, Math.max(48, format(values[0]![lastPoint(values[0])]!).length * 7.5 + 28)) : 8;
+    const bottom = 30;
+    const plotW = width - left - right;
+    const plotH = height - top - bottom;
+    const y = (n: number) => top + plotH - ((n - lo) / (hi - lo || 1)) * plotH;
+    const base = y(0);
+    const n = model.labels.length;
+    const slot = plotW / n;
+    const xs = model.labels.map((_, i) => (bar ? left + slot * (i + 0.5) : n === 1 ? left + plotW / 2 : left + (plotW * i) / (n - 1)));
+    geometry = { width, height, top, bottom: top + plotH, left, right: width - right, xs, y, base };
+
+    // Baseline (and, with `axis`, hairlines with their values).
+    const grid = svg('g', { 'data-mk-part': 'grid' });
+    if (!axis) {
+      const zero = svg('line', { x1: left, x2: width - right, y1: round(base), y2: round(base) });
+      zero.dataset.mkZero = '';
+      grid.append(zero);
+    }
+    if (axis) ticks.forEach((tick, i) => {
+      const at = round(y(tick));
+      const line = svg('line', { x1: left, x2: width - right, y1: at, y2: at });
+      if (tick === 0) line.dataset.mkZero = '';
+      grid.append(line);
+      const text = svg('text', { x: left - 8, y: at, 'text-anchor': 'end', 'dominant-baseline': 'middle' });
+      text.textContent = tickText[i]!;
+      grid.append(text);
+    });
+    canvas.append(grid);
+
+    // X labels, thinned to what fits.
+    const xAxis = svg('g', { 'data-mk-part': 'x-axis' });
+    const longest = Math.max(...model.labels.map((label) => label.length));
+    const every = Math.max(1, Math.ceil((n * (longest * 6.5 + 16)) / plotW));
+    model.labels.forEach((label, i) => {
+      if (i % every) return;
+      const anchor = bar || n === 1 ? 'middle' : i === 0 ? 'start' : 'middle';
+      const text = svg('text', { x: round(xs[i]!), y: height - 8, 'text-anchor': anchor });
+      text.textContent = label;
+      xAxis.append(text);
+    });
+    canvas.append(xAxis);
+
+    band = null;
+    if (bar) {
+      band = svg('rect', { 'data-mk-part': 'band', y: top, height: plotH, rx: 12 });
+      band.style.display = 'none';
+      canvas.append(band);
+    }
+
+    const marks = svg('g', { 'data-mk-part': 'series' });
+    const defs = svg('defs');
+    if (bar) {
+      const barIndices = model.series.flatMap((_, index) => seriesType(index) === 'bar' ? [index] : []);
+      const groups = stacked() ? 1 : barIndices.length;
+      const barWidth = Math.max(2, Math.min(BAR_MAX, (slot * 0.62 - GAP * (groups - 1)) / groups));
+      const totalsLayer = svg('g', { 'data-mk-part': 'totals' });
+      model.labels.forEach((_, i) => {
+        if (stacked()) {
+          let up = 0;
+          let down = 0;
+          const outer = { up: -1, down: -1 };
+          values.forEach((list, k) => {
+            const value = list[i];
+            if (finite(value) && value > 0) outer.up = k;
+            if (finite(value) && value < 0) outer.down = k;
+          });
+          values.forEach((list, k) => {
+            const value = list[i];
+            if (!finite(value) || value === 0) return;
+            const from = value > 0 ? up : down;
+            const to = from + value;
+            if (value > 0) up = to;
+            else down = to;
+            // A 2 px surface gap between touching segments.
+            const start = y(from) + (from !== 0 ? (value > 0 ? -GAP : GAP) : 0);
+            const end = y(to);
+            if ((value > 0 && end >= start) || (value < 0 && end <= start)) return;
+            const path = svg('path', { d: barPath(xs[i]! - barWidth / 2, barWidth, start, end, k === (value > 0 ? outer.up : outer.down)), 'data-mk-index': i, 'data-mk-series': k });
+            path.style.fill = model.series[k]!.color;
+            marks.append(path);
+          });
+          // The stack total above it, when the columns have room.
+          if (slot >= 22 && up > 0) {
+            const total = totals(i);
+            const text = svg('text', { x: round(xs[i]!), y: round(y(up) - 6), 'text-anchor': 'middle', 'data-mk-part': 'total' });
+            text.textContent = format(total.up + total.down);
+            totalsLayer.append(text);
+          }
+        } else {
+          const groupWidth = groups * barWidth + GAP * (groups - 1);
+          values.forEach((list, k) => {
+            if (seriesType(k) !== 'bar') return;
+            const value = list[i];
+            if (!finite(value) || value === 0) return;
+            const x = xs[i]! - groupWidth / 2 + barIndices.indexOf(k) * (barWidth + GAP);
+            const path = svg('path', { d: barPath(x, barWidth, base, y(value), true), 'data-mk-index': i, 'data-mk-series': k });
+            path.style.fill = model.series[k]!.color;
+            marks.append(path);
+          });
+        }
+      });
+      if (totalsLayer.childNodes.length) canvas.append(totalsLayer);
+    }
+    if (model.series.some((_, index) => seriesType(index) !== 'bar')) {
+      values.forEach((list, k) => {
+        if (seriesType(k) === 'bar') return;
+        const series = model.series[k]!;
+        const runs: Array<Array<[number, number, number]>> = [];
+        let run: Array<[number, number, number]> = [];
+        list.forEach((value, i) => {
+          const bottomValue = lower[k]?.[i];
+          if (finite(value) && (!series.lowerValues || finite(bottomValue))) run.push([xs[i]!, y(value), finite(bottomValue) ? y(bottomValue) : base]);
+          else if (run.length) {
+            runs.push(run);
+            run = [];
+          }
+        });
+        if (run.length) runs.push(run);
+        if (seriesType(k) === 'area') {
+          const gradient = svg('linearGradient', { id: `${uid}-fill-${k}`, x1: 0, x2: 0, y1: 0, y2: 1 });
+          const stop = (offset: string, opacity: string) => {
+            const element = svg('stop', { offset });
+            element.style.stopColor = series.color;
+            element.style.stopOpacity = opacity;
+            return element;
+          };
+          gradient.append(stop('0', '0.25'), stop('1', '0'));
+          defs.append(gradient);
+          for (const points of runs) {
+            if (points.length < 2) continue;
+            const d = `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join('L')}L${[...points].reverse().map(([px, , py]) => `${round(px)},${round(py)}`).join('L')}Z`;
+            const area = svg('path', { d, 'data-mk-part': 'area', 'data-mk-series': k });
+            area.style.fill = `url(#${uid}-fill-${k})`;
+            marks.append(area);
+          }
+        }
+        for (const points of runs) {
+          if (points.length === 1) {
+            // A lone point has no line: a marker shows it.
+            const dot = svg('circle', { cx: round(points[0]![0]), cy: round(points[0]![1]), r: 4, 'data-mk-part': 'dot' });
+            dot.style.fill = series.color;
+            marks.append(dot);
+            continue;
+          }
+          const line = svg('path', { d: `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join('L')}`, 'data-mk-part': 'line' });
+          line.style.stroke = series.color;
+          // Dotted patterns (a first dash of 1 or less) draw round dots; dashes stay thin.
+          const dotted = Boolean(series.dash) && Number(series.dash!.trim().split(/[\s,]+/)[0]) <= 1;
+          line.style.strokeWidth = dotted ? '2.5' : series.dash ? '1.5' : k === 0 ? '2.5' : '2';
+          if (series.dash) line.style.strokeDasharray = series.dash;
+          marks.append(line);
+        }
+      });
+      // The last value of the first series: a ringed point and its pill.
+      const last = lastPoint(values[0]);
+      if (last >= 0 && seriesType(0) !== 'bar' && !model.series[0]!.dash) {
+        const point = svg('circle', { cx: round(xs[last]!), cy: round(y(values[0]![last]!)), r: 5, 'data-mk-part': 'end' });
+        point.style.fill = model.series[0]!.color;
+        marks.append(point);
+      }
+    }
+    if (defs.childNodes.length) canvas.append(defs);
+    canvas.append(marks);
+    cursor = svg('g', { 'data-mk-part': 'cursor' });
+    canvas.append(cursor);
+
+    const last = withEnd ? lastPoint(values[0]) : -1;
+    pill.hidden = last < 0;
+    if (last >= 0) {
+      pill.textContent = format(values[0]![last]!);
+      const pillH = pill.offsetHeight || 22;
+      pill.style.left = `${round(width - right + 10)}px`;
+      pill.style.top = `${round(y(values[0]![last]!) - pillH / 2)}px`;
+    }
+  };
+
+  let markerIndex: number | null = null;
+  /** Where the selection points, in plot px (for mk:select). */
+  let anchor = { x: 0, y: 0 };
+  const paintSelection = (announce: boolean) => {
+    if (!cursor) return;
+    cursor.replaceChildren();
+    if (band) band.style.display = 'none';
+    for (const mark of canvas.querySelectorAll('[data-mk-index]')) mark.removeAttribute('data-mk-dim');
+    if (selected === null || !hasData()) {
+      if (!tooltip.hidden && !reduced()) {
+        gsap.killTweensOf(tooltip, 'opacity,scale');
+        keep(gsap.to(tooltip, { opacity: 0, scale: 0.94, duration: 0.15, ease: 'power2.in', onComplete: () => {
+          tooltip.hidden = true;
+        } }));
+      } else tooltip.hidden = true;
+      markerIndex = null;
+      return;
+    }
+    const i = selected;
+    const x = geometry.xs[i]!;
+    const bar = type() === 'bar';
+    const fresh = markerIndex !== i;
+    markerIndex = i;
+    let anchorY = geometry.bottom;
+    if (bar && band) {
+      const slot = (geometry.right - geometry.left) / model.labels.length;
+      band.setAttribute('x', String(round(x - slot / 2 + 2)));
+      band.setAttribute('width', String(round(Math.max(0, slot - 4))));
+      band.style.display = '';
+      for (const mark of canvas.querySelectorAll<SVGElement>('[data-mk-index]')) if (mark.getAttribute('data-mk-index') !== String(i)) mark.setAttribute('data-mk-dim', '');
+      const { up, down } = totals(i);
+      anchorY = stacked() ? geometry.y(up || down) : Math.min(...model.series.map((series) => (finite(series.values[i]) ? geometry.y(series.values[i]!) : geometry.bottom)));
+    } else {
+      cursor.append(svg('line', { x1: round(x), x2: round(x), y1: geometry.top, y2: geometry.bottom, 'data-mk-part': 'guide' }));
+      model.series.forEach((series) => {
+        const value = series.values[i];
+        if (!finite(value)) return;
+        const cy = geometry.y(value);
+        anchorY = Math.min(anchorY, cy);
+        const dot = svg('circle', { cx: round(x), cy: round(cy), r: 5, 'data-mk-part': 'marker' });
+        dot.style.fill = series.color;
+        cursor!.append(dot);
+        if (fresh && !reduced()) keep(gsap.fromTo(dot, { attr: { r: 0 } }, { attr: { r: 5 }, duration: 0.3, ease: EASE.pop }));
+      });
+    }
+    // Tooltip: label, one row per series (text in text colours, a swatch for identity).
+    tooltip.replaceChildren();
+    const title = document.createElement('strong');
+    title.textContent = model.labels[i]!;
+    tooltip.append(title);
+    const rows: string[] = [];
+    const shownSeries = model.series.filter((series) => finite(series.values[i]));
+    for (const series of shownSeries.length ? shownSeries : model.series) {
+      const value = series.values[i];
+      const row = document.createElement('span');
+      row.dataset.mkChartRow = '';
+      const swatch = document.createElement('i');
+      // Text-coloured series would vanish on the inverse glass: they show as a line in its ink.
+      if (/--mk-(text|chart-mono|muted)/.test(series.color)) swatch.dataset.mkMono = '';
+      else swatch.style.background = series.color;
+      if (series.dash) swatch.dataset.mkDash = '';
+      const name = document.createElement('span');
+      name.textContent = series.name;
+      const amount = document.createElement('b');
+      amount.textContent = rangeText(series, i);
+      row.append(swatch, name, amount);
+      tooltip.append(row);
+      rows.push(`${series.name ? `${series.name}: ` : ''}${finite(value) ? rangeText(series, i) : 'sin dato'}`);
+    }
+    if (stacked()) {
+      const { up, down } = totals(i);
+      const row = document.createElement('span');
+      row.dataset.mkChartRow = 'total';
+      const name = document.createElement('span');
+      name.textContent = 'Total';
+      const amount = document.createElement('b');
+      amount.textContent = format(up + down);
+      row.append(document.createElement('i'), name, amount);
+      tooltip.append(row);
+      rows.push(`Total: ${format(up + down)}`);
+    }
+    anchor = { x: round(x), y: round(anchorY) };
+    if (options.tooltip === false) {
+      tooltip.hidden = true;
+      if (announce) live.textContent = `${model.labels[i]}. ${rows.join('. ')}`;
+      return;
+    }
+    const appearing = tooltip.hidden;
+    tooltip.hidden = false;
+    // Beside the point, towards the middle of the plot, inside it.
+    const tipW = tooltip.offsetWidth || 160;
+    const tipH = tooltip.offsetHeight || 60;
+    const towardsLeft = x > geometry.width / 2;
+    const left = round(Math.max(0, Math.min(geometry.width - tipW, towardsLeft ? x - 16 - tipW : x + 16)));
+    const top = round(Math.max(0, Math.min(geometry.height - tipH, anchorY - tipH - 12)));
+    if (appearing || reduced()) {
+      gsap.killTweensOf(tooltip);
+      gsap.set(tooltip, { x: left, y: top });
+      if (!reduced()) keep(gsap.fromTo(tooltip, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.25, ease: EASE.pop }));
+      else gsap.set(tooltip, { opacity: 1, scale: 1 });
+    } else {
+      gsap.killTweensOf(tooltip, 'opacity,scale');
+      gsap.set(tooltip, { opacity: 1, scale: 1 });
+      keep(gsap.to(tooltip, { x: left, y: top, duration: 0.25, ease: 'power3.out', overwrite: 'auto' }));
+    }
+    if (announce) live.textContent = `${model.labels[i]}. ${rows.join('. ')}`;
+  };
+
+  /** A resize while gliding waits for the glide to end. */
+  let resized = false;
+  const settle = () => {
+    if (!resized || scope.disposed) return;
+    resized = false;
+    draw(false);
+  };
+
+  /** Rebuild everything for the model; `animate` glides from what is drawn. */
+  const draw = (animate: boolean) => {
+    glide?.kill();
+    canvas.setAttribute('aria-label', describe());
+    scope.attr(root, 'data-mk-chart-type', type());
+    renderTable();
+    renderLegend();
+    const ok = hasData();
+    empty.hidden = ok;
+    empty.textContent = options.emptyLabel ?? 'Sin datos para mostrar';
+    plot.hidden = !ok;
+    if (!ok) {
+      canvas.replaceChildren();
+      cursor = null;
+      tooltip.hidden = true;
+      pill.hidden = true;
+      selected = null;
+      shown = null;
+      return;
+    }
+    if (selected !== null && selected >= model.labels.length) selected = null;
+    const target = targetValues();
+    const domain = domainOf(target);
+    const finish = () => {
+      shown = { values: target, lower: lowerValues(), lo: domain.lo, hi: domain.hi, type: type(), stacked: stacked() };
+      paint(target, domain.lo, domain.hi, domain.step);
+      paintSelection(false);
+    };
+    if (!animate || reduced()) return finish();
+    const comparable = shown && shown.type === type() && shown.stacked === stacked() && shown.values.length === target.length && shown.values.every((list, k) => list.length === target[k]!.length);
+    if (comparable) {
+      // New data: values and scale glide from what is drawn.
+      const from = shown!;
+      const state = { t: 0 };
+      glide = gsap.to(state, {
+        t: 1,
+        duration: 0.6,
+        ease: type() === 'bar' ? EASE.swatch : 'power3.out',
+        onUpdate: () => {
+          const t = state.t;
+          const values = target.map((list, k) => list.map((value, i) => {
+            const before = from.values[k]![i];
+            return finite(value) && finite(before) ? before + (value - before) * t : value;
+          }));
+          const lower = lowerValues().map((list, k) => list.map((value, i) => {
+            const before = from.lower[k]?.[i];
+            return finite(value) && finite(before) ? before + (value - before) * t : value;
+          }));
+          paint(values, from.lo + (domain.lo - from.lo) * t, from.hi + (domain.hi - from.hi) * t, domain.step, lower);
+          paintSelection(false);
+        },
+        onComplete: () => {
+          finish();
+          settle();
+        },
+      });
+      return;
+    }
+    // First appearance: bars grow from the baseline, lines wipe in from the left.
+    finish();
+    if (type() === 'bar') {
+      const state = { t: 0 };
+      glide = gsap.to(state, {
+        t: 1,
+        duration: 0.7,
+        ease: EASE.swatch,
+        onUpdate: () => paint(target.map((list) => list.map((value) => (finite(value) ? value * state.t : value))), domain.lo, domain.hi, domain.step),
+        onComplete: () => {
+          finish();
+          settle();
+        },
+      });
+      return;
+    }
+    const clip = svg('clipPath', { id: `${uid}-wipe` });
+    const rect = svg('rect', { x: 0, y: 0, width: 0, height: geometry.height });
+    clip.append(rect);
+    canvas.prepend(clip);
+    const series = canvas.querySelector('[data-mk-part="series"]');
+    series?.setAttribute('clip-path', `url(#${uid}-wipe)`);
+    pill.style.opacity = '0';
+    glide = gsap.to(rect, {
+      attr: { width: geometry.width },
+      duration: 0.7,
+      ease: EASE.wipe,
+      onComplete: () => {
+        series?.removeAttribute('clip-path');
+        clip.remove();
+        keep(gsap.fromTo(pill, { opacity: 0, x: -6 }, { opacity: 1, x: 0, duration: 0.3, ease: EASE.pop, clearProps: 'opacity,transform' }));
+        settle();
+      },
+      onInterrupt: () => {
+        pill.style.removeProperty('opacity');
+      },
+    });
+  };
+
+  const select = (index: number | null, announce = false) => {
+    if (scope.disposed) return;
+    const next = index === null || !hasData() ? null : Math.max(0, Math.min(model.labels.length - 1, Math.round(index)));
+    const changed = next !== selected;
+    selected = next;
+    paintSelection(announce);
+    if (!changed) return;
+    options.onSelect?.(selected);
+    root.dispatchEvent(
+      new CustomEvent('mk:select', {
+        bubbles: true,
+        detail: {
+          index: selected,
+          label: selected === null ? null : model.labels[selected],
+          values: selected === null ? [] : model.series.map((series) => series.values[selected!]),
+          // Where the selection points (plot px) and each series there, for chart-tooltip.
+          x: selected === null ? null : anchor.x,
+          y: selected === null ? null : anchor.y,
+          series:
+            selected === null
+              ? []
+              : model.series.map((series) => ({ name: series.name, color: series.color, value: series.values[selected!], previous: selected! > 0 ? series.values[selected! - 1] : null })),
+        },
+      }),
+    );
+  };
+
+  const indexAt = (clientX: number) => {
+    const box = canvas.getBoundingClientRect();
+    const scale = box.width ? geometry.width / box.width : 1;
+    const x = (clientX - box.left) * scale;
+    let best = 0;
+    geometry.xs.forEach((candidate, i) => {
+      if (Math.abs(candidate - x) < Math.abs(geometry.xs[best]! - x)) best = i;
+    });
+    return best;
+  };
+  scope.on(canvas, 'pointermove', (event) => select(indexAt((event as PointerEvent).clientX)));
+  scope.on(canvas, 'pointerdown', (event) => select(indexAt((event as PointerEvent).clientX)));
+  // Touch keeps its selection when the finger lifts; a mouse leaving clears it.
+  scope.on(canvas, 'pointerleave', (event) => {
+    if ((event as PointerEvent).pointerType === 'mouse') select(null);
+  });
+  scope.on(canvas, 'focus', () => {
+    if (selected === null && hasData()) select(0, true);
+  });
+  scope.on(canvas, 'blur', () => select(null));
+  scope.on(canvas, 'keydown', (event) => {
+    const key = (event as KeyboardEvent).key;
+    const last = model.labels.length - 1;
+    const moves: Record<string, number | null> = {
+      ArrowRight: Math.min(last, (selected ?? -1) + 1),
+      ArrowUp: Math.min(last, (selected ?? -1) + 1),
+      ArrowLeft: Math.max(0, (selected ?? 1) - 1),
+      ArrowDown: Math.max(0, (selected ?? 1) - 1),
+      Home: 0,
+      End: last,
+      Escape: null,
+    };
+    if (!(key in moves) || !hasData()) return;
+    event.preventDefault();
+    select(moves[key]!, true);
+  });
+
+  if (typeof ResizeObserver === 'function') {
+    let width = 0;
+    let cancel = () => {};
+    const observer = scope.observe(
+      new ResizeObserver(() => {
+        const next = Math.round(plot.clientWidth || root.clientWidth);
+        if (!next || next === width) return;
+        width = next;
+        if (next === geometry.width) return;
+        if (glide?.isActive()) {
+          resized = true;
+          return;
+        }
+        cancel();
+        cancel = requestFrame(() => draw(false));
+      }),
+    );
+    observer.observe(root);
+    scope.add(() => cancel());
+  }
+  draw(true);
+
+  return {
+    update(next) {
+      if (scope.disposed) return;
+      options = { ...options, ...next };
+      model = modelOf(options);
+      draw(true);
+    },
+    select: (index) => select(index),
+    get selected() {
+      return selected;
+    },
+    destroy: () => scope.dispose(),
+  };
+}