@gearbox-protocol/permissionless-ui 1.24.2 → 1.26.0

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

@@ -1,126 +1,147 @@
-import { DateTime as d } from "luxon";
-import { isBelowDisplayThreshold as h, FORMAT_CONSTANTS as I, toSignificantDigits as x, formatNumberWithSuffix as T } from "../../utils/format-number.js";
-const { MIN_DISPLAY_THRESHOLD: c, MAX_EXPONENTIAL_THRESHOLD: L } = I, H = (t, e, r = "full") => {
-  if (h(t))
-    return e ? `<${c}${e}` : `<${c}`;
+import { DateTime as D } from "luxon";
+import { isBelowDisplayThreshold as L, FORMAT_CONSTANTS as G, toSignificantDigits as I, formatNumberWithSuffix as R } from "../../utils/format-number.js";
+const { MIN_DISPLAY_THRESHOLD: f, MAX_EXPONENTIAL_THRESHOLD: p } = G, C = (t, e, r = "full") => {
+  if (L(t))
+    return e ? `<${f}${e}` : `<${f}`;
   if (t === 0)
     return e ? `0${e}` : "0";
-  const n = T(t, {
-    maxExponentialThreshold: L,
+  const a = R(t, {
+    maxExponentialThreshold: p,
     minimumFractionDigits: 0,
     maximumFractionDigits: r === "short" ? 1 : 0,
     format: r,
     adaptiveDecimals: r === "short"
   });
-  return e ? `${n}${e}` : n;
-}, R = 2, p = (t, e) => {
-  if (h(t))
-    return e ? `<${c}${e}` : `<${c}`;
+  return e ? `${a}${e}` : a;
+}, X = 2, H = (t, e) => {
+  if (L(t))
+    return e ? `<${f}${e}` : `<${f}`;
   if (t === 0)
     return e ? `0${e}` : "0";
-  const r = x(t, R);
+  const r = I(t, X);
   return e ? `${r}${e}` : r;
-}, _ = 4, O = (t) => {
-  if (h(t))
-    return `<${c}`;
+}, P = 4, b = (t) => {
+  if (L(t))
+    return `<${f}`;
   if (t === 0)
     return "0";
   const e = Math.round(t), r = Math.abs(t - e);
-  return r > 0 && r < 0.01 ? t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "") : x(t, _);
-}, G = (t, e) => {
-  if (h(t))
-    return e ? `<${c} ${e}` : `<${c}`;
+  return r > 0 && r < 0.01 ? t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "") : I(t, P);
+}, Y = (t, e) => {
+  if (L(t))
+    return e ? `<${f} ${e}` : `<${f}`;
   if (t === 0)
     return e ? `0 ${e}` : "0";
-  const r = Number.isInteger(t), n = Math.abs(t), s = r && n >= 1e3, S = Math.round(t), g = Math.abs(t - S);
-  if (g > 0 && g < 0.01 && !s) {
-    const M = t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "");
-    return e ? `${M} ${e}` : M;
+  const r = Number.isInteger(t), a = Math.abs(t), s = r && a >= 1e3, u = Math.round(t), d = Math.abs(t - u);
+  if (d > 0 && d < 0.01 && !s) {
+    const h = t.toFixed(12).replace(/0+$/, "").replace(/\.$/, "");
+    return e ? `${h} ${e}` : h;
   }
-  const F = T(t, {
-    maxExponentialThreshold: L,
+  const $ = R(t, {
+    maxExponentialThreshold: p,
     minimumFractionDigits: r ? 0 : 2,
     maximumFractionDigits: s ? 1 : r ? 0 : 2,
     format: s ? "short" : "full",
     adaptiveDecimals: s
   });
-  return e ? `${F} ${e}` : F;
-}, D = {
-  "%": p,
-  $: H,
-  token: G,
-  none: O
-}, k = (t) => D[t] || D.token;
-function w(t, e, r = 4) {
+  return e ? `${$} ${e}` : $;
+}, N = {
+  "%": H,
+  $: C,
+  token: Y,
+  none: b
+}, q = (t) => N[t] || N.token;
+function J(t, e, r = 4) {
   if (t === 0)
     return e ? `0 ${e}` : "0";
-  const n = t.toLocaleString("en-US", {
+  const a = t.toLocaleString("en-US", {
     minimumFractionDigits: 0,
     maximumFractionDigits: r
   });
-  return e ? `${n} ${e}` : n;
+  return e ? `${a} ${e}` : a;
 }
-function z(t, e) {
-  let r = t.length > 0 ? Math.min(...t) : 0, n = t.length > 0 ? Math.max(...t) : 0, s = [];
-  const S = () => {
-    const o = n - r, a = (r + n) / 2;
+function Q(t, e, r) {
+  const a = r?.yScaleMin;
+  let s = t.length > 0 ? Math.min(...t) : 0, u = t.length > 0 ? Math.max(...t) : 0, d = !1, F = [];
+  const $ = () => {
+    const n = u - s, o = (s + u) / 2;
     let i = 1, m = "";
-    a >= 1e9 ? (i = 1e9, m = "B") : a >= 1e6 ? (i = 1e6, m = "M") : a >= 1e3 && (i = 1e3, m = "K");
-    const f = o / 10 / i;
-    let u = 1;
-    if (f > 0) {
-      const A = Math.floor(Math.log10(f));
-      u = Math.max(1, -A), u = Math.min(u, 4);
+    o >= 1e9 ? (i = 1e9, m = "B") : o >= 1e6 ? (i = 1e6, m = "M") : o >= 1e3 && (i = 1e3, m = "K");
+    const M = n / 10 / i;
+    let S = 1;
+    if (M > 0) {
+      const x = Math.floor(Math.log10(M));
+      S = Math.max(1, -x), S = Math.min(S, 4);
     }
-    return { scale: i, suffix: m, decimals: u };
-  }, g = (o, a, i) => a > 1 ? `${(o / a).toLocaleString("en-US", {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 4,
-    useGrouping: !1
-  })}${i}` : o.toLocaleString("en-US", {
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 4,
-    useGrouping: !1
-  });
-  return { formatter: (o) => {
-    if (o === 0) return "0";
-    const { scale: a, suffix: i, decimals: m } = S(), $ = Math.abs(o) * 1e-10 || 1e-10;
-    return s.some((f) => Math.abs(f - o) < $) ? g(o, a, i) : a > 1 ? `${(o / a).toLocaleString("en-US", {
+    return { scale: i, suffix: m, decimals: S };
+  }, h = (n, o, i) => {
+    const m = o > 1 ? n / o : n, g = Math.abs(m) >= 1 ? 1 : 4;
+    return o > 1 ? `${(n / o).toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: g,
+      useGrouping: !1
+    })}${i}` : n.toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: g,
+      useGrouping: !1
+    });
+  }, O = 0.12, U = 0.02;
+  return { formatter: (n) => {
+    if (a !== void 0 && n < a) return "";
+    if (n === 0)
+      return d ? "" : (d = !0, "0");
+    n > 0 && (d = !1);
+    const { scale: o, suffix: i, decimals: m } = $(), g = u - s, l = g > 0 ? F.filter(
+      (c) => Math.abs(c) >= g * U
+    ) : F, M = Math.abs(n) * 1e-10 || 1e-10;
+    if (l.some(
+      (c) => Math.abs(c - n) < M
+    ))
+      return h(n, o, i);
+    if (l.length > 0) {
+      const c = l.reduce(
+        (E, A) => Math.abs(A - n) < Math.abs(E - n) ? A : E
+      );
+      if (Math.abs(n - c) / (Math.abs(c) || 1e-10) < O)
+        return h(c, o, i);
+    }
+    const x = o > 1 ? n / o : n, T = Math.abs(x) >= 1 ? Math.min(1, m) : m;
+    return o > 1 ? `${(n / o).toLocaleString("en-US", {
       minimumFractionDigits: 0,
-      maximumFractionDigits: m,
+      maximumFractionDigits: T,
       useGrouping: !1
-    })}${i}` : o.toLocaleString("en-US", {
+    })}${i}` : n.toLocaleString("en-US", {
       minimumFractionDigits: 0,
-      maximumFractionDigits: m,
+      maximumFractionDigits: T,
       useGrouping: !1
     });
-  }, updateVisibleRange: (o) => {
-    o.length > 0 && (r = Math.min(...o), n = Math.max(...o));
-  }, updateLastValues: (o) => {
-    s = [...o];
+  }, updateVisibleRange: (n) => {
+    n.length > 0 && (s = Math.min(...n), u = Math.max(...n));
+  }, updateLastValues: (n) => {
+    F = [...n];
   } };
 }
-const U = (t) => d.fromSeconds(Number(t)).toFormat("dd/LL/yyyy HH:mm"), X = (t) => d.fromSeconds(Number(t)).toFormat("HH:mm"), C = () => {
+const k = (t) => D.fromSeconds(Number(t)).toFormat("dd/LL/yyyy HH:mm"), w = (t) => D.fromSeconds(Number(t)).toFormat("HH:mm"), z = () => {
   let t = null;
   return (e) => {
-    const r = d.fromSeconds(Number(e)), n = r.toFormat("yyyy-MM-dd");
-    return n !== t ? (t = n, r.toFormat("dd MMM")) : r.toFormat("HH:mm");
+    const r = D.fromSeconds(Number(e)), a = r.toFormat("yyyy-MM-dd");
+    return a !== t ? (t = a, r.toFormat("dd MMM")) : r.toFormat("HH:mm");
   };
-}, P = (t, e) => p(Number(t), e), l = {
-  time: U,
-  "%": P
-}, B = (t, e) => {
+}, B = (t, e) => H(Number(t), e), _ = {
+  time: k,
+  "%": B
+}, v = (t, e) => {
   if (t === "time" && e && e.length > 0) {
-    const r = d.fromSeconds(Number(e[0].time)), n = d.fromSeconds(
+    const r = D.fromSeconds(Number(e[0].time)), a = D.fromSeconds(
       Number(e[e.length - 1].time)
     );
-    return r.hasSame(n, "day") ? X : C();
+    return r.hasSame(a, "day") ? w : z();
   }
-  return l[t] || l.time;
+  return _[t] || _.time;
 };
 export {
-  z as createAdaptiveYAxisFormatter,
-  w as formatExactValue,
-  B as getXFormatter,
-  k as getYFormatter
+  Q as createAdaptiveYAxisFormatter,
+  J as formatExactValue,
+  v as getXFormatter,
+  q as getYFormatter
 };

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

@@ -1,10 +1,10 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { cva as W } from "class-variance-authority";
-import * as G from "react";
-import { useMemo as z, useRef as N, useState as L, useEffect as H } from "react";
-import { cn as k } from "../../utils/cn.js";
-import { Graph as S } from "./graph.js";
-const A = W(
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { cva as A } from "class-variance-authority";
+import * as B from "react";
+import { useMemo as D, useRef as N, useState as M, useEffect as E } from "react";
+import { cn as j } from "../../utils/cn.js";
+import { Graph as I } from "./graph.js";
+const O = A(
   "relative w-full overflow-hidden rounded-lg border-border border bg-card text-card-foreground",
   {
     variants: {
@@ -34,45 +34,45 @@ const A = W(
       padding: "default"
     }
   }
-), y = G.forwardRef(
+), R = B.forwardRef(
   ({
-    className: s,
-    variant: r,
-    size: i,
+    className: n,
+    variant: t,
+    size: l,
     padding: o,
     title: a,
-    description: l,
-    toolbar: t,
-    loading: d = !1,
-    emptyMessage: m,
-    error: n,
-    children: u,
-    ...p
-  }, v) => {
-    const x = a || l || t;
-    return /* @__PURE__ */ c(
+    description: r,
+    toolbar: s,
+    loading: i = !1,
+    emptyMessage: d,
+    error: c,
+    children: f,
+    ...x
+  }, p) => {
+    const u = a || r || s;
+    return /* @__PURE__ */ m(
       "div",
       {
-        ref: v,
-        className: k(
+        ref: p,
+        className: j(
           "flex flex-col",
-          A({ variant: r, size: i, padding: o, className: s })
+          O({ variant: t, size: l, padding: o, className: n })
         ),
-        ...p,
+        ...x,
         children: [
-          x && /* @__PURE__ */ c("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
-            (a || l) && /* @__PURE__ */ c("div", { className: "flex-1", children: [
+          u && /* @__PURE__ */ m("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
+            (a || r) && /* @__PURE__ */ m("div", { className: "flex-1", children: [
               a && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: a }),
-              l && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: l })
+              r && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: r })
             ] }),
-            t && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: t })
+            s && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: s })
           ] }),
-          /* @__PURE__ */ c("div", { className: "relative flex-1 w-full min-h-0", children: [
-            d && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ m("div", { className: "relative flex-1 w-full min-h-0", children: [
+            i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-2", children: [
               /* @__PURE__ */ e("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
               /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm text-muted-foreground", children: "Loading..." })
             ] }) }),
-            n && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
+            c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
               /* @__PURE__ */ e(
                 "svg",
                 {
@@ -92,9 +92,9 @@ const A = W(
                   )
                 }
               ),
-              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm font-medium", children: n })
+              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm font-medium", children: c })
             ] }) }),
-            !n && !u && m && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+            !c && !f && d && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ e(
                 "svg",
                 {
@@ -114,16 +114,16 @@ const A = W(
                   )
                 }
               ),
-              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm", children: m })
+              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm", children: d })
             ] }) }),
             /* @__PURE__ */ e(
               "div",
               {
-                className: k(
+                className: j(
                   "w-full h-full transition-[filter] duration-300 delay-300",
-                  d && "blur-sm pointer-events-none"
+                  i && "blur-sm pointer-events-none"
                 ),
-                children: !n && u
+                children: !c && f
               }
             )
           ] })
@@ -132,79 +132,96 @@ const A = W(
     );
   }
 );
-y.displayName = "GraphView";
-function I({
-  series: s,
-  data: r,
-  graphId: i,
-  onUnselectSeries: o,
-  loading: a,
-  title: l,
-  description: t,
-  toolbar: d,
-  emptyMessage: m = "No data available",
-  error: n,
-  containerClassName: u,
-  variant: p,
-  size: v,
-  padding: x,
+R.displayName = "GraphView";
+function Q({
+  series: n,
+  data: t,
+  lineColor: l,
+  color: o,
+  topColor: a,
+  bottomColor: r,
+  graphId: s,
+  onUnselectSeries: i,
+  loading: d,
+  title: c,
+  description: f,
+  toolbar: x,
+  emptyMessage: p = "No data available",
+  error: u,
+  containerClassName: V,
+  variant: W,
+  size: G,
+  padding: z,
   yMeasureUnit: g,
-  ...V
+  showCurrentValue: b,
+  ...L
 }) {
-  const h = z(() => s && s.length > 0 ? s : r && r.length > 0 ? [
-    {
-      data: r.map((f) => ({
-        time: typeof f.time == "number" ? f.time : Number(f.time),
-        value: f.value
-      })),
-      label: "Value",
-      yMeasureUnit: g
+  const h = D(() => {
+    if (n && n.length > 0)
+      return n;
+    if (t && t.length > 0) {
+      const y = l ?? o;
+      return [
+        {
+          data: t.map((v) => ({
+            time: typeof v.time == "number" ? v.time : Number(v.time),
+            value: v.value
+          })),
+          label: "Value",
+          yMeasureUnit: g,
+          ...y && { lineColor: y },
+          ...a && { topColor: a },
+          ...r && { bottomColor: r }
+        }
+      ];
     }
-  ] : [], [s, r, g]), j = !a && h.length === 0, b = N(h);
-  h.length > 0 && (b.current = h);
-  const w = a && h.length === 0 ? b.current : h, R = w.length > 0;
+    return [];
+  }, [n, t, g, l, o, a, r]), H = !d && h.length === 0, w = N(h);
+  h.length > 0 && (w.current = h);
+  const k = d && h.length === 0 ? w.current : h, S = k.length > 0;
   return /* @__PURE__ */ e(
-    y,
+    R,
     {
-      className: u,
-      variant: p,
-      size: v,
-      padding: x,
-      title: l,
-      description: t,
-      toolbar: d,
-      loading: a,
-      error: n,
-      emptyMessage: j ? m : void 0,
-      children: R && !n && /* @__PURE__ */ e(
-        S,
+      className: V,
+      variant: W,
+      size: G,
+      padding: z,
+      title: c,
+      description: f,
+      toolbar: x,
+      loading: d,
+      error: u,
+      emptyMessage: H ? p : void 0,
+      children: S && !u && /* @__PURE__ */ e(
+        I,
         {
-          series: w,
+          series: k,
           yMeasureUnit: g,
-          ...o ? { onUnselectSeries: o } : {},
-          ...V
+          ...i ? { onUnselectSeries: i } : {},
+          ...b !== void 0 ? { showCurrentValue: b } : {},
+          ...L
         }
       )
     }
   );
 }
-function O(s = 0) {
-  const r = N(null), i = N(null), [o, a] = L(null);
-  return H(() => {
-    const l = () => {
-      if (r.current && i.current) {
-        const m = i.current.clientWidth, n = r.current.clientWidth;
-        a(m - n - s);
+function T(n = 0) {
+  const t = N(null), l = N(null), [o, a] = M(null);
+  return E(() => {
+    const r = () => {
+      if (t.current && l.current) {
+        const d = l.current.clientWidth, c = t.current.clientWidth;
+        a(d - c - n);
       }
-    }, t = i.current, d = t ? new ResizeObserver(l) : null;
-    return t && d?.observe(t), () => {
-      t && d?.unobserve(t);
+    }, s = l.current, i = s ? new ResizeObserver(r) : null;
+    return s && i?.observe(s), () => {
+      s && i?.unobserve(s);
     };
-  }, [s]), { graphWidth: o, parentRef: i, asideRef: r };
+  }, [n]), { graphWidth: o, parentRef: l, asideRef: t };
 }
 export {
-  y as GraphView,
-  I as GraphViewWithData,
-  A as graphViewVariants,
-  O as useGraphAside
+  R as GraphView,
+  Q as GraphViewWithData,
+  O as graphViewVariants,
+  T as useGraphAside
 };