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

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

@@ -1,99 +1,111 @@
-import { jsxs as le, jsx as w } from "react/jsx-runtime";
-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 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 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";
-import { GraphCurrentValue as bt } from "./graph-current-value.js";
-import { GraphTooltip as vt } from "./graph-tooltip.js";
-import { VertLine as Ct } from "./plugins/vertical-line.js";
-class St {
+import { jsxs as ge, jsx as N } from "react/jsx-runtime";
+import { createChart as ht, CrosshairMode as gt, LineStyle as ae, LineSeries as mt, AreaSeries as pt } from "lightweight-charts";
+import * as Ve from "react";
+import { useRef as K, useState as re, useEffect as A, useLayoutEffect as dt } from "react";
+import { useIsMobile as bt } from "../../hooks/use-media-query.js";
+import { cn as ee } from "../../utils/cn.js";
+import { resolveCSSColor as ne, generateColorsFromBase as ve, hslToHex as St } from "../../utils/colors.js";
+import { getDefaultOptions as Oe, getDefaultSeries as vt, AXIS_TICK_MARK_DENSITY as Se, getDefaultVerticalLine as Ct, AXIS_FONT_SIZE as yt, AXIS_EDGE_LABEL_PADDING_PX as Qe, AXIS_TOP_LABEL_PADDING_PX as Ye, AXIS_TIME_EDGE_PADDING_PX as xt } from "./default-config.js";
+import { getXFormatters as Ue, formatExactValue as Le, isRatioUnit as _t, createAdaptiveYAxisFormatter as wt } from "./formatters.js";
+import { GraphCurrentValue as Pt } from "./graph-current-value.js";
+import { GraphTooltip as Tt } from "./graph-tooltip.js";
+import { VertLine as Rt } from "./plugins/vertical-line.js";
+import { pickMinMove as Nt, niceAxisRange as Vt } from "./y-axis-scale.js";
+function ie(e) {
+  return e.id ?? e.label;
+}
+function et(e, i, u) {
+  if (!u)
+    return e.values().next().value;
+  const f = e.get(u);
+  if (f) return f;
+  const c = i.find((d) => d.id === u || d.label === u);
+  return c ? e.get(ie(c)) : void 0;
+}
+class Lt {
   _yTop;
   _yBottom;
   _color;
-  constructor(l, u, h) {
-    this._yTop = l, this._yBottom = u, this._color = h;
+  constructor(i, u, f) {
+    this._yTop = i, this._yBottom = u, this._color = f;
   }
-  draw(l) {
-    l.useBitmapCoordinateSpace((u) => {
-      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);
+  draw(i) {
+    i.useBitmapCoordinateSpace((u) => {
+      const f = u.context, c = u.verticalPixelRatio, d = this._yTop === null ? 0 : this._yTop * c, S = this._yBottom === null ? u.bitmapSize.height : this._yBottom * c, w = Math.min(d, S), k = Math.max(d, S);
+      f.fillStyle = this._color, f.fillRect(0, w, u.bitmapSize.width, k - w);
     });
   }
 }
-class yt {
+class Mt {
   _source;
   _yTop = null;
   _yBottom = null;
-  constructor(l) {
-    this._source = l;
+  constructor(i) {
+    this._source = i;
   }
   update() {
-    const l = this._source.series;
-    this._yTop = this._source.priceTop === void 0 ? null : l.priceToCoordinate(this._source.priceTop), this._yBottom = this._source.priceBottom === void 0 ? null : l.priceToCoordinate(this._source.priceBottom);
+    const i = this._source.series;
+    this._yTop = this._source.priceTop === void 0 ? null : i.priceToCoordinate(this._source.priceTop), this._yBottom = this._source.priceBottom === void 0 ? null : i.priceToCoordinate(this._source.priceBottom);
   }
   /** Draw beneath the series line/area so the data stays readable. */
   zOrder() {
     return "bottom";
   }
   renderer() {
-    return new St(this._yTop, this._yBottom, this._source.color);
+    return new Lt(this._yTop, this._yBottom, this._source.color);
   }
 }
-class xt {
+class kt {
   series;
   priceTop;
   priceBottom;
   color;
   _paneViews;
-  constructor(l, u, h, c) {
-    this.series = l, this.priceTop = u, this.priceBottom = h, this.color = c, this._paneViews = [new yt(this)];
+  constructor(i, u, f, c) {
+    this.series = i, this.priceTop = u, this.priceBottom = f, this.color = c, this._paneViews = [new Mt(this)];
   }
   updateAllViews() {
-    for (const l of this._paneViews) l.update();
+    for (const i of this._paneViews) i.update();
   }
   paneViews() {
     return this._paneViews;
   }
 }
-function wt(e, l) {
+function It(e, i) {
   switch (e) {
-    case te.Dotted:
-      return [l, l];
-    case te.Dashed:
-      return [2 * l, 2 * l];
-    case te.LargeDashed:
-      return [6 * l, 6 * l];
-    case te.SparseDotted:
-      return [l, 4 * l];
+    case ae.Dotted:
+      return [i, i];
+    case ae.Dashed:
+      return [2 * i, 2 * i];
+    case ae.LargeDashed:
+      return [6 * i, 6 * i];
+    case ae.SparseDotted:
+      return [i, 4 * i];
     default:
       return [];
   }
 }
-class _t {
+class Dt {
   _y;
   _color;
   _lineWidth;
   _lineStyle;
-  constructor(l, u, h, c) {
-    this._y = l, this._color = u, this._lineWidth = h, this._lineStyle = c;
+  constructor(i, u, f, c) {
+    this._y = i, this._color = u, this._lineWidth = f, this._lineStyle = c;
   }
-  draw(l) {
-    l.useBitmapCoordinateSpace((u) => {
+  draw(i) {
+    i.useBitmapCoordinateSpace((u) => {
       if (this._y === null) return;
-      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();
+      const f = u.context, c = u.verticalPixelRatio, d = Math.max(1, Math.round(this._lineWidth * c)), S = Math.round(this._y * c);
+      f.save(), f.strokeStyle = this._color, f.lineWidth = d, f.setLineDash(It(this._lineStyle, d)), f.beginPath(), f.moveTo(0, S), f.lineTo(u.bitmapSize.width, S), f.stroke(), f.restore();
     });
   }
 }
-class Nt {
+class Et {
   _source;
   _y = null;
-  constructor(l) {
-    this._source = l;
+  constructor(i) {
+    this._source = i;
   }
   update() {
     this._y = this._source.series.priceToCoordinate(this._source.price);
@@ -108,7 +120,7 @@ class Nt {
     return "top";
   }
   renderer() {
-    return new _t(
+    return new Dt(
       this._y,
       this._source.color,
       this._source.lineWidth,
@@ -116,46 +128,46 @@ class Nt {
     );
   }
 }
-class Tt {
+class Bt {
   series;
   price;
   color;
   lineWidth;
   lineStyle;
   _paneViews;
-  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)];
+  constructor(i, u, f, c, d) {
+    this.series = i, this.price = u, this.color = f, this.lineWidth = c, this.lineStyle = d, this._paneViews = [new Et(this)];
   }
   updateAllViews() {
-    for (const l of this._paneViews) l.update();
+    for (const i of this._paneViews) i.update();
   }
   paneViews() {
     return this._paneViews;
   }
 }
-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(
+function Ft(e, i, u) {
+  const f = e.labelText ?? "", c = e.value, d = c === void 0 ? "" : typeof c == "number" ? i === "$" ? `$${Le(c, void 0, u)}` : i === "%" ? `${Le(c, void 0, u)}%` : Le(
     c,
-    l !== "none" && l !== "%" && l !== "$" ? l : void 0,
+    i !== "none" && i !== "%" && i !== "$" && !_t(i) ? i : void 0,
     u
   ) : String(c);
-  return { labelText: h, valueStr: b };
+  return { labelText: f, valueStr: d };
 }
-const Ze = 4;
-function Pt(e, l, u) {
-  const h = { left: e, transform: "translateX(-50%)" };
-  if (l <= 0 || !u || u <= 0)
-    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%)" };
+const tt = 4;
+function zt(e, i, u) {
+  const f = { left: e, transform: "translateX(-50%)" };
+  if (i <= 0 || !u || u <= 0)
+    return f;
+  const c = u / 2, d = tt + c, S = i - tt - c;
+  return S < d ? { left: i / 2, transform: "translateX(-50%)" } : { left: Math.min(Math.max(e, d), S), transform: "translateX(-50%)" };
 }
-function Lt(e, l) {
+function At(e, i) {
   for (let u = e.length - 1; u >= 0; u--)
-    if (Number(e[u].time) <= l)
+    if (Number(e[u].time) <= i)
       return e[u].value;
   return 0;
 }
-const _e = [
+const Me = [
   // 0  green (emerald)
   {
     line: "#02c39a",
@@ -270,110 +282,105 @@ const _e = [
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], Rt = 137.5;
-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 };
+], Gt = 137.5;
+function ot(e) {
+  if (e < Me.length)
+    return Me[e];
+  const u = (e - Me.length) * Gt % 360, f = St(u, 70, 50), { topColor: c, bottomColor: d } = ve(f);
+  return { line: f, top: c, bottom: d };
 }
-function Ot({
+function oo({
   series: e,
-  className: l,
+  className: i,
   showLegend: u = !1,
-  onUnselectSeries: h,
+  onUnselectSeries: f,
   xMeasureUnit: c = "time",
-  yMeasureUnit: b = "token",
-  optionsOverrides: L,
-  verticalLineOptions: x,
-  priceLineOptions: R,
-  zoneOptions: E,
-  currentValueDecimals: he,
-  useSharedPriceScale: j = !1,
-  dualYAxis: I = !1,
-  defaultVisiblePriceScaleId: Ne = "right",
-  leftPriceScaleTitle: Te,
-  rightPriceScaleTitle: kt,
-  showCurrentValue: Je = !0,
-  graphTitle: de,
-  yScaleMin: Ve,
-  yScaleMinMultiple: Pe,
-  visibleTimeFrom: K,
-  disableZoom: ie = !1,
-  hideDefaultTooltip: me = !1
+  yMeasureUnit: d = "token",
+  optionsOverrides: S,
+  verticalLineOptions: w,
+  priceLineOptions: k,
+  zoneOptions: G,
+  currentValueDecimals: Ce,
+  useSharedPriceScale: Z = !1,
+  dualYAxis: D = !1,
+  defaultVisiblePriceScaleId: ke = "right",
+  leftPriceScaleTitle: Ie,
+  rightPriceScaleTitle: Xt,
+  showCurrentValue: rt = !0,
+  graphTitle: ye,
+  yScaleMin: De,
+  yScaleMinMultiple: Ee,
+  visibleTimeFrom: Q,
+  disableZoom: Be = !1,
+  hideDefaultTooltip: xe = !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(() => {
+  const E = K(null), V = K(/* @__PURE__ */ new Map()), _e = K(!1), Fe = K(!0), ze = K([]), le = K(0), B = K(null), we = K(null), Ae = K(null), P = bt(), se = Ve.useMemo(() => e.flatMap((t) => t.data), [e]), nt = Ve.useMemo(() => {
     if (e.length > 0) {
       const t = e[e.length - 1];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [e]), [Me, be] = U(() => {
-    if (!Qe) return;
+  }, [e]), [Ge, Pe] = re(() => {
+    if (!nt) return;
     const t = /* @__PURE__ */ new Map();
-    for (const i of e)
-      i.data.length > 0 && t.set(i.label, i.data[i.data.length - 1]);
+    for (const l of e)
+      l.data.length > 0 && t.set(l.label, l.data[l.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(() => {
+  }), [We, J] = re(null), [Xe, $e] = re([]), [it, He] = re(0), je = K(/* @__PURE__ */ new Map()), [at, lt] = re({}), [Y, st] = re(0);
+  A(() => {
     const t = () => {
       try {
-        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);
+        if (B.current && He(B.current.clientWidth), E.current && B.current) {
+          const a = B.current.clientWidth, s = B.current.clientHeight;
+          E.current.resize(a, s);
+          try {
+            le.current = E.current.paneSize().height;
+          } catch {
+          }
         }
       } catch {
       }
-    }, 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;
+    }, l = B.current, n = l ? new ResizeObserver(t) : null;
+    return Ae.current = n, l && n?.observe(l), () => {
+      l && n?.unobserve(l), n?.disconnect(), Ae.current = null;
     };
-  }, []), G(() => {
-    if (!ge.current || pe.current) return;
-    const t = Xe(), i = ee(
-      "hsl(var(--foreground))",
-      "rgb(0, 0, 0)"
-    ), n = ie ? {
-      handleScale: {
-        mouseWheel: !1,
-        pinch: !1,
-        axisPressedMouseMove: !1,
-        axisDoubleClickReset: !1
-      },
-      handleScroll: {
-        mouseWheel: !1,
-        pressedMouseMove: !1,
-        horzTouchDrag: !1,
-        vertTouchDrag: !1
-      }
-    } : {}, s = it(ge.current, {
+  }, []), A(() => {
+    if (!we.current || _e.current) return;
+    const t = Oe(), l = ne(
+      "hsl(var(--muted-foreground))",
+      "rgb(163, 163, 163)"
+    ), n = ht(we.current, {
       ...t,
       leftPriceScale: {
         ...t.leftPriceScale || {},
         visible: !1,
-        textColor: i
+        textColor: l
       },
       rightPriceScale: {
         ...t.rightPriceScale || {},
-        visible: !V,
-        textColor: i
+        visible: !P,
+        textColor: l
       },
-      ...V && {
+      ...P && {
         crosshair: {
           ...t.crosshair,
-          mode: st.Magnet
+          mode: gt.Magnet
         }
-      },
-      ...n,
-      ...L
+      }
     });
-    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();
+    E.current = n, _e.current = !0;
+    try {
+      le.current = n.paneSize().height;
+    } catch {
+      le.current = 0;
+    }
+    return st((a) => a + 1), () => {
+      n.remove(), E.current = null, _e.current = !1, V.current.clear();
     };
-  }, [V, L, ie]), G(() => {
-    const t = W.current;
+  }, [P]), A(() => {
+    const t = E.current;
     t && t.applyOptions(
-      ie ? {
+      Be ? {
         handleScale: {
           mouseWheel: !1,
           pinch: !1,
@@ -401,228 +408,236 @@ function Ot({
         }
       }
     );
-  }, [ie]), G(() => {
-    const t = W.current;
+  }, [Y, Be]), A(() => {
+    const t = E.current;
+    !t || !S || t.applyOptions(S);
+  }, [Y, S]), A(() => {
+    const t = E.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();
+    const n = e.filter((r) => r.data.length > 0).length <= 1 ? De : Ee, a = c === "time" ? Ue(c, se) : Ue(c), s = /* @__PURE__ */ new Map();
     {
       let r = 0;
       for (const o of e)
-        o.data.length !== 0 && (a.set(
+        o.data.length !== 0 && (s.set(
           o.label,
           o.priceScaleId ?? (r === 0 ? "left" : "right")
         ), r++);
     }
-    const f = (r, o, m) => {
-      const {
-        formatter: D,
-        tickmarksFormatter: T,
-        updateVisibleRange: $,
-        updateLastValues: We
-      } = gt(r, o, {
+    const h = (r, o, g) => {
+      const { formatter: F, tickmarksFormatter: R, updateVisibleRange: M } = wt(r, o, {
         yScaleMin: n
-      }), 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)
+      });
+      return { formatter: F, tickmarksFormatter: R, updateVisibleRange: M, labels: g };
+    }, m = [];
+    if (D)
       for (const r of ["left", "right"]) {
-        const o = /* @__PURE__ */ new Set(), m = [];
-        let D = b;
-        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);
+        const o = /* @__PURE__ */ new Set(), g = [];
+        let F = d;
+        for (const R of e)
+          if (R.data.length !== 0 && s.get(R.label) === r) {
+            o.size === 0 && R.yMeasureUnit && (F = R.yMeasureUnit), o.add(R.label);
+            for (const M of R.data) g.push(M.value);
           }
-        o.size > 0 && d.push(f(m, D, o));
+        o.size > 0 && m.push(h(g, F, o));
       }
     else {
-      const r = X.map((m) => m.value), o = new Set(
-        e.filter((m) => m.data.length > 0).map((m) => m.label)
+      const r = se.map((g) => g.value), o = new Set(
+        e.filter((g) => g.data.length > 0).map((g) => g.label)
       );
-      d.push(f(r, b, o));
+      m.push(h(r, d, o));
     }
-    Re.current = d;
-    const v = /* @__PURE__ */ new Map();
-    for (const r of d)
+    ze.current = m;
+    const y = /* @__PURE__ */ new Map();
+    for (const r of m)
       for (const o of r.labels)
-        v.set(o, r);
-    const C = Xe();
+        y.set(o, r);
+    const x = Oe();
     t.applyOptions({
       localization: {
-        ...C.localization || {},
+        ...x.localization || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
         timeFormatter: (r) => (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          s.timeFormatter(parseFloat(r), void 0)
+          a.timeFormatter(parseFloat(r), void 0)
         )
       },
       timeScale: {
-        ...C.timeScale || {},
+        ...x.timeScale || {},
+        ...S?.timeScale,
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-        tickMarkFormatter: s.tickMarkFormatter,
+        tickMarkFormatter: a.tickMarkFormatter,
         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 && e.length > 1 && !j, M = I ? V : e.length > 1 && !j || V, k = ee(
-      "hsl(var(--foreground))",
-      "rgb(0, 0, 0)"
+    const v = !D && e.length > 1 && !Z, W = D ? P : e.length > 1 && !Z || P, L = ne(
+      "hsl(var(--muted-foreground))",
+      "rgb(163, 163, 163)"
     );
     t.applyOptions({
-      ...I && {
-        defaultVisiblePriceScaleId: Ne
+      ...D && {
+        defaultVisiblePriceScaleId: ke
       },
       leftPriceScale: {
-        ...C.leftPriceScale || {},
-        visible: I && !V,
-        textColor: k,
-        ...I && Te && {
+        ...x.leftPriceScale || {},
+        ...S?.leftPriceScale,
+        visible: D && !P,
+        textColor: L,
+        ...D && Ie && {
           // lightweight-charts uses scale margins; title shown via localization if needed
         }
       },
       rightPriceScale: {
-        ...C.rightPriceScale || {},
-        visible: I ? !V : !M,
-        textColor: k,
-        ...p && !I && {
-          scaleMargins: {
-            top: 0.3,
-            bottom: 0
-          }
-        }
+        ...x.rightPriceScale || {},
+        ...S?.rightPriceScale,
+        visible: D ? !P : !W,
+        textColor: L
       }
     });
-    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 o = y.current.get(r);
-        o && (t.removeSeries(o), y.current.delete(r));
+    const U = new Set(V.current.keys()), X = new Set(e.map(ie));
+    for (const r of U)
+      if (!X.has(r)) {
+        const o = V.current.get(r);
+        o && (t.removeSeries(o), V.current.delete(r));
       }
-    const Q = mt(), oe = [];
-    let re = 0;
-    const Ee = e.find((r) => r.data.length > 0), ne = /* @__PURE__ */ new Map();
-    if (R && R.length > 0)
-      for (const r of R) {
+    const p = vt(), I = [];
+    let T = 0;
+    const $ = e.find((r) => r.data.length > 0), C = /* @__PURE__ */ new Map();
+    if (k && k.length > 0)
+      for (const r of k) {
         if (!Number.isFinite(r.price)) continue;
-        const o = r.seriesLabel ?? Ee?.label;
+        const o = r.seriesLabel ?? $?.label;
         if (!o) continue;
-        const m = ne.get(o) ?? [];
-        m.push(r.price), ne.set(o, m);
+        const g = C.get(o) ?? [];
+        g.push(r.price), C.set(o, g);
       }
-    if (E && E.length > 0)
-      for (const r of E) {
-        const o = r.seriesLabel ?? Ee?.label;
+    if (G && G.length > 0)
+      for (const r of G) {
+        const o = r.seriesLabel ?? $?.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);
+        const g = C.get(o) ?? [];
+        Number.isFinite(r.priceTop) && g.push(r.priceTop), Number.isFinite(r.priceBottom) && g.push(r.priceBottom), C.set(o, g);
       }
     for (let r = 0; r < e.length; r++) {
-      const o = e[r], m = Ke(r), D = o.lineColor ?? o.color ?? m.line;
-      let T, $;
+      const o = e[r], g = ie(o), F = ot(r), R = o.lineColor ?? o.color ?? F.line;
+      let M, O;
       if (o.lineColor ?? o.color)
         if (o.topColor && o.bottomColor)
-          T = o.topColor, $ = o.bottomColor;
+          M = o.topColor, O = o.bottomColor;
         else if (o.topColor) {
-          const g = fe(D);
-          T = o.topColor, $ = g.bottomColor;
+          const b = ve(R);
+          M = o.topColor, O = b.bottomColor;
         } else if (o.bottomColor)
-          T = fe(D).topColor, $ = o.bottomColor;
+          M = ve(R).topColor, O = o.bottomColor;
         else {
-          const g = fe(D);
-          T = g.topColor, $ = g.bottomColor;
+          const b = ve(R);
+          M = b.topColor, O = b.bottomColor;
         }
       else
-        T = o.topColor || m.top, $ = o.bottomColor || m.bottom;
+        M = o.topColor || F.top, O = o.bottomColor || F.bottom;
       if (o.data.length === 0) {
-        const g = y.current.get(o.label);
-        g && (t.removeSeries(g), y.current.delete(o.label));
+        const b = V.current.get(g);
+        b && (t.removeSeries(b), V.current.delete(g));
         continue;
       }
-      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 pe = o.data.length > 0 ? Math.min(...o.data.map((b) => b.value)) : 0, ce = o.data.length > 0 ? Math.max(...o.data.map((b) => b.value)) : 0, ue = pe < 0, q = o.data.some((b) => b.value === 0), de = !ue && q, fe = Nt(ce - pe), he = D ? o.priceScaleId ?? (T === 0 ? "left" : "right") : Z || !v || T === 0 ? "right" : `scale-${T}`;
+      v && I.push({
+        priceScaleId: he || "right",
+        seriesIndex: T
       });
-      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 H of rt)
-            H < z.priceRange.minValue && (z.priceRange.minValue = H), H > z.priceRange.maxValue && (z.priceRange.maxValue = H);
+      const Te = (Z || !v) && n !== void 0 && typeof n == "number", ct = C.get(o.label) ?? [], ut = (b) => {
+        const _ = b();
+        if (_?.priceRange) {
+          Te && (_.priceRange.minValue = n);
+          for (const j of ct)
+            j < _.priceRange.minValue && (_.priceRange.minValue = j), j > _.priceRange.maxValue && (_.priceRange.maxValue = j);
+          const oe = Te ? n : de && _.priceRange.minValue >= 0 ? 0 : void 0, be = le.current > 0 ? le.current : B.current?.clientHeight ?? 0;
+          if (be > 0) {
+            const j = Vt({
+              min: _.priceRange.minValue,
+              max: _.priceRange.maxValue,
+              floor: oe,
+              scaleHeightPx: be,
+              fontSizePx: yt,
+              tickMarkDensity: Se,
+              minMove: fe,
+              edgePaddingPx: Qe,
+              edgePaddingTopPx: Ye
+            });
+            _.priceRange.minValue = j.min, _.priceRange.maxValue = j.max;
+          }
+          _.margins = {
+            above: Ye,
+            below: Qe
+          };
         }
-        return z;
-      }, Ge = v.get(o.label) ?? d[0], je = Ge.formatter, lt = Ge.tickmarksFormatter, Se = {
-        lineColor: D,
-        topColor: T,
-        bottomColor: $,
-        priceScaleId: Ae,
+        return _;
+      }, Ze = y.get(o.label) ?? m[0], qe = Ze.formatter, ft = Ze.tickmarksFormatter, Re = {
+        lineColor: R,
+        topColor: M,
+        bottomColor: O,
+        priceScaleId: he,
         ...o.seriesType === "line" && {
-          lineStyle: o.lineStyle ?? te.Solid
+          lineStyle: o.lineStyle ?? ae.Solid
         },
         priceFormat: {
           type: "custom",
-          minMove: 0.01,
-          formatter: $e && typeof n == "number" ? (g) => je(
-            g < n ? n : g
-          ) : je,
-          tickmarksFormatter: lt
+          minMove: fe,
+          formatter: Te && typeof n == "number" ? (b) => qe(
+            b < n ? n : b
+          ) : qe,
+          tickmarksFormatter: ft
         },
-        autoscaleInfoProvider: nt
-      }, He = o.seriesType === "line";
-      let F = y.current.get(o.label);
-      const Y = o.data.map((g) => ({
-        ...g,
-        time: g.time
+        autoscaleInfoProvider: ut
+      }, Je = o.seriesType === "line";
+      let z = V.current.get(g);
+      const te = o.data.map((b) => ({
+        ...b,
+        time: b.time
       }));
-      if (K !== void 0 && Y.length > 0 && Number(Y[0].time) > K) {
-        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);
+      if (Q !== void 0 && te.length > 0 && Number(te[0].time) > Q) {
+        const b = Number(te[0].time), _ = b - Q, oe = 86400, be = _ > 180 * oe ? 7 * oe : _ > 30 * oe ? oe : 6 * 3600, j = [];
+        for (let Ne = Q; Ne < b; Ne += be)
+          j.push({ time: Ne });
+        te.unshift(...j);
       }
-      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 = t.addSeries(ut, {
-        ...Q,
-        ...Se
-      }), F.setData(Y), y.current.set(o.label, F)), re++;
+      z && z.seriesType() !== (Je ? "Line" : "Area") && (t.removeSeries(z), V.current.delete(g), z = void 0), z ? (z.applyOptions(Re), z.setData(te)) : (Je ? z = t.addSeries(mt, {
+        ...p,
+        ...Re
+      }) : z = t.addSeries(pt, {
+        ...p,
+        ...Re
+      }), z.setData(te), V.current.set(g, z)), T++;
     }
-    if (I)
+    if (D)
       try {
-        const r = t.priceScale("left"), o = t.priceScale("right"), m = {
-          visible: !V,
+        const r = t.priceScale("left"), o = t.priceScale("right"), g = {
+          visible: !P,
           autoScale: !0,
-          scaleMargins: { top: 0.1, bottom: 0.1 },
+          scaleMargins: { top: 0, bottom: 0 },
           alignLabels: !0,
-          borderVisible: !0,
-          borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: k
+          tickMarkDensity: Se,
+          textColor: L,
+          ...S?.rightPriceScale
         };
-        r?.applyOptions(m), o?.applyOptions(m);
+        r?.applyOptions(g), o?.applyOptions(g);
       } catch {
       }
-    else if (S && oe.length > 0)
-      for (const r of oe)
+    else if (v && I.length > 0)
+      for (const r of I)
         try {
           const o = t.priceScale(r.priceScaleId);
           o && o.applyOptions({
             visible: !1,
             autoScale: !0,
             scaleMargins: {
-              top: 0.1,
-              bottom: 0.1,
-              ...r.shouldPreventNegativeAxis && {
-                top: 0.3,
-                bottom: 0
-              }
+              top: 0,
+              bottom: 0
             },
             alignLabels: !0,
-            borderVisible: !0,
-            borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: k
+            tickMarkDensity: Se,
+            textColor: L
           });
         } catch (o) {
           console.warn(
@@ -630,380 +645,403 @@ function Ot({
             o
           );
         }
-    else if (!S)
+    else if (!v)
       try {
         const r = t.priceScale("right");
         r && r.applyOptions({
-          visible: !V,
+          visible: !P,
           autoScale: !0,
           scaleMargins: {
-            top: 0.1,
-            // No bottom margin when yScaleMin is set so the scale doesn't extend below the minimum (avoids negative labels like -10M)
-            bottom: n !== void 0 || p ? 0 : 0.1,
-            ...p && {
-              top: 0.3
-            }
+            top: 0,
+            bottom: 0
           },
           alignLabels: !0,
-          borderVisible: !0,
-          borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: k
+          tickMarkDensity: Se,
+          textColor: L,
+          ...S?.rightPriceScale
         });
       } catch {
       }
-    if (n !== void 0 && !V && (j || !S) && t.applyOptions({
+    if (n !== void 0 && !P && (Z || !v) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
-    }), X.length > 0) {
-      const r = X.map((o) => Number(o.time)).filter((o) => Number.isFinite(o));
+    }), se.length > 0) {
+      const r = se.map((o) => Number(o.time)).filter((o) => Number.isFinite(o));
       if (r.length > 0) {
-        const o = Math.min(...r), m = K !== void 0 ? Math.min(K, o) : o, D = Math.max(...r);
-        if (Number(m) <= Number(D))
+        const o = Math.min(...r), g = Q !== void 0 ? Math.min(Q, o) : o, F = Math.max(...r);
+        if (Number(g) <= Number(F)) {
+          const R = () => {
+            const M = t.timeScale(), O = D && !P, pe = D ? !P : !W, ce = !O, ue = !pe;
+            if (M.applyOptions({
+              fixLeftEdge: !ce,
+              fixRightEdge: !ue
+            }), !ce && !ue) return;
+            const q = M.getVisibleLogicalRange(), de = M.width();
+            if (!q || !(de > 0)) return;
+            const fe = q.to - q.from;
+            if (!(fe > 0)) return;
+            const he = xt * fe / de;
+            M.setVisibleLogicalRange({
+              from: ce ? q.from - he : q.from,
+              to: ue ? q.to + he : q.to
+            });
+          };
           try {
-            t.timeScale().setVisibleRange({ from: m, to: D });
+            t.timeScale().setVisibleRange({ from: g, to: F }), R();
           } catch {
             try {
-              t.timeScale().fitContent();
+              t.timeScale().fitContent(), R();
             } catch {
             }
           }
+        }
       }
     }
-    Le.current && (Le.current = !1);
-    const ve = /* @__PURE__ */ new Map();
+    Fe.current && (Fe.current = !1), S && t.applyOptions(S);
+    const H = /* @__PURE__ */ new Map();
     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);
+      r.data.length > 0 && H.set(r.label, r.data[r.data.length - 1]);
+    Pe(H.size > 0 ? H : void 0);
   }, [
+    Y,
     e,
-    X,
+    se,
     c,
-    b,
-    V,
-    j,
-    I,
-    Ne,
-    Te,
-    Ve,
-    Pe,
-    K,
-    R,
-    E
-  ]), G(() => {
-    const t = W.current;
+    d,
+    P,
+    Z,
+    D,
+    ke,
+    Ie,
+    De,
+    Ee,
+    Q,
+    k,
+    G,
+    S
+  ]), A(() => {
+    const t = E.current;
     if (!t || e.length === 0) return;
-    const i = e.length === 1;
+    const l = e.length === 1;
     let n;
-    for (const a of e)
-      if (a.data.length > 0) {
-        n = a.data[a.data.length - 1].time;
+    for (const s of e)
+      if (s.data.length > 0) {
+        n = s.data[s.data.length - 1].time;
         break;
       }
     if (!n) return;
-    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();
+    const a = (s) => {
+      const { time: h = n, seriesData: m, point: y } = s || {}, x = e[0], v = x ? V.current.get(ie(x)) : void 0;
+      if (!y || !h) {
+        const X = /* @__PURE__ */ new Map();
         for (const p of e)
-          p.data.length > 0 && _.set(p.label, p.data[p.data.length - 1]);
-        if (be(_.size > 0 ? _ : void 0), i || j || me)
-          q(null);
-        else if (C[0] && n) {
-          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 });
+          p.data.length > 0 && X.set(p.label, p.data[p.data.length - 1]);
+        if (Pe(X.size > 0 ? X : void 0), l || Z || xe)
+          J(null);
+        else if (v && n) {
+          const p = e[0];
+          if (p && p.data.length > 0) {
+            const T = t.timeScale().timeToCoordinate(n), $ = p.data[p.data.length - 1].value, C = v.priceToCoordinate($);
+            T !== null && C !== null && J({ x: T, y: C });
           }
         }
         return;
       }
-      const A = /* @__PURE__ */ new Map();
-      let P;
-      for (let _ = 0; _ < e.length; _++) {
-        const p = e[_], S = y.current.get(p.label);
-        if (!S) continue;
-        const M = d?.get(S), k = M && "value" in M ? M.value : void 0;
-        let N;
-        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;
+      const W = /* @__PURE__ */ new Map();
+      let L, U = v;
+      for (let X = 0; X < e.length; X++) {
+        const p = e[X], I = V.current.get(ie(p));
+        if (!I) continue;
+        const T = m?.get(I), $ = T && "value" in T ? T.value : void 0;
+        let C;
+        if ($ !== void 0)
+          C = $;
+        else if (l) {
+          const H = Number(h), r = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
+          H < r ? C = Number.NaN : C = p.data[p.data.length - 1]?.value ?? 0;
         } else {
-          const Z = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
-          if (Number(f) < Z) continue;
-          N = Lt(p.data, Number(f));
+          const H = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
+          if (Number(h) < H) continue;
+          C = At(p.data, Number(h));
         }
-        Number.isNaN(N) || (P === void 0 && (P = N), A.set(p.label, { value: N, time: f }));
+        Number.isNaN(C) || (L === void 0 && (L = C, U = I), W.set(p.label, { value: C, time: h }));
       }
-      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 M = B.current;
-          if (M) {
-            const k = M.querySelector(
+      if (Pe(W), L !== void 0 && U) {
+        const p = t.timeScale().timeToCoordinate(h), I = U.priceToCoordinate(L);
+        if (p !== null && I !== null) {
+          const T = B.current;
+          if (T) {
+            const $ = T.querySelector(
               ".LightweightChart"
             );
-            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 });
+            if ($) {
+              const C = $.getBoundingClientRect(), H = T.getBoundingClientRect(), r = p + (C.left - H.left), o = I + (C.top - H.top);
+              J({ x: r, y: o });
             } else
-              q({ x: p, y: S });
+              J({ x: p, y: I });
           } else
-            q({ x: p, y: S });
+            J({ x: p, y: I });
         } else
-          q(null);
+          J(null);
       } else
-        q(null);
+        J(null);
     };
-    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 });
+    return t.subscribeCrosshairMove(a), P && t.subscribeClick(a), !l && !Z && !xe && requestAnimationFrame(() => {
+      const s = e[0], h = s ? V.current.get(ie(s)) : void 0;
+      if (h && n && s.data.length > 0) {
+        const y = t.timeScale().timeToCoordinate(n), x = s.data[s.data.length - 1].value, v = h.priceToCoordinate(x);
+        y !== null && v !== null && J({ x: y, y: v });
       }
     }), () => {
-      t.unsubscribeCrosshairMove(s), V && t.unsubscribeClick(s);
+      t.unsubscribeCrosshairMove(a), P && t.unsubscribeClick(a);
     };
-  }, [e, j, V, me]), G(() => {
-    const t = W.current;
+  }, [e, Z, P, xe]), A(() => {
+    const t = E.current;
     if (!t || e.length === 0) return;
-    const i = t.timeScale(), n = () => {
-      const s = Re.current;
-      if (s.length === 0) return;
-      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 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);
+    const l = t.timeScale(), n = () => {
+      const a = ze.current;
+      if (a.length === 0) return;
+      const s = l.getVisibleRange();
+      if (!s) return;
+      const h = Number(s.from), m = Number(s.to);
+      for (const y of a) {
+        const x = [];
+        for (const v of e)
+          if (y.labels.has(v.label))
+            for (const W of v.data) {
+              const L = Number(W.time);
+              L >= h && L <= m && x.push(W.value);
             }
-        C.length > 0 && v.updateVisibleRange(C);
+        x.length > 0 && y.updateVisibleRange(x);
       }
     };
-    return i.subscribeVisibleLogicalRangeChange(n), () => {
-      i.unsubscribeVisibleLogicalRangeChange(
+    return l.subscribeVisibleLogicalRangeChange(n), () => {
+      l.unsubscribeVisibleLogicalRangeChange(
         n
       );
     };
-  }, [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 || {}
+  }, [e]), A(() => {
+    const t = E.current, l = Array.from(V.current.values()), n = [];
+    if (t && l.length > 0 && w) {
+      const a = Ct(), s = l[0];
+      for (const h of w) {
+        const m = {
+          ...a,
+          ...h.options || {}
         };
-        d.color && (d.color = ee(d.color, d.color));
-        const v = new Ct(t, a, f.xCoordinate, d);
-        a.attachPrimitive(v), n.push(v);
+        m.color && (m.color = ne(m.color, m.color));
+        const y = new Rt(t, s, h.xCoordinate, m);
+        s.attachPrimitive(y), n.push(y);
       }
     }
     return () => {
-      if (i.length > 0) {
-        const s = i[0];
-        for (const a of n)
+      if (l.length > 0) {
+        const a = l[0];
+        for (const s of n)
           try {
-            s.detachPrimitive(a);
+            a.detachPrimitive(s);
           } catch {
           }
       }
     };
-  }, [x, e, ce]), G(() => {
-    const t = [], i = [];
-    if (R && R.length > 0) {
-      const n = Array.from(y.current.values())[0], s = ee(
+  }, [w, e, Y]), A(() => {
+    const t = [], l = [];
+    if (k && k.length > 0) {
+      const n = ne(
         "hsl(var(--destructive))",
         "rgb(239, 68, 68)"
       );
-      for (const a of R) {
+      for (const a of k) {
         if (!Number.isFinite(a.price)) continue;
-        const f = a.seriesLabel ? y.current.get(a.seriesLabel) : n;
-        if (!f) continue;
-        const d = a.color ? ee(a.color, a.color) : s, v = a.lineWidth ?? 1, C = a.lineStyle ?? te.Dashed, A = f.createPriceLine({
+        const s = et(
+          V.current,
+          e,
+          a.seriesLabel
+        );
+        if (!s) continue;
+        const h = a.color ? ne(a.color, a.color) : n, m = a.lineWidth ?? 1, y = a.lineStyle ?? ae.Dashed, x = s.createPriceLine({
           price: a.price,
-          color: d,
-          lineWidth: v,
-          lineStyle: C,
+          color: h,
+          lineWidth: m,
+          lineStyle: y,
           axisLabelVisible: a.axisLabelVisible ?? !0,
           title: a.title ?? ""
         });
-        t.push({ series: f, line: A });
-        const P = new Tt(
-          f,
+        t.push({ series: s, line: x });
+        const v = new Bt(
+          s,
           a.price,
-          d,
-          v,
-          C
+          h,
+          m,
+          y
         );
-        f.attachPrimitive(P), i.push({ series: f, primitive: P });
+        s.attachPrimitive(v), l.push({ series: s, primitive: v });
       }
     }
     return () => {
-      for (const { series: n, primitive: s } of i)
+      for (const { series: n, primitive: a } of l)
         try {
-          n.detachPrimitive(s);
+          n.detachPrimitive(a);
         } catch {
         }
-      for (const { series: n, line: s } of t)
+      for (const { series: n, line: a } of t)
         try {
-          n.removePriceLine(s);
+          n.removePriceLine(a);
         } catch {
         }
     };
-  }, [R, e, ce]), G(() => {
+  }, [k, e, Y]), A(() => {
     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 (G && G.length > 0) {
+      const l = "rgba(239, 68, 68, 0.12)";
+      for (const n of G) {
+        const a = et(
+          V.current,
+          e,
+          n.seriesLabel
+        );
         if (!a) continue;
-        const f = s.color ? ee(s.color, n) : n, d = new xt(
+        const s = n.color ? ne(n.color, l) : l, h = new kt(
           a,
-          s.priceTop,
-          s.priceBottom,
-          f
+          n.priceTop,
+          n.priceBottom,
+          s
         );
-        a.attachPrimitive(d), t.push({ series: a, zone: d });
+        a.attachPrimitive(h), t.push({ series: a, zone: h });
       }
     }
     return () => {
-      for (const { series: i, zone: n } of t)
+      for (const { series: l, zone: n } of t)
         try {
-          i.detachPrimitive(n);
+          l.detachPrimitive(n);
         } catch {
         }
     };
-  }, [E, e, ce]), G(() => {
-    const t = W.current;
-    if (!t || !x?.length) {
-      Ie([]);
+  }, [G, e, Y]), A(() => {
+    const t = E.current;
+    if (!t || !w?.length) {
+      $e([]);
       return;
     }
-    const i = () => {
-      const a = t.timeScale(), f = x.map((d) => a.timeToCoordinate(d.xCoordinate) ?? null);
-      Ie(f), B.current && Be(B.current.clientWidth);
+    const l = () => {
+      const s = t.timeScale(), h = w.map((m) => s.timeToCoordinate(m.xCoordinate) ?? null);
+      $e(h), B.current && He(B.current.clientWidth);
     };
-    i();
-    const n = t.timeScale(), s = () => {
-      i();
+    l();
+    const n = t.timeScale(), a = () => {
+      l();
     };
-    return n.subscribeVisibleLogicalRangeChange(s), () => {
-      n.unsubscribeVisibleLogicalRangeChange(s);
+    return n.subscribeVisibleLogicalRangeChange(a), () => {
+      n.unsubscribeVisibleLogicalRangeChange(a);
     };
-  }, [x, e, ce]), ft(() => {
-    et((t) => {
-      const i = {};
+  }, [w, e, Y]), dt(() => {
+    lt((t) => {
+      const l = {};
       let n = !1;
-      for (const [s, a] of Fe.current) {
-        if (!a) continue;
-        const f = a.offsetWidth;
-        i[s] = f, t[s] !== f && (n = !0);
+      for (const [a, s] of je.current) {
+        if (!s) continue;
+        const h = s.offsetWidth;
+        l[a] = h, t[a] !== h && (n = !0);
       }
-      return Object.keys(t).length !== Object.keys(i).length && (n = !0), n ? i : t;
+      return Object.keys(t).length !== Object.keys(l).length && (n = !0), n ? l : t;
     });
   });
-  const ue = e.length === 1, ze = xe.useMemo(() => {
-    if (ue && e.length > 0) {
+  const me = e.length === 1, Ke = Ve.useMemo(() => {
+    if (me && e.length > 0) {
       const t = e[0];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [ue, e]);
-  return /* @__PURE__ */ le(
+  }, [me, e]);
+  return /* @__PURE__ */ ge(
     "div",
     {
       ref: B,
-      className: ae(
+      className: ee(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        l
+        i
       ),
       children: [
-        de != null && de !== !1 && ue ? /* @__PURE__ */ w("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ w("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: de }) }) : Je && ue && ze && /* @__PURE__ */ w(
-          bt,
+        ye != null && ye !== !1 && me ? /* @__PURE__ */ N("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ N("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: ye }) }) : rt && me && Ke && /* @__PURE__ */ N(
+          Pt,
           {
-            point: ze,
+            point: Ke,
             xMeasureUnit: c,
-            yMeasureUnit: b,
-            decimals: he
+            yMeasureUnit: d,
+            decimals: Ce
           }
         ),
-        Me && ke && /* @__PURE__ */ w(
-          vt,
+        Ge && We && /* @__PURE__ */ N(
+          Tt,
           {
-            points: Me,
+            points: Ge,
             xMeasureUnit: c,
-            yMeasureUnit: b,
+            yMeasureUnit: d,
             series: e,
-            position: ke,
+            position: We,
             containerRef: B,
-            decimals: he
+            decimals: Ce
           }
         ),
-        u && /* @__PURE__ */ w(Mt, { series: e, onUnselect: h }),
-        x && x.length > 0 && De.length === x.length && /* @__PURE__ */ w(
+        u && /* @__PURE__ */ N(Wt, { series: e, onUnselect: f }),
+        w && w.length > 0 && Xe.length === w.length && /* @__PURE__ */ N(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            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 A = s.labelBackgroundColor ?? s.color ?? "hsl(var(--background))", P = s.labelTextColor ?? "hsl(var(--foreground))", _ = `${String(t.xCoordinate)}-${f}-${v}`, p = Pt(
+            children: w.map((t, l) => {
+              const n = Xe[l], a = t.options ?? {};
+              if (n === null) return null;
+              const { labelText: s, valueStr: h } = Ft(
+                a,
+                d,
+                Ce
+              ), m = a.tooltipText ?? "";
+              if (!(s || h || m)) return null;
+              const x = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", v = a.labelTextColor ?? "hsl(var(--foreground))", W = `${String(t.xCoordinate)}-${s}-${m}`, L = zt(
                 n,
-                Ye,
-                Ue[i]
+                it,
+                at[l]
               );
-              return /* @__PURE__ */ le(
+              return /* @__PURE__ */ ge(
                 "div",
                 {
-                  ref: (S) => {
-                    Fe.current.set(i, S);
+                  ref: (U) => {
+                    je.current.set(l, U);
                   },
-                  className: ae(
+                  className: ee(
                     "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"
+                    m && "pointer-events-auto cursor-default"
                   ),
                   style: {
-                    ...p,
-                    backgroundColor: A,
-                    color: P
+                    ...L,
+                    backgroundColor: x,
+                    color: v
                   },
                   children: [
-                    f && /* @__PURE__ */ w("span", { className: "block", children: f }),
-                    d && /* @__PURE__ */ w("span", { className: ae("block", f && "mt-0.5"), children: d }),
-                    v && /* @__PURE__ */ w(
+                    s && /* @__PURE__ */ N("span", { className: "block", children: s }),
+                    h && /* @__PURE__ */ N("span", { className: ee("block", s && "mt-0.5"), children: h }),
+                    m && /* @__PURE__ */ N(
                       "span",
                       {
                         className: "pointer-events-none absolute right-0 top-full z-10 mt-1 hidden w-[280px] whitespace-normal rounded border border-border bg-popover px-2.5 py-1.5 text-left leading-snug text-popover-foreground shadow-md group-hover:block",
                         role: "tooltip",
-                        children: v
+                        children: m
                       }
                     )
                   ]
                 },
-                _
+                W
               );
             })
           }
         ),
-        /* @__PURE__ */ w(
+        /* @__PURE__ */ N(
           "div",
           {
-            ref: ge,
+            ref: we,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -1011,50 +1049,62 @@ function Ot({
     }
   );
 }
-function Mt({
+function Wt({
   series: e,
-  onUnselect: l,
+  onUnselect: i,
   inline: u = !1
 }) {
-  const h = e.every((c) => c.data.length === 0);
-  return /* @__PURE__ */ w(
+  const f = e.every((c) => c.data.length === 0);
+  return /* @__PURE__ */ N(
     "div",
     {
-      className: ae(
-        "flex flex-wrap gap-2",
-        u ? "items-center" : "absolute top-0 left-2 z-[10]"
+      className: ee(
+        "flex flex-wrap",
+        u ? "items-center justify-center gap-6" : "absolute top-0 left-2 z-[10] gap-2"
       ),
-      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(
+      children: e.map((c, d) => {
+        const S = ot(d), w = (c.lineColor ?? c.color) || S.line, k = !f && c.data.length === 0;
+        return /* @__PURE__ */ ge(
           "div",
           {
-            className: ae(
-              "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
-              R && "opacity-50"
+            className: ee(
+              "flex items-center gap-1.5",
+              !u && "px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
+              k && "opacity-50"
             ),
             children: [
-              /* @__PURE__ */ w(
+              /* @__PURE__ */ N(
                 "div",
                 {
-                  className: "w-3 h-3 rounded-sm",
-                  style: { backgroundColor: x }
+                  className: ee(
+                    u ? "size-2 rounded-full" : "h-3 w-3 rounded-sm"
+                  ),
+                  style: { backgroundColor: w }
+                }
+              ),
+              /* @__PURE__ */ ge(
+                "span",
+                {
+                  className: ee(
+                    "font-medium text-foreground",
+                    u ? "text-sm" : "text-[10px] sm:text-xs"
+                  ),
+                  children: [
+                    c.label,
+                    k && " (no data)"
+                  ]
                 }
               ),
-              /* @__PURE__ */ le("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
-                c.label,
-                R && " (no data)"
-              ] }),
-              l && /* @__PURE__ */ w(
+              i && /* @__PURE__ */ N(
                 "button",
                 {
                   type: "button",
-                  onClick: (E) => {
-                    E.stopPropagation(), l(c.label);
+                  onClick: (G) => {
+                    G.stopPropagation(), i(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}`,
-                  children: /* @__PURE__ */ le(
+                  children: /* @__PURE__ */ ge(
                     "svg",
                     {
                       xmlns: "http://www.w3.org/2000/svg",
@@ -1069,9 +1119,9 @@ function Mt({
                       className: "text-muted-foreground hover:text-foreground",
                       "aria-hidden": "true",
                       children: [
-                        /* @__PURE__ */ w("title", { children: "Close" }),
-                        /* @__PURE__ */ w("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                        /* @__PURE__ */ w("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                        /* @__PURE__ */ N("title", { children: "Close" }),
+                        /* @__PURE__ */ N("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ N("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                       ]
                     }
                   )
@@ -1079,19 +1129,20 @@ function Mt({
               )
             ]
           },
-          c.label
+          c.id ?? c.label
         );
       })
     }
   );
 }
 export {
-  _e as DEFAULT_SERIES_COLORS,
-  Ot as Graph,
-  Mt as GraphLegend,
-  Ze as VERTICAL_LINE_LABEL_EDGE_PADDING,
-  Ke as getSeriesColorPalette,
-  Lt as getStepForwardValue,
-  Pt as getVerticalLineLabelStyle,
-  Vt as getVerticalLineTooltipContent
+  Me as DEFAULT_SERIES_COLORS,
+  oo as Graph,
+  Wt as GraphLegend,
+  tt as VERTICAL_LINE_LABEL_EDGE_PADDING,
+  ot as getSeriesColorPalette,
+  At as getStepForwardValue,
+  zt as getVerticalLineLabelStyle,
+  Ft as getVerticalLineTooltipContent,
+  ie as seriesIdentity
 };