@wick-charts/vue 0.5.1 → 0.6.0

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

@@ -1,80 +1,172 @@
-import { DEFAULT_BAR_SMOOTH as N, DEFAULT_BAR_ENTRY as _ } from "../animation/config.js";
-import { BaseMultiLayerSeries as U } from "./base-multi-layer.js";
-import { resolveBarPainter as X } from "./painters/resolve.js";
-const I = 2, q = {
+import { DEFAULT_HISTORY_REVEAL as _, DEFAULT_BAR_INTRO as C, DEFAULT_BAR_SMOOTH as F, DEFAULT_BAR_ENTRY as N } from "../animation/config.js";
+import { growIntro as Q } from "./bar-intro.js";
+import { BaseMultiLayerSeries as $ } from "./base-multi-layer.js";
+import { resolveBarPainter as Z } from "./painters/resolve.js";
+import { fadeIntro as q } from "./wave-intro.js";
+const U = 2, G = {
   // Single fallback resolver; the definition's `create` swaps in `theme.bar.color`.
   colors: ["#26a69a"],
   barWidthRatio: 0.6,
   stacking: "off",
   anchor: "center",
-  cornerRadius: I,
-  entryMs: _,
-  smoothMs: N
+  cornerRadius: U,
+  entryMs: N,
+  smoothMs: F,
+  introMs: C,
+  historyRevealMs: _
 };
-function F(P) {
+function I(y) {
   return {
-    ...P,
-    entryMs: P.entryMs === !1 ? 0 : P.entryMs ?? _,
-    smoothMs: P.smoothMs === !1 ? 0 : P.smoothMs ?? N
+    ...y,
+    entryMs: y.entryMs === !1 ? 0 : y.entryMs ?? N,
+    smoothMs: y.smoothMs === !1 ? 0 : y.smoothMs ?? F,
+    introMs: y.introMs === !1 ? 0 : y.introMs ?? C,
+    historyRevealMs: y.historyRevealMs === !1 ? 0 : y.historyRevealMs ?? _
   };
 }
-const G = {
+const J = Q(), K = q(), tt = {
   top: { tl: !0, tr: !0, br: !1, bl: !1 },
   bottom: { tl: !1, tr: !1, br: !0, bl: !0 },
   none: { tl: !1, tr: !1, br: !1, bl: !1 }
 };
-class K extends U {
+class et extends $ {
   kind = "bar";
   /** Resolved drawing context for the in-flight render pass. Set at the top of
    *  {@link render}, read by {@link drawAnimatedBar}. */
+  #o = null;
+  /** Per-frame intro directives, resolved once per render while the wave
+   *  runs; `null` when no intro is in flight. */
   #e = null;
-  constructor(e, o) {
-    super(e), this.options = F({ ...q, ...o });
+  /** Visible range captured alongside {@link #introDirectives} — positions
+   *  the per-bar wave stagger. */
+  #i = null;
+  /** Per-frame history-reveal directives; `null` when no reveal is in flight. */
+  #t = null;
+  constructor(e, t) {
+    super(e), this.options = I({ ...G, ...t });
   }
   updateOptions(e) {
-    this.options = F({ ...this.options, ...e });
+    this.options = I({ ...this.options, ...e });
   }
   isEntryEnabled() {
     return (this.options.entryAnimation ?? "fade-grow") !== "none";
   }
-  applyTheme(e, o) {
-    const h = this.stores.length === 1, c = e.seriesColors[0] ?? "#26a69a", d = h ? [e.bar?.color ?? c] : e.seriesColors.slice(0, this.stores.length);
-    this.updateOptions({ colors: d });
+  /**
+   * Normalized x-position + eased wave progress for the intro's callbacks.
+   * `null` when no intro is in flight this frame.
+   */
+  #a(e) {
+    const t = this.#i;
+    if (t === null) return null;
+    const o = t.to - t.from, n = o > 0 ? (e - t.from) / o : 0, a = Math.min(1, Math.max(0, n));
+    return { position: a, progress: this.introWave.progressAt(a) };
+  }
+  /**
+   * Stagger position + eased wave progress for the history reveal's
+   * callbacks — position anchored at the data boundary (`0` there, `1` at
+   * the deepest prepended point). `null` for bars outside the prepended
+   * span or when no reveal is in flight this frame.
+   */
+  #r(e) {
+    const t = this.historyRange;
+    if (this.#t === null || t === null || e >= t.to) return null;
+    const o = t.to - t.from, n = o > 0 ? (t.to - e) / o : 0, a = Math.min(1, Math.max(0, n));
+    return { position: a, progress: this.historyWave.progressAt(a) };
+  }
+  /**
+   * Apply the intro's `value` directive to one rendered value. Scaling here
+   * (before geometry and stacking) grows the bar from the baseline on every
+   * render path — off / stacked / percent — without touching their geometry
+   * code. Projected (forecast) bars stay settled, like streaming entrances.
+   * A bar inside an in-flight history reveal is owned by the reveal's value
+   * directive instead.
+   */
+  introValue(e) {
+    if (this.isProjectedTime(e.time)) return e.value;
+    const t = this.#t?.value;
+    if (t !== void 0) {
+      const a = this.#r(e.time);
+      if (a !== null) return t({ ...e, ...a });
+    }
+    const o = this.#e?.value;
+    if (o === void 0) return e.value;
+    const n = this.#a(e.time);
+    return n === null ? e.value : o({ ...e, ...n });
+  }
+  applyTheme(e, t) {
+    const o = this.stores.length === 1, n = e.seriesColors[0] ?? "#26a69a", a = o ? [e.bar?.color ?? n] : e.seriesColors.slice(0, this.stores.length);
+    this.updateOptions({ colors: a });
   }
   /** True when `time` is at/after the configured `projectedFrom` forecast cut. */
   isProjectedTime(e) {
-    const o = this.options.projectedFrom;
-    return o !== void 0 && e >= o;
+    const t = this.options.projectedFrom;
+    return t !== void 0 && e >= t;
   }
   /**
    * Shape of the per-bar entrance transform. Centralized so the entrance style
    * is a single switch; new styles like 'slide' drop in here without touching
    * each render path.
    */
-  applyBarTransform(e, o) {
-    const { baselineY: h, topY: c, barHeight: d, x: m, barWidth: M } = e, p = this.options.entryAnimation ?? "fade-grow";
-    if (o >= 1 || p === "none")
-      return { topY: c, barHeight: d, x: m, barWidth: M, alpha: 1 };
-    let f = c, w = d, y = m, k = 1;
-    if ((p === "fade" || p === "fade-grow") && (k = o), (p === "grow" || p === "fade-grow") && !e.growBaked) {
-      const l = d * o;
-      c < h ? f = h - l : f = h, w = Math.max(1, l);
+  applyBarTransform(e, t) {
+    const { baselineY: o, topY: n, barHeight: a, x: m, barWidth: v } = e, b = this.options.entryAnimation ?? "fade-grow";
+    if (t >= 1 || b === "none")
+      return { topY: n, barHeight: a, x: m, barWidth: v, alpha: 1 };
+    let l = n, u = a, x = m, R = 1;
+    if ((b === "fade" || b === "fade-grow") && (R = t), (b === "grow" || b === "fade-grow") && !e.growBaked) {
+      const r = a * t;
+      n < o ? l = o - r : l = o, u = Math.max(1, r);
     }
-    return p === "slide" && (y = m + (1 - o) * M, k = o), { topY: f, barHeight: w, x: y, barWidth: M, alpha: k };
+    return b === "slide" && (x = m + (1 - t) * v, R = t), { topY: l, barHeight: u, x, barWidth: v, alpha: R };
   }
   render(e) {
     this.tickAnimations(performance.now());
-    const { scope: o } = e;
-    switch (this.#e = {
-      painter: X(this.options.barPainter),
+    const { scope: t, timeScale: o, yScale: n } = e;
+    if (this.#o = {
+      painter: Z(this.options.barPainter),
       env: {
-        ctx: o.context,
+        ctx: t.context,
         theme: e.theme,
-        horizontalPixelRatio: o.horizontalPixelRatio,
-        verticalPixelRatio: o.verticalPixelRatio
+        horizontalPixelRatio: t.horizontalPixelRatio,
+        verticalPixelRatio: t.verticalPixelRatio
       },
-      radius: (this.options.cornerRadius ?? I) * o.horizontalPixelRatio
-    }, this.options.stacking) {
+      radius: (this.options.cornerRadius ?? U) * t.horizontalPixelRatio
+    }, this.#e = null, this.#i = null, this.introWave.active) {
+      const l = this.options.introAnimation ?? J, u = o.getRange();
+      this.#i = u, this.#e = l({
+        progress: this.introWave.linear(),
+        // Plot-area extent, not the canvas bitmap — the canvas also carries
+        // the axis strips, so a width-based front (wipeIntro) would overshoot
+        // the data area.
+        width: o.getMediaWidth() * t.horizontalPixelRatio,
+        height: n.getMediaHeight() * t.verticalPixelRatio,
+        range: u,
+        timeToX: (x) => o.timeToBitmapX(x)
+      });
+    }
+    this.#t = null;
+    const a = this.historyRange;
+    if (this.historyWave.active && a !== null) {
+      const l = this.options.historyReveal ?? K;
+      l !== "none" && (this.#t = l({
+        progress: this.historyWave.linear(),
+        width: Math.abs(o.timeToBitmapX(a.to) - o.timeToBitmapX(a.from)),
+        height: n.getMediaHeight() * t.verticalPixelRatio,
+        range: a,
+        timeToX: (u) => o.timeToBitmapX(u)
+      }));
+    }
+    const m = this.#e?.clip;
+    if (m !== void 0) {
+      const l = m.fromX ?? 0, u = m.toX ?? t.bitmapSize.width;
+      t.context.save(), t.context.beginPath(), t.context.rect(l, 0, Math.max(0, u - l), t.bitmapSize.height), t.context.clip();
+    }
+    const v = this.#t?.clip;
+    let b = !1;
+    if (v !== void 0 && a !== null) {
+      const l = o.timeToBitmapX(a.to), u = Math.abs(l - o.timeToBitmapX(a.from)), x = o.barWidthBitmap(e.dataInterval), R = v.fromX ?? 0, r = v.toX ?? u;
+      t.context.save(), t.context.beginPath(), t.context.rect(l - r - x, 0, Math.max(0, r - R + x), t.bitmapSize.height), t.context.rect(l, 0, Math.max(0, t.bitmapSize.width - l), t.bitmapSize.height), t.context.clip(), b = !0;
+    }
+    switch (this.options.stacking) {
       case "normal":
         this.renderStacked(e, !1);
         break;
@@ -85,216 +177,234 @@ class K extends U {
         this.renderOff(e);
         break;
     }
+    b && t.context.restore(), m !== void 0 && t.context.restore();
   }
   /** Stacking off — each layer drawn independently from zero, overlapping */
   renderOff(e) {
-    const { scope: o, timeScale: h, yScale: c, dataInterval: d } = e, { context: m, horizontalPixelRatio: M } = o, p = h.getRange();
-    let f = 0;
-    for (const v of this.stores) {
-      if (!v.isVisible()) continue;
-      const u = v.getVisibleData(p.from, p.to).length;
-      if (u > f && (f = u), f > 2) break;
+    const { scope: t, timeScale: o, yScale: n, dataInterval: a } = e, { context: m, horizontalPixelRatio: v } = t, b = o.getRange();
+    let l = 0;
+    for (const M of this.stores) {
+      if (!M.isVisible()) continue;
+      const p = M.getVisibleData(b.from, b.to).length;
+      if (p > l && (l = p), l > 2) break;
     }
-    const w = h.barWidthBitmap(d), y = Math.round(30 * M), k = f <= 2 ? Math.min(y, w) : w, l = Math.max(1, Math.round(k * this.options.barWidthRatio) - 2), T = Math.floor(l / 2), E = this.options.anchor === "right" ? l : T, H = c.getRange().min < 0, g = H ? c.valueToBitmapY(0) : o.bitmapSize.height;
+    const u = o.barWidthBitmap(a), x = Math.round(30 * v), R = l <= 2 ? Math.min(x, u) : u, r = Math.max(1, Math.round(R * this.options.barWidthRatio) - 2), W = Math.floor(r / 2), H = this.options.anchor === "right" ? r : W, T = n.getRange().min < 0, f = T ? n.valueToBitmapY(0) : t.bitmapSize.height;
     if (this.stores.length === 1) {
       if (!this.stores[0].isVisible()) return;
-      const v = this.stores[0].getVisibleData(p.from, p.to);
-      for (const u of v) {
-        if (!Number.isFinite(u.value)) continue;
-        const a = this.effectiveValue(e, 0, u.time, u.value), Y = this.entranceProgress(e, 0, u.time), x = this.isProjectedTime(u.time), t = h.timeToBitmapX(u.time), i = this.resolveLayerColor(0, a);
-        if (a >= 0) {
-          const r = c.valueToBitmapY(a), s = Math.max(1, g - r);
+      const M = this.stores[0].getVisibleData(b.from, b.to);
+      for (const p of M) {
+        if (!Number.isFinite(p.value)) continue;
+        const d = this.effectiveValue(e, 0, p.time, p.value), P = this.introValue({ layerIndex: 0, time: p.time, value: d }), B = this.entranceProgress(0, p.time), i = this.isProjectedTime(p.time), h = o.timeToBitmapX(p.time), s = this.resolveLayerColor(0, d);
+        if (P >= 0) {
+          const g = n.valueToBitmapY(P), c = Math.max(1, f - g);
           this.drawAnimatedBar({
             context: m,
-            progress: Y,
-            baselineY: g,
-            topY: r,
-            barHeight: s,
-            x: t - E,
-            barWidth: l,
-            color: i,
+            time: p.time,
+            progress: B,
+            baselineY: f,
+            topY: g,
+            barHeight: c,
+            x: h - H,
+            barWidth: r,
+            color: s,
             roundEdge: "top",
-            isProjected: x
+            isProjected: i
           });
         } else {
-          const r = c.valueToBitmapY(a), s = Math.max(1, r - g);
+          const g = n.valueToBitmapY(P), c = Math.max(1, g - f);
           this.drawAnimatedBar({
             context: m,
-            progress: Y,
-            baselineY: g,
-            topY: g,
-            barHeight: s,
-            x: t - E,
-            barWidth: l,
-            color: i,
+            time: p.time,
+            progress: B,
+            baselineY: f,
+            topY: f,
+            barHeight: c,
+            x: h - H,
+            barWidth: r,
+            color: s,
             roundEdge: "bottom",
-            isProjected: x
+            isProjected: i
           });
         }
       }
     } else {
-      const v = this.stores.map(
-        (a, Y) => this.getLayerAlpha(Y) > 0 ? a.getVisibleData(p.from, p.to) : []
-      ), u = /* @__PURE__ */ new Map();
-      for (let a = 0; a < v.length; a++) {
-        const Y = this.getLayerAlpha(a);
-        for (const x of v[a]) {
-          if (!Number.isFinite(x.value)) continue;
-          let t = u.get(x.time);
-          t || (t = [], u.set(x.time, t)), t.push({ layer: a, value: this.effectiveValue(e, a, x.time, x.value) * Y });
+      const M = this.stores.map(
+        (d, P) => this.getLayerAlpha(P) > 0 ? d.getVisibleData(b.from, b.to) : []
+      ), p = /* @__PURE__ */ new Map();
+      for (let d = 0; d < M.length; d++) {
+        const P = this.getLayerAlpha(d);
+        for (const B of M[d]) {
+          if (!Number.isFinite(B.value)) continue;
+          let i = p.get(B.time);
+          i || (i = [], p.set(B.time, i));
+          const h = this.effectiveValue(e, d, B.time, B.value) * P;
+          i.push({
+            layer: d,
+            value: this.introValue({ layerIndex: d, time: B.time, value: h }),
+            // Color resolves from the settled data value — same contract as
+            // the single-layer path — so a threshold value-fn doesn't flicker
+            // hues while the intro sweeps the drawn value from 0 to final.
+            colorValue: B.value
+          });
         }
       }
-      for (const [a, Y] of u) {
-        Y.sort(
-          (i, r) => Math.abs(r.value) - Math.abs(i.value)
+      for (const [d, P] of p) {
+        P.sort(
+          (h, s) => Math.abs(s.value) - Math.abs(h.value)
         );
-        const x = h.timeToBitmapX(a), t = this.isProjectedTime(a);
-        for (let i = 0; i < Y.length; i++) {
-          const { layer: r, value: s } = Y[i], n = this.resolveLayerColor(r, s), W = this.entranceProgress(e, r, a);
-          if (s >= 0) {
-            const R = c.valueToBitmapY(s), j = Math.max(1, g - R);
+        const B = o.timeToBitmapX(d), i = this.isProjectedTime(d);
+        for (let h = 0; h < P.length; h++) {
+          const { layer: s, value: g, colorValue: c } = P[h], S = this.resolveLayerColor(s, c), E = this.entranceProgress(s, d);
+          if (g >= 0) {
+            const k = n.valueToBitmapY(g), V = Math.max(1, f - k);
             this.drawAnimatedBar({
               context: m,
-              progress: W,
-              baselineY: g,
-              topY: R,
-              barHeight: j,
-              x: x - E,
-              barWidth: l,
-              color: n,
+              time: d,
+              progress: E,
+              baselineY: f,
+              topY: k,
+              barHeight: V,
+              x: B - H,
+              barWidth: r,
+              color: S,
               roundEdge: "top",
-              isProjected: t
+              isProjected: i
             });
           } else {
-            const R = c.valueToBitmapY(s), j = Math.max(1, R - g);
+            const k = n.valueToBitmapY(g), V = Math.max(1, k - f);
             this.drawAnimatedBar({
               context: m,
-              progress: W,
-              baselineY: g,
-              topY: g,
-              barHeight: j,
-              x: x - E,
-              barWidth: l,
-              color: n,
+              time: d,
+              progress: E,
+              baselineY: f,
+              topY: f,
+              barHeight: V,
+              x: B - H,
+              barWidth: r,
+              color: S,
               roundEdge: "bottom",
-              isProjected: t
+              isProjected: i
             });
           }
         }
       }
     }
-    if (H) {
+    if (T) {
       m.strokeStyle = e.theme.grid.color, m.lineWidth = 1;
-      const v = Math.round(g) + 0.5;
-      m.beginPath(), m.moveTo(0, v), m.lineTo(o.bitmapSize.width, v), m.stroke();
+      const M = Math.round(f) + 0.5;
+      m.beginPath(), m.moveTo(0, M), m.lineTo(t.bitmapSize.width, M), m.stroke();
     }
   }
   /** Stacked (normal or percent) rendering */
-  renderStacked(e, o) {
-    const { scope: h, timeScale: c, yScale: d, dataInterval: m } = e, { context: M, horizontalPixelRatio: p } = h, f = c.getRange();
-    let w = 0;
-    for (const t of this.stores) {
-      if (!t.isVisible()) continue;
-      const i = t.getVisibleData(f.from, f.to).length;
-      if (i > w && (w = i), w > 2) break;
+  renderStacked(e, t) {
+    const { scope: o, timeScale: n, yScale: a, dataInterval: m } = e, { context: v, horizontalPixelRatio: b } = o, l = n.getRange();
+    let u = 0;
+    for (const i of this.stores) {
+      if (!i.isVisible()) continue;
+      const h = i.getVisibleData(l.from, l.to).length;
+      if (h > u && (u = h), u > 2) break;
     }
-    const y = c.barWidthBitmap(m), k = Math.round(30 * p), l = w <= 2 ? Math.min(k, y) : y, T = Math.max(1, Math.round(l * this.options.barWidthRatio) - 2), E = Math.floor(T / 2), H = this.options.anchor === "right" ? T : E, g = this.stores.map(
-      (t, i) => this.getLayerAlpha(i) > 0 ? t.getVisibleData(f.from, f.to) : []
+    const x = n.barWidthBitmap(m), R = Math.round(30 * b), r = u <= 2 ? Math.min(R, x) : x, W = Math.max(1, Math.round(r * this.options.barWidthRatio) - 2), H = Math.floor(W / 2), T = this.options.anchor === "right" ? W : H, f = this.stores.map(
+      (i, h) => this.getLayerAlpha(h) > 0 ? i.getVisibleData(l.from, l.to) : []
     );
-    if (g.every((t) => t.length === 0)) return;
-    const v = this.options.entryAnimation ?? "fade-grow", u = v === "grow" || v === "fade-grow", a = /* @__PURE__ */ new Map();
-    for (let t = 0; t < g.length; t++) {
-      const i = this.getLayerAlpha(t);
-      for (const r of g[t]) {
-        let s = a.get(r.time);
-        s || (s = new Array(g.length).fill(0), a.set(r.time, s));
-        const n = Number.isFinite(r.value) ? r.value : 0;
-        let W = this.effectiveValue(e, t, r.time, n) * i;
-        u && !this.isProjectedTime(r.time) && (W *= this.entranceProgress(e, t, r.time)), s[t] = W;
+    if (f.every((i) => i.length === 0)) return;
+    const M = this.options.entryAnimation ?? "fade-grow", p = M === "grow" || M === "fade-grow", d = /* @__PURE__ */ new Map();
+    for (let i = 0; i < f.length; i++) {
+      const h = this.getLayerAlpha(i);
+      for (const s of f[i]) {
+        let g = d.get(s.time);
+        g || (g = new Array(f.length).fill(0), d.set(s.time, g));
+        const c = Number.isFinite(s.value) ? s.value : 0;
+        let S = this.effectiveValue(e, i, s.time, c) * h;
+        p && !this.isProjectedTime(s.time) && (S *= this.entranceProgress(i, s.time)), g[i] = this.introValue({ layerIndex: i, time: s.time, value: S });
       }
     }
-    const Y = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map();
-    for (const [t, i] of a) {
-      let r = -1, s = -1;
-      for (let n = 0; n < i.length; n++)
-        i[n] > 0 && (r = n), i[n] < 0 && (s = n);
-      r >= 0 && Y.set(t, r), s >= 0 && x.set(t, s);
+    const P = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
+    for (const [i, h] of d) {
+      let s = -1, g = -1;
+      for (let c = 0; c < h.length; c++)
+        h[c] > 0 && (s = c), h[c] < 0 && (g = c);
+      s >= 0 && P.set(i, s), g >= 0 && B.set(i, g);
     }
-    for (let t = 0; t < g.length; t++) {
-      const i = this.resolveLayerColor(t, this.stores[t].last()?.value ?? 0);
-      for (const [r, s] of a) {
-        const n = s[t];
-        if (n === 0) continue;
-        const W = c.timeToBitmapX(r);
-        let R = 0, j = 0;
-        for (let b = 0; b < t; b++) {
-          const B = s[b];
-          B > 0 ? R += B : j += B;
+    for (let i = 0; i < f.length; i++) {
+      const h = this.resolveLayerColor(i, this.stores[i].last()?.value ?? 0);
+      for (const [s, g] of d) {
+        const c = g[i];
+        if (c === 0) continue;
+        const S = n.timeToBitmapX(s);
+        let E = 0, k = 0;
+        for (let Y = 0; Y < i; Y++) {
+          const w = g[Y];
+          w > 0 ? E += w : k += w;
         }
-        const L = this.entranceProgress(e, t, r), V = this.isProjectedTime(r), D = n > 0 ? Y.get(r) === t ? "top" : "none" : x.get(r) === t ? "bottom" : "none";
-        if (o) {
-          let b = 0, B = 0;
-          for (const A of s)
-            A > 0 ? b += A : B += A;
-          if (n > 0 && b > 0) {
-            const A = R / b * 100, z = (R + n) / b * 100, S = d.valueToBitmapY(z), C = d.valueToBitmapY(A), O = Math.max(1, C - S);
+        const V = this.entranceProgress(i, s), X = this.isProjectedTime(s), z = c > 0 ? P.get(s) === i ? "top" : "none" : B.get(s) === i ? "bottom" : "none";
+        if (t) {
+          let Y = 0, w = 0;
+          for (const A of g)
+            A > 0 ? Y += A : w += A;
+          if (c > 0 && Y > 0) {
+            const A = E / Y * 100, D = (E + c) / Y * 100, j = a.valueToBitmapY(D), L = a.valueToBitmapY(A), O = Math.max(1, L - j);
             this.drawAnimatedBar({
-              context: M,
-              progress: L,
-              baselineY: C,
-              topY: S,
+              context: v,
+              time: s,
+              progress: V,
+              baselineY: L,
+              topY: j,
               barHeight: O,
-              x: W - H,
-              barWidth: T,
-              color: i,
-              roundEdge: D,
-              isProjected: V,
+              x: S - T,
+              barWidth: W,
+              color: h,
+              roundEdge: z,
+              isProjected: X,
               growBaked: !0
             });
-          } else if (n < 0 && B < 0) {
-            const A = j / B * -100, z = (j + n) / B * -100, S = d.valueToBitmapY(A), C = d.valueToBitmapY(z), O = Math.max(1, C - S);
+          } else if (c < 0 && w < 0) {
+            const A = k / w * -100, D = (k + c) / w * -100, j = a.valueToBitmapY(A), L = a.valueToBitmapY(D), O = Math.max(1, L - j);
             this.drawAnimatedBar({
-              context: M,
-              progress: L,
-              baselineY: S,
-              topY: S,
+              context: v,
+              time: s,
+              progress: V,
+              baselineY: j,
+              topY: j,
               barHeight: O,
-              x: W - H,
-              barWidth: T,
-              color: i,
-              roundEdge: D,
-              isProjected: V,
+              x: S - T,
+              barWidth: W,
+              color: h,
+              roundEdge: z,
+              isProjected: X,
               growBaked: !0
             });
           }
-        } else if (n > 0) {
-          const b = d.valueToBitmapY(R + n), B = d.valueToBitmapY(R), A = Math.max(1, B - b);
+        } else if (c > 0) {
+          const Y = a.valueToBitmapY(E + c), w = a.valueToBitmapY(E), A = Math.max(1, w - Y);
           this.drawAnimatedBar({
-            context: M,
-            progress: L,
-            baselineY: B,
-            topY: b,
+            context: v,
+            time: s,
+            progress: V,
+            baselineY: w,
+            topY: Y,
             barHeight: A,
-            x: W - H,
-            barWidth: T,
-            color: i,
-            roundEdge: D,
-            isProjected: V,
+            x: S - T,
+            barWidth: W,
+            color: h,
+            roundEdge: z,
+            isProjected: X,
             growBaked: !0
           });
         } else {
-          const b = d.valueToBitmapY(j), B = d.valueToBitmapY(j + n), A = Math.max(1, B - b);
+          const Y = a.valueToBitmapY(k), w = a.valueToBitmapY(k + c), A = Math.max(1, w - Y);
           this.drawAnimatedBar({
-            context: M,
-            progress: L,
-            baselineY: b,
-            topY: b,
+            context: v,
+            time: s,
+            progress: V,
+            baselineY: Y,
+            topY: Y,
             barHeight: A,
-            x: W - H,
-            barWidth: T,
-            color: i,
-            roundEdge: D,
-            isProjected: V,
+            x: S - T,
+            barWidth: W,
+            color: h,
+            roundEdge: z,
+            isProjected: X,
             growBaked: !0
           });
         }
@@ -308,34 +418,56 @@ class K extends U {
    * painter's translucent fill rather than a `globalAlpha` fade.
    */
   drawAnimatedBar(e) {
-    const o = this.#e;
-    if (o === null) return;
-    const { context: h, baselineY: c, topY: d, barHeight: m, x: M, barWidth: p, color: f, roundEdge: w } = e, y = e.isProjected ? 1 : e.progress, k = this.options.entryAnimation ?? "fade-grow", l = y >= 1 || k === "none" ? { x: M, topY: d, barWidth: p, barHeight: m, alpha: 1 } : this.applyBarTransform(e, y), T = {
-      geom: { x: l.x, y: l.topY, width: l.barWidth, height: l.barHeight, baselineY: c },
-      color: f,
-      corners: G[w],
+    const t = this.#o;
+    if (t === null) return;
+    const { context: o, baselineY: n, topY: a, barHeight: m, x: v, barWidth: b, color: l, roundEdge: u } = e, x = e.isProjected ? 1 : e.progress, R = this.options.entryAnimation ?? "fade-grow";
+    let r = x >= 1 || R === "none" ? { x: v, topY: a, barWidth: b, barHeight: m, alpha: 1 } : this.applyBarTransform(e, x);
+    if (!e.isProjected) {
+      const H = this.#t?.element, T = H !== void 0 ? this.#r(e.time) : null, f = T !== null ? H : this.#e?.element, M = T ?? (f !== void 0 ? this.#a(e.time) : null);
+      if (f !== void 0 && M !== null) {
+        const p = f({
+          ...M,
+          time: e.time,
+          x: r.x,
+          topY: r.topY,
+          barHeight: r.barHeight,
+          baselineY: n,
+          barWidth: r.barWidth
+        });
+        r = {
+          ...r,
+          x: r.x + (p.offsetX ?? 0),
+          topY: r.topY + (p.offsetY ?? 0),
+          alpha: r.alpha * (p.alpha ?? 1)
+        };
+      }
+    }
+    const W = {
+      geom: { x: r.x, y: r.topY, width: r.barWidth, height: r.barHeight, baselineY: n },
+      color: l,
+      corners: tt[u],
       // Clamp to this bar's geometry so `radius` honors its pre-clamped contract
       // for custom painters; `fillRoundedRect` re-clamps to the same bound, so
       // the built-in output is unchanged.
-      radius: Math.min(o.radius, l.barWidth / 2, l.barHeight / 2),
-      progress: y,
+      radius: Math.min(t.radius, r.barWidth / 2, r.barHeight / 2),
+      progress: x,
       isProjected: e.isProjected
     };
-    if (l.alpha < 1) {
-      h.save(), h.globalAlpha = l.alpha, o.painter(o.env, T), h.restore();
+    if (r.alpha < 1) {
+      o.save(), o.globalAlpha = r.alpha, t.painter(t.env, W), o.restore();
       return;
     }
-    o.painter(o.env, T);
+    t.painter(t.env, W);
   }
 }
-const Z = {
+const nt = {
   type: "bar",
-  create: ({ theme: P, layerCount: e }, o) => {
-    const h = e === 1 ? [P.bar?.color ?? P.seriesColors[0] ?? "#26a69a"] : P.seriesColors.slice(0, e);
-    return new K(e, { colors: h, ...o });
+  create: ({ theme: y, layerCount: e }, t) => {
+    const o = e === 1 ? [y.bar?.color ?? y.seriesColors[0] ?? "#26a69a"] : y.seriesColors.slice(0, e);
+    return new et(e, { colors: o, ...t });
   }
 };
 export {
-  K as BarRenderer,
-  Z as BarSeriesDef
+  et as BarRenderer,
+  nt as BarSeriesDef
 };