@wick-charts/vue 0.4.2 → 0.5.0

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

@@ -0,0 +1,481 @@
+import { Animator as G } from "../animation/animator.js";
+import { DEFAULT_CANDLESTICK_SMOOTH as U, DEFAULT_CANDLESTICK_ENTRY as X } from "../animation/config.js";
+import { easeOutCubic as j } from "../animation/easing.js";
+import { ScalarSpring as P } from "../animation/scalar-spring.js";
+import { decimateOHLCData as q } from "../data/decimation.js";
+import { TimeSeriesStore as J } from "../data/store.js";
+import { resolveCandlestickBodyColor as E } from "../theme/resolve.js";
+import { hexToRgba as $ } from "../utils/color.js";
+import { clamp as Q, lerp as V } from "../utils/math.js";
+import { isPoisonedNumber as N, reportPoisonedData as Z } from "../utils/poisoned-data-reporter.js";
+import { normalizeOHLCArray as tt, normalizeTime as F } from "../utils/time.js";
+import { fillRoundedRect as H } from "./painters/canvas-path.js";
+import { resolveCandlePainter as et } from "./painters/resolve.js";
+const it = 0.15, ot = 5e-3;
+class st {
+  #t;
+  #e;
+  #o;
+  #n;
+  #i;
+  #s;
+  // Sticky once any seen candle carries volume — mirrors the old lerp, which
+  // only emitted `volume` when a side had it, so a volume-less candle stays
+  // volume-less and the histogram keeps skipping it.
+  #r;
+  constructor(t) {
+    this.#t = new P(t.open), this.#e = new P(t.high), this.#o = new P(t.low), this.#n = new P(t.close), this.#i = new P(t.volume ?? 0), this.#s = t.time, this.#r = t.volume !== void 0;
+  }
+  retarget(t, e = {}) {
+    this.#s = t.time, t.volume !== void 0 && (this.#r = !0), this.#t.retarget(t.open, e), this.#e.retarget(t.high, e), this.#o.retarget(t.low, e), this.#n.retarget(t.close, e), this.#i.retarget(t.volume ?? 0, e);
+  }
+  tick(t) {
+    const e = this.#t.tick(t), s = this.#e.tick(t), i = this.#o.tick(t), r = this.#n.tick(t), o = this.#i.tick(t);
+    return e || s || i || r || o;
+  }
+  get current() {
+    const t = {
+      time: this.#s,
+      open: this.#t.current,
+      high: this.#e.current,
+      low: this.#o.current,
+      close: this.#n.current
+    };
+    return this.#r && (t.volume = this.#i.current), t;
+  }
+}
+const O = 2, nt = { tl: !0, tr: !0, br: !0, bl: !0 }, _ = { tl: !0, tr: !0, br: !1, bl: !1 }, rt = {
+  up: { body: "#26a69a", wick: "#26a69a" },
+  down: { body: "#ef5350", wick: "#ef5350" },
+  bodyWidthRatio: 0.6,
+  cornerRadius: O,
+  entryMs: X,
+  smoothMs: U
+};
+function I(a) {
+  return {
+    ...a,
+    entryMs: a.entryMs === !1 ? 0 : a.entryMs ?? X,
+    smoothMs: a.smoothMs === !1 ? 0 : a.smoothMs ?? U
+  };
+}
+class at {
+  kind = "candlestick";
+  store;
+  options;
+  // --- Animation state ----------------------------------------------------
+  /** Smoothed OHLC for the live last candle. Reset on `appendPoint` (new
+   *  candle → identity snap) and chased on `updateLastPoint`. */
+  displayedLast = null;
+  /** Per-candle entrance registry. Single-layer, so no per-layer split. */
+  entries = /* @__PURE__ */ new Map();
+  #t = null;
+  /** EMA-smoothed volume scale (tallest visible bar). `null` re-seeds (snaps)
+   *  on the next frame — set on construction and bulk data replacement. */
+  #e = null;
+  /** False while {@link #displayedMaxVol} is still chasing the raw window max —
+   *  feeds {@link needsAnimation} so frames keep flowing until it converges. */
+  #o = !0;
+  /** Whether the previous frame was rendering decimated (bucketed) candles.
+   *  Crossing this boundary changes `volume` semantics (per-candle ↔ summed
+   *  bucket), so the volume scale snaps rather than easing — otherwise the EMA
+   *  clamps every bar to full band height for ~30 frames. */
+  #n = !1;
+  /** Series-level alpha for visibility cross-fade. Chart calls {@link setAlpha} on hide. */
+  #i = new G({
+    initial: 1,
+    duration: 0,
+    lerp: (t, e, s) => t + (e - t) * s
+  });
+  /** Body gradients keyed by `top|bottom|height` — built once at y=0..h and
+   *  positioned per candle via `ctx.translate`, instead of a fresh
+   *  `createLinearGradient` for every body on every frame. */
+  #s = /* @__PURE__ */ new Map();
+  constructor(t, e) {
+    this.store = t, this.options = I({ ...rt, ...e }), this.displayedLast = t.last() ?? null;
+  }
+  isEntryEnabled() {
+    return (this.options.entryAnimation ?? "unfold") !== "none";
+  }
+  updateOptions(t) {
+    this.options = I({ ...this.options, ...t });
+  }
+  getColor() {
+    return E(this.options.up.body);
+  }
+  // --- SeriesRenderer interface implementation ------------------------------
+  setData(t) {
+    this.store.setData(tt(t ?? []));
+    const e = this.store.last();
+    this.displayedLast = e ?? null, this.#t = null, this.entries.clear(), this.#e = null;
+  }
+  appendPoint(t) {
+    const e = t, s = F(e.time), i = { ...e, time: s };
+    this.store.append(i), this.displayedLast = i, this.#t = null;
+    const r = this.options.entryMs;
+    this.isEntryEnabled() && r > 0 && this.entries.set(s, { startTime: performance.now() });
+  }
+  updateLastPoint(t) {
+    const e = t, s = F(e.time), i = { ...e, time: s };
+    this.store.updateLast(i);
+    const r = this.options.smoothMs;
+    if (r <= 0) {
+      this.displayedLast = i, this.#t = null;
+      return;
+    }
+    let o = this.#t;
+    if (o === null) {
+      const l = this.displayedLast ?? i;
+      o = new st(l), this.#t = o;
+    }
+    o.retarget(i, { settleMs: r });
+  }
+  keepLast(t) {
+    if (t < 0) return;
+    const e = this.store.length - t;
+    e <= 0 || this.store.trimStart(e);
+  }
+  getLayerCount() {
+    return 1;
+  }
+  setLayerVisible(t, e) {
+  }
+  isLayerVisible(t) {
+    return !0;
+  }
+  getLayerColors() {
+    return [E(this.options.up.body)];
+  }
+  applyTheme(t, e) {
+    this.updateOptions({
+      up: { ...t.candlestick.up },
+      down: { ...t.candlestick.down }
+    });
+  }
+  onDataChanged(t) {
+    return this.store.on("update", t), () => this.store.off("update", t);
+  }
+  dispose() {
+    this.store.removeAllListeners();
+  }
+  // --- Animation lifecycle ------------------------------------------------
+  /**
+   * Advance the live-OHLC chase + alpha fade against `now` and prune
+   * fully-settled entrance entries. Called from `render()` once per frame.
+   */
+  tickAnimations(t) {
+    this.#i.tick(t);
+    const e = this.#t;
+    if (e !== null) {
+      const i = e.tick(t);
+      this.displayedLast = e.current, i || (this.#t = null);
+    }
+    const s = this.options.entryMs;
+    if (s <= 0) {
+      this.entries.clear();
+      return;
+    }
+    for (const [i, r] of this.entries)
+      t - r.startTime >= s && this.entries.delete(i);
+  }
+  /** True while OHLC chase, any per-candle entrance, alpha fade, or the volume
+   *  scale is unsettled. */
+  get needsAnimation() {
+    return this.#i.animating || this.#t !== null || this.entries.size > 0 || !this.#o;
+  }
+  /** Abort in-flight per-candle entrance animations. Live-OHLC chase is left intact. */
+  cancelEntranceAnimations() {
+    this.entries.clear();
+  }
+  setAlpha(t, e) {
+    this.#i.setTarget(t, { duration: e });
+  }
+  getAlpha() {
+    return this.#i.current;
+  }
+  getLastValue() {
+    const t = this.store.last();
+    return t ? t.close : null;
+  }
+  getDataAtTime(t, e) {
+    return this.store.findNearest(t, e);
+  }
+  // --- TimeSeriesRenderer data queries --------------------------------------
+  getTimeBounds() {
+    const t = this.store.first(), e = this.store.last();
+    return !t || !e ? null : { first: t.time, last: e.time };
+  }
+  getLastDataPoint() {
+    return this.store.last() ?? null;
+  }
+  getSecondLastDataPoint() {
+    const t = this.store.getAll();
+    return t.length >= 2 ? t[t.length - 2] : null;
+  }
+  sampleTimes(t) {
+    return this.store.getAll().slice(0, t).map((e) => e.time);
+  }
+  getVisibleDataPoints(t, e) {
+    return this.store.getVisibleData(t, e);
+  }
+  getValueRange(t, e) {
+    const s = this.store.getVisibleData(t, e);
+    let i = 1 / 0, r = -1 / 0;
+    for (const o of s)
+      Number.isFinite(o.low) && o.low < i && (i = o.low), Number.isFinite(o.high) && o.high > r && (r = o.high);
+    return i === 1 / 0 || r === -1 / 0 ? null : { min: i, max: r };
+  }
+  render(t) {
+    this.tickAnimations(performance.now());
+    const { scope: e, timeScale: s, yScale: i, dataInterval: r } = t, { context: o, horizontalPixelRatio: l } = e, M = s.getRange();
+    let h = this.store.getVisibleData(M.from, M.to);
+    const d = e.mediaSize.width, k = h.length > d * 2;
+    if (k && (h = q(h, Math.round(d * 1.5))), h.length === 0) return;
+    const y = this.displayedLast;
+    if (!k && y !== null) {
+      const p = h.length - 1;
+      h[p].time === y.time && (h = [...h.slice(0, p), y]);
+    }
+    let c = null;
+    if (this.entries.size > 0) {
+      const p = this.options.entryMs, u = performance.now();
+      for (const B of h) {
+        const D = this.entries.get(B.time);
+        if (D === void 0) continue;
+        const W = u - D.startTime, C = p <= 0 ? 1 : Math.min(1, Math.max(0, W / p));
+        if (C >= 1) continue;
+        const K = j(C);
+        c === null && (c = /* @__PURE__ */ new Map()), c.set(B.time, K);
+      }
+    }
+    const L = s.barWidthBitmap(r), m = Math.round(30 * l), b = h.length <= 2 ? Math.min(m, L) : L, w = Math.max(1, Math.round(l));
+    let n = Math.max(1, Math.round(b * this.options.bodyWidthRatio) - 2);
+    (n & 1) !== (w & 1) && (n = n > 1 ? n - 1 : 2);
+    const T = Math.floor(n / 2), Y = k !== this.#n;
+    this.#n = k;
+    const x = Math.round(i.getMediaHeight() * e.verticalPixelRatio);
+    this.drawVolume({
+      ctx: o,
+      data: h,
+      timeScale: s,
+      chartHeight: x,
+      barWidth: b,
+      wickWidth: w,
+      entranceByTime: c,
+      snapVolScale: Y,
+      radius: (this.options.cornerRadius ?? O) * l
+    });
+    const f = [], v = [], g = [];
+    let A = null;
+    for (let p = 0; p < h.length; p++) {
+      const u = h[p];
+      if (N(u.open) || N(u.close) || N(u.high) || N(u.low)) {
+        g.push(p), A === null && (A = u);
+        continue;
+      }
+      u.close >= u.open ? f.push(u) : v.push(u);
+    }
+    A !== null && Z(this, "candlestick", g, `time ${A.time}`);
+    const S = {
+      painter: et(this.options.candlePainter),
+      env: {
+        ctx: o,
+        theme: t.theme,
+        horizontalPixelRatio: l,
+        verticalPixelRatio: e.verticalPixelRatio
+      },
+      radius: (this.options.cornerRadius ?? O) * l
+    }, R = {
+      ctx: o,
+      timeScale: s,
+      yScale: i,
+      halfBody: T,
+      bodyWidth: n,
+      wickWidth: w,
+      entranceByTime: c,
+      candlePass: S
+    };
+    this.drawCandles({
+      ...R,
+      candles: f,
+      body: this.options.up.body,
+      wickColor: this.options.up.wick
+    }), this.drawCandles({
+      ...R,
+      candles: v,
+      body: this.options.down.body,
+      wickColor: this.options.down.wick
+    });
+  }
+  drawVolume({
+    ctx: t,
+    data: e,
+    timeScale: s,
+    chartHeight: i,
+    barWidth: r,
+    wickWidth: o,
+    entranceByTime: l,
+    snapVolScale: M,
+    radius: h
+  }) {
+    let d = 0;
+    for (const n of e)
+      Number.isFinite(n.volume) && n.volume > d && (d = n.volume);
+    if (d === 0) {
+      this.#e = null, this.#o = !0;
+      return;
+    }
+    this.#e === null || M ? this.#e = d : this.#e += (d - this.#e) * it, this.#o = Math.abs(d - this.#e) <= d * ot;
+    const k = this.#e, y = i * 0.2;
+    let c = Math.max(1, r - 2);
+    (c & 1) !== (o & 1) && (c = c > 1 ? c - 1 : 2);
+    const L = Math.floor(c / 2), m = $(E(this.options.up.body), 0.2), b = $(E(this.options.down.body), 0.2), w = this.options.entryAnimation ?? "unfold";
+    for (const n of e) {
+      if (!Number.isFinite(n.volume) || n.volume <= 0) continue;
+      const T = n.volume, Y = s.timeToBitmapX(n.time), x = Math.min(y, Math.max(1, T / k * y)), f = n.close >= n.open;
+      t.fillStyle = f ? m : b;
+      const v = l?.get(n.time) ?? 1;
+      if (v >= 1 || w === "none") {
+        H(t, {
+          x: Y - L,
+          y: i - x,
+          width: c,
+          height: x,
+          radius: h,
+          corners: _
+        });
+        continue;
+      }
+      const g = z(v, w, {
+        x: Y - L,
+        barWidth: c,
+        anchorY: i,
+        topY: i - x,
+        bottomY: i
+      });
+      t.save(), t.globalAlpha = g.alpha, H(t, {
+        x: g.x,
+        y: g.topY,
+        width: c,
+        height: Math.max(1, g.bottomY - g.topY),
+        radius: h,
+        corners: _
+      }), t.restore();
+    }
+  }
+  drawCandles({
+    ctx: t,
+    candles: e,
+    timeScale: s,
+    yScale: i,
+    halfBody: r,
+    bodyWidth: o,
+    wickWidth: l,
+    body: M,
+    wickColor: h,
+    entranceByTime: d,
+    candlePass: k
+  }) {
+    if (e.length === 0) return;
+    const y = this.options.entryAnimation ?? "unfold", c = o + 2;
+    t.fillStyle = h;
+    for (const m of e) {
+      const b = d?.get(m.time) ?? 1, w = s.timeToBitmapX(m.time), n = i.valueToBitmapY(m.open), T = i.valueToBitmapY(m.high), Y = i.valueToBitmapY(m.low), x = w - Math.floor(l / 2);
+      if (b >= 1 || y === "none") {
+        t.fillRect(x, T, l, Y - T);
+        continue;
+      }
+      const f = z(b, y, {
+        x,
+        barWidth: c,
+        anchorY: n,
+        topY: T,
+        bottomY: Y
+      });
+      t.save(), t.globalAlpha = f.alpha, t.fillRect(f.x, f.topY, l, Math.max(1, f.bottomY - f.topY)), t.restore();
+    }
+    const L = Array.isArray(M);
+    for (const m of e) {
+      const b = d?.get(m.time) ?? 1, w = s.timeToBitmapX(m.time), n = i.valueToBitmapY(m.open), T = i.valueToBitmapY(m.close), Y = Math.min(n, T), x = Math.max(n, T), f = Math.max(1, x - Y), v = b < 1 && y !== "none";
+      let g = w - r, A = Y, S = f, R = 1;
+      if (v) {
+        const C = z(b, y, {
+          x: w - r,
+          barWidth: c,
+          anchorY: n,
+          topY: Y,
+          bottomY: x
+        });
+        g = C.x, A = C.topY, S = Math.max(1, C.bottomY - C.topY), R = C.alpha;
+      }
+      v && t.save();
+      const p = Array.isArray(M) ? M[0] : M, u = L && S > 2, B = u ? this.#r(t, M, S) : p;
+      t.fillStyle = B, v && (t.globalAlpha = R), u && t.translate(0, A);
+      const D = u ? 0 : A, W = Q(k.radius, 0, Math.min(o, S) / 2);
+      W < 1 && !this.options.candlePainter ? t.fillRect(g, D, o, S) : k.painter(k.env, {
+        geom: { x: g, y: D, width: o, height: S },
+        fillStyle: B,
+        color: p,
+        corners: nt,
+        radius: W,
+        progress: b,
+        isBullish: m.close >= m.open
+      }), u && t.translate(0, -A), v && t.restore();
+    }
+  }
+  /**
+   * Cached 2-stop body gradient anchored at y = 0..height. Heights quantize
+   * to whole device px (sub-pixel ramp drift is invisible) so same-height
+   * bodies share one `CanvasGradient` instead of allocating per candle per
+   * frame. The map is hard-bounded — entrance animations sweep heights
+   * continuously, and a full clear is cheaper than an eviction policy.
+   */
+  #r(t, e, s) {
+    const i = Math.max(3, Math.round(s)), r = `${e[0]}|${e[1]}|${i}`, o = this.#s.get(r);
+    if (o !== void 0) return o;
+    this.#s.size >= 512 && this.#s.clear();
+    const l = t.createLinearGradient(0, 0, 0, i);
+    return l.addColorStop(0, e[0]), l.addColorStop(1, e[1]), this.#s.set(r, l), l;
+  }
+}
+function z(a, t, e) {
+  switch (t) {
+    case "none":
+      return { x: e.x, topY: e.topY, bottomY: e.bottomY, alpha: 1 };
+    case "fade":
+      return { x: e.x, topY: e.topY, bottomY: e.bottomY, alpha: a };
+    case "unfold":
+      return {
+        x: e.x,
+        topY: V(e.anchorY, e.topY, a),
+        bottomY: V(e.anchorY, e.bottomY, a),
+        alpha: 1
+      };
+    case "slide":
+      return {
+        x: e.x + (1 - a) * e.barWidth,
+        topY: e.topY,
+        bottomY: e.bottomY,
+        alpha: a
+      };
+    case "fade-unfold":
+      return {
+        x: e.x,
+        topY: V(e.anchorY, e.topY, a),
+        bottomY: V(e.anchorY, e.bottomY, a),
+        alpha: a
+      };
+  }
+}
+const xt = {
+  type: "candlestick",
+  create: ({ theme: a }, t) => new at(new J(), {
+    up: { ...a.candlestick.up },
+    down: { ...a.candlestick.down },
+    ...t
+  })
+};
+export {
+  at as CandlestickRenderer,
+  xt as CandlestickSeriesDef
+};

package/dist/core/dist/series/definition.js

@@ -0,0 +1,11 @@
+const i = /* @__PURE__ */ new Map();
+function n(e) {
+  i.set(e.type, e);
+}
+function t(e) {
+  return i.get(e);
+}
+export {
+  n as registerSeriesDefinition,
+  t as resolveSeriesDefinition
+};