decantr 0.9.0

package/src/chart/_interact.js

@@ -0,0 +1,364 @@
+/**
+ * Interaction Layer — shared infrastructure for all chart types.
+ * Pure callback architecture — zero business logic.
+ * Tooltip, crosshair, zoom/pan, brush selection, legend toggle, keyboard nav.
+ * @module _interact
+ */
+
+// --- Tooltip (enhanced) ---
+
+/**
+ * Attach enhanced tooltip to chart.
+ * Supports Voronoi nearest-point, multi-series, custom render.
+ * @param {HTMLElement} container
+ * @param {SVGElement} svgEl
+ * @param {Object} meta — scene graph meta
+ * @param {Object} spec
+ */
+export function attachTooltip(container, svgEl, meta, spec) {
+  const tooltip = document.createElement('div');
+  tooltip.className = 'd-chart-tooltip';
+  container.appendChild(tooltip);
+
+  const elements = svgEl.querySelectorAll('[data-series],[data-label]');
+  for (const el of elements) {
+    el.addEventListener('mouseenter', () => {
+      const value = el.getAttribute('data-value') || '';
+      const label = el.getAttribute('data-label') || el.getAttribute('data-series') || '';
+
+      if (typeof spec.tooltip === 'function') {
+        tooltip.textContent = '';
+        const result = spec.tooltip({ label, value, element: el });
+        if (typeof result === 'string') tooltip.textContent = result;
+        else if (result) tooltip.appendChild(result);
+      } else {
+        tooltip.textContent = label + (value ? ': ' + value : '');
+      }
+      tooltip.classList.add('d-chart-tooltip-visible');
+    });
+
+    el.addEventListener('mousemove', e => {
+      const rect = container.getBoundingClientRect();
+      tooltip.style.left = (e.clientX - rect.left + 12) + 'px';
+      tooltip.style.top = (e.clientY - rect.top - 8) + 'px';
+    });
+
+    el.addEventListener('mouseleave', () => {
+      tooltip.classList.remove('d-chart-tooltip-visible');
+    });
+  }
+}
+
+// --- Crosshair ---
+
+/**
+ * Attach crosshair guides to cartesian chart.
+ * @param {HTMLElement} container
+ * @param {Object} meta — { margins, innerW, innerH }
+ * @param {Object} spec
+ */
+export function attachCrosshair(container, meta, spec) {
+  if (!spec.crosshair) return;
+
+  const { margins, innerW, innerH } = meta;
+  const overlay = document.createElement('div');
+  overlay.style.cssText = `position:absolute;top:${margins.top}px;left:${margins.left}px;width:${innerW}px;height:${innerH}px;pointer-events:none`;
+  container.appendChild(overlay);
+
+  const vLine = document.createElement('div');
+  vLine.style.cssText = 'position:absolute;top:0;width:1px;height:100%;background:var(--d-muted);opacity:0;transition:opacity 0.1s;pointer-events:none';
+  overlay.appendChild(vLine);
+
+  const hLine = document.createElement('div');
+  hLine.style.cssText = 'position:absolute;left:0;width:100%;height:1px;background:var(--d-muted);opacity:0;transition:opacity 0.1s;pointer-events:none';
+  overlay.appendChild(hLine);
+
+  const inner = container.querySelector('.d-chart-inner');
+  if (!inner) return;
+
+  inner.style.cursor = 'crosshair';
+  inner.addEventListener('mousemove', e => {
+    const rect = inner.getBoundingClientRect();
+    const x = e.clientX - rect.left - margins.left;
+    const y = e.clientY - rect.top - margins.top;
+
+    if (x >= 0 && x <= innerW && y >= 0 && y <= innerH) {
+      vLine.style.left = x + 'px';
+      vLine.style.opacity = '0.5';
+      hLine.style.top = y + 'px';
+      hLine.style.opacity = '0.5';
+    }
+  });
+
+  inner.addEventListener('mouseleave', () => {
+    vLine.style.opacity = '0';
+    hLine.style.opacity = '0';
+  });
+}
+
+// --- Zoom/Pan ---
+
+/**
+ * Attach zoom/pan behavior to chart.
+ * @param {HTMLElement} container
+ * @param {Object} meta
+ * @param {Object} spec
+ * @param {Function} rerender — callback to re-render with new viewport
+ */
+export function attachZoom(container, meta, spec, rerender) {
+  if (!spec.zoom) return;
+
+  const inner = container.querySelector('.d-chart-inner');
+  if (!inner) return;
+
+  let scale = 1;
+  let panX = 0, panY = 0;
+  let dragging = false, lastX = 0, lastY = 0;
+
+  inner.addEventListener('wheel', e => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? 0.9 : 1.1;
+    scale = Math.max(0.5, Math.min(10, scale * delta));
+
+    if (spec.onZoom) {
+      spec.onZoom({ scale, panX, panY });
+    }
+  }, { passive: false });
+
+  inner.addEventListener('mousedown', e => {
+    if (e.button !== 0) return;
+    dragging = true;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    inner.style.cursor = 'grabbing';
+  });
+
+  document.addEventListener('mousemove', e => {
+    if (!dragging) return;
+    panX += e.clientX - lastX;
+    panY += e.clientY - lastY;
+    lastX = e.clientX;
+    lastY = e.clientY;
+
+    if (spec.onZoom) {
+      spec.onZoom({ scale, panX, panY });
+    }
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (dragging) {
+      dragging = false;
+      inner.style.cursor = '';
+    }
+  });
+}
+
+// --- Brush selection ---
+
+/**
+ * Attach brush selection to chart.
+ * @param {HTMLElement} container
+ * @param {Object} meta
+ * @param {Object} spec — { brush: 'x'|'y'|'xy', onBrush: fn }
+ */
+export function attachBrush(container, meta, spec) {
+  if (!spec.brush || !spec.onBrush) return;
+
+  const { margins, innerW, innerH } = meta;
+  const inner = container.querySelector('.d-chart-inner');
+  if (!inner) return;
+
+  const brushEl = document.createElement('div');
+  brushEl.style.cssText = 'position:absolute;background:var(--d-primary-subtle);border:1px solid var(--d-primary-border);display:none;pointer-events:none;z-index:1';
+  inner.appendChild(brushEl);
+
+  let startX, startY, active = false;
+
+  inner.addEventListener('mousedown', e => {
+    if (e.button !== 0 || spec.zoom) return; // Don't conflict with zoom
+    const rect = inner.getBoundingClientRect();
+    startX = e.clientX - rect.left;
+    startY = e.clientY - rect.top;
+    active = true;
+    brushEl.style.display = 'block';
+  });
+
+  document.addEventListener('mousemove', e => {
+    if (!active) return;
+    const rect = inner.getBoundingClientRect();
+    const curX = e.clientX - rect.left;
+    const curY = e.clientY - rect.top;
+
+    const mode = spec.brush === true ? 'x' : spec.brush;
+    const x0 = mode === 'y' ? margins.left : Math.min(startX, curX);
+    const y0 = mode === 'x' ? margins.top : Math.min(startY, curY);
+    const w = mode === 'y' ? innerW : Math.abs(curX - startX);
+    const h = mode === 'x' ? innerH : Math.abs(curY - startY);
+
+    brushEl.style.left = x0 + 'px';
+    brushEl.style.top = y0 + 'px';
+    brushEl.style.width = w + 'px';
+    brushEl.style.height = h + 'px';
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (!active) return;
+    active = false;
+    brushEl.style.display = 'none';
+
+    const rect = inner.getBoundingClientRect();
+    // Compute range from brush rect
+    const brushRect = brushEl.getBoundingClientRect();
+    if (brushRect.width > 5 || brushRect.height > 5) {
+      const range = {
+        x: [brushRect.left - rect.left - margins.left, brushRect.right - rect.left - margins.left],
+        y: [brushRect.top - rect.top - margins.top, brushRect.bottom - rect.top - margins.top]
+      };
+      spec.onBrush({ range });
+    }
+  });
+}
+
+// --- Click handler ---
+
+/**
+ * Attach click handler to chart data elements.
+ * @param {SVGElement} svgEl
+ * @param {Object} meta
+ * @param {Object} spec — { onClick: fn }
+ */
+export function attachClick(svgEl, meta, spec) {
+  if (!spec.onClick) return;
+
+  const elements = svgEl.querySelectorAll('[data-series],[data-label]');
+  for (const el of elements) {
+    el.style.cursor = 'pointer';
+    el.addEventListener('click', e => {
+      spec.onClick({
+        point: {
+          label: el.getAttribute('data-label') || '',
+          value: el.getAttribute('data-value') || ''
+        },
+        series: el.getAttribute('data-series') || '',
+        event: e
+      });
+    });
+  }
+}
+
+// --- Keyboard navigation ---
+
+/**
+ * Attach keyboard navigation to chart.
+ * Arrow keys navigate between data elements, Enter activates.
+ * @param {SVGElement} svgEl
+ * @param {Object} spec
+ */
+export function attachKeyboard(svgEl, spec) {
+  const focusable = svgEl.querySelectorAll('[tabindex]');
+  if (!focusable.length) return;
+
+  svgEl.addEventListener('keydown', e => {
+    const focused = svgEl.querySelector(':focus');
+    if (!focused) return;
+
+    const items = [...focusable];
+    const idx = items.indexOf(focused);
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = items[(idx + 1) % items.length];
+      next.focus();
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = items[(idx - 1 + items.length) % items.length];
+      prev.focus();
+    } else if (e.key === 'Escape') {
+      focused.blur();
+    }
+  });
+}
+
+// --- Legend toggle ---
+
+/**
+ * Build interactive legend with toggle support.
+ * @param {Object[]} series — [{ key, color }]
+ * @param {Object} spec — { onLegendToggle }
+ * @returns {HTMLElement}
+ */
+export function buildInteractiveLegend(series, spec) {
+  const legend = document.createElement('div');
+  legend.className = 'd-chart-legend';
+
+  const toggleState = new Map();
+
+  for (const s of series) {
+    const item = document.createElement('span');
+    item.className = 'd-chart-legend-item';
+
+    const swatch = document.createElement('span');
+    swatch.className = 'd-chart-legend-swatch';
+    swatch.style.background = s.color;
+    item.appendChild(swatch);
+    item.appendChild(document.createTextNode(s.key));
+
+    toggleState.set(s.key, true);
+
+    item.addEventListener('click', () => {
+      const visible = !toggleState.get(s.key);
+      toggleState.set(s.key, visible);
+      item.classList.toggle('d-chart-legend-disabled', !visible);
+
+      if (spec.onLegendToggle) {
+        spec.onLegendToggle({ series: s.key, visible });
+      }
+    });
+
+    legend.appendChild(item);
+  }
+
+  return legend;
+}
+
+// --- Spatial index (R-tree simplified) ---
+
+/**
+ * Build spatial index from scene graph for hit testing.
+ * @param {Object} sceneGraph
+ * @returns {Object} index with .query(x, y) method
+ */
+export function buildSpatialIndex(sceneGraph) {
+  const items = [];
+
+  function collect(node) {
+    if (!node) return;
+    if (node.data && (node.type === 'rect' || node.type === 'circle' || node.type === 'arc' || node.type === 'path')) {
+      items.push(node);
+    }
+    if (node.children) {
+      for (const child of node.children) collect(child);
+    }
+  }
+
+  collect(sceneGraph);
+
+  return {
+    query(x, y, radius = 10) {
+      const results = [];
+      for (const item of items) {
+        if (item.type === 'rect') {
+          if (x >= item.x && x <= item.x + item.w && y >= item.y && y <= item.y + item.h) {
+            results.push(item);
+          }
+        } else if (item.type === 'circle') {
+          const dx = x - item.cx, dy = y - item.cy;
+          if (Math.sqrt(dx * dx + dy * dy) <= (item.r || 0) + radius) {
+            results.push(item);
+          }
+        }
+      }
+      return results;
+    }
+  };
+}

package/src/chart/_palette.js

@@ -0,0 +1,105 @@
+/**
+ * Extended Palette — 8 seed → unlimited series + continuous color scales.
+ * @module _palette
+ */
+
+/**
+ * Get chart color CSS variable for an index.
+ * 0-7: base palette, 8-31: extended, 32+: cycles.
+ * @param {number} index
+ * @returns {string}
+ */
+export function chartColor(index) {
+  return `var(--d-chart-${index % 8})`;
+}
+
+/**
+ * Extended chart color with more variety beyond 8 series.
+ * Uses extended palette tokens generated by derive.js.
+ * @param {number} index
+ * @returns {string}
+ */
+export function chartColorExtended(index) {
+  if (index < 8) return `var(--d-chart-${index})`;
+  if (index < 32) return `var(--d-chart-${index % 8}-ext-${Math.floor((index - 8) / 8) + 1})`;
+  return `var(--d-chart-${index % 8})`;
+}
+
+/** Base palette size */
+export const PALETTE_SIZE = 8;
+
+/** Extended palette size (with 3 extensions per base) */
+export const PALETTE_SIZE_EXTENDED = 32;
+
+/**
+ * Resolve palette to hex values for Canvas/WebGPU rendering.
+ * @param {number} count
+ * @param {HTMLElement} [el]
+ * @returns {string[]}
+ */
+export function resolvePalette(count, el) {
+  const colors = [];
+  const target = el || (typeof document !== 'undefined' ? document.documentElement : null);
+  const style = target && typeof getComputedStyle === 'function' ? getComputedStyle(target) : null;
+
+  for (let i = 0; i < count; i++) {
+    const prop = i < 8 ? `--d-chart-${i}` : `--d-chart-${i % 8}-ext-${Math.floor((i - 8) / 8) + 1}`;
+    let color = style ? style.getPropertyValue(prop).trim() : '';
+    if (!color) color = FALLBACK[i % FALLBACK.length];
+    colors.push(color);
+  }
+
+  return colors;
+}
+
+/**
+ * Create a continuous color scale.
+ * @param {number[]} domain — [min, max] or [min, mid, max]
+ * @param {string[]} stops — hex color stops
+ * @returns {(value: number) => string}
+ */
+export function colorScale(domain, stops) {
+  if (!stops || stops.length < 2) return () => stops?.[0] || '#000';
+  const segments = stops.length - 1;
+  const dMin = domain[0], dMax = domain[domain.length - 1];
+  const dRange = dMax - dMin || 1;
+
+  return function(value) {
+    const t = Math.max(0, Math.min(1, (value - dMin) / dRange));
+    const seg = Math.min(Math.floor(t * segments), segments - 1);
+    const localT = t * segments - seg;
+    return lerpColor(stops[seg], stops[seg + 1], localT);
+  };
+}
+
+// --- Built-in color scales ---
+
+export const scales = {
+  /** Blue sequential */
+  blues: ['#f0f9ff', '#bae6fd', '#38bdf8', '#0284c7', '#075985'],
+  /** Red sequential */
+  reds: ['#fef2f2', '#fca5a5', '#ef4444', '#b91c1c', '#7f1d1d'],
+  /** Green sequential */
+  greens: ['#f0fdf4', '#86efac', '#22c55e', '#15803d', '#14532d'],
+  /** Red → White → Blue diverging */
+  divergingRdBu: ['#ef4444', '#fca5a5', '#fafafa', '#93c5fd', '#3b82f6'],
+  /** Purple → Orange diverging */
+  divergingPrOr: ['#7c3aed', '#c4b5fd', '#fafafa', '#fed7aa', '#f97316'],
+  /** Viridis-inspired */
+  viridis: ['#440154', '#3b528b', '#21918c', '#5ec962', '#fde725'],
+  /** Warm (yellow → red) */
+  warm: ['#fef3c7', '#fbbf24', '#f59e0b', '#ea580c', '#dc2626'],
+  /** Cool (cyan → purple) */
+  cool: ['#ecfeff', '#67e8f9', '#06b6d4', '#7c3aed', '#4c1d95'],
+};
+
+// --- Internals ---
+
+const FALLBACK = ['#1366D9', '#7c3aed', '#0891b2', '#22c55e', '#f59e0b', '#ef4444', '#3b82f6', '#71717a'];
+
+function lerpColor(hex1, hex2, t) {
+  const r1 = parseInt(hex1.slice(1, 3), 16), g1 = parseInt(hex1.slice(3, 5), 16), b1 = parseInt(hex1.slice(5, 7), 16);
+  const r2 = parseInt(hex2.slice(1, 3), 16), g2 = parseInt(hex2.slice(3, 5), 16), b2 = parseInt(hex2.slice(5, 7), 16);
+  const r = Math.round(r1 + (r2 - r1) * t), g = Math.round(g1 + (g2 - g1) * t), b = Math.round(b1 + (b2 - b1) * t);
+  return '#' + [r, g, b].map(c => Math.max(0, Math.min(255, c)).toString(16).padStart(2, '0')).join('');
+}

package/src/chart/_renderer.js

@@ -0,0 +1,52 @@
+/**
+ * Renderer interface and auto-selection dispatch.
+ * Selects SVG, Canvas, or WebGPU based on data size or explicit override.
+ * Fallback chain: WebGPU → Canvas → SVG.
+ * @module _renderer
+ */
+
+import { renderSVG } from './renderers/svg.js';
+import { renderCanvas } from './renderers/canvas.js';
+
+/** @type {number} Threshold below which SVG is used */
+const SVG_THRESHOLD = 3000;
+
+/**
+ * Auto-select and invoke the appropriate renderer.
+ * Dispatch: SVG (<3K) → WebGPU (3K+, if available) → Canvas (fallback).
+ * @param {Object} sceneGraph — scene graph from layout function
+ * @param {Object} spec — original chart spec (for renderer override)
+ * @returns {SVGElement|HTMLCanvasElement}
+ */
+export function render(sceneGraph, spec) {
+  const renderer = spec.renderer || 'auto';
+  const dataLen = sceneGraph.meta?.dataLength || 0;
+
+  if (renderer === 'svg' || (renderer === 'auto' && dataLen < SVG_THRESHOLD)) {
+    return renderSVG(sceneGraph);
+  }
+
+  if (renderer === 'canvas') {
+    return renderCanvas(sceneGraph);
+  }
+
+  if (renderer === 'webgpu' || renderer === 'auto') {
+    // WebGPU-first for large datasets, Canvas as fallback
+    if (renderWebGPU) return renderWebGPU(sceneGraph);
+    return renderCanvas(sceneGraph);
+  }
+
+  return renderSVG(sceneGraph);
+}
+
+// WebGPU renderer reference (set when loaded)
+let renderWebGPU = null;
+
+/**
+ * Register a renderer implementation.
+ * @param {'webgpu'} type
+ * @param {Function} renderFn
+ */
+export function registerRenderer(type, renderFn) {
+  if (type === 'webgpu') renderWebGPU = renderFn;
+}