velo-plot 3.0.0 → 4.0.0-alpha.1

package/dist/index-Bj-xyXY6.js

@@ -0,0 +1,582 @@
+import { f as u } from "./SVGDocumentBuilder-C-uLkcFW.js";
+import { p as Z } from "./tickUtils-B_X-ha13.js";
+function yt(r) {
+  const e = r.close.length, l = new Float32Array(e), n = new Float32Array(e), s = new Float32Array(e), h = new Float32Array(e);
+  for (let c = 0; c < e; c++) {
+    const p = r.open[c], f = r.high[c], x = r.low[c], b = r.close[c];
+    h[c] = (p + f + x + b) / 4, l[c] = c === 0 ? (p + b) / 2 : (l[c - 1] + h[c - 1]) / 2, n[c] = Math.max(f, l[c], h[c]), s[c] = Math.min(x, l[c], h[c]);
+  }
+  return { open: l, high: n, low: s, close: h };
+}
+function ut(r) {
+  const e = r.length, l = new Float64Array(e), n = new Float32Array(e), s = new Float32Array(e), h = new Float32Array(e), c = new Float32Array(e), p = new Float32Array(e);
+  for (let f = 0; f < e; f++) {
+    const x = r[f];
+    l[f] = x.time, n[f] = x.open, s[f] = x.high, h[f] = x.low, c[f] = x.close, p[f] = x.volume ?? 0;
+  }
+  return { x: l, open: n, high: s, low: h, close: c, volume: p };
+}
+function C(r) {
+  let e = r;
+  return () => (e = e * 16807 % 2147483647, (e - 1) / 2147483646);
+}
+function tt(r, e, l, n, s) {
+  const h = [];
+  let c = n;
+  for (let p = r; p <= e; p += l) {
+    const f = c, x = (s() - 0.48) * 2, b = Math.max(1, f + x), d = Math.max(f, b) + s() * 1.5, I = Math.min(f, b) - s() * 1.5;
+    h.push({
+      time: p,
+      open: f,
+      high: d,
+      low: I,
+      close: b,
+      volume: 1e3 + s() * 5e3
+    }), c = b;
+  }
+  return h;
+}
+function xt(r = {}) {
+  const e = r.barMs ?? 6e4, l = r.basePrice ?? 100, n = C(r.seed ?? 42), s = /* @__PURE__ */ new Map();
+  return {
+    async resolveSymbol(h) {
+      return {
+        symbol: h,
+        name: h,
+        description: `Mock symbol ${h}`,
+        timezone: "UTC",
+        session: "24x7",
+        pricescale: 100
+      };
+    },
+    async getBars(h) {
+      const c = `${h.symbol}:${h.from}:${h.to}`;
+      return s.has(c) || s.set(
+        c,
+        tt(h.from, h.to, e, l, n)
+      ), s.get(c);
+    },
+    subscribeBars(h) {
+      let c = l + n() * 5;
+      const p = setInterval(() => {
+        const f = c, x = Math.max(1, f + (n() - 0.5) * 2), b = Math.max(f, x) + n(), d = Math.min(f, x) - n();
+        h.onBar({
+          time: Date.now(),
+          open: f,
+          high: b,
+          low: d,
+          close: x,
+          volume: 1e3 + n() * 3e3
+        }), c = x;
+      }, e);
+      return () => clearInterval(p);
+    }
+  };
+}
+function et(r, e) {
+  if (r.length === 0) return -1;
+  let l = 0, n = Math.abs(r[0] - e);
+  for (let s = 1; s < r.length; s++) {
+    const h = Math.abs(r[s] - e);
+    h < n && (n = h, l = s);
+  }
+  return l;
+}
+function nt(r) {
+  if (r.barX.length === 0)
+    return { x: r.x, y: r.y };
+  const e = et(r.barX, r.x);
+  if (e < 0) return { x: r.x, y: r.y };
+  const l = r.barX[e], n = [
+    r.open[e],
+    r.high[e],
+    r.low[e],
+    r.close[e]
+  ], s = r.dataToPixelY(r.y), h = r.pixelThreshold ?? 12;
+  let c = r.y, p = 1 / 0;
+  for (const f of n) {
+    const x = r.dataToPixelY(f), b = Math.abs(x - s);
+    b < p && b <= h && (p = b, c = f);
+  }
+  return { x: l, y: c };
+}
+function L(r, e) {
+  const l = e.y - r.y, n = Math.abs(r.y), s = n > 0 ? l / n * 100 : 0, h = Math.round(Math.abs(e.x - r.x));
+  return { change: l, percent: s, bars: h, up: l >= 0 };
+}
+function Y(r) {
+  const e = r.change >= 0 ? "+" : "";
+  return `${e}${r.change.toFixed(2)} (${e}${r.percent.toFixed(2)}%) · ${r.bars} bars`;
+}
+function E(r) {
+  const e = Math.abs(r), l = e >= 1e3 ? 0 : e >= 1 ? 2 : 4;
+  return r.toLocaleString("en-US", {
+    minimumFractionDigits: l,
+    maximumFractionDigits: l
+  });
+}
+const U = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1], ot = 4, rt = "#26a69a", at = "#ef5350";
+function z(r, e) {
+  return r.startsWith("#") && r.length === 7 ? r + e : r;
+}
+const st = {
+  name: "velo-plot-drawing-tools",
+  version: "1.0.0",
+  description: "Interactive trendline, horizontal, vertical, rectangle, and fibonacci drawing",
+  provides: ["drawing"],
+  tags: ["drawing", "annotations", "trading"]
+};
+function B(r) {
+  return r !== "none" && r !== "pan";
+}
+function it(r) {
+  for (const e of r.data.getAllSeries())
+    if (e.getType() === "candlestick") return e;
+}
+function dt(r = {}) {
+  let e = null;
+  const l = r.autoDeselect !== !1, n = {
+    mode: "none",
+    pending: null,
+    start: null,
+    dragging: !1,
+    dragMoved: !1,
+    dragStartPixel: null,
+    cursor: null,
+    magnet: r.magnet ?? !1,
+    undoStack: [],
+    redoStack: []
+  }, s = r.color ?? "#38bdf8", h = r.measureUpColor ?? rt, c = r.measureDownColor ?? at;
+  function p() {
+    var t, o;
+    return ((o = e == null ? void 0 : (t = e.chart).getAnnotations) == null ? void 0 : o.call(t)) ?? [];
+  }
+  function f() {
+    n.undoStack.push(p()), n.redoStack = [];
+  }
+  function x() {
+    n.pending = null, n.start = null, n.dragging = !1, n.dragMoved = !1, n.dragStartPixel = null;
+  }
+  function b(t) {
+    var o, a;
+    n.mode = t, x(), (o = r.onModeChange) == null || o.call(r, t), (a = e == null ? void 0 : e.requestRender) == null || a.call(e);
+  }
+  function d() {
+    var t;
+    x(), l ? b("none") : (t = e == null ? void 0 : e.requestRender) == null || t.call(e);
+  }
+  function I(t, o) {
+    if (!e || !n.magnet) return { x: t, y: o };
+    const a = it(e);
+    if (!a) return { x: t, y: o };
+    const i = a.getData();
+    return !i.open || !i.high || !i.low || !i.close ? { x: t, y: o } : nt({
+      x: t,
+      y: o,
+      barX: i.x,
+      open: i.open,
+      high: i.high,
+      low: i.low,
+      close: i.close,
+      dataToPixelX: e.coords.dataToPixelX,
+      dataToPixelY: (y) => e.coords.dataToPixelY(y),
+      enabled: !0
+    });
+  }
+  function A(t, o) {
+    return I(
+      t.coords.pixelToDataX(o.pixelX),
+      t.coords.pixelToDataY(o.pixelY)
+    );
+  }
+  function R(t) {
+    e && (f(), e.chart.addAnnotation({
+      type: "horizontal-line",
+      y: t,
+      color: s,
+      interactive: !0
+    }));
+  }
+  function O(t) {
+    e && (f(), e.chart.addAnnotation({
+      type: "vertical-line",
+      x: t,
+      color: s,
+      interactive: !0
+    }));
+  }
+  function V(t, o) {
+    if (!e) return;
+    f();
+    const a = L(t, o), i = a.up ? h : c, y = (t.x + o.x) / 2;
+    e.chart.addAnnotation({
+      type: "rectangle",
+      xMin: Math.min(t.x, o.x),
+      xMax: Math.max(t.x, o.x),
+      yMin: Math.min(t.y, o.y),
+      yMax: Math.max(t.y, o.y),
+      strokeColor: i,
+      fillColor: z(i, "33"),
+      interactive: !0
+    }), e.chart.addAnnotation({
+      type: "arrow",
+      x1: y,
+      y1: t.y,
+      x2: y,
+      y2: o.y,
+      color: i,
+      headStyle: "filled",
+      interactive: !0
+    }), e.chart.addAnnotation({
+      type: "text",
+      x: y,
+      y: o.y,
+      text: Y(a),
+      color: "#ffffff",
+      backgroundColor: i,
+      padding: 4,
+      fontWeight: "bold",
+      anchor: a.up ? "bottom-center" : "top-center",
+      interactive: !0
+    });
+  }
+  function W(t, o) {
+    if (e) {
+      if (n.mode === "measure") {
+        V(t, o);
+        return;
+      }
+      if (f(), n.mode === "trendline")
+        e.chart.addAnnotation({
+          type: "arrow",
+          x1: t.x,
+          y1: t.y,
+          x2: o.x,
+          y2: o.y,
+          color: s,
+          interactive: !0
+        });
+      else if (n.mode === "rectangle")
+        e.chart.addAnnotation({
+          type: "rectangle",
+          xMin: Math.min(t.x, o.x),
+          xMax: Math.max(t.x, o.x),
+          yMin: Math.min(t.y, o.y),
+          yMax: Math.max(t.y, o.y),
+          strokeColor: s,
+          fillColor: s + "22",
+          interactive: !0
+        });
+      else if (n.mode === "fibonacci") {
+        const a = Math.min(t.y, o.y), i = Math.max(t.y, o.y);
+        for (const y of U) {
+          const $ = i - (i - a) * y;
+          e.chart.addAnnotation({
+            type: "horizontal-line",
+            y: $,
+            color: s,
+            lineDash: y === 0 || y === 1 ? void 0 : [4, 4],
+            label: `${(y * 100).toFixed(1)}%  ${E($)}`,
+            labelPosition: "right",
+            interactive: !0
+          });
+        }
+      }
+    }
+  }
+  function G(t, o, a) {
+    const i = n.mode;
+    if (!B(i) || !n.cursor) return;
+    const y = n.cursor, $ = n.pending ?? n.start;
+    t.save(), t.strokeStyle = s, t.lineWidth = 1.5, t.setLineDash([6, 4]), t.globalAlpha = 0.85;
+    const S = (M, w) => ({
+      px: a.dataToPixelX(M),
+      py: a.dataToPixelY(w)
+    });
+    if (i === "horizontal") {
+      const { py: M } = S(0, y.y);
+      t.beginPath(), t.moveTo(o.x, M), t.lineTo(o.x + o.width, M), t.stroke();
+    } else if (i === "vertical") {
+      const { px: M } = S(y.x, 0);
+      t.beginPath(), t.moveTo(M, o.y), t.lineTo(M, o.y + o.height), t.stroke();
+    } else if ($) {
+      const M = S($.x, $.y), w = S(y.x, y.y);
+      if (i === "trendline")
+        t.beginPath(), t.moveTo(M.px, M.py), t.lineTo(w.px, w.py), t.stroke();
+      else if (i === "rectangle") {
+        const m = Math.min(M.px, w.px), g = Math.min(M.py, w.py), v = Math.abs(w.px - M.px), k = Math.abs(w.py - M.py);
+        t.strokeRect(m, g, v, k), t.fillStyle = s + "22", t.fillRect(m, g, v, k);
+      } else if (i === "fibonacci") {
+        const m = Math.min($.y, y.y), g = Math.max($.y, y.y);
+        t.font = "11px sans-serif", t.textAlign = "left", t.textBaseline = "bottom";
+        for (const v of U) {
+          const k = g - (g - m) * v, { py: P } = S(0, k);
+          t.beginPath(), t.moveTo(o.x, P), t.lineTo(o.x + o.width, P), t.stroke(), t.save(), t.setLineDash([]), t.globalAlpha = 1, t.fillStyle = s, t.fillText(
+            `${(v * 100).toFixed(1)}%  ${E(k)}`,
+            o.x + 4,
+            P - 2
+          ), t.restore();
+        }
+      } else i === "measure" && N(t, M, w, $, y);
+    }
+    t.restore();
+  }
+  function N(t, o, a, i, y) {
+    const $ = L(i, y), S = $.up ? h : c, M = Math.min(o.px, a.px), w = Math.min(o.py, a.py), m = Math.abs(a.px - o.px), g = Math.abs(a.py - o.py);
+    t.setLineDash([]), t.globalAlpha = 0.9, t.fillStyle = z(S, "33"), t.fillRect(M, w, m, g), t.strokeStyle = S, t.lineWidth = 1.5, t.strokeRect(M, w, m, g);
+    const v = (o.px + a.px) / 2;
+    t.beginPath(), t.moveTo(v, o.py), t.lineTo(v, a.py), t.stroke();
+    const k = 7, P = a.py >= o.py ? 1 : -1;
+    t.beginPath(), t.moveTo(v, a.py), t.lineTo(v - 4, a.py - P * k), t.lineTo(v + 4, a.py - P * k), t.closePath(), t.fillStyle = S, t.fill();
+    const T = Y($);
+    t.font = "12px sans-serif";
+    const F = t.measureText(T).width + 6 * 2, X = 20, Q = v - F / 2, H = $.up ? a.py - X - 8 : a.py + 8;
+    t.globalAlpha = 1, t.fillStyle = S, t.fillRect(Q, H, F, X), t.fillStyle = "#ffffff", t.textAlign = "center", t.textBaseline = "middle", t.fillText(T, v, H + X / 2);
+  }
+  function q(t) {
+    const o = n.mode;
+    if (!B(o) || !n.cursor) return [];
+    const a = Z(t.yScales) ?? [...t.yScales.values()][0];
+    if (!a) return [];
+    const i = t.plotArea, y = n.cursor, $ = n.pending ?? n.start, S = (m, g) => ({
+      px: t.xScale.transform(m),
+      py: a.transform(g)
+    }), M = 'stroke-dasharray="6,4"', w = [];
+    if (o === "horizontal") {
+      const { py: m } = S(0, y.y);
+      w.push(
+        `<line x1="${u(i.x)}" y1="${u(m)}" x2="${u(i.x + i.width)}" y2="${u(m)}" stroke="${s}" stroke-width="1.5" ${M}/>`
+      );
+    } else if (o === "vertical") {
+      const { px: m } = S(y.x, 0);
+      w.push(
+        `<line x1="${u(m)}" y1="${u(i.y)}" x2="${u(m)}" y2="${u(i.y + i.height)}" stroke="${s}" stroke-width="1.5" ${M}/>`
+      );
+    } else if ($) {
+      const m = S($.x, $.y), g = S(y.x, y.y);
+      if (o === "trendline")
+        w.push(
+          `<line x1="${u(m.px)}" y1="${u(m.py)}" x2="${u(g.px)}" y2="${u(g.py)}" stroke="${s}" stroke-width="1.5" ${M}/>`
+        );
+      else if (o === "rectangle") {
+        const v = Math.min(m.px, g.px), k = Math.min(m.py, g.py), P = Math.abs(g.px - m.px), T = Math.abs(g.py - m.py);
+        w.push(
+          `<rect x="${u(v)}" y="${u(k)}" width="${u(P)}" height="${u(T)}" fill="${s}22" stroke="${s}" stroke-width="1.5" ${M}/>`
+        );
+      } else if (o === "fibonacci") {
+        const v = Math.min($.y, y.y), k = Math.max($.y, y.y);
+        for (const P of U) {
+          const T = k - (k - v) * P, { py: D } = S(0, T);
+          w.push(
+            `<line x1="${u(i.x)}" y1="${u(D)}" x2="${u(i.x + i.width)}" y2="${u(D)}" stroke="${s}" stroke-width="1.5" ${M}/>`
+          ), w.push(
+            `<text x="${u(i.x + 4)}" y="${u(D - 2)}" fill="${s}" font-size="11" font-family="sans-serif">${(P * 100).toFixed(1)}%  ${E(T)}</text>`
+          );
+        }
+      } else if (o === "measure") {
+        const v = L($, y), k = v.up ? h : c, P = Math.min(m.px, g.px), T = Math.min(m.py, g.py), D = Math.abs(g.px - m.px), _ = Math.abs(g.py - m.py), F = (m.px + g.px) / 2;
+        w.push(
+          `<rect x="${u(P)}" y="${u(T)}" width="${u(D)}" height="${u(_)}" fill="${z(k, "33")}" stroke="${k}" stroke-width="1.5"/>`
+        ), w.push(
+          `<line x1="${u(F)}" y1="${u(m.py)}" x2="${u(F)}" y2="${u(g.py)}" stroke="${k}" stroke-width="1.5"/>`
+        ), w.push(
+          `<text x="${u(F)}" y="${u(v.up ? g.py - 12 : g.py + 16)}" fill="${k}" font-size="12" font-family="sans-serif" text-anchor="middle">${Y(v)}</text>`
+        );
+      }
+    }
+    return w;
+  }
+  function j(t, o) {
+    var i;
+    if (!o.inPlotArea) return;
+    o.preventDefault();
+    const a = A(t, o);
+    if (n.mode === "horizontal") {
+      R(a.y), d();
+      return;
+    }
+    if (n.mode === "vertical") {
+      O(a.x), d();
+      return;
+    }
+    if (n.pending) {
+      W(n.pending, a), d();
+      return;
+    }
+    n.start = a, n.dragging = !0, n.dragMoved = !1, n.dragStartPixel = { x: o.pixelX, y: o.pixelY }, n.cursor = a, (i = t.requestRender) == null || i.call(t);
+  }
+  function J(t, o) {
+    var i;
+    const a = A(t, o);
+    if (n.cursor = a, n.dragging && n.dragStartPixel) {
+      const y = o.pixelX - n.dragStartPixel.x, $ = o.pixelY - n.dragStartPixel.y;
+      Math.hypot(y, $) >= ot && (n.dragMoved = !0);
+    }
+    o.preventDefault(), (i = t.requestRender) == null || i.call(t);
+  }
+  function K(t, o) {
+    var y;
+    if (!n.dragging || !n.start) return;
+    const a = A(t, o), i = n.start;
+    if (n.dragging = !1, n.dragStartPixel = null, n.dragMoved) {
+      W(i, a), d();
+      return;
+    }
+    n.pending = i, n.start = null, n.cursor = a, (y = t.requestRender) == null || y.call(t);
+  }
+  return {
+    manifest: st,
+    api: {
+      setMode(t) {
+        b(t);
+      },
+      getMode() {
+        return n.mode;
+      },
+      setMagnet(t) {
+        n.magnet = t;
+      },
+      isMagnet() {
+        return n.magnet;
+      },
+      undo() {
+        if (!e || n.undoStack.length === 0) return !1;
+        n.redoStack.push(p());
+        const t = n.undoStack.pop(), o = p();
+        for (const a of o) e.chart.removeAnnotation(a.id);
+        for (const a of t) e.chart.addAnnotation(a);
+        return !0;
+      },
+      redo() {
+        if (!e || n.redoStack.length === 0) return !1;
+        n.undoStack.push(p());
+        const t = n.redoStack.pop(), o = p();
+        for (const a of o) e.chart.removeAnnotation(a.id);
+        for (const a of t) e.chart.addAnnotation(a);
+        return !0;
+      },
+      clear() {
+        if (e) {
+          f();
+          for (const t of p()) e.chart.removeAnnotation(t.id);
+        }
+      }
+    },
+    onInit(t) {
+      e = t;
+    },
+    onDestroy() {
+      e = null;
+    },
+    onInteraction(t, o) {
+      if (B(n.mode)) {
+        if (o.type === "mousedown") {
+          j(t, o);
+          return;
+        }
+        if (o.type === "mousemove") {
+          J(t, o);
+          return;
+        }
+        o.type === "mouseup" && K(t, o);
+      }
+    },
+    onRenderOverlay(t) {
+      const o = t.render.ctx2d;
+      o && G(o, t.render.plotArea, t.coords);
+    },
+    onExportSVG(t) {
+      var o;
+      if (t.builder && ((o = t.exportContext) == null ? void 0 : o.options.includeOverlays) !== !1)
+        for (const a of q(t))
+          t.builder.push("plugins", a);
+    }
+  };
+}
+const lt = {
+  name: "velo-plot-replay",
+  version: "1.0.0",
+  description: "Bar-by-bar chart replay with speed control",
+  provides: ["replay"],
+  tags: ["replay", "trading"]
+};
+function mt(r) {
+  let e = null, l = null, n = 0, s = null, h = 1;
+  const c = r.frameMs ?? 250;
+  function p(x) {
+    const b = e, d = l, I = Math.min(x + 1, d.x.length), A = (R) => R ? R.subarray(0, I) : void 0;
+    b.chart.updateSeries(r.seriesId, {
+      x: A(d.x),
+      y: A(d.y),
+      open: A(d.open),
+      high: A(d.high),
+      low: A(d.low),
+      close: A(d.close)
+    });
+  }
+  const f = {
+    play(x = 1) {
+      l && (h = Math.max(0.1, x), s && clearInterval(s), s = setInterval(() => {
+        if (!e || !l) {
+          f.pause();
+          return;
+        }
+        if (n >= l.x.length - 1) {
+          f.pause();
+          return;
+        }
+        n++, p(n);
+      }, c / h));
+    },
+    pause() {
+      s && (clearInterval(s), s = null);
+    },
+    step(x = 1) {
+      l && (n = Math.min(l.x.length - 1, n + x), p(n));
+    },
+    seek(x) {
+      l && (n = Math.max(0, Math.min(l.x.length - 1, x)), p(n));
+    },
+    getIndex() {
+      return n;
+    },
+    getLength() {
+      return (l == null ? void 0 : l.x.length) ?? 0;
+    },
+    isPlaying() {
+      return s != null;
+    }
+  };
+  return {
+    manifest: lt,
+    api: f,
+    onInit(x) {
+      e = x;
+      const b = e.chart.getSeries(r.seriesId);
+      if (!b) {
+        console.warn(`[PluginReplay] Series "${r.seriesId}" not found`);
+        return;
+      }
+      const d = b.getData();
+      l = {
+        x: Float32Array.from(d.x),
+        y: d.y ? Float32Array.from(d.y) : void 0,
+        open: d.open ? Float32Array.from(d.open) : void 0,
+        high: d.high ? Float32Array.from(d.high) : void 0,
+        low: d.low ? Float32Array.from(d.low) : void 0,
+        close: d.close ? Float32Array.from(d.close) : void 0
+      }, n = Math.max(0, l.x.length - 1);
+    },
+    onDestroy() {
+      f.pause(), e = null, l = null;
+    }
+  };
+}
+export {
+  dt as P,
+  mt as a,
+  ut as b,
+  yt as c,
+  xt as d
+};
+//# sourceMappingURL=index-Bj-xyXY6.js.map