@wick-charts/vue 0.4.2 → 0.5.1

package/dist/core/dist/series/base-multi-layer.js

@@ -0,0 +1,438 @@
+import { Animator as m } from "../animation/animator.js";
+import { ScalarSpring as g } from "../animation/scalar-spring.js";
+import { TimeSeriesStore as p } from "../data/store.js";
+import { resolveColor as d } from "../utils/color.js";
+import { normalizeTimePointArray as v, normalizeTime as c } from "../utils/time.js";
+import { sumStack as y, renderedStackPercentTop as L, renderedStackTop as V } from "./stack-math.js";
+const A = (f, t, e) => f + (t - f) * e;
+class D {
+  stores;
+  // --- Animation state (per layer) ----------------------------------------
+  /**
+   * Per-point entrance animation registry. Subclasses read it through
+   * {@link entranceProgress}; tests reach in directly via type-cast (kept
+   * `protected` rather than `#` so the existing test helper keeps working).
+   */
+  entries;
+  /**
+   * Latest rendered Y for each layer's last point, chased smoothly by
+   * `updateLastPoint`. `null` while the store is empty.
+   */
+  displayedLastValues;
+  /** Per-layer chase spring. `null` when settled or when smoothing is off. */
+  #t;
+  /**
+   * Chase displaced from the last slot by an append, still settling toward the
+   * (now-penultimate) point's stored value. Pinned to that point's `time` so
+   * {@link effectiveValue} keeps substituting the smoothed Y until it lands —
+   * killing the spring on append would snap the vertex to its raw value the
+   * very frame a new point arrives (a visible 1–2-frame kink at the line head).
+   */
+  #e;
+  /**
+   * Per-layer alpha for the visibility cross-fade. `setAlpha` (whole series)
+   * fans out across the array; `setLayerAlpha` targets a single index. Render
+   * loops multiply the layer's alpha into `globalAlpha` per draw.
+   */
+  #s;
+  constructor(t) {
+    this.stores = Array.from({ length: t }, () => new p()), this.entries = Array.from({ length: t }, () => /* @__PURE__ */ new Map()), this.displayedLastValues = new Array(t).fill(null), this.#t = new Array(t).fill(null), this.#e = new Array(t).fill(null), this.#s = Array.from(
+      { length: t },
+      () => new m({ initial: 1, duration: 0, lerp: A })
+    );
+  }
+  // --- Color accessors ------------------------------------------------------
+  /**
+   * Per-layer color overrides carried in `data` (sparse — `undefined` leaves a
+   * layer on the theme base in `options.colors`). Kept separate from the base so
+   * a theme swap, which rewrites `options.colors`, leaves these untouched.
+   */
+  #r = [];
+  setColorOverrides(t) {
+    this.#r = t;
+  }
+  /** The active resolver for a layer — the `data` override if set, else the theme base (cycled). */
+  #i(t) {
+    const e = this.#r[t];
+    if (e !== void 0) return e;
+    const s = this.options.colors;
+    return s[t % s.length];
+  }
+  /** The first layer's color resolver (string or value-fn). */
+  getColor() {
+    return this.#i(0);
+  }
+  getColors() {
+    return this.options.colors;
+  }
+  /** Resolve one layer's color for a given datum value. */
+  resolveLayerColor(t, e) {
+    return d(this.#i(t), e);
+  }
+  // --- Data ingest ----------------------------------------------------------
+  setData(t, e = 0) {
+    const s = this.stores[e];
+    if (!s) return;
+    const i = v(t ?? []);
+    s.setData(i);
+    const r = s.last();
+    this.displayedLastValues[e] = r ? r.value : null, this.#t[e] = null, this.#e[e] = null, this.entries[e].clear();
+  }
+  appendPoint(t, e = 0) {
+    const s = this.stores[e];
+    if (!s) return;
+    const i = t, r = c(i.time), n = s.last(), l = s.length;
+    s.append({ ...i, time: r });
+    const o = this.#t[e];
+    o !== null && n !== void 0 && s.length > l && (this.#e[e] = { time: n.time, anim: o }), this.displayedLastValues[e] = i.value, this.#t[e] = null;
+    const a = this.options.entryMs;
+    this.isEntryEnabled() && a > 0 && this.entries[e].set(r, { startTime: performance.now() });
+  }
+  updateLastPoint(t, e = 0) {
+    const s = this.stores[e];
+    if (!s) return;
+    const i = t;
+    s.updateLast({ ...i, time: c(i.time) });
+    const r = i.value, n = this.options.smoothMs;
+    if (n <= 0) {
+      this.displayedLastValues[e] = r, this.#t[e] = null;
+      return;
+    }
+    let l = this.#t[e];
+    if (l === null) {
+      const o = this.displayedLastValues[e] ?? r;
+      l = new g(o), this.#t[e] = l;
+    }
+    l.retarget(r, { settleMs: n });
+  }
+  keepLast(t, e = 0) {
+    const s = this.stores[e];
+    if (!s || t < 0) return;
+    const i = s.length - t;
+    i <= 0 || s.trimStart(i);
+  }
+  // --- Layer model ----------------------------------------------------------
+  getLayerCount() {
+    return this.stores.length;
+  }
+  setLayerVisible(t, e) {
+    this.stores[t]?.setVisible(e);
+  }
+  isLayerVisible(t) {
+    return this.stores[t]?.isVisible() ?? !0;
+  }
+  /** Representative concrete color per layer — value-fns are resolved at the
+   *  layer's last value, giving the legend swatch / color-change detection a
+   *  stable string. Honors per-layer `data` overrides. */
+  getLayerColors() {
+    const t = [];
+    for (let e = 0; e < this.stores.length; e++) {
+      const s = this.stores[e]?.last()?.value ?? 0;
+      t.push(this.resolveLayerColor(e, s));
+    }
+    return t;
+  }
+  // --- Lifecycle ------------------------------------------------------------
+  onDataChanged(t) {
+    for (const e of this.stores) e.on("update", t);
+    return () => {
+      for (const e of this.stores) e.off("update", t);
+    };
+  }
+  dispose() {
+    for (const t of this.stores) t.removeAllListeners();
+  }
+  // --- Animation primitives — renderer-owned state --------------------------
+  /**
+   * Per-point entrance progress in `[0, 1]`. Reads the local entry registry,
+   * returning `1` for a settled or absent entry (which matches the visual
+   * default: nothing to fade in).
+   */
+  entranceProgress(t, e, s) {
+    const i = this.entries[e]?.get(s);
+    if (i === void 0) return 1;
+    const r = this.options.entryMs;
+    if (r <= 0) return 1;
+    const n = performance.now() - i.startTime;
+    return n <= 0 ? 0 : n >= r ? 1 : n / r;
+  }
+  /**
+   * Trailing data points whose entrance is still unsettled, oldest first.
+   * Walks back from the store's last point and stops at the first settled
+   * point — that point is the stable anchor a chained grow-lerp hangs off.
+   *
+   * A feed that appends faster than `entryMs` keeps several entrances in
+   * flight at once; animating only the newest (and snapping the rest to
+   * their raw spots) makes the head region jump a segment-fraction forward
+   * on every append. Renderers lerp each chain link from the previous
+   * link's *rendered* position instead, so geometry stays continuous.
+   */
+  unsettledTail(t, e) {
+    const s = this.stores[e]?.getAll();
+    if (!s || s.length < 2) return [];
+    const i = [];
+    for (let r = s.length - 1; r >= 1; r--) {
+      const n = this.entranceProgress(t, e, s[r].time);
+      if (n >= 1) break;
+      i.unshift({ time: s[r].time, progress: n });
+    }
+    return i;
+  }
+  /**
+   * Substitute the renderer-smoothed last value for `rawValue` when the
+   * query `time` matches the layer's current last point, or the still-settling
+   * pinned chase (see {@link appendPoint}) when it matches the penultimate.
+   * Falls back to `rawValue` when the store is empty or no smoothing has
+   * happened yet.
+   */
+  effectiveValue(t, e, s, i) {
+    const r = this.stores[e]?.last()?.time;
+    if (r !== void 0 && s === r)
+      return this.displayedLastValues[e] ?? i;
+    const n = this.#e[e];
+    return n !== null && n.time === s ? n.anim.current : i;
+  }
+  // --- Animation lifecycle --------------------------------------------------
+  /**
+   * Advance owned animators against `now` and prune fully-settled entries.
+   * Called by the subclass's `render()` once per frame, before drawing. The
+   * subclass passes its own clock so test harnesses (which stub
+   * `performance.now`) can drive progression deterministically.
+   */
+  tickAnimations(t) {
+    for (const e of this.#s) e.tick(t);
+    for (let e = 0; e < this.stores.length; e++) {
+      const s = this.#t[e];
+      if (s !== null) {
+        const l = s.tick(t);
+        this.displayedLastValues[e] = s.current, l || (this.#t[e] = null);
+      }
+      const i = this.#e[e];
+      i !== null && !i.anim.tick(t) && (this.#e[e] = null);
+      const r = this.options.entryMs;
+      if (r <= 0) {
+        this.entries[e].clear();
+        continue;
+      }
+      const n = this.entries[e];
+      for (const [l, o] of n)
+        t - o.startTime >= r && n.delete(l);
+    }
+  }
+  /** True while any layer has an active chase, unsettled entry, or alpha fade. */
+  get needsAnimation() {
+    for (const t of this.#s)
+      if (t.animating) return !0;
+    for (const t of this.#t)
+      if (t !== null) return !0;
+    for (const t of this.#e)
+      if (t !== null) return !0;
+    for (const t of this.entries)
+      if (t.size > 0) return !0;
+    return !1;
+  }
+  /**
+   * Abort in-flight per-point entrance animations on every layer. Live-value
+   * chase (`displayedLastValues`) is intentionally left alone — its motion
+   * is subtle and shouldn't jump when the viewport moves.
+   */
+  cancelEntranceAnimations() {
+    for (const t of this.entries) t.clear();
+  }
+  /**
+   * Start a series-wide fade toward `target` over `durationMs`. Fans out
+   * across every per-layer animator so a `setSeriesVisible` toggle is just
+   * "set every layer to the same target". `durationMs <= 0` snaps.
+   */
+  setAlpha(t, e) {
+    for (const s of this.#s)
+      s.setTarget(t, { duration: e });
+  }
+  /**
+   * `1` while any layer has alpha > 0 OR is animating, `0` when every layer
+   * has fully faded and is at rest. Per-layer alpha is composed into
+   * `globalAlpha` by the renderer's own draw loops, so this stays a binary
+   * skip-gate at the chart level.
+   *
+   * The `animating` check matters when every layer is at `current = 0` and
+   * the user toggles one back in: `setLayerAlpha(idx, 1, ms)` flips the
+   * animator to `animating = true` but `current` is still `0` until the next
+   * `tick`. If chart skipped the render based on `current` alone, the
+   * animator would never tick (render is what advances it), and the fade-in
+   * would deadlock at `0`.
+   */
+  getAlpha() {
+    for (const t of this.#s)
+      if (t.current > 0 || t.animating) return 1;
+    return 0;
+  }
+  /**
+   * Start a fade for a single layer toward `target` over `durationMs`.
+   * Subclass draw loops multiply this into `globalAlpha` per layer so the
+   * fade lives next to the geometry it affects.
+   */
+  setLayerAlpha(t, e, s) {
+    this.#s[t]?.setTarget(e, { duration: s });
+  }
+  /** Latest rendered per-layer alpha. Defaults to 1 for out-of-range indices. */
+  getLayerAlpha(t) {
+    return this.#s[t]?.current ?? 1;
+  }
+  // --- Data queries ---------------------------------------------------------
+  getLastValue() {
+    for (let t = this.stores.length - 1; t >= 0; t--) {
+      const e = this.stores[t].last();
+      if (e) return e.value;
+    }
+    return null;
+  }
+  getDataAtTime(t, e) {
+    return this.stores[0]?.findNearest(t, e) ?? null;
+  }
+  getLayerSnapshots(t, e) {
+    if (this.stores.length <= 1) return null;
+    const s = [];
+    for (let i = 0; i < this.stores.length; i++) {
+      if (!this.stores[i].isVisible()) continue;
+      const r = this.stores[i].getVisibleData(t - e, t + e);
+      if (r.length === 0) continue;
+      let n = r[0], l = Math.abs(r[0].time - t);
+      for (let o = 1; o < r.length; o++) {
+        const a = Math.abs(r[o].time - t);
+        a <= l && (l = a, n = r[o]);
+      }
+      s.push({
+        layerIndex: i,
+        time: n.time,
+        value: n.value,
+        // Resolve the layer's color at the hovered datum's value so a value-fn
+        // colors the tooltip dot to match the bar / segment under the cursor.
+        color: this.resolveLayerColor(i, n.value)
+      });
+    }
+    return s.length > 0 ? s : null;
+  }
+  getStackedLastValue() {
+    if (this.stores.length <= 1) {
+      const r = this.stores[0]?.last();
+      return r ? { value: r.value, isLive: !0 } : null;
+    }
+    let t = -1 / 0;
+    for (const r of this.stores) {
+      if (!r.isVisible()) continue;
+      const n = r.last();
+      n && n.time > t && (t = n.time);
+    }
+    if (t === -1 / 0) return null;
+    const e = this.options.stacking;
+    if (e === "off") {
+      for (let r = this.stores.length - 1; r >= 0; r--) {
+        if (!this.stores[r].isVisible()) continue;
+        const n = this.stores[r].last();
+        if (n) return { value: n.value, isLive: !0 };
+      }
+      return null;
+    }
+    const s = [];
+    for (const r of this.stores) {
+      if (!r.isVisible()) continue;
+      const n = r.last();
+      s.push(n && n.time === t ? n.value : 0);
+    }
+    const i = y(s);
+    return { value: e === "percent" ? L(i) : V(i), isLive: !0 };
+  }
+  getLayerLastSnapshots() {
+    if (this.stores.length <= 1) return null;
+    const t = [];
+    for (let e = 0; e < this.stores.length; e++) {
+      if (!this.stores[e].isVisible()) continue;
+      const s = this.stores[e].last();
+      s && t.push({
+        layerIndex: e,
+        time: s.time,
+        value: s.value,
+        color: this.resolveLayerColor(e, s.value)
+      });
+    }
+    return t.length > 0 ? t : null;
+  }
+  getTotalLength() {
+    let t = 0;
+    for (const e of this.stores) t += e.length;
+    return t;
+  }
+  // --- TimeSeriesRenderer data queries --------------------------------------
+  /** Earliest first-sample / latest last-sample across ALL layers, skipping
+   *  empty ones. Aggregating every layer (not just `stores[0]`) is what fixes
+   *  the multi-layer time-range leak: a populated layer 1 with an empty layer 0
+   *  still reports the real bounds. */
+  getTimeBounds() {
+    let t = 1 / 0, e = -1 / 0;
+    for (const s of this.stores) {
+      const i = s.first();
+      if (!i) continue;
+      const r = s.last() ?? i;
+      i.time < t && (t = i.time), r.time > e && (e = r.time);
+    }
+    return t === 1 / 0 ? null : { first: t, last: e };
+  }
+  /**
+   * Last data point of **layer 0 (`stores[0]`) only** — preserves the behavior
+   * of the deleted `get store()` getter. NOTE: this is intentionally NOT the
+   * same as {@link getStackedLastValue}, which for non-stacked multi-layer
+   * reports the top visible layer and for stacked reports the cumulative sum.
+   * Last-data / previous-close semantics stay pinned to layer 0 for back-compat.
+   */
+  getLastDataPoint() {
+    return this.stores[0]?.last() ?? null;
+  }
+  /** Second-to-last point of layer 0 (`stores[0]`). See {@link getLastDataPoint}. */
+  getSecondLastDataPoint() {
+    const t = this.stores[0]?.getAll();
+    return !t || t.length < 2 ? null : t[t.length - 2];
+  }
+  /** First `maxCount` sample times from the first populated layer. */
+  sampleTimes(t) {
+    for (const e of this.stores) {
+      const s = e.getAll();
+      if (s.length !== 0)
+        return s.slice(0, t).map((i) => i.time);
+    }
+    return [];
+  }
+  /** Visible points of layer 0 (`stores[0]`). See {@link getLastDataPoint}. */
+  getVisibleDataPoints(t, e) {
+    return this.stores[0]?.getVisibleData(t, e) ?? [];
+  }
+  getValueRange(t, e) {
+    const s = this.options.stacking;
+    if (s === "percent")
+      return { min: 0, max: 100 };
+    const i = this.stores.map((o) => o.isVisible() ? o.getVisibleData(t, e) : []);
+    if (s === "off") {
+      let o = 1 / 0, a = -1 / 0;
+      for (const u of i)
+        for (const h of u)
+          Number.isFinite(h.value) && (h.value < o && (o = h.value), h.value > a && (a = h.value));
+      return o < 1 / 0 ? { min: o, max: a } : null;
+    }
+    const r = /* @__PURE__ */ new Map();
+    for (let o = 0; o < i.length; o++)
+      for (const a of i[o]) {
+        let u = r.get(a.time);
+        u || (u = new Array(i.length).fill(0), r.set(a.time, u)), u[o] = Number.isFinite(a.value) ? a.value : 0;
+      }
+    let n = 0, l = 0;
+    for (const o of r.values()) {
+      let a = 0, u = 0;
+      for (const h of o)
+        h > 0 ? a += h : u += h;
+      a > l && (l = a), u < n && (n = u);
+    }
+    return l > n ? { min: n, max: l } : null;
+  }
+}
+export {
+  D as BaseMultiLayerSeries
+};