@wick-charts/vue 0.5.1 → 0.6.1

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

@@ -1,11 +1,12 @@
-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 {
+import { Animator as y } from "../animation/animator.js";
+import { IntroWave as c } from "../animation/intro-wave.js";
+import { ScalarSpring as V } from "../animation/scalar-spring.js";
+import { TimeSeriesStore as L } from "../data/store.js";
+import { resolveColor as A } from "../utils/color.js";
+import { normalizeTimePointArray as m, normalizeTime as g } from "../utils/time.js";
+import { sumStack as p, renderedStackPercentTop as v, renderedStackTop as d } from "./stack-math.js";
+const b = (f, t, e) => f + (t - f) * e;
+class R {
   stores;
   // --- Animation state (per layer) ----------------------------------------
   /**
@@ -35,10 +36,25 @@ class D {
    * loops multiply the layer's alpha into `globalAlpha` per draw.
    */
   #s;
+  /**
+   * Initial-load reveal clock — armed once when the dataset transitions
+   * empty → non-empty in {@link setData}, shared across every layer so a
+   * multi-layer seed rides one wave. Subclasses read it through
+   * {@link introProgressAt} (per-element wave) or directly (line's sweep).
+   */
+  introWave = new c();
+  /** History-prepend reveal clock — armed by {@link prependPoints} so newly
+   *  loaded older points wave in from the data boundary instead of popping.
+   *  Shared across layers: a multi-layer prepend rides one wave. */
+  historyWave = new c();
+  /** Prepended time span: `from` = deepest new point, `to` = the boundary
+   *  (the pre-prepend first point). Stagger position is `0` at the boundary
+   *  and `1` at the deepest point. */
+  historyRange = null;
   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(
+    this.stores = Array.from({ length: t }, () => new L()), 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 })
+      () => new y({ initial: 1, duration: 0, lerp: b })
     );
   }
   // --- Color accessors ------------------------------------------------------
@@ -47,63 +63,88 @@ class D {
    * 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 = [];
+  #i = [];
   setColorOverrides(t) {
-    this.#r = t;
+    this.#i = t;
   }
   /** The active resolver for a layer — the `data` override if set, else the theme base (cycled). */
-  #i(t) {
-    const e = this.#r[t];
+  #r(t) {
+    const e = this.#i[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);
+    return this.#r(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);
+    return A(this.#r(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();
+    let i = !1;
+    for (const n of this.stores)
+      n.length > 0 && (i = !0);
+    const r = m(t ?? []);
+    s.setData(r), !i && r.length > 0 && this.introWave.arm(this.options.introMs);
+    const l = s.last();
+    this.displayedLastValues[e] = l ? l.value : null, this.#t[e] = null, this.#e[e] = null, this.entries[e].clear(), this.historyWave.finish(), this.historyRange = null;
   }
   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;
+    const i = t, r = g(i.time), l = s.last(), n = 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;
+    o !== null && l !== void 0 && s.length > n && (this.#e[e] = { time: l.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() });
   }
+  prependPoints(t, e = 0) {
+    const s = this.stores[e];
+    if (!s || t.length === 0) return;
+    const i = m(t), r = s.first()?.time;
+    s.prepend(i), this.#n(i[0]?.time, r);
+  }
+  /**
+   * Arm (or extend) the history-reveal wave for freshly prepended points.
+   * While a reveal is already in flight — including a same-frame prepend to
+   * another layer — only the range grows; restarting the clock would snap
+   * half-revealed points back to invisible.
+   */
+  #n(t, e) {
+    const s = this.options.historyRevealMs;
+    if (!(this.options.historyReveal === "none" || s <= 0) && !(t === void 0 || e === void 0)) {
+      if (this.historyWave.active && this.historyRange !== null) {
+        this.historyRange = { from: Math.min(this.historyRange.from, t), to: this.historyRange.to };
+        return;
+      }
+      this.historyRange = { from: t, to: e }, this.historyWave.arm(s);
+    }
+  }
   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) {
+    s.updateLast({ ...i, time: g(i.time) });
+    const r = i.value, l = this.options.smoothMs;
+    if (l <= 0) {
       this.displayedLastValues[e] = r, this.#t[e] = null;
       return;
     }
-    let l = this.#t[e];
-    if (l === null) {
+    let n = this.#t[e];
+    if (n === null) {
       const o = this.displayedLastValues[e] ?? r;
-      l = new g(o), this.#t[e] = l;
+      n = new V(o), this.#t[e] = n;
     }
-    l.retarget(r, { settleMs: n });
+    n.retarget(r, { settleMs: l });
   }
   keepLast(t, e = 0) {
     const s = this.stores[e];
@@ -146,15 +187,42 @@ class D {
   /**
    * 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).
+   * default: nothing to fade in). Takes no render context — progress is a
+   * pure function of wall time — so tooltip/last-value queries (which have
+   * no context to hand) can read it too.
    */
-  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;
+  entranceProgress(t, e) {
+    const s = this.entries[t]?.get(e);
+    if (s === void 0) return 1;
+    const i = this.options.entryMs;
+    if (i <= 0) return 1;
+    const r = performance.now() - s.startTime;
+    return r <= 0 ? 0 : r >= i ? 1 : r / i;
+  }
+  /**
+   * Initial-load reveal progress for a datum, keyed by its normalized
+   * position across the *visible* time window — the wave sweeps whatever
+   * the user actually sees, regardless of how much history sits off-screen.
+   * `1` when no intro is in flight. Subclasses that animate per element
+   * (bar) fold this into their {@link entranceProgress} override; the line
+   * renders its own continuous sweep instead.
+   */
+  introProgressAt(t, e) {
+    if (!this.introWave.active) return 1;
+    const s = t.timeScale.getRange(), i = s.to - s.from, r = i > 0 ? (e - s.from) / i : 0;
+    return this.introWave.progressAt(r);
+  }
+  /**
+   * History-prepend reveal progress for a datum. Stagger position is
+   * anchored at the data boundary — `0` there, `1` at the deepest prepended
+   * point — so the wave travels into history. `1` for points outside the
+   * prepended span or when no reveal is in flight.
+   */
+  historyProgressAt(t) {
+    const e = this.historyRange;
+    if (!this.historyWave.active || e === null || t >= e.to) return 1;
+    const s = e.to - e.from, i = s > 0 ? (e.to - t) / s : 0;
+    return this.historyWave.progressAt(i);
   }
   /**
    * Trailing data points whose entrance is still unsettled, oldest first.
@@ -167,16 +235,16 @@ class D {
    * 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 });
+  unsettledTail(t) {
+    const e = this.stores[t]?.getAll();
+    if (!e || e.length < 2) return [];
+    const s = [];
+    for (let i = e.length - 1; i >= 1; i--) {
+      const r = this.entranceProgress(t, e[i].time);
+      if (r >= 1) break;
+      s.unshift({ time: e[i].time, progress: r });
     }
-    return i;
+    return s;
   }
   /**
    * Substitute the renderer-smoothed last value for `rawValue` when the
@@ -186,11 +254,31 @@ class D {
    * 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;
+    return this.liveValue(e, s, i);
+  }
+  /**
+   * The ctx-independent core of {@link effectiveValue} — used directly by the
+   * tooltip/last-value query methods below, which have no render context to
+   * hand a subclass's ctx-dependent override (e.g. Line's intro value
+   * transform). Those queries only need the live smoothing/chase this base
+   * method already provides, never the intro's positional transform.
+   */
+  liveValue(t, e, s) {
+    const i = this.stores[t]?.last()?.time;
+    if (i !== void 0 && e === i)
+      return this.displayedLastValues[t] ?? s;
+    const r = this.#e[t];
+    return r !== null && r.time === e ? r.anim.current : s;
+  }
+  /**
+   * Value a last-value/tooltip query should report for `time` — defaults to
+   * {@link liveValue}. Distinct from `liveValue` so a subclass can layer its
+   * *entrance* animation's value-space equivalent on top (see Line's
+   * override) without that lerp feeding back into `effectiveValue`, which
+   * the renderer's own per-point draws use as an unlerp'd target.
+   */
+  snapshotValue(t, e, s) {
+    return this.liveValue(t, e, s);
   }
   // --- Animation lifecycle --------------------------------------------------
   /**
@@ -200,12 +288,13 @@ class D {
    * `performance.now`) can drive progression deterministically.
    */
   tickAnimations(t) {
+    this.introWave.tick(t), this.historyWave.tick(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 n = s.tick(t);
+        this.displayedLastValues[e] = s.current, n || (this.#t[e] = null);
       }
       const i = this.#e[e];
       i !== null && !i.anim.tick(t) && (this.#e[e] = null);
@@ -214,13 +303,15 @@ class D {
         this.entries[e].clear();
         continue;
       }
-      const n = this.entries[e];
-      for (const [l, o] of n)
-        t - o.startTime >= r && n.delete(l);
+      const l = this.entries[e];
+      for (const [n, o] of l)
+        t - o.startTime >= r && l.delete(n);
     }
   }
-  /** True while any layer has an active chase, unsettled entry, or alpha fade. */
+  /** True while any layer has an active chase, unsettled entry, alpha fade,
+   *  or the initial-load reveal is still sweeping. */
   get needsAnimation() {
+    if (this.introWave.active || this.historyWave.active) return !0;
     for (const t of this.#s)
       if (t.animating) return !0;
     for (const t of this.#t)
@@ -231,12 +322,18 @@ class D {
       if (t.size > 0) return !0;
     return !1;
   }
+  /** Reveal-front position of the initial-load intro; `1` once settled. */
+  getIntroFront() {
+    return this.introWave.sweep();
+  }
   /**
-   * 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.
+   * Abort in-flight per-point entrance animations on every layer, including
+   * the initial-load reveal. Live-value chase (`displayedLastValues`) is
+   * intentionally left alone — its motion is subtle and shouldn't jump when
+   * the viewport moves.
    */
   cancelEntranceAnimations() {
+    this.introWave.finish();
     for (const t of this.entries) t.clear();
   }
   /**
@@ -296,18 +393,21 @@ class D {
       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);
+      let l = r[0], n = 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]);
+        a <= n && (n = a, l = r[o]);
       }
       s.push({
         layerIndex: i,
-        time: n.time,
-        value: n.value,
+        time: l.time,
+        // Routes through the same live/pinned-chase smoothing the renderer
+        // paints, so hovering the live edge mid-animation doesn't jump ahead
+        // to the raw target before the on-screen marker gets there.
+        value: this.snapshotValue(i, l.time, l.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)
+        color: this.resolveLayerColor(i, l.value)
       });
     }
     return s.length > 0 ? s : null;
@@ -315,32 +415,60 @@ class D {
   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);
+      return r ? { value: this.snapshotValue(0, r.time, r.value), isLive: !0 } : null;
     }
-    if (t === -1 / 0) return null;
-    const e = this.options.stacking;
-    if (e === "off") {
+    const t = this.options.stacking;
+    if (t === "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 };
+        const l = this.stores[r].last();
+        if (l) return { value: this.snapshotValue(r, l.time, l.value), isLive: !0 };
       }
       return null;
     }
+    let e = !1;
     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);
+    for (let r = 0; r < this.stores.length; r++) {
+      if (!this.stores[r].isVisible()) continue;
+      const l = this.stores[r].last();
+      if (!l) {
+        s.push(0);
+        continue;
+      }
+      e = !0, s.push(this.snapshotValue(r, l.time, l.value));
+    }
+    if (!e) return null;
+    const i = p(s);
+    return { value: t === "percent" ? v(i) : d(i), isLive: !0 };
+  }
+  getStackedValueAtTime(t, e) {
+    if (this.stores.length <= 1) {
+      const n = this.stores[0]?.findNearest(t, e);
+      return n ? this.snapshotValue(0, n.time, n.value) : null;
+    }
+    const s = this.options.stacking;
+    if (s === "off") {
+      for (let n = this.stores.length - 1; n >= 0; n--) {
+        if (!this.stores[n].isVisible()) continue;
+        const o = this.stores[n].findNearest(t, e);
+        if (o) return this.snapshotValue(n, o.time, o.value);
+      }
+      return null;
+    }
+    let i = !1;
+    const r = [];
+    for (let n = 0; n < this.stores.length; n++) {
+      if (!this.stores[n].isVisible()) continue;
+      const o = this.stores[n].findNearest(t, e);
+      if (!o) {
+        r.push(0);
+        continue;
+      }
+      i = !0, r.push(this.snapshotValue(n, o.time, o.value));
     }
-    const i = y(s);
-    return { value: e === "percent" ? L(i) : V(i), isLive: !0 };
+    if (!i) return null;
+    const l = p(r);
+    return s === "percent" ? v(l) : d(l);
   }
   getLayerLastSnapshots() {
     if (this.stores.length <= 1) return null;
@@ -351,7 +479,7 @@ class D {
       s && t.push({
         layerIndex: e,
         time: s.time,
-        value: s.value,
+        value: this.snapshotValue(e, s.time, s.value),
         color: this.resolveLayerColor(e, s.value)
       });
     }
@@ -412,27 +540,27 @@ class D {
     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));
+      for (const h of i)
+        for (const u of h)
+          Number.isFinite(u.value) && (u.value < o && (o = u.value), u.value > a && (a = u.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 h = r.get(a.time);
+        h || (h = new Array(i.length).fill(0), r.set(a.time, h)), h[o] = Number.isFinite(a.value) ? a.value : 0;
       }
-    let n = 0, l = 0;
+    let l = 0, n = 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);
+      let a = 0, h = 0;
+      for (const u of o)
+        u > 0 ? a += u : h += u;
+      a > n && (n = a), h < l && (l = h);
     }
-    return l > n ? { min: n, max: l } : null;
+    return n > l ? { min: l, max: n } : null;
   }
 }
 export {
-  D as BaseMultiLayerSeries
+  R as BaseMultiLayerSeries
 };

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

@@ -0,0 +1,57 @@
+import { lerp as p } from "../utils/math.js";
+import { fadeIntro as g } from "./wave-intro.js";
+function h(e) {
+  return e <= 0 ? 0 : e >= 1 ? 1 : e;
+}
+function w() {
+  return () => ({
+    element: (e) => ({ unfold: e.progress, alpha: e.progress })
+  });
+}
+const b = 0.55, m = 0.45, d = 0.35, k = 1.5;
+function Y(e = {}) {
+  const l = e.fallback ?? g();
+  return (r) => {
+    const s = r.placeholders;
+    if (s === void 0 || s.length === 0) return l(r);
+    const f = l(r);
+    return {
+      ...f,
+      element: (t) => {
+        const u = t.element === "wick" ? t.x : t.x + t.barWidth / 2;
+        let o = null, a = 1 / 0;
+        for (const c of s) {
+          const i = Math.abs(c.x - u);
+          i < a && (a = i, o = c);
+        }
+        if (o === null || a > o.width * k)
+          return f.element?.(t) ?? {};
+        const n = t.progress;
+        return t.element === "volume" ? { alpha: n } : {
+          topY: p(o.y - o.halfHeight, t.topY, n),
+          bottomY: p(o.y + o.halfHeight, t.bottomY, n),
+          offsetX: (o.x - u) * (1 - n),
+          alpha: d + (1 - d) * n,
+          tint: 1 - n
+        };
+      }
+    };
+  };
+}
+function y() {
+  return () => ({
+    element: (e) => {
+      if (e.element === "wick") {
+        const r = h(e.progress / b);
+        return { unfold: r, alpha: r > 0 ? 1 : 0 };
+      }
+      const l = h((e.progress - m) / (1 - m));
+      return { unfold: l, alpha: l };
+    }
+  });
+}
+export {
+  w as candleUnfoldIntro,
+  Y as skeletonMorphIntro,
+  y as wickBodyIntro
+};