@wick-charts/vue 0.5.1 → 0.6.0

package/dist/core/dist/series/heatmap.js

@@ -0,0 +1,387 @@
+import { DEFAULT_HEATMAP_UPDATE as Q, DEFAULT_HEATMAP_ENTRY as q } from "../animation/config.js";
+import { easeOutCubic as J } from "../animation/easing.js";
+import { resolveAxisFontSize as Z, resolveAxisTextColor as tt } from "../theme/resolve.js";
+import { sampleRamp as Y, deriveHeatmapRamp as st, mixColors as et, isLightColor as it } from "../utils/color.js";
+import { formatCompact as ot } from "../utils/format.js";
+import { clamp as v, smoothToward as z } from "../utils/math.js";
+import { fillRoundedRect as nt } from "./painters/canvas-path.js";
+const E = {
+  fontSize: 10
+};
+function ht(r, s) {
+  return Number.isFinite(r) ? Math.abs(r) >= 1e3 ? ot(r) : s <= 2 ? r.toFixed(2) : s <= 20 ? r.toFixed(1) : Math.round(r).toString() : "—";
+}
+const lt = {
+  gap: 2,
+  cornerRadius: 3,
+  axisLabels: !0,
+  cellLabels: !1,
+  entryMs: q,
+  updateMs: Q
+};
+function rt(r) {
+  return r === void 0 || r === !1 ? !1 : r === !0 ? E : { ...E, ...r };
+}
+function P(r, s) {
+  const t = {
+    ...r,
+    ...s,
+    cellLabels: s.cellLabels === void 0 ? r.cellLabels : rt(s.cellLabels)
+  };
+  return t.gap = Math.max(0, t.gap), t.cornerRadius = Math.max(0, t.cornerRadius), t.entryMs = Math.max(0, t.entryMs), t.updateMs = Math.max(0, t.updateMs), t;
+}
+function O(r) {
+  const { bitmapWidth: s, bitmapHeight: t, gutterLeft: e, gutterBottom: o, cols: h, rows: i } = r;
+  if (h <= 0 || i <= 0) return null;
+  const n = Math.min(Math.max(0, r.padTop), t), l = Math.min(Math.max(0, r.padBottom), t - n), a = Math.max(0, s - e), u = Math.max(0, t - n - l - o);
+  return a <= 0 || u <= 0 ? null : {
+    originX: e,
+    originY: n,
+    slotW: a / h,
+    slotH: u / i
+  };
+}
+function at(r, s) {
+  return `${r}\0${s}`;
+}
+class ct {
+  kind = "heatmap";
+  #c = [];
+  #t;
+  /** Column keys in display order (left → right). */
+  #e = [];
+  /** Row keys in display order (top → bottom). */
+  #i = [];
+  /** Cells with resolved grid coordinates. Last datum wins on (x, y) collisions. */
+  #s = [];
+  /** Grid-position → index into {@link #cells}, or -1 for an empty slot. */
+  #h = [];
+  /**
+   * Animated value per cell key. Targets live in {@link #cells}; these chase
+   * them when a same-shape `setData` lands, so live matrix updates morph
+   * colors instead of snapping.
+   */
+  #n = /* @__PURE__ */ new Map();
+  /** True while any displayed value is still chasing its target. */
+  #u = !1;
+  /** Hover lift per grid position (0..1), eased toward the hovered index. */
+  #l = [];
+  /** Grid position of the hovered cell (-1 = none). */
+  #a = -1;
+  /**
+   * Entrance-wave clock. `0` = armed but not started (first render stamps
+   * it); the wave replays on initial seed and grid-shape changes only.
+   */
+  #m = 0;
+  #r = !1;
+  #p = 0;
+  /**
+   * Cached left/bottom label gutters in bitmap pixels, keyed by the measured
+   * font. `hitTest` runs between renders and reuses the last measurement —
+   * same trade-off as pie's label reserve.
+   */
+  #o = null;
+  /** Subscribers notified on setData (no TimeSeriesStore to piggy-back on). */
+  #f = [];
+  /**
+   * Active theme snapshot — seeded from the create env and refreshed by
+   * {@link applyTheme}. Lets between-render queries (`getLayerColors` for
+   * legends) resolve the same ramp the canvas paints with.
+   */
+  #g;
+  /** Data extent cached by {@link #rebuildGrid} — see {@link #domain}. */
+  #b = { min: 0, max: 1 };
+  constructor(s, t) {
+    this.#t = P(lt, s ?? {}), this.#r = this.#t.entryMs === 0, this.#g = t ?? null;
+  }
+  // --- Data ingest -----------------------------------------------------------
+  setData(s) {
+    const t = this.#x(), e = this.#s.length > 0;
+    if (this.#c = s ?? [], this.#M(), e && this.#x() === t) {
+      for (const o of this.#s)
+        this.#n.has(o.key) || this.#n.set(o.key, o.value);
+      this.#u = this.#t.updateMs > 0;
+    } else
+      this.#n = new Map(this.#s.map((o) => [o.key, o.value])), this.#u = !1, this.#m = 0, this.#r = this.#t.entryMs === 0;
+    this.#o = null;
+    for (const o of this.#f)
+      o();
+  }
+  getData() {
+    return this.#c;
+  }
+  onDataChanged(s) {
+    return this.#f.push(s), () => {
+      const t = this.#f.indexOf(s);
+      t >= 0 && this.#f.splice(t, 1);
+    };
+  }
+  updateOptions(s) {
+    const t = this.#t.columns, e = this.#t.rows;
+    this.#t = P(this.#t, s ?? {}), (this.#t.columns !== t || this.#t.rows !== e) && this.#M(), this.#t.entryMs === 0 && (this.#r = !0), this.#t.updateMs === 0 && (this.#u = !1), this.#o = null;
+  }
+  // --- Layer model (single-layer no-ops, mirroring pie) ----------------------
+  getLayerCount() {
+    return 1;
+  }
+  setLayerVisible(s, t) {
+  }
+  isLayerVisible(s) {
+    return !0;
+  }
+  getLayerColors() {
+    if (this.#g) {
+      const s = this.#y(this.#g);
+      return [s[s.length - 1]];
+    }
+    return [this.#t.colors?.[this.#t.colors.length - 1] ?? "#888"];
+  }
+  applyTheme(s, t) {
+    this.#g = s, s.typography.fontFamily !== t.typography.fontFamily && (this.#o = null);
+  }
+  getTotalLength() {
+    return this.#c.length;
+  }
+  // --- Hover ------------------------------------------------------------------
+  hitTest(s, t, e, o, h) {
+    const i = O({
+      bitmapWidth: e,
+      bitmapHeight: o,
+      padTop: h?.top ?? 0,
+      padBottom: h?.bottom ?? 0,
+      gutterLeft: this.#o?.left ?? 0,
+      gutterBottom: this.#o?.bottom ?? 0,
+      cols: this.#e.length,
+      rows: this.#i.length
+    });
+    if (!i) return -1;
+    const n = Math.floor((s - i.originX) / i.slotW), l = Math.floor((t - i.originY) / i.slotH);
+    if (n < 0 || n >= this.#e.length || l < 0 || l >= this.#i.length) return -1;
+    const a = l * this.#e.length + n;
+    return this.#h[a] >= 0 ? a : -1;
+  }
+  setHoverIndex(s) {
+    return this.#a === s ? !1 : (this.#a = s, !0);
+  }
+  getHoverIndex() {
+    return this.#a;
+  }
+  getHoverInfo(s) {
+    const t = this.#v(this.#a);
+    if (!t) return null;
+    const { min: e, max: o } = this.#d(), h = o - e, i = h > 0 ? v((t.value - e) / h, 0, 1) : 0;
+    return {
+      label: `${t.y} · ${t.x}`,
+      value: t.value,
+      percent: i * 100,
+      color: t.color ?? Y(this.#y(s), i)
+    };
+  }
+  // --- Animation --------------------------------------------------------------
+  get needsAnimation() {
+    if (this.#s.length === 0) return !1;
+    if (!this.#r || this.#u) return !0;
+    if (this.#t.updateMs > 0)
+      for (let s = 0; s < this.#l.length; s++) {
+        const t = s === this.#a ? 1 : 0;
+        if (Math.abs(this.#l[s] - t) > 0.01) return !0;
+      }
+    return !1;
+  }
+  dispose() {
+    this.#f = [], this.#c = [], this.#s = [], this.#h = [], this.#e = [], this.#i = [], this.#n.clear(), this.#l = [], this.#p = 0;
+  }
+  /**
+   * @internal Test-only accessor for the animated per-cell values (keyed by
+   * `x\u0000y`). The backing map is ECMAScript-private, so the animation
+   * regression tests read convergence through this. Do not call from
+   * production code.
+   */
+  _inspectDisplayedValues() {
+    return this.#n;
+  }
+  // --- Grid resolution ---------------------------------------------------------
+  /** Identity of the grid shape — same key means cells map to the same slots. */
+  #x() {
+    return `${this.#e.join("\0")}
${this.#i.join("\0")}`;
+  }
+  /**
+   * Resolve column/row orders (explicit option order, else first appearance)
+   * and place every datum. On duplicate (x, y) coordinates the last datum
+   * wins — matching "latest sample replaces" streaming intuition.
+   */
+  #M() {
+    const s = this.#x(), t = this.#t.columns ? [...this.#t.columns] : [], e = this.#t.rows ? [...this.#t.rows] : [], o = new Map(t.map((i, n) => [i, n])), h = new Map(e.map((i, n) => [i, n]));
+    for (const i of this.#c)
+      !this.#t.columns && !o.has(i.x) && (o.set(i.x, t.length), t.push(i.x)), !this.#t.rows && !h.has(i.y) && (h.set(i.y, e.length), e.push(i.y));
+    this.#e = t, this.#i = e, this.#s = [], this.#h = new Array(t.length * e.length).fill(-1);
+    for (const i of this.#c) {
+      const n = o.get(i.x), l = h.get(i.y);
+      if (n === void 0 || l === void 0) continue;
+      const a = l * t.length + n, u = this.#h[a], c = {
+        x: i.x,
+        y: i.y,
+        value: i.value,
+        color: i.color,
+        col: n,
+        row: l,
+        key: at(i.x, i.y)
+      };
+      u >= 0 ? this.#s[u] = c : (this.#h[a] = this.#s.length, this.#s.push(c));
+    }
+    this.#x() !== s && (this.#l = new Array(this.#h.length).fill(0), this.#a = -1), this.#b = this.#w();
+  }
+  /**
+   * Scan the placed cells for the finite-value extent. Called once per
+   * {@link #rebuildGrid} — render / tooltip / tick paths read the cached
+   * {@link #dataExtent} instead of rescanning every frame.
+   */
+  #w() {
+    let s = 1 / 0, t = -1 / 0;
+    for (const e of this.#s)
+      Number.isFinite(e.value) && (e.value < s && (s = e.value), e.value > t && (t = e.value));
+    return s === 1 / 0 && (s = 0, t = 1), { min: s, max: t };
+  }
+  #v(s) {
+    if (s < 0 || s >= this.#h.length) return null;
+    const t = this.#h[s];
+    return t >= 0 ? this.#s[t] : null;
+  }
+  /** Value domain: explicit option bounds win, else the cached data extent. */
+  #d() {
+    const { min: s, max: t } = this.#b;
+    return {
+      min: this.#t.min ?? s,
+      max: this.#t.max ?? Math.max(t, this.#t.min ?? s)
+    };
+  }
+  /** Ramp stops: options override → theme token → accent-over-surface derivation. */
+  #y(s) {
+    return this.#t.colors && this.#t.colors.length > 0 ? this.#t.colors : s.heatmap && s.heatmap.colors.length > 0 ? s.heatmap.colors : st(s.background, s.line.color);
+  }
+  // --- Render -------------------------------------------------------------------
+  render(s) {
+    if (this.#s.length === 0) return;
+    const { scope: t, theme: e, padding: o } = s, { context: h, bitmapSize: i, horizontalPixelRatio: n, verticalPixelRatio: l } = t, a = performance.now(), u = this.#p ? Math.min(0.05, (a - this.#p) / 1e3) : 0;
+    this.#p = a, this.#m === 0 && (this.#m = a), this.#H(u), this.#L(u);
+    const { min: c, max: f } = this.#d(), M = f - c, X = this.#y(e), H = Z(e), L = `${H * n}px ${e.typography.fontFamily}`, T = this.#t.axisLabels ? this.#T({ context: h, font: L, fontSize: H, hpr: n, vpr: l }) : { left: 0, bottom: 0 }, m = O({
+      bitmapWidth: i.width,
+      bitmapHeight: i.height,
+      padTop: o.top * l,
+      padBottom: o.bottom * l,
+      gutterLeft: T.left,
+      gutterBottom: T.bottom,
+      cols: this.#e.length,
+      rows: this.#i.length
+    });
+    if (!m) {
+      this.#r = !0;
+      return;
+    }
+    const N = this.#t.gap * n, _ = this.#t.gap * l, I = this.#t.cornerRadius * n, A = h.globalAlpha, { entryMs: x } = this.#t, U = Math.max(1, this.#e.length + this.#i.length - 2);
+    let $ = !0;
+    const d = this.#t.cellLabels, V = d ? `${d.fontSize * n}px ${e.typography.fontFamily}` : "";
+    for (const p of this.#s) {
+      let y = 1;
+      if (x > 0 && !this.#r) {
+        const K = (p.col + p.row) / U * x, D = v((a - this.#m - K) / x, 0, 1);
+        if (D < 1 && ($ = !1), y = J(D), y <= 0) continue;
+      }
+      const w = this.#n.get(p.key) ?? p.value, j = Number.isFinite(w) && M > 0 ? v((w - c) / M, 0, 1) : 0;
+      let b = p.color ?? Y(X, j);
+      const G = p.row * this.#e.length + p.col, g = this.#l[G] ?? 0;
+      g > 0.01 && (b = et(b, e.tooltip.textColor, 0.1 * g), h.shadowColor = "rgba(0, 0, 0, 0.3)", h.shadowBlur = 12 * n * g, h.shadowOffsetY = 3 * l * g);
+      const S = Math.max(0, m.slotW - N), W = Math.max(0, m.slotH - _), F = (0.82 + 0.18 * y) * (1 + 0.04 * g), R = S * F, B = W * F, C = m.originX + p.col * m.slotW + m.slotW / 2, k = m.originY + p.row * m.slotH + m.slotH / 2;
+      h.globalAlpha = A * y, h.fillStyle = b, nt(h, {
+        x: C - R / 2,
+        y: k - B / 2,
+        width: R,
+        height: B,
+        radius: I,
+        corners: { tl: !0, tr: !0, br: !0, bl: !0 }
+      }), g > 0.01 && (h.shadowColor = "transparent", h.shadowBlur = 0, h.shadowOffsetY = 0), d && this.#A({
+        context: h,
+        cell: { fill: b, displayed: w, cx: C, cy: k, innerW: S, innerH: W, span: M },
+        labels: d,
+        font: V,
+        hpr: n
+      });
+    }
+    x > 0 && !this.#r && $ && (this.#r = !0), h.globalAlpha = A, this.#t.axisLabels && this.#$({ context: h, theme: e, geo: m, font: L, hpr: n, vpr: l });
+  }
+  /** Chase displayed values toward their targets; clears the settling flag on convergence. */
+  #H(s) {
+    if (!this.#u) return;
+    const { min: t, max: e } = this.#d(), o = Math.max(1e-9, (e - t) * 1e-3), h = 3e3 / this.#t.updateMs;
+    let i = !0;
+    for (const n of this.#s) {
+      const l = this.#n.get(n.key) ?? n.value, a = z(l, n.value, h, s);
+      Math.abs(a - n.value) > o ? (i = !1, this.#n.set(n.key, a)) : this.#n.set(n.key, n.value);
+    }
+    i && (this.#u = !1);
+  }
+  /** Ease per-cell hover lift toward the hovered position (or snap when updates are off). */
+  #L(s) {
+    const t = this.#t.updateMs > 0;
+    for (let e = 0; e < this.#l.length; e++) {
+      const o = e === this.#a ? 1 : 0;
+      this.#l[e] = t ? z(this.#l[e], o, 12, s) : o;
+    }
+  }
+  /**
+   * Measure the row-label gutter (widest row key) and column-label gutter.
+   * Cached by font string until data / options / typography change.
+   */
+  #T(s) {
+    const { context: t, font: e, fontSize: o, hpr: h, vpr: i } = s;
+    if (this.#o && this.#o.font === e)
+      return { left: this.#o.left, bottom: this.#o.bottom };
+    const n = t.font;
+    t.font = e;
+    let l = 0;
+    for (const c of this.#i) {
+      const f = t.measureText(c).width;
+      f > l && (l = f);
+    }
+    t.font = n;
+    const a = l > 0 ? l + 8 * h : 0, u = o * i + 8 * i;
+    return this.#o = { font: e, left: a, bottom: u }, { left: a, bottom: u };
+  }
+  /** Value text inside a cell — skipped when the rendered text doesn't fit. */
+  #A(s) {
+    const { context: t, cell: e, labels: o, font: h, hpr: i } = s, n = o.fontSize * 1.4 * i;
+    if (e.innerH < n) return;
+    t.font = h;
+    const l = o.format ? o.format(e.displayed) : ht(e.displayed, e.span);
+    t.measureText(l).width > e.innerW - 6 * i || (t.fillStyle = it(e.fill) ? "#1f2328" : "#ffffff", t.textAlign = "center", t.textBaseline = "middle", t.fillText(l, e.cx, e.cy));
+  }
+  /** Row labels down the left edge; column labels along the bottom, density-thinned. */
+  #$(s) {
+    const { context: t, theme: e, geo: o, font: h, hpr: i, vpr: n } = s;
+    t.font = h, t.fillStyle = tt(e), t.textAlign = "right", t.textBaseline = "middle";
+    for (let c = 0; c < this.#i.length; c++) {
+      const f = o.originY + c * o.slotH + o.slotH / 2;
+      t.fillText(this.#i[c], o.originX - 6 * i, f);
+    }
+    let l = 0;
+    for (const c of this.#e) {
+      const f = t.measureText(c).width;
+      f > l && (l = f);
+    }
+    const a = Math.max(1, Math.ceil((l + 6 * i) / o.slotW));
+    t.textAlign = "center", t.textBaseline = "top";
+    const u = o.originY + this.#i.length * o.slotH + 6 * n;
+    for (let c = 0; c < this.#e.length; c += a) {
+      const f = o.originX + c * o.slotW + o.slotW / 2;
+      t.fillText(this.#e[c], f, u);
+    }
+  }
+}
+const yt = {
+  type: "heatmap",
+  create: (r, s) => new ct({ ...s }, r.theme)
+};
+export {
+  ct as HeatmapRenderer,
+  yt as HeatmapSeriesDef
+};

package/dist/core/dist/series/line-intro.js

@@ -0,0 +1,85 @@
+import { easeInOutCubic as f, easeOutBack as d } from "../animation/easing.js";
+function l(e) {
+  return e <= 0 ? 0 : e >= 1 ? 1 : e;
+}
+function g(e) {
+  const o = f(e.progress), t = e.range.from + o * (e.range.to - e.range.from);
+  return { x: e.timeToX(t), time: t };
+}
+function X(e = {}) {
+  const o = e.head ?? !0;
+  return (t) => {
+    const r = g(t);
+    return { clip: { toX: r.x }, heads: o ? [r] : void 0 };
+  };
+}
+function y(e = {}) {
+  const o = Math.min(l(e.stagger ?? 0.35), 0.9);
+  return (t) => ({
+    value: ({ layerIndex: r, value: u, position: a }) => {
+      const s = t.layerMean(r);
+      if (s === null || !Number.isFinite(u)) return u;
+      const n = l((t.progress - o * a) / (1 - o));
+      return s + (u - s) * d(n);
+    }
+  });
+}
+function T() {
+  const e = X();
+  return (o) => {
+    if (o.stacking !== "off") return e(o);
+    const t = o.primaryPath();
+    if (t === null || t.length < 2) return e(o);
+    let r = 0;
+    const u = [];
+    for (let n = 1; n < t.length; n++) {
+      const i = Math.hypot(t[n].x - t[n - 1].x, t[n].y - t[n - 1].y);
+      u.push(i), r += i;
+    }
+    if (r <= 0) return e(o);
+    let a = o.progress * r;
+    for (let n = 1; n < t.length; n++) {
+      const i = u[n - 1];
+      if (a > i) {
+        a -= i;
+        continue;
+      }
+      const h = i > 0 ? a / i : 1, c = t[n - 1], p = t[n], m = c.x + (p.x - c.x) * h, x = c.time + (p.time - c.time) * h;
+      return { clip: { toX: m }, heads: [{ x: m, time: x }] };
+    }
+    const s = t[t.length - 1];
+    return { clip: { toX: s.x }, heads: [{ x: s.x, time: s.time }] };
+  };
+}
+function w(e = {}) {
+  const o = l(e.ghostAlpha ?? 0.18);
+  return (t) => {
+    const r = g(t);
+    return { clip: { toX: r.x }, heads: [r], ghostAlpha: o };
+  };
+}
+function b() {
+  return (e) => ({
+    clip: { toX: f(e.progress) * e.width }
+  });
+}
+function k() {
+  return (e) => {
+    const o = f(e.progress), t = e.width / 2, r = t * o;
+    return {
+      clip: { fromX: t - r, toX: t + r },
+      heads: [
+        { x: t - r, time: e.xToTime(t - r) },
+        { x: t + r, time: e.xToTime(t + r) }
+      ]
+    };
+  };
+}
+export {
+  b as backfillSweepIntro,
+  k as centerOutIntro,
+  T as plotterIntro,
+  X as sweepIntro,
+  w as traceIntro,
+  y as unfoldIntro
+};