@agent-factory-platform/ui-kit 0.8.0 → 0.9.0

package/dist/charts/ohlc.js

@@ -0,0 +1,240 @@
+import { jsx as c, jsxs as g } from "react/jsx-runtime";
+import { useRef as w, useState as T, useEffect as F } from "react";
+import { createChart as k, LineStyle as x, CrosshairMode as ee, ColorType as K, CandlestickSeries as te, HistogramSeries as oe } from "lightweight-charts";
+import { readChartPalette as ie, observeChartPalette as ne } from "./adapter.js";
+import { TradingViewEventMarkersPrimitive as re } from "./event-markers-primitive.js";
+import { validateOhlcAnnotations as se, OhlcAnnotationsPrimitive as le } from "./ohlc-annotations.js";
+import { cn as ce } from "../lib/cn.js";
+import { Popover as ae } from "../components/popover-menu.js";
+const de = [], ue = [], fe = (i) => i.toLocaleString();
+function I(i) {
+  return Math.floor(i / 1e3);
+}
+function he(i) {
+  return 10 ** -i;
+}
+function be(i, d) {
+  if (!Number.isInteger(d) || d < 0 || d > 12) throw new RangeError("OHLC precision must be an integer from 0 to 12");
+  let l = -1 / 0;
+  for (const o of i) {
+    const b = Math.floor(o.time / 1e3);
+    if (![o.time, o.open, o.high, o.low, o.close, o.volume].every(Number.isFinite) || b <= l || o.volume < 0 || o.low > Math.min(o.open, o.close) || o.high < Math.max(o.open, o.close) || o.low > o.high) throw new RangeError("OHLC points must be finite, ordered by unique seconds, and bounded by low/high");
+    l = b;
+  }
+}
+function Se({
+  data: i,
+  annotations: d = ue,
+  markers: l = de,
+  onMarkerClick: o,
+  height: b = 300,
+  valueFormat: a = fe,
+  locale: O = "en-US",
+  pricePrecision: C = 2,
+  showVolume: N = !0,
+  transparent: D = !1,
+  ariaLabel: P = "Candlestick price chart",
+  className: W
+}) {
+  if (be(i, C), se(d), l.length > 256 || new Set(l.map((t) => t.id)).size !== l.length || l.some((t) => {
+    var s;
+    return !((s = t.id) != null && s.trim()) || !Number.isFinite(t.time) || t.price !== void 0 && !Number.isFinite(t.price);
+  })) throw new RangeError("OHLC markers require unique IDs, finite coordinates and at most 256 entries");
+  const V = w(null), R = w(d), M = w(null);
+  R.current = d;
+  const j = w(a), S = w(o);
+  S.current = o;
+  const [f, _] = T(i.at(-1) ?? null), [G, A] = T(null), [J, E] = T({});
+  return j.current = a, F(() => {
+    const t = V.current;
+    if (!t || i.length === 0) return;
+    const s = getComputedStyle(t).fontFamily, r = ie(t), z = t.clientHeight || (typeof b == "number" ? b : 300), u = k(t, {
+      autoSize: !0,
+      height: z,
+      layout: {
+        background: { type: K.Solid, color: D ? "rgba(0, 0, 0, 0)" : r.canvas },
+        textColor: r.mutedText,
+        fontFamily: s,
+        fontSize: 11,
+        attributionLogo: !0,
+        panes: { separatorColor: "rgba(127, 127, 127, 0.12)", separatorHoverColor: "rgba(127, 127, 127, 0.2)", enableResize: !1 }
+      },
+      grid: {
+        vertLines: { color: "rgba(127, 127, 127, 0.07)", style: x.Dotted },
+        horzLines: { color: "rgba(127, 127, 127, 0.07)", style: x.Dotted }
+      },
+      crosshair: {
+        mode: ee.Normal,
+        vertLine: { color: "rgba(127, 127, 127, 0.52)", style: x.Dashed, labelBackgroundColor: "#3f3f3f" },
+        horzLine: { color: "rgba(127, 127, 127, 0.52)", style: x.Dashed, labelBackgroundColor: "#3f3f3f" }
+      },
+      rightPriceScale: {
+        borderVisible: !1,
+        scaleMargins: { top: 0.1, bottom: N ? 0.17 : 0.08 },
+        entireTextOnly: !0
+      },
+      timeScale: {
+        borderVisible: !1,
+        timeVisible: !0,
+        secondsVisible: !1,
+        rightOffset: 3,
+        barSpacing: 12,
+        minBarSpacing: 4,
+        fixLeftEdge: !0,
+        lockVisibleTimeRangeOnResize: !0
+      },
+      localization: {
+        locale: O,
+        priceFormatter: (e) => j.current(e)
+      },
+      handleScroll: { mouseWheel: !0, pressedMouseMove: !0, horzTouchDrag: !0, vertTouchDrag: !1 },
+      handleScale: { axisPressedMouseMove: !0, mouseWheel: !0, pinch: !0 }
+    }), v = u.addSeries(te, {
+      upColor: r.up,
+      downColor: r.down,
+      borderVisible: !1,
+      wickUpColor: r.up,
+      wickDownColor: r.down,
+      lastValueVisible: !0,
+      priceLineVisible: !0,
+      priceLineStyle: x.Dotted,
+      priceFormat: { type: "price", precision: C, minMove: he(C) }
+    }), Q = i.map((e) => ({
+      time: I(e.time),
+      open: e.open,
+      high: e.high,
+      low: e.low,
+      close: e.close
+    }));
+    v.setData(Q);
+    const L = new le(R.current, r.event, s);
+    M.current = L, v.attachPrimitive(L);
+    const y = N ? u.addSeries(oe, {
+      priceFormat: { type: "volume" },
+      priceScaleId: "volume",
+      lastValueVisible: !1,
+      priceLineVisible: !1
+    }) : null, H = (e, h) => i.map((n) => ({
+      time: I(n.time),
+      value: n.volume,
+      color: n.close >= n.open ? e : h
+    }));
+    y && (y.setData(H(r.up, r.down)), u.priceScale("volume").applyOptions({ scaleMargins: { top: 0.86, bottom: 0 } }));
+    const p = l.length > 0 ? new re(l, { interior: r.canvas, text: r.text, event: r.event, font: s }, (e) => {
+      const h = Object.fromEntries(e.map((n) => [n.id, { x: n.x, y: n.y }]));
+      E((n) => Object.keys(n).length === e.length && e.every((m) => {
+        var $, q;
+        return (($ = n[m.id]) == null ? void 0 : $.x) === m.x && ((q = n[m.id]) == null ? void 0 : q.y) === m.y;
+      }) ? n : h);
+    }) : null;
+    p || E((e) => Object.keys(e).length ? {} : e), p && v.attachPrimitive(p);
+    const X = new Map(l.map((e) => [e.id, e])), Y = new Map(i.map((e) => [I(e.time), e])), B = (e) => {
+      const h = typeof e.time == "number" ? Y.get(e.time) : void 0;
+      _(h ?? i.at(-1) ?? null);
+    };
+    u.subscribeCrosshairMove(B), u.timeScale().fitContent();
+    const U = (e) => {
+      var n, m;
+      if (((n = e.hoveredInfo) == null ? void 0 : n.objectKind) !== "primitive" || typeof e.hoveredInfo.objectId != "string") return;
+      const h = X.get(e.hoveredInfo.objectId);
+      h && (A(h.id), (m = S.current) == null || m.call(S, h));
+    };
+    u.subscribeClick(U);
+    const Z = ne((e) => {
+      u.applyOptions({
+        layout: {
+          background: { type: K.Solid, color: D ? "rgba(0, 0, 0, 0)" : e.canvas },
+          textColor: e.mutedText,
+          fontFamily: s,
+          attributionLogo: !0
+        },
+        grid: { vertLines: { color: e.grid }, horzLines: { color: e.grid } },
+        crosshair: {
+          vertLine: { color: e.axis, labelBackgroundColor: e.surface },
+          horzLine: { color: e.axis, labelBackgroundColor: e.surface }
+        }
+      }), v.applyOptions({
+        upColor: e.up,
+        downColor: e.down,
+        wickUpColor: e.up,
+        wickDownColor: e.down
+      }), y == null || y.setData(H(e.up, e.down)), p == null || p.setPalette({ interior: e.canvas, text: e.text, event: e.event, font: s }), L.setPalette(e.event);
+    }, t);
+    return () => {
+      Z(), u.unsubscribeCrosshairMove(B), u.unsubscribeClick(U), v.detachPrimitive(L), M.current = null, p && v.detachPrimitive(p), u.remove();
+    };
+  }, [i, b, O, l, C, N, D]), F(() => {
+    var t;
+    (t = M.current) == null || t.setAnnotations(d);
+  }, [d]), i.length === 0 ? /* @__PURE__ */ c("div", { role: "img", "aria-label": P, style: { height: b }, className: "grid place-items-center text-graphite", children: "-" }) : /* @__PURE__ */ g(
+    "div",
+    {
+      "data-chart-engine": "tradingview-lightweight-charts",
+      className: ce("relative min-w-0 overflow-hidden bg-surface-canvas", W),
+      style: { height: b },
+      children: [
+        /* @__PURE__ */ c("div", { ref: V, role: "img", "aria-label": P, className: "absolute inset-0" }),
+        /* @__PURE__ */ c("ul", { className: "sr-only", "aria-label": "Chart annotations", children: d.map((t, s) => /* @__PURE__ */ g("li", { children: [
+          t.label ?? t.kind,
+          ": ",
+          t.kind === "level" ? a(t.price) : t.kind === "band" ? `${a(t.from)} – ${a(t.to)}` : `${a(t.from.price)} – ${a(t.to.price)}`
+        ] }, s)) }),
+        f ? /* @__PURE__ */ g("div", { className: "pointer-events-none absolute left-2 top-1 z-10 flex max-w-[calc(100%-4rem)] flex-wrap gap-x-2 font-data text-micro tabular-nums text-graphite", "data-overflow-guard": !0, children: [
+          /* @__PURE__ */ c("span", { className: "font-product text-ash", children: f.label }),
+          /* @__PURE__ */ g("span", { children: [
+            "O ",
+            /* @__PURE__ */ c("b", { className: "font-[500] text-ink", children: a(f.open) })
+          ] }),
+          /* @__PURE__ */ g("span", { children: [
+            "H ",
+            /* @__PURE__ */ c("b", { className: "font-[500] text-ink", children: a(f.high) })
+          ] }),
+          /* @__PURE__ */ g("span", { children: [
+            "L ",
+            /* @__PURE__ */ c("b", { className: "font-[500] text-ink", children: a(f.low) })
+          ] }),
+          /* @__PURE__ */ g("span", { children: [
+            "C ",
+            /* @__PURE__ */ c("b", { className: f.close >= f.open ? "font-[500] text-up" : "font-[500] text-down", children: a(f.close) })
+          ] }),
+          /* @__PURE__ */ g("span", { children: [
+            "Vol ",
+            /* @__PURE__ */ c("b", { className: "font-[500] text-ink", children: f.volume.toLocaleString(O) })
+          ] })
+        ] }) : null,
+        l.map((t) => {
+          const s = J[t.id];
+          if (s === void 0) return null;
+          const r = /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              "aria-label": t.ariaLabel,
+              "data-chart-marker": t.id,
+              "data-chart-marker-time": t.time,
+              className: "absolute z-20 size-7 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0 outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-chart-event focus-visible:ring-offset-2 focus-visible:ring-offset-surface-canvas",
+              style: { left: s.x, top: s.y },
+              onClick: () => o == null ? void 0 : o(t)
+            }
+          );
+          return t.popover ? /* @__PURE__ */ c(
+            ae,
+            {
+              title: t.popoverTitle ?? t.ariaLabel,
+              closeLabel: t.popoverCloseLabel,
+              trigger: r,
+              open: G === t.id,
+              onOpenChange: (z) => A(z ? t.id : null),
+              children: t.popover
+            },
+            t.id
+          ) : /* @__PURE__ */ c("span", { children: r }, t.id);
+        })
+      ]
+    }
+  );
+}
+export {
+  Se as OhlcChart,
+  be as validateOhlcData
+};