@rafal.lemieszewski/tide-ui 0.87.9 → 0.88.0

package/dist/es/components/fundamental/chart.js

@@ -1,24 +1,24 @@
-import { jsxs as m, jsx as e, Fragment as Er } from "react/jsx-runtime";
-import lr, { useState as Pr, useMemo as z, useCallback as mr } from "react";
-import { ResponsiveContainer as Tr, ComposedChart as Br, CartesianGrid as U, XAxis as X, YAxis as $, Tooltip as J, Legend as Q, Bar as pr, Area as gr, Line as wr, ScatterChart as Or, Scatter as Rr, LineChart as Vr, ReferenceLine as qr, ReferenceDot as _r, BarChart as Nr } from "recharts";
-import { cn as jr } from "../../lib/utils.js";
-const G = (s, c = 0) => {
-  const i = s.toFixed(c).split("."), d = i[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
-  return c > 0 && i[1] ? `${d}.${i[1]}` : d;
-}, Sr = (s, c, t, i = 20) => {
-  if (!s.length) return i;
-  let d = 0;
-  s.forEach((C) => {
-    c.forEach((o) => {
-      const v = C[o];
-      typeof v == "number" ? d = Math.max(d, Math.abs(v)) : Array.isArray(v) && v.forEach((n) => {
-        typeof n == "number" && (d = Math.max(d, Math.abs(n)));
+import { jsxs as d, jsx as r, Fragment as He } from "react/jsx-runtime";
+import S, { useState as Ye, useMemo as $, useCallback as Se } from "react";
+import { ResponsiveContainer as Ne, ComposedChart as er, CartesianGrid as se, XAxis as oe, YAxis as T, Tooltip as ne, Legend as ie, Bar as Le, Area as Te, Line as Oe, ScatterChart as rr, Scatter as tr, LineChart as ar, ReferenceLine as lr, ReferenceDot as sr, BarChart as Re } from "recharts";
+import { cn as or } from "../../lib/utils.js";
+const ce = (n, f = 0) => {
+  const p = n.toFixed(f).split("."), u = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+  return f > 0 && p[1] ? `${u}.${p[1]}` : u;
+}, Ve = (n, f, a, p = 20) => {
+  if (!n.length) return p;
+  let u = 0;
+  n.forEach((N) => {
+    f.forEach((o) => {
+      const v = N[o];
+      typeof v == "number" ? u = Math.max(u, Math.abs(v)) : Array.isArray(v) && v.forEach((i) => {
+        typeof i == "number" && (u = Math.max(u, Math.abs(i)));
       });
     });
   });
-  const y = (t ? t(d, 0) : d.toString()).length;
-  return Math.max(i, y * 6 + 12);
-}, A = {
+  const w = (a ? a(u, 0) : u.toString()).length;
+  return Math.max(p, w * 6 + 12);
+}, O = {
   bar: [
     "var(--color-chart-bar-1)",
     // #487D9A - Deep blue-teal
@@ -93,8 +93,8 @@ const G = (s, c = 0) => {
     "#CC0000"
     // High contrast red
   ]
-}, L = (s) => {
-  switch (s) {
+}, R = (n) => {
+  switch (n) {
     case "dashed":
       return "5 5";
     // 5px line, 5px gap
@@ -105,92 +105,92 @@ const G = (s, c = 0) => {
     default:
       return;
   }
-}, Fr = (s = "circle") => (c) => {
-  const { cx: t, cy: i, r: d, fill: b, stroke: y, strokeWidth: C } = c, o = d || 4;
-  switch (s) {
+}, nr = (n = "circle") => (f) => {
+  const { cx: a, cy: p, r: u, fill: g, stroke: w, strokeWidth: N } = f, o = u || 4;
+  switch (n) {
     case "triangle":
-      const v = o * 1.5, n = o * 1.3, f = `M ${t},${i - v} L ${t + n},${i + v / 2} L ${t - n},${i + v / 2} Z`;
-      return /* @__PURE__ */ e(
+      const v = o * 1.5, i = o * 1.3, m = `M ${a},${p - v} L ${a + i},${p + v / 2} L ${a - i},${p + v / 2} Z`;
+      return /* @__PURE__ */ r(
         "path",
         {
-          d: f,
-          fill: b,
-          stroke: y,
-          strokeWidth: C || 0
+          d: m,
+          fill: g,
+          stroke: w,
+          strokeWidth: N || 0
         }
       );
     case "square":
-      const k = o * 1.4;
-      return /* @__PURE__ */ e(
+      const C = o * 1.4;
+      return /* @__PURE__ */ r(
         "rect",
         {
-          x: t - k,
-          y: i - k,
-          width: k * 2,
-          height: k * 2,
-          fill: b,
-          stroke: y,
-          strokeWidth: C || 0
+          x: a - C,
+          y: p - C,
+          width: C * 2,
+          height: C * 2,
+          fill: g,
+          stroke: w,
+          strokeWidth: N || 0
         }
       );
     case "circle":
     default:
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ r(
         "circle",
         {
-          cx: t,
-          cy: i,
+          cx: a,
+          cy: p,
           r: o,
-          fill: b,
-          stroke: y,
-          strokeWidth: C || 0
+          fill: g,
+          stroke: w,
+          strokeWidth: N || 0
         }
       );
   }
-}, Ir = (s) => ({ verticalAlign: "bottom", align: "center" }), H = ({ active: s, payload: c, label: t, config: i, tooltipMaxWidth: d = "max-w-xs", chartType: b, referenceMarkers: y }) => {
-  if (!s || !c || !c.length)
+}, Be = (n) => ({ verticalAlign: "bottom", align: "center" }), de = ({ active: n, payload: f, label: a, config: p, tooltipMaxWidth: u = "max-w-xs", chartType: g, referenceMarkers: w }) => {
+  if (!n || !f || !f.length)
     return null;
-  const C = y?.filter((o) => o.xValue === t) || [];
-  return /* @__PURE__ */ m(
+  const N = w?.filter((o) => o.xValue === a) || [];
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: `rounded-[var(--border-radius-s)] border border-[var(--color-border-primary-medium)] bg-[var(--color-surface-primary)] p-[var(--space-m)] shadow-[var(--shadow-300)] min-w-[120px] ${d} z-[9999]`,
+      className: `rounded-[var(--border-radius-s)] border border-[var(--color-border-primary-medium)] bg-[var(--color-surface-primary)] p-[var(--space-m)] shadow-[var(--shadow-300)] min-w-[120px] ${u} z-[9999]`,
       role: "tooltip",
       "aria-label": "Chart data tooltip",
       children: [
-        /* @__PURE__ */ e("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: t }),
-        c.map((o, v) => {
-          const n = i[o.dataKey];
-          let f;
-          if (n?.type === "range-area" && o.payload) {
-            const g = o.payload[o.dataKey];
-            Array.isArray(g) && g.length === 2 ? f = `${G(g[0])} – ${G(g[1])}` : f = typeof o.value == "number" ? G(o.value) : o.value;
+        /* @__PURE__ */ r("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: a }),
+        f.map((o, v) => {
+          const i = p[o.dataKey];
+          let m;
+          if (i?.type === "range-area" && o.payload) {
+            const L = o.payload[o.dataKey];
+            Array.isArray(L) && L.length === 2 ? m = `${ce(L[0])} – ${ce(L[1])}` : m = typeof o.value == "number" ? ce(o.value) : o.value;
           } else
-            f = typeof o.value == "number" ? G(o.value) : o.value;
-          return /* @__PURE__ */ m("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
+            m = typeof o.value == "number" ? ce(o.value) : o.value;
+          return /* @__PURE__ */ d("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
             (() => {
-              switch (b) {
+              switch (g) {
                 case "line":
-                  const g = i[o.dataKey]?.strokeStyle, K = L(g);
-                  return /* @__PURE__ */ e(
+                  const L = p[o.dataKey]?.strokeStyle, _ = R(L);
+                  return /* @__PURE__ */ r(
                     "div",
                     {
                       className: "w-3 h-0.5 flex-shrink-0 relative",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ e(
+                      children: /* @__PURE__ */ r(
                         "div",
                         {
                           className: "w-full h-full",
                           style: {
-                            background: K ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
-                            backgroundSize: K === "5 5" ? "6px 100%" : K === "2 2" ? "2px 100%" : "100% 100%"
+                            background: _ ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
+                            backgroundSize: _ === "5 5" ? "6px 100%" : _ === "2 2" ? "2px 100%" : "100% 100%"
                           }
                         }
                       )
                     }
                   );
                 case "scatter":
-                  return /* @__PURE__ */ e(
+                  return /* @__PURE__ */ r(
                     "div",
                     {
                       className: "w-2 h-2 rounded-full flex-shrink-0",
@@ -199,21 +199,21 @@ const G = (s, c = 0) => {
                     }
                   );
                 case "composed":
-                  switch (i[o.dataKey]?.type) {
+                  switch (p[o.dataKey]?.type) {
                     case "line":
-                      const N = i[o.dataKey]?.strokeStyle, w = L(N);
-                      return /* @__PURE__ */ e(
+                      const A = p[o.dataKey]?.strokeStyle, K = R(A);
+                      return /* @__PURE__ */ r(
                         "div",
                         {
                           className: "w-3 h-0.5 flex-shrink-0 relative",
                           "aria-hidden": "true",
-                          children: /* @__PURE__ */ e(
+                          children: /* @__PURE__ */ r(
                             "div",
                             {
                               className: "w-full h-full",
                               style: {
-                                background: w ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
-                                backgroundSize: w === "5 5" ? "6px 100%" : w === "2 2" ? "2px 100%" : "100% 100%"
+                                background: K ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
+                                backgroundSize: K === "5 5" ? "6px 100%" : K === "2 2" ? "2px 100%" : "100% 100%"
                               }
                             }
                           )
@@ -221,7 +221,7 @@ const G = (s, c = 0) => {
                       );
                     case "area":
                     case "range-area":
-                      return /* @__PURE__ */ e(
+                      return /* @__PURE__ */ r(
                         "div",
                         {
                           className: "w-2.5 h-2.5 flex-shrink-0",
@@ -231,7 +231,7 @@ const G = (s, c = 0) => {
                       );
                     case "bar":
                     default:
-                      return /* @__PURE__ */ e(
+                      return /* @__PURE__ */ r(
                         "div",
                         {
                           className: "w-2 h-2 flex-shrink-0",
@@ -244,7 +244,7 @@ const G = (s, c = 0) => {
                 case "horizontal-bar":
                 case "area":
                 default:
-                  return /* @__PURE__ */ e(
+                  return /* @__PURE__ */ r(
                     "div",
                     {
                       className: "w-2 h-2 flex-shrink-0",
@@ -254,171 +254,217 @@ const G = (s, c = 0) => {
                   );
               }
             })(),
-            /* @__PURE__ */ m("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
-              n?.label || o.dataKey,
+            /* @__PURE__ */ d("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
+              i?.label || o.dataKey,
               ":"
             ] }),
-            /* @__PURE__ */ e("span", { className: "text-body-medium-sm text-[var(--color-text-primary)] ml-auto pl-[16px]", children: f })
+            /* @__PURE__ */ r("span", { className: "text-body-medium-sm text-[var(--color-text-primary)] ml-auto pl-[16px]", children: m })
           ] }, v);
         }),
-        C.length > 0 && /* @__PURE__ */ m(Er, { children: [
-          /* @__PURE__ */ e("div", { className: "my-[var(--space-m)]" }),
-          C.map((o, v) => /* @__PURE__ */ m(lr.Fragment, { children: [
-            o.tooltipLabel && /* @__PURE__ */ e("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: o.tooltipLabel }),
-            !o.tooltipLabel && v === 0 && /* @__PURE__ */ e("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: "Reference Markers:" }),
-            o.dataPoints.map((n, f) => /* @__PURE__ */ m("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
+        N.length > 0 && /* @__PURE__ */ d(He, { children: [
+          /* @__PURE__ */ r("div", { className: "my-[var(--space-m)]" }),
+          N.map((o, v) => /* @__PURE__ */ d(S.Fragment, { children: [
+            o.tooltipLabel && /* @__PURE__ */ r("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: o.tooltipLabel }),
+            !o.tooltipLabel && v === 0 && /* @__PURE__ */ r("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: "Reference Markers:" }),
+            o.dataPoints.map((i, m) => /* @__PURE__ */ d("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
               (() => {
-                switch (n.shape || "circle") {
+                switch (i.shape || "circle") {
                   case "triangle":
-                    return /* @__PURE__ */ e("svg", { width: 8, height: 8, className: "flex-shrink-0", viewBox: "0 0 10 10", children: /* @__PURE__ */ e(
+                    return /* @__PURE__ */ r("svg", { width: 8, height: 8, className: "flex-shrink-0", viewBox: "0 0 10 10", children: /* @__PURE__ */ r(
                       "path",
                       {
                         d: "M 5,2 L 8,8 L 2,8 Z",
-                        fill: n.fill || "var(--color-chart-line-1)",
-                        stroke: n.stroke || "transparent",
-                        strokeWidth: n.strokeWidth || 0
+                        fill: i.fill || "var(--color-chart-line-1)",
+                        stroke: i.stroke || "transparent",
+                        strokeWidth: i.strokeWidth || 0
                       }
                     ) });
                   case "square":
-                    return /* @__PURE__ */ e("svg", { width: 8, height: 8, className: "flex-shrink-0", viewBox: "0 0 10 10", children: /* @__PURE__ */ e(
+                    return /* @__PURE__ */ r("svg", { width: 8, height: 8, className: "flex-shrink-0", viewBox: "0 0 10 10", children: /* @__PURE__ */ r(
                       "rect",
                       {
                         x: "2",
                         y: "2",
                         width: "6",
                         height: "6",
-                        fill: n.fill || "var(--color-chart-line-1)",
-                        stroke: n.stroke || "transparent",
-                        strokeWidth: n.strokeWidth || 0
+                        fill: i.fill || "var(--color-chart-line-1)",
+                        stroke: i.stroke || "transparent",
+                        strokeWidth: i.strokeWidth || 0
                       }
                     ) });
                   case "circle":
                   default:
-                    return /* @__PURE__ */ e(
+                    return /* @__PURE__ */ r(
                       "div",
                       {
                         className: "w-2 h-2 rounded-full flex-shrink-0",
                         style: {
-                          backgroundColor: n.fill || "var(--color-chart-line-1)",
-                          border: n.stroke ? `${n.strokeWidth || 1}px solid ${n.stroke}` : "none"
+                          backgroundColor: i.fill || "var(--color-chart-line-1)",
+                          border: i.stroke ? `${i.strokeWidth || 1}px solid ${i.stroke}` : "none"
                         }
                       }
                     );
                 }
               })(),
-              /* @__PURE__ */ m("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
-                n.label || `Marker ${f + 1}`,
+              /* @__PURE__ */ d("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
+                i.label || `Marker ${m + 1}`,
                 ":"
               ] }),
-              /* @__PURE__ */ e("span", { className: "text-body-medium-sm text-[var(--color-text-primary)] ml-auto pl-[16px]", children: G(n.yValue) })
-            ] }, `marker-${v}-point-${f}`))
+              /* @__PURE__ */ r("span", { className: "text-body-medium-sm text-[var(--color-text-primary)] ml-auto pl-[16px]", children: ce(i.yValue) })
+            ] }, `marker-${v}-point-${m}`))
           ] }, `marker-section-${v}`))
         ] })
       ]
     }
   );
 };
-function Hr({
-  type: s,
-  data: c,
-  config: t,
-  className: i,
-  height: d = 300,
-  width: b,
-  minWidth: y = 300,
-  onDataPointClick: C,
+function pr({
+  type: n,
+  data: f,
+  config: a,
+  className: p,
+  height: u = 300,
+  width: g,
+  minWidth: w = 300,
+  onDataPointClick: N,
   onDataPointHover: o,
   highlightedIndex: v,
-  showGrid: n = !0,
-  showLegend: f = !0,
-  showTooltip: k = !0,
-  colorScheme: g,
-  responsive: K = !0,
-  maintainAspectRatio: $r = !1,
-  legendHeight: N,
-  margin: w,
-  yAxisWidth: sr,
-  yAxisTickCount: vr,
-  xAxisTickFormatter: Ar,
-  yAxisTickFormatter: W,
-  showRightYAxis: Y = !1,
-  rightYAxisWidth: nr,
-  rightYAxisTickCount: rr,
-  rightYAxisDomain: er,
-  rightYAxisTickFormatter: tr,
-  title: S,
-  description: ar,
-  showDataTable: Mr = !1,
-  tooltipMaxWidth: D = "max-w-xs",
-  tooltipAllowEscapeViewBox: E,
-  legendOrder: cr,
-  legendPosition: Zr = "bottom",
-  referenceMarkers: ir,
-  yAxisDomain: fr,
-  ...zr
+  showGrid: i = !0,
+  showLegend: m = !0,
+  showTooltip: C = !0,
+  colorScheme: L,
+  responsive: _ = !0,
+  maintainAspectRatio: je = !1,
+  legendHeight: A,
+  margin: K,
+  yAxisWidth: ve,
+  yAxisTickCount: Ie,
+  xAxisTickFormatter: qe,
+  yAxisTickFormatter: F,
+  showRightYAxis: ue = !1,
+  rightYAxisWidth: be,
+  rightYAxisTickCount: he,
+  rightYAxisDomain: fe,
+  rightYAxisTickFormatter: pe,
+  title: D,
+  description: xe,
+  showDataTable: _e = !1,
+  tooltipMaxWidth: X = "max-w-xs",
+  tooltipAllowEscapeViewBox: U,
+  legendOrder: V,
+  legendPosition: ir = "bottom",
+  referenceMarkers: Me,
+  todayMarker: W,
+  yAxisDomain: B,
+  scrollable: E = !1,
+  scrollableWidth: $e,
+  ...Fe
 }) {
-  const [xr, Lr] = Pr(0), x = z(() => {
-    if (g)
-      return A[g];
-    switch (s) {
+  const [ze, Xe] = Ye(0), b = S.useRef(null), ke = S.useRef(!1), Ae = S.useRef(0), Ke = S.useRef(0), Ue = S.useCallback((t) => {
+    b.current && (ke.current = !0, Ae.current = t.pageX - b.current.offsetLeft, Ke.current = b.current.scrollLeft, b.current.style.cursor = "grabbing");
+  }, []), Ze = S.useCallback((t) => {
+    if (!ke.current || !b.current) return;
+    t.preventDefault();
+    const e = t.pageX - b.current.offsetLeft;
+    b.current.scrollLeft = Ke.current - (e - Ae.current);
+  }, []), We = S.useCallback(() => {
+    ke.current = !1, b.current && (b.current.style.cursor = "grab");
+  }, []), k = $(() => {
+    if (L)
+      return O[L];
+    switch (n) {
       case "bar":
       case "horizontal-bar":
-        return A.bar;
+        return O.bar;
       case "line":
-        return A.line;
+        return O.line;
       case "scatter":
-        return A.scatter;
+        return O.scatter;
       case "composed":
-        return A.bar;
+        return O.bar;
       // Use bar colors for composed charts
       default:
-        return A.bar;
+        return O.bar;
     }
-  }, [s, g]), u = Object.keys(t).filter((r) => r !== "name"), I = z(() => c.map((r) => {
-    const a = { ...r };
-    return u.forEach((l) => {
-      if (t[l].type === "range-area") {
-        const h = r[l];
-        Array.isArray(h) && h.length === 2 && (a[l] = h, a[`${l}_min`] = h[0], a[`${l}_max`] = h[1]);
+  }, [n, L]), h = Object.keys(a).filter((t) => t !== "name"), y = $(() => f.map((t) => {
+    const e = { ...t };
+    return h.forEach((s) => {
+      if (a[s].type === "range-area") {
+        const l = t[s];
+        Array.isArray(l) && l.length === 2 && (e[s] = l, e[`${s}_min`] = l[0], e[`${s}_max`] = l[1]);
       }
-    }), a;
-  }), [c, t, u]), P = mr((r) => {
-    const a = r?.activeTooltipIndex ?? 0;
-    Lr(a), o?.(r?.activePayload?.[0]?.payload, a);
-  }, [o]), T = mr(() => {
+    }), e;
+  }), [f, a, h]), ge = $(() => {
+    if (!W) return null;
+    const t = y.find((e) => e.name === W.xValue);
+    return {
+      xValue: W.xValue,
+      showLine: !0,
+      lineLabel: W.label ?? "Today",
+      lineStyle: {
+        stroke: "var(--color-border-error-bold)",
+        strokeWidth: 2
+      },
+      dataPoints: h.filter((e) => t && t[e] != null).map((e) => ({
+        yValue: t[e],
+        yAxisId: a[e].yAxisId || "left",
+        fill: "var(--color-background-error-bold)",
+        size: 4,
+        pulsing: !0
+      }))
+    };
+  }, [W, y, h, a]), we = $(() => [
+    ...Me ?? [],
+    ...ge ? [ge] : []
+  ], [Me, ge]), Z = Se((t) => {
+    const e = t?.activeTooltipIndex ?? 0;
+    Xe(e), o?.(t?.activePayload?.[0]?.payload, e);
+  }, [o]), J = Se(() => {
     o?.(null);
-  }, [o]), B = mr((r) => {
-    const a = r?.activeTooltipIndex ?? 0;
-    C?.(r?.activePayload?.[0]?.payload, a);
-  }, [C]), O = z(() => xr >= Math.floor(I.length / 2), [xr, I.length]), br = () => {
-    const r = { top: 0, right: 0, left: 0, bottom: 0 };
+  }, [o]), Q = Se((t) => {
+    const e = t?.activeTooltipIndex ?? 0;
+    N?.(t?.activePayload?.[0]?.payload, e);
+  }, [N]), G = $(() => ze >= Math.floor(y.length / 2), [ze, y.length]), me = () => {
+    const t = { top: 8, right: 0, left: 0, bottom: 0 };
     return {
-      top: w?.top ?? r.top,
-      right: w?.right ?? r.right,
+      top: K?.top ?? t.top,
+      right: K?.right ?? t.right,
       // Don't add rightYAxisWidth - Recharts handles it via YAxis width prop
-      left: w?.left ?? r.left,
-      bottom: w?.bottom ?? r.bottom
+      left: K?.left ?? t.left,
+      bottom: K?.bottom ?? t.bottom
     };
-  }, Kr = z(() => sr || Sr(I, u, W, 20), [sr, I, u, W]), yr = z(() => {
-    if (!Y) return 0;
-    if (nr) return nr;
-    const r = u.filter((a) => t[a].yAxisId === "right");
-    return r.length === 0 ? 0 : Sr(I, r, tr, 20);
-  }, [Y, nr, I, u, t, tr]), kr = z(() => u.some((a) => (t[a].yAxisId || "left") === "left") ? "left" : "right", [u, t]), R = N ? {
-    ...Ir(),
+  }, Pe = $(() => ve || Ve(y, h, F, 20), [ve, y, h, F]), j = $(() => {
+    if (!E || B) return B;
+    const t = y.flatMap(
+      (e) => h.map((s) => {
+        const l = e[s];
+        return Array.isArray(l) || typeof l == "number" ? l : 0;
+      }).flat()
+    );
+    return [Math.min(0, ...t), Math.max(...t)];
+  }, [E, B, y, h]), H = $(
+    () => E ? $e ?? Math.max(y.length * 60, 600) : void 0,
+    [E, $e, y.length]
+  ), De = $(() => {
+    if (!ue) return 0;
+    if (be) return be;
+    const t = h.filter((e) => a[e].yAxisId === "right");
+    return t.length === 0 ? 0 : Ve(y, t, pe, 20);
+  }, [ue, be, y, h, a, pe]), Ee = $(() => h.some((e) => (a[e].yAxisId || "left") === "left") ? "left" : "right", [h, a]), Y = A ? {
+    ...Be(),
     wrapperStyle: {
       position: "absolute",
       bottom: 0,
       left: 0,
       right: 0,
-      height: N,
+      height: A,
       paddingTop: 8,
       zIndex: 1
     }
-  } : Ir(), V = {
-    data: I,
-    margin: br()
-  }, q = {
+  } : Be(), ee = {
+    data: y,
+    margin: me()
+  }, re = {
     axisLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 2 },
     tickLine: !1,
     tick: {
@@ -426,8 +472,8 @@ function Hr({
       fill: "var(--color-text-tertiary)",
       fontFamily: "Inter, sans-serif"
     },
-    tickFormatter: Ar
-  }, _ = {
+    tickFormatter: qe
+  }, P = {
     axisLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 2 },
     tickLine: { stroke: "var(--color-border-primary-subtle)", strokeWidth: 1 },
     tick: {
@@ -435,77 +481,77 @@ function Hr({
       fill: "var(--color-text-tertiary)",
       fontFamily: "Inter, sans-serif"
     },
-    width: Kr,
+    width: Pe,
     // Auto-calculated based on tick formatter, default 20px
-    tickFormatter: W,
-    ...vr && { tickCount: vr },
+    tickFormatter: F,
+    ...Ie && { tickCount: Ie },
     // Force specific number of ticks when provided
-    ...fr && { domain: fr }
+    ...B && { domain: B }
     // Custom Y-axis domain when provided
-  }, j = {
+  }, te = {
     stroke: "var(--color-border-primary-subtle)",
     horizontal: !0,
     vertical: !1
-  }, F = ({ payload: r }) => {
-    if (!r || !r.length) return null;
-    const a = cr ? [...r].sort((p, M) => {
-      const dr = cr.indexOf(p.dataKey), or = cr.indexOf(M.dataKey);
-      return dr === -1 ? 1 : or === -1 ? -1 : dr - or;
-    }) : r, h = br().left + 5;
-    return /* @__PURE__ */ e(
+  }, ae = ({ payload: t }) => {
+    if (!t || !t.length) return null;
+    const e = t.filter((c) => a[c.dataKey]), s = V ? [...e].sort((c, z) => {
+      const M = V.indexOf(c.dataKey), I = V.indexOf(z.dataKey);
+      return M === -1 ? 1 : I === -1 ? -1 : M - I;
+    }) : e, x = me().left + 5;
+    return /* @__PURE__ */ r(
       "div",
       {
         style: {
-          paddingLeft: `${h}px`,
+          paddingLeft: `${x}px`,
           paddingRight: "16px"
         },
-        children: /* @__PURE__ */ e("div", { className: "flex flex-wrap justify-start items-start gap-x-[var(--space-m)] gap-y-[var(--space-s)]", children: a.map((p, M) => /* @__PURE__ */ m("div", { className: "flex items-center justify-center gap-[var(--space-xs)]", children: [
+        children: /* @__PURE__ */ r("div", { className: "flex flex-wrap justify-start items-start gap-x-[var(--space-m)] gap-y-[var(--space-s)]", children: s.map((c, z) => /* @__PURE__ */ d("div", { className: "flex items-center justify-center gap-[var(--space-xs)]", children: [
           (() => {
-            switch (s) {
+            switch (n) {
               case "line":
-                const or = t[p.dataKey]?.strokeStyle, hr = L(or);
-                return /* @__PURE__ */ e(
+                const I = a[c.dataKey]?.strokeStyle, q = R(I);
+                return /* @__PURE__ */ r(
                   "div",
                   {
                     className: "w-[12px] h-[2px] flex-shrink-0 relative",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ e(
+                    children: /* @__PURE__ */ r(
                       "div",
                       {
                         className: "w-full h-full",
                         style: {
-                          background: hr ? `linear-gradient(to right, ${p.color} 50%, transparent 50%)` : p.color,
-                          backgroundSize: hr === "5 5" ? "8px 100%" : hr === "2 2" ? "3px 100%" : "100% 100%"
+                          background: q ? `linear-gradient(to right, ${c.color} 50%, transparent 50%)` : c.color,
+                          backgroundSize: q === "5 5" ? "8px 100%" : q === "2 2" ? "3px 100%" : "100% 100%"
                         }
                       }
                     )
                   }
                 );
               case "scatter":
-                return /* @__PURE__ */ e(
+                return /* @__PURE__ */ r(
                   "div",
                   {
                     className: "w-[6px] h-[6px] rounded-full flex-shrink-0",
-                    style: { backgroundColor: p.color },
+                    style: { backgroundColor: c.color },
                     "aria-hidden": "true"
                   }
                 );
               case "composed":
-                switch (t[p.dataKey]?.type) {
+                switch (a[c.dataKey]?.type) {
                   case "line":
-                    const Dr = t[p.dataKey]?.strokeStyle, ur = L(Dr);
-                    return /* @__PURE__ */ e(
+                    const Ge = a[c.dataKey]?.strokeStyle, Ce = R(Ge);
+                    return /* @__PURE__ */ r(
                       "div",
                       {
                         className: "w-[12px] h-[2px] flex-shrink-0 relative",
                         "aria-hidden": "true",
-                        children: /* @__PURE__ */ e(
+                        children: /* @__PURE__ */ r(
                           "div",
                           {
                             className: "w-full h-full",
                             style: {
-                              background: ur ? `linear-gradient(to right, ${p.color} 50%, transparent 50%)` : p.color,
-                              backgroundSize: ur === "5 5" ? "8px 100%" : ur === "2 2" ? "3px 100%" : "100% 100%"
+                              background: Ce ? `linear-gradient(to right, ${c.color} 50%, transparent 50%)` : c.color,
+                              backgroundSize: Ce === "5 5" ? "8px 100%" : Ce === "2 2" ? "3px 100%" : "100% 100%"
                             }
                           }
                         )
@@ -513,21 +559,21 @@ function Hr({
                     );
                   case "area":
                   case "range-area":
-                    return /* @__PURE__ */ e(
+                    return /* @__PURE__ */ r(
                       "div",
                       {
                         className: "w-[8px] h-[8px] flex-shrink-0",
-                        style: { backgroundColor: p.color },
+                        style: { backgroundColor: c.color },
                         "aria-hidden": "true"
                       }
                     );
                   case "bar":
                   default:
-                    return /* @__PURE__ */ e(
+                    return /* @__PURE__ */ r(
                       "div",
                       {
                         className: "w-[6px] h-[6px] flex-shrink-0",
-                        style: { backgroundColor: p.color },
+                        style: { backgroundColor: c.color },
                         "aria-hidden": "true"
                       }
                     );
@@ -535,38 +581,66 @@ function Hr({
               case "bar":
               case "horizontal-bar":
               default:
-                return /* @__PURE__ */ e(
+                return /* @__PURE__ */ r(
                   "div",
                   {
                     className: "w-[6px] h-[6px] flex-shrink-0",
-                    style: { backgroundColor: p.color },
+                    style: { backgroundColor: c.color },
                     "aria-hidden": "true"
                   }
                 );
             }
           })(),
-          /* @__PURE__ */ e("span", { className: "[&]:text-body-medium-xsm [&]:text-[var(--color-text-secondary)] leading-none whitespace-nowrap", children: p.value })
-        ] }, M)) })
+          /* @__PURE__ */ r("span", { className: "[&]:text-body-medium-xsm [&]:text-[var(--color-text-secondary)] leading-none whitespace-nowrap", children: c.value })
+        ] }, z)) })
       }
     );
-  }, Cr = () => {
-    switch (s) {
+  }, Je = () => {
+    const t = V ? [...V, ...Object.keys(a).filter((l) => !V.includes(l))] : Object.keys(a), s = me().left + 5;
+    return /* @__PURE__ */ r("div", { style: { paddingLeft: `${s}px`, paddingRight: "16px" }, children: /* @__PURE__ */ r("div", { className: "flex flex-wrap justify-start items-start gap-x-[var(--space-m)] gap-y-[var(--space-s)]", children: t.map((l, x) => {
+      const c = a[l];
+      if (!c) return null;
+      const z = c.color ?? "currentColor", M = R(c.strokeStyle), I = /* @__PURE__ */ r("div", { className: "w-[12px] h-[2px] flex-shrink-0 relative", "aria-hidden": "true", children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: "w-full h-full",
+          style: {
+            background: M ? `linear-gradient(to right, ${z} 50%, transparent 50%)` : z,
+            backgroundSize: M === "5 5" ? "8px 100%" : M === "2 2" ? "3px 100%" : "100% 100%"
+          }
+        }
+      ) });
+      return /* @__PURE__ */ d("div", { className: "flex items-center justify-center gap-[var(--space-xs)]", children: [
+        I,
+        /* @__PURE__ */ r("span", { className: "[&]:text-body-medium-xsm [&]:text-[var(--color-text-secondary)] leading-none whitespace-nowrap", children: c.label })
+      ] }, x);
+    }) }) });
+  }, ye = (t = "full") => {
+    switch (n) {
       case "bar":
-        return /* @__PURE__ */ m(
-          Nr,
+        return /* @__PURE__ */ d(
+          Re,
           {
-            ...V,
-            onMouseMove: P,
-            onMouseLeave: T,
-            onClick: B,
+            ...ee,
+            onMouseMove: Z,
+            onMouseLeave: J,
+            onClick: Q,
             children: [
-              n && /* @__PURE__ */ e(U, { ...j }),
-              /* @__PURE__ */ e(X, { dataKey: "name", ...q }),
-              /* @__PURE__ */ e($, { ..._ }),
-              k && /* @__PURE__ */ e(
-                J,
+              t !== "yaxis-only" && i && /* @__PURE__ */ r(se, { ...te }),
+              /* @__PURE__ */ r(oe, { dataKey: "name", ...re, ...t === "yaxis-only" && { axisLine: !1, tickLine: !1, tick: !1 } }),
+              /* @__PURE__ */ r(
+                T,
+                {
+                  ...P,
+                  hide: t === "data-only",
+                  width: t === "data-only" ? 0 : P.width,
+                  ...t !== "full" && j ? { domain: j } : {}
+                }
+              ),
+              t !== "yaxis-only" && C && /* @__PURE__ */ r(
+                ne,
                 {
-                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s }),
+                  content: (e) => /* @__PURE__ */ r(de, { ...e, config: a, tooltipMaxWidth: X, chartType: n }),
                   cursor: {
                     stroke: "var(--color-border-primary)",
                     strokeWidth: 1,
@@ -576,48 +650,49 @@ function Hr({
                   position: { x: void 0, y: void 0 },
                   offset: 10,
                   animationDuration: 0,
-                  allowEscapeViewBox: E,
-                  reverseDirection: { x: O },
+                  allowEscapeViewBox: U,
+                  reverseDirection: { x: G },
                   wrapperStyle: { zIndex: 100 }
                 }
               ),
-              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
-              u.map((r, a) => {
-                const l = t[r].color || x[a % x.length];
-                return /* @__PURE__ */ e(
-                  pr,
+              t === "full" && m && /* @__PURE__ */ r(ie, { content: /* @__PURE__ */ r(ae, {}), ...Y }),
+              h.map((e, s) => {
+                const l = a[e].color || k[s % k.length];
+                return /* @__PURE__ */ r(
+                  Le,
                   {
-                    dataKey: r,
-                    name: t[r].label,
+                    dataKey: e,
+                    name: a[e].label,
                     fill: l,
+                    fillOpacity: t === "yaxis-only" ? 0 : 1,
                     radius: [0, 0, 0, 0],
                     className: "cursor-pointer transition-colors",
                     isAnimationActive: !1,
                     maxBarSize: 60
                   },
-                  r
+                  e
                 );
               })
             ]
           }
         );
       case "horizontal-bar":
-        return /* @__PURE__ */ m(
-          Nr,
+        return /* @__PURE__ */ d(
+          Re,
           {
-            ...V,
+            ...ee,
             layout: "vertical",
-            onMouseMove: P,
-            onMouseLeave: T,
-            onClick: B,
+            onMouseMove: Z,
+            onMouseLeave: J,
+            onClick: Q,
             children: [
-              n && /* @__PURE__ */ e(U, { ...j, horizontal: !1, vertical: !0 }),
-              /* @__PURE__ */ e(X, { type: "number", ...q }),
-              /* @__PURE__ */ e($, { type: "category", dataKey: "name", ..._ }),
-              k && /* @__PURE__ */ e(
-                J,
+              i && /* @__PURE__ */ r(se, { ...te, horizontal: !1, vertical: !0 }),
+              /* @__PURE__ */ r(oe, { type: "number", ...re }),
+              /* @__PURE__ */ r(T, { type: "category", dataKey: "name", ...P }),
+              C && /* @__PURE__ */ r(
+                ne,
                 {
-                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s }),
+                  content: (e) => /* @__PURE__ */ r(de, { ...e, config: a, tooltipMaxWidth: X, chartType: n }),
                   cursor: {
                     stroke: "var(--color-border-primary)",
                     strokeWidth: 1,
@@ -627,45 +702,54 @@ function Hr({
                   position: { x: void 0, y: void 0 },
                   offset: 10,
                   animationDuration: 0,
-                  allowEscapeViewBox: E,
-                  reverseDirection: { x: O },
+                  allowEscapeViewBox: U,
+                  reverseDirection: { x: G },
                   wrapperStyle: { zIndex: 100 }
                 }
               ),
-              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
-              u.map((r, a) => {
-                const l = t[r].color || x[a % x.length];
-                return /* @__PURE__ */ e(
-                  pr,
+              m && /* @__PURE__ */ r(ie, { content: /* @__PURE__ */ r(ae, {}), ...Y }),
+              h.map((e, s) => {
+                const l = a[e].color || k[s % k.length];
+                return /* @__PURE__ */ r(
+                  Le,
                   {
-                    dataKey: r,
-                    name: t[r].label,
+                    dataKey: e,
+                    name: a[e].label,
                     fill: l,
                     radius: [0, 0, 0, 0],
                     className: "cursor-pointer transition-colors",
                     isAnimationActive: !1,
                     maxBarSize: 40
                   },
-                  r
+                  e
                 );
               })
             ]
           }
         );
       case "line":
-        return /* @__PURE__ */ m(
-          Vr,
+        return /* @__PURE__ */ d(
+          ar,
           {
-            ...V,
-            onMouseMove: P,
-            onMouseLeave: T,
-            onClick: B,
+            ...ee,
+            onMouseMove: Z,
+            onMouseLeave: J,
+            onClick: Q,
             children: [
-              n && /* @__PURE__ */ e(U, { ...j, yAxisId: kr }),
-              /* @__PURE__ */ e(X, { dataKey: "name", ...q }),
-              /* @__PURE__ */ e($, { yAxisId: "left", ..._ }),
-              Y && /* @__PURE__ */ e(
-                $,
+              t !== "yaxis-only" && i && /* @__PURE__ */ r(se, { ...te, yAxisId: Ee }),
+              /* @__PURE__ */ r(oe, { dataKey: "name", ...re, ...t === "yaxis-only" && { axisLine: !1, tickLine: !1, tick: !1 } }),
+              /* @__PURE__ */ r(
+                T,
+                {
+                  yAxisId: "left",
+                  ...P,
+                  hide: t === "data-only",
+                  width: t === "data-only" ? 0 : P.width,
+                  ...t !== "full" && j ? { domain: j } : {}
+                }
+              ),
+              t !== "yaxis-only" && ue && /* @__PURE__ */ r(
+                T,
                 {
                   yAxisId: "right",
                   orientation: "right",
@@ -676,29 +760,16 @@ function Hr({
                     fill: "var(--color-text-tertiary)",
                     fontFamily: "Inter, sans-serif"
                   },
-                  width: yr,
-                  tickFormatter: tr,
-                  ...rr && { tickCount: rr },
-                  ...er && { domain: er }
+                  width: De,
+                  tickFormatter: pe,
+                  ...he && { tickCount: he },
+                  ...fe && { domain: fe }
                 }
               ),
-              ir?.map(
-                (r, a) => r.showLine !== !1 ? /* @__PURE__ */ e(
-                  qr,
-                  {
-                    x: r.xValue,
-                    yAxisId: "left",
-                    stroke: r.lineStyle?.stroke || "#000000",
-                    strokeWidth: r.lineStyle?.strokeWidth || 2,
-                    strokeDasharray: r.lineStyle?.strokeDasharray
-                  },
-                  `marker-line-${a}`
-                ) : null
-              ),
-              k && /* @__PURE__ */ e(
-                J,
+              t !== "yaxis-only" && C && /* @__PURE__ */ r(
+                ne,
                 {
-                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s, referenceMarkers: ir }),
+                  content: (e) => /* @__PURE__ */ r(de, { ...e, config: a, tooltipMaxWidth: X, chartType: n, referenceMarkers: we }),
                   cursor: {
                     stroke: "var(--color-border-primary)",
                     strokeWidth: 1,
@@ -708,72 +779,111 @@ function Hr({
                   position: { x: void 0, y: void 0 },
                   offset: 10,
                   animationDuration: 0,
-                  allowEscapeViewBox: E,
-                  reverseDirection: { x: O },
+                  allowEscapeViewBox: U,
+                  reverseDirection: { x: G },
                   wrapperStyle: { zIndex: 100 }
                 }
               ),
-              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
-              u.map((r, a) => {
-                const l = t[r].color || x[a % x.length];
-                return /* @__PURE__ */ e(
-                  wr,
+              t === "full" && m && /* @__PURE__ */ r(ie, { content: /* @__PURE__ */ r(ae, {}), ...Y }),
+              h.map((e, s) => {
+                const l = a[e].color || k[s % k.length];
+                return /* @__PURE__ */ r(
+                  Oe,
                   {
                     type: "linear",
-                    dataKey: r,
-                    name: t[r].label,
-                    yAxisId: t[r].yAxisId || "left",
+                    dataKey: e,
+                    name: a[e].label,
+                    yAxisId: a[e].yAxisId || "left",
                     stroke: l,
                     strokeWidth: 2,
-                    strokeDasharray: L(t[r].strokeStyle),
-                    dot: t[r].showDots === !0 ? {
+                    strokeOpacity: t === "yaxis-only" ? 0 : 1,
+                    strokeDasharray: R(a[e].strokeStyle),
+                    dot: t === "yaxis-only" ? !1 : a[e].showDots === !0 ? {
                       fill: l,
                       strokeWidth: 0,
                       r: 3
                     } : !1,
-                    activeDot: {
+                    activeDot: t === "yaxis-only" ? !1 : {
                       r: 5,
                       fill: l
                     },
                     className: "cursor-pointer transition-colors",
                     isAnimationActive: !1
                   },
-                  r
+                  e
                 );
               }),
-              ir?.map((r, a) => /* @__PURE__ */ e(lr.Fragment, { children: r.dataPoints.map((l, h) => /* @__PURE__ */ e(
-                _r,
+              t !== "yaxis-only" && we.map(
+                (e, s) => e.showLine !== !1 ? /* @__PURE__ */ r(
+                  lr,
+                  {
+                    x: e.xValue,
+                    yAxisId: "left",
+                    stroke: e.lineStyle?.stroke || "#000000",
+                    strokeWidth: e.lineStyle?.strokeWidth || 2,
+                    strokeDasharray: e.lineStyle?.strokeDasharray,
+                    label: e.lineLabel ? (l) => {
+                      const { viewBox: x } = l;
+                      return x ? /* @__PURE__ */ r(
+                        "text",
+                        {
+                          x: x.x + 6,
+                          y: x.y + 8,
+                          dominantBaseline: "middle",
+                          fill: "var(--color-text-error-bold)",
+                          fontSize: 10,
+                          fontFamily: "inherit",
+                          fontWeight: 700,
+                          children: e.lineLabel
+                        }
+                      ) : null;
+                    } : void 0
+                  },
+                  `marker-line-${s}`
+                ) : null
+              ),
+              t !== "yaxis-only" && we.map((e, s) => /* @__PURE__ */ r(S.Fragment, { children: e.dataPoints?.map((l, x) => /* @__PURE__ */ r(
+                sr,
                 {
-                  x: r.xValue,
+                  x: e.xValue,
                   y: l.yValue,
-                  yAxisId: "left",
+                  yAxisId: l.yAxisId || "left",
                   r: l.size || 4,
                   fill: l.fill || "var(--color-chart-line-1)",
                   stroke: l.stroke || "transparent",
                   strokeWidth: l.strokeWidth || 0,
-                  shape: Fr(l.shape || "circle")
+                  shape: l.pulsing ? (c) => {
+                    const { cx: z, cy: M } = c, I = l.size || 4, q = l.fill || "var(--color-background-error-bold)";
+                    return /* @__PURE__ */ d("g", { children: [
+                      /* @__PURE__ */ d("circle", { cx: z, cy: M, r: I + 1, fill: q, opacity: 0.3, children: [
+                        /* @__PURE__ */ r("animate", { attributeName: "r", from: String(I + 1), to: String(I + 8), dur: "1.5s", repeatCount: "indefinite" }),
+                        /* @__PURE__ */ r("animate", { attributeName: "opacity", from: "0.35", to: "0", dur: "1.5s", repeatCount: "indefinite" })
+                      ] }),
+                      /* @__PURE__ */ r("circle", { cx: z, cy: M, r: I, fill: q })
+                    ] });
+                  } : nr(l.shape || "circle")
                 },
-                `marker-${a}-point-${h}`
-              )) }, `marker-dots-${a}`))
+                `marker-${s}-point-${x}`
+              )) }, `marker-dots-${s}`))
             ]
           }
         );
       case "scatter":
-        return /* @__PURE__ */ m(
-          Or,
+        return /* @__PURE__ */ d(
+          rr,
           {
-            ...V,
-            onMouseMove: P,
-            onMouseLeave: T,
-            onClick: B,
+            ...ee,
+            onMouseMove: Z,
+            onMouseLeave: J,
+            onClick: Q,
             children: [
-              n && /* @__PURE__ */ e(U, { ...j }),
-              /* @__PURE__ */ e(X, { dataKey: "x", type: "number", ...q }),
-              /* @__PURE__ */ e($, { dataKey: "y", type: "number", ..._ }),
-              k && /* @__PURE__ */ e(
-                J,
+              i && /* @__PURE__ */ r(se, { ...te }),
+              /* @__PURE__ */ r(oe, { dataKey: "x", type: "number", ...re }),
+              /* @__PURE__ */ r(T, { dataKey: "y", type: "number", ...P }),
+              C && /* @__PURE__ */ r(
+                ne,
                 {
-                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s }),
+                  content: (e) => /* @__PURE__ */ r(de, { ...e, config: a, tooltipMaxWidth: X, chartType: n }),
                   cursor: {
                     stroke: "var(--color-border-primary)",
                     strokeWidth: 1,
@@ -783,43 +893,52 @@ function Hr({
                   position: { x: void 0, y: void 0 },
                   offset: 10,
                   animationDuration: 0,
-                  allowEscapeViewBox: E,
-                  reverseDirection: { x: O },
+                  allowEscapeViewBox: U,
+                  reverseDirection: { x: G },
                   wrapperStyle: { zIndex: 100 }
                 }
               ),
-              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
-              u.filter((r) => r !== "x" && r !== "y" && r !== "name").map((r, a) => {
-                const l = t[r]?.color || x[a % x.length];
-                return /* @__PURE__ */ e(
-                  Rr,
+              m && /* @__PURE__ */ r(ie, { content: /* @__PURE__ */ r(ae, {}), ...Y }),
+              h.filter((e) => e !== "x" && e !== "y" && e !== "name").map((e, s) => {
+                const l = a[e]?.color || k[s % k.length];
+                return /* @__PURE__ */ r(
+                  tr,
                   {
-                    name: t[r]?.label || r,
-                    data: c.map((h) => ({ x: h.x, y: h.y, [r]: h[r] })),
+                    name: a[e]?.label || e,
+                    data: f.map((x) => ({ x: x.x, y: x.y, [e]: x[e] })),
                     fill: l,
                     className: "cursor-pointer transition-colors",
                     isAnimationActive: !1
                   },
-                  r
+                  e
                 );
               })
             ]
           }
         );
       case "composed":
-        return /* @__PURE__ */ m(
-          Br,
+        return /* @__PURE__ */ d(
+          er,
           {
-            ...V,
-            onMouseMove: P,
-            onMouseLeave: T,
-            onClick: B,
+            ...ee,
+            onMouseMove: Z,
+            onMouseLeave: J,
+            onClick: Q,
             children: [
-              n && /* @__PURE__ */ e(U, { ...j, yAxisId: kr }),
-              /* @__PURE__ */ e(X, { dataKey: "name", ...q }),
-              /* @__PURE__ */ e($, { yAxisId: "left", ..._ }),
-              Y && /* @__PURE__ */ e(
-                $,
+              t !== "yaxis-only" && i && /* @__PURE__ */ r(se, { ...te, yAxisId: Ee }),
+              /* @__PURE__ */ r(oe, { dataKey: "name", ...re, ...t === "yaxis-only" && { axisLine: !1, tickLine: !1, tick: !1 } }),
+              /* @__PURE__ */ r(
+                T,
+                {
+                  yAxisId: "left",
+                  ...P,
+                  hide: t === "data-only",
+                  width: t === "data-only" ? 0 : P.width,
+                  ...t !== "full" && j ? { domain: j } : {}
+                }
+              ),
+              t !== "yaxis-only" && ue && /* @__PURE__ */ r(
+                T,
                 {
                   yAxisId: "right",
                   orientation: "right",
@@ -830,16 +949,16 @@ function Hr({
                     fill: "var(--color-text-tertiary)",
                     fontFamily: "Inter, sans-serif"
                   },
-                  width: yr,
-                  tickFormatter: tr,
-                  ...rr && { tickCount: rr },
-                  ...er && { domain: er }
+                  width: De,
+                  tickFormatter: pe,
+                  ...he && { tickCount: he },
+                  ...fe && { domain: fe }
                 }
               ),
-              k && /* @__PURE__ */ e(
-                J,
+              t !== "yaxis-only" && C && /* @__PURE__ */ r(
+                ne,
                 {
-                  content: (r) => /* @__PURE__ */ e(H, { ...r, config: t, tooltipMaxWidth: D, chartType: s }),
+                  content: (e) => /* @__PURE__ */ r(de, { ...e, config: a, tooltipMaxWidth: X, chartType: n }),
                   cursor: {
                     stroke: "var(--color-border-primary)",
                     strokeWidth: 1,
@@ -849,158 +968,195 @@ function Hr({
                   position: { x: void 0, y: void 0 },
                   offset: 10,
                   animationDuration: 0,
-                  allowEscapeViewBox: E,
-                  reverseDirection: { x: O },
+                  allowEscapeViewBox: U,
+                  reverseDirection: { x: G },
                   wrapperStyle: { zIndex: 100 }
                 }
               ),
-              f && /* @__PURE__ */ e(Q, { content: /* @__PURE__ */ e(F, {}), ...R }),
-              u.map((r, a) => {
-                const l = t[r].color || x[a % x.length];
-                return (t[r].type || "bar") === "bar" ? /* @__PURE__ */ e(
-                  pr,
+              t === "full" && m && /* @__PURE__ */ r(ie, { content: /* @__PURE__ */ r(ae, {}), ...Y }),
+              h.map((e, s) => {
+                const l = a[e].color || k[s % k.length];
+                return (a[e].type || "bar") === "bar" ? /* @__PURE__ */ r(
+                  Le,
                   {
-                    dataKey: r,
-                    name: t[r].label,
-                    yAxisId: t[r].yAxisId || "left",
+                    dataKey: e,
+                    name: a[e].label,
+                    yAxisId: a[e].yAxisId || "left",
                     fill: l,
+                    fillOpacity: t === "yaxis-only" ? 0 : 1,
                     radius: [0, 0, 0, 0],
                     className: "cursor-pointer transition-colors",
                     isAnimationActive: !1,
                     maxBarSize: 60
                   },
-                  r
+                  e
                 ) : null;
               }),
-              u.map((r, a) => {
-                const l = t[r].color || x[a % x.length], h = t[r].type || "bar";
-                return h === "area" ? /* @__PURE__ */ e(
-                  gr,
+              h.map((e, s) => {
+                const l = a[e].color || k[s % k.length], x = a[e].type || "bar";
+                return x === "area" ? /* @__PURE__ */ r(
+                  Te,
                   {
                     type: "linear",
-                    dataKey: r,
-                    name: t[r].label,
-                    yAxisId: t[r].yAxisId || "left",
-                    stroke: t[r].stroke ?? l,
-                    fill: t[r].fill ?? l,
-                    fillOpacity: 0.3,
+                    dataKey: e,
+                    name: a[e].label,
+                    yAxisId: a[e].yAxisId || "left",
+                    stroke: a[e].stroke ?? l,
+                    strokeOpacity: t === "yaxis-only" ? 0 : 1,
+                    fill: a[e].fill ?? l,
+                    fillOpacity: t === "yaxis-only" ? 0 : 0.3,
                     className: "cursor-pointer transition-colors",
                     isAnimationActive: !1
                   },
-                  r
-                ) : h === "range-area" ? /* @__PURE__ */ e(
-                  gr,
+                  e
+                ) : x === "range-area" ? /* @__PURE__ */ r(
+                  Te,
                   {
                     type: "linear",
-                    dataKey: r,
-                    name: t[r].label,
-                    yAxisId: t[r].yAxisId || "left",
-                    stroke: t[r].stroke ?? "none",
-                    fill: t[r].fill ?? l,
-                    fillOpacity: 0.3,
+                    dataKey: e,
+                    name: a[e].label,
+                    yAxisId: a[e].yAxisId || "left",
+                    stroke: a[e].stroke ?? "none",
+                    strokeOpacity: t === "yaxis-only" ? 0 : 1,
+                    fill: a[e].fill ?? l,
+                    fillOpacity: t === "yaxis-only" ? 0 : 0.3,
                     className: "cursor-pointer transition-colors",
                     isAnimationActive: !1
                   },
-                  r
+                  e
                 ) : null;
               }),
-              u.map((r, a) => {
-                const l = t[r].color || x[a % x.length];
-                return (t[r].type || "bar") === "line" ? /* @__PURE__ */ e(
-                  wr,
+              h.map((e, s) => {
+                const l = a[e].color || k[s % k.length];
+                return (a[e].type || "bar") === "line" ? /* @__PURE__ */ r(
+                  Oe,
                   {
                     type: "linear",
-                    dataKey: r,
-                    name: t[r].label,
-                    yAxisId: t[r].yAxisId || "left",
+                    dataKey: e,
+                    name: a[e].label,
+                    yAxisId: a[e].yAxisId || "left",
                     stroke: l,
                     strokeWidth: 2,
-                    strokeDasharray: L(t[r].strokeStyle),
-                    dot: t[r].showDots === !0 ? {
+                    strokeOpacity: t === "yaxis-only" ? 0 : 1,
+                    strokeDasharray: R(a[e].strokeStyle),
+                    dot: t === "yaxis-only" ? !1 : a[e].showDots === !0 ? {
                       fill: l,
                       strokeWidth: 0,
                       r: 3
                     } : !1,
-                    activeDot: {
+                    activeDot: t === "yaxis-only" ? !1 : {
                       r: 5,
                       fill: l
                     },
                     className: "cursor-pointer transition-colors",
                     isAnimationActive: !1
                   },
-                  r
+                  e
                 ) : null;
               })
             ]
           }
         );
       default:
-        return /* @__PURE__ */ e("div", { children: "Unsupported chart type" });
+        return /* @__PURE__ */ r("div", { children: "Unsupported chart type" });
     }
-  }, Wr = () => Mr ? /* @__PURE__ */ e("div", { className: "sr-only", children: /* @__PURE__ */ m("table", { role: "table", "aria-label": S ? `Data for ${S}` : "Chart data", children: [
-    /* @__PURE__ */ m("caption", { className: "sr-only", children: [
-      S && `${S}. `,
-      ar || `${s} chart showing ${u.length} data series across ${c.length} categories.`
+  }, Qe = () => _e ? /* @__PURE__ */ r("div", { className: "sr-only", children: /* @__PURE__ */ d("table", { role: "table", "aria-label": D ? `Data for ${D}` : "Chart data", children: [
+    /* @__PURE__ */ d("caption", { className: "sr-only", children: [
+      D && `${D}. `,
+      xe || `${n} chart showing ${h.length} data series across ${f.length} categories.`
     ] }),
-    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ e("th", { scope: "col", children: "Category" }),
-      u.map((r) => /* @__PURE__ */ e("th", { scope: "col", children: t[r]?.label || r }, r))
+    /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ d("tr", { children: [
+      /* @__PURE__ */ r("th", { scope: "col", children: "Category" }),
+      h.map((t) => /* @__PURE__ */ r("th", { scope: "col", children: a[t]?.label || t }, t))
     ] }) }),
-    /* @__PURE__ */ e("tbody", { children: c.map((r, a) => /* @__PURE__ */ m("tr", { children: [
-      /* @__PURE__ */ e("th", { scope: "row", children: r.name || `Item ${a + 1}` }),
-      u.map((l) => /* @__PURE__ */ e("td", { children: W ? W(r[l], a) : r[l] }, l))
-    ] }, a)) })
-  ] }) }) : null, Z = lr.useRef(null);
-  return lr.useEffect(() => {
-    const r = Z.current;
-    if (!r) return;
-    const a = setTimeout(() => {
-      r.querySelectorAll(".recharts-cartesian-axis-tick").forEach((h) => {
-        const p = h.querySelector("text"), M = h.querySelector(".recharts-cartesian-axis-tick-line");
-        p?.textContent?.trim() === "0" && M && M.setAttribute("stroke-width", "2");
+    /* @__PURE__ */ r("tbody", { children: f.map((t, e) => /* @__PURE__ */ d("tr", { children: [
+      /* @__PURE__ */ r("th", { scope: "row", children: t.name || `Item ${e + 1}` }),
+      h.map((s) => /* @__PURE__ */ r("td", { children: F ? F(t[s], e) : t[s] }, s))
+    ] }, e)) })
+  ] }) }) : null, le = S.useRef(null);
+  return S.useEffect(() => {
+    const t = le.current;
+    if (!t) return;
+    const e = setTimeout(() => {
+      t.querySelectorAll(".recharts-cartesian-axis-tick").forEach((l) => {
+        const x = l.querySelector("text"), c = l.querySelector(".recharts-cartesian-axis-tick-line");
+        x?.textContent?.trim() === "0" && c && c.setAttribute("stroke-width", "2");
       });
     }, 100);
-    return () => clearTimeout(a);
-  }, [c, s]), /* @__PURE__ */ m(
+    return () => clearTimeout(e);
+  }, [f, n]), S.useEffect(() => {
+    if (!E || !W || !b.current || !H) return;
+    const t = y.findIndex((s) => s.name === W.xValue);
+    if (t < 0) return;
+    const e = setTimeout(() => {
+      if (!b.current) return;
+      const s = b.current.offsetWidth, l = t / (y.length - 1) * H;
+      b.current.scrollLeft = Math.max(0, l - s / 2);
+    }, 50);
+    return () => clearTimeout(e);
+  }, [E, W, H, y]), /* @__PURE__ */ d(
     "div",
     {
-      ref: Z,
-      className: jr("w-full", i),
-      style: { minWidth: y },
+      ref: le,
+      className: or("w-full", p),
+      style: { minWidth: w },
       role: "img",
-      "aria-label": S || `${s} chart`,
-      "aria-describedby": ar ? `${Z.current?.id || "chart"}-desc` : void 0,
-      ...zr,
+      "aria-label": D || `${n} chart`,
+      "aria-describedby": xe ? `${le.current?.id || "chart"}-desc` : void 0,
+      ...Fe,
       children: [
-        S && /* @__PURE__ */ e("h3", { className: "sr-only", id: `${Z.current?.id || "chart"}-title`, children: S }),
-        ar && /* @__PURE__ */ e("p", { className: "sr-only", id: `${Z.current?.id || "chart"}-desc`, children: ar }),
+        D && /* @__PURE__ */ r("h3", { className: "sr-only", id: `${le.current?.id || "chart"}-title`, children: D }),
+        xe && /* @__PURE__ */ r("p", { className: "sr-only", id: `${le.current?.id || "chart"}-desc`, children: xe }),
         (() => {
-          const r = N ? d - N : d, a = K ? /* @__PURE__ */ e(
-            Tr,
+          const t = A ? u - A : u;
+          if (E && n !== "horizontal-bar" && n !== "scatter") {
+            const s = Pe + (me().left ?? 0);
+            return /* @__PURE__ */ d("div", { style: { height: m && A ? u : t }, children: [
+              /* @__PURE__ */ d("div", { className: "flex w-full", style: { height: t }, children: [
+                /* @__PURE__ */ r("div", { style: { width: s, flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ r(Ne, { width: s, height: t, children: ye("yaxis-only") || /* @__PURE__ */ r("div", { children: "Chart error" }) }) }),
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    ref: b,
+                    className: "flex-1 overflow-x-scroll overflow-y-hidden scrollbar-hide select-none",
+                    style: { cursor: "grab" },
+                    onMouseDown: Ue,
+                    onMouseMove: Ze,
+                    onMouseUp: We,
+                    onMouseLeave: We,
+                    children: /* @__PURE__ */ r("div", { style: { width: H, height: t }, children: /* @__PURE__ */ r(Ne, { width: H, height: t, children: ye("data-only") || /* @__PURE__ */ r("div", { children: "Chart error" }) }) })
+                  }
+                )
+              ] }),
+              m && Je()
+            ] });
+          }
+          const e = _ ? /* @__PURE__ */ r(
+            Ne,
             {
-              width: b || "100%",
-              height: r,
-              children: Cr() || /* @__PURE__ */ e("div", { children: "Chart error" })
+              width: g || "100%",
+              height: t,
+              children: ye() || /* @__PURE__ */ r("div", { children: "Chart error" })
             }
-          ) : /* @__PURE__ */ e("div", { style: { width: b || "100%", height: r, minWidth: y }, children: Cr() || /* @__PURE__ */ e("div", { children: "Chart error" }) });
-          return N ? /* @__PURE__ */ e("div", { style: { width: b || "100%" }, children: a }) : a;
+          ) : /* @__PURE__ */ r("div", { style: { width: g || "100%", height: t, minWidth: w }, children: ye() || /* @__PURE__ */ r("div", { children: "Chart error" }) });
+          return A ? /* @__PURE__ */ r("div", { style: { width: g || "100%" }, children: e }) : e;
         })(),
-        /* @__PURE__ */ e(Wr, {})
+        /* @__PURE__ */ r(Qe, {})
       ]
     }
   );
 }
-const Yr = (s, c = "bar") => {
-  const t = A[c];
-  return Array.from({ length: s }, (i, d) => t[d % t.length]);
-}, re = (s, c, t) => Array.isArray(s) ? s.reduce((d, b, y) => (d[b] = {
-  label: c?.[y] || b,
-  color: t?.[y]
-}, d), {}) : s;
+const xr = (n, f = "bar") => {
+  const a = O[f];
+  return Array.from({ length: n }, (p, u) => a[u % a.length]);
+}, mr = (n, f, a) => Array.isArray(n) ? n.reduce((u, g, w) => (u[g] = {
+  label: f?.[w] || g,
+  color: a?.[w]
+}, u), {}) : n;
 export {
-  Hr as Chart,
-  A as chartColorSchemes,
-  re as createChartConfig,
-  G as formatNumber,
-  Yr as generateChartColors
+  pr as Chart,
+  O as chartColorSchemes,
+  mr as createChartConfig,
+  ce as formatNumber,
+  xr as generateChartColors
 };