@gearbox-protocol/ui-kit 4.0.0-next.55 → 4.0.0-next.57

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

@@ -3,7 +3,7 @@ import { createChart as ht, CrosshairMode as dt, LineStyle as le, LineSeries as
 import * as Ve from "react";
 import { useRef as K, useState as ne, useEffect as G, useLayoutEffect as pt } from "react";
 import { useIsMobile as bt } from "../../hooks/use-media-query.js";
-import { cn as Z } from "../../utils/cn.js";
+import { cn as O } from "../../utils/cn.js";
 import { hslToHex as St, generateColorsFromBase as Ce, resolveCSSColor as ie } from "../../utils/colors.js";
 import { getDefaultOptions as Je, getDefaultSeries as vt, AXIS_TICK_MARK_DENSITY as ve, getDefaultVerticalLine as Ct, AXIS_FONT_SIZE as xt, AXIS_EDGE_LABEL_PADDING_PX as Qe, AXIS_TOP_LABEL_PADDING_PX as Ye, AXIS_TIME_EDGE_PADDING_PX as yt } from "./default-config.js";
 import { formatExactValue as Le, isRatioUnit as _t, getXFormatters as Ue, createAdaptiveYAxisFormatter as wt } from "./formatters.js";
@@ -36,7 +36,7 @@ class Lt {
     });
   }
 }
-class Mt {
+class kt {
   _source;
   _yTop = null;
   _yBottom = null;
@@ -55,14 +55,14 @@ class Mt {
     return new Lt(this._yTop, this._yBottom, this._source.color);
   }
 }
-class kt {
+class Mt {
   series;
   priceTop;
   priceBottom;
   color;
   _paneViews;
   constructor(i, c, u, h) {
-    this.series = i, this.priceTop = c, this.priceBottom = u, this.color = h, this._paneViews = [new Mt(this)];
+    this.series = i, this.priceTop = c, this.priceBottom = u, this.color = h, this._paneViews = [new kt(this)];
   }
   updateAllViews() {
     for (const i of this._paneViews) i.update();
@@ -167,7 +167,7 @@ function At(e, i) {
       return e[c].value;
   return 0;
 }
-const Me = [
+const ke = [
   // 0  green (emerald)
   {
     line: "#02c39a",
@@ -284,9 +284,9 @@ const Me = [
   }
 ], Gt = 137.5;
 function ot(e) {
-  if (e < Me.length)
-    return Me[e];
-  const c = (e - Me.length) * Gt % 360, u = St(c, 70, 50), { topColor: h, bottomColor: f } = Ce(u);
+  if (e < ke.length)
+    return ke[e];
+  const c = (e - ke.length) * Gt % 360, u = St(c, 70, 50), { topColor: h, bottomColor: f } = Ce(u);
   return { line: u, top: h, bottom: f };
 }
 function oo({
@@ -301,9 +301,9 @@ function oo({
   priceLineOptions: I,
   zoneOptions: F,
   currentValueDecimals: se,
-  useSharedPriceScale: q = !1,
+  useSharedPriceScale: Z = !1,
   dualYAxis: D = !1,
-  defaultVisiblePriceScaleId: ke = "right",
+  defaultVisiblePriceScaleId: Me = "right",
   leftPriceScaleTitle: Ie,
   rightPriceScaleTitle: Xt,
   showCurrentValue: rt = !0,
@@ -469,19 +469,19 @@ function oo({
         minBarSpacing: 0
       }
     });
-    const v = !D && e.length > 1 && !q, W = D ? N : e.length > 1 && !q || N, M = ie(
+    const v = !D && e.length > 1 && !Z, W = D ? N : e.length > 1 && !Z || N, k = ie(
       "hsl(var(--muted-foreground))",
       "rgb(163, 163, 163)"
     );
     t.applyOptions({
       ...D && {
-        defaultVisiblePriceScaleId: ke
+        defaultVisiblePriceScaleId: Me
       },
       leftPriceScale: {
         ...y.leftPriceScale || {},
         ...S?.leftPriceScale,
         visible: D && !N,
-        textColor: M,
+        textColor: k,
         ...D && Ie && {
           // lightweight-charts uses scale margins; title shown via localization if needed
         }
@@ -490,7 +490,7 @@ function oo({
         ...y.rightPriceScale || {},
         ...S?.rightPriceScale,
         visible: D ? !N : !W,
-        textColor: M
+        textColor: k
       }
     });
     const ee = new Set(L.current.keys()), X = new Set(e.map(ae));
@@ -499,7 +499,7 @@ function oo({
         const o = L.current.get(r);
         o && (t.removeSeries(o), L.current.delete(r));
       }
-    const p = vt(), k = [];
+    const p = vt(), M = [];
     let R = 0;
     const $ = e.find((r) => r.data.length > 0), C = /* @__PURE__ */ new Map();
     if (I && I.length > 0)
@@ -539,12 +539,12 @@ function oo({
         b && (t.removeSeries(b), L.current.delete(m));
         continue;
       }
-      const pe = o.data.length > 0 ? Math.min(...o.data.map((b) => b.value)) : 0, fe = o.data.length > 0 ? Math.max(...o.data.map((b) => b.value)) : 0, he = pe < 0, O = o.data.some((b) => b.value === 0), be = !he && O, de = Tt(fe - pe), me = D ? o.priceScaleId ?? (R === 0 ? "left" : "right") : q || !v || R === 0 ? "right" : `scale-${R}`;
-      v && k.push({
+      const pe = o.data.length > 0 ? Math.min(...o.data.map((b) => b.value)) : 0, fe = o.data.length > 0 ? Math.max(...o.data.map((b) => b.value)) : 0, he = pe < 0, q = o.data.some((b) => b.value === 0), be = !he && q, de = Tt(fe - pe), me = D ? o.priceScaleId ?? (R === 0 ? "left" : "right") : Z || !v || R === 0 ? "right" : `scale-${R}`;
+      v && M.push({
         priceScaleId: me || "right",
         seriesIndex: R
       });
-      const Ne = (q || !v) && n !== void 0 && typeof n == "number", ct = C.get(o.label) ?? [], ut = (b) => {
+      const Ne = (Z || !v) && n !== void 0 && typeof n == "number", ct = C.get(o.label) ?? [], ut = (b) => {
         const _ = b();
         if (_?.priceRange) {
           Ne && (_.priceRange.minValue = n);
@@ -617,14 +617,14 @@ function oo({
           alignLabels: !0,
           entireTextOnly: !1,
           tickMarkDensity: ve,
-          textColor: M,
+          textColor: k,
           ...S?.rightPriceScale
         };
         r?.applyOptions(m), o?.applyOptions(m);
       } catch {
       }
-    else if (v && k.length > 0)
-      for (const r of k)
+    else if (v && M.length > 0)
+      for (const r of M)
         try {
           const o = t.priceScale(r.priceScaleId);
           o && o.applyOptions({
@@ -637,7 +637,7 @@ function oo({
             alignLabels: !0,
             entireTextOnly: !1,
             tickMarkDensity: ve,
-            textColor: M
+            textColor: k
           });
         } catch (o) {
           console.warn(
@@ -658,12 +658,12 @@ function oo({
           alignLabels: !0,
           entireTextOnly: !1,
           tickMarkDensity: ve,
-          textColor: M,
+          textColor: k,
           ...S?.rightPriceScale
         });
       } catch {
       }
-    if (n !== void 0 && !N && (q || !v) && t.applyOptions({
+    if (n !== void 0 && !N && (Z || !v) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
@@ -686,14 +686,14 @@ function oo({
               fixLeftEdge: !fe,
               fixRightEdge: !he
             }), !fe && !he) return;
-            const O = V.getVisibleLogicalRange(), be = V.width();
-            if (!O || !(be > 0)) return;
-            const de = O.to - O.from;
+            const q = V.getVisibleLogicalRange(), be = V.width();
+            if (!q || !(be > 0)) return;
+            const de = q.to - q.from;
             if (!(de > 0)) return;
             const me = yt * de / be;
             V.setVisibleLogicalRange({
-              from: fe ? O.from - me : O.from,
-              to: he ? O.to + me : O.to
+              from: fe ? q.from - me : q.from,
+              to: he ? q.to + me : q.to
             });
           };
           try {
@@ -719,9 +719,9 @@ function oo({
     h,
     f,
     N,
-    q,
+    Z,
     D,
-    ke,
+    Me,
     Ie,
     De,
     Ee,
@@ -746,7 +746,7 @@ function oo({
         const X = /* @__PURE__ */ new Map();
         for (const p of e)
           p.data.length > 0 && X.set(p.label, p.data[p.data.length - 1]);
-        if (Pe(X.size > 0 ? X : void 0), l || q || ye)
+        if (Pe(X.size > 0 ? X : void 0), l || Z || ye)
           J(null);
         else if (v && n) {
           const p = e[0];
@@ -758,11 +758,11 @@ function oo({
         return;
       }
       const W = /* @__PURE__ */ new Map();
-      let M, ee = v;
+      let k, ee = v;
       for (let X = 0; X < e.length; X++) {
-        const p = e[X], k = L.current.get(ae(p));
-        if (!k) continue;
-        const R = g?.get(k), $ = R && "value" in R ? R.value : void 0;
+        const p = e[X], M = L.current.get(ae(p));
+        if (!M) continue;
+        const R = g?.get(M), $ = R && "value" in R ? R.value : void 0;
         let C;
         if ($ !== void 0)
           C = $;
@@ -774,29 +774,29 @@ function oo({
           if (Number(d) < H) continue;
           C = At(p.data, Number(d));
         }
-        Number.isNaN(C) || (M === void 0 && (M = C, ee = k), W.set(p.label, { value: C, time: d }));
+        Number.isNaN(C) || (k === void 0 && (k = C, ee = M), W.set(p.label, { value: C, time: d }));
       }
-      if (Pe(W), M !== void 0 && ee) {
-        const p = t.timeScale().timeToCoordinate(d), k = ee.priceToCoordinate(M);
-        if (p !== null && k !== null) {
+      if (Pe(W), k !== void 0 && ee) {
+        const p = t.timeScale().timeToCoordinate(d), M = ee.priceToCoordinate(k);
+        if (p !== null && M !== null) {
           const R = B.current;
           if (R) {
             const $ = R.querySelector(
               ".LightweightChart"
             );
             if ($) {
-              const C = $.getBoundingClientRect(), H = R.getBoundingClientRect(), r = p + (C.left - H.left), o = k + (C.top - H.top);
+              const C = $.getBoundingClientRect(), H = R.getBoundingClientRect(), r = p + (C.left - H.left), o = M + (C.top - H.top);
               J({ x: r, y: o });
             } else
-              J({ x: p, y: k });
+              J({ x: p, y: M });
           } else
-            J({ x: p, y: k });
+            J({ x: p, y: M });
         } else
           J(null);
       } else
         J(null);
     };
-    return t.subscribeCrosshairMove(a), N && t.subscribeClick(a), !l && !q && !ye && requestAnimationFrame(() => {
+    return t.subscribeCrosshairMove(a), N && t.subscribeClick(a), !l && !Z && !ye && requestAnimationFrame(() => {
       const s = e[0], d = s ? L.current.get(ae(s)) : void 0;
       if (d && n && s.data.length > 0) {
         const x = t.timeScale().timeToCoordinate(n), y = s.data[s.data.length - 1].value, v = d.priceToCoordinate(y);
@@ -805,7 +805,7 @@ function oo({
     }), () => {
       t.unsubscribeCrosshairMove(a), N && t.unsubscribeClick(a);
     };
-  }, [e, q, N, ye]), G(() => {
+  }, [e, Z, N, ye]), G(() => {
     const t = E.current;
     if (!t || e.length === 0) return;
     const l = t.timeScale(), n = () => {
@@ -819,8 +819,8 @@ function oo({
         for (const v of e)
           if (x.labels.has(v.label))
             for (const W of v.data) {
-              const M = Number(W.time);
-              M >= d && M <= g && y.push(W.value);
+              const k = Number(W.time);
+              k >= d && k <= g && y.push(W.value);
             }
         y.length > 0 && x.updateVisibleRange(y);
       }
@@ -911,7 +911,7 @@ function oo({
           n.seriesLabel
         );
         if (!a) continue;
-        const s = n.color ? ie(n.color, l) : l, d = new kt(
+        const s = n.color ? ie(n.color, l) : l, d = new Mt(
           a,
           n.priceTop,
           n.priceBottom,
@@ -967,7 +967,7 @@ function oo({
     "div",
     {
       ref: B,
-      className: Z(
+      className: O(
         "relative z-[1] w-full h-full overflow-hidden p-0",
         i
       ),
@@ -1008,7 +1008,7 @@ function oo({
                 se
               ), g = a.tooltipText ?? "";
               if (!(s || d || g)) return null;
-              const y = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", v = a.labelTextColor ?? "hsl(var(--foreground))", W = `${String(t.xCoordinate)}-${s}-${g}`, M = zt(
+              const y = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", v = a.labelTextColor ?? "hsl(var(--foreground))", W = `${String(t.xCoordinate)}-${s}-${g}`, k = zt(
                 n,
                 it,
                 at[l]
@@ -1019,18 +1019,18 @@ function oo({
                   ref: (ee) => {
                     je.current.set(l, ee);
                   },
-                  className: Z(
+                  className: O(
                     "group absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
                     g && "pointer-events-auto cursor-default"
                   ),
                   style: {
-                    ...M,
+                    ...k,
                     backgroundColor: y,
                     color: v
                   },
                   children: [
                     s && /* @__PURE__ */ w("span", { className: "block", children: s }),
-                    d && /* @__PURE__ */ w("span", { className: Z("block", s && "mt-0.5"), children: d }),
+                    d && /* @__PURE__ */ w("span", { className: O("block", s && "mt-0.5"), children: d }),
                     g && /* @__PURE__ */ w(
                       "span",
                       {
@@ -1067,7 +1067,7 @@ function Wt({
   return /* @__PURE__ */ te(
     "div",
     {
-      className: Z(
+      className: O(
         "flex flex-wrap",
         u ? "items-center justify-center gap-6" : "absolute top-0 left-2 z-[10] gap-2"
       ),
@@ -1077,8 +1077,8 @@ function Wt({
           return /* @__PURE__ */ te(
             "div",
             {
-              className: Z(
-                "flex items-center gap-1.5",
+              className: O(
+                "flex shrink-0 items-center gap-1.5",
                 !u && "px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
                 F && "opacity-50"
               ),
@@ -1086,7 +1086,8 @@ function Wt({
                 /* @__PURE__ */ w(
                   "div",
                   {
-                    className: Z(
+                    className: O(
+                      "shrink-0",
                       u ? "size-2 rounded-full" : "h-3 w-3 rounded-sm"
                     ),
                     style: { backgroundColor: I }
@@ -1095,7 +1096,7 @@ function Wt({
                 /* @__PURE__ */ te(
                   "span",
                   {
-                    className: Z(
+                    className: O(
                       "font-medium text-foreground",
                       u ? "text-sm" : "text-[10px] sm:text-xs"
                     ),
@@ -1145,22 +1146,22 @@ function Wt({
         i?.map((f) => /* @__PURE__ */ te(
           "div",
           {
-            className: Z(
-              "flex items-center gap-1.5",
+            className: O(
+              "flex shrink-0 items-center gap-1.5",
               !u && "px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border"
             ),
             children: [
               /* @__PURE__ */ w(
                 "div",
                 {
-                  className: Z("w-0.5", "h-3"),
+                  className: "h-3 w-0.5 shrink-0",
                   style: { backgroundColor: f.color }
                 }
               ),
               /* @__PURE__ */ w(
                 "span",
                 {
-                  className: Z(
+                  className: O(
                     "font-medium text-foreground",
                     u ? "text-sm" : "text-[10px] sm:text-xs"
                   ),
@@ -1176,7 +1177,7 @@ function Wt({
   );
 }
 export {
-  Me as DEFAULT_SERIES_COLORS,
+  ke as DEFAULT_SERIES_COLORS,
   oo as Graph,
   Wt as GraphLegend,
   tt as VERTICAL_LINE_LABEL_EDGE_PADDING,