@aeriz/chart 1.0.0

package/src/composite.js

@@ -0,0 +1,187 @@
+// composite.js — Composite (mixed) chart. Stack any combination of bars,
+// lines, areas, scatter on a shared cartesian axis with optional dual y axes.
+//
+// Layer config: { type: 'bar'|'line'|'area'|'scatter', name, values, axis: 'left'|'right', color?, ... }
+
+import { Chart } from './base.js';
+import * as M from './math.js';
+
+export class CompositeChart extends Chart {
+  _render() {
+    const layers = this.options.layers || [];
+    const cats = this.options.categories || [];
+    if (!layers.length || !cats.length) { this.setEmpty('No data'); return; }
+    const e = this.engine;
+    const t = this.theme;
+
+    // Compute domain per axis.
+    const leftLayers = layers.filter(l => l.axis !== 'right');
+    const rightLayers = layers.filter(l => l.axis === 'right');
+    const domain = (ll) => {
+      let mn = Infinity, mx = -Infinity;
+      for (const l of ll) {
+        if (l.type === 'scatter') {
+          for (const p of l.values) {
+            if (p.y < mn) mn = p.y; if (p.y > mx) mx = p.y;
+          }
+        } else {
+          for (const v of l.values) {
+            if (+v < mn) mn = +v; if (+v > mx) mx = +v;
+          }
+        }
+      }
+      if (mn === Infinity) return [0, 1];
+      return M.niceDomain(Math.min(0, mn), mx, 5);
+    };
+    const [yLLo, yLHi] = domain(leftLayers);
+    const [yRLo, yRHi] = rightLayers.length ? domain(rightLayers) : [0, 1];
+
+    // Padding accommodates right axis when present.
+    const pad = { l: 50, r: rightLayers.length ? 50 : 16, t: 30, b: 32 };
+    const px = pad.l, py = pad.t;
+    const pw = e.w - pad.l - pad.r;
+    const ph = e.h - pad.t - pad.b;
+    const font = `${t.fontSize}px ${t.font}`;
+
+    // Y axes
+    const yLPx = v => py + ph * (1 - (v - yLLo) / (yLHi - yLLo));
+    const yRPx = v => py + ph * (1 - (v - yRLo) / (yRHi - yRLo));
+    const yLTicks = M.niceTicks(yLLo, yLHi, 5);
+    const yRTicks = rightLayers.length ? M.niceTicks(yRLo, yRHi, 5) : [];
+
+    // Grid
+    e.ctx.strokeStyle = t.grid;
+    e.ctx.lineWidth = 1;
+    e.ctx.beginPath();
+    for (const v of yLTicks) {
+      const y = Math.round(yLPx(v)) + 0.5;
+      e.ctx.moveTo(px, y); e.ctx.lineTo(px + pw, y);
+    }
+    e.ctx.stroke();
+
+    // Y labels
+    const yLFmt = this.options.yLeftTickFormat || (v => String(v));
+    const yRFmt = this.options.yRightTickFormat || (v => String(v));
+    for (const v of yLTicks) {
+      e.text(yLFmt(v), px - 6, yLPx(v), {
+        fill: t.muted, font, align: 'right', baseline: 'middle',
+      });
+    }
+    for (const v of yRTicks) {
+      e.text(yRFmt(v), px + pw + 6, yRPx(v), {
+        fill: t.muted, font, align: 'left', baseline: 'middle',
+      });
+    }
+
+    // X axis (categorical or time)
+    const useTime = this.options.xScale === 'time';
+    const xToPx = useTime
+      ? (i) => px + ((+cats[i] - +cats[0]) / (+cats[cats.length - 1] - +cats[0] || 1)) * pw
+      : (i) => px + ((i + 0.5) / cats.length) * pw;
+
+    // X labels (collision-aware)
+    let lastEnd = -Infinity;
+    for (let i = 0; i < cats.length; i++) {
+      const x = xToPx(i);
+      const txt = useTime
+        ? new Date(+cats[i]).toISOString().slice(0, 10)
+        : String(cats[i]);
+      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',
+      });
+    }
+    e.poly([{x: px, y: py + ph}, {x: px + pw, y: py + ph}], { stroke: t.axis, lineWidth: 1 });
+
+    const prog = this._anim.progress;
+    const lineW = t.lineWidth;
+
+    // Render layers in order (back-to-front).
+    // Bars first (so lines/scatter can sit on top), grouped in clusters.
+    const barLayers = layers.filter(l => l.type === 'bar');
+    const slot = pw / cats.length;
+    const innerSlot = slot * 0.7;
+    const barW = barLayers.length ? Math.max(2, innerSlot / barLayers.length) : 0;
+
+    barLayers.forEach((layer, bi) => {
+      const yPx = layer.axis === 'right' ? yRPx : yLPx;
+      const yBase = yPx(0);
+      const color = layer.color || this._colorOf(layers.indexOf(layer), layer);
+      const items = [];
+      for (let i = 0; i < cats.length; i++) {
+        const v = +layer.values[i] || 0;
+        const xC = xToPx(i);
+        const x = xC - innerSlot / 2 + bi * barW;
+        const y0 = yBase;
+        const y1 = yPx(v);
+        const top = Math.min(y0, y1);
+        const h = Math.abs(y1 - y0) * prog;
+        const animTop = v >= 0 ? y0 - h : y0;
+        items.push({ x, y: animTop, w: barW - 1, h, radius: t.barRadius });
+        this.hits.add({
+          _id: `${layer.name || bi}-${i}`,
+          x, y: animTop, w: barW - 1, h,
+          tipX: x + barW / 2, tipY: animTop,
+          tooltip: `${layer.name || ''} · ${cats[i]}: ${v}`,
+        });
+      }
+      e.rects(items, color);
+    });
+
+    // Areas
+    e.clip(px, py, pw * prog, ph);
+    layers.filter(l => l.type === 'area').forEach((layer) => {
+      const yPx = layer.axis === 'right' ? yRPx : yLPx;
+      const color = layer.color || this._colorOf(layers.indexOf(layer), layer);
+      const pts = layer.values.map((v, i) => ({ x: xToPx(i), y: yPx(+v) }));
+      const cps = M.bezierControlPoints(pts);
+      const grad = e.vGradient(`area-${layer.name}-${color}`, px, py, py + ph, [
+        [0, M.colorAlpha(color, 0.4)],
+        [1, M.colorAlpha(color, 0)],
+      ]);
+      e.smoothArea(pts, cps, py + ph, grad);
+      e.smooth(pts, cps, { stroke: color, lineWidth: lineW });
+    });
+
+    // Lines
+    layers.filter(l => l.type === 'line').forEach((layer) => {
+      const yPx = layer.axis === 'right' ? yRPx : yLPx;
+      const color = layer.color || this._colorOf(layers.indexOf(layer), layer);
+      const pts = layer.values.map((v, i) => ({ x: xToPx(i), y: yPx(+v), i, v }));
+      const cps = M.bezierControlPoints(pts);
+      e.smooth(pts, cps, { stroke: color, lineWidth: lineW });
+      if (pts.length <= 50) e.circles(pts, color, t.pointRadius);
+      // Hits per point
+      for (const p of pts) {
+        this.hits.add({
+          _id: `${layer.name || 'line'}-${p.i}`,
+          x: p.x - 6, y: p.y - 6, w: 12, h: 12,
+          tipX: p.x, tipY: p.y - t.pointRadius,
+          tooltip: `${layer.name || ''} · ${cats[p.i]}: ${p.v}`,
+        });
+      }
+    });
+    e.unclip();
+
+    // Scatter
+    layers.filter(l => l.type === 'scatter').forEach((layer) => {
+      const yPx = layer.axis === 'right' ? yRPx : yLPx;
+      const color = layer.color || this._colorOf(layers.indexOf(layer), layer);
+      const items = layer.values.map((p) => ({
+        x: xToPx(typeof p.x === 'number' ? p.x : cats.indexOf(p.x)),
+        y: yPx(p.y),
+      }));
+      e.withAlpha(0.7, () => e.circles(items, color, layer.radius || t.pointRadius + 1));
+    });
+
+    // Legend
+    this._drawLegend(layers.map((l, i) => ({
+      label: (l.name || l.type) + (l.axis === 'right' ? ' (R)' : ''),
+      color: l.color || this._colorOf(i, l),
+      idx: i,
+      hidden: false,
+    })), pw);
+  }
+}

package/src/engine.js

@@ -0,0 +1,287 @@
+// engine.js — Canvas 2D rendering primitives.
+// All public coordinates are CSS pixels. DPR is handled internally.
+
+import { TAU } from './math.js';
+
+export class Engine {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.w = 0;
+    this.h = 0;
+    this.dpr = 1;
+    this._gradCache = new Map();
+    this._gradCacheMax = 32;
+    this._snap = true;
+  }
+
+  // Resize the backing store to (w × h) CSS pixels at the current DPR.
+  // The internal coordinate system is reset so all subsequent draw calls
+  // use CSS pixels.
+  resize(w, h) {
+    const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
+    this.canvas.width = Math.round(w * dpr);
+    this.canvas.height = Math.round(h * dpr);
+    this.canvas.style.width = w + 'px';
+    this.canvas.style.height = h + 'px';
+    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    this.w = w;
+    this.h = h;
+    this.dpr = dpr;
+    this._gradCache.clear();
+  }
+
+  clear(color) {
+    if (color) {
+      this.ctx.fillStyle = color;
+      this.ctx.fillRect(0, 0, this.w, this.h);
+    } else {
+      this.ctx.clearRect(0, 0, this.w, this.h);
+    }
+  }
+
+  // ─── Primitives ─────────────────────────────────────────
+  // All draw methods take CSS-pixel coordinates and apply pixel snapping
+  // for crisp 1px lines. Snap is intentionally simple: x.5 alignment for
+  // odd-width strokes, integer alignment for fills.
+
+  rect(x, y, w, h, opts = {}) {
+    // Guard against negative/zero dims that animations can momentarily produce.
+    if (!(w > 0) || !(h > 0)) return;
+    const ctx = this.ctx;
+    if (opts.radius && opts.radius > 0) {
+      const r = Math.max(0, Math.min(opts.radius, w / 2, h / 2));
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+    } else {
+      ctx.beginPath();
+      ctx.rect(x, y, w, h);
+    }
+    if (opts.fill) { ctx.fillStyle = opts.fill; ctx.fill(); }
+    if (opts.stroke) {
+      ctx.strokeStyle = opts.stroke;
+      ctx.lineWidth = opts.lineWidth || 1;
+      ctx.stroke();
+    }
+  }
+
+  // Batch many rectangles of the same color in a single fill.
+  rects(items, fill) {
+    const ctx = this.ctx;
+    ctx.fillStyle = fill;
+    ctx.beginPath();
+    for (const r of items) {
+      // Skip degenerate items that would crash arcTo / rect.
+      if (!(r.w > 0) || !(r.h > 0)) continue;
+      if (r.radius && r.radius > 0) {
+        const rad = Math.max(0, Math.min(r.radius, r.w / 2, r.h / 2));
+        ctx.moveTo(r.x + rad, r.y);
+        ctx.arcTo(r.x + r.w, r.y, r.x + r.w, r.y + r.h, rad);
+        ctx.arcTo(r.x + r.w, r.y + r.h, r.x, r.y + r.h, rad);
+        ctx.arcTo(r.x, r.y + r.h, r.x, r.y, rad);
+        ctx.arcTo(r.x, r.y, r.x + r.w, r.y, rad);
+        ctx.closePath();
+      } else {
+        ctx.rect(r.x, r.y, r.w, r.h);
+      }
+    }
+    ctx.fill();
+  }
+
+  circle(x, y, r, opts = {}) {
+    // arc() throws on negative radii; bail silently instead.
+    if (!(r > 0)) return;
+    const ctx = this.ctx;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, TAU);
+    if (opts.fill) { ctx.fillStyle = opts.fill; ctx.fill(); }
+    if (opts.stroke) {
+      ctx.strokeStyle = opts.stroke;
+      ctx.lineWidth = opts.lineWidth || 1;
+      ctx.stroke();
+    }
+  }
+
+  // Batch many circles of the same color and radius.
+  circles(items, fill, fixedRadius) {
+    const ctx = this.ctx;
+    ctx.fillStyle = fill;
+    ctx.beginPath();
+    for (const c of items) {
+      const r = fixedRadius != null ? fixedRadius : c.r;
+      if (!(r > 0)) continue;
+      ctx.moveTo(c.x + r, c.y);
+      ctx.arc(c.x, c.y, r, 0, TAU);
+    }
+    ctx.fill();
+  }
+
+  // Path of straight segments, optionally closed and filled.
+  poly(points, opts = {}) {
+    if (points.length < 2) return;
+    const ctx = this.ctx;
+    const snap = this._snap && opts.lineWidth === 1;
+    const adj = snap ? 0.5 : 0;
+    ctx.beginPath();
+    ctx.moveTo(points[0].x + adj, points[0].y + adj);
+    for (let i = 1; i < points.length; i++) {
+      ctx.lineTo(points[i].x + adj, points[i].y + adj);
+    }
+    if (opts.close) ctx.closePath();
+    if (opts.fill) { ctx.fillStyle = opts.fill; ctx.fill(); }
+    if (opts.stroke) {
+      ctx.strokeStyle = opts.stroke;
+      ctx.lineWidth = opts.lineWidth || 1.5;
+      ctx.lineCap = opts.cap || 'butt';
+      ctx.lineJoin = opts.join || 'miter';
+      if (opts.dash) ctx.setLineDash(opts.dash);
+      ctx.stroke();
+      if (opts.dash) ctx.setLineDash([]);
+    }
+  }
+
+  // Smooth path drawn through `points` using bezier control points `cps`.
+  smooth(points, cps, opts = {}) {
+    if (points.length < 2) return;
+    const ctx = this.ctx;
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 0; i < cps.length; i++) {
+      const c = cps[i];
+      const p = points[i + 1];
+      ctx.bezierCurveTo(c.c1x, c.c1y, c.c2x, c.c2y, p.x, p.y);
+    }
+    if (opts.fill) { ctx.fillStyle = opts.fill; ctx.fill(); }
+    if (opts.stroke) {
+      ctx.strokeStyle = opts.stroke;
+      ctx.lineWidth = opts.lineWidth || 2;
+      ctx.lineCap = opts.cap || 'round';
+      ctx.lineJoin = opts.join || 'round';
+      ctx.stroke();
+    }
+  }
+
+  // Smooth-filled area from `points` down to baseline `y0`.
+  smoothArea(points, cps, y0, fill) {
+    if (points.length < 2) return;
+    const ctx = this.ctx;
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, y0);
+    ctx.lineTo(points[0].x, points[0].y);
+    for (let i = 0; i < cps.length; i++) {
+      const c = cps[i];
+      const p = points[i + 1];
+      ctx.bezierCurveTo(c.c1x, c.c1y, c.c2x, c.c2y, p.x, p.y);
+    }
+    ctx.lineTo(points[points.length - 1].x, y0);
+    ctx.closePath();
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+
+  // Stepped path (3 modes).
+  step(points, mode, opts = {}) {
+    if (points.length < 2) return;
+    const ctx = this.ctx;
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      const a = points[i - 1], b = points[i];
+      if (mode === 'after') {
+        ctx.lineTo(b.x, a.y);
+        ctx.lineTo(b.x, b.y);
+      } else if (mode === 'middle') {
+        const mx = (a.x + b.x) / 2;
+        ctx.lineTo(mx, a.y);
+        ctx.lineTo(mx, b.y);
+        ctx.lineTo(b.x, b.y);
+      } else {
+        ctx.lineTo(a.x, b.y);
+        ctx.lineTo(b.x, b.y);
+      }
+    }
+    if (opts.stroke) {
+      ctx.strokeStyle = opts.stroke;
+      ctx.lineWidth = opts.lineWidth || 1.5;
+      ctx.stroke();
+    }
+  }
+
+  text(str, x, y, opts = {}) {
+    const ctx = this.ctx;
+    ctx.font = opts.font || '11px ui-monospace, monospace';
+    ctx.fillStyle = opts.fill || '#000';
+    ctx.textAlign = opts.align || 'left';
+    ctx.textBaseline = opts.baseline || 'alphabetic';
+    if (opts.rotate) {
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.rotate(opts.rotate);
+      ctx.fillText(str, 0, 0);
+      ctx.restore();
+    } else {
+      ctx.fillText(str, x, y);
+    }
+  }
+
+  measure(str, font) {
+    this.ctx.font = font || '11px ui-monospace, monospace';
+    return this.ctx.measureText(str).width;
+  }
+
+  // Arc segment for donut/polar charts.
+  arc(cx, cy, rIn, rOut, a0, a1, opts = {}) {
+    // Negative radii crash ctx.arc; clamp at 0 and bail when both collapse.
+    const ri = Math.max(0, rIn);
+    const ro = Math.max(0, rOut);
+    if (ro <= 0) return;
+    const ctx = this.ctx;
+    ctx.beginPath();
+    ctx.arc(cx, cy, ro, a0, a1);
+    ctx.arc(cx, cy, ri, a1, a0, true);
+    ctx.closePath();
+    if (opts.fill) { ctx.fillStyle = opts.fill; ctx.fill(); }
+    if (opts.stroke) {
+      ctx.strokeStyle = opts.stroke;
+      ctx.lineWidth = opts.lineWidth || 1;
+      ctx.stroke();
+    }
+  }
+
+  // ─── Gradient cache ─────────────────────────────────────
+  // Vertical gradient between two colors. Cached by key.
+  vGradient(key, x0, y0, y1, stops) {
+    if (this._gradCache.has(key)) return this._gradCache.get(key);
+    const g = this.ctx.createLinearGradient(x0, y0, x0, y1);
+    for (const [pos, color] of stops) g.addColorStop(pos, color);
+    if (this._gradCache.size >= this._gradCacheMax) {
+      const first = this._gradCache.keys().next().value;
+      this._gradCache.delete(first);
+    }
+    this._gradCache.set(key, g);
+    return g;
+  }
+
+  // ─── Clip region for plot area ──────────────────────────
+  clip(x, y, w, h) {
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x, y, w, h);
+    ctx.clip();
+  }
+  unclip() { this.ctx.restore(); }
+
+  withAlpha(a, fn) {
+    const ctx = this.ctx;
+    const prev = ctx.globalAlpha;
+    ctx.globalAlpha = prev * a;
+    fn();
+    ctx.globalAlpha = prev;
+  }
+}