@gearbox-protocol/ui-kit 4.0.0-next.1 → 4.0.0-next.3

package/dist/esm/components/graph/graph.js

@@ -1,9 +1,9 @@
 import { jsxs as le, jsx as w } from "react/jsx-runtime";
-import { createChart as at, CrosshairMode as st, LineStyle as te, LineSeries as ct, AreaSeries as ut } from "lightweight-charts";
+import { createChart as it, CrosshairMode as st, LineStyle as te, LineSeries as ct, AreaSeries as ut } from "lightweight-charts";
 import * as xe from "react";
-import { useRef as H, useState as U, useEffect as $, useLayoutEffect as ft } from "react";
+import { useRef as O, useState as U, useEffect as G, useLayoutEffect as ft } from "react";
 import { useIsMobile as ht } from "../../hooks/use-media-query.js";
-import { cn as ie } from "../../utils/cn.js";
+import { cn as ae } from "../../utils/cn.js";
 import { resolveCSSColor as ee, generateColorsFromBase as fe, hslToHex as dt } from "../../utils/colors.js";
 import { getDefaultOptions as Xe, getDefaultSeries as mt, getDefaultVerticalLine as pt } from "./default-config.js";
 import { getXFormatters as qe, formatExactValue as we, createAdaptiveYAxisFormatter as gt } from "./formatters.js";
@@ -14,13 +14,13 @@ class St {
   _yTop;
   _yBottom;
   _color;
-  constructor(l, u, c) {
-    this._yTop = l, this._yBottom = u, this._color = c;
+  constructor(l, u, h) {
+    this._yTop = l, this._yBottom = u, this._color = h;
   }
   draw(l) {
     l.useBitmapCoordinateSpace((u) => {
-      const c = u.context, h = u.verticalPixelRatio, b = this._yTop === null ? 0 : this._yTop * h, L = this._yBottom === null ? u.bitmapSize.height : this._yBottom * h, y = Math.min(b, L), k = Math.max(b, L);
-      c.fillStyle = this._color, c.fillRect(0, y, u.bitmapSize.width, k - y);
+      const h = u.context, c = u.verticalPixelRatio, b = this._yTop === null ? 0 : this._yTop * c, L = this._yBottom === null ? u.bitmapSize.height : this._yBottom * c, x = Math.min(b, L), R = Math.max(b, L);
+      h.fillStyle = this._color, h.fillRect(0, x, u.bitmapSize.width, R - x);
     });
   }
 }
@@ -49,8 +49,8 @@ class xt {
   priceBottom;
   color;
   _paneViews;
-  constructor(l, u, c, h) {
-    this.series = l, this.priceTop = u, this.priceBottom = c, this.color = h, this._paneViews = [new yt(this)];
+  constructor(l, u, h, c) {
+    this.series = l, this.priceTop = u, this.priceBottom = h, this.color = c, this._paneViews = [new yt(this)];
   }
   updateAllViews() {
     for (const l of this._paneViews) l.update();
@@ -59,8 +59,8 @@ class xt {
     return this._paneViews;
   }
 }
-function wt(o, l) {
-  switch (o) {
+function wt(e, l) {
+  switch (e) {
     case te.Dotted:
       return [l, l];
     case te.Dashed:
@@ -78,14 +78,14 @@ class _t {
   _color;
   _lineWidth;
   _lineStyle;
-  constructor(l, u, c, h) {
-    this._y = l, this._color = u, this._lineWidth = c, this._lineStyle = h;
+  constructor(l, u, h, c) {
+    this._y = l, this._color = u, this._lineWidth = h, this._lineStyle = c;
   }
   draw(l) {
     l.useBitmapCoordinateSpace((u) => {
       if (this._y === null) return;
-      const c = u.context, h = u.verticalPixelRatio, b = Math.max(1, Math.round(this._lineWidth * h)), L = Math.round(this._y * h);
-      c.save(), c.strokeStyle = this._color, c.lineWidth = b, c.setLineDash(wt(this._lineStyle, b)), c.beginPath(), c.moveTo(0, L), c.lineTo(u.bitmapSize.width, L), c.stroke(), c.restore();
+      const h = u.context, c = u.verticalPixelRatio, b = Math.max(1, Math.round(this._lineWidth * c)), L = Math.round(this._y * c);
+      h.save(), h.strokeStyle = this._color, h.lineWidth = b, h.setLineDash(wt(this._lineStyle, b)), h.beginPath(), h.moveTo(0, L), h.lineTo(u.bitmapSize.width, L), h.stroke(), h.restore();
     });
   }
 }
@@ -123,8 +123,8 @@ class Tt {
   lineWidth;
   lineStyle;
   _paneViews;
-  constructor(l, u, c, h, b) {
-    this.series = l, this.price = u, this.color = c, this.lineWidth = h, this.lineStyle = b, this._paneViews = [new Nt(this)];
+  constructor(l, u, h, c, b) {
+    this.series = l, this.price = u, this.color = h, this.lineWidth = c, this.lineStyle = b, this._paneViews = [new Nt(this)];
   }
   updateAllViews() {
     for (const l of this._paneViews) l.update();
@@ -133,26 +133,26 @@ class Tt {
     return this._paneViews;
   }
 }
-function Vt(o, l, u) {
-  const c = o.labelText ?? "", h = o.value, b = h === void 0 ? "" : typeof h == "number" ? l === "$" ? `$${we(h, void 0, u)}` : l === "%" ? `${we(h, void 0, u)}%` : we(
-    h,
+function Vt(e, l, u) {
+  const h = e.labelText ?? "", c = e.value, b = c === void 0 ? "" : typeof c == "number" ? l === "$" ? `$${we(c, void 0, u)}` : l === "%" ? `${we(c, void 0, u)}%` : we(
+    c,
     l !== "none" && l !== "%" && l !== "$" ? l : void 0,
     u
-  ) : String(h);
-  return { labelText: c, valueStr: b };
+  ) : String(c);
+  return { labelText: h, valueStr: b };
 }
 const Ze = 4;
-function Pt(o, l, u) {
-  const c = { left: o, transform: "translateX(-50%)" };
+function Pt(e, l, u) {
+  const h = { left: e, transform: "translateX(-50%)" };
   if (l <= 0 || !u || u <= 0)
-    return c;
-  const h = u / 2, b = Ze + h, L = l - Ze - h;
-  return L < b ? { left: l / 2, transform: "translateX(-50%)" } : { left: Math.min(Math.max(o, b), L), transform: "translateX(-50%)" };
+    return h;
+  const c = u / 2, b = Ze + c, L = l - Ze - c;
+  return L < b ? { left: l / 2, transform: "translateX(-50%)" } : { left: Math.min(Math.max(e, b), L), transform: "translateX(-50%)" };
 }
-function Lt(o, l) {
-  for (let u = o.length - 1; u >= 0; u--)
-    if (Number(o[u].time) <= l)
-      return o[u].value;
+function Lt(e, l) {
+  for (let u = e.length - 1; u >= 0; u--)
+    if (Number(e[u].time) <= l)
+      return e[u].value;
   return 0;
 }
 const _e = [
@@ -271,25 +271,25 @@ const _e = [
     bottom: "rgba(71, 85, 105, 0.04)"
   }
 ], Rt = 137.5;
-function Ke(o) {
-  if (o < _e.length)
-    return _e[o];
-  const u = (o - _e.length) * Rt % 360, c = dt(u, 70, 50), { topColor: h, bottomColor: b } = fe(c);
-  return { line: c, top: h, bottom: b };
+function Ke(e) {
+  if (e < _e.length)
+    return _e[e];
+  const u = (e - _e.length) * Rt % 360, h = dt(u, 70, 50), { topColor: c, bottomColor: b } = fe(h);
+  return { line: h, top: c, bottom: b };
 }
 function Ot({
-  series: o,
+  series: e,
   className: l,
   showLegend: u = !1,
-  onUnselectSeries: c,
-  xMeasureUnit: h = "time",
+  onUnselectSeries: h,
+  xMeasureUnit: c = "time",
   yMeasureUnit: b = "token",
   optionsOverrides: L,
-  verticalLineOptions: y,
-  priceLineOptions: k,
-  zoneOptions: O,
+  verticalLineOptions: x,
+  priceLineOptions: R,
+  zoneOptions: E,
   currentValueDecimals: he,
-  useSharedPriceScale: G = !1,
+  useSharedPriceScale: j = !1,
   dualYAxis: I = !1,
   defaultVisiblePriceScaleId: Ne = "right",
   leftPriceScaleTitle: Te,
@@ -299,41 +299,41 @@ function Ot({
   yScaleMin: Ve,
   yScaleMinMultiple: Pe,
   visibleTimeFrom: K,
-  disableZoom: ae = !1,
+  disableZoom: ie = !1,
   hideDefaultTooltip: me = !1
 }) {
-  const E = H(null), x = H(/* @__PURE__ */ new Map()), pe = H(!1), Le = H(!0), Re = H([]), B = H(null), ge = H(null), se = H(null), V = ht(), X = xe.useMemo(() => o.flatMap((e) => e.data), [o]), Qe = xe.useMemo(() => {
-    if (o.length > 0) {
-      const e = o[o.length - 1];
-      if (e.data.length > 0)
-        return e.data[e.data.length - 1];
+  const W = O(null), y = O(/* @__PURE__ */ new Map()), pe = O(!1), Le = O(!0), Re = O([]), B = O(null), ge = O(null), se = O(null), V = ht(), X = xe.useMemo(() => e.flatMap((t) => t.data), [e]), Qe = xe.useMemo(() => {
+    if (e.length > 0) {
+      const t = e[e.length - 1];
+      if (t.data.length > 0)
+        return t.data[t.data.length - 1];
     }
-  }, [o]), [Me, be] = U(() => {
+  }, [e]), [Me, be] = U(() => {
     if (!Qe) return;
-    const e = /* @__PURE__ */ new Map();
-    for (const a of o)
-      a.data.length > 0 && e.set(a.label, a.data[a.data.length - 1]);
-    return e;
-  }), [ke, q] = U(null), [De, Ie] = U([]), [Ye, Be] = U(0), Fe = H(/* @__PURE__ */ new Map()), [Ue, et] = U({}), [ce, tt] = U(0);
-  $(() => {
-    const e = () => {
+    const t = /* @__PURE__ */ new Map();
+    for (const i of e)
+      i.data.length > 0 && t.set(i.label, i.data[i.data.length - 1]);
+    return t;
+  }), [ke, q] = U(null), [De, Ie] = U([]), [Ye, Be] = U(0), Fe = O(/* @__PURE__ */ new Map()), [Ue, et] = U({}), [ce, tt] = U(0);
+  G(() => {
+    const t = () => {
       try {
-        if (B.current && Be(B.current.clientWidth), E.current && B.current) {
-          const s = B.current.clientWidth, i = B.current.clientHeight;
-          E.current.resize(s, i);
+        if (B.current && Be(B.current.clientWidth), W.current && B.current) {
+          const s = B.current.clientWidth, a = B.current.clientHeight;
+          W.current.resize(s, a);
         }
       } catch {
       }
-    }, a = B.current, n = a ? new ResizeObserver(e) : null;
-    return se.current = n, a && n?.observe(a), () => {
-      a && n?.unobserve(a), n?.disconnect(), se.current = null;
+    }, i = B.current, n = i ? new ResizeObserver(t) : null;
+    return se.current = n, i && n?.observe(i), () => {
+      i && n?.unobserve(i), n?.disconnect(), se.current = null;
     };
-  }, []), $(() => {
+  }, []), G(() => {
     if (!ge.current || pe.current) return;
-    const e = Xe(), a = ee(
+    const t = Xe(), i = ee(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), n = ae ? {
+    ), n = ie ? {
       handleScale: {
         mouseWheel: !1,
         pinch: !1,
@@ -346,34 +346,34 @@ function Ot({
         horzTouchDrag: !1,
         vertTouchDrag: !1
       }
-    } : {}, s = at(ge.current, {
-      ...e,
+    } : {}, s = it(ge.current, {
+      ...t,
       leftPriceScale: {
-        ...e.leftPriceScale || {},
+        ...t.leftPriceScale || {},
         visible: !1,
-        textColor: a
+        textColor: i
       },
       rightPriceScale: {
-        ...e.rightPriceScale || {},
+        ...t.rightPriceScale || {},
         visible: !V,
-        textColor: a
+        textColor: i
       },
       ...V && {
         crosshair: {
-          ...e.crosshair,
+          ...t.crosshair,
           mode: st.Magnet
         }
       },
       ...n,
       ...L
     });
-    return E.current = s, pe.current = !0, tt((i) => i + 1), () => {
-      se.current?.disconnect(), se.current = null, s.remove(), E.current = null, pe.current = !1, x.current.clear();
+    return W.current = s, pe.current = !0, tt((a) => a + 1), () => {
+      se.current?.disconnect(), se.current = null, s.remove(), W.current = null, pe.current = !1, y.current.clear();
     };
-  }, [V, L, ae]), $(() => {
-    const e = E.current;
-    e && e.applyOptions(
-      ae ? {
+  }, [V, L, ie]), G(() => {
+    const t = W.current;
+    t && t.applyOptions(
+      ie ? {
         handleScale: {
           mouseWheel: !1,
           pinch: !1,
@@ -401,53 +401,53 @@ function Ot({
         }
       }
     );
-  }, [ae]), $(() => {
-    const e = E.current;
-    if (!e || o.length === 0) return;
-    const n = o.filter((r) => r.data.length > 0).length <= 1 ? Ve : Pe, s = h === "time" ? qe(h, X) : qe(h), i = /* @__PURE__ */ new Map();
+  }, [ie]), G(() => {
+    const t = W.current;
+    if (!t || e.length === 0) return;
+    const n = e.filter((r) => r.data.length > 0).length <= 1 ? Ve : Pe, s = c === "time" ? qe(c, X) : qe(c), a = /* @__PURE__ */ new Map();
     {
       let r = 0;
-      for (const t of o)
-        t.data.length !== 0 && (i.set(
-          t.label,
-          t.priceScaleId ?? (r === 0 ? "left" : "right")
+      for (const o of e)
+        o.data.length !== 0 && (a.set(
+          o.label,
+          o.priceScaleId ?? (r === 0 ? "left" : "right")
         ), r++);
     }
-    const f = (r, t, m) => {
+    const f = (r, o, m) => {
       const {
         formatter: D,
         tickmarksFormatter: T,
-        updateVisibleRange: A,
+        updateVisibleRange: $,
         updateLastValues: We
-      } = gt(r, t, {
+      } = gt(r, o, {
         yScaleMin: n
-      }), Ce = o.filter((J) => J.data.length > 0 && m.has(J.label)).map((J) => J.data[J.data.length - 1].value);
-      return We(Ce), { formatter: D, tickmarksFormatter: T, updateVisibleRange: A, labels: m };
+      }), Ce = e.filter((J) => J.data.length > 0 && m.has(J.label)).map((J) => J.data[J.data.length - 1].value);
+      return We(Ce), { formatter: D, tickmarksFormatter: T, updateVisibleRange: $, labels: m };
     }, d = [];
     if (I)
       for (const r of ["left", "right"]) {
-        const t = /* @__PURE__ */ new Set(), m = [];
+        const o = /* @__PURE__ */ new Set(), m = [];
         let D = b;
-        for (const T of o)
-          if (T.data.length !== 0 && i.get(T.label) === r) {
-            t.size === 0 && T.yMeasureUnit && (D = T.yMeasureUnit), t.add(T.label);
-            for (const A of T.data) m.push(A.value);
+        for (const T of e)
+          if (T.data.length !== 0 && a.get(T.label) === r) {
+            o.size === 0 && T.yMeasureUnit && (D = T.yMeasureUnit), o.add(T.label);
+            for (const $ of T.data) m.push($.value);
           }
-        t.size > 0 && d.push(f(m, D, t));
+        o.size > 0 && d.push(f(m, D, o));
       }
     else {
-      const r = X.map((m) => m.value), t = new Set(
-        o.filter((m) => m.data.length > 0).map((m) => m.label)
+      const r = X.map((m) => m.value), o = new Set(
+        e.filter((m) => m.data.length > 0).map((m) => m.label)
       );
-      d.push(f(r, b, t));
+      d.push(f(r, b, o));
     }
     Re.current = d;
     const v = /* @__PURE__ */ new Map();
     for (const r of d)
-      for (const t of r.labels)
-        v.set(t, r);
+      for (const o of r.labels)
+        v.set(o, r);
     const C = Xe();
-    e.applyOptions({
+    t.applyOptions({
       localization: {
         ...C.localization || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
@@ -463,26 +463,26 @@ function Ot({
         minBarSpacing: 0
       }
     });
-    const P = (X.length > 0 ? Math.min(...X.map((r) => r.value)) : 0) < 0, _ = X.some((r) => r.value === 0), p = !P && _, S = !I && o.length > 1 && !G, R = I ? V : o.length > 1 && !G || V, M = ee(
+    const P = (X.length > 0 ? Math.min(...X.map((r) => r.value)) : 0) < 0, _ = X.some((r) => r.value === 0), p = !P && _, S = !I && e.length > 1 && !j, M = I ? V : e.length > 1 && !j || V, k = ee(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
-    e.applyOptions({
+    t.applyOptions({
       ...I && {
         defaultVisiblePriceScaleId: Ne
       },
       leftPriceScale: {
         ...C.leftPriceScale || {},
         visible: I && !V,
-        textColor: M,
+        textColor: k,
         ...I && Te && {
           // lightweight-charts uses scale margins; title shown via localization if needed
         }
       },
       rightPriceScale: {
         ...C.rightPriceScale || {},
-        visible: I ? !V : !R,
-        textColor: M,
+        visible: I ? !V : !M,
+        textColor: k,
         ...p && !I && {
           scaleMargins: {
             top: 0.3,
@@ -491,73 +491,73 @@ function Ot({
         }
       }
     });
-    const N = new Set(x.current.keys()), Z = new Set(o.map((r) => r.label));
+    const N = new Set(y.current.keys()), Z = new Set(e.map((r) => r.label));
     for (const r of N)
       if (!Z.has(r)) {
-        const t = x.current.get(r);
-        t && (e.removeSeries(t), x.current.delete(r));
+        const o = y.current.get(r);
+        o && (t.removeSeries(o), y.current.delete(r));
       }
     const Q = mt(), oe = [];
     let re = 0;
-    const Ee = o.find((r) => r.data.length > 0), ne = /* @__PURE__ */ new Map();
-    if (k && k.length > 0)
-      for (const r of k) {
+    const Ee = e.find((r) => r.data.length > 0), ne = /* @__PURE__ */ new Map();
+    if (R && R.length > 0)
+      for (const r of R) {
         if (!Number.isFinite(r.price)) continue;
-        const t = r.seriesLabel ?? Ee?.label;
-        if (!t) continue;
-        const m = ne.get(t) ?? [];
-        m.push(r.price), ne.set(t, m);
+        const o = r.seriesLabel ?? Ee?.label;
+        if (!o) continue;
+        const m = ne.get(o) ?? [];
+        m.push(r.price), ne.set(o, m);
       }
-    if (O && O.length > 0)
-      for (const r of O) {
-        const t = r.seriesLabel ?? Ee?.label;
-        if (!t) continue;
-        const m = ne.get(t) ?? [];
-        Number.isFinite(r.priceTop) && m.push(r.priceTop), Number.isFinite(r.priceBottom) && m.push(r.priceBottom), ne.set(t, m);
+    if (E && E.length > 0)
+      for (const r of E) {
+        const o = r.seriesLabel ?? Ee?.label;
+        if (!o) continue;
+        const m = ne.get(o) ?? [];
+        Number.isFinite(r.priceTop) && m.push(r.priceTop), Number.isFinite(r.priceBottom) && m.push(r.priceBottom), ne.set(o, m);
       }
-    for (let r = 0; r < o.length; r++) {
-      const t = o[r], m = Ke(r), D = t.lineColor ?? t.color ?? m.line;
-      let T, A;
-      if (t.lineColor ?? t.color)
-        if (t.topColor && t.bottomColor)
-          T = t.topColor, A = t.bottomColor;
-        else if (t.topColor) {
+    for (let r = 0; r < e.length; r++) {
+      const o = e[r], m = Ke(r), D = o.lineColor ?? o.color ?? m.line;
+      let T, $;
+      if (o.lineColor ?? o.color)
+        if (o.topColor && o.bottomColor)
+          T = o.topColor, $ = o.bottomColor;
+        else if (o.topColor) {
           const g = fe(D);
-          T = t.topColor, A = g.bottomColor;
-        } else if (t.bottomColor)
-          T = fe(D).topColor, A = t.bottomColor;
+          T = o.topColor, $ = g.bottomColor;
+        } else if (o.bottomColor)
+          T = fe(D).topColor, $ = o.bottomColor;
         else {
           const g = fe(D);
-          T = g.topColor, A = g.bottomColor;
+          T = g.topColor, $ = g.bottomColor;
         }
       else
-        T = t.topColor || m.top, A = t.bottomColor || m.bottom;
-      if (t.data.length === 0) {
-        const g = x.current.get(t.label);
-        g && (e.removeSeries(g), x.current.delete(t.label));
+        T = o.topColor || m.top, $ = o.bottomColor || m.bottom;
+      if (o.data.length === 0) {
+        const g = y.current.get(o.label);
+        g && (t.removeSeries(g), y.current.delete(o.label));
         continue;
       }
-      const Ce = (t.data.length > 0 ? Math.min(...t.data.map((g) => g.value)) : 0) < 0, J = t.data.some((g) => g.value === 0), ot = !Ce && J, Ae = I ? t.priceScaleId ?? (re === 0 ? "left" : "right") : G || !S || re === 0 ? "right" : `scale-${re}`;
+      const Ce = (o.data.length > 0 ? Math.min(...o.data.map((g) => g.value)) : 0) < 0, J = o.data.some((g) => g.value === 0), ot = !Ce && J, Ae = I ? o.priceScaleId ?? (re === 0 ? "left" : "right") : j || !S || re === 0 ? "right" : `scale-${re}`;
       S && oe.push({
         priceScaleId: Ae || "right",
         shouldPreventNegativeAxis: ot,
         seriesIndex: re
       });
-      const $e = (G || !S) && n !== void 0 && typeof n == "number", rt = ne.get(t.label) ?? [], nt = (g) => {
+      const $e = (j || !S) && n !== void 0 && typeof n == "number", rt = ne.get(o.label) ?? [], nt = (g) => {
         const z = g();
         if (z?.priceRange) {
           $e && (z.priceRange.minValue = n);
-          for (const j of rt)
-            j < z.priceRange.minValue && (z.priceRange.minValue = j), j > z.priceRange.maxValue && (z.priceRange.maxValue = j);
+          for (const H of rt)
+            H < z.priceRange.minValue && (z.priceRange.minValue = H), H > z.priceRange.maxValue && (z.priceRange.maxValue = H);
         }
         return z;
-      }, Ge = v.get(t.label) ?? d[0], je = Ge.formatter, lt = Ge.tickmarksFormatter, Se = {
+      }, Ge = v.get(o.label) ?? d[0], je = Ge.formatter, lt = Ge.tickmarksFormatter, Se = {
         lineColor: D,
         topColor: T,
-        bottomColor: A,
+        bottomColor: $,
         priceScaleId: Ae,
-        ...t.seriesType === "line" && {
-          lineStyle: t.lineStyle ?? te.Solid
+        ...o.seriesType === "line" && {
+          lineStyle: o.lineStyle ?? te.Solid
         },
         priceFormat: {
           type: "custom",
@@ -568,29 +568,29 @@ function Ot({
           tickmarksFormatter: lt
         },
         autoscaleInfoProvider: nt
-      }, He = t.seriesType === "line";
-      let F = x.current.get(t.label);
-      const Y = t.data.map((g) => ({
+      }, He = o.seriesType === "line";
+      let F = y.current.get(o.label);
+      const Y = o.data.map((g) => ({
         ...g,
         time: g.time
       }));
       if (K !== void 0 && Y.length > 0 && Number(Y[0].time) > K) {
-        const g = Number(Y[0].time), z = g - K, j = 86400, it = z > 180 * j ? 7 * j : z > 30 * j ? j : 6 * 3600, Oe = [];
-        for (let ye = K; ye < g; ye += it)
+        const g = Number(Y[0].time), z = g - K, H = 86400, at = z > 180 * H ? 7 * H : z > 30 * H ? H : 6 * 3600, Oe = [];
+        for (let ye = K; ye < g; ye += at)
           Oe.push({ time: ye });
         Y.unshift(...Oe);
       }
-      F && F.seriesType() !== (He ? "Line" : "Area") && (e.removeSeries(F), x.current.delete(t.label), F = void 0), F ? (F.applyOptions(Se), F.setData(Y)) : (He ? F = e.addSeries(ct, {
+      F && F.seriesType() !== (He ? "Line" : "Area") && (t.removeSeries(F), y.current.delete(o.label), F = void 0), F ? (F.applyOptions(Se), F.setData(Y)) : (He ? F = t.addSeries(ct, {
         ...Q,
         ...Se
-      }) : F = e.addSeries(ut, {
+      }) : F = t.addSeries(ut, {
         ...Q,
         ...Se
-      }), F.setData(Y), x.current.set(t.label, F)), re++;
+      }), F.setData(Y), y.current.set(o.label, F)), re++;
     }
     if (I)
       try {
-        const r = e.priceScale("left"), t = e.priceScale("right"), m = {
+        const r = t.priceScale("left"), o = t.priceScale("right"), m = {
           visible: !V,
           autoScale: !0,
           scaleMargins: { top: 0.1, bottom: 0.1 },
@@ -598,16 +598,16 @@ function Ot({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: M
+          textColor: k
         };
-        r?.applyOptions(m), t?.applyOptions(m);
+        r?.applyOptions(m), o?.applyOptions(m);
       } catch {
       }
     else if (S && oe.length > 0)
       for (const r of oe)
         try {
-          const t = e.priceScale(r.priceScaleId);
-          t && t.applyOptions({
+          const o = t.priceScale(r.priceScaleId);
+          o && o.applyOptions({
             visible: !1,
             autoScale: !0,
             scaleMargins: {
@@ -622,17 +622,17 @@ function Ot({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: M
+            textColor: k
           });
-        } catch (t) {
+        } catch (o) {
           console.warn(
             `Failed to configure price scale ${r.priceScaleId} for series ${r.seriesIndex}:`,
-            t
+            o
           );
         }
     else if (!S)
       try {
-        const r = e.priceScale("right");
+        const r = t.priceScale("right");
         r && r.applyOptions({
           visible: !V,
           autoScale: !0,
@@ -648,24 +648,24 @@ function Ot({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: M
+          textColor: k
         });
       } catch {
       }
-    if (n !== void 0 && !V && (G || !S) && e.applyOptions({
+    if (n !== void 0 && !V && (j || !S) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
     }), X.length > 0) {
-      const r = X.map((t) => Number(t.time)).filter((t) => Number.isFinite(t));
+      const r = X.map((o) => Number(o.time)).filter((o) => Number.isFinite(o));
       if (r.length > 0) {
-        const t = Math.min(...r), m = K !== void 0 ? Math.min(K, t) : t, D = Math.max(...r);
+        const o = Math.min(...r), m = K !== void 0 ? Math.min(K, o) : o, D = Math.max(...r);
         if (Number(m) <= Number(D))
           try {
-            e.timeScale().setVisibleRange({ from: m, to: D });
+            t.timeScale().setVisibleRange({ from: m, to: D });
           } catch {
             try {
-              e.timeScale().fitContent();
+              t.timeScale().fitContent();
             } catch {
             }
           }
@@ -673,62 +673,62 @@ function Ot({
     }
     Le.current && (Le.current = !1);
     const ve = /* @__PURE__ */ new Map();
-    for (const r of o)
+    for (const r of e)
       r.data.length > 0 && ve.set(r.label, r.data[r.data.length - 1]);
     be(ve.size > 0 ? ve : void 0);
   }, [
-    o,
+    e,
     X,
-    h,
+    c,
     b,
     V,
-    G,
+    j,
     I,
     Ne,
     Te,
     Ve,
     Pe,
     K,
-    k,
-    O
-  ]), $(() => {
-    const e = E.current;
-    if (!e || o.length === 0) return;
-    const a = o.length === 1;
+    R,
+    E
+  ]), G(() => {
+    const t = W.current;
+    if (!t || e.length === 0) return;
+    const i = e.length === 1;
     let n;
-    for (const i of o)
-      if (i.data.length > 0) {
-        n = i.data[i.data.length - 1].time;
+    for (const a of e)
+      if (a.data.length > 0) {
+        n = a.data[a.data.length - 1].time;
         break;
       }
     if (!n) return;
-    const s = (i) => {
-      const { time: f = n, seriesData: d, point: v } = i || {}, C = Array.from(x.current.values());
+    const s = (a) => {
+      const { time: f = n, seriesData: d, point: v } = a || {}, C = Array.from(y.current.values());
       if (!v || !f) {
         const _ = /* @__PURE__ */ new Map();
-        for (const p of o)
+        for (const p of e)
           p.data.length > 0 && _.set(p.label, p.data[p.data.length - 1]);
-        if (be(_.size > 0 ? _ : void 0), a || G || me)
+        if (be(_.size > 0 ? _ : void 0), i || j || me)
           q(null);
         else if (C[0] && n) {
-          const S = e.timeScale().timeToCoordinate(n), R = o[0];
-          if (R.data.length > 0) {
-            const M = R.data[R.data.length - 1].value, N = C[0].priceToCoordinate(M);
+          const S = t.timeScale().timeToCoordinate(n), M = e[0];
+          if (M.data.length > 0) {
+            const k = M.data[M.data.length - 1].value, N = C[0].priceToCoordinate(k);
             S !== null && N !== null && q({ x: S, y: N });
           }
         }
         return;
       }
-      const W = /* @__PURE__ */ new Map();
+      const A = /* @__PURE__ */ new Map();
       let P;
-      for (let _ = 0; _ < o.length; _++) {
-        const p = o[_], S = x.current.get(p.label);
+      for (let _ = 0; _ < e.length; _++) {
+        const p = e[_], S = y.current.get(p.label);
         if (!S) continue;
-        const R = d?.get(S), M = R && "value" in R ? R.value : void 0;
+        const M = d?.get(S), k = M && "value" in M ? M.value : void 0;
         let N;
-        if (M !== void 0)
-          N = M;
-        else if (a) {
+        if (k !== void 0)
+          N = k;
+        else if (i) {
           const Z = Number(f), Q = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
           Z < Q ? N = Number.NaN : N = p.data[p.data.length - 1]?.value ?? 0;
         } else {
@@ -736,18 +736,18 @@ function Ot({
           if (Number(f) < Z) continue;
           N = Lt(p.data, Number(f));
         }
-        Number.isNaN(N) || (P === void 0 && (P = N), W.set(p.label, { value: N, time: f }));
+        Number.isNaN(N) || (P === void 0 && (P = N), A.set(p.label, { value: N, time: f }));
       }
-      if (be(W), P !== void 0 && C[0]) {
-        const p = e.timeScale().timeToCoordinate(f), S = C[0].priceToCoordinate(P);
+      if (be(A), P !== void 0 && C[0]) {
+        const p = t.timeScale().timeToCoordinate(f), S = C[0].priceToCoordinate(P);
         if (p !== null && S !== null) {
-          const R = B.current;
-          if (R) {
-            const M = R.querySelector(
+          const M = B.current;
+          if (M) {
+            const k = M.querySelector(
               ".LightweightChart"
             );
-            if (M) {
-              const N = M.getBoundingClientRect(), Z = R.getBoundingClientRect(), Q = p + (N.left - Z.left), oe = S + (N.top - Z.top);
+            if (k) {
+              const N = k.getBoundingClientRect(), Z = M.getBoundingClientRect(), Q = p + (N.left - Z.left), oe = S + (N.top - Z.top);
               q({ x: Q, y: oe });
             } else
               q({ x: p, y: S });
@@ -758,170 +758,170 @@ function Ot({
       } else
         q(null);
     };
-    return e.subscribeCrosshairMove(s), V && e.subscribeClick(s), !a && !G && !me && requestAnimationFrame(() => {
-      const i = Array.from(x.current.values());
-      if (i[0] && n && o[0]?.data.length > 0) {
-        const d = e.timeScale().timeToCoordinate(n), v = o[0].data[o[0].data.length - 1].value, C = i[0].priceToCoordinate(v);
+    return t.subscribeCrosshairMove(s), V && t.subscribeClick(s), !i && !j && !me && requestAnimationFrame(() => {
+      const a = Array.from(y.current.values());
+      if (a[0] && n && e[0]?.data.length > 0) {
+        const d = t.timeScale().timeToCoordinate(n), v = e[0].data[e[0].data.length - 1].value, C = a[0].priceToCoordinate(v);
         d !== null && C !== null && q({ x: d, y: C });
       }
     }), () => {
-      e.unsubscribeCrosshairMove(s), V && e.unsubscribeClick(s);
+      t.unsubscribeCrosshairMove(s), V && t.unsubscribeClick(s);
     };
-  }, [o, G, V, me]), $(() => {
-    const e = E.current;
-    if (!e || o.length === 0) return;
-    const a = e.timeScale(), n = () => {
+  }, [e, j, V, me]), G(() => {
+    const t = W.current;
+    if (!t || e.length === 0) return;
+    const i = t.timeScale(), n = () => {
       const s = Re.current;
       if (s.length === 0) return;
-      const i = a.getVisibleRange();
-      if (!i) return;
-      const f = Number(i.from), d = Number(i.to);
+      const a = i.getVisibleRange();
+      if (!a) return;
+      const f = Number(a.from), d = Number(a.to);
       for (const v of s) {
         const C = [];
-        for (const W of o)
-          if (v.labels.has(W.label))
-            for (const P of W.data) {
+        for (const A of e)
+          if (v.labels.has(A.label))
+            for (const P of A.data) {
               const _ = Number(P.time);
               _ >= f && _ <= d && C.push(P.value);
             }
         C.length > 0 && v.updateVisibleRange(C);
       }
     };
-    return a.subscribeVisibleLogicalRangeChange(n), () => {
-      a.unsubscribeVisibleLogicalRangeChange(
+    return i.subscribeVisibleLogicalRangeChange(n), () => {
+      i.unsubscribeVisibleLogicalRangeChange(
         n
       );
     };
-  }, [o]), $(() => {
-    const e = E.current, a = Array.from(x.current.values()), n = [];
-    if (e && a.length > 0 && y) {
-      const s = pt(), i = a[0];
-      for (const f of y) {
+  }, [e]), G(() => {
+    const t = W.current, i = Array.from(y.current.values()), n = [];
+    if (t && i.length > 0 && x) {
+      const s = pt(), a = i[0];
+      for (const f of x) {
         const d = {
           ...s,
           ...f.options || {}
         };
         d.color && (d.color = ee(d.color, d.color));
-        const v = new Ct(e, i, f.xCoordinate, d);
-        i.attachPrimitive(v), n.push(v);
+        const v = new Ct(t, a, f.xCoordinate, d);
+        a.attachPrimitive(v), n.push(v);
       }
     }
     return () => {
-      if (a.length > 0) {
-        const s = a[0];
-        for (const i of n)
+      if (i.length > 0) {
+        const s = i[0];
+        for (const a of n)
           try {
-            s.detachPrimitive(i);
+            s.detachPrimitive(a);
           } catch {
           }
       }
     };
-  }, [y, o, ce]), $(() => {
-    const e = [], a = [];
-    if (k && k.length > 0) {
-      const n = Array.from(x.current.values())[0], s = ee(
+  }, [x, e, ce]), G(() => {
+    const t = [], i = [];
+    if (R && R.length > 0) {
+      const n = Array.from(y.current.values())[0], s = ee(
         "hsl(var(--destructive))",
         "rgb(239, 68, 68)"
       );
-      for (const i of k) {
-        if (!Number.isFinite(i.price)) continue;
-        const f = i.seriesLabel ? x.current.get(i.seriesLabel) : n;
+      for (const a of R) {
+        if (!Number.isFinite(a.price)) continue;
+        const f = a.seriesLabel ? y.current.get(a.seriesLabel) : n;
         if (!f) continue;
-        const d = i.color ? ee(i.color, i.color) : s, v = i.lineWidth ?? 1, C = i.lineStyle ?? te.Dashed, W = f.createPriceLine({
-          price: i.price,
+        const d = a.color ? ee(a.color, a.color) : s, v = a.lineWidth ?? 1, C = a.lineStyle ?? te.Dashed, A = f.createPriceLine({
+          price: a.price,
           color: d,
           lineWidth: v,
           lineStyle: C,
-          axisLabelVisible: i.axisLabelVisible ?? !0,
-          title: i.title ?? ""
+          axisLabelVisible: a.axisLabelVisible ?? !0,
+          title: a.title ?? ""
         });
-        e.push({ series: f, line: W });
+        t.push({ series: f, line: A });
         const P = new Tt(
           f,
-          i.price,
+          a.price,
           d,
           v,
           C
         );
-        f.attachPrimitive(P), a.push({ series: f, primitive: P });
+        f.attachPrimitive(P), i.push({ series: f, primitive: P });
       }
     }
     return () => {
-      for (const { series: n, primitive: s } of a)
+      for (const { series: n, primitive: s } of i)
         try {
           n.detachPrimitive(s);
         } catch {
         }
-      for (const { series: n, line: s } of e)
+      for (const { series: n, line: s } of t)
         try {
           n.removePriceLine(s);
         } catch {
         }
     };
-  }, [k, o, ce]), $(() => {
-    const e = [];
-    if (O && O.length > 0) {
-      const a = Array.from(x.current.values())[0], n = "rgba(239, 68, 68, 0.12)";
-      for (const s of O) {
-        const i = s.seriesLabel ? x.current.get(s.seriesLabel) : a;
-        if (!i) continue;
+  }, [R, e, ce]), G(() => {
+    const t = [];
+    if (E && E.length > 0) {
+      const i = Array.from(y.current.values())[0], n = "rgba(239, 68, 68, 0.12)";
+      for (const s of E) {
+        const a = s.seriesLabel ? y.current.get(s.seriesLabel) : i;
+        if (!a) continue;
         const f = s.color ? ee(s.color, n) : n, d = new xt(
-          i,
+          a,
           s.priceTop,
           s.priceBottom,
           f
         );
-        i.attachPrimitive(d), e.push({ series: i, zone: d });
+        a.attachPrimitive(d), t.push({ series: a, zone: d });
       }
     }
     return () => {
-      for (const { series: a, zone: n } of e)
+      for (const { series: i, zone: n } of t)
         try {
-          a.detachPrimitive(n);
+          i.detachPrimitive(n);
         } catch {
         }
     };
-  }, [O, o, ce]), $(() => {
-    const e = E.current;
-    if (!e || !y?.length) {
+  }, [E, e, ce]), G(() => {
+    const t = W.current;
+    if (!t || !x?.length) {
       Ie([]);
       return;
     }
-    const a = () => {
-      const i = e.timeScale(), f = y.map((d) => i.timeToCoordinate(d.xCoordinate) ?? null);
+    const i = () => {
+      const a = t.timeScale(), f = x.map((d) => a.timeToCoordinate(d.xCoordinate) ?? null);
       Ie(f), B.current && Be(B.current.clientWidth);
     };
-    a();
-    const n = e.timeScale(), s = () => {
-      a();
+    i();
+    const n = t.timeScale(), s = () => {
+      i();
     };
     return n.subscribeVisibleLogicalRangeChange(s), () => {
       n.unsubscribeVisibleLogicalRangeChange(s);
     };
-  }, [y, o, ce]), ft(() => {
-    et((e) => {
-      const a = {};
+  }, [x, e, ce]), ft(() => {
+    et((t) => {
+      const i = {};
       let n = !1;
-      for (const [s, i] of Fe.current) {
-        if (!i) continue;
-        const f = i.offsetWidth;
-        a[s] = f, e[s] !== f && (n = !0);
+      for (const [s, a] of Fe.current) {
+        if (!a) continue;
+        const f = a.offsetWidth;
+        i[s] = f, t[s] !== f && (n = !0);
       }
-      return Object.keys(e).length !== Object.keys(a).length && (n = !0), n ? a : e;
+      return Object.keys(t).length !== Object.keys(i).length && (n = !0), n ? i : t;
     });
   });
-  const ue = o.length === 1, ze = xe.useMemo(() => {
-    if (ue && o.length > 0) {
-      const e = o[0];
-      if (e.data.length > 0)
-        return e.data[e.data.length - 1];
+  const ue = e.length === 1, ze = xe.useMemo(() => {
+    if (ue && e.length > 0) {
+      const t = e[0];
+      if (t.data.length > 0)
+        return t.data[t.data.length - 1];
     }
-  }, [ue, o]);
+  }, [ue, e]);
   return /* @__PURE__ */ le(
     "div",
     {
       ref: B,
-      className: ie(
+      className: ae(
         "relative z-[1] w-full h-full overflow-hidden p-0",
         l
       ),
@@ -930,7 +930,7 @@ function Ot({
           bt,
           {
             point: ze,
-            xMeasureUnit: h,
+            xMeasureUnit: c,
             yMeasureUnit: b,
             decimals: he
           }
@@ -939,52 +939,52 @@ function Ot({
           vt,
           {
             points: Me,
-            xMeasureUnit: h,
+            xMeasureUnit: c,
             yMeasureUnit: b,
-            series: o,
+            series: e,
             position: ke,
             containerRef: B,
             decimals: he
           }
         ),
-        u && /* @__PURE__ */ w(Mt, { series: o, onUnselect: c }),
-        y && y.length > 0 && De.length === y.length && /* @__PURE__ */ w(
+        u && /* @__PURE__ */ w(Mt, { series: e, onUnselect: h }),
+        x && x.length > 0 && De.length === x.length && /* @__PURE__ */ w(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            children: y.map((e, a) => {
-              const n = De[a], s = e.options ?? {}, i = s.showLabel !== !1;
-              if (n === null || !i) return null;
+            children: x.map((t, i) => {
+              const n = De[i], s = t.options ?? {}, a = s.showLabel !== !1;
+              if (n === null || !a) return null;
               const { labelText: f, valueStr: d } = Vt(
                 s,
                 b,
                 he
               ), v = s.tooltipText ?? "";
               if (!(f || d || v)) return null;
-              const W = s.labelBackgroundColor ?? s.color ?? "hsl(var(--background))", P = s.labelTextColor ?? "hsl(var(--foreground))", _ = `${String(e.xCoordinate)}-${f}-${v}`, p = Pt(
+              const A = s.labelBackgroundColor ?? s.color ?? "hsl(var(--background))", P = s.labelTextColor ?? "hsl(var(--foreground))", _ = `${String(t.xCoordinate)}-${f}-${v}`, p = Pt(
                 n,
                 Ye,
-                Ue[a]
+                Ue[i]
               );
               return /* @__PURE__ */ le(
                 "div",
                 {
                   ref: (S) => {
-                    Fe.current.set(a, S);
+                    Fe.current.set(i, S);
                   },
-                  className: ie(
+                  className: ae(
                     "group absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
                     v && "pointer-events-auto cursor-default"
                   ),
                   style: {
                     ...p,
-                    backgroundColor: W,
+                    backgroundColor: A,
                     color: P
                   },
                   children: [
                     f && /* @__PURE__ */ w("span", { className: "block", children: f }),
-                    d && /* @__PURE__ */ w("span", { className: ie("block", f && "mt-0.5"), children: d }),
+                    d && /* @__PURE__ */ w("span", { className: ae("block", f && "mt-0.5"), children: d }),
                     v && /* @__PURE__ */ w(
                       "span",
                       {
@@ -1012,44 +1012,45 @@ function Ot({
   );
 }
 function Mt({
-  series: o,
+  series: e,
   onUnselect: l,
   inline: u = !1
 }) {
+  const h = e.every((c) => c.data.length === 0);
   return /* @__PURE__ */ w(
     "div",
     {
-      className: ie(
+      className: ae(
         "flex flex-wrap gap-2",
         u ? "items-center" : "absolute top-0 left-2 z-[10]"
       ),
-      children: o.map((c, h) => {
-        const b = Ke(h), L = (c.lineColor ?? c.color) || b.line, y = c.data.length === 0;
+      children: e.map((c, b) => {
+        const L = Ke(b), x = (c.lineColor ?? c.color) || L.line, R = !h && c.data.length === 0;
         return /* @__PURE__ */ le(
           "div",
           {
-            className: ie(
+            className: ae(
               "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
-              y && "opacity-50"
+              R && "opacity-50"
             ),
             children: [
               /* @__PURE__ */ w(
                 "div",
                 {
                   className: "w-3 h-3 rounded-sm",
-                  style: { backgroundColor: L }
+                  style: { backgroundColor: x }
                 }
               ),
               /* @__PURE__ */ le("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
                 c.label,
-                y && " (no data)"
+                R && " (no data)"
               ] }),
               l && /* @__PURE__ */ w(
                 "button",
                 {
                   type: "button",
-                  onClick: (k) => {
-                    k.stopPropagation(), l(c.label);
+                  onClick: (E) => {
+                    E.stopPropagation(), l(c.label);
                   },
                   className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
                   "aria-label": `Remove ${c.label}`,