@wick-charts/vue 0.4.1 → 0.5.0

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

@@ -0,0 +1,341 @@
+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 = {
+  // 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
+};
+function F(P) {
+  return {
+    ...P,
+    entryMs: P.entryMs === !1 ? 0 : P.entryMs ?? _,
+    smoothMs: P.smoothMs === !1 ? 0 : P.smoothMs ?? N
+  };
+}
+const G = {
+  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 {
+  kind = "bar";
+  /** Resolved drawing context for the in-flight render pass. Set at the top of
+   *  {@link render}, read by {@link drawAnimatedBar}. */
+  #e = null;
+  constructor(e, o) {
+    super(e), this.options = F({ ...q, ...o });
+  }
+  updateOptions(e) {
+    this.options = F({ ...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 });
+  }
+  /** True when `time` is at/after the configured `projectedFrom` forecast cut. */
+  isProjectedTime(e) {
+    const o = this.options.projectedFrom;
+    return o !== void 0 && e >= o;
+  }
+  /**
+   * 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);
+    }
+    return p === "slide" && (y = m + (1 - o) * M, k = o), { topY: f, barHeight: w, x: y, barWidth: M, alpha: k };
+  }
+  render(e) {
+    this.tickAnimations(performance.now());
+    const { scope: o } = e;
+    switch (this.#e = {
+      painter: X(this.options.barPainter),
+      env: {
+        ctx: o.context,
+        theme: e.theme,
+        horizontalPixelRatio: o.horizontalPixelRatio,
+        verticalPixelRatio: o.verticalPixelRatio
+      },
+      radius: (this.options.cornerRadius ?? I) * o.horizontalPixelRatio
+    }, this.options.stacking) {
+      case "normal":
+        this.renderStacked(e, !1);
+        break;
+      case "percent":
+        this.renderStacked(e, !0);
+        break;
+      default:
+        this.renderOff(e);
+        break;
+    }
+  }
+  /** 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 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;
+    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);
+          this.drawAnimatedBar({
+            context: m,
+            progress: Y,
+            baselineY: g,
+            topY: r,
+            barHeight: s,
+            x: t - E,
+            barWidth: l,
+            color: i,
+            roundEdge: "top",
+            isProjected: x
+          });
+        } else {
+          const r = c.valueToBitmapY(a), s = Math.max(1, r - g);
+          this.drawAnimatedBar({
+            context: m,
+            progress: Y,
+            baselineY: g,
+            topY: g,
+            barHeight: s,
+            x: t - E,
+            barWidth: l,
+            color: i,
+            roundEdge: "bottom",
+            isProjected: x
+          });
+        }
+      }
+    } 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 });
+        }
+      }
+      for (const [a, Y] of u) {
+        Y.sort(
+          (i, r) => Math.abs(r.value) - Math.abs(i.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);
+            this.drawAnimatedBar({
+              context: m,
+              progress: W,
+              baselineY: g,
+              topY: R,
+              barHeight: j,
+              x: x - E,
+              barWidth: l,
+              color: n,
+              roundEdge: "top",
+              isProjected: t
+            });
+          } else {
+            const R = c.valueToBitmapY(s), j = Math.max(1, R - g);
+            this.drawAnimatedBar({
+              context: m,
+              progress: W,
+              baselineY: g,
+              topY: g,
+              barHeight: j,
+              x: x - E,
+              barWidth: l,
+              color: n,
+              roundEdge: "bottom",
+              isProjected: t
+            });
+          }
+        }
+      }
+    }
+    if (H) {
+      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();
+    }
+  }
+  /** 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;
+    }
+    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) : []
+    );
+    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;
+      }
+    }
+    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);
+    }
+    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;
+        }
+        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);
+            this.drawAnimatedBar({
+              context: M,
+              progress: L,
+              baselineY: C,
+              topY: S,
+              barHeight: O,
+              x: W - H,
+              barWidth: T,
+              color: i,
+              roundEdge: D,
+              isProjected: V,
+              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);
+            this.drawAnimatedBar({
+              context: M,
+              progress: L,
+              baselineY: S,
+              topY: S,
+              barHeight: O,
+              x: W - H,
+              barWidth: T,
+              color: i,
+              roundEdge: D,
+              isProjected: V,
+              growBaked: !0
+            });
+          }
+        } else if (n > 0) {
+          const b = d.valueToBitmapY(R + n), B = d.valueToBitmapY(R), A = Math.max(1, B - b);
+          this.drawAnimatedBar({
+            context: M,
+            progress: L,
+            baselineY: B,
+            topY: b,
+            barHeight: A,
+            x: W - H,
+            barWidth: T,
+            color: i,
+            roundEdge: D,
+            isProjected: V,
+            growBaked: !0
+          });
+        } else {
+          const b = d.valueToBitmapY(j), B = d.valueToBitmapY(j + n), A = Math.max(1, B - b);
+          this.drawAnimatedBar({
+            context: M,
+            progress: L,
+            baselineY: b,
+            topY: b,
+            barHeight: A,
+            x: W - H,
+            barWidth: T,
+            color: i,
+            roundEdge: D,
+            isProjected: V,
+            growBaked: !0
+          });
+        }
+      }
+    }
+  }
+  /**
+   * Paint one bar through the resolved painter, applying any entrance transform
+   * and per-bar alpha first. The painter owns the fill (and the rounded-corner
+   * geometry); a projected bar is forced settled so its only alpha source is the
+   * 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],
+      // 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,
+      isProjected: e.isProjected
+    };
+    if (l.alpha < 1) {
+      h.save(), h.globalAlpha = l.alpha, o.painter(o.env, T), h.restore();
+      return;
+    }
+    o.painter(o.env, T);
+  }
+}
+const Z = {
+  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 });
+  }
+};
+export {
+  K as BarRenderer,
+  Z as BarSeriesDef
+};