@gearbox-protocol/ui-kit 3.14.0-next.34 → 3.14.0-next.36

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

@@ -1,79 +1,79 @@
-import { jsxs as U, jsx as S } from "react/jsx-runtime";
-import { createChart as He, CrosshairMode as Xe, AreaSeries as qe, LineStyle as Ze } from "lightweight-charts";
-import * as ge from "react";
-import { useRef as I, useState as be, useEffect as L } from "react";
-import { useIsMobile as Ke } from "../../hooks/use-media-query.js";
-import { cn as Ce } from "../../utils/cn.js";
-import { resolveCSSColor as O, generateColorsFromBase as ne, hslToHex as Je } from "../../utils/colors.js";
-import { getDefaultOptions as De, getDefaultSeries as Qe, getDefaultVerticalLine as Oe } from "./default-config.js";
-import { getXFormatters as Be, createAdaptiveYAxisFormatter as Ue, formatExactValue as pe } from "./formatters.js";
-import { GraphCurrentValue as et } from "./graph-current-value.js";
-import { GraphTooltip as tt } from "./graph-tooltip.js";
-import { VertLine as ot } from "./plugins/vertical-line.js";
-class rt {
+import { jsxs as re, jsx as T } from "react/jsx-runtime";
+import { createChart as Ue, CrosshairMode as et, LineStyle as Ge, LineSeries as tt, AreaSeries as ot } from "lightweight-charts";
+import * as Ce from "react";
+import { useRef as X, useState as Se, useEffect as W } from "react";
+import { useIsMobile as rt } from "../../hooks/use-media-query.js";
+import { cn as ne } from "../../utils/cn.js";
+import { resolveCSSColor as U, generateColorsFromBase as se, hslToHex as nt } from "../../utils/colors.js";
+import { getDefaultOptions as je, getDefaultSeries as lt, getDefaultVerticalLine as at } from "./default-config.js";
+import { getXFormatters as He, formatExactValue as xe, createAdaptiveYAxisFormatter as it } from "./formatters.js";
+import { GraphCurrentValue as st } from "./graph-current-value.js";
+import { GraphTooltip as ct } from "./graph-tooltip.js";
+import { VertLine as ut } from "./plugins/vertical-line.js";
+class ft {
   _yTop;
   _yBottom;
   _color;
-  constructor(c, s, b) {
-    this._yTop = c, this._yBottom = s, this._color = b;
+  constructor(s, g, m) {
+    this._yTop = s, this._yBottom = g, this._color = m;
   }
-  draw(c) {
-    c.useBitmapCoordinateSpace((s) => {
-      const b = s.context, h = s.verticalPixelRatio, y = this._yTop === null ? 0 : this._yTop * h, z = this._yBottom === null ? s.bitmapSize.height : this._yBottom * h, p = Math.min(y, z), R = Math.max(y, z);
-      b.fillStyle = this._color, b.fillRect(0, p, s.bitmapSize.width, R - p);
+  draw(s) {
+    s.useBitmapCoordinateSpace((g) => {
+      const m = g.context, d = g.verticalPixelRatio, N = this._yTop === null ? 0 : this._yTop * d, q = this._yBottom === null ? g.bitmapSize.height : this._yBottom * d, x = Math.min(N, q), k = Math.max(N, q);
+      m.fillStyle = this._color, m.fillRect(0, x, g.bitmapSize.width, k - x);
     });
   }
 }
-class nt {
+class ht {
   _source;
   _yTop = null;
   _yBottom = null;
-  constructor(c) {
-    this._source = c;
+  constructor(s) {
+    this._source = s;
   }
   update() {
-    const c = this._source.series;
-    this._yTop = this._source.priceTop === void 0 ? null : c.priceToCoordinate(this._source.priceTop), this._yBottom = this._source.priceBottom === void 0 ? null : c.priceToCoordinate(this._source.priceBottom);
+    const s = this._source.series;
+    this._yTop = this._source.priceTop === void 0 ? null : s.priceToCoordinate(this._source.priceTop), this._yBottom = this._source.priceBottom === void 0 ? null : s.priceToCoordinate(this._source.priceBottom);
   }
   /** Draw beneath the series line/area so the data stays readable. */
   zOrder() {
     return "bottom";
   }
   renderer() {
-    return new rt(this._yTop, this._yBottom, this._source.color);
+    return new ft(this._yTop, this._yBottom, this._source.color);
   }
 }
-class at {
+class gt {
   series;
   priceTop;
   priceBottom;
   color;
   _paneViews;
-  constructor(c, s, b, h) {
-    this.series = c, this.priceTop = s, this.priceBottom = b, this.color = h, this._paneViews = [new nt(this)];
+  constructor(s, g, m, d) {
+    this.series = s, this.priceTop = g, this.priceBottom = m, this.color = d, this._paneViews = [new ht(this)];
   }
   updateAllViews() {
-    for (const c of this._paneViews) c.update();
+    for (const s of this._paneViews) s.update();
   }
   paneViews() {
     return this._paneViews;
   }
 }
-function lt(t, c, s) {
-  const b = t.labelText ?? "", h = t.value, y = h === void 0 ? "" : typeof h == "number" ? c === "$" ? `$${pe(h, void 0, s)}` : c === "%" ? `${pe(h, void 0, s)}%` : pe(
-    h,
-    c !== "none" && c !== "%" && c !== "$" ? c : void 0,
-    s
-  ) : String(h);
-  return { labelText: b, valueStr: y };
+function dt(o, s, g) {
+  const m = o.labelText ?? "", d = o.value, N = d === void 0 ? "" : typeof d == "number" ? s === "$" ? `$${xe(d, void 0, g)}` : s === "%" ? `${xe(d, void 0, g)}%` : xe(
+    d,
+    s !== "none" && s !== "%" && s !== "$" ? s : void 0,
+    g
+  ) : String(d);
+  return { labelText: m, valueStr: N };
 }
-function it(t, c) {
-  for (let s = t.length - 1; s >= 0; s--)
-    if (Number(t[s].time) <= c)
-      return t[s].value;
+function mt(o, s) {
+  for (let g = o.length - 1; g >= 0; g--)
+    if (Number(o[g].time) <= s)
+      return o[g].value;
   return 0;
 }
-const ve = [
+const ye = [
   // 0  green (emerald)
   {
     line: "#02c39a",
@@ -188,67 +188,70 @@ const ve = [
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], st = 137.5;
-function Fe(t) {
-  if (t < ve.length)
-    return ve[t];
-  const s = (t - ve.length) * st % 360, b = Je(s, 70, 50), { topColor: h, bottomColor: y } = ne(b);
-  return { line: b, top: h, bottom: y };
+], pt = 137.5;
+function Xe(o) {
+  if (o < ye.length)
+    return ye[o];
+  const g = (o - ye.length) * pt % 360, m = nt(g, 70, 50), { topColor: d, bottomColor: N } = se(m);
+  return { line: m, top: d, bottom: N };
 }
-function Nt({
-  series: t,
-  className: c,
-  showLegend: s = !1,
-  onUnselectSeries: b,
-  xMeasureUnit: h = "time",
-  yMeasureUnit: y = "token",
-  optionsOverrides: z,
-  verticalLineOptions: p,
-  priceLineOptions: R,
-  zoneOptions: W,
-  currentValueDecimals: ae,
-  useSharedPriceScale: D = !1,
-  showCurrentValue: Ae = !0,
-  graphTitle: le,
-  yScaleMin: xe,
-  yScaleMinMultiple: Se,
-  visibleTimeFrom: j,
-  disableZoom: ee = !1
+function Lt({
+  series: o,
+  className: s,
+  showLegend: g = !1,
+  onUnselectSeries: m,
+  xMeasureUnit: d = "time",
+  yMeasureUnit: N = "token",
+  optionsOverrides: q,
+  verticalLineOptions: x,
+  priceLineOptions: k,
+  zoneOptions: A,
+  currentValueDecimals: ce,
+  useSharedPriceScale: $ = !1,
+  dualYAxis: L = !1,
+  defaultVisiblePriceScaleId: we = "right",
+  leftPriceScaleTitle: Te,
+  rightPriceScaleTitle: vt,
+  showCurrentValue: qe = !0,
+  graphTitle: ue,
+  yScaleMin: Ne,
+  yScaleMinMultiple: Ve,
+  visibleTimeFrom: Z,
+  disableZoom: le = !1,
+  hideDefaultTooltip: fe = !1
 }) {
-  const T = I(null), v = I(/* @__PURE__ */ new Map()), ie = I(!1), ye = I(!0), se = I(
-    null
-  ), Ie = I(null), H = I(null), ce = I(null), te = I(null), P = Ke(), $ = ge.useMemo(() => t.flatMap((e) => e.data), [t]), ze = ge.useMemo(() => {
-    if (t.length > 0) {
-      const e = t[t.length - 1];
-      if (e.data.length > 0)
-        return e.data[e.data.length - 1];
+  const I = X(null), y = X(/* @__PURE__ */ new Map()), he = X(!1), Re = X(!0), Pe = X([]), K = X(null), ge = X(null), ae = X(null), R = rt(), G = Ce.useMemo(() => o.flatMap((t) => t.data), [o]), Ze = Ce.useMemo(() => {
+    if (o.length > 0) {
+      const t = o[o.length - 1];
+      if (t.data.length > 0)
+        return t.data[t.data.length - 1];
     }
-  }, [t]), [we, ue] = be(() => {
-    if (!ze) return;
-    const e = /* @__PURE__ */ new Map();
-    for (const l of t)
-      l.data.length > 0 && e.set(l.label, l.data[l.data.length - 1]);
-    return e;
-  }), [Ne, E] = be(null), [Ve, Re] = be([]);
-  L(() => {
-    const e = () => {
+  }, [o]), [Me, de] = Se(() => {
+    if (!Ze) return;
+    const t = /* @__PURE__ */ new Map();
+    for (const a of o)
+      a.data.length > 0 && t.set(a.label, a.data[a.data.length - 1]);
+    return t;
+  }), [ke, j] = Se(null), [Le, _e] = Se([]);
+  W(() => {
+    const t = () => {
       try {
-        if (T.current && H.current) {
-          const r = H.current.clientWidth, i = H.current.clientHeight;
-          T.current.resize(r, i);
+        if (I.current && K.current) {
+          const n = K.current.clientWidth, i = K.current.clientHeight;
+          I.current.resize(n, i);
         }
       } catch {
       }
-    }, l = H.current, n = l ? new ResizeObserver(e) : null;
-    return te.current = n, l && n?.observe(l), () => {
-      l && n?.unobserve(l), n?.disconnect(), te.current = null;
+    }, a = K.current, l = a ? new ResizeObserver(t) : null;
+    return ae.current = l, a && l?.observe(a), () => {
+      a && l?.unobserve(a), l?.disconnect(), ae.current = null;
     };
-  }, []), L(() => {
-    if (!ce.current || ie.current) return;
-    const e = De(), l = O(
+  }, []), W(() => {
+    if (!ge.current || he.current) return;
+    const t = je(), a = U(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), n = ee ? {
+    ), l = le ? {
       handleScale: {
         mouseWheel: !1,
         pinch: !1,
@@ -261,29 +264,34 @@ function Nt({
         horzTouchDrag: !1,
         vertTouchDrag: !1
       }
-    } : {}, r = He(ce.current, {
-      ...e,
+    } : {}, n = Ue(ge.current, {
+      ...t,
+      leftPriceScale: {
+        ...t.leftPriceScale || {},
+        visible: !1,
+        textColor: a
+      },
       rightPriceScale: {
-        ...e.rightPriceScale || {},
-        visible: !P,
-        textColor: l
+        ...t.rightPriceScale || {},
+        visible: !R,
+        textColor: a
       },
-      ...P && {
+      ...R && {
         crosshair: {
-          ...e.crosshair,
-          mode: Xe.Magnet
+          ...t.crosshair,
+          mode: et.Magnet
         }
       },
-      ...n,
-      ...z
+      ...l,
+      ...q
     });
-    return T.current = r, ie.current = !0, () => {
-      te.current?.disconnect(), te.current = null, r.remove(), T.current = null, ie.current = !1, v.current.clear();
+    return I.current = n, he.current = !0, () => {
+      ae.current?.disconnect(), ae.current = null, n.remove(), I.current = null, he.current = !1, y.current.clear();
     };
-  }, [P, z, ee]), L(() => {
-    const e = T.current;
-    e && e.applyOptions(
-      ee ? {
+  }, [R, q, le]), W(() => {
+    const t = I.current;
+    t && t.applyOptions(
+      le ? {
         handleScale: {
           mouseWheel: !1,
           pinch: !1,
@@ -311,47 +319,89 @@ function Nt({
         }
       }
     );
-  }, [ee]), L(() => {
-    const e = T.current;
-    if (!e || t.length === 0) return;
-    const n = t.filter((o) => o.data.length > 0).length <= 1 ? xe : Se, r = h === "time" ? Be(h, $) : Be(h), i = $.map((o) => o.value), {
-      formatter: u,
-      tickmarksFormatter: d,
-      updateVisibleRange: B,
-      updateLastValues: g
-    } = Ue(i, y, {
-      yScaleMin: n
-    });
-    se.current = B, Ie.current = g;
-    const F = t.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
-    g(F);
-    const M = De();
-    e.applyOptions({
+  }, [le]), W(() => {
+    const t = I.current;
+    if (!t || o.length === 0) return;
+    const l = o.filter((r) => r.data.length > 0).length <= 1 ? Ne : Ve, n = d === "time" ? He(d, G) : He(d), i = /* @__PURE__ */ new Map();
+    {
+      let r = 0;
+      for (const e of o)
+        e.data.length !== 0 && (i.set(
+          e.label,
+          e.priceScaleId ?? (r === 0 ? "left" : "right")
+        ), r++);
+    }
+    const f = (r, e, u) => {
+      const {
+        formatter: B,
+        tickmarksFormatter: S,
+        updateVisibleRange: z,
+        updateLastValues: Fe
+      } = it(r, e, {
+        yScaleMin: l
+      }), pe = o.filter((O) => O.data.length > 0 && u.has(O.label)).map((O) => O.data[O.data.length - 1].value);
+      return Fe(pe), { formatter: B, tickmarksFormatter: S, updateVisibleRange: z, labels: u };
+    }, c = [];
+    if (L)
+      for (const r of ["left", "right"]) {
+        const e = /* @__PURE__ */ new Set(), u = [];
+        let B = N;
+        for (const S of o)
+          if (S.data.length !== 0 && i.get(S.label) === r) {
+            e.size === 0 && S.yMeasureUnit && (B = S.yMeasureUnit), e.add(S.label);
+            for (const z of S.data) u.push(z.value);
+          }
+        e.size > 0 && c.push(f(u, B, e));
+      }
+    else {
+      const r = G.map((u) => u.value), e = new Set(
+        o.filter((u) => u.data.length > 0).map((u) => u.label)
+      );
+      c.push(f(r, N, e));
+    }
+    Pe.current = c;
+    const b = /* @__PURE__ */ new Map();
+    for (const r of c)
+      for (const e of r.labels)
+        b.set(e, r);
+    const v = je();
+    t.applyOptions({
       localization: {
-        ...M.localization || {},
+        ...v.localization || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-        timeFormatter: (o) => (
+        timeFormatter: (r) => (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-          r.timeFormatter(parseFloat(o), void 0)
+          n.timeFormatter(parseFloat(r), void 0)
         )
       },
       timeScale: {
-        ...M.timeScale || {},
+        ...v.timeScale || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
-        tickMarkFormatter: r.tickMarkFormatter,
+        tickMarkFormatter: n.tickMarkFormatter,
         minBarSpacing: 0
       }
     });
-    const m = ($.length > 0 ? Math.min(...$.map((o) => o.value)) : 0) < 0, N = $.some((o) => o.value === 0), C = !m && N, w = t.length > 1 && !D, x = t.length > 1 && !D || P, Y = O(
+    const _ = (G.length > 0 ? Math.min(...G.map((r) => r.value)) : 0) < 0, w = G.some((r) => r.value === 0), p = !_ && w, C = !L && o.length > 1 && !$, P = L ? R : o.length > 1 && !$ || R, M = U(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
-    e.applyOptions({
+    t.applyOptions({
+      ...L && {
+        defaultVisiblePriceScaleId: we
+      },
+      leftPriceScale: {
+        ...v.leftPriceScale || {},
+        visible: L && !R,
+        textColor: M,
+        ...L && Te && {
+          // lightweight-charts uses scale margins; title shown via localization if needed
+        }
+      },
       rightPriceScale: {
-        ...M.rightPriceScale || {},
-        visible: !x,
-        textColor: Y,
-        ...C && {
+        ...v.rightPriceScale || {},
+        visible: L ? !R : !P,
+        textColor: M,
+        ...p && !L && {
           scaleMargins: {
             top: 0.3,
             bottom: 0
@@ -359,108 +409,129 @@ function Nt({
         }
       }
     });
-    const J = new Set(v.current.keys()), fe = new Set(t.map((o) => o.label));
-    for (const o of J)
-      if (!fe.has(o)) {
-        const a = v.current.get(o);
-        a && (e.removeSeries(a), v.current.delete(o));
+    const V = new Set(y.current.keys()), J = new Set(o.map((r) => r.label));
+    for (const r of V)
+      if (!J.has(r)) {
+        const e = y.current.get(r);
+        e && (t.removeSeries(e), y.current.delete(r));
       }
-    const We = Qe(), he = [];
-    let re = 0;
-    const Pe = t.find((o) => o.data.length > 0), Q = /* @__PURE__ */ new Map();
-    if (R && R.length > 0)
-      for (const o of R) {
-        if (!Number.isFinite(o.price)) continue;
-        const a = o.seriesLabel ?? Pe?.label;
-        if (!a) continue;
-        const V = Q.get(a) ?? [];
-        V.push(o.price), Q.set(a, V);
+    const Q = lt(), ee = [];
+    let te = 0;
+    const De = o.find((r) => r.data.length > 0), oe = /* @__PURE__ */ new Map();
+    if (k && k.length > 0)
+      for (const r of k) {
+        if (!Number.isFinite(r.price)) continue;
+        const e = r.seriesLabel ?? De?.label;
+        if (!e) continue;
+        const u = oe.get(e) ?? [];
+        u.push(r.price), oe.set(e, u);
       }
-    if (W && W.length > 0)
-      for (const o of W) {
-        const a = o.seriesLabel ?? Pe?.label;
-        if (!a) continue;
-        const V = Q.get(a) ?? [];
-        Number.isFinite(o.priceTop) && V.push(o.priceTop), Number.isFinite(o.priceBottom) && V.push(o.priceBottom), Q.set(a, V);
+    if (A && A.length > 0)
+      for (const r of A) {
+        const e = r.seriesLabel ?? De?.label;
+        if (!e) continue;
+        const u = oe.get(e) ?? [];
+        Number.isFinite(r.priceTop) && u.push(r.priceTop), Number.isFinite(r.priceBottom) && u.push(r.priceBottom), oe.set(e, u);
       }
-    for (let o = 0; o < t.length; o++) {
-      const a = t[o], V = Fe(o), X = a.lineColor ?? a.color ?? V.line;
-      let G, q;
-      if (a.lineColor ?? a.color)
-        if (a.topColor && a.bottomColor)
-          G = a.topColor, q = a.bottomColor;
-        else if (a.topColor) {
-          const f = ne(X);
-          G = a.topColor, q = f.bottomColor;
-        } else if (a.bottomColor)
-          G = ne(X).topColor, q = a.bottomColor;
+    for (let r = 0; r < o.length; r++) {
+      const e = o[r], u = Xe(r), B = e.lineColor ?? e.color ?? u.line;
+      let S, z;
+      if (e.lineColor ?? e.color)
+        if (e.topColor && e.bottomColor)
+          S = e.topColor, z = e.bottomColor;
+        else if (e.topColor) {
+          const h = se(B);
+          S = e.topColor, z = h.bottomColor;
+        } else if (e.bottomColor)
+          S = se(B).topColor, z = e.bottomColor;
         else {
-          const f = ne(X);
-          G = f.topColor, q = f.bottomColor;
+          const h = se(B);
+          S = h.topColor, z = h.bottomColor;
         }
       else
-        G = a.topColor || V.top, q = a.bottomColor || V.bottom;
-      if (a.data.length === 0) {
-        const f = v.current.get(a.label);
-        f && (e.removeSeries(f), v.current.delete(a.label));
+        S = e.topColor || u.top, z = e.bottomColor || u.bottom;
+      if (e.data.length === 0) {
+        const h = y.current.get(e.label);
+        h && (t.removeSeries(h), y.current.delete(e.label));
         continue;
       }
-      const $e = (a.data.length > 0 ? Math.min(...a.data.map((f) => f.value)) : 0) < 0, Ee = a.data.some((f) => f.value === 0), Ye = !$e && Ee, Me = D || !w || re === 0 ? "right" : `scale-${re}`;
-      w && he.push({
-        priceScaleId: Me || "right",
-        shouldPreventNegativeAxis: Ye,
-        seriesIndex: re
+      const pe = (e.data.length > 0 ? Math.min(...e.data.map((h) => h.value)) : 0) < 0, O = e.data.some((h) => h.value === 0), Ke = !pe && O, Ie = L ? e.priceScaleId ?? (te === 0 ? "left" : "right") : $ || !C || te === 0 ? "right" : `scale-${te}`;
+      C && ee.push({
+        priceScaleId: Ie || "right",
+        shouldPreventNegativeAxis: Ke,
+        seriesIndex: te
       });
-      const _e = (D || !w) && n !== void 0 && typeof n == "number", Ge = Q.get(a.label) ?? [], ke = {
-        lineColor: X,
-        topColor: G,
-        bottomColor: q,
-        priceScaleId: Me,
+      const ze = ($ || !C) && l !== void 0 && typeof l == "number", Oe = oe.get(e.label) ?? [], Je = (h) => {
+        const F = h();
+        if (F?.priceRange) {
+          ze && (F.priceRange.minValue = l);
+          for (const E of Oe)
+            E < F.priceRange.minValue && (F.priceRange.minValue = E), E > F.priceRange.maxValue && (F.priceRange.maxValue = E);
+        }
+        return F;
+      }, We = b.get(e.label) ?? c[0], $e = We.formatter, Qe = We.tickmarksFormatter, be = {
+        lineColor: B,
+        topColor: S,
+        bottomColor: z,
+        priceScaleId: Ie,
+        ...e.seriesType === "line" && {
+          lineStyle: e.lineStyle ?? Ge.Solid
+        },
         priceFormat: {
           type: "custom",
           minMove: 0.01,
-          formatter: _e && typeof n == "number" ? (f) => u(
-            f < n ? n : f
-          ) : u,
-          tickmarksFormatter: d
+          formatter: ze && typeof l == "number" ? (h) => $e(
+            h < l ? l : h
+          ) : $e,
+          tickmarksFormatter: Qe
         },
-        autoscaleInfoProvider: (f) => {
-          const k = f();
-          if (k?.priceRange) {
-            _e && (k.priceRange.minValue = n);
-            for (const A of Ge)
-              A < k.priceRange.minValue && (k.priceRange.minValue = A), A > k.priceRange.maxValue && (k.priceRange.maxValue = A);
-          }
-          return k;
-        }
-      };
-      let Z = v.current.get(a.label);
-      const K = a.data.map((f) => ({
-        ...f,
-        time: f.time
+        autoscaleInfoProvider: Je
+      }, Ee = e.seriesType === "line";
+      let D = y.current.get(e.label);
+      const Y = e.data.map((h) => ({
+        ...h,
+        time: h.time
       }));
-      if (j !== void 0 && K.length > 0 && Number(K[0].time) > j) {
-        const f = Number(K[0].time), k = f - j, A = 86400, je = k > 180 * A ? 7 * A : k > 30 * A ? A : 6 * 3600, Le = [];
-        for (let me = j; me < f; me += je)
-          Le.push({ time: me });
-        K.unshift(...Le);
+      if (Z !== void 0 && Y.length > 0 && Number(Y[0].time) > Z) {
+        const h = Number(Y[0].time), F = h - Z, E = 86400, Ye = F > 180 * E ? 7 * E : F > 30 * E ? E : 6 * 3600, Ae = [];
+        for (let ve = Z; ve < h; ve += Ye)
+          Ae.push({ time: ve });
+        Y.unshift(...Ae);
       }
-      Z ? (Z.applyOptions(ke), Z.setData(K)) : (Z = e.addSeries(qe, {
-        ...We,
-        ...ke
-      }), Z.setData(K), v.current.set(a.label, Z)), re++;
+      D && D.seriesType() !== (Ee ? "Line" : "Area") && (t.removeSeries(D), y.current.delete(e.label), D = void 0), D ? (D.applyOptions(be), D.setData(Y)) : (Ee ? D = t.addSeries(tt, {
+        ...Q,
+        ...be
+      }) : D = t.addSeries(ot, {
+        ...Q,
+        ...be
+      }), D.setData(Y), y.current.set(e.label, D)), te++;
     }
-    if (w && he.length > 0)
-      for (const o of he)
+    if (L)
+      try {
+        const r = t.priceScale("left"), e = t.priceScale("right"), u = {
+          visible: !R,
+          autoScale: !0,
+          scaleMargins: { top: 0.1, bottom: 0.1 },
+          alignLabels: !0,
+          borderVisible: !0,
+          borderColor: "rgba(224, 227, 235, 0.1)",
+          entireTextOnly: !1,
+          textColor: M
+        };
+        r?.applyOptions(u), e?.applyOptions(u);
+      } catch {
+      }
+    else if (C && ee.length > 0)
+      for (const r of ee)
         try {
-          const a = e.priceScale(o.priceScaleId);
-          a && a.applyOptions({
+          const e = t.priceScale(r.priceScaleId);
+          e && e.applyOptions({
             visible: !1,
             autoScale: !0,
             scaleMargins: {
               top: 0.1,
               bottom: 0.1,
-              ...o.shouldPreventNegativeAxis && {
+              ...r.shouldPreventNegativeAxis && {
                 top: 0.3,
                 bottom: 0
               }
@@ -469,25 +540,25 @@ function Nt({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: Y
+            textColor: M
           });
-        } catch (a) {
+        } catch (e) {
           console.warn(
-            `Failed to configure price scale ${o.priceScaleId} for series ${o.seriesIndex}:`,
-            a
+            `Failed to configure price scale ${r.priceScaleId} for series ${r.seriesIndex}:`,
+            e
           );
         }
-    else if (!w)
+    else if (!C)
       try {
-        const o = e.priceScale("right");
-        o && o.applyOptions({
-          visible: !P,
+        const r = t.priceScale("right");
+        r && r.applyOptions({
+          visible: !R,
           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 || C ? 0 : 0.1,
-            ...C && {
+            bottom: l !== void 0 || p ? 0 : 0.1,
+            ...p && {
               top: 0.3
             }
           },
@@ -495,294 +566,315 @@ function Nt({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: Y
+          textColor: M
         });
       } catch {
       }
-    if (n !== void 0 && !P && (D || !w) && e.applyOptions({
+    if (l !== void 0 && !R && ($ || !C) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
-    }), $.length > 0) {
-      const o = $.map((G) => Number(G.time)), a = Math.min(...o), V = j !== void 0 ? Math.min(j, a) : a, X = Math.max(...o);
-      e.timeScale().setVisibleRange({ from: V, to: X });
+    }), G.length > 0) {
+      const r = G.map((S) => Number(S.time)), e = Math.min(...r), u = Z !== void 0 ? Math.min(Z, e) : e, B = Math.max(...r);
+      t.timeScale().setVisibleRange({ from: u, to: B });
     }
-    ye.current && (ye.current = !1);
-    const de = /* @__PURE__ */ new Map();
-    for (const o of t)
-      o.data.length > 0 && de.set(o.label, o.data[o.data.length - 1]);
-    ue(de.size > 0 ? de : void 0);
+    Re.current && (Re.current = !1);
+    const me = /* @__PURE__ */ new Map();
+    for (const r of o)
+      r.data.length > 0 && me.set(r.label, r.data[r.data.length - 1]);
+    de(me.size > 0 ? me : void 0);
   }, [
-    t,
-    $,
-    h,
-    y,
-    P,
-    D,
-    xe,
-    Se,
-    j,
+    o,
+    G,
+    d,
+    N,
     R,
-    W
-  ]), L(() => {
-    const e = T.current;
-    if (!e || t.length === 0) return;
-    const l = t.length === 1;
-    let n;
-    for (const i of t)
+    $,
+    L,
+    we,
+    Te,
+    Ne,
+    Ve,
+    Z,
+    k,
+    A
+  ]), W(() => {
+    const t = I.current;
+    if (!t || o.length === 0) return;
+    const a = o.length === 1;
+    let l;
+    for (const i of o)
       if (i.data.length > 0) {
-        n = i.data[i.data.length - 1].time;
+        l = i.data[i.data.length - 1].time;
         break;
       }
-    if (!n) return;
-    const r = (i) => {
-      const { time: u = n, seriesData: d, point: B } = i || {}, g = Array.from(v.current.values());
-      if (!B || !u) {
-        const _ = /* @__PURE__ */ new Map();
-        for (const m of t)
-          m.data.length > 0 && _.set(m.label, m.data[m.data.length - 1]);
-        if (ue(_.size > 0 ? _ : void 0), l || D)
-          E(null);
-        else if (g[0] && n) {
-          const N = e.timeScale().timeToCoordinate(n), C = t[0];
-          if (C.data.length > 0) {
-            const w = C.data[C.data.length - 1].value, x = g[0].priceToCoordinate(w);
-            N !== null && x !== null && E({ x: N, y: x });
+    if (!l) return;
+    const n = (i) => {
+      const { time: f = l, seriesData: c, point: b } = i || {}, v = Array.from(y.current.values());
+      if (!b || !f) {
+        const w = /* @__PURE__ */ new Map();
+        for (const p of o)
+          p.data.length > 0 && w.set(p.label, p.data[p.data.length - 1]);
+        if (de(w.size > 0 ? w : void 0), a || $ || fe)
+          j(null);
+        else if (v[0] && l) {
+          const C = t.timeScale().timeToCoordinate(l), P = o[0];
+          if (P.data.length > 0) {
+            const M = P.data[P.data.length - 1].value, V = v[0].priceToCoordinate(M);
+            C !== null && V !== null && j({ x: C, y: V });
           }
         }
         return;
       }
-      const F = /* @__PURE__ */ new Map();
-      let M;
-      for (let _ = 0; _ < t.length; _++) {
-        const m = t[_], N = g[_];
-        if (!N) continue;
-        const C = d?.get(N), w = C && "value" in C ? C.value : void 0;
-        let x;
-        if (w !== void 0)
-          x = w;
-        else if (l) {
-          const Y = Number(u), J = m.data.length > 0 ? Number(m.data[0].time) : Number.POSITIVE_INFINITY;
-          Y < J ? x = Number.NaN : x = m.data[m.data.length - 1]?.value ?? 0;
+      const H = /* @__PURE__ */ new Map();
+      let _;
+      for (let w = 0; w < o.length; w++) {
+        const p = o[w], C = v[w];
+        if (!C) continue;
+        const P = c?.get(C), M = P && "value" in P ? P.value : void 0;
+        let V;
+        if (M !== void 0)
+          V = M;
+        else if (a) {
+          const J = Number(f), Q = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
+          J < Q ? V = Number.NaN : V = p.data[p.data.length - 1]?.value ?? 0;
         } else
-          x = it(m.data, Number(u));
-        Number.isNaN(x) || (M === void 0 && (M = x), F.set(m.label, { value: x, time: u }));
+          V = mt(p.data, Number(f));
+        Number.isNaN(V) || (_ === void 0 && (_ = V), H.set(p.label, { value: V, time: f }));
       }
-      if (ue(F), M !== void 0 && g[0]) {
-        const m = e.timeScale().timeToCoordinate(u), N = g[0].priceToCoordinate(M);
-        if (m !== null && N !== null) {
-          const C = H.current;
-          if (C) {
-            const w = C.querySelector(
+      if (de(H), _ !== void 0 && v[0]) {
+        const p = t.timeScale().timeToCoordinate(f), C = v[0].priceToCoordinate(_);
+        if (p !== null && C !== null) {
+          const P = K.current;
+          if (P) {
+            const M = P.querySelector(
               ".LightweightChart"
             );
-            if (w) {
-              const x = w.getBoundingClientRect(), Y = C.getBoundingClientRect(), J = m + (x.left - Y.left), fe = N + (x.top - Y.top);
-              E({ x: J, y: fe });
+            if (M) {
+              const V = M.getBoundingClientRect(), J = P.getBoundingClientRect(), Q = p + (V.left - J.left), ee = C + (V.top - J.top);
+              j({ x: Q, y: ee });
             } else
-              E({ x: m, y: N });
+              j({ x: p, y: C });
           } else
-            E({ x: m, y: N });
+            j({ x: p, y: C });
         } else
-          E(null);
+          j(null);
       } else
-        E(null);
+        j(null);
     };
-    return e.subscribeCrosshairMove(r), P && e.subscribeClick(r), !l && !D && requestAnimationFrame(() => {
-      const i = Array.from(v.current.values());
-      if (i[0] && n && t[0]?.data.length > 0) {
-        const d = e.timeScale().timeToCoordinate(n), B = t[0].data[t[0].data.length - 1].value, g = i[0].priceToCoordinate(B);
-        d !== null && g !== null && E({ x: d, y: g });
+    return t.subscribeCrosshairMove(n), R && t.subscribeClick(n), !a && !$ && !fe && requestAnimationFrame(() => {
+      const i = Array.from(y.current.values());
+      if (i[0] && l && o[0]?.data.length > 0) {
+        const c = t.timeScale().timeToCoordinate(l), b = o[0].data[o[0].data.length - 1].value, v = i[0].priceToCoordinate(b);
+        c !== null && v !== null && j({ x: c, y: v });
       }
     }), () => {
-      e.unsubscribeCrosshairMove(r), P && e.unsubscribeClick(r);
+      t.unsubscribeCrosshairMove(n), R && t.unsubscribeClick(n);
     };
-  }, [t, D, P]), L(() => {
-    const e = T.current;
-    if (!e || t.length === 0) return;
-    const l = e.timeScale(), n = () => {
-      if (!se.current) return;
-      const r = l.getVisibleRange();
-      if (!r) return;
-      const i = Number(r.from), u = Number(r.to), d = [];
-      for (const B of t)
-        for (const g of B.data) {
-          const F = Number(g.time);
-          F >= i && F <= u && d.push(g.value);
-        }
-      d.length > 0 && se.current(d);
+  }, [o, $, R, fe]), W(() => {
+    const t = I.current;
+    if (!t || o.length === 0) return;
+    const a = t.timeScale(), l = () => {
+      const n = Pe.current;
+      if (n.length === 0) return;
+      const i = a.getVisibleRange();
+      if (!i) return;
+      const f = Number(i.from), c = Number(i.to);
+      for (const b of n) {
+        const v = [];
+        for (const H of o)
+          if (b.labels.has(H.label))
+            for (const _ of H.data) {
+              const w = Number(_.time);
+              w >= f && w <= c && v.push(_.value);
+            }
+        v.length > 0 && b.updateVisibleRange(v);
+      }
     };
-    return l.subscribeVisibleLogicalRangeChange(n), () => {
-      l.unsubscribeVisibleLogicalRangeChange(
-        n
+    return a.subscribeVisibleLogicalRangeChange(l), () => {
+      a.unsubscribeVisibleLogicalRangeChange(
+        l
       );
     };
-  }, [t]), L(() => {
-    const e = T.current, l = Array.from(v.current.values()), n = [];
-    if (e && l.length > 0 && p) {
-      const r = Oe(), i = l[0];
-      for (const u of p) {
-        const d = new ot(e, i, u.xCoordinate, {
-          ...r,
-          ...u.options || {}
-        });
-        i.attachPrimitive(d), n.push(d);
+  }, [o]), W(() => {
+    const t = I.current, a = Array.from(y.current.values()), l = [];
+    if (t && a.length > 0 && x) {
+      const n = at(), i = a[0];
+      for (const f of x) {
+        const c = {
+          ...n,
+          ...f.options || {}
+        };
+        c.color && (c.color = U(c.color, c.color));
+        const b = new ut(t, i, f.xCoordinate, c);
+        i.attachPrimitive(b), l.push(b);
       }
     }
     return () => {
-      if (l.length > 0) {
-        const r = l[0];
-        for (const i of n)
-          r.detachPrimitive(i);
+      if (a.length > 0) {
+        const n = a[0];
+        for (const i of l)
+          n.detachPrimitive(i);
       }
     };
-  }, [p, t]), L(() => {
-    const e = [];
-    if (R && R.length > 0) {
-      const l = Array.from(v.current.values())[0], n = O(
+  }, [x, o]), W(() => {
+    const t = [];
+    if (k && k.length > 0) {
+      const a = Array.from(y.current.values())[0], l = U(
         "hsl(var(--destructive))",
         "rgb(239, 68, 68)"
       );
-      for (const r of R) {
-        if (!Number.isFinite(r.price)) continue;
-        const i = r.seriesLabel ? v.current.get(r.seriesLabel) : l;
+      for (const n of k) {
+        if (!Number.isFinite(n.price)) continue;
+        const i = n.seriesLabel ? y.current.get(n.seriesLabel) : a;
         if (!i) continue;
-        const u = i.createPriceLine({
-          price: r.price,
-          color: r.color ? O(r.color, r.color) : n,
-          lineWidth: r.lineWidth ?? 1,
-          lineStyle: r.lineStyle ?? Ze.Dashed,
-          axisLabelVisible: r.axisLabelVisible ?? !0,
-          title: r.title ?? ""
+        const f = i.createPriceLine({
+          price: n.price,
+          color: n.color ? U(n.color, n.color) : l,
+          lineWidth: n.lineWidth ?? 1,
+          lineStyle: n.lineStyle ?? Ge.Dashed,
+          axisLabelVisible: n.axisLabelVisible ?? !0,
+          title: n.title ?? ""
         });
-        e.push({ series: i, line: u });
+        t.push({ series: i, line: f });
       }
     }
     return () => {
-      for (const { series: l, line: n } of e)
+      for (const { series: a, line: l } of t)
         try {
-          l.removePriceLine(n);
+          a.removePriceLine(l);
         } catch {
         }
     };
-  }, [R, t]), L(() => {
-    const e = [];
-    if (W && W.length > 0) {
-      const l = Array.from(v.current.values())[0], n = "rgba(239, 68, 68, 0.12)";
-      for (const r of W) {
-        const i = r.seriesLabel ? v.current.get(r.seriesLabel) : l;
+  }, [k, o]), W(() => {
+    const t = [];
+    if (A && A.length > 0) {
+      const a = Array.from(y.current.values())[0], l = "rgba(239, 68, 68, 0.12)";
+      for (const n of A) {
+        const i = n.seriesLabel ? y.current.get(n.seriesLabel) : a;
         if (!i) continue;
-        const u = r.color ? O(r.color, n) : n, d = new at(
+        const f = n.color ? U(n.color, l) : l, c = new gt(
           i,
-          r.priceTop,
-          r.priceBottom,
-          u
+          n.priceTop,
+          n.priceBottom,
+          f
         );
-        i.attachPrimitive(d), e.push({ series: i, zone: d });
+        i.attachPrimitive(c), t.push({ series: i, zone: c });
       }
     }
     return () => {
-      for (const { series: l, zone: n } of e)
+      for (const { series: a, zone: l } of t)
         try {
-          l.detachPrimitive(n);
+          a.detachPrimitive(l);
         } catch {
         }
     };
-  }, [W, t]), L(() => {
-    const e = T.current;
-    if (!e || !p?.length) {
-      Re([]);
+  }, [A, o]), W(() => {
+    const t = I.current;
+    if (!t || !x?.length) {
+      _e([]);
       return;
     }
-    const l = () => {
-      const i = e.timeScale(), u = p.map((d) => i.timeToCoordinate(d.xCoordinate) ?? null);
-      Re(u);
+    const a = () => {
+      const i = t.timeScale(), f = x.map((c) => i.timeToCoordinate(c.xCoordinate) ?? null);
+      _e(f);
     };
-    l();
-    const n = e.timeScale(), r = () => {
-      l();
+    a();
+    const l = t.timeScale(), n = () => {
+      a();
     };
-    return n.subscribeVisibleLogicalRangeChange(r), () => {
-      n.unsubscribeVisibleLogicalRangeChange(r);
+    return l.subscribeVisibleLogicalRangeChange(n), () => {
+      l.unsubscribeVisibleLogicalRangeChange(n);
     };
-  }, [p, t]);
-  const oe = t.length === 1, Te = ge.useMemo(() => {
-    if (oe && t.length > 0) {
-      const e = t[0];
-      if (e.data.length > 0)
-        return e.data[e.data.length - 1];
+  }, [x, o]);
+  const ie = o.length === 1, Be = Ce.useMemo(() => {
+    if (ie && o.length > 0) {
+      const t = o[0];
+      if (t.data.length > 0)
+        return t.data[t.data.length - 1];
     }
-  }, [oe, t]);
-  return /* @__PURE__ */ U(
+  }, [ie, o]);
+  return /* @__PURE__ */ re(
     "div",
     {
-      ref: H,
-      className: Ce(
+      ref: K,
+      className: ne(
         "relative z-[1] w-full h-full overflow-hidden p-0",
-        c
+        s
       ),
       children: [
-        le != null && le !== !1 && oe ? /* @__PURE__ */ S("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ S("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: le }) }) : Ae && oe && Te && /* @__PURE__ */ S(
-          et,
+        ue != null && ue !== !1 && ie ? /* @__PURE__ */ T("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ T("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: ue }) }) : qe && ie && Be && /* @__PURE__ */ T(
+          st,
           {
-            point: Te,
-            xMeasureUnit: h,
-            yMeasureUnit: y,
-            decimals: ae
+            point: Be,
+            xMeasureUnit: d,
+            yMeasureUnit: N,
+            decimals: ce
           }
         ),
-        we && Ne && /* @__PURE__ */ S(
-          tt,
+        Me && ke && /* @__PURE__ */ T(
+          ct,
           {
-            points: we,
-            xMeasureUnit: h,
-            yMeasureUnit: y,
-            series: t,
-            position: Ne,
-            containerRef: H,
-            decimals: ae
+            points: Me,
+            xMeasureUnit: d,
+            yMeasureUnit: N,
+            series: o,
+            position: ke,
+            containerRef: K,
+            decimals: ce
           }
         ),
-        s && /* @__PURE__ */ S(ct, { series: t, onUnselect: b }),
-        p && p.length > 0 && Ve.length === p.length && /* @__PURE__ */ S(
+        g && /* @__PURE__ */ T(bt, { series: o, onUnselect: m }),
+        x && x.length > 0 && Le.length === x.length && /* @__PURE__ */ T(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            children: p.map((e, l) => {
-              const n = Ve[l], r = e.options ?? {}, i = r.showLabel !== !1;
-              if (n === null || !i) return null;
-              const { labelText: u, valueStr: d } = lt(
-                r,
-                y,
-                ae
-              );
-              if (!(u || d)) return null;
-              const g = r.labelBackgroundColor ?? r.color ?? "hsl(var(--background))", F = r.labelTextColor ?? "hsl(var(--foreground))", M = `${String(e.xCoordinate)}-${u}`;
-              return /* @__PURE__ */ U(
+            children: x.map((t, a) => {
+              const l = Le[a], n = t.options ?? {}, i = n.showLabel !== !1;
+              if (l === null || !i) return null;
+              const { labelText: f, valueStr: c } = dt(
+                n,
+                N,
+                ce
+              ), b = n.tooltipText ?? "";
+              if (!(f || c || b)) return null;
+              const H = n.labelBackgroundColor ?? n.color ?? "hsl(var(--background))", _ = n.labelTextColor ?? "hsl(var(--foreground))", w = `${String(t.xCoordinate)}-${f}-${b}`;
+              return /* @__PURE__ */ re(
                 "div",
                 {
-                  className: "absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
+                  className: ne(
+                    "group absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
+                    b && "pointer-events-auto cursor-default"
+                  ),
                   style: {
-                    left: n,
+                    left: l,
                     transform: "translateX(-50%)",
-                    backgroundColor: g,
-                    color: F
+                    backgroundColor: H,
+                    color: _
                   },
                   children: [
-                    u && /* @__PURE__ */ S("span", { className: "block", children: u }),
-                    d && /* @__PURE__ */ S("span", { className: Ce("block", u && "mt-0.5"), children: d })
+                    f && /* @__PURE__ */ T("span", { className: "block", children: f }),
+                    c && /* @__PURE__ */ T("span", { className: ne("block", f && "mt-0.5"), children: c }),
+                    b && /* @__PURE__ */ T(
+                      "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: b
+                      }
+                    )
                   ]
                 },
-                M
+                w
               );
             })
           }
         ),
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ T(
           "div",
           {
-            ref: ce,
+            ref: ge,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -790,73 +882,84 @@ function Nt({
     }
   );
 }
-function ct({
-  series: t,
-  onUnselect: c
+function bt({
+  series: o,
+  onUnselect: s,
+  inline: g = !1
 }) {
-  return /* @__PURE__ */ S("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: t.map((s, b) => {
-    const h = Fe(b), y = (s.lineColor ?? s.color) || h.line, z = s.data.length === 0;
-    return /* @__PURE__ */ U(
-      "div",
-      {
-        className: Ce(
-          "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
-          z && "opacity-50"
-        ),
-        children: [
-          /* @__PURE__ */ S(
-            "div",
-            {
-              className: "w-3 h-3 rounded-sm",
-              style: { backgroundColor: y }
-            }
-          ),
-          /* @__PURE__ */ U("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
-            s.label,
-            z && " (no data)"
-          ] }),
-          c && /* @__PURE__ */ S(
-            "button",
-            {
-              type: "button",
-              onClick: (p) => {
-                p.stopPropagation(), c(s.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 ${s.label}`,
-              children: /* @__PURE__ */ U(
-                "svg",
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      className: ne(
+        "flex flex-wrap gap-2",
+        g ? "items-center" : "absolute top-0 left-2 z-[10]"
+      ),
+      children: o.map((m, d) => {
+        const N = Xe(d), q = (m.lineColor ?? m.color) || N.line, x = m.data.length === 0;
+        return /* @__PURE__ */ re(
+          "div",
+          {
+            className: ne(
+              "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
+              x && "opacity-50"
+            ),
+            children: [
+              /* @__PURE__ */ T(
+                "div",
                 {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "12",
-                  height: "12",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  className: "text-muted-foreground hover:text-foreground",
-                  "aria-hidden": "true",
-                  children: [
-                    /* @__PURE__ */ S("title", { children: "Close" }),
-                    /* @__PURE__ */ S("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                    /* @__PURE__ */ S("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                  ]
+                  className: "w-3 h-3 rounded-sm",
+                  style: { backgroundColor: q }
+                }
+              ),
+              /* @__PURE__ */ re("span", { className: "text-[10px] sm:text-xs font-medium text-foreground", children: [
+                m.label,
+                x && " (no data)"
+              ] }),
+              s && /* @__PURE__ */ T(
+                "button",
+                {
+                  type: "button",
+                  onClick: (k) => {
+                    k.stopPropagation(), s(m.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 ${m.label}`,
+                  children: /* @__PURE__ */ re(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "12",
+                      height: "12",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "text-muted-foreground hover:text-foreground",
+                      "aria-hidden": "true",
+                      children: [
+                        /* @__PURE__ */ T("title", { children: "Close" }),
+                        /* @__PURE__ */ T("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ T("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      ]
+                    }
+                  )
                 }
               )
-            }
-          )
-        ]
-      },
-      s.label
-    );
-  }) });
+            ]
+          },
+          m.label
+        );
+      })
+    }
+  );
 }
 export {
-  ve as DEFAULT_SERIES_COLORS,
-  Nt as Graph,
-  Fe as getSeriesColorPalette,
-  it as getStepForwardValue,
-  lt as getVerticalLineTooltipContent
+  ye as DEFAULT_SERIES_COLORS,
+  Lt as Graph,
+  bt as GraphLegend,
+  Xe as getSeriesColorPalette,
+  mt as getStepForwardValue,
+  dt as getVerticalLineTooltipContent
 };