@actioneer/ads 0.2.3 → 0.3.0

package/components/chart.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs as g, jsx as e, Fragment as Z } from "react/jsx-runtime";
-import * as N from "react";
-import { ResponsiveContainer as F, LineChart as q, Tooltip as C, Line as z, AreaChart as J, Area as Q, BarChart as K, Bar as G, Cell as W, ComposedChart as ee, YAxis as D, ScatterChart as te, CartesianGrid as E, XAxis as _, Scatter as re, PieChart as ae, Pie as ne, RadarChart as ie, PolarGrid as le, PolarAngleAxis as H, PolarRadiusAxis as oe, Radar as se, RadialBarChart as ce, RadialBar as de, Treemap as me, FunnelChart as fe, Funnel as ue, LabelList as he, ReferenceArea as xe, ReferenceLine as ge, ReferenceDot as ve } from "recharts";
-import { MotionConfig as pe, AnimatePresence as be, motion as Ne } from "motion/react";
-import { cn as k } from "../lib/cn.js";
-import { floatVariants as Ae } from "../lib/motion.js";
-const V = (t) => `var(--color-chart-${t % 6 + 1})`, j = [
+import { jsxs as y, jsx as e, Fragment as G } from "react/jsx-runtime";
+import * as k from "react";
+import { ResponsiveContainer as $, LineChart as re, Tooltip as F, Line as U, AreaChart as ae, Area as ne, CartesianGrid as Y, XAxis as H, YAxis as I, BarChart as ie, Bar as Z, Cell as X, ComposedChart as oe, ScatterChart as le, Scatter as se, PieChart as ce, Pie as de, RadarChart as me, PolarGrid as fe, PolarAngleAxis as q, PolarRadiusAxis as ue, Radar as he, RadialBarChart as xe, RadialBar as ve, Treemap as ge, FunnelChart as be, Funnel as pe, LabelList as ye, ReferenceArea as ke, ReferenceLine as Ne, ReferenceDot as we } from "recharts";
+import { MotionConfig as Ae, AnimatePresence as Ce, motion as Re } from "motion/react";
+import { cn as C } from "../lib/cn.js";
+import { floatVariants as Fe } from "../lib/motion.js";
+const J = (r) => `var(--color-chart-${r % 6 + 1})`, E = [
   "var(--color-ink-950)",
   "var(--color-ink-700)",
   "var(--color-ink-500)",
@@ -13,86 +13,105 @@ const V = (t) => `var(--color-chart-${t % 6 + 1})`, j = [
   "var(--color-ink-300)",
   "var(--color-ink-200)",
   "var(--color-ink-100)"
-], M = (t) => j[t % j.length], P = "var(--color-chart-3)", R = {
+], B = (r) => E[r % E.length], _ = "var(--color-chart-3)", S = {
   primary: { ref: "var(--brand)", pill: "bg-fill text-fill-foreground" },
   success: { ref: "var(--color-success-600)", pill: "bg-success-50 text-success-700" },
   warning: { ref: "var(--color-warning-500)", pill: "bg-warning-50 text-warning-700" },
   danger: { ref: "var(--color-danger-500)", pill: "bg-danger-50 text-danger-700" },
   info: { ref: "var(--color-info-500)", pill: "bg-info-50 text-info-700" }
-}, w = (t) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(t), X = (t, r) => {
+}, L = (r) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(r), Q = (r, n) => {
   const a = [];
-  for (const n of t)
-    for (const i of Object.keys(n))
-      i !== r && typeof n[i] == "number" && !a.includes(i) && a.push(i);
+  for (const i of r)
+    for (const t of Object.keys(i))
+      t !== n && typeof i[t] == "number" && !a.includes(t) && a.push(t);
   return a;
 };
-function L({ x: t, y: r, payload: a, anchor: n, dy: i, format: l }) {
-  const o = (a == null ? void 0 : a.value) ?? "", s = l && typeof o == "number" ? l(o) : o;
-  return /* @__PURE__ */ e("text", { x: t, y: r, dy: i, textAnchor: n, className: "fill-tertiary text-xs tabular-nums", children: s });
+function T({ x: r, y: n, payload: a, anchor: i, dy: t, format: s }) {
+  const c = (a == null ? void 0 : a.value) ?? "", m = s ? s(c) : c;
+  return /* @__PURE__ */ e("text", { x: r, y: n, dy: t, textAnchor: i, className: "fill-tertiary text-xs tabular-nums", children: m });
 }
-function y({
-  active: t,
-  payload: r,
+function M({
+  active: r,
+  payload: n,
   label: a,
-  format: n
+  format: i,
+  labelKey: t,
+  renderer: s
 }) {
-  if (!t || !(r != null && r.length)) return null;
-  const i = r.length === 1, l = a ?? (i ? r[0].name : void 0);
-  return /* @__PURE__ */ g("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background", children: [
-    /* @__PURE__ */ e("div", { className: k("text-xs font-medium tracking-wide uppercase text-background/60", !i && "mb-1"), children: l }),
-    r.map((o, s) => /* @__PURE__ */ g("div", { className: "flex items-center gap-1.5", children: [
-      !i && /* @__PURE__ */ g(Z, { children: [
-        /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-1.5 rounded-dot", style: { background: o.color } }),
-        /* @__PURE__ */ e("span", { className: "text-background/70", children: o.name })
+  var x, u;
+  const c = (n ?? []).map((d, p) => {
+    const h = d.payload && typeof d.payload == "object" ? d.payload : void 0;
+    return {
+      key: d.dataKey ?? p,
+      name: d.name ?? d.dataKey ?? p,
+      value: d.value,
+      color: d.color,
+      datum: h
+    };
+  }), m = t ? (u = (x = c[0]) == null ? void 0 : x.datum) == null ? void 0 : u[t] : void 0, f = {
+    active: !!r,
+    label: typeof m == "string" || typeof m == "number" ? m : a,
+    items: c,
+    formatValue: i
+  };
+  if (s) return /* @__PURE__ */ e(G, { children: s(f) });
+  if (!f.active || !c.length) return null;
+  const l = c.length === 1, g = f.label ?? (l ? c[0].name : void 0);
+  return /* @__PURE__ */ y("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background", children: [
+    /* @__PURE__ */ e("div", { className: C("text-xs font-medium tracking-wide uppercase text-background/60", !l && "mb-1"), children: g }),
+    c.map((d) => /* @__PURE__ */ y("div", { className: "flex items-center gap-1.5", children: [
+      !l && /* @__PURE__ */ y(G, { children: [
+        /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-1.5 rounded-dot", style: { background: d.color } }),
+        /* @__PURE__ */ e("span", { className: "text-background/70", children: d.name })
       ] }),
-      /* @__PURE__ */ e("span", { className: "ml-auto pl-3 font-medium tabular-nums", children: typeof o.value == "number" ? n(o.value) : String(o.value ?? "") })
-    ] }, o.dataKey ?? s))
+      /* @__PURE__ */ e("span", { className: "ml-auto pl-3 font-medium tabular-nums", children: typeof d.value == "number" ? i(d.value) : String(d.value ?? "") })
+    ] }, d.key))
   ] });
 }
-const B = "pointer-events-none inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap";
-function ke({ viewBox: t, label: r, color: a, axis: n }) {
-  const i = t ?? {};
-  return n === "y" ? /* @__PURE__ */ e("foreignObject", { x: i.x ?? 0, y: (i.y ?? 0) - 10, width: i.width ?? 0, height: 20, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-end pr-1", children: /* @__PURE__ */ e("span", { className: k(B, R[a].pill), children: r }) }) }) : /* @__PURE__ */ e("foreignObject", { x: (i.x ?? 0) - 90, y: (i.y ?? 0) - 10, width: 180, height: 20, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ e("span", { className: k(B, R[a].pill), children: r }) }) });
+const V = "pointer-events-none inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap";
+function Me({ viewBox: r, label: n, color: a, axis: i }) {
+  const t = r ?? {};
+  return i === "y" ? /* @__PURE__ */ e("foreignObject", { x: t.x ?? 0, y: (t.y ?? 0) - 10, width: t.width ?? 0, height: 20, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-end pr-1", children: /* @__PURE__ */ e("span", { className: C(V, S[a].pill), children: n }) }) }) : /* @__PURE__ */ e("foreignObject", { x: (t.x ?? 0) - 90, y: (t.y ?? 0) - 10, width: 180, height: 20, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ e("span", { className: C(V, S[a].pill), children: n }) }) });
 }
-function Ce({ viewBox: t, label: r, color: a }) {
-  const n = t ?? {};
-  return /* @__PURE__ */ e("foreignObject", { x: n.x ?? 0, y: n.y ?? 0, width: n.width ?? 0, height: 28, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center pl-1.5", children: /* @__PURE__ */ e("span", { className: k(B, R[a].pill), children: r }) }) });
+function Le({ viewBox: r, label: n, color: a }) {
+  const i = r ?? {};
+  return /* @__PURE__ */ e("foreignObject", { x: i.x ?? 0, y: i.y ?? 0, width: i.width ?? 0, height: 28, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center pl-1.5", children: /* @__PURE__ */ e("span", { className: C(V, S[a].pill), children: n }) }) });
 }
-function we({
-  cx: t,
-  cy: r,
+function Oe({
+  cx: r,
+  cy: n,
   n: a,
-  ann: n,
-  onEnter: i,
-  onLeave: l
+  ann: i,
+  onEnter: t,
+  onLeave: s
 }) {
-  const [o, s] = N.useState(!1);
-  if (t == null || r == null || !Number.isFinite(t) || !Number.isFinite(r)) return /* @__PURE__ */ e("g", {});
-  const f = () => i({ ann: n, n: a, cx: t, cy: r }), d = () => l();
-  return /* @__PURE__ */ g(
+  const [c, m] = k.useState(!1);
+  if (r == null || n == null || !Number.isFinite(r) || !Number.isFinite(n)) return /* @__PURE__ */ e("g", {});
+  const f = () => t({ ann: i, n: a, cx: r, cy: n }), l = () => s();
+  return /* @__PURE__ */ y(
     "g",
     {
       tabIndex: 0,
       role: "img",
-      "aria-label": `Annotation ${a}: ${n.label}`,
+      "aria-label": `Annotation ${a}: ${i.label}`,
       className: "cursor-default outline-none [transform-box:fill-box] origin-center transition-transform ease-out [transition-duration:var(--duration-fast)] hover:scale-110 focus-visible:scale-110",
       onMouseEnter: f,
-      onMouseLeave: d,
+      onMouseLeave: l,
       onFocus: () => {
-        s(!0), f();
+        m(!0), f();
       },
       onBlur: () => {
-        s(!1), d();
+        m(!1), l();
       },
       children: [
-        o && /* @__PURE__ */ e("circle", { cx: t, cy: r, r: 12, fill: "none", stroke: "var(--ring)", strokeWidth: 2 }),
-        /* @__PURE__ */ e("circle", { cx: t, cy: r, r: 10, fill: "var(--background)" }),
-        /* @__PURE__ */ e("circle", { cx: t, cy: r, r: 8, fill: R[n.color ?? "primary"].ref }),
+        c && /* @__PURE__ */ e("circle", { cx: r, cy: n, r: 12, fill: "none", stroke: "var(--ring)", strokeWidth: 2 }),
+        /* @__PURE__ */ e("circle", { cx: r, cy: n, r: 10, fill: "var(--background)" }),
+        /* @__PURE__ */ e("circle", { cx: r, cy: n, r: 8, fill: S[i.color ?? "primary"].ref }),
         /* @__PURE__ */ e(
           "text",
           {
-            x: t,
-            y: r,
+            x: r,
+            y: n,
             dy: "0.35em",
             textAnchor: "middle",
             className: "pointer-events-none fill-brand-foreground text-xs font-bold select-none",
@@ -103,41 +122,41 @@ function we({
     }
   );
 }
-function ye({ hovered: t, frameWidth: r, format: a }) {
-  return /* @__PURE__ */ e(pe, { reducedMotion: "user", children: /* @__PURE__ */ e(be, { children: t && /* @__PURE__ */ e(
+function Se({ hovered: r, frameWidth: n, format: a }) {
+  return /* @__PURE__ */ e(Ae, { reducedMotion: "user", children: /* @__PURE__ */ e(Ce, { children: r && /* @__PURE__ */ e(
     "div",
     {
       className: "pointer-events-none absolute z-10",
       style: {
-        left: Math.max(96, Math.min(t.cx, Math.max(r - 96, 96))),
-        top: t.cy - 16
+        left: Math.max(96, Math.min(r.cx, Math.max(n - 96, 96))),
+        top: r.cy - 16
       },
-      children: /* @__PURE__ */ g(
-        Ne.div,
+      children: /* @__PURE__ */ y(
+        Re.div,
         {
-          variants: Ae,
+          variants: Fe,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
           className: "w-max max-w-60 -translate-x-1/2 -translate-y-full origin-bottom rounded-lg bg-elevated p-3 shadow-elevation",
           children: [
-            /* @__PURE__ */ g("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ y("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ e(
                 "span",
                 {
                   "aria-hidden": !0,
                   className: "flex size-4.5 shrink-0 items-center justify-center rounded-full text-xs font-bold text-brand-foreground",
-                  style: { background: R[t.ann.color ?? "primary"].ref },
-                  children: t.n
+                  style: { background: S[r.ann.color ?? "primary"].ref },
+                  children: r.n
                 }
               ),
-              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-foreground", children: t.ann.label })
+              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-foreground", children: r.ann.label })
             ] }),
-            t.ann.description && /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs leading-relaxed text-secondary", children: t.ann.description }),
-            /* @__PURE__ */ g("div", { className: "mt-1.5 text-xs font-medium tracking-wide uppercase text-tertiary tabular-nums", children: [
-              t.ann.x,
+            r.ann.description && /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs leading-relaxed text-secondary", children: r.ann.description }),
+            /* @__PURE__ */ y("div", { className: "mt-1.5 text-xs font-medium tracking-wide uppercase text-tertiary tabular-nums", children: [
+              r.ann.x,
               " · ",
-              a(t.ann.y)
+              a(r.ann.y)
             ] })
           ]
         }
@@ -145,244 +164,344 @@ function ye({ hovered: t, frameWidth: r, format: a }) {
     }
   ) }) });
 }
-function Y(t) {
-  const [r, a] = N.useState(null), n = N.useCallback(() => a(null), []), { back: i, front: l } = N.useMemo(() => {
-    const o = [], s = [];
+function K(r) {
+  const [n, a] = k.useState(null), i = k.useCallback(() => a(null), []), { back: t, front: s } = k.useMemo(() => {
+    const c = [], m = [];
     let f = 0;
-    return (t ?? []).forEach((d, v) => {
-      const c = d.color ?? "primary";
-      if (d.kind === "band") {
-        const h = d.axis ?? "y";
-        o.push(
+    return (r ?? []).forEach((l, g) => {
+      const x = l.color ?? "primary";
+      if (l.kind === "band") {
+        const u = l.axis ?? "y";
+        c.push(
           /* @__PURE__ */ e(
-            xe,
+            ke,
             {
-              ...h === "y" ? { y1: d.from, y2: d.to } : { x1: d.from, x2: d.to },
-              fill: R[c].ref,
+              ...u === "y" ? { y1: l.from, y2: l.to } : { x1: l.from, x2: l.to },
+              fill: S[x].ref,
               fillOpacity: 0.06,
               stroke: "none",
-              ifOverflow: h === "y" ? "extendDomain" : "visible",
-              label: d.label ? /* @__PURE__ */ e(Ce, { label: d.label, color: c }) : void 0
+              ifOverflow: u === "y" ? "extendDomain" : "visible",
+              label: l.label ? /* @__PURE__ */ e(Le, { label: l.label, color: x }) : void 0
             },
-            `ann-${v}`
+            `ann-${g}`
           )
         );
-      } else if (d.kind === "line") {
-        const h = d.axis ?? "y";
-        s.push(
+      } else if (l.kind === "line") {
+        const u = l.axis ?? "y";
+        m.push(
           /* @__PURE__ */ e(
-            ge,
+            Ne,
             {
-              ...h === "y" ? { y: d.value } : { x: d.value },
-              stroke: R[c].ref,
+              ...u === "y" ? { y: l.value } : { x: l.value },
+              stroke: S[x].ref,
               strokeWidth: 1,
               strokeDasharray: "4 4",
-              ifOverflow: h === "y" ? "extendDomain" : "visible",
-              label: d.label ? /* @__PURE__ */ e(ke, { label: d.label, color: c, axis: h }) : void 0
+              ifOverflow: u === "y" ? "extendDomain" : "visible",
+              label: l.label ? /* @__PURE__ */ e(Me, { label: l.label, color: x, axis: u }) : void 0
             },
-            `ann-${v}`
+            `ann-${g}`
           )
         );
       } else {
         f += 1;
-        const h = f;
-        s.push(
+        const u = f;
+        m.push(
           /* @__PURE__ */ e(
-            ve,
+            we,
             {
-              x: d.x,
-              y: d.y,
+              x: l.x,
+              y: l.y,
               ifOverflow: "visible",
-              shape: (x) => /* @__PURE__ */ e(we, { cx: x.cx, cy: x.cy, n: h, ann: d, onEnter: a, onLeave: n })
+              shape: (d) => /* @__PURE__ */ e(Oe, { cx: d.cx, cy: d.cy, n: u, ann: l, onEnter: a, onLeave: i })
             },
-            `ann-${v}`
+            `ann-${g}`
           )
         );
       }
-    }), { back: o, front: s };
-  }, [t, n]);
-  return { back: i, front: l, hovered: r };
+    }), { back: c, front: m };
+  }, [r, i]);
+  return { back: t, front: s, hovered: n };
 }
-function $({
-  items: t,
-  align: r = "end",
+function W({
+  items: r,
+  align: n = "end",
   className: a
 }) {
-  const n = {
+  const i = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end"
-  }[r];
-  return /* @__PURE__ */ e("div", { className: k("mb-3 flex flex-wrap items-center gap-x-4 gap-y-1", n, a), children: t.map((i) => /* @__PURE__ */ g("span", { className: "inline-flex items-center gap-1.5 text-xs text-secondary", children: [
-    /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-2 rounded-dot", style: { background: i.color } }),
-    i.label
-  ] }, i.label)) });
+  }[n];
+  return /* @__PURE__ */ e("div", { className: C("mb-3 flex flex-wrap items-center gap-x-4 gap-y-1", i, a), children: r.map((t) => /* @__PURE__ */ y("span", { className: "inline-flex items-center gap-1.5 text-xs text-secondary", children: [
+    /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-2 rounded-dot", style: { background: t.color } }),
+    t.label
+  ] }, t.label)) });
 }
-const S = N.forwardRef(
-  ({ className: t, height: r, legendItems: a, hovered: n, format: i, children: l, ...o }, s) => {
-    var v;
-    const f = N.useRef(null);
-    return /* @__PURE__ */ g("div", { ref: (c) => {
-      f.current = c, typeof s == "function" ? s(c) : s && (s.current = c);
-    }, className: k("relative w-full font-sans", t), ...o, children: [
-      a && /* @__PURE__ */ e($, { items: a }),
-      /* @__PURE__ */ e(F, { width: "100%", height: r, children: l }),
-      /* @__PURE__ */ e(ye, { hovered: n, frameWidth: ((v = f.current) == null ? void 0 : v.clientWidth) ?? 0, format: i })
+const D = k.forwardRef(
+  ({ className: r, height: n, legendItems: a, hovered: i, format: t, children: s, ...c }, m) => {
+    var g;
+    const f = k.useRef(null);
+    return /* @__PURE__ */ y("div", { ref: (x) => {
+      f.current = x, typeof m == "function" ? m(x) : m && (m.current = x);
+    }, className: C("relative w-full font-sans", r), ...c, children: [
+      a && /* @__PURE__ */ e(W, { items: a }),
+      /* @__PURE__ */ e($, { width: "100%", height: n, children: s }),
+      /* @__PURE__ */ e(Se, { hovered: i, frameWidth: ((g = f.current) == null ? void 0 : g.clientWidth) ?? 0, format: t })
     ] });
   }
 );
-S.displayName = "ChartFrame";
-function I(t) {
-  const { data: r, categoryKey: a, series: n, seriesLabels: i, highlight: l, annotations: o, grid: s = !0, legend: f, showYAxis: d = !0, formatValue: v } = t, c = N.useMemo(() => n ?? X(r, a), [n, r, a]), h = v ?? w, x = Y(o), p = (A, T) => l && c.includes(l) ? A === l ? "var(--color-chart-1)" : P : V(T), m = (A) => (i == null ? void 0 : i[A]) ?? A, u = f ?? c.length > 1 ? c.map((A, T) => ({ label: m(A), color: p(A, T) })) : null;
-  return { names: c, format: h, layers: x, legendItems: u, furniture: [
-    s ? /* @__PURE__ */ e(E, { vertical: !1, stroke: "var(--border)" }, "grid") : null,
+D.displayName = "ChartFrame";
+function z(r) {
+  const {
+    data: n,
+    categoryKey: a,
+    series: i,
+    seriesLabels: t,
+    highlight: s,
+    annotations: c,
+    grid: m = !0,
+    legend: f,
+    showYAxis: l = !0,
+    formatValue: g,
+    xScale: x = "category",
+    xDomain: u,
+    yDomain: d,
+    xTickFormatter: p,
+    yTickFormatter: h,
+    yAxisWidth: o = 44
+  } = r, v = k.useMemo(() => i ?? Q(n, a), [i, n, a]), b = g ?? L, N = h ?? ((R) => typeof R == "number" ? b(R) : R), O = K(c), w = (R, P) => s && v.includes(s) ? R === s ? "var(--color-chart-1)" : _ : J(P), A = (R) => (t == null ? void 0 : t[R]) ?? R, te = f ?? v.length > 1 ? v.map((R, P) => ({ label: A(R), color: w(R, P) })) : null;
+  return { names: v, format: b, layers: O, legendItems: te, furniture: [
+    m ? /* @__PURE__ */ e(Y, { vertical: !1, stroke: "var(--border)" }, "grid") : null,
     /* @__PURE__ */ e(
-      _,
+      H,
       {
         dataKey: a,
+        type: x === "time" ? "number" : "category",
+        scale: x === "time" ? "time" : "auto",
+        domain: x === "time" ? u ?? ["dataMin", "dataMax"] : u,
+        allowDataOverflow: !!u,
         axisLine: !1,
         tickLine: !1,
         minTickGap: 28,
         tickMargin: 10,
-        tick: /* @__PURE__ */ e(L, { anchor: "middle", dy: 0 })
+        tick: /* @__PURE__ */ e(T, { anchor: "middle", dy: 0, format: p })
       },
       "x"
     ),
-    d ? /* @__PURE__ */ e(
-      D,
+    l ? /* @__PURE__ */ e(
+      I,
       {
-        width: 44,
+        width: o,
+        domain: d,
+        allowDataOverflow: !!d,
         axisLine: !1,
         tickLine: !1,
         tickMargin: 6,
-        tick: /* @__PURE__ */ e(L, { anchor: "end", dy: "0.32em", format: h })
+        tick: /* @__PURE__ */ e(T, { anchor: "end", dy: "0.32em", format: N })
       },
       "y"
     ) : null
-  ], colorFor: p, labelFor: m };
+  ], colorFor: w, labelFor: A };
 }
-const O = { top: 20, right: 12, bottom: 4, left: 0 }, Re = N.forwardRef(
-  ({ height: t = 280, curve: r = "natural", forecastKeys: a, className: n, ...i }, l) => {
-    const { names: o, format: s, layers: f, legendItems: d, furniture: v, colorFor: c, labelFor: h } = I(i);
-    return /* @__PURE__ */ e(S, { ref: l, className: n, height: t, legendItems: d, hovered: f.hovered, format: s, children: /* @__PURE__ */ g(q, { data: i.data, margin: O, children: [
-      v,
-      /* @__PURE__ */ e(
-        C,
+const j = { top: 20, right: 12, bottom: 4, left: 0 }, Te = k.forwardRef(
+  ({ height: r = 280, curve: n = "natural", forecastKeys: a, className: i, ...t }, s) => {
+    const { names: c, format: m, layers: f, legendItems: l, furniture: g, colorFor: x, labelFor: u } = z(t);
+    return /* @__PURE__ */ e(D, { ref: s, className: i, height: r, legendItems: l, hovered: f.hovered, format: m, children: /* @__PURE__ */ y(re, { data: t.data, margin: j, children: [
+      g,
+      t.tooltip !== !1 && /* @__PURE__ */ e(
+        F,
         {
-          content: /* @__PURE__ */ e(y, { format: s }),
+          content: /* @__PURE__ */ e(
+            M,
+            {
+              format: m,
+              renderer: t.tooltip
+            }
+          ),
           cursor: { stroke: "var(--border-strong)" },
           isAnimationActive: !1
         }
       ),
       f.back,
-      o.map((x, p) => /* @__PURE__ */ e(
-        z,
+      c.map((d, p) => /* @__PURE__ */ e(
+        U,
         {
-          dataKey: x,
-          name: h(x),
-          type: r,
-          stroke: c(x, p),
+          dataKey: d,
+          name: u(d),
+          type: n,
+          stroke: x(d, p),
           strokeWidth: 2,
-          strokeDasharray: a != null && a.includes(x) ? "6 4" : void 0,
+          strokeDasharray: a != null && a.includes(d) ? "6 4" : void 0,
           dot: !1,
           activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
           isAnimationActive: !1
         },
-        x
+        d
       )),
       f.front
     ] }) });
   }
 );
-Re.displayName = "LineChart";
-const Me = N.forwardRef(
-  ({ height: t = 280, curve: r = "natural", stacked: a = !1, forecastKeys: n, className: i, ...l }, o) => {
-    const { names: s, format: f, layers: d, legendItems: v, furniture: c, colorFor: h, labelFor: x } = I(l), p = N.useId().replace(/[^a-zA-Z0-9]/g, "");
-    return /* @__PURE__ */ e(S, { ref: o, className: i, height: t, legendItems: v, hovered: d.hovered, format: f, children: /* @__PURE__ */ g(J, { data: l.data, margin: O, children: [
-      /* @__PURE__ */ e("defs", { children: s.map((m, u) => /* @__PURE__ */ g("linearGradient", { id: `${p}-${u}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ e("stop", { offset: "0%", stopColor: h(m, u), stopOpacity: 0.18 }),
-        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: h(m, u), stopOpacity: 0.02 })
-      ] }, m)) }),
-      c,
-      /* @__PURE__ */ e(
-        C,
+Te.displayName = "LineChart";
+const Be = k.forwardRef(
+  ({ height: r = 280, curve: n = "natural", stacked: a = !1, forecastKeys: i, className: t, ...s }, c) => {
+    const { names: m, format: f, layers: l, legendItems: g, furniture: x, colorFor: u, labelFor: d } = z(s), p = k.useId().replace(/[^a-zA-Z0-9]/g, "");
+    return /* @__PURE__ */ e(D, { ref: c, className: t, height: r, legendItems: g, hovered: l.hovered, format: f, children: /* @__PURE__ */ y(ae, { data: s.data, margin: j, children: [
+      /* @__PURE__ */ e("defs", { children: m.map((h, o) => /* @__PURE__ */ y("linearGradient", { id: `${p}-${o}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ e("stop", { offset: "0%", stopColor: u(h, o), stopOpacity: 0.18 }),
+        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: u(h, o), stopOpacity: 0.02 })
+      ] }, h)) }),
+      x,
+      s.tooltip !== !1 && /* @__PURE__ */ e(
+        F,
         {
-          content: /* @__PURE__ */ e(y, { format: f }),
+          content: /* @__PURE__ */ e(
+            M,
+            {
+              format: f,
+              renderer: s.tooltip
+            }
+          ),
           cursor: { stroke: "var(--border-strong)" },
           isAnimationActive: !1
         }
       ),
-      d.back,
-      s.map((m, u) => /* @__PURE__ */ e(
-        Q,
+      l.back,
+      m.map((h, o) => /* @__PURE__ */ e(
+        ne,
         {
-          dataKey: m,
-          name: x(m),
-          type: r,
+          dataKey: h,
+          name: d(h),
+          type: n,
           stackId: a ? "stack" : void 0,
-          stroke: h(m, u),
+          stroke: u(h, o),
           strokeWidth: 2,
-          strokeDasharray: n != null && n.includes(m) ? "6 4" : void 0,
-          fill: `url(#${p}-${u})`,
+          strokeDasharray: i != null && i.includes(h) ? "6 4" : void 0,
+          fill: `url(#${p}-${o})`,
           activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
           isAnimationActive: !1
         },
-        m
+        h
       )),
-      d.front
+      l.front
     ] }) });
   }
 );
-Me.displayName = "AreaChart";
-const Fe = N.forwardRef(
-  ({ height: t = 280, stacked: r = !1, className: a, ...n }, i) => {
-    const { names: l, format: o, layers: s, legendItems: f, furniture: d, colorFor: v, labelFor: c } = I(n), h = n.highlight && l.length === 1 && !l.includes(n.highlight) ? n.highlight : null;
-    return /* @__PURE__ */ e(S, { ref: i, className: a, height: t, legendItems: f, hovered: s.hovered, format: o, children: /* @__PURE__ */ g(K, { data: n.data, margin: O, barCategoryGap: "24%", children: [
-      d,
+Be.displayName = "AreaChart";
+const $e = k.forwardRef(
+  ({
+    height: r = 280,
+    stacked: n = !1,
+    layout: a = "vertical",
+    className: i,
+    ...t
+  }, s) => {
+    const { names: c, format: m, layers: f, legendItems: l, furniture: g, colorFor: x, labelFor: u } = z(t), d = a === "horizontal", p = t.xTickFormatter ?? ((v) => typeof v == "number" ? m(v) : v), h = [
+      t.grid !== !1 ? /* @__PURE__ */ e(
+        Y,
+        {
+          horizontal: !1,
+          vertical: !0,
+          stroke: "var(--border)"
+        },
+        "grid"
+      ) : null,
       /* @__PURE__ */ e(
-        C,
+        H,
         {
-          content: /* @__PURE__ */ e(y, { format: o }),
-          cursor: { fill: "var(--muted)" },
-          isAnimationActive: !1
-        }
+          type: "number",
+          domain: t.xDomain,
+          allowDataOverflow: !!t.xDomain,
+          axisLine: !1,
+          tickLine: !1,
+          minTickGap: 28,
+          tickMargin: 10,
+          tick: /* @__PURE__ */ e(T, { anchor: "middle", dy: 0, format: p })
+        },
+        "x"
       ),
-      s.back,
-      l.map((x, p) => {
-        const m = r ? p === l.length - 1 : !0;
-        return /* @__PURE__ */ e(
-          G,
-          {
-            dataKey: x,
-            name: c(x),
-            stackId: r ? "stack" : void 0,
-            fill: v(x, p),
-            radius: m ? [4, 4, 0, 0] : 0,
-            maxBarSize: 48,
-            isAnimationActive: !1,
-            children: h && n.data.map((u) => /* @__PURE__ */ e(
-              W,
+      t.showYAxis !== !1 ? /* @__PURE__ */ e(
+        I,
+        {
+          type: "category",
+          dataKey: t.categoryKey,
+          width: t.yAxisWidth ?? 144,
+          axisLine: !1,
+          tickLine: !1,
+          tickMargin: 6,
+          tick: /* @__PURE__ */ e(
+            T,
+            {
+              anchor: "end",
+              dy: "0.32em",
+              format: t.yTickFormatter
+            }
+          )
+        },
+        "y"
+      ) : null
+    ], o = t.highlight && c.length === 1 && !c.includes(t.highlight) ? t.highlight : null;
+    return /* @__PURE__ */ e(D, { ref: s, className: i, height: r, legendItems: l, hovered: f.hovered, format: m, children: /* @__PURE__ */ y(
+      ie,
+      {
+        data: t.data,
+        layout: d ? "vertical" : "horizontal",
+        margin: j,
+        barCategoryGap: "24%",
+        children: [
+          d ? h : g,
+          t.tooltip !== !1 && /* @__PURE__ */ e(
+            F,
+            {
+              content: /* @__PURE__ */ e(
+                M,
+                {
+                  format: m,
+                  renderer: t.tooltip
+                }
+              ),
+              cursor: { fill: "var(--muted)" },
+              isAnimationActive: !1
+            }
+          ),
+          f.back,
+          c.map((v, b) => {
+            const N = n ? b === c.length - 1 : !0, O = d ? [0, 4, 4, 0] : [4, 4, 0, 0];
+            return /* @__PURE__ */ e(
+              Z,
               {
-                fill: u[n.categoryKey] === h ? "var(--color-chart-1)" : P
+                dataKey: v,
+                name: u(v),
+                stackId: n ? "stack" : void 0,
+                fill: x(v, b),
+                radius: N ? O : 0,
+                maxBarSize: 48,
+                isAnimationActive: !1,
+                children: o && t.data.map((w) => /* @__PURE__ */ e(
+                  X,
+                  {
+                    fill: w[t.categoryKey] === o ? "var(--color-chart-1)" : _
+                  },
+                  String(w[t.categoryKey])
+                ))
               },
-              String(u[n.categoryKey])
-            ))
-          },
-          x
-        );
-      }),
-      s.front
-    ] }) });
+              v
+            );
+          }),
+          f.front
+        ]
+      }
+    ) });
   }
 );
-Fe.displayName = "BarChart";
-const U = N.forwardRef(
-  ({ height: t = 280, lineKeys: r, dualAxis: a = !1, stacked: n = !1, forecastKeys: i, className: l, ...o }, s) => {
-    const { names: f, format: d, layers: v, legendItems: c, furniture: h, colorFor: x, labelFor: p } = I(o), m = f.filter((u) => !r.includes(u));
-    return /* @__PURE__ */ e(S, { ref: s, className: l, height: t, legendItems: c, hovered: v.hovered, format: d, children: /* @__PURE__ */ g(ee, { data: o.data, margin: O, barCategoryGap: "24%", children: [
-      h,
+$e.displayName = "BarChart";
+const ee = k.forwardRef(
+  ({ height: r = 280, lineKeys: n, dualAxis: a = !1, stacked: i = !1, forecastKeys: t, className: s, ...c }, m) => {
+    const { names: f, format: l, layers: g, legendItems: x, furniture: u, colorFor: d, labelFor: p } = z(c), h = f.filter((o) => !n.includes(o));
+    return /* @__PURE__ */ e(D, { ref: m, className: s, height: r, legendItems: x, hovered: g.hovered, format: l, children: /* @__PURE__ */ y(oe, { data: c.data, margin: j, barCategoryGap: "24%", children: [
+      u,
       a && /* @__PURE__ */ e(
-        D,
+        I,
         {
           yAxisId: "right",
           orientation: "right",
@@ -390,232 +509,294 @@ const U = N.forwardRef(
           axisLine: !1,
           tickLine: !1,
           tickMargin: 6,
-          tick: /* @__PURE__ */ e(L, { anchor: "start", dy: "0.32em", format: d })
+          tick: /* @__PURE__ */ e(
+            T,
+            {
+              anchor: "start",
+              dy: "0.32em",
+              format: (o) => typeof o == "number" ? l(o) : o
+            }
+          )
         }
       ),
-      /* @__PURE__ */ e(
-        C,
+      c.tooltip !== !1 && /* @__PURE__ */ e(
+        F,
         {
-          content: /* @__PURE__ */ e(y, { format: d }),
+          content: /* @__PURE__ */ e(
+            M,
+            {
+              format: l,
+              renderer: c.tooltip
+            }
+          ),
           cursor: { fill: "var(--muted)" },
           isAnimationActive: !1
         }
       ),
-      v.back,
-      m.map((u) => {
-        const b = f.indexOf(u), A = n ? u === m[m.length - 1] : !0;
+      g.back,
+      h.map((o) => {
+        const v = f.indexOf(o), b = i ? o === h[h.length - 1] : !0;
         return /* @__PURE__ */ e(
-          G,
+          Z,
           {
-            dataKey: u,
-            name: p(u),
-            stackId: n ? "stack" : void 0,
-            fill: x(u, b),
-            radius: A ? [4, 4, 0, 0] : 0,
+            dataKey: o,
+            name: p(o),
+            stackId: i ? "stack" : void 0,
+            fill: d(o, v),
+            radius: b ? [4, 4, 0, 0] : 0,
             maxBarSize: 48,
             isAnimationActive: !1
           },
-          u
+          o
         );
       }),
-      r.map((u) => {
-        const b = f.indexOf(u);
+      n.map((o) => {
+        const v = f.indexOf(o);
         return /* @__PURE__ */ e(
-          z,
+          U,
           {
-            dataKey: u,
-            name: p(u),
+            dataKey: o,
+            name: p(o),
             yAxisId: a ? "right" : void 0,
             type: "natural",
-            stroke: x(u, b),
+            stroke: d(o, v),
             strokeWidth: 2,
-            strokeDasharray: i != null && i.includes(u) ? "6 4" : void 0,
+            strokeDasharray: t != null && t.includes(o) ? "6 4" : void 0,
             dot: !1,
             activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
             isAnimationActive: !1
           },
-          u
+          o
         );
       }),
-      v.front
+      g.front
     ] }) });
   }
 );
-U.displayName = "ComboChart";
-const Se = N.forwardRef(
-  (t, r) => /* @__PURE__ */ e(U, { ref: r, ...t })
+ee.displayName = "ComboChart";
+const De = k.forwardRef(
+  (r, n) => /* @__PURE__ */ e(ee, { ref: n, ...r })
 );
-Se.displayName = "ComposedChart";
-function Le({
-  active: t,
-  payload: r,
-  labelKey: a,
-  format: n
-}) {
-  var o;
-  if (!t || !(r != null && r.length)) return null;
-  const i = (o = r[0]) == null ? void 0 : o.payload, l = a && i ? i[a] : void 0;
-  return /* @__PURE__ */ g("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background", children: [
-    l != null && /* @__PURE__ */ e("div", { className: "mb-1 text-xs font-medium tracking-wide uppercase text-background/60", children: l }),
-    r.map((s, f) => /* @__PURE__ */ g("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ e("span", { className: "text-background/70", children: s.name }),
-      /* @__PURE__ */ e("span", { className: "ml-auto pl-3 font-medium tabular-nums", children: typeof s.value == "number" ? n(s.value) : String(s.value ?? "") })
-    ] }, f))
-  ] });
-}
-const Oe = N.forwardRef(
-  ({ data: t, xKey: r, yKey: a, labelKey: n, annotations: i, height: l = 280, grid: o = !0, showYAxis: s = !0, formatValue: f, className: d }, v) => {
-    const c = f ?? w, h = Y(i);
-    return /* @__PURE__ */ e(S, { ref: v, className: d, height: l, legendItems: null, hovered: h.hovered, format: c, children: /* @__PURE__ */ g(te, { margin: O, children: [
-      o && /* @__PURE__ */ e(E, { vertical: !1, stroke: "var(--border)" }),
+De.displayName = "ComposedChart";
+const je = k.forwardRef(
+  ({
+    data: r,
+    xKey: n,
+    yKey: a,
+    labelKey: i,
+    annotations: t,
+    height: s = 280,
+    grid: c = !0,
+    showYAxis: m = !0,
+    formatValue: f,
+    xScale: l = "number",
+    xDomain: g,
+    yDomain: x,
+    xTickFormatter: u,
+    yTickFormatter: d,
+    yAxisWidth: p = 44,
+    tooltip: h,
+    className: o
+  }, v) => {
+    const b = f ?? L, N = u ?? ((A) => typeof A == "number" ? L(A) : A), O = d ?? ((A) => typeof A == "number" ? b(A) : A), w = K(t);
+    return /* @__PURE__ */ e(D, { ref: v, className: o, height: s, legendItems: null, hovered: w.hovered, format: b, children: /* @__PURE__ */ y(le, { margin: j, children: [
+      c && /* @__PURE__ */ e(Y, { vertical: !1, stroke: "var(--border)" }),
       /* @__PURE__ */ e(
-        _,
+        H,
         {
           type: "number",
-          dataKey: r,
-          domain: ["auto", "auto"],
+          dataKey: n,
+          scale: l === "time" ? "time" : "auto",
+          domain: g ?? (l === "time" ? ["dataMin", "dataMax"] : ["auto", "auto"]),
+          allowDataOverflow: !!g,
           axisLine: !1,
           tickLine: !1,
           minTickGap: 28,
           tickMargin: 10,
-          tick: /* @__PURE__ */ e(L, { anchor: "middle", dy: 0, format: w })
+          tick: /* @__PURE__ */ e(T, { anchor: "middle", dy: 0, format: N })
         }
       ),
-      s && /* @__PURE__ */ e(
-        D,
+      m && /* @__PURE__ */ e(
+        I,
         {
           type: "number",
           dataKey: a,
-          width: 44,
+          width: p,
+          domain: x,
+          allowDataOverflow: !!x,
           axisLine: !1,
           tickLine: !1,
           tickMargin: 6,
-          tick: /* @__PURE__ */ e(L, { anchor: "end", dy: "0.32em", format: c })
+          tick: /* @__PURE__ */ e(T, { anchor: "end", dy: "0.32em", format: O })
         }
       ),
-      /* @__PURE__ */ e(
-        C,
+      h !== !1 && /* @__PURE__ */ e(
+        F,
         {
-          content: /* @__PURE__ */ e(Le, { labelKey: n, format: c }),
+          content: /* @__PURE__ */ e(
+            M,
+            {
+              format: b,
+              labelKey: i,
+              renderer: h
+            }
+          ),
           cursor: { stroke: "var(--border-strong)", strokeDasharray: "4 4" },
           isAnimationActive: !1
         }
       ),
-      h.back,
+      w.back,
       /* @__PURE__ */ e(
-        re,
+        se,
         {
-          data: t,
+          data: r,
           fill: "var(--color-chart-1)",
-          shape: (x) => /* @__PURE__ */ e("circle", { cx: x.cx, cy: x.cy, r: 4.5, fill: "var(--color-chart-1)", fillOpacity: 0.75 }),
+          shape: (A) => /* @__PURE__ */ e("circle", { cx: A.cx, cy: A.cy, r: 4.5, fill: "var(--color-chart-1)", fillOpacity: 0.75 }),
           isAnimationActive: !1
         }
       ),
-      h.front
+      w.front
     ] }) });
   }
 );
-Oe.displayName = "ScatterChart";
-const $e = N.forwardRef(
-  ({ data: t, nameKey: r, valueKey: a, donut: n = !0, centerLabel: i, highlight: l, height: o = 260, legend: s = !0, formatValue: f, className: d }, v) => {
-    const c = f ?? w, h = t.reduce((m, u) => m + (typeof u[a] == "number" ? u[a] : 0), 0), x = (m, u) => l ? m === l ? "var(--color-chart-1)" : M(Math.min(u + 3, j.length - 1)) : M(u), p = s ? t.map((m, u) => ({
-      label: `${m[r]} · ${h ? Math.round(Number(m[a]) / h * 100) : 0}%`,
-      color: x(String(m[r]), u)
+je.displayName = "ScatterChart";
+const Ie = k.forwardRef(
+  ({
+    data: r,
+    nameKey: n,
+    valueKey: a,
+    donut: i = !0,
+    centerLabel: t,
+    highlight: s,
+    height: c = 260,
+    legend: m = !0,
+    formatValue: f,
+    tooltip: l,
+    className: g
+  }, x) => {
+    const u = f ?? L, d = r.reduce((o, v) => o + (typeof v[a] == "number" ? v[a] : 0), 0), p = (o, v) => s ? o === s ? "var(--color-chart-1)" : B(Math.min(v + 3, E.length - 1)) : B(v), h = m ? r.map((o, v) => ({
+      label: `${o[n]} · ${d ? Math.round(Number(o[a]) / d * 100) : 0}%`,
+      color: p(String(o[n]), v)
     })) : null;
-    return /* @__PURE__ */ g("div", { ref: v, className: k("relative w-full font-sans", d), children: [
-      p && /* @__PURE__ */ e($, { items: p }),
-      /* @__PURE__ */ g("div", { className: "relative", children: [
-        /* @__PURE__ */ e(F, { width: "100%", height: o, children: /* @__PURE__ */ g(ae, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
-          /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(y, { format: c }), isAnimationActive: !1 }),
+    return /* @__PURE__ */ y("div", { ref: x, className: C("relative w-full font-sans", g), children: [
+      h && /* @__PURE__ */ e(W, { items: h }),
+      /* @__PURE__ */ y("div", { className: "relative", children: [
+        /* @__PURE__ */ e($, { width: "100%", height: c, children: /* @__PURE__ */ y(ce, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+          l !== !1 && /* @__PURE__ */ e(
+            F,
+            {
+              content: /* @__PURE__ */ e(
+                M,
+                {
+                  format: u,
+                  renderer: l
+                }
+              ),
+              isAnimationActive: !1
+            }
+          ),
           /* @__PURE__ */ e(
-            ne,
+            de,
             {
-              data: t,
+              data: r,
               dataKey: a,
-              nameKey: r,
-              innerRadius: n ? "62%" : 0,
+              nameKey: n,
+              innerRadius: i ? "62%" : 0,
               outerRadius: "88%",
-              paddingAngle: n ? 2 : 1,
-              cornerRadius: n ? 4 : 2,
+              paddingAngle: i ? 2 : 1,
+              cornerRadius: i ? 4 : 2,
               stroke: "none",
               isAnimationActive: !1,
-              children: t.map((m, u) => /* @__PURE__ */ e(W, { fill: x(String(m[r]), u) }, String(m[r])))
+              children: r.map((o, v) => /* @__PURE__ */ e(X, { fill: p(String(o[n]), v) }, String(o[n])))
             }
           )
         ] }) }),
-        n && /* @__PURE__ */ g("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ e("div", { className: "text-xl font-bold text-foreground tabular-nums", children: c(h) }),
-          i && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: i })
+        i && /* @__PURE__ */ y("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ e("div", { className: "text-xl font-bold text-foreground tabular-nums", children: u(d) }),
+          t && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: t })
         ] })
       ] })
     ] });
   }
 );
-$e.displayName = "PieChart";
-const Ie = N.forwardRef(
+Ie.displayName = "PieChart";
+const We = k.forwardRef(
   ({
-    data: t,
-    categoryKey: r,
+    data: r,
+    categoryKey: n,
     series: a,
-    seriesLabels: n,
-    highlight: i,
-    maxValue: l,
-    height: o = 300,
-    legend: s,
+    seriesLabels: i,
+    highlight: t,
+    maxValue: s,
+    height: c = 300,
+    legend: m,
     formatValue: f,
-    className: d
-  }, v) => {
-    const c = N.useMemo(
-      () => a ?? X(t, r),
-      [r, t, a]
-    ), h = f ?? w, x = l ?? Math.max(
+    tooltip: l,
+    className: g
+  }, x) => {
+    const u = k.useMemo(
+      () => a ?? Q(r, n),
+      [n, r, a]
+    ), d = f ?? L, p = s ?? Math.max(
       1,
-      ...t.flatMap(
-        (b) => c.map(
-          (A) => typeof b[A] == "number" ? b[A] : 0
+      ...r.flatMap(
+        (b) => u.map(
+          (N) => typeof b[N] == "number" ? b[N] : 0
         )
       )
-    ), p = (b) => (n == null ? void 0 : n[b]) ?? b, m = (b, A) => i && c.includes(i) ? b === i ? "var(--color-chart-1)" : P : V(A), u = s ?? c.length > 1 ? c.map((b, A) => ({ label: p(b), color: m(b, A) })) : null;
-    return /* @__PURE__ */ g("div", { ref: v, className: k("relative w-full font-sans", d), children: [
-      u && /* @__PURE__ */ e($, { items: u, align: "center" }),
-      /* @__PURE__ */ e("div", { className: "mx-auto w-full max-w-[520px]", children: /* @__PURE__ */ e(F, { width: "100%", height: o, children: /* @__PURE__ */ g(
-        ie,
+    ), h = (b) => (i == null ? void 0 : i[b]) ?? b, o = (b, N) => t && u.includes(t) ? b === t ? "var(--color-chart-1)" : _ : J(N), v = m ?? u.length > 1 ? u.map((b, N) => ({ label: h(b), color: o(b, N) })) : null;
+    return /* @__PURE__ */ y("div", { ref: x, className: C("relative w-full font-sans", g), children: [
+      v && /* @__PURE__ */ e(W, { items: v, align: "center" }),
+      /* @__PURE__ */ e("div", { className: "mx-auto w-full max-w-[520px]", children: /* @__PURE__ */ e($, { width: "100%", height: c, children: /* @__PURE__ */ y(
+        me,
         {
-          data: t,
+          data: r,
           cx: "50%",
           cy: "52%",
           outerRadius: "68%",
           margin: { top: 10, right: 56, bottom: 16, left: 56 },
           children: [
-            /* @__PURE__ */ e(le, { stroke: "var(--border)", radialLines: !0 }),
+            /* @__PURE__ */ e(fe, { stroke: "var(--border)", radialLines: !0 }),
             /* @__PURE__ */ e(
-              H,
+              q,
               {
-                dataKey: r,
+                dataKey: n,
                 tick: { fill: "var(--text-secondary)", fontSize: 11, fontWeight: 500 }
               }
             ),
             /* @__PURE__ */ e(
-              oe,
+              ue,
               {
                 angle: 90,
-                domain: [0, x],
+                domain: [0, p],
                 tick: !1,
                 axisLine: !1,
                 tickLine: !1
               }
             ),
-            /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(y, { format: h }), isAnimationActive: !1 }),
-            c.map((b, A) => /* @__PURE__ */ e(
-              se,
+            l !== !1 && /* @__PURE__ */ e(
+              F,
+              {
+                content: /* @__PURE__ */ e(
+                  M,
+                  {
+                    format: d,
+                    renderer: l
+                  }
+                ),
+                isAnimationActive: !1
+              }
+            ),
+            u.map((b, N) => /* @__PURE__ */ e(
+              he,
               {
                 dataKey: b,
-                name: p(b),
-                stroke: m(b, A),
-                fill: m(b, A),
-                fillOpacity: i ? b === i ? 0.16 : 0.05 : 0.1,
+                name: h(b),
+                stroke: o(b, N),
+                fill: o(b, N),
+                fillOpacity: t ? b === t ? 0.16 : 0.05 : 0.1,
                 strokeWidth: 2,
-                dot: { r: 2.5, fill: m(b, A), strokeWidth: 0 },
+                dot: { r: 2.5, fill: o(b, N), strokeWidth: 0 },
                 isAnimationActive: !1
               },
               b
@@ -626,46 +807,59 @@ const Ie = N.forwardRef(
     ] });
   }
 );
-Ie.displayName = "RadarChart";
-const Te = N.forwardRef(
+We.displayName = "RadarChart";
+const ze = k.forwardRef(
   ({
-    data: t,
-    nameKey: r,
+    data: r,
+    nameKey: n,
     valueKey: a,
-    maxValue: n = 100,
-    centerLabel: i,
-    height: l = 280,
-    legend: o = !0,
-    formatValue: s,
-    className: f
-  }, d) => {
-    const v = s ?? w, c = t.map((p, m) => ({
-      ...p,
-      name: String(p[r]),
-      fill: M(m)
-    })), h = c.length ? c.reduce(
-      (p, m) => p + (typeof m[a] == "number" ? m[a] : 0),
+    maxValue: i = 100,
+    centerLabel: t,
+    height: s = 280,
+    legend: c = !0,
+    formatValue: m,
+    tooltip: f,
+    className: l
+  }, g) => {
+    const x = m ?? L, u = r.map((h, o) => ({
+      ...h,
+      name: String(h[n]),
+      fill: B(o)
+    })), d = u.length ? u.reduce(
+      (h, o) => h + (typeof o[a] == "number" ? o[a] : 0),
       0
-    ) / c.length : 0, x = o ? c.map((p, m) => ({
-      label: String(p[r]),
-      color: M(m)
+    ) / u.length : 0, p = c ? u.map((h, o) => ({
+      label: String(h[n]),
+      color: B(o)
     })) : null;
-    return /* @__PURE__ */ g("div", { ref: d, className: k("relative w-full font-sans", f), children: [
-      /* @__PURE__ */ g("div", { className: "relative mx-auto w-full max-w-[420px]", children: [
-        /* @__PURE__ */ e(F, { width: "100%", height: l, children: /* @__PURE__ */ g(
-          ce,
+    return /* @__PURE__ */ y("div", { ref: g, className: C("relative w-full font-sans", l), children: [
+      /* @__PURE__ */ y("div", { className: "relative mx-auto w-full max-w-[420px]", children: [
+        /* @__PURE__ */ e($, { width: "100%", height: s, children: /* @__PURE__ */ y(
+          xe,
           {
-            data: c,
+            data: u,
             innerRadius: "48%",
             outerRadius: "82%",
             startAngle: 90,
             endAngle: -270,
             margin: { top: 6, right: 6, bottom: 6, left: 6 },
             children: [
-              /* @__PURE__ */ e(H, { type: "number", domain: [0, n], tick: !1 }),
-              /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(y, { format: v }), isAnimationActive: !1 }),
+              /* @__PURE__ */ e(q, { type: "number", domain: [0, i], tick: !1 }),
+              f !== !1 && /* @__PURE__ */ e(
+                F,
+                {
+                  content: /* @__PURE__ */ e(
+                    M,
+                    {
+                      format: x,
+                      renderer: f
+                    }
+                  ),
+                  isAnimationActive: !1
+                }
+              ),
               /* @__PURE__ */ e(
-                de,
+                ve,
                 {
                   dataKey: a,
                   background: { fill: "var(--muted)" },
@@ -677,71 +871,71 @@ const Te = N.forwardRef(
             ]
           }
         ) }),
-        /* @__PURE__ */ g("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ e("div", { className: "text-xl font-bold text-foreground tabular-nums", children: v(Math.round(h)) }),
-          i && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: i })
+        /* @__PURE__ */ y("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ e("div", { className: "text-xl font-bold text-foreground tabular-nums", children: x(Math.round(d)) }),
+          t && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: t })
         ] })
       ] }),
-      x && /* @__PURE__ */ e($, { items: x, align: "center", className: "mb-0 mt-3" })
+      p && /* @__PURE__ */ e(W, { items: p, align: "center", className: "mb-0 mt-3" })
     ] });
   }
 );
-Te.displayName = "RadialBarChart";
-function je({
-  x: t = 0,
-  y: r = 0,
+ze.displayName = "RadialBarChart";
+function Pe({
+  x: r = 0,
+  y: n = 0,
   width: a = 0,
-  height: n = 0,
-  depth: i = 0,
-  index: l = 0,
-  name: o,
-  value: s,
-  format: f = w
+  height: i = 0,
+  depth: t = 0,
+  index: s = 0,
+  name: c,
+  value: m,
+  format: f = L
 }) {
-  if (i === 0) return /* @__PURE__ */ e("g", {});
-  const d = i === 0 ? "transparent" : M(l), v = i > 0 && l < 4, c = a > 72 && n > 38;
-  return /* @__PURE__ */ g("g", { children: [
+  if (t === 0) return /* @__PURE__ */ e("g", {});
+  const l = t === 0 ? "transparent" : B(s), g = t > 0 && s < 4, x = a > 72 && i > 38;
+  return /* @__PURE__ */ y("g", { children: [
     /* @__PURE__ */ e(
       "rect",
       {
-        x: t,
-        y: r,
+        x: r,
+        y: n,
         width: a,
-        height: n,
+        height: i,
         rx: 6,
         ry: 6,
-        fill: d,
+        fill: l,
         stroke: "var(--background)",
         strokeWidth: 4
       }
     ),
-    c && /* @__PURE__ */ e(
+    x && /* @__PURE__ */ e(
       "foreignObject",
       {
-        x: t + 8,
-        y: r + 8,
+        x: r + 8,
+        y: n + 8,
         width: Math.max(0, a - 16),
-        height: Math.max(0, n - 16),
+        height: Math.max(0, i - 16),
         className: "pointer-events-none overflow-hidden",
-        children: /* @__PURE__ */ g("div", { className: "flex h-full flex-col justify-between", children: [
+        children: /* @__PURE__ */ y("div", { className: "flex h-full flex-col justify-between", children: [
           /* @__PURE__ */ e(
             "p",
             {
-              className: k(
+              className: C(
                 "truncate text-xs font-semibold",
-                v ? "text-background" : "text-foreground"
+                g ? "text-background" : "text-foreground"
               ),
-              children: o
+              children: c
             }
           ),
-          typeof s == "number" && n > 58 && /* @__PURE__ */ e(
+          typeof m == "number" && i > 58 && /* @__PURE__ */ e(
             "p",
             {
-              className: k(
+              className: C(
                 "text-xs tabular-nums",
-                v ? "text-background/70" : "text-tertiary"
+                g ? "text-background/70" : "text-tertiary"
               ),
-              children: f(s)
+              children: f(m)
             }
           )
         ] })
@@ -749,93 +943,160 @@ function je({
     )
   ] });
 }
-function Be(t, r, a) {
-  const n = [], i = (l) => {
-    const o = Array.isArray(l.children) ? l.children : void 0;
-    if (o != null && o.length) {
-      o.forEach(i);
+function Ge(r, n, a) {
+  const i = [], t = (s) => {
+    const c = Array.isArray(s.children) ? s.children : void 0;
+    if (c != null && c.length) {
+      c.forEach(t);
       return;
     }
-    typeof l[a] == "number" && n.push({
-      ...l,
-      name: String(l[r] ?? ""),
-      value: l[a]
+    typeof s[a] == "number" && i.push({
+      ...s,
+      name: String(s[n] ?? ""),
+      value: s[a]
     });
   };
-  return t.forEach(i), n.length ? n : t;
+  return r.forEach(t), i.length ? i : r;
 }
-const We = N.forwardRef(
-  ({ data: t, nameKey: r, valueKey: a, height: n = 280, formatValue: i, className: l }, o) => {
-    const s = i ?? w, f = N.useMemo(
-      () => Be(t, r, a),
-      [t, r, a]
+const Ee = k.forwardRef(
+  ({
+    data: r,
+    nameKey: n,
+    valueKey: a,
+    height: i = 280,
+    formatValue: t,
+    tooltip: s,
+    className: c
+  }, m) => {
+    const f = t ?? L, l = k.useMemo(
+      () => Ge(r, n, a),
+      [r, n, a]
     );
-    return /* @__PURE__ */ e("div", { ref: o, className: k("relative w-full font-sans", l), children: /* @__PURE__ */ e(F, { width: "100%", height: n, children: /* @__PURE__ */ e(
-      me,
+    return /* @__PURE__ */ e("div", { ref: m, className: C("relative w-full font-sans", c), children: /* @__PURE__ */ e($, { width: "100%", height: i, children: /* @__PURE__ */ e(
+      ge,
       {
-        data: f,
-        nameKey: r,
+        data: l,
+        nameKey: n,
         dataKey: a,
         type: "flat",
         aspectRatio: 1.6,
-        content: /* @__PURE__ */ e(je, { format: s }),
+        content: /* @__PURE__ */ e(Pe, { format: f }),
         isAnimationActive: !1,
-        children: /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(y, { format: s }), isAnimationActive: !1 })
+        children: s !== !1 && /* @__PURE__ */ e(
+          F,
+          {
+            content: /* @__PURE__ */ e(
+              M,
+              {
+                format: f,
+                renderer: s
+              }
+            ),
+            isAnimationActive: !1
+          }
+        )
       }
     ) }) });
   }
 );
-We.displayName = "TreemapChart";
-const De = N.forwardRef(
-  ({ data: t, nameKey: r, valueKey: a, height: n = 280, formatValue: i, className: l }, o) => {
-    var v;
-    const s = i ?? w, f = Number(((v = t[0]) == null ? void 0 : v[a]) ?? 0), d = (c) => {
-      const h = c.index ?? 0, x = t[h];
-      if (!x) return /* @__PURE__ */ e("g", {});
-      const p = Number(x[a]), m = f ? Math.round(p / f * 100) : 0;
-      return /* @__PURE__ */ g(
+Ee.displayName = "TreemapChart";
+const Ve = k.forwardRef(
+  ({
+    data: r,
+    nameKey: n,
+    valueKey: a,
+    height: i = 280,
+    formatValue: t,
+    label: s,
+    labelWidth: c = 176,
+    tooltip: m,
+    className: f
+  }, l) => {
+    var d;
+    const g = t ?? L, x = Number(((d = r[0]) == null ? void 0 : d[a]) ?? 0), u = (p) => {
+      var A;
+      const h = p.index ?? 0, o = r[h];
+      if (!o) return /* @__PURE__ */ e("g", {});
+      const v = Number(o[a]), b = Number(((A = r[h - 1]) == null ? void 0 : A[a]) ?? v), N = x ? v / x * 100 : 0, O = b ? v / b * 100 : 0, w = {
+        datum: o,
+        index: h,
+        name: String(o[n]),
+        value: v,
+        conversionFromFirst: N,
+        conversionFromPrevious: O,
+        dropOffFromPrevious: h === 0 ? 0 : 100 - O,
+        x: Number(p.x ?? 0),
+        y: Number(p.y ?? 0),
+        width: Number(p.width ?? 0),
+        height: Number(p.height ?? 0),
+        formatValue: g
+      };
+      return s === !1 ? /* @__PURE__ */ e("g", {}) : s ? /* @__PURE__ */ e(G, { children: s(w) }) : /* @__PURE__ */ y(
         "text",
         {
-          x: Number(c.x ?? 0) + Number(c.width ?? 0) + 12,
-          y: Number(c.y ?? 0) + Number(c.height ?? 0) / 2,
+          x: w.x + w.width + 12,
+          y: w.y + w.height / 2,
           dy: "0.32em",
           textAnchor: "start",
           className: "text-xs",
           children: [
-            /* @__PURE__ */ e("tspan", { className: "fill-primary font-medium", children: String(x[r]) }),
-            /* @__PURE__ */ g("tspan", { className: "fill-secondary", children: [
+            /* @__PURE__ */ e("tspan", { className: "fill-primary font-medium", children: w.name }),
+            /* @__PURE__ */ y("tspan", { className: "fill-secondary", children: [
               " · ",
-              s(p)
+              g(v)
             ] }),
-            /* @__PURE__ */ g("tspan", { className: "fill-tertiary", children: [
+            /* @__PURE__ */ y("tspan", { className: "fill-tertiary", children: [
               " · ",
-              m,
+              Math.round(N),
               "%"
             ] })
           ]
         }
       );
     };
-    return /* @__PURE__ */ e("div", { ref: o, className: k("relative w-full font-sans", l), children: /* @__PURE__ */ e(F, { width: "100%", height: n, children: /* @__PURE__ */ g(fe, { margin: { top: 8, right: 176, bottom: 8, left: 8 }, children: [
-      /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(y, { format: s }), isAnimationActive: !1 }),
-      /* @__PURE__ */ g(ue, { data: t, dataKey: a, nameKey: r, isAnimationActive: !1, children: [
-        t.map((c, h) => /* @__PURE__ */ e(W, { fill: M(h) }, String(c[r]))),
-        /* @__PURE__ */ e(he, { position: "right", content: d })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ e("div", { ref: l, className: C("relative w-full font-sans", f), children: /* @__PURE__ */ e($, { width: "100%", height: i, children: /* @__PURE__ */ y(
+      be,
+      {
+        margin: {
+          top: 8,
+          right: s === !1 ? 8 : c,
+          bottom: 8,
+          left: 8
+        },
+        children: [
+          m !== !1 && /* @__PURE__ */ e(
+            F,
+            {
+              content: /* @__PURE__ */ e(
+                M,
+                {
+                  format: g,
+                  renderer: m
+                }
+              ),
+              isAnimationActive: !1
+            }
+          ),
+          /* @__PURE__ */ y(pe, { data: r, dataKey: a, nameKey: n, isAnimationActive: !1, children: [
+            r.map((p, h) => /* @__PURE__ */ e(X, { fill: B(h) }, String(p[n]))),
+            /* @__PURE__ */ e(ye, { position: "right", content: u })
+          ] })
+        ]
+      }
+    ) }) });
   }
 );
-De.displayName = "FunnelChart";
+Ve.displayName = "FunnelChart";
 export {
-  Me as AreaChart,
-  Fe as BarChart,
-  U as ComboChart,
-  Se as ComposedChart,
-  De as FunnelChart,
-  Re as LineChart,
-  $e as PieChart,
-  Ie as RadarChart,
-  Te as RadialBarChart,
-  Oe as ScatterChart,
-  We as TreemapChart
+  Be as AreaChart,
+  $e as BarChart,
+  ee as ComboChart,
+  De as ComposedChart,
+  Ve as FunnelChart,
+  Te as LineChart,
+  Ie as PieChart,
+  We as RadarChart,
+  ze as RadialBarChart,
+  je as ScatterChart,
+  Ee as TreemapChart
 };