@wick-charts/vue 0.6.2 → 0.6.4

package/dist/core/dist/series/band.js

@@ -0,0 +1,670 @@
+import { Animator as I } from "../animation/animator.js";
+import { DEFAULT_HISTORY_REVEAL as F, DEFAULT_BAND_INTRO as z, DEFAULT_BAND_SMOOTH as _, DEFAULT_BAND_ENTRY as O } from "../animation/config.js";
+import { easeOutCubic as $ } from "../animation/easing.js";
+import { IntroWave as D } from "../animation/intro-wave.js";
+import { ScalarSpring as N } from "../animation/scalar-spring.js";
+import { decimateBandData as Y } from "../data/decimation.js";
+import { TimeSeriesStore as H } from "../data/store.js";
+import { resolveColor as U, hexToRgba as A } from "../utils/color.js";
+import { lerp as P } from "../utils/math.js";
+import { normalizeTime as W } from "../utils/time.js";
+import { unfoldIntro as J, scaleMean as j, backfillSweepIntro as G } from "./line-intro.js";
+import { buildCurveSegments as B, replaySegmentsForward as R, replaySegmentsReversed as Q } from "./painters/canvas-path.js";
+const Z = {
+  colors: ["#2962FF"],
+  fill: void 0,
+  stroke: { visible: !0, width: 1, color: void 0 },
+  curve: "straight",
+  entryAnimation: "grow",
+  entryMs: O,
+  smoothMs: _,
+  introMs: z,
+  historyRevealMs: F,
+  introAnimation: void 0,
+  historyReveal: void 0
+}, q = 0.4, K = 0.04, E = 0.6, tt = G();
+function S(l, t) {
+  return l === !1 ? 0 : l ?? t;
+}
+function V(l, t) {
+  const i = t.stroke;
+  return {
+    colors: t.colors ?? l.colors,
+    fill: "fill" in t ? t.fill : l.fill,
+    stroke: {
+      visible: i?.visible ?? l.stroke.visible,
+      width: i?.width ?? l.stroke.width,
+      color: i !== void 0 && "color" in i ? i.color : l.stroke.color
+    },
+    curve: t.curve ?? l.curve,
+    entryAnimation: t.entryAnimation ?? l.entryAnimation,
+    entryMs: S(t.entryMs, l.entryMs),
+    smoothMs: S(t.smoothMs, l.smoothMs),
+    introMs: S(t.introMs, l.introMs),
+    historyRevealMs: S(t.historyRevealMs, l.historyRevealMs),
+    introAnimation: "introAnimation" in t ? t.introAnimation : l.introAnimation,
+    historyReveal: "historyReveal" in t ? t.historyReveal : l.historyReveal
+  };
+}
+const et = (l, t, i) => l + (t - l) * i;
+function L(l) {
+  return l <= 0 ? 0 : l >= 1 ? 1 : l;
+}
+function T(l) {
+  const t = W(l.time), { low: i, high: e } = l;
+  return !Number.isFinite(i) || !Number.isFinite(e) ? { ...l, time: t, low: Number.NaN, high: Number.NaN } : { ...l, time: t, low: Math.min(i, e), high: Math.max(i, e) };
+}
+function b(l) {
+  return !Number.isFinite(l.low);
+}
+function x(l) {
+  return { low: l.low, high: l.high };
+}
+function it(l) {
+  const { upperSegs: t, lowerSegs: i } = l;
+  for (let e = 0; e < t.length; e++) {
+    const o = t[e], s = i[e];
+    if (o.kind !== "bezier" || s.kind !== "bezier") continue;
+    const n = C(o.cp1y, s.cp1y), a = C(o.cp2y, s.cp2y);
+    t[e] = { ...o, cp1y: n.top, cp2y: a.top }, i[e] = { ...s, cp1y: n.bottom, cp2y: a.bottom };
+  }
+}
+function C(l, t) {
+  if (l <= t) return { top: l, bottom: t };
+  const i = (l + t) / 2;
+  return { top: i, bottom: i };
+}
+class ot {
+  store = new H();
+  /** Entrance start wall-time per appended point, keyed by point time. */
+  entries = /* @__PURE__ */ new Map();
+  alpha = new I({ initial: 1, duration: 0, lerp: et });
+  /** Displayed edges of the last point; the chase moves them toward the stored ones. */
+  displayedLast = null;
+  chase = null;
+  /**
+   * A chase displaced from the last slot by an append, still settling on that
+   * (now penultimate) point. Dropping it would snap that vertex the frame the
+   * new point lands.
+   */
+  pinned = null;
+}
+class st {
+  kind = "band";
+  #e;
+  #t;
+  /** Per-layer colors carried in `data` (sparse); kept apart so a theme swap leaves them alone. */
+  #p = [];
+  /** Initial-load reveal, armed once on the empty → non-empty seed and shared by every layer. */
+  #i = new D();
+  /** History-prepend reveal, armed by {@link prependPoints}. */
+  #o = new D();
+  /** Prepended span: `from` = deepest new point, `to` = the pre-prepend first point. */
+  #s = null;
+  #a = null;
+  #n = null;
+  #h = null;
+  /** True while a ghost pre-pass draws — edges only, no fill. */
+  #c = !1;
+  constructor(t, i) {
+    this.#t = Array.from({ length: Math.max(1, t) }, () => new ot()), this.#e = V(Z, i ?? {});
+  }
+  updateOptions(t) {
+    this.#e = V(this.#e, t);
+  }
+  applyTheme(t) {
+    this.updateOptions({ colors: X(t, this.#t.length) });
+  }
+  // --- Data ingest ----------------------------------------------------------
+  setData(t, i = 0) {
+    const e = this.#t[i];
+    if (!e) return;
+    const o = this.#t.some((a) => a.store.length > 0), s = (t ?? []).map(T);
+    e.store.setData(s), !o && s.length > 0 && this.#i.arm(this.#e.introMs);
+    const n = e.store.last();
+    e.displayedLast = n ? x(n) : null, e.chase = null, e.pinned = null, e.entries.clear(), this.#o.finish(), this.#s = null;
+  }
+  appendPoint(t, i = 0) {
+    const e = this.#t[i];
+    if (!e) return;
+    const o = T(t), s = e.store.last(), n = e.store.length;
+    e.store.append(o);
+    const a = e.store.length > n;
+    e.chase !== null && s !== void 0 && a && (e.pinned = { time: s.time, chase: e.chase }), e.displayedLast = x(o), e.chase = null, this.#e.entryAnimation !== "none" && this.#e.entryMs > 0 && e.entries.set(o.time, performance.now());
+  }
+  prependPoints(t, i = 0) {
+    const e = this.#t[i];
+    if (!e || t.length === 0) return;
+    const o = t.map(T), s = e.store.first()?.time;
+    e.store.prepend(o), this.#A(o[0]?.time, s);
+  }
+  /** While a reveal is in flight only the range grows — a restart would hide half-revealed points again. */
+  #A(t, i) {
+    const e = this.#e.historyRevealMs;
+    if (!(this.#e.historyReveal === "none" || e <= 0) && !(t === void 0 || i === void 0)) {
+      if (this.#o.active && this.#s !== null) {
+        this.#s = { from: Math.min(this.#s.from, t), to: this.#s.to };
+        return;
+      }
+      this.#s = { from: t, to: i }, this.#o.arm(e);
+    }
+  }
+  updateLastPoint(t, i = 0) {
+    const e = this.#t[i];
+    if (!e) return;
+    const o = T(t);
+    e.store.updateLast(o);
+    const s = this.#e.smoothMs;
+    if (s <= 0 || b(o)) {
+      e.displayedLast = x(o), e.chase = null;
+      return;
+    }
+    if (e.chase === null) {
+      const n = e.displayedLast, a = n !== null && Number.isFinite(n.low) ? n : x(o);
+      e.chase = { low: new N(a.low), high: new N(a.high) };
+    }
+    e.chase.low.retarget(o.low, { settleMs: s }), e.chase.high.retarget(o.high, { settleMs: s });
+  }
+  keepLast(t, i = 0) {
+    const e = this.#t[i];
+    if (!e || t < 0) return;
+    const o = e.store.length - t;
+    o <= 0 || e.store.trimStart(o);
+  }
+  // --- Layer model ----------------------------------------------------------
+  getLayerCount() {
+    return this.#t.length;
+  }
+  setLayerVisible(t, i) {
+    this.#t[t]?.store.setVisible(i);
+  }
+  isLayerVisible(t) {
+    return this.#t[t]?.store.isVisible() ?? !0;
+  }
+  setColorOverrides(t) {
+    this.#p = t;
+  }
+  /** Representative color per layer — a value-fn resolves at the layer's last midpoint. */
+  getLayerColors() {
+    return this.#t.map((t, i) => this.#r(i));
+  }
+  #r(t) {
+    const i = this.#p[t], e = this.#e.colors, o = i ?? e[t % e.length], s = this.#t[t]?.store.last(), n = s !== void 0 && !b(s) ? (s.low + s.high) / 2 : 0;
+    return U(o, n);
+  }
+  // --- Animation ------------------------------------------------------------
+  /** Advance owned animators. Called by both passes; every clock samples `now`, so a second tick is a no-op. */
+  #f(t) {
+    this.#i.tick(t), this.#o.tick(t);
+    for (const i of this.#t)
+      i.alpha.tick(t), this.#S(i, t), this.#T(i, t);
+  }
+  #S(t, i) {
+    const e = t.chase;
+    if (e !== null) {
+      const s = e.low.tick(i), n = e.high.tick(i);
+      t.displayedLast = { low: e.low.current, high: e.high.current }, !s && !n && (t.chase = null);
+    }
+    const o = t.pinned;
+    if (o !== null) {
+      const s = o.chase.low.tick(i), n = o.chase.high.tick(i);
+      !s && !n && (t.pinned = null);
+    }
+  }
+  #T(t, i) {
+    const e = this.#e.entryMs;
+    if (e <= 0) {
+      t.entries.clear();
+      return;
+    }
+    for (const [o, s] of t.entries)
+      i - s >= e && t.entries.delete(o);
+  }
+  #g(t, i) {
+    const e = t.entries.get(i), o = this.#e.entryMs;
+    return e === void 0 || o <= 0 ? 1 : L((performance.now() - e) / o);
+  }
+  /** Trailing points whose entrance is unsettled, oldest first; stops at the first settled one. */
+  #P(t) {
+    const i = t.store.getAll(), e = [];
+    for (let o = i.length - 1; o >= 1; o--) {
+      const s = this.#g(t, i[o].time);
+      if (s >= 1) break;
+      e.unshift({ time: i[o].time, progress: s });
+    }
+    return e;
+  }
+  get needsAnimation() {
+    if (this.#i.active || this.#o.active) return !0;
+    for (const t of this.#t)
+      if (t.alpha.animating || t.chase !== null || t.pinned !== null || t.entries.size > 0) return !0;
+    return !1;
+  }
+  getIntroFront() {
+    return this.#i.sweep();
+  }
+  cancelEntranceAnimations() {
+    this.#i.finish();
+    for (const t of this.#t)
+      t.entries.clear();
+  }
+  setAlpha(t, i) {
+    for (const e of this.#t)
+      e.alpha.setTarget(t, { duration: i });
+  }
+  /** `1` while any layer is visible or still fading — a binary gate; per-layer alpha is applied at draw time. */
+  getAlpha() {
+    return this.#t.some((t) => t.alpha.current > 0 || t.alpha.animating) ? 1 : 0;
+  }
+  setLayerAlpha(t, i, e) {
+    this.#t[t]?.alpha.setTarget(i, { duration: e });
+  }
+  getLayerAlpha(t) {
+    return this.#t[t]?.alpha.current ?? 1;
+  }
+  // --- Geometry -------------------------------------------------------------
+  /** Stored edges with the live chase applied: the last point, or the pinned chase on the point an append displaced. */
+  #d(t, i) {
+    const e = t.store.last();
+    if (e !== void 0 && i.time === e.time) return t.displayedLast ?? x(i);
+    const o = t.pinned;
+    return o !== null && o.time === i.time ? { low: o.chase.low.current, high: o.chase.high.current } : x(i);
+  }
+  /** The active intro / history value transform for one sample, or `null` when none applies. */
+  #R(t, i, e) {
+    const o = this.#o.active ? this.#n?.value : void 0, s = this.#s;
+    if (o !== void 0 && s !== null && e < s.to) {
+      const m = s.to - s.from, f = m > 0 ? L((s.to - e) / m) : 0;
+      return (u) => o({ layerIndex: i, time: e, value: u, position: f });
+    }
+    const n = this.#i.active ? this.#a?.value : void 0;
+    if (n === void 0) return null;
+    const a = t.timeScale.getRange(), r = a.to - a.from, c = r > 0 ? L((e - a.from) / r) : 0;
+    return (m) => n({ layerIndex: i, time: e, value: m, position: c });
+  }
+  /**
+   * Where a sample draws this frame, or `null` for a gap (non-finite, or an
+   * edge the Y scale can't place, stored or as drawn). Edges swap when an
+   * animation crosses them, so the polygon never twists.
+   */
+  #l(t, i, e) {
+    const { timeScale: o, yScale: s } = t;
+    if (b(e) || !s.isPlottable(e.low) || !s.isPlottable(e.high)) return null;
+    const n = this.#t[i], a = this.#d(n, e), r = this.#R(t, i, e.time), c = r === null ? a.low : r(a.low), m = r === null ? a.high : r(a.high);
+    if (!s.isPlottable(c) || !s.isPlottable(m)) return null;
+    const f = s.valueToBitmapYExact(c), u = s.valueToBitmapYExact(m);
+    return { x: o.timeToBitmapXExact(e.time), top: Math.min(f, u), bottom: Math.max(f, u) };
+  }
+  /**
+   * Rendered vertices of the layer's still-entering tail, keyed by time. Each
+   * link grows from the previous link's rendered spot, so a feed faster than
+   * `entryMs` keeps every head unfurling instead of snapping older ones.
+   */
+  #v(t, i) {
+    if (this.#e.entryAnimation !== "grow") return null;
+    const e = this.#t[i], o = this.#P(e);
+    if (o.length === 0) return null;
+    const s = e.store.getAll(), n = s.length - 1 - o.length;
+    if (n < 0) return null;
+    const a = this.#l(t, i, s[n]);
+    if (a === null) return null;
+    const r = /* @__PURE__ */ new Map();
+    let c = a;
+    for (let m = 0; m < o.length; m++) {
+      const f = s[n + 1 + m], u = this.#l(t, i, f);
+      if (u === null) return null;
+      const v = $(o[m].progress), y = {
+        x: P(c.x, u.x, v),
+        top: P(c.top, u.top, v),
+        bottom: P(c.bottom, u.bottom, v)
+      };
+      r.set(f.time, y), c = y;
+    }
+    return r;
+  }
+  // --- Rendering ------------------------------------------------------------
+  render(t) {
+    this.#f(performance.now());
+    const { context: i } = t.scope;
+    this.#n = null;
+    const e = this.#s;
+    if (this.#o.active && e !== null) {
+      const n = this.#e.historyReveal ?? tt;
+      n !== "none" && (this.#n = n(this.#C(t, e)));
+    }
+    const o = this.#n;
+    this.#y(t, o?.ghostAlpha ?? 0);
+    const s = this.#D(t, o, e);
+    this.#i.active ? this.#L(t) : (this.#a = null, this.#u(t)), s && i.restore();
+  }
+  #L(t) {
+    const i = (this.#e.introAnimation ?? this.#k())(this.#V(t));
+    this.#a = i, this.#y(t, i.ghostAlpha ?? 0);
+    const { context: e } = t.scope, { width: o, height: s } = t.scope.bitmapSize, n = i.clip, a = n !== void 0 && (n.fromX !== void 0 || n.toX !== void 0);
+    if (a) {
+      const r = n.fromX ?? 0, c = n.toX ?? o;
+      e.save(), e.beginPath(), e.rect(r, 0, Math.max(0, c - r), s), e.clip();
+    }
+    this.#u(t), a && e.restore();
+  }
+  #k() {
+    return this.#h === null && (this.#h = J()), this.#h;
+  }
+  /** Edges-only skeleton under the main pass, so a clip reveal never reads as an empty chart. */
+  #y(t, i) {
+    if (i <= 0) return;
+    const { context: e } = t.scope;
+    e.save(), e.globalAlpha *= i, this.#c = !0, this.#u(t), this.#c = !1, e.restore();
+  }
+  /** History clip, mapped from reveal space (`x = 0` at the data boundary) to bitmap space. */
+  #D(t, i, e) {
+    const o = i?.clip;
+    if (o === void 0 || e === null || o.fromX === void 0 && o.toX === void 0) return !1;
+    const { context: s } = t.scope, { width: n, height: a } = t.scope.bitmapSize, r = t.timeScale.timeToBitmapXExact(e.to), c = Math.abs(r - t.timeScale.timeToBitmapXExact(e.from)), m = Math.max(2, this.#e.stroke.width * t.scope.horizontalPixelRatio), f = o.fromX ?? 0, u = o.toX ?? c;
+    return s.save(), s.beginPath(), s.rect(r - u - m, 0, Math.max(0, u - f + m), a), s.rect(r, 0, Math.max(0, n - r), a), s.clip(), !0;
+  }
+  #u(t) {
+    for (let i = 0; i < this.#t.length; i++)
+      this.#N(t, i);
+  }
+  #N(t, i) {
+    const e = this.#t[i], o = e.alpha.current;
+    if (o <= 0) return;
+    const { scope: s, timeScale: n } = t, a = n.getRange();
+    let r = e.store.getVisibleData(a.from, a.to);
+    if (r.length > s.mediaSize.width * 2 && (r = Y(r, Math.round(s.mediaSize.width * 1.5))), r.length === 0) return;
+    const c = r[r.length - 1], m = this.#w(e, r), f = m ? this.#v(t, i) : null, u = this.#B(t, { layerIndex: i, data: r, grown: f });
+    if (u.length === 0) return;
+    const v = m ? this.#g(e, c.time) : 1, y = m && !b(c) && this.#e.entryAnimation === "fade" && v < 1 ? nt(u) : null, { context: h } = s;
+    h.save(), o < 1 && (h.globalAlpha *= o);
+    const p = this.#r(i), d = { ctx: t, runs: u, color: p, growing: f !== null };
+    if (y === null)
+      this.#m(d);
+    else {
+      const { width: g, height: w } = s.bitmapSize;
+      h.save(), h.beginPath(), h.rect(0, 0, y, w), h.clip(), this.#m(d), h.restore(), h.save(), h.beginPath(), h.rect(y, 0, Math.max(0, g - y), w), h.clip(), h.globalAlpha *= v, this.#m(d), h.restore();
+    }
+    h.restore();
+  }
+  /** Split the visible slice into runs of drawable vertices; a gap ends a run. */
+  /**
+   * Whether a visible slice ends at the live point. Panned into history, the
+   * slice's last point is an interior sample, and the live-tail entrance must not apply.
+   */
+  #w(t, i) {
+    const e = t.store.last(), o = i[i.length - 1];
+    return e !== void 0 && o !== void 0 && o.time === e.time;
+  }
+  #B(t, i) {
+    const { layerIndex: e, data: o, grown: s } = i, n = [];
+    let a = null;
+    for (const r of o) {
+      const c = s?.get(r.time) ?? this.#l(t, e, r);
+      if (c === null) {
+        a = null;
+        continue;
+      }
+      a === null && (a = [], n.push(a)), a.push(c);
+    }
+    return n;
+  }
+  #m(t) {
+    const { ctx: i, runs: e, color: o, growing: s } = t, { context: n, verticalPixelRatio: a } = i.scope, r = this.#e.curve, c = [], m = [];
+    for (let h = 0; h < e.length; h++) {
+      const p = e[h];
+      if (p.length < 2) {
+        m.push(p[0]);
+        continue;
+      }
+      const d = s && h === e.length - 1, g = p.map((M) => ({ x: M.x, y: M.top })), w = p.map((M) => ({ x: M.x, y: M.bottom })), k = {
+        upper: g,
+        lower: w,
+        upperSegs: B(g, r, d),
+        lowerSegs: B(w, r, d)
+      };
+      it(k), c.push(k);
+    }
+    if (!this.#c && c.length > 0) {
+      n.fillStyle = this.#E({ context: n, paths: c, color: o });
+      for (const h of c) {
+        n.beginPath(), n.moveTo(h.upper[0].x, h.upper[0].y), R(n, h.upperSegs);
+        const p = h.lower[h.lower.length - 1];
+        n.lineTo(p.x, p.y), Q(n, h.lower, h.lowerSegs), n.closePath(), n.fill();
+      }
+    }
+    const f = this.#e.stroke, u = f.color ?? A(o, E), v = Math.max(1, Math.round(f.width * a)), y = f.visible && f.width > 0;
+    if (y && c.length > 0) {
+      n.beginPath();
+      for (const h of c)
+        n.moveTo(h.upper[0].x, h.upper[0].y), R(n, h.upperSegs), n.moveTo(h.lower[0].x, h.lower[0].y), R(n, h.lowerSegs);
+      n.strokeStyle = u, n.lineWidth = v, n.lineJoin = "round", n.lineCap = "round", n.stroke();
+    }
+    if (m.length > 0) {
+      n.beginPath();
+      for (const h of m)
+        n.moveTo(h.x, h.top), n.lineTo(h.x, h.bottom);
+      n.strokeStyle = y ? u : A(o, E), n.lineWidth = v, n.lineCap = "round", n.stroke();
+    }
+  }
+  /** A gradient fill spans the layer's drawn extent this frame; a degenerate extent paints solid. */
+  #E(t) {
+    const { context: i, paths: e, color: o } = t, s = this.#e.fill;
+    if (typeof s == "string") return s;
+    const [n, a] = s ?? [
+      A(o, q),
+      A(o, K)
+    ];
+    let r = 1 / 0, c = -1 / 0;
+    for (const f of e) {
+      for (const u of f.upper)
+        u.y < r && (r = u.y);
+      for (const u of f.lower)
+        u.y > c && (c = u.y);
+    }
+    if (!(c > r + 0.5)) return n;
+    const m = i.createLinearGradient(0, r, 0, c);
+    return m.addColorStop(0, n), m.addColorStop(1, a), m;
+  }
+  // --- Intro frames ---------------------------------------------------------
+  #V(t) {
+    return this.#b(t, {
+      progress: this.#i.linear(),
+      range: t.timeScale.getRange(),
+      // Plot-area extent — the canvas bitmap also carries the axis strips.
+      width: t.timeScale.getMediaWidth() * t.scope.horizontalPixelRatio
+    });
+  }
+  #C(t, i) {
+    const { timeScale: e } = t;
+    return this.#b(t, {
+      progress: this.#o.linear(),
+      range: i,
+      width: Math.abs(e.timeToBitmapXExact(i.to) - e.timeToBitmapXExact(i.from))
+    });
+  }
+  /**
+   * The line intro contract, fed each band's center: `layerData` maps every
+   * sample to the midpoint of its edges on the Y axis (geometric on log), so
+   * `layerMean` is the center the default unfold opens the band out of.
+   */
+  #b(t, i) {
+    const { timeScale: e, yScale: o, scope: s } = t, { progress: n, range: a, width: r } = i, c = this.#t.length, m = new Array(c), f = new Array(c);
+    let u;
+    const v = (p) => {
+      const d = m[p];
+      if (d !== void 0) return d;
+      const g = (this.#t[p]?.store.getVisibleData(a.from, a.to) ?? []).map((w) => ({
+        time: w.time,
+        value: b(w) ? Number.NaN : o.lerpValue(w.low, w.high, 0.5)
+      }));
+      return m[p] = g, g;
+    }, y = (p) => {
+      const d = f[p];
+      if (d !== void 0) return d;
+      const g = j(v(p), o);
+      return f[p] = g, g;
+    }, h = () => {
+      if (u !== void 0) return u;
+      u = null;
+      for (let p = 0; p < c; p++) {
+        if (this.getLayerAlpha(p) <= 0 || !this.isLayerVisible(p)) continue;
+        const d = v(p).filter((g) => o.isPlottable(g.value));
+        if (!(d.length < 2)) {
+          u = d.map((g) => ({
+            x: e.timeToBitmapXExact(g.time),
+            y: o.valueToBitmapYExact(g.value),
+            time: g.time
+          }));
+          break;
+        }
+      }
+      return u;
+    };
+    return {
+      progress: n,
+      range: a,
+      width: r,
+      height: o.getMediaHeight() * s.verticalPixelRatio,
+      stacking: "off",
+      timeToX: (p) => e.timeToBitmapXExact(p),
+      xToTime: (p) => e.xToTime(p / s.horizontalPixelRatio),
+      valueToY: (p) => o.valueToBitmapYExact(p),
+      lerpValue: (p, d, g) => o.lerpValue(p, d, g),
+      layerCount: c,
+      layerData: v,
+      layerMean: y,
+      primaryPath: h
+    };
+  }
+  // --- Overlay --------------------------------------------------------------
+  /** Crosshair dots on both edges of every visible band at the hovered sample. */
+  drawOverlay(t) {
+    this.#f(performance.now());
+    const { crosshair: i, scope: e } = t;
+    if (i === null) return;
+    const { context: o, horizontalPixelRatio: s } = e, n = 3 * s, a = n + 3 * s;
+    for (let r = 0; r < this.#t.length; r++) {
+      const c = this.#t[r], m = c.alpha.current;
+      if (m <= 0) continue;
+      const f = c.store.findNearest(i.time, t.dataInterval);
+      if (f === null) continue;
+      const u = this.#X(t, r, f);
+      if (u === null) continue;
+      const v = this.#r(r);
+      o.save(), o.globalAlpha *= m, o.fillStyle = v;
+      for (const y of [u.top, u.bottom])
+        o.save(), o.globalAlpha *= 0.25, o.beginPath(), o.arc(u.x, y, a, 0, Math.PI * 2), o.fill(), o.restore(), o.beginPath(), o.arc(u.x, y, n, 0, Math.PI * 2), o.fill();
+      o.restore();
+    }
+  }
+  /** The hovered sample where the fill draws it: an entering tail point sits on its grown head. */
+  #X(t, i, e) {
+    const o = this.#t[i], s = t.timeScale.getRange(), n = o.store.getVisibleData(s.from, s.to);
+    return (this.#w(o, n) ? this.#v(t, i) : null)?.get(e.time) ?? this.#l(t, i, e);
+  }
+  // --- Data queries ---------------------------------------------------------
+  /** A sample as a query reports it: the drawn (live-chased) edges, `null` for a gap. */
+  #x(t, i) {
+    if (b(i)) return null;
+    const e = this.#d(t, i);
+    return { ...i, low: Math.min(e.low, e.high), high: Math.max(e.low, e.high) };
+  }
+  getDataAtTime(t, i) {
+    const e = this.#t[0], o = e.store.findNearest(t, i);
+    return o === null ? null : this.#x(e, o);
+  }
+  getLayerSnapshots(t, i) {
+    return this.#t.length <= 1 ? null : this.#M((e) => e.store.findNearest(t, i));
+  }
+  getLayerLastSnapshots() {
+    return this.#t.length <= 1 ? null : this.#M((t) => t.store.last() ?? null);
+  }
+  #M(t) {
+    const i = [];
+    for (let e = 0; e < this.#t.length; e++) {
+      const o = this.#t[e];
+      if (!o.store.isVisible()) continue;
+      const s = t(o), n = s === null ? null : this.#x(o, s);
+      n !== null && i.push({
+        layerIndex: e,
+        time: n.time,
+        value: (n.low + n.high) / 2,
+        color: this.#r(e),
+        low: n.low,
+        high: n.high
+      });
+    }
+    return i.length > 0 ? i : null;
+  }
+  getTotalLength() {
+    let t = 0;
+    for (const i of this.#t)
+      t += i.store.length;
+    return t;
+  }
+  getTimeBounds() {
+    let t = 1 / 0, i = -1 / 0;
+    for (const e of this.#t) {
+      const o = e.store.first(), s = e.store.last();
+      o === void 0 || s === void 0 || (o.time < t && (t = o.time), s.time > i && (i = s.time));
+    }
+    return t === 1 / 0 ? null : { first: t, last: i };
+  }
+  /** Last point of layer 0, like the line / bar renderers. */
+  getLastDataPoint() {
+    return this.#t[0].store.last() ?? null;
+  }
+  getSecondLastDataPoint() {
+    const t = this.#t[0].store.getAll();
+    return t.length < 2 ? null : t[t.length - 2];
+  }
+  sampleTimes(t) {
+    for (const i of this.#t) {
+      const e = i.store.getAll();
+      if (e.length !== 0)
+        return e.slice(0, t).map((o) => o.time);
+    }
+    return [];
+  }
+  getVisibleDataPoints(t, i) {
+    return this.#t[0].store.getVisibleData(t, i);
+  }
+  /** Union of every visible band's edges. A sample counts only when both edges are drawable. */
+  getValueRange(t, i, e) {
+    const o = e?.plottable;
+    let s = 1 / 0, n = -1 / 0;
+    for (const a of this.#t)
+      if (a.store.isVisible())
+        for (const r of a.store.getVisibleData(t, i))
+          b(r) || o && (!o(r.low) || !o(r.high)) || (r.low < s && (s = r.low), r.high > n && (n = r.high));
+    return s < 1 / 0 ? { min: s, max: n } : null;
+  }
+  // --- Lifecycle ------------------------------------------------------------
+  onDataChanged(t) {
+    for (const i of this.#t)
+      i.store.on("update", t);
+    return () => {
+      for (const i of this.#t)
+        i.store.off("update", t);
+    };
+  }
+  dispose() {
+    for (const t of this.#t)
+      t.store.removeAllListeners();
+  }
+}
+function X(l, t) {
+  return t === 1 ? [l.bands.upper] : l.seriesColors.slice(0, t);
+}
+function nt(l) {
+  const t = l[l.length - 1];
+  return t.length < 2 ? null : Math.round(t[t.length - 2].x);
+}
+const yt = {
+  type: "band",
+  create: ({ theme: l, layerCount: t }, i) => new st(t, { colors: X(l, t), ...i })
+};
+export {
+  st as BandRenderer,
+  yt as BandSeriesDef
+};

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

@@ -1,18 +1,18 @@
-import { easeOutBack as a } from "../animation/easing.js";
-function t() {
-  return () => ({
-    value: ({ value: e, progress: r }) => e * r,
+import { easeOutBack as s } from "../animation/easing.js";
+function n() {
+  return (r) => ({
+    value: ({ value: e, progress: a }) => r.lerpValue(r.baseline, e, a),
     element: (e) => ({ alpha: e.progress })
   });
 }
-const o = 0.3;
-function n() {
-  return () => ({
-    value: ({ value: e, progress: r }) => e * a(r),
-    element: (e) => ({ alpha: Math.min(1, e.progress / o) })
+const l = 0.3;
+function t() {
+  return (r) => ({
+    value: ({ value: e, progress: a }) => r.lerpValue(r.baseline, e, s(a)),
+    element: (e) => ({ alpha: Math.min(1, e.progress / l) })
   });
 }
 export {
-  t as growIntro,
-  n as springIntro
+  n as growIntro,
+  t as springIntro
 };