@aeriz/chart 1.0.0 → 1.1.0

package/src/composite.js

@@ -1,187 +0,0 @@
-// 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

@@ -1,287 +0,0 @@
-// 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;
-  }
-}

package/src/index.js

@@ -1,18 +0,0 @@
-// index.js — public API.
-
-export { Chart, getFPS, getActiveCount, scheduler } from './base.js';
-export { Engine } from './engine.js';
-export * as math from './math.js';
-export { PALETTE } from './math.js';
-
-export {
-  BarChart, HBarChart, LineChart, AreaChart,
-  StackedBarChart, GroupedBarChart, MultiLineChart,
-  ScatterChart, BubbleChart,
-  PieChart, RadarChart, PolarChart,
-  GaugeChart, HeatmapChart, BoxplotChart,
-  FunnelChart, TreemapChart, Sparkline,
-  RealtimeChart, WaterfallChart,
-} from './charts.js';
-
-export { CompositeChart } from './composite.js';

package/src/math.js

@@ -1,178 +0,0 @@
-// math.js — Pure math: scales, ticks, color ops, smoothing, decimation
-// No DOM, no canvas, no side effects.
-
-export const TAU = Math.PI * 2;
-
-export const clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
-export const lerp = (a, b, t) => a + (b - a) * t;
-
-export function extent(arr, fn = (x) => x) {
-  let mn = Infinity, mx = -Infinity;
-  for (let i = 0; i < arr.length; i++) {
-    const v = fn(arr[i], i);
-    if (v < mn) mn = v;
-    if (v > mx) mx = v;
-  }
-  return [mn === Infinity ? 0 : mn, mx === -Infinity ? 1 : mx];
-}
-
-// "Nice" tick generator for linear axes. Returns ticks at human-readable
-// values (1, 2, 5 × 10^k) covering the input domain.
-export function niceTicks(min, max, count = 5) {
-  if (min === max) { min -= 0.5; max += 0.5; }
-  const span = max - min;
-  const step0 = span / Math.max(1, count);
-  const mag = Math.pow(10, Math.floor(Math.log10(step0)));
-  const norm = step0 / mag;
-  let step;
-  if (norm < 1.5) step = mag;
-  else if (norm < 3) step = 2 * mag;
-  else if (norm < 7) step = 5 * mag;
-  else step = 10 * mag;
-  const lo = Math.ceil(min / step) * step;
-  const hi = Math.floor(max / step) * step;
-  const ticks = [];
-  for (let v = lo; v <= hi + step / 2; v += step) {
-    ticks.push(Math.round(v / step) * step);
-  }
-  return ticks;
-}
-
-export function niceDomain(min, max, count = 5) {
-  if (min === max) { min -= 0.5; max += 0.5; }
-  const span = max - min;
-  const step0 = span / Math.max(1, count);
-  const mag = Math.pow(10, Math.floor(Math.log10(step0)));
-  const norm = step0 / mag;
-  let step;
-  if (norm < 1.5) step = mag;
-  else if (norm < 3) step = 2 * mag;
-  else if (norm < 7) step = 5 * mag;
-  else step = 10 * mag;
-  return [Math.floor(min / step) * step, Math.ceil(max / step) * step];
-}
-
-// Time axis: pick a nice unit (second, minute, hour, day, week, month) and
-// generate ticks aligned to it. Returns timestamps in ms.
-const T = { sec: 1e3, min: 6e4, hour: 36e5, day: 864e5, week: 6.048e8, month: 2.628e9 };
-export function timeNiceTicks(minMs, maxMs, count = 6) {
-  if (minMs === maxMs) { minMs -= 1000; maxMs += 1000; }
-  const span = maxMs - minMs;
-  const target = span / count;
-  const units = [
-    [T.sec, 1], [T.sec, 5], [T.sec, 15], [T.sec, 30],
-    [T.min, 1], [T.min, 5], [T.min, 15], [T.min, 30],
-    [T.hour, 1], [T.hour, 3], [T.hour, 6], [T.hour, 12],
-    [T.day, 1], [T.day, 2], [T.week, 1],
-    [T.month, 1], [T.month, 3], [T.month, 6], [T.month, 12],
-  ];
-  let step = T.sec;
-  for (const [u, n] of units) if (u * n <= target * 1.5) step = u * n;
-  const lo = Math.ceil(minMs / step) * step;
-  const ticks = [];
-  for (let v = lo; v <= maxMs; v += step) ticks.push(v);
-  return ticks;
-}
-
-export function timeFormat(step) {
-  if (step < T.min) return (t) => new Date(t).toISOString().slice(11, 19);
-  if (step < T.hour) return (t) => new Date(t).toISOString().slice(11, 16);
-  if (step < T.day) return (t) => new Date(t).toISOString().slice(11, 16);
-  if (step < T.month) return (t) => new Date(t).toISOString().slice(5, 10);
-  return (t) => new Date(t).toISOString().slice(0, 7);
-}
-
-// Min-max decimation: when N points exceed pixel count, compress to ~2 per
-// pixel column preserving local min and max. Used for line charts with
-// huge datasets.
-export function minMaxDecimate(data, targetCount, fn = (d) => d.value) {
-  if (data.length <= targetCount) return data;
-  const bucket = data.length / targetCount;
-  const out = [];
-  for (let i = 0; i < targetCount; i++) {
-    const lo = Math.floor(i * bucket);
-    const hi = Math.min(data.length, Math.floor((i + 1) * bucket));
-    let mnI = lo, mxI = lo;
-    let mn = fn(data[lo], lo), mx = mn;
-    for (let j = lo + 1; j < hi; j++) {
-      const v = fn(data[j], j);
-      if (v < mn) { mn = v; mnI = j; }
-      if (v > mx) { mx = v; mxI = j; }
-    }
-    if (mnI < mxI) { out.push(data[mnI]); out.push(data[mxI]); }
-    else { out.push(data[mxI]); out.push(data[mnI]); }
-  }
-  return out;
-}
-
-export function shouldDecimate(n, pxWidth) {
-  return n > pxWidth * 2;
-}
-
-// Smooth path control points (centripetal Catmull-Rom-ish). Returns array
-// of {c1x,c1y,c2x,c2y} to use with bezierCurveTo.
-export function bezierControlPoints(pts, tension = 1 / 6) {
-  const n = pts.length;
-  if (n < 2) return [];
-  const cps = [];
-  for (let i = 0; i < n - 1; i++) {
-    const p0 = pts[i - 1] || pts[i];
-    const p1 = pts[i];
-    const p2 = pts[i + 1];
-    const p3 = pts[i + 2] || p2;
-    cps.push({
-      c1x: p1.x + (p2.x - p0.x) * tension,
-      c1y: p1.y + (p2.y - p0.y) * tension,
-      c2x: p2.x - (p3.x - p1.x) * tension,
-      c2y: p2.y - (p3.y - p1.y) * tension,
-    });
-  }
-  return cps;
-}
-
-// Spring physics step. Used for animated transitions.
-export function springStep(v, tgt, vel, cfg = {}) {
-  const stiffness = cfg.stiffness || 170;
-  const damping = cfg.damping || 26;
-  const dt = 1 / 60;
-  const F = -stiffness * (v - tgt);
-  const D = -damping * vel;
-  const a = F + D;
-  vel = vel + a * dt;
-  v = v + vel * dt;
-  const done = Math.abs(vel) < 0.05 && Math.abs(v - tgt) < 0.05;
-  if (done) { v = tgt; vel = 0; }
-  return { value: v, velocity: vel, done };
-}
-
-// Color helpers: hex/rgb/rgba parsing, alpha mixing, lightening.
-export function colorParse(c) {
-  if (!c) return [0, 0, 0, 1];
-  if (c[0] === '#') {
-    const h = c.slice(1);
-    if (h.length === 3) return [parseInt(h[0]+h[0],16), parseInt(h[1]+h[1],16), parseInt(h[2]+h[2],16), 1];
-    if (h.length === 6) return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16), 1];
-    if (h.length === 8) return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16), parseInt(h.slice(6,8),16)/255];
-  }
-  const m = c.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,\s/]+([\d.]+))?\s*\)/);
-  if (m) return [+m[1], +m[2], +m[3], m[4] !== undefined ? +m[4] : 1];
-  return [0, 0, 0, 1];
-}
-
-export function colorAlpha(c, a) {
-  const [r, g, b] = colorParse(c);
-  return `rgba(${r|0},${g|0},${b|0},${a})`;
-}
-
-export function colorMix(a, b, t) {
-  const [r1, g1, b1, a1] = colorParse(a);
-  const [r2, g2, b2, a2] = colorParse(b);
-  return `rgba(${(r1+(r2-r1)*t)|0},${(g1+(g2-g1)*t)|0},${(b1+(b2-b1)*t)|0},${a1+(a2-a1)*t})`;
-}
-
-// Default qualitative palette (8 colors, distinct hues, balanced lightness).
-// Lead color: #64c8ff (rgba(100,200,255,0.85) brand accent).
-export const PALETTE = [
-  '#64c8ff', '#10b981', '#f59e0b', '#ef4444',
-  '#8b5cf6', '#ec4899', '#84cc16', '#6366f1',
-];