@aeriz/chart 1.0.1 → 2.0.0

package/src/base.js

@@ -1,562 +0,0 @@
-// base.js — Chart base class. Handles:
-//   • Lifecycle (mount, resize, destroy, animation loop)
-//   • Theme resolution from CSS variables + reactive invalidation
-//   • Hit testing (pixel-perfect, no DPR confusion)
-//   • Tooltip (DOM, GPU-composited)
-//   • Axes (linear, log, time, category)
-//   • State overlays (loading, empty, error)
-
-import { Engine } from './engine.js';
-import * as M from './math.js';
-
-// ─── Global animation scheduler ─────────────────────────────
-const charts = new Set();
-let rafId = null;
-let lastTime = 0;
-let fps = 60;
-let frames = 0;
-let fpsT = 0;
-
-function tick(now) {
-  if (now - fpsT > 500) {
-    fps = Math.round((1000 * frames) / (now - fpsT));
-    frames = 0;
-    fpsT = now;
-  }
-  frames++;
-  let active = false;
-  for (const c of charts) {
-    try {
-      const stillActive = c._tick(now);
-      if (stillActive) active = true;
-    } catch (e) { console.error(e); }
-  }
-  rafId = (charts.size > 0 && active) ? requestAnimationFrame(tick) : null;
-}
-
-function schedule(chart) {
-  charts.add(chart);
-  if (rafId === null) {
-    fpsT = lastTime = performance.now();
-    rafId = requestAnimationFrame(tick);
-  }
-}
-
-export const scheduler = { schedule, fps: () => fps, count: () => charts.size };
-export function getFPS() { return fps; }
-export function getActiveCount() { return charts.size; }
-
-// ─── Theme resolution ───────────────────────────────────────
-const TOKENS = {
-  bg: ['--aeriz-bg', '#ffffff'],
-  surface: ['--aeriz-surface', 'transparent'],
-  text: ['--aeriz-text', '#222'],
-  muted: ['--aeriz-muted', '#888'],
-  grid: ['--aeriz-grid', 'rgba(0,0,0,0.08)'],
-  axis: ['--aeriz-axis', 'rgba(0,0,0,0.3)'],
-  accent: ['--aeriz-accent', '#64c8ff'],
-  font: ['--aeriz-font', 'ui-monospace, SFMono-Regular, Menlo, monospace'],
-  fontSize: ['--aeriz-font-size', '11', 'number'],
-  lineWidth: ['--aeriz-line-width', '2', 'number'],
-  pointRadius: ['--aeriz-point-radius', '3', 'number'],
-  barRadius: ['--aeriz-bar-radius', '3', 'number'],
-  tooltipBg: ['--aeriz-tooltip-bg', 'rgba(20,20,28,0.95)'],
-  tooltipFg: ['--aeriz-tooltip-fg', '#fff'],
-};
-
-function resolveTheme(el) {
-  const cs = getComputedStyle(el);
-  const out = {};
-  for (const [k, [varName, fallback, kind]] of Object.entries(TOKENS)) {
-    const raw = (cs.getPropertyValue(varName) || '').trim();
-    const v = raw || fallback;
-    out[k] = kind === 'number' ? parseFloat(v) : v;
-  }
-  return out;
-}
-
-// ─── Color palette resolution ───────────────────────────────
-function readPalette(el) {
-  const cs = getComputedStyle(el);
-  const out = [];
-  for (let i = 1; i <= 12; i++) {
-    const v = (cs.getPropertyValue(`--aeriz-color-${i}`) || '').trim();
-    if (v) out.push(v);
-  }
-  return out.length ? out : M.PALETTE;
-}
-
-// ─── Tooltip ────────────────────────────────────────────────
-class Tooltip {
-  constructor(parent) {
-    this.parent = parent;
-    this.el = document.createElement('div');
-    Object.assign(this.el.style, {
-      position: 'absolute',
-      pointerEvents: 'none',
-      padding: '6px 10px',
-      borderRadius: '4px',
-      fontSize: '11px',
-      fontFamily: 'inherit',
-      lineHeight: '1.5',
-      whiteSpace: 'nowrap',
-      opacity: '0',
-      transform: 'translate(-50%, calc(-100% - 8px))',
-      transition: 'opacity 0.1s',
-      zIndex: '20',
-      boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
-    });
-    parent.appendChild(this.el);
-  }
-  show(x, y, content, theme) {
-    this.el.style.background = theme.tooltipBg;
-    this.el.style.color = theme.tooltipFg;
-    if (typeof content === 'string') {
-      this.el.textContent = content;
-    } else {
-      this.el.innerHTML = '';
-      if (content.title) {
-        const t = document.createElement('div');
-        t.style.cssText = 'opacity:0.7;font-size:10px;margin-bottom:4px';
-        t.textContent = content.title;
-        this.el.appendChild(t);
-      }
-      for (const r of content.rows) {
-        const row = document.createElement('div');
-        row.style.cssText = 'display:flex;align-items:center;gap:6px;line-height:1.4';
-        if (r.color) {
-          const sw = document.createElement('span');
-          sw.style.cssText = `width:8px;height:8px;border-radius:2px;background:${r.color};display:inline-block`;
-          row.appendChild(sw);
-        }
-        const nm = document.createElement('span');
-        nm.style.cssText = 'opacity:0.8;flex:1';
-        nm.textContent = r.name || '';
-        row.appendChild(nm);
-        const val = document.createElement('span');
-        val.style.cssText = 'font-weight:700;margin-left:12px';
-        val.textContent = r.value == null ? '—' : String(r.value);
-        row.appendChild(val);
-        this.el.appendChild(row);
-      }
-    }
-    this.el.style.left = x + 'px';
-    this.el.style.top = y + 'px';
-    this.el.style.opacity = '1';
-  }
-  hide() { this.el.style.opacity = '0'; }
-  destroy() { this.el.remove(); }
-}
-
-// ─── State overlays (loading / empty / error) ───────────────
-class Overlay {
-  constructor(parent) {
-    this.parent = parent;
-    this.el = document.createElement('div');
-    Object.assign(this.el.style, {
-      position: 'absolute',
-      inset: '0',
-      display: 'none',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexDirection: 'column',
-      gap: '8px',
-      fontSize: '12px',
-      fontFamily: 'inherit',
-      pointerEvents: 'none',
-      zIndex: '15',
-    });
-    parent.appendChild(this.el);
-  }
-  show(kind, msg, theme) {
-    const el = this.el;
-    el.style.display = 'flex';
-    el.style.background = M.colorAlpha(theme.bg, 0.85);
-    el.style.color = theme.text;
-    el.innerHTML = '';
-    const icon = document.createElement('div');
-    icon.style.fontSize = '20px';
-    icon.style.opacity = '0.6';
-    if (kind === 'loading') {
-      icon.innerHTML = `<svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="${theme.accent}" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="14 50"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></circle></svg>`;
-    } else if (kind === 'empty') {
-      icon.textContent = '◌';
-    } else if (kind === 'error') {
-      icon.textContent = '!';
-      icon.style.color = '#ef4444';
-    }
-    el.appendChild(icon);
-    if (msg) {
-      const t = document.createElement('div');
-      t.style.opacity = '0.85';
-      t.textContent = msg;
-      el.appendChild(t);
-    }
-  }
-  hide() { this.el.style.display = 'none'; }
-  destroy() { this.el.remove(); }
-}
-
-// ─── Hit index ──────────────────────────────────────────────
-// Canvas-pixel rectangles with arbitrary metadata. Used for hover/click.
-class HitIndex {
-  constructor() { this.regions = []; }
-  clear() { this.regions.length = 0; }
-  add(r) { this.regions.push(r); }
-  // Find the topmost (last-added) region containing (x, y).
-  find(x, y) {
-    for (let i = this.regions.length - 1; i >= 0; i--) {
-      const r = this.regions[i];
-      if (x >= r.x && x <= r.x + r.w && y >= r.y && y <= r.y + r.h) return r;
-    }
-    return null;
-  }
-}
-
-// ─── Chart base ─────────────────────────────────────────────
-export class Chart {
-  constructor(container, options = {}) {
-    if (!container) throw new Error('Chart: container is required');
-    this.container = typeof container === 'string'
-      ? document.querySelector(container)
-      : container;
-    this.options = options;
-
-    // Mark container for external CSS targeting.
-    this.container.classList.add('aeriz');
-    if (getComputedStyle(this.container).position === 'static') {
-      this.container.style.position = 'relative';
-    }
-    if (!this.container.style.height && this.container.offsetHeight === 0) {
-      this.container.style.height = '320px';
-    }
-
-    // Canvas fills the *content area* (inside container's padding/border).
-    // We size the canvas from clientWidth/clientHeight (CSS content box).
-    this.canvas = document.createElement('canvas');
-    this.canvas.style.cssText = 'display:block;width:100%;height:100%;touch-action:none';
-    this.container.appendChild(this.canvas);
-
-    this.engine = new Engine(this.canvas);
-    this.tooltip = new Tooltip(this.container);
-    this.overlay = new Overlay(this.container);
-    this.hits = new HitIndex();
-
-    this.theme = resolveTheme(this.container);
-    this.palette = options.palette || readPalette(this.container);
-    this._cursor = null;
-    this._hover = null;
-    this._dirty = true;
-    this._destroyed = false;
-    this._mounted = false;
-    this._anim = { progress: 0, start: 0, duration: 600 };
-    this._state = null;       // 'loading' | 'empty' | 'error' | null
-
-    this._setupEvents();
-    this._observeResize();
-    this._resize();
-
-    schedule(this);
-  }
-
-  // ─── Public API ──────────────────────────────────────────
-  // Manually re-resolve theme + palette and trigger a redraw. Use this
-  // after changing CSS variables on :root or the container.
-  invalidate() {
-    this.theme = resolveTheme(this.container);
-    this.palette = this.options.palette || readPalette(this.container);
-    this.engine._gradCache.clear();
-    this._dirty = true;
-    schedule(this);
-  }
-
-  setData(data) {
-    this.options.data = data;
-    // Clear auto-set empty state so the new data actually renders.
-    if (this._state === 'empty') this._state = null;
-    this._anim.start = performance.now();
-    this._anim.progress = 0;
-    this._dirty = true;
-    schedule(this);
-    return this;
-  }
-
-  setLoading(msg) { this._state = 'loading'; this._stateMsg = msg || ''; this._dirty = true; schedule(this); return this; }
-  setEmpty(msg) { this._state = 'empty'; this._stateMsg = msg || 'No data'; this._dirty = true; schedule(this); return this; }
-  setError(msg) { this._state = 'error'; this._stateMsg = msg || 'Error'; this._dirty = true; schedule(this); return this; }
-  clearState() { this._state = null; this._dirty = true; schedule(this); return this; }
-
-  destroy() {
-    this._destroyed = true;
-    charts.delete(this);
-    this._ro && this._ro.disconnect();
-    this._removeEvents();
-    this.tooltip.destroy();
-    this.overlay.destroy();
-    this.canvas.remove();
-    this.container.classList.remove('aeriz');
-  }
-
-  // ─── Internals ───────────────────────────────────────────
-  _resize() {
-    // Use container.clientWidth/Height — these are the *content area*
-    // (excludes padding/border), which is exactly where the canvas
-    // (a child filling 100%) sits. This guarantees mouse events at
-    // canvas-relative coordinates correspond to draw coordinates.
-    const w = this.container.clientWidth;
-    const h = this.container.clientHeight;
-    if (w === this.engine.w && h === this.engine.h) return;
-    this.engine.resize(Math.max(50, w), Math.max(50, h));
-    this.theme = resolveTheme(this.container);
-    this._dirty = true;
-  }
-
-  _observeResize() {
-    if (typeof ResizeObserver === 'undefined') return;
-    this._ro = new ResizeObserver(() => {
-      this._resize();
-      schedule(this);
-    });
-    this._ro.observe(this.container);
-  }
-
-  _setupEvents() {
-    const c = this.canvas;
-    this._handlers = {
-      move: (e) => this._onMove(e),
-      leave: () => this._onLeave(),
-      click: (e) => this._onClick(e),
-    };
-    c.addEventListener('mousemove', this._handlers.move);
-    c.addEventListener('mouseleave', this._handlers.leave);
-    c.addEventListener('click', this._handlers.click);
-  }
-  _removeEvents() {
-    const c = this.canvas;
-    c.removeEventListener('mousemove', this._handlers.move);
-    c.removeEventListener('mouseleave', this._handlers.leave);
-    c.removeEventListener('click', this._handlers.click);
-  }
-
-  // Convert a mouse event to canvas-CSS-pixel coordinates.
-  _ptr(e) {
-    const r = this.canvas.getBoundingClientRect();
-    return { x: e.clientX - r.left, y: e.clientY - r.top };
-  }
-
-  _onMove(e) {
-    const p = this._ptr(e);
-    this._cursor = p;
-    const hit = this.hits.find(p.x, p.y);
-    const changed = (hit?._id ?? null) !== (this._hover?._id ?? null);
-    this._hover = hit;
-    if (changed) {
-      if (hit && hit.tooltip) {
-        this.tooltip.show(
-          hit.tipX != null ? hit.tipX : hit.x + hit.w / 2,
-          hit.tipY != null ? hit.tipY : hit.y,
-          hit.tooltip,
-          this.theme,
-        );
-      } else if (!hit && !this._sharedTooltip) {
-        this.tooltip.hide();
-      }
-      this._dirty = true;
-      schedule(this);
-    }
-    // Subclass hook for shared/follow tooltips
-    if (typeof this._onMoveX === 'function') this._onMoveX(p);
-  }
-
-  _onLeave() {
-    this._cursor = null;
-    this._hover = null;
-    this.tooltip.hide();
-    this._dirty = true;
-    schedule(this);
-  }
-
-  _onClick(e) {
-    const p = this._ptr(e);
-    const hit = this.hits.find(p.x, p.y);
-    if (this.options.onClick) this.options.onClick(hit, p, this);
-  }
-
-  // Per-frame: advance animation, draw if dirty, return whether more frames
-  // are needed.
-  _tick(now) {
-    if (this._destroyed) return false;
-    let active = false;
-    if (this._anim.progress < 1) {
-      if (!this._anim.start) this._anim.start = now;
-      this._anim.progress = Math.min(1, (now - this._anim.start) / this._anim.duration);
-      this._dirty = true;
-      if (this._anim.progress < 1) active = true;
-    }
-    if (this._dirty) {
-      this._draw();
-      this._dirty = false;
-    }
-    return active;
-  }
-
-  _draw() {
-    const e = this.engine;
-    e.clear();
-
-    // Background fill if surface is set.
-    if (this.theme.surface && this.theme.surface !== 'transparent') {
-      e.rect(0, 0, e.w, e.h, { fill: this.theme.surface });
-    }
-
-    // State overlay paths
-    if (this._state) {
-      this.overlay.show(this._state, this._stateMsg, this.theme);
-      this.hits.clear();
-      return;
-    } else {
-      this.overlay.hide();
-    }
-
-    // Subclass renders here.
-    this.hits.clear();
-    if (typeof this._render === 'function') this._render();
-  }
-
-  // ─── Helpers shared by subclasses ────────────────────────
-
-  // Compute padding for axes. Subclasses may override / extend.
-  _axisPad(opts = {}) {
-    const t = this.theme;
-    return {
-      l: opts.l != null ? opts.l : 50,
-      r: opts.r != null ? opts.r : 16,
-      t: opts.t != null ? opts.t : 16,
-      b: opts.b != null ? opts.b : 32,
-    };
-  }
-
-  // Draw cartesian axes + grid. Returns the inner plot rect.
-  _drawCartesian(spec) {
-    const e = this.engine;
-    const t = this.theme;
-    const pad = this._axisPad(spec.pad);
-    const px = pad.l, py = pad.t;
-    const pw = e.w - pad.l - pad.r;
-    const ph = e.h - pad.t - pad.b;
-
-    const yMin = spec.yMin != null ? spec.yMin : 0;
-    const yMax = spec.yMax;
-    const yScale = spec.yScale || 'linear';
-    const font = `${t.fontSize}px ${t.font}`;
-
-    // Y ticks
-    let yTicks, yToPx;
-    if (yScale === 'log') {
-      const lo = Math.max(1e-10, spec.yMin || 1);
-      const hi = yMax;
-      const lLo = Math.log10(lo), lHi = Math.log10(hi);
-      yToPx = v => py + ph * (1 - (Math.log10(Math.max(lo, v)) - lLo) / (lHi - lLo));
-      yTicks = [];
-      for (let p = Math.floor(lLo); p <= Math.ceil(lHi); p++) {
-        const v = Math.pow(10, p);
-        if (v >= lo && v <= hi) yTicks.push(v);
-      }
-    } else {
-      yTicks = M.niceTicks(yMin, yMax, 5);
-      yToPx = v => py + ph * (1 - (v - yMin) / (yMax - yMin));
-    }
-
-    // Grid lines
-    e.ctx.strokeStyle = t.grid;
-    e.ctx.lineWidth = 1;
-    e.ctx.beginPath();
-    for (const v of yTicks) {
-      const y = Math.round(yToPx(v)) + 0.5;
-      e.ctx.moveTo(px, y);
-      e.ctx.lineTo(px + pw, y);
-    }
-    e.ctx.stroke();
-
-    // Y labels
-    const yFmt = spec.yTickFormat || (v => yScale === 'log' && v >= 1000 ? v.toExponential(0) : String(Math.round(v * 100) / 100));
-    for (const v of yTicks) {
-      e.text(yFmt(v), px - 6, yToPx(v), {
-        fill: t.muted, font, align: 'right', baseline: 'middle',
-      });
-    }
-
-    // X axis. Subclasses pass either `xLabels: string[]` (categorical) or
-    // `xTime: {min, max}` (time scale) or `xLinear: {min, max}`.
-    let xToPx, xTicks, xFmt;
-    if (spec.xTime) {
-      const { min, max } = spec.xTime;
-      xToPx = v => px + pw * (v - min) / (max - min || 1);
-      xTicks = M.timeNiceTicks(min, max, 6);
-      const step = xTicks.length > 1 ? xTicks[1] - xTicks[0] : (max - min);
-      xFmt = spec.xTickFormat || M.timeFormat(step);
-    } else if (spec.xLinear) {
-      const { min, max } = spec.xLinear;
-      xToPx = v => px + pw * (v - min) / (max - min || 1);
-      xTicks = M.niceTicks(min, max, 6);
-      xFmt = spec.xTickFormat || (v => String(v));
-    } else if (spec.xLabels) {
-      const n = spec.xLabels.length;
-      xToPx = i => px + (i + 0.5) * (pw / n);
-      xTicks = spec.xLabels.map((_, i) => i);
-      xFmt = spec.xTickFormat || (i => String(spec.xLabels[i]));
-    }
-    if (xToPx) {
-      // X label collision avoidance.
-      let lastEnd = -Infinity;
-      for (const v of xTicks) {
-        const x = xToPx(v);
-        const txt = xFmt(v);
-        const w = e.measure(txt, font);
-        if (x - w / 2 < lastEnd + 4) continue;
-        lastEnd = x + w / 2;
-        e.text(txt, x, py + ph + 6, {
-          fill: t.muted, font, align: 'center', baseline: 'top',
-        });
-      }
-    }
-
-    // Axis line
-    e.poly([{x: px, y: py + ph}, {x: px + pw, y: py + ph}], {
-      stroke: t.axis, lineWidth: 1,
-    });
-
-    return { px, py, pw, ph, yToPx, xToPx, yTicks, xTicks, yMin, yMax };
-  }
-
-  // Draw a legend at the top. Returns consumed height for PAD.t adjustment.
-  _drawLegend(items, pw) {
-    const e = this.engine;
-    const t = this.theme;
-    const font = `${t.fontSize}px ${t.font}`;
-    const swatch = 10, gap = 16, rowH = 18;
-    let x = 0, y = 0, maxW = pw;
-    for (const it of items) {
-      const tw = e.measure(it.label, font);
-      const w = swatch + 6 + tw;
-      if (x + w > maxW && x > 0) { x = 0; y += rowH; }
-      e.rect(x, y + 4, swatch, swatch, { fill: it.hidden ? t.muted : it.color, radius: 2 });
-      e.text(it.label, x + swatch + 4, y + swatch / 2 + 4, {
-        fill: it.hidden ? t.muted : t.text, font, align: 'left', baseline: 'middle',
-      });
-      // Hit region for legend toggle
-      this.hits.add({
-        _id: 'legend-' + it.idx, x, y, w: swatch + 4 + tw, h: rowH,
-        legendIdx: it.idx,
-      });
-      x += w + gap;
-    }
-    return y + rowH + 6;
-  }
-
-  // Get color for series index, respecting per-series overrides.
-  _colorOf(idx, item) {
-    if (item && item.color) return item.color;
-    return this.palette[idx % this.palette.length];
-  }
-}