@actioneer/ads 0.1.0

package/components/chart.js

@@ -0,0 +1,841 @@
+"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 = [
+  "var(--color-ink-950)",
+  "var(--color-ink-700)",
+  "var(--color-ink-500)",
+  "var(--color-ink-400)",
+  "var(--color-ink-300)",
+  "var(--color-ink-200)",
+  "var(--color-ink-100)"
+], M = (t) => j[t % j.length], P = "var(--color-chart-3)", R = {
+  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) => {
+  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);
+  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 y({
+  active: t,
+  payload: r,
+  label: a,
+  format: n
+}) {
+  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 })
+      ] }),
+      /* @__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))
+  ] });
+}
+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 }) }) });
+}
+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 we({
+  cx: t,
+  cy: r,
+  n: a,
+  ann: n,
+  onEnter: i,
+  onLeave: l
+}) {
+  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(
+    "g",
+    {
+      tabIndex: 0,
+      role: "img",
+      "aria-label": `Annotation ${a}: ${n.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,
+      onFocus: () => {
+        s(!0), f();
+      },
+      onBlur: () => {
+        s(!1), d();
+      },
+      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 }),
+        /* @__PURE__ */ e(
+          "text",
+          {
+            x: t,
+            y: r,
+            dy: "0.35em",
+            textAnchor: "middle",
+            className: "pointer-events-none fill-brand-foreground text-xs font-bold select-none",
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}
+function ye({ hovered: t, frameWidth: r, format: a }) {
+  return /* @__PURE__ */ e(pe, { reducedMotion: "user", children: /* @__PURE__ */ e(be, { children: t && /* @__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
+      },
+      children: /* @__PURE__ */ g(
+        Ne.div,
+        {
+          variants: Ae,
+          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__ */ 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
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-foreground", children: t.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,
+              " · ",
+              a(t.ann.y)
+            ] })
+          ]
+        }
+      )
+    }
+  ) }) });
+}
+function Y(t) {
+  const [r, a] = N.useState(null), n = N.useCallback(() => a(null), []), { back: i, front: l } = N.useMemo(() => {
+    const o = [], s = [];
+    let f = 0;
+    return (t ?? []).forEach((d, v) => {
+      const c = d.color ?? "primary";
+      if (d.kind === "band") {
+        const h = d.axis ?? "y";
+        o.push(
+          /* @__PURE__ */ e(
+            xe,
+            {
+              ...h === "y" ? { y1: d.from, y2: d.to } : { x1: d.from, x2: d.to },
+              fill: R[c].ref,
+              fillOpacity: 0.06,
+              stroke: "none",
+              ifOverflow: h === "y" ? "extendDomain" : "visible",
+              label: d.label ? /* @__PURE__ */ e(Ce, { label: d.label, color: c }) : void 0
+            },
+            `ann-${v}`
+          )
+        );
+      } else if (d.kind === "line") {
+        const h = d.axis ?? "y";
+        s.push(
+          /* @__PURE__ */ e(
+            ge,
+            {
+              ...h === "y" ? { y: d.value } : { x: d.value },
+              stroke: R[c].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
+            },
+            `ann-${v}`
+          )
+        );
+      } else {
+        f += 1;
+        const h = f;
+        s.push(
+          /* @__PURE__ */ e(
+            ve,
+            {
+              x: d.x,
+              y: d.y,
+              ifOverflow: "visible",
+              shape: (x) => /* @__PURE__ */ e(we, { cx: x.cx, cy: x.cy, n: h, ann: d, onEnter: a, onLeave: n })
+            },
+            `ann-${v}`
+          )
+        );
+      }
+    }), { back: o, front: s };
+  }, [t, n]);
+  return { back: i, front: l, hovered: r };
+}
+function $({
+  items: t,
+  align: r = "end",
+  className: a
+}) {
+  const n = {
+    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)) });
+}
+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 })
+    ] });
+  }
+);
+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,
+    /* @__PURE__ */ e(
+      _,
+      {
+        dataKey: a,
+        axisLine: !1,
+        tickLine: !1,
+        minTickGap: 28,
+        tickMargin: 10,
+        tick: /* @__PURE__ */ e(L, { anchor: "middle", dy: 0 })
+      },
+      "x"
+    ),
+    d ? /* @__PURE__ */ e(
+      D,
+      {
+        width: 44,
+        axisLine: !1,
+        tickLine: !1,
+        tickMargin: 6,
+        tick: /* @__PURE__ */ e(L, { anchor: "end", dy: "0.32em", format: h })
+      },
+      "y"
+    ) : null
+  ], colorFor: p, labelFor: m };
+}
+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,
+        {
+          content: /* @__PURE__ */ e(y, { format: s }),
+          cursor: { stroke: "var(--border-strong)" },
+          isAnimationActive: !1
+        }
+      ),
+      f.back,
+      o.map((x, p) => /* @__PURE__ */ e(
+        z,
+        {
+          dataKey: x,
+          name: h(x),
+          type: r,
+          stroke: c(x, p),
+          strokeWidth: 2,
+          strokeDasharray: a != null && a.includes(x) ? "6 4" : void 0,
+          dot: !1,
+          activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
+          isAnimationActive: !1
+        },
+        x
+      )),
+      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,
+        {
+          content: /* @__PURE__ */ e(y, { format: f }),
+          cursor: { stroke: "var(--border-strong)" },
+          isAnimationActive: !1
+        }
+      ),
+      d.back,
+      s.map((m, u) => /* @__PURE__ */ e(
+        Q,
+        {
+          dataKey: m,
+          name: x(m),
+          type: r,
+          stackId: a ? "stack" : void 0,
+          stroke: h(m, u),
+          strokeWidth: 2,
+          strokeDasharray: n != null && n.includes(m) ? "6 4" : void 0,
+          fill: `url(#${p}-${u})`,
+          activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
+          isAnimationActive: !1
+        },
+        m
+      )),
+      d.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,
+      /* @__PURE__ */ e(
+        C,
+        {
+          content: /* @__PURE__ */ e(y, { format: o }),
+          cursor: { fill: "var(--muted)" },
+          isAnimationActive: !1
+        }
+      ),
+      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,
+              {
+                fill: u[n.categoryKey] === h ? "var(--color-chart-1)" : P
+              },
+              String(u[n.categoryKey])
+            ))
+          },
+          x
+        );
+      }),
+      s.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,
+      a && /* @__PURE__ */ e(
+        D,
+        {
+          yAxisId: "right",
+          orientation: "right",
+          width: 44,
+          axisLine: !1,
+          tickLine: !1,
+          tickMargin: 6,
+          tick: /* @__PURE__ */ e(L, { anchor: "start", dy: "0.32em", format: d })
+        }
+      ),
+      /* @__PURE__ */ e(
+        C,
+        {
+          content: /* @__PURE__ */ e(y, { format: d }),
+          cursor: { fill: "var(--muted)" },
+          isAnimationActive: !1
+        }
+      ),
+      v.back,
+      m.map((u) => {
+        const b = f.indexOf(u), A = n ? u === m[m.length - 1] : !0;
+        return /* @__PURE__ */ e(
+          G,
+          {
+            dataKey: u,
+            name: p(u),
+            stackId: n ? "stack" : void 0,
+            fill: x(u, b),
+            radius: A ? [4, 4, 0, 0] : 0,
+            maxBarSize: 48,
+            isAnimationActive: !1
+          },
+          u
+        );
+      }),
+      r.map((u) => {
+        const b = f.indexOf(u);
+        return /* @__PURE__ */ e(
+          z,
+          {
+            dataKey: u,
+            name: p(u),
+            yAxisId: a ? "right" : void 0,
+            type: "natural",
+            stroke: x(u, b),
+            strokeWidth: 2,
+            strokeDasharray: i != null && i.includes(u) ? "6 4" : void 0,
+            dot: !1,
+            activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
+            isAnimationActive: !1
+          },
+          u
+        );
+      }),
+      v.front
+    ] }) });
+  }
+);
+U.displayName = "ComboChart";
+const Se = N.forwardRef(
+  (t, r) => /* @__PURE__ */ e(U, { ref: r, ...t })
+);
+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)" }),
+      /* @__PURE__ */ e(
+        _,
+        {
+          type: "number",
+          dataKey: r,
+          domain: ["auto", "auto"],
+          axisLine: !1,
+          tickLine: !1,
+          minTickGap: 28,
+          tickMargin: 10,
+          tick: /* @__PURE__ */ e(L, { anchor: "middle", dy: 0, format: w })
+        }
+      ),
+      s && /* @__PURE__ */ e(
+        D,
+        {
+          type: "number",
+          dataKey: a,
+          width: 44,
+          axisLine: !1,
+          tickLine: !1,
+          tickMargin: 6,
+          tick: /* @__PURE__ */ e(L, { anchor: "end", dy: "0.32em", format: c })
+        }
+      ),
+      /* @__PURE__ */ e(
+        C,
+        {
+          content: /* @__PURE__ */ e(Le, { labelKey: n, format: c }),
+          cursor: { stroke: "var(--border-strong)", strokeDasharray: "4 4" },
+          isAnimationActive: !1
+        }
+      ),
+      h.back,
+      /* @__PURE__ */ e(
+        re,
+        {
+          data: t,
+          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 }),
+          isAnimationActive: !1
+        }
+      ),
+      h.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)
+    })) : 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 }),
+          /* @__PURE__ */ e(
+            ne,
+            {
+              data: t,
+              dataKey: a,
+              nameKey: r,
+              innerRadius: n ? "62%" : 0,
+              outerRadius: "88%",
+              paddingAngle: n ? 2 : 1,
+              cornerRadius: n ? 4 : 2,
+              stroke: "none",
+              isAnimationActive: !1,
+              children: t.map((m, u) => /* @__PURE__ */ e(W, { fill: x(String(m[r]), u) }, String(m[r])))
+            }
+          )
+        ] }) }),
+        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 })
+        ] })
+      ] })
+    ] });
+  }
+);
+$e.displayName = "PieChart";
+const Ie = N.forwardRef(
+  ({
+    data: t,
+    categoryKey: r,
+    series: a,
+    seriesLabels: n,
+    highlight: i,
+    maxValue: l,
+    height: o = 300,
+    legend: s,
+    formatValue: f,
+    className: d
+  }, v) => {
+    const c = N.useMemo(
+      () => a ?? X(t, r),
+      [r, t, a]
+    ), h = f ?? w, x = l ?? Math.max(
+      1,
+      ...t.flatMap(
+        (b) => c.map(
+          (A) => typeof b[A] == "number" ? b[A] : 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,
+        {
+          data: t,
+          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(
+              H,
+              {
+                dataKey: r,
+                tick: { fill: "var(--text-secondary)", fontSize: 11, fontWeight: 500 }
+              }
+            ),
+            /* @__PURE__ */ e(
+              oe,
+              {
+                angle: 90,
+                domain: [0, x],
+                tick: !1,
+                axisLine: !1,
+                tickLine: !1
+              }
+            ),
+            /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(y, { format: h }), isAnimationActive: !1 }),
+            c.map((b, A) => /* @__PURE__ */ e(
+              se,
+              {
+                dataKey: b,
+                name: p(b),
+                stroke: m(b, A),
+                fill: m(b, A),
+                fillOpacity: i ? b === i ? 0.16 : 0.05 : 0.1,
+                strokeWidth: 2,
+                dot: { r: 2.5, fill: m(b, A), strokeWidth: 0 },
+                isAnimationActive: !1
+              },
+              b
+            ))
+          ]
+        }
+      ) }) })
+    ] });
+  }
+);
+Ie.displayName = "RadarChart";
+const Te = N.forwardRef(
+  ({
+    data: t,
+    nameKey: r,
+    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),
+      0
+    ) / c.length : 0, x = o ? c.map((p, m) => ({
+      label: String(p[r]),
+      color: M(m)
+    })) : 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,
+          {
+            data: c,
+            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(
+                de,
+                {
+                  dataKey: a,
+                  background: { fill: "var(--muted)" },
+                  cornerRadius: 999,
+                  maxBarSize: 18,
+                  isAnimationActive: !1
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__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 })
+        ] })
+      ] }),
+      x && /* @__PURE__ */ e($, { items: x, align: "center", className: "mb-0 mt-3" })
+    ] });
+  }
+);
+Te.displayName = "RadialBarChart";
+function je({
+  x: t = 0,
+  y: r = 0,
+  width: a = 0,
+  height: n = 0,
+  depth: i = 0,
+  index: l = 0,
+  name: o,
+  value: s,
+  format: f = w
+}) {
+  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: [
+    /* @__PURE__ */ e(
+      "rect",
+      {
+        x: t,
+        y: r,
+        width: a,
+        height: n,
+        rx: 6,
+        ry: 6,
+        fill: d,
+        stroke: "var(--background)",
+        strokeWidth: 4
+      }
+    ),
+    c && /* @__PURE__ */ e(
+      "foreignObject",
+      {
+        x: t + 8,
+        y: r + 8,
+        width: Math.max(0, a - 16),
+        height: Math.max(0, n - 16),
+        className: "pointer-events-none overflow-hidden",
+        children: /* @__PURE__ */ g("div", { className: "flex h-full flex-col justify-between", children: [
+          /* @__PURE__ */ e(
+            "p",
+            {
+              className: k(
+                "truncate text-xs font-semibold",
+                v ? "text-background" : "text-foreground"
+              ),
+              children: o
+            }
+          ),
+          typeof s == "number" && n > 58 && /* @__PURE__ */ e(
+            "p",
+            {
+              className: k(
+                "text-xs tabular-nums",
+                v ? "text-background/70" : "text-tertiary"
+              ),
+              children: f(s)
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+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);
+      return;
+    }
+    typeof l[a] == "number" && n.push({
+      ...l,
+      name: String(l[r] ?? ""),
+      value: l[a]
+    });
+  };
+  return t.forEach(i), n.length ? n : t;
+}
+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]
+    );
+    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,
+      {
+        data: f,
+        nameKey: r,
+        dataKey: a,
+        type: "flat",
+        aspectRatio: 1.6,
+        content: /* @__PURE__ */ e(je, { format: s }),
+        isAnimationActive: !1,
+        children: /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(y, { format: 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(
+        "text",
+        {
+          x: Number(c.x ?? 0) + Number(c.width ?? 0) + 12,
+          y: Number(c.y ?? 0) + Number(c.height ?? 0) / 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: [
+              " · ",
+              s(p)
+            ] }),
+            /* @__PURE__ */ g("tspan", { className: "fill-tertiary", children: [
+              " · ",
+              m,
+              "%"
+            ] })
+          ]
+        }
+      );
+    };
+    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 })
+      ] })
+    ] }) }) });
+  }
+);
+De.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
+};