@object-ui/plugin-charts 4.0.6 → 4.0.8

package/dist/index.js

@@ -1,28 +1,28 @@
-import { ComponentRegistry as e, extractRecords as t } from "@object-ui/core";
-import * as n from "react";
-import r, { Suspense as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
-import { Skeleton as d } from "@object-ui/components";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { Area as h, AreaChart as g, Bar as _, BarChart as v, CartesianGrid as y, Cell as b, Legend as x, Line as S, LineChart as C, Pie as w, PieChart as T, PolarAngleAxis as E, PolarGrid as D, PolarRadiusAxis as ee, Radar as te, RadarChart as O, ResponsiveContainer as k, Scatter as ne, ScatterChart as A, Tooltip as j, XAxis as M, YAxis as N, ZAxis as re } from "recharts";
-import { SchemaRendererContext as ie, useDataScope as ae } from "@object-ui/react";
-import { AlertCircle as oe } from "lucide-react";
-import { useSafeFieldLabel as se } from "@object-ui/i18n";
+import { ComponentRegistry as e, computeDrillFilter as t, extractRecords as n, isDrillEnabled as r, resolveDateMacros as i, resolveDrillTitle as a } from "@object-ui/core";
+import * as o from "react";
+import s, { Suspense as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { Dialog as h, DialogContent as g, DialogHeader as _, DialogTitle as v, Sheet as ee, SheetContent as te, SheetHeader as ne, SheetTitle as re, Skeleton as y } from "@object-ui/components";
+import { Fragment as ie, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { Area as S, AreaChart as C, Bar as w, BarChart as T, CartesianGrid as E, Cell as D, Funnel as ae, FunnelChart as O, LabelList as k, Legend as A, Line as j, LineChart as M, Pie as N, PieChart as P, PolarAngleAxis as F, PolarGrid as I, PolarRadiusAxis as L, Radar as R, RadarChart as oe, ResponsiveContainer as se, Scatter as ce, ScatterChart as le, Tooltip as ue, XAxis as z, YAxis as B, ZAxis as de } from "recharts";
+import { SchemaRenderer as fe, SchemaRendererContext as pe, useDataScope as me } from "@object-ui/react";
+import { AlertCircle as he } from "lucide-react";
+import { useSafeFieldLabel as ge } from "@object-ui/i18n";
 //#region \0rolldown/runtime.js
-var P = Object.defineProperty, F = (e, t) => () => (e && (t = e(e = 0)), t), I = (e, t) => {
+var _e = Object.defineProperty, V = (e, t) => () => (e && (t = e(e = 0)), t), ve = (e, t) => {
 	let n = {};
-	for (var r in e) P(n, r, {
+	for (var r in e) _e(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || P(n, Symbol.toStringTag, { value: "Module" }), n;
-}, ce = /* @__PURE__ */ I({ default: () => le });
-function le({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height: r = 400, className: i = "", color: a = "hsl(var(--primary))" }) {
-	return /* @__PURE__ */ p("div", {
+	return t || _e(n, Symbol.toStringTag, { value: "Module" }), n;
+}, ye = /* @__PURE__ */ ve({ default: () => be });
+function be({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height: r = 400, className: i = "", color: a = "hsl(var(--primary))" }) {
+	return /* @__PURE__ */ b("div", {
 		className: `p-2 sm:p-3 md:p-4 rounded-xl border border-border bg-card/40 backdrop-blur-sm shadow-lg shadow-background/5 ${i}`,
-		children: /* @__PURE__ */ p(k, {
+		children: /* @__PURE__ */ b(se, {
 			width: "100%",
 			height: r,
-			children: /* @__PURE__ */ m(v, {
+			children: /* @__PURE__ */ x(T, {
 				data: e,
 				margin: {
 					top: 10,
@@ -31,64 +31,64 @@ function le({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
 					bottom: 5
 				},
 				children: [
-					/* @__PURE__ */ m("defs", { children: [/* @__PURE__ */ m("linearGradient", {
+					/* @__PURE__ */ x("defs", { children: [/* @__PURE__ */ x("linearGradient", {
 						id: "barGradient",
 						x1: "0",
 						y1: "0",
 						x2: "0",
 						y2: "1",
 						children: [
-							/* @__PURE__ */ p("stop", {
+							/* @__PURE__ */ b("stop", {
 								offset: "0%",
 								stopColor: a,
 								stopOpacity: 1
 							}),
-							/* @__PURE__ */ p("stop", {
+							/* @__PURE__ */ b("stop", {
 								offset: "90%",
 								stopColor: a,
 								stopOpacity: .6
 							}),
-							/* @__PURE__ */ p("stop", {
+							/* @__PURE__ */ b("stop", {
 								offset: "100%",
 								stopColor: a,
 								stopOpacity: .3
 							})
 						]
-					}), /* @__PURE__ */ m("filter", {
+					}), /* @__PURE__ */ x("filter", {
 						id: "glow",
 						height: "130%",
 						children: [
-							/* @__PURE__ */ p("feGaussianBlur", {
+							/* @__PURE__ */ b("feGaussianBlur", {
 								in: "SourceAlpha",
 								stdDeviation: "3",
 								result: "blur"
 							}),
-							/* @__PURE__ */ p("feOffset", {
+							/* @__PURE__ */ b("feOffset", {
 								in: "blur",
 								dx: "0",
 								dy: "0",
 								result: "offsetBlur"
 							}),
-							/* @__PURE__ */ p("feFlood", {
+							/* @__PURE__ */ b("feFlood", {
 								floodColor: a,
 								floodOpacity: "0.5",
 								result: "offsetColor"
 							}),
-							/* @__PURE__ */ p("feComposite", {
+							/* @__PURE__ */ b("feComposite", {
 								in: "offsetColor",
 								in2: "offsetBlur",
 								operator: "in",
 								result: "offsetBlur"
 							}),
-							/* @__PURE__ */ m("feMerge", { children: [/* @__PURE__ */ p("feMergeNode", { in: "offsetBlur" }), /* @__PURE__ */ p("feMergeNode", { in: "SourceGraphic" })] })
+							/* @__PURE__ */ x("feMerge", { children: [/* @__PURE__ */ b("feMergeNode", { in: "offsetBlur" }), /* @__PURE__ */ b("feMergeNode", { in: "SourceGraphic" })] })
 						]
 					})] }),
-					/* @__PURE__ */ p(y, {
+					/* @__PURE__ */ b(E, {
 						strokeDasharray: "3 3",
 						stroke: "hsl(var(--border))",
 						vertical: !1
 					}),
-					/* @__PURE__ */ p(M, {
+					/* @__PURE__ */ b(z, {
 						dataKey: n,
 						tick: {
 							fill: "hsl(var(--muted-foreground))",
@@ -99,7 +99,7 @@ function le({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
 						axisLine: { stroke: "hsl(var(--border))" },
 						dy: 10
 					}),
-					/* @__PURE__ */ p(N, {
+					/* @__PURE__ */ b(B, {
 						tick: {
 							fill: "hsl(var(--muted-foreground))",
 							fontSize: 12,
@@ -108,7 +108,7 @@ function le({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
 						tickLine: !1,
 						axisLine: !1
 					}),
-					/* @__PURE__ */ p(j, {
+					/* @__PURE__ */ b(ue, {
 						cursor: {
 							fill: "hsl(var(--muted))",
 							opacity: .2
@@ -123,11 +123,11 @@ function le({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
 						},
 						itemStyle: { color: "hsl(var(--primary))" }
 					}),
-					/* @__PURE__ */ p(x, { wrapperStyle: {
+					/* @__PURE__ */ b(A, { wrapperStyle: {
 						paddingTop: "20px",
 						fontFamily: "monospace"
 					} }),
-					/* @__PURE__ */ p(_, {
+					/* @__PURE__ */ b(w, {
 						dataKey: t,
 						fill: "url(#barGradient)",
 						radius: [
@@ -144,79 +144,79 @@ function le({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
 		})
 	});
 }
-var ue = F((() => {}));
+var xe = V((() => {}));
 //#endregion
 //#region src/ChartContainerImpl.tsx
-function L() {
-	let e = n.useContext(W);
+function Se() {
+	let e = o.useContext(we);
 	if (!e) throw Error("useChart must be used within a <ChartContainer />");
 	return e;
 }
-function R({ id: e, className: t, children: r, config: i, ...a }) {
-	let o = n.useId(), s = `chart-${e || o.replace(/:/g, "")}`;
-	return /* @__PURE__ */ p(W.Provider, {
-		value: { config: i },
-		children: /* @__PURE__ */ m("div", {
+function H({ id: e, className: t, children: n, config: r, ...i }) {
+	let a = o.useId(), s = `chart-${e || a.replace(/:/g, "")}`;
+	return /* @__PURE__ */ b(we.Provider, {
+		value: { config: r },
+		children: /* @__PURE__ */ x("div", {
 			"data-slot": "chart",
 			"data-chart": s,
-			className: H("flex w-full h-[350px] justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", t),
-			...a,
-			children: [/* @__PURE__ */ p(G, {
+			className: K("flex w-full h-[350px] justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", t),
+			...i,
+			children: [/* @__PURE__ */ b(Te, {
 				id: s,
-				config: i
-			}), /* @__PURE__ */ p(k, {
+				config: r
+			}), /* @__PURE__ */ b(se, {
 				width: "100%",
 				height: "100%",
-				children: r
+				children: n
 			})]
 		})
 	});
 }
-function z({ active: e, payload: t, className: r, indicator: i = "dot", hideLabel: a = !1, hideIndicator: o = !1, label: s, labelFormatter: c, labelClassName: l, formatter: u, color: d, nameKey: h, labelKey: g }) {
-	let { config: _ } = L(), v = n.useMemo(() => {
-		if (a || !t?.length) return null;
-		let [e] = t, n = V(_, e, `${g || e?.dataKey || e?.name || "value"}`), r = !g && typeof s == "string" ? _[s]?.label || s : n?.label;
-		return c ? /* @__PURE__ */ p("div", {
-			className: H("font-medium", l),
+function U({ active: e, payload: t, className: n, indicator: r = "dot", hideLabel: i = !1, hideIndicator: a = !1, label: s, labelFormatter: c, labelClassName: l, formatter: u, color: d, nameKey: f, labelKey: p }) {
+	let { config: m } = Se(), h = o.useMemo(() => {
+		if (i || !t?.length) return null;
+		let [e] = t, n = G(m, e, `${p || e?.dataKey || e?.name || "value"}`), r = !p && typeof s == "string" ? m[s]?.label || s : n?.label;
+		return c ? /* @__PURE__ */ b("div", {
+			className: K("font-medium", l),
 			children: c(r, t)
-		}) : r ? /* @__PURE__ */ p("div", {
-			className: H("font-medium", l),
+		}) : r ? /* @__PURE__ */ b("div", {
+			className: K("font-medium", l),
 			children: r
 		}) : null;
 	}, [
 		s,
 		c,
 		t,
-		a,
+		i,
 		l,
-		_,
-		g
+		m,
+		p
 	]);
 	if (!e || !t?.length) return null;
-	let y = t.length === 1 && i !== "dot";
-	return /* @__PURE__ */ m("div", {
-		className: H("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", r),
-		children: [y ? null : v, /* @__PURE__ */ p("div", {
+	let g = t.length === 1 && r !== "dot";
+	return /* @__PURE__ */ x("div", {
+		className: K("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", n),
+		children: [g ? null : h, /* @__PURE__ */ b("div", {
 			className: "grid gap-1.5",
 			children: t.filter((e) => e.type !== "none").map((e, t) => {
-				let n = V(_, e, `${h || e.name || e.dataKey || "value"}`), r = d || e.payload.fill || e.color;
-				return /* @__PURE__ */ p("div", {
-					className: H("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", i === "dot" ? "items-center" : ""),
-					children: u && e?.value !== void 0 && e.name ? u(e.value, e.name, e, t, e.payload) : /* @__PURE__ */ m(f, { children: [n?.icon ? /* @__PURE__ */ p(n.icon, {}) : !o && /* @__PURE__ */ p("div", {
-						className: H("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", i === "dot" ? "h-2.5 w-2.5" : "", i === "line" ? "w-1" : "", i === "dashed" ? "w-0 border-[1.5px] border-dashed bg-transparent" : "", y && i === "dashed" ? "my-0.5" : ""),
+				let n = G(m, e, `${f || e.name || e.dataKey || "value"}`), i = d || e.payload.fill || e.color;
+				return /* @__PURE__ */ b("div", {
+					className: K("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", r === "dot" ? "items-center" : ""),
+					children: u && e?.value !== void 0 && e.name ? u(e.value, e.name, e, t, e.payload) : /* @__PURE__ */ x(ie, { children: [n?.icon ? /* @__PURE__ */ b(n.icon, {}) : !a && /* @__PURE__ */ b("div", {
+						className: K("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", r === "dot" ? "h-2.5 w-2.5" : "", r === "line" ? "w-1" : "", r === "dashed" ? "w-0 border-[1.5px] border-dashed bg-transparent" : "", g && r === "dashed" ? "my-0.5" : ""),
 						style: {
-							"--color-bg": r,
-							"--color-border": r
+							"--color-bg": i,
+							"--color-border": i
 						}
-					}), /* @__PURE__ */ m("div", {
-						className: H("flex flex-1 justify-between leading-none", y ? "items-end" : "items-center"),
-						children: [/* @__PURE__ */ m("div", {
+					}), /* @__PURE__ */ x("div", {
+						className: K("flex flex-1 justify-between leading-none", g ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ x("div", {
 							className: "grid gap-1.5",
-							children: [y ? v : null, /* @__PURE__ */ p("span", {
+							children: [g ? h : null, /* @__PURE__ */ b("span", {
 								className: "text-muted-foreground",
 								children: n?.label || e.name
 							})]
-						}), e.value && /* @__PURE__ */ p("span", {
+						}), e.value && /* @__PURE__ */ b("span", {
 							className: "text-foreground font-mono font-medium tabular-nums",
 							children: e.value.toLocaleString()
 						})]
@@ -226,15 +226,15 @@ function z({ active: e, payload: t, className: r, indicator: i = "dot", hideLabe
 		})]
 	});
 }
-function B({ className: e, hideIcon: t = !1, payload: n, verticalAlign: r = "bottom", nameKey: i }) {
-	let { config: a } = L();
-	return n?.length ? /* @__PURE__ */ p("div", {
-		className: H("flex items-center justify-center gap-4", r === "top" ? "pb-3" : "pt-3", e),
+function W({ className: e, hideIcon: t = !1, payload: n, verticalAlign: r = "bottom", nameKey: i }) {
+	let { config: a } = Se();
+	return n?.length ? /* @__PURE__ */ b("div", {
+		className: K("flex items-center justify-center gap-4", r === "top" ? "pb-3" : "pt-3", e),
 		children: n.filter((e) => e.type !== "none").map((e) => {
-			let n = V(a, e, `${i || e.dataKey || "value"}`);
-			return /* @__PURE__ */ m("div", {
-				className: H("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
-				children: [n?.icon && !t ? /* @__PURE__ */ p(n.icon, {}) : /* @__PURE__ */ p("div", {
+			let n = G(a, e, `${i || e.dataKey || "value"}`);
+			return /* @__PURE__ */ x("div", {
+				className: K("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
+				children: [n?.icon && !t ? /* @__PURE__ */ b(n.icon, {}) : /* @__PURE__ */ b("div", {
 					className: "h-2 w-2 shrink-0 rounded-[2px]",
 					style: { backgroundColor: e.color }
 				}), n?.label]
@@ -242,18 +242,18 @@ function B({ className: e, hideIcon: t = !1, payload: n, verticalAlign: r = "bot
 		})
 	}) : null;
 }
-function V(e, t, n) {
+function G(e, t, n) {
 	if (typeof t != "object" || !t) return;
 	let r = "payload" in t && typeof t.payload == "object" && t.payload !== null ? t.payload : void 0, i = n;
 	return n in t && typeof t[n] == "string" ? i = t[n] : r && n in r && typeof r[n] == "string" && (i = r[n]), i in e ? e[i] : e[n];
 }
-var H, U, W, G, K, q, de = F((() => {
-	H = (...e) => e.filter(Boolean).join(" "), U = {
+var K, Ce, we, Te, q, J, Ee = V((() => {
+	K = (...e) => e.filter(Boolean).join(" "), Ce = {
 		light: "",
 		dark: ".dark"
-	}, W = n.createContext(null), G = ({ id: e, config: t }) => {
+	}, we = o.createContext(null), Te = ({ id: e, config: t }) => {
 		let n = Object.entries(t).filter(([, e]) => e.theme || e.color);
-		return n.length ? /* @__PURE__ */ p("style", { dangerouslySetInnerHTML: { __html: Object.entries(U).map(([t, r]) => `
+		return n.length ? /* @__PURE__ */ b("style", { dangerouslySetInnerHTML: { __html: Object.entries(Ce).map(([t, r]) => `
 ${r} [data-chart=${e}] {
 ${n.map(([e, n]) => {
 			let r = n.theme?.[t] || n.color;
@@ -261,24 +261,77 @@ ${n.map(([e, n]) => {
 		}).join("\n")}
 }
 `).join("\n") } }) : null;
-	}, K = j, q = x;
-})), fe = /* @__PURE__ */ I({ default: () => pe });
-function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i = "name", series: a = [], className: o = "" }) {
-	let s = Array.isArray(t) ? t : [], [c, l] = n.useState(!1);
-	n.useEffect(() => {
-		let e = () => l(window.innerWidth < 640);
+	}, q = ue, J = A;
+})), De = /* @__PURE__ */ ve({ default: () => Oe });
+function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r = "name", series: i = [], className: a = "", onChartClick: s }) {
+	let c = Array.isArray(t) ? t : [], [l, u] = o.useState(!1), d = o.useCallback((e) => {
+		if (!s || !e) return;
+		let t = Array.isArray(e.activePayload) ? e.activePayload[0] : void 0;
+		s({
+			category: e.activeLabel == null ? void 0 : String(e.activeLabel),
+			series: t?.dataKey ? String(t.dataKey) : void 0,
+			value: typeof t?.value == "number" ? t.value : void 0
+		});
+	}, [s]), f = o.useCallback((e) => {
+		if (!s || !e) return;
+		let t = e.payload?.[r], n = i[0]?.dataKey || "value";
+		s({
+			category: t == null ? void 0 : String(t),
+			series: n,
+			value: typeof e.payload?.[n] == "number" ? e.payload[n] : void 0
+		});
+	}, [
+		s,
+		r,
+		i
+	]), p = s ? {
+		onClick: d,
+		style: { cursor: "pointer" }
+	} : {}, m = s ? {
+		onClick: f,
+		style: { cursor: "pointer" }
+	} : {};
+	o.useEffect(() => {
+		let e = () => u(window.innerWidth < 640);
 		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, []);
-	let u = {
-		bar: v,
-		line: C,
-		area: g,
-		pie: T,
-		donut: T,
-		radar: O,
-		scatter: A,
-		combo: v
-	}[e] || v, d = n.useMemo(() => s.some((e) => String(e[i] || "").length > 5), [s, i]), f = () => [
+	let h = {
+		bar: T,
+		"horizontal-bar": T,
+		line: M,
+		area: C,
+		pie: P,
+		donut: P,
+		radar: oe,
+		scatter: le,
+		funnel: O,
+		combo: T
+	}[e] || T, g = o.useCallback((e) => {
+		if (e == null || e === "") return "";
+		let t = typeof e == "string" ? e : String(e);
+		if (/^\d{4}-\d{2}-\d{2}/.test(t)) {
+			let e = new Date(t);
+			if (!Number.isNaN(e.getTime())) {
+				let t = (c.length > 1 ? Math.abs(new Date(String(c[c.length - 1][r] ?? "")).getTime() - new Date(String(c[0][r] ?? "")).getTime()) : 0) / (1e3 * 60 * 60 * 24);
+				try {
+					return t <= 62 ? e.toLocaleDateString(void 0, {
+						month: "short",
+						day: "numeric"
+					}) : e.toLocaleDateString(void 0, {
+						month: "short",
+						year: "numeric"
+					});
+				} catch {
+					return e.toISOString().slice(0, 10);
+				}
+			}
+		}
+		return l && t.length > 8 ? t.slice(0, 8) + "…" : t;
+	}, [
+		c,
+		r,
+		l
+	]), _ = o.useMemo(() => c.some((e) => String(e[r] || "").length > 5), [c, r]), v = () => [
 		"hsl(var(--chart-1))",
 		"hsl(var(--chart-2))",
 		"hsl(var(--chart-3))",
@@ -287,34 +340,35 @@ function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i =
 	];
 	if (e === "pie" || e === "donut") {
 		let t = e === "donut" ? 60 : 0;
-		return /* @__PURE__ */ p(R, {
-			config: r,
-			className: o,
-			children: /* @__PURE__ */ m(T, { children: [
-				/* @__PURE__ */ p(K, {
+		return /* @__PURE__ */ b(H, {
+			config: n,
+			className: a,
+			children: /* @__PURE__ */ x(P, { children: [
+				/* @__PURE__ */ b(q, {
 					cursor: !1,
-					content: /* @__PURE__ */ p(z, { hideLabel: !0 })
+					content: /* @__PURE__ */ b(U, { hideLabel: !0 })
 				}),
-				/* @__PURE__ */ p(w, {
-					data: s,
-					dataKey: a[0]?.dataKey || "value",
-					nameKey: i || "name",
+				/* @__PURE__ */ b(N, {
+					data: c,
+					dataKey: i[0]?.dataKey || "value",
+					nameKey: r || "name",
 					innerRadius: t,
 					strokeWidth: 5,
 					paddingAngle: 2,
 					outerRadius: 80,
-					children: s.map((e, t) => {
-						let n = r[e[i]]?.color;
-						if (!n) {
-							let e = f();
-							n = e[t % e.length];
+					...m,
+					children: c.map((e, t) => {
+						let i = n[e[r]]?.color;
+						if (!i) {
+							let e = v();
+							i = e[t % e.length];
 						}
-						return /* @__PURE__ */ p(b, { fill: Y(n) }, `cell-${t}`);
+						return /* @__PURE__ */ b(D, { fill: X(i) }, `cell-${t}`);
 					})
 				}),
-				/* @__PURE__ */ p(q, {
-					content: /* @__PURE__ */ p(B, { nameKey: i }),
-					...c && {
+				/* @__PURE__ */ b(J, {
+					content: /* @__PURE__ */ b(W, { nameKey: r }),
+					...l && {
 						verticalAlign: "bottom",
 						wrapperStyle: {
 							fontSize: "11px",
@@ -325,19 +379,47 @@ function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i =
 			] })
 		});
 	}
-	return e === "radar" ? /* @__PURE__ */ p(R, {
-		config: r,
-		className: o,
-		children: /* @__PURE__ */ m(O, {
-			data: s,
+	if (e === "funnel") {
+		let e = i[0]?.dataKey || "value", t = v(), o = s ? (t) => {
+			t && s({
+				category: t?.payload?.[r] ?? t?.[r],
+				value: t?.payload?.[e] ?? t?.[e]
+			});
+		} : void 0;
+		return /* @__PURE__ */ b(H, {
+			config: n,
+			className: a,
+			children: /* @__PURE__ */ x(O, { children: [/* @__PURE__ */ b(q, { content: /* @__PURE__ */ b(U, {}) }), /* @__PURE__ */ x(ae, {
+				dataKey: e,
+				data: c,
+				nameKey: r,
+				isAnimationActive: !0,
+				...o ? {
+					onClick: o,
+					style: { cursor: "pointer" }
+				} : {},
+				children: [/* @__PURE__ */ b(k, {
+					position: "right",
+					fill: "hsl(var(--foreground))",
+					stroke: "none",
+					dataKey: r
+				}), c.map((e, n) => /* @__PURE__ */ b(D, { fill: X(t[n % t.length]) }, `funnel-cell-${n}`))]
+			})] })
+		});
+	}
+	if (e === "radar") return /* @__PURE__ */ b(H, {
+		config: n,
+		className: a,
+		children: /* @__PURE__ */ x(oe, {
+			data: c,
 			children: [
-				/* @__PURE__ */ p(D, {}),
-				/* @__PURE__ */ p(E, { dataKey: i }),
-				/* @__PURE__ */ p(ee, {}),
-				/* @__PURE__ */ p(K, { content: /* @__PURE__ */ p(z, {}) }),
-				/* @__PURE__ */ p(q, {
-					content: /* @__PURE__ */ p(B, {}),
-					...c && {
+				/* @__PURE__ */ b(I, {}),
+				/* @__PURE__ */ b(F, { dataKey: r }),
+				/* @__PURE__ */ b(L, {}),
+				/* @__PURE__ */ b(q, { content: /* @__PURE__ */ b(U, {}) }),
+				/* @__PURE__ */ b(J, {
+					content: /* @__PURE__ */ b(W, {}),
+					...l && {
 						verticalAlign: "bottom",
 						wrapperStyle: {
 							fontSize: "11px",
@@ -345,9 +427,9 @@ function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i =
 						}
 					}
 				}),
-				a.map((e) => {
-					let t = Y(r[e.dataKey]?.color || J);
-					return /* @__PURE__ */ p(te, {
+				i.map((e) => {
+					let t = X(n[e.dataKey]?.color || Y);
+					return /* @__PURE__ */ b(R, {
 						dataKey: e.dataKey,
 						stroke: t,
 						fill: t,
@@ -356,34 +438,35 @@ function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i =
 				})
 			]
 		})
-	}) : e === "scatter" ? /* @__PURE__ */ p(R, {
-		config: r,
-		className: o,
-		children: /* @__PURE__ */ m(A, { children: [
-			/* @__PURE__ */ p(y, { vertical: !1 }),
-			/* @__PURE__ */ p(M, {
+	});
+	if (e === "scatter") return /* @__PURE__ */ b(H, {
+		config: n,
+		className: a,
+		children: /* @__PURE__ */ x(le, { children: [
+			/* @__PURE__ */ b(E, { vertical: !1 }),
+			/* @__PURE__ */ b(z, {
 				type: "number",
-				dataKey: i,
-				name: String(r[i]?.label || i),
+				dataKey: r,
+				name: String(n[r]?.label || r),
 				tickLine: !1,
 				axisLine: !1,
-				interval: c ? Math.ceil(s.length / 5) : 0
+				interval: l ? Math.ceil(c.length / 5) : 0
 			}),
-			/* @__PURE__ */ p(N, {
+			/* @__PURE__ */ b(B, {
 				type: "number",
-				dataKey: a[0]?.dataKey || "value",
-				name: String(r[a[0]?.dataKey]?.label || a[0]?.dataKey),
+				dataKey: i[0]?.dataKey || "value",
+				name: String(n[i[0]?.dataKey]?.label || i[0]?.dataKey),
 				tickLine: !1,
 				axisLine: !1
 			}),
-			/* @__PURE__ */ p(re, {
+			/* @__PURE__ */ b(de, {
 				type: "number",
 				range: [60, 400]
 			}),
-			/* @__PURE__ */ p(K, { content: /* @__PURE__ */ p(z, {}) }),
-			/* @__PURE__ */ p(q, {
-				content: /* @__PURE__ */ p(B, {}),
-				...c && {
+			/* @__PURE__ */ b(q, { content: /* @__PURE__ */ b(U, {}) }),
+			/* @__PURE__ */ b(J, {
+				content: /* @__PURE__ */ b(W, {}),
+				...l && {
 					verticalAlign: "bottom",
 					wrapperStyle: {
 						fontSize: "11px",
@@ -391,50 +474,51 @@ function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i =
 					}
 				}
 			}),
-			a.map((e, t) => {
-				let n = f(), i = Y(r[e.dataKey]?.color || n[t % n.length]);
-				return /* @__PURE__ */ p(ne, {
-					name: r[e.dataKey]?.label || e.dataKey,
-					data: s,
+			i.map((e, t) => {
+				let r = v(), i = X(n[e.dataKey]?.color || r[t % r.length]);
+				return /* @__PURE__ */ b(ce, {
+					name: n[e.dataKey]?.label || e.dataKey,
+					data: c,
 					fill: i
 				}, e.dataKey);
 			})
 		] })
-	}) : e === "combo" ? /* @__PURE__ */ p(R, {
-		config: r,
-		className: o,
-		children: /* @__PURE__ */ m(v, {
-			data: s,
+	});
+	if (e === "combo") return /* @__PURE__ */ b(H, {
+		config: n,
+		className: a,
+		children: /* @__PURE__ */ x(T, {
+			data: c,
 			children: [
-				/* @__PURE__ */ p(y, { vertical: !1 }),
-				/* @__PURE__ */ p(M, {
-					dataKey: i,
+				/* @__PURE__ */ b(E, { vertical: !1 }),
+				/* @__PURE__ */ b(z, {
+					dataKey: r,
 					tickLine: !1,
 					tickMargin: 10,
 					axisLine: !1,
-					interval: c ? Math.ceil(s.length / 5) : 0,
-					tickFormatter: (e) => !e || typeof e != "string" ? e : c && e.length > 8 ? e.slice(0, 8) + "…" : e,
-					...!c && d && {
+					interval: l ? Math.ceil(c.length / 5) : 0,
+					tickFormatter: g,
+					...!l && _ && {
 						angle: -35,
 						textAnchor: "end",
 						height: 60
 					}
 				}),
-				/* @__PURE__ */ p(N, {
+				/* @__PURE__ */ b(B, {
 					yAxisId: "left",
 					tickLine: !1,
 					axisLine: !1
 				}),
-				/* @__PURE__ */ p(N, {
+				/* @__PURE__ */ b(B, {
 					yAxisId: "right",
 					orientation: "right",
 					tickLine: !1,
 					axisLine: !1
 				}),
-				/* @__PURE__ */ p(K, { content: /* @__PURE__ */ p(z, {}) }),
-				/* @__PURE__ */ p(q, {
-					content: /* @__PURE__ */ p(B, {}),
-					...c && {
+				/* @__PURE__ */ b(q, { content: /* @__PURE__ */ b(U, {}) }),
+				/* @__PURE__ */ b(J, {
+					content: /* @__PURE__ */ b(W, {}),
+					...l && {
 						verticalAlign: "bottom",
 						wrapperStyle: {
 							fontSize: "11px",
@@ -442,55 +526,70 @@ function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i =
 						}
 					}
 				}),
-				a.map((e, t) => {
-					let n = Y(r[e.dataKey]?.color || J), i = e.chartType || (t === 0 ? "bar" : "line"), a = i === "bar" ? "left" : "right";
-					return i === "line" ? /* @__PURE__ */ p(S, {
+				i.map((e, t) => {
+					let r = X(n[e.dataKey]?.color || Y), i = e.chartType || (t === 0 ? "bar" : "line"), a = i === "bar" ? "left" : "right";
+					return i === "line" ? /* @__PURE__ */ b(j, {
 						yAxisId: a,
 						type: "monotone",
 						dataKey: e.dataKey,
-						stroke: n,
+						stroke: r,
 						strokeWidth: 2,
 						dot: !1
-					}, e.dataKey) : i === "area" ? /* @__PURE__ */ p(h, {
+					}, e.dataKey) : i === "area" ? /* @__PURE__ */ b(S, {
 						yAxisId: a,
 						type: "monotone",
 						dataKey: e.dataKey,
-						fill: n,
-						stroke: n,
+						fill: r,
+						stroke: r,
 						fillOpacity: .4
-					}, e.dataKey) : /* @__PURE__ */ p(_, {
+					}, e.dataKey) : /* @__PURE__ */ b(w, {
 						yAxisId: a,
 						dataKey: e.dataKey,
-						fill: n,
+						fill: r,
 						radius: 4
 					}, e.dataKey);
 				})
 			]
 		})
-	}) : /* @__PURE__ */ p(R, {
-		config: r,
-		className: o,
-		children: /* @__PURE__ */ m(u, {
-			data: s,
+	});
+	let ee = e === "horizontal-bar";
+	return /* @__PURE__ */ b(H, {
+		config: n,
+		className: a,
+		children: /* @__PURE__ */ x(h, {
+			data: c,
+			layout: ee ? "vertical" : "horizontal",
+			...p,
 			children: [
-				/* @__PURE__ */ p(y, { vertical: !1 }),
-				/* @__PURE__ */ p(M, {
-					dataKey: i,
+				/* @__PURE__ */ b(E, { vertical: !1 }),
+				ee ? /* @__PURE__ */ x(ie, { children: [/* @__PURE__ */ b(z, {
+					type: "number",
+					tickLine: !1,
+					axisLine: !1
+				}), /* @__PURE__ */ b(B, {
+					type: "category",
+					dataKey: r,
+					tickLine: !1,
+					axisLine: !1,
+					width: Math.min(140, Math.max(60, Math.max(...c.map((e) => String(e[r] ?? "").length)) * 7)),
+					tickFormatter: g
+				})] }) : /* @__PURE__ */ b(z, {
+					dataKey: r,
 					tickLine: !1,
 					tickMargin: 10,
 					axisLine: !1,
-					interval: c ? Math.ceil(s.length / 5) : 0,
-					tickFormatter: (e) => !e || typeof e != "string" ? e : c && e.length > 8 ? e.slice(0, 8) + "…" : e,
-					...!c && d && {
+					interval: l ? Math.ceil(c.length / 5) : 0,
+					tickFormatter: g,
+					...!l && _ && {
 						angle: -35,
 						textAnchor: "end",
 						height: 60
 					}
 				}),
-				/* @__PURE__ */ p(K, { content: /* @__PURE__ */ p(z, {}) }),
-				/* @__PURE__ */ p(q, {
-					content: /* @__PURE__ */ p(B, {}),
-					...c && {
+				/* @__PURE__ */ b(q, { content: /* @__PURE__ */ b(U, {}) }),
+				/* @__PURE__ */ b(J, {
+					content: /* @__PURE__ */ b(W, {}),
+					...l && {
 						verticalAlign: "bottom",
 						wrapperStyle: {
 							fontSize: "11px",
@@ -498,24 +597,24 @@ function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i =
 						}
 					}
 				}),
-				a.map((t, n) => {
-					let i = f(), o = Y(r[t.dataKey]?.color || i[n % i.length] || J);
-					if (e === "bar") {
-						let e = a.length === 1 && s.length > 1;
-						return /* @__PURE__ */ p(_, {
+				i.map((t, r) => {
+					let a = v(), o = X(n[t.dataKey]?.color || a[r % a.length] || Y);
+					if (e === "bar" || e === "horizontal-bar") {
+						let e = i.length === 1 && c.length > 1;
+						return /* @__PURE__ */ b(w, {
 							dataKey: t.dataKey,
 							fill: o,
 							radius: 4,
-							children: e && s.map((e, t) => /* @__PURE__ */ p(b, { fill: Y(i[t % i.length]) }, `cell-${t}`))
+							children: e && c.map((e, t) => /* @__PURE__ */ b(D, { fill: X(a[t % a.length]) }, `cell-${t}`))
 						}, t.dataKey);
 					}
-					return e === "line" ? /* @__PURE__ */ p(S, {
+					return e === "line" ? /* @__PURE__ */ b(j, {
 						type: "monotone",
 						dataKey: t.dataKey,
 						stroke: o,
 						strokeWidth: 2,
 						dot: !1
-					}, t.dataKey) : e === "area" ? /* @__PURE__ */ p(h, {
+					}, t.dataKey) : e === "area" ? /* @__PURE__ */ b(S, {
 						type: "monotone",
 						dataKey: t.dataKey,
 						fill: o,
@@ -527,8 +626,8 @@ function pe({ chartType: e = "bar", data: t = [], config: r = {}, xAxisKey: i =
 		})
 	});
 }
-var J, me, Y, he = F((() => {
-	de(), J = "hsl(var(--primary))", me = {
+var Y, ke, X, Ae = V((() => {
+	Ee(), Y = "hsl(var(--primary))", ke = {
 		slate: "#64748b",
 		gray: "#6b7280",
 		zinc: "#71717a",
@@ -551,10 +650,10 @@ var J, me, Y, he = F((() => {
 		fuchsia: "#d946ef",
 		pink: "#ec4899",
 		rose: "#f43f5e"
-	}, Y = (e) => me[e] || e;
-})), ge = r.lazy(() => Promise.resolve().then(() => (ue(), ce))), _e = r.lazy(() => Promise.resolve().then(() => (he(), fe))), X = ({ schema: e }) => /* @__PURE__ */ p(i, {
-	fallback: /* @__PURE__ */ p(d, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
-	children: /* @__PURE__ */ p(ge, {
+	}, X = (e) => ke[e] || e;
+})), je = s.lazy(() => Promise.resolve().then(() => (xe(), ye))), Me = s.lazy(() => Promise.resolve().then(() => (Ae(), De))), Ne = ({ schema: e }) => /* @__PURE__ */ b(c, {
+	fallback: /* @__PURE__ */ b(y, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
+	children: /* @__PURE__ */ b(je, {
 		data: e.data,
 		dataKey: e.dataKey,
 		xAxisKey: e.xAxisKey,
@@ -562,8 +661,8 @@ var J, me, Y, he = F((() => {
 		className: e.className,
 		color: e.color
 	})
-}), Z = ({ schema: e }) => {
-	let t = r.useMemo(() => {
+}), Z = ({ schema: e, onChartClick: t }) => {
+	let n = s.useMemo(() => {
 		let t = e.series, n = e.xAxisKey, r = e.config;
 		if (n || (e.index ? n = e.index : e.category && (n = e.category)), t || (e.categories ? t = e.categories.map((e) => ({ dataKey: e })) : e.value && (t = [{ dataKey: e.value }])), !r && t) {
 			let n = e.colors || [
@@ -587,15 +686,16 @@ var J, me, Y, he = F((() => {
 			className: e.className
 		};
 	}, [e]);
-	return /* @__PURE__ */ p(i, {
-		fallback: /* @__PURE__ */ p(d, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
-		children: /* @__PURE__ */ p(_e, {
-			chartType: t.chartType,
-			data: t.data,
-			config: t.config,
-			xAxisKey: t.xAxisKey,
-			series: t.series,
-			className: t.className
+	return /* @__PURE__ */ b(c, {
+		fallback: /* @__PURE__ */ b(y, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
+		children: /* @__PURE__ */ b(Me, {
+			chartType: n.chartType,
+			data: n.data,
+			config: n.config,
+			xAxisKey: n.xAxisKey,
+			series: n.series,
+			className: n.className,
+			onChartClick: t
 		})
 	});
 };
@@ -604,7 +704,7 @@ var J, me, Y, he = F((() => {
 function Q(e) {
 	return e.replace(/[_-]/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
 }
-function ve(e, t) {
+function Pe(e, t) {
 	let { field: n, function: r, groupBy: i } = t, a = {};
 	for (let t of e) {
 		let e = String(t[i] ?? "Unknown");
@@ -635,154 +735,243 @@ function ve(e, t) {
 		};
 	});
 }
-async function ye(e, n, r, i, a) {
-	if (!e.length || !n) return e;
-	let o = a || ((e, t) => t), s = r?.fields?.[n];
-	if (!s) return e.map((e) => {
-		let t = String(e[n] ?? ""), r = Q(t);
-		return {
-			...e,
-			[n]: o(t, r)
-		};
-	});
-	let c = s.type;
-	if (c === "select" || c === "picklist" || c === "dropdown") {
-		let t = s.options || [];
-		if (t.length === 0) return e.map((e) => {
-			let t = String(e[n] ?? ""), r = Q(t);
+async function Fe(e, t, r, i, a) {
+	if (!e.length || !t) return e;
+	let o = a || ((e, t) => t), s = `__raw_${t}`, c = r?.fields?.[t];
+	if (!c) {
+		let n = /^\d{4}-\d{2}-\d{2}/;
+		return e.map((e) => {
+			let r = e[t], i = String(r ?? ""), a = n.test(i) ? i : Q(i);
 			return {
 				...e,
-				[n]: o(t, r)
+				[t]: o(i, a),
+				[s]: r
+			};
+		});
+	}
+	let l = c.type;
+	if (l === "select" || l === "picklist" || l === "dropdown") {
+		let n = c.options || [];
+		if (n.length === 0) return e.map((e) => {
+			let n = e[t], r = String(n ?? ""), i = Q(r);
+			return {
+				...e,
+				[t]: o(r, i),
+				[s]: n
 			};
 		});
 		let r = {};
-		for (let e of t) typeof e == "string" ? r[e] = e : e && typeof e == "object" && (r[String(e.value)] = e.label || String(e.value));
+		for (let e of n) typeof e == "string" ? r[e] = e : e && typeof e == "object" && (r[String(e.value)] = e.label || String(e.value));
 		return e.map((e) => {
-			let t = String(e[n] ?? ""), i = r[t] || Q(t);
+			let n = e[t], i = String(n ?? ""), a = r[i] || Q(i);
 			return {
 				...e,
-				[n]: o(t, i)
+				[t]: o(i, a),
+				[s]: n
 			};
 		});
 	}
-	if (c === "lookup" || c === "master_detail") {
-		let r = s.reference_to || s.reference;
-		if (!r || !i || typeof i.find != "function") return e;
-		let a = [...new Set(e.map((e) => e[n]).filter((e) => e != null))];
-		if (a.length === 0) return e;
-		let o = s.id_field || "id";
+	if (l === "lookup" || l === "master_detail") {
+		let r = c.reference_to || c.reference;
+		if (!r || !i || typeof i.find != "function") return e.map((e) => ({
+			...e,
+			[s]: e[t]
+		}));
+		let a = [...new Set(e.map((e) => e[t]).filter((e) => e != null))];
+		if (a.length === 0) return e.map((e) => ({
+			...e,
+			[s]: e[t]
+		}));
+		let o = c.id_field || "id";
 		try {
-			let c = t(await i.find(r, {
+			let l = n(await i.find(r, {
 				$filter: { [o]: { $in: a } },
 				$top: a.length
-			})), l = s.reference_field || s.display_field || "name", u = {};
-			for (let e of c) {
-				let t = String(e[o] ?? e.id ?? e._id ?? ""), n = e[l] || e.name || e.label || e.title || t;
-				t && (u[t] = String(n));
+			})), u = c.reference_field || c.display_field || "name", d = {};
+			for (let e of l) {
+				let t = String(e[o] ?? e.id ?? e._id ?? ""), n = e[u] || e.name || e.label || e.title || t;
+				t && (d[t] = String(n));
 			}
 			return e.map((e) => {
-				let t = String(e[n] ?? "");
+				let n = e[t], r = String(n ?? "");
 				return {
 					...e,
-					[n]: u[t] || t
+					[t]: d[r] || r,
+					[s]: n
 				};
 			});
-		} catch (t) {
-			return console.warn("[ObjectChart] Failed to resolve lookup labels:", t), e;
+		} catch (n) {
+			return console.warn("[ObjectChart] Failed to resolve lookup labels:", n), e.map((e) => ({
+				...e,
+				[s]: e[t]
+			}));
 		}
 	}
-	return e.map((e) => ({
+	if (l === "date" || l === "datetime" || l === "date_time" || l === "timestamp" || l === "time") return e.map((e) => ({
 		...e,
-		[n]: Q(String(e[n] ?? ""))
+		[s]: e[t]
 	}));
+	let u = /^\d{4}-\d{2}-\d{2}/;
+	return e.map((e) => {
+		let n = e[t], r = String(n ?? "");
+		return {
+			...e,
+			[t]: u.test(r) ? r : Q(r),
+			[s]: n
+		};
+	});
 }
 var $ = (e) => {
-	let { schema: n } = e, r = o(ie), i = e.dataSource || r?.dataSource, d = ae(n.bind), { fieldOptionLabel: f } = se(), h = l(f);
-	s(() => {
-		h.current = f;
-	}, [f]);
-	let [g, _] = u([]), [v, y] = u(!1), [b, x] = u(null), S = c(() => n.aggregate ? JSON.stringify(n.aggregate) : "", [n.aggregate]), C = c(() => n.filter ? JSON.stringify(n.filter) : "", [n.filter]), w = a(async (e, r) => {
-		if (!(!e || !n.objectName)) {
-			r.current && (y(!0), x(null));
+	let { schema: o } = e, s = u(pe), c = e.dataSource || s?.dataSource, y = me(o.bind), { fieldOptionLabel: S } = ge(), C = p(S);
+	d(() => {
+		C.current = S;
+	}, [S]);
+	let [w, T] = m([]), [E, D] = m(!1), [ae, O] = m(null), [k, A] = m(null), j = f(() => o.aggregate ? JSON.stringify(o.aggregate) : "", [o.aggregate]), M = f(() => o.filter ? JSON.stringify(o.filter) : "", [o.filter]), N = l(async (e, t) => {
+		if (!(!e || !o.objectName)) {
+			t.current && (D(!0), O(null));
 			try {
-				let i;
-				if (n.aggregate && typeof e.aggregate == "function") {
-					let t = await e.aggregate(n.objectName, {
-						field: n.aggregate.field,
-						function: n.aggregate.function,
-						groupBy: n.aggregate.groupBy,
-						filter: n.filter
+				let r, a = i(o.filter);
+				if (o.aggregate && typeof e.aggregate == "function") {
+					let t = await e.aggregate(o.objectName, {
+						field: o.aggregate.field,
+						function: o.aggregate.function,
+						groupBy: o.aggregate.groupBy,
+						filter: a
 					});
-					i = Array.isArray(t) ? t : [];
-				} else if (typeof e.find == "function") i = t(await e.find(n.objectName, { $filter: n.filter })), n.aggregate && i.length > 0 && (i = ve(i, n.aggregate));
+					r = Array.isArray(t) ? t : [];
+				} else if (typeof e.find == "function") r = n(await e.find(o.objectName, { $filter: a })), o.aggregate && r.length > 0 && (r = Pe(r, o.aggregate));
 				else return;
-				let a = n.aggregate?.groupBy || n.xAxisKey;
-				if (a && typeof e.getObjectSchema == "function") try {
-					let t = await e.getObjectSchema(n.objectName);
-					i = await ye(i, a, t, e, (e, t) => h.current(n.objectName, a, e, t));
+				let s = o.aggregate?.groupBy || o.xAxisKey;
+				if (s && typeof e.getObjectSchema == "function") try {
+					let t = await e.getObjectSchema(o.objectName);
+					r = await Fe(r, s, t, e, (e, t) => C.current(o.objectName, s, e, t));
 				} catch {}
-				r.current && _(i);
+				t.current && T(r);
 			} catch (e) {
-				console.error("[ObjectChart] Fetch error:", e), r.current && x(e instanceof Error ? e.message : "Failed to load chart data");
+				console.error("[ObjectChart] Fetch error:", e), t.current && O(e instanceof Error ? e.message : "Failed to load chart data");
 			} finally {
-				r.current && y(!1);
+				t.current && D(!1);
 			}
 		}
 	}, [
-		n.objectName,
-		S,
-		C,
-		n.xAxisKey
+		o.objectName,
+		j,
+		M,
+		o.xAxisKey
 	]);
-	s(() => {
+	d(() => {
 		let e = { current: !0 };
-		return n.objectName && !d && !n.data && w(i, e), () => {
+		return o.objectName && !y && !o.data && N(c, e), () => {
 			e.current = !1;
 		};
 	}, [
-		n.objectName,
-		i,
-		d,
-		n.data,
-		C,
-		S,
-		w
+		o.objectName,
+		c,
+		y,
+		o.data,
+		M,
+		j,
+		N
 	]);
-	let T = d || n.data || g, E = Array.isArray(T) ? T : [], D = {
-		...n,
-		data: E
+	let P = y || o.data || w, F = Array.isArray(P) ? P : [], I = o.drillDown, L = o.aggregate?.groupBy || o.xAxisKey, R = f(() => {
+		if (!L) return /* @__PURE__ */ new Map();
+		let e = /* @__PURE__ */ new Map(), t = `__raw_${L}`;
+		for (let n of F) {
+			let r = n?.[L];
+			if (r == null) continue;
+			let i = t in (n || {}) ? n[t] : r;
+			e.set(String(r), i);
+		}
+		return e;
+	}, [F, L]), oe = {
+		...o,
+		data: F
 	};
-	return v && E.length === 0 ? /* @__PURE__ */ p("div", {
-		className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (n.className || ""),
+	if (E && F.length === 0) return /* @__PURE__ */ b("div", {
+		className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (o.className || ""),
 		"data-testid": "chart-loading",
 		children: "Loading chart data…"
-	}) : b ? /* @__PURE__ */ m("div", {
-		className: "flex flex-col items-center justify-center gap-2 p-4 " + (n.className || ""),
+	});
+	if (ae) return /* @__PURE__ */ x("div", {
+		className: "flex flex-col items-center justify-center gap-2 p-4 " + (o.className || ""),
 		"data-testid": "chart-error",
 		role: "alert",
 		children: [
-			/* @__PURE__ */ p(oe, { className: "h-6 w-6 text-destructive opacity-60" }),
-			/* @__PURE__ */ p("p", {
+			/* @__PURE__ */ b(he, { className: "h-6 w-6 text-destructive opacity-60" }),
+			/* @__PURE__ */ b("p", {
 				className: "text-xs text-destructive font-medium",
 				children: "Failed to load chart data"
 			}),
-			/* @__PURE__ */ p("p", {
+			/* @__PURE__ */ b("p", {
 				className: "text-xs text-muted-foreground max-w-xs text-center",
-				children: b
+				children: ae
 			})
 		]
-	}) : !i && n.objectName && E.length === 0 ? /* @__PURE__ */ m("div", {
-		className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (n.className || ""),
+	});
+	if (!c && o.objectName && F.length === 0) return /* @__PURE__ */ x("div", {
+		className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (o.className || ""),
 		"data-testid": "chart-no-datasource",
 		children: [
 			"No data source available for “",
-			n.objectName,
+			o.objectName,
 			"”"
 		]
-	}) : /* @__PURE__ */ p(Z, {
-		...e,
-		schema: D
 	});
+	let se = r(I) ? (e) => {
+		let t = e.category, n = t != null && R.has(String(t)) ? R.get(String(t)) : t;
+		A({
+			...e,
+			category: n,
+			categoryLabel: t,
+			scope: "cell"
+		});
+	} : void 0, ce = k && o.objectName ? (() => {
+		let e = t(I, k, { groupByField: L }), n = {
+			...o.filter || {},
+			...e
+		}, r = a(I, k, o.title || "Details"), i = I?.target ?? "drawer", s = /* @__PURE__ */ b("div", {
+			className: "overflow-auto",
+			"data-testid": "chart-drill-body",
+			children: /* @__PURE__ */ b(fe, {
+				schema: {
+					type: "object-data-table",
+					objectName: o.objectName,
+					filter: n,
+					pagination: !0,
+					pageSize: I?.maxRows,
+					columns: I?.columns?.map((e) => ({
+						accessorKey: e,
+						header: e
+					}))
+				},
+				dataSource: c
+			})
+		});
+		return i === "dialog" ? /* @__PURE__ */ b(h, {
+			open: !0,
+			onOpenChange: (e) => !e && A(null),
+			children: /* @__PURE__ */ x(g, {
+				className: "max-w-4xl",
+				children: [/* @__PURE__ */ b(_, { children: /* @__PURE__ */ b(v, { children: r }) }), s]
+			})
+		}) : /* @__PURE__ */ b(ee, {
+			open: !0,
+			onOpenChange: (e) => !e && A(null),
+			children: /* @__PURE__ */ x(te, {
+				side: "right",
+				className: "w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl flex flex-col",
+				children: [/* @__PURE__ */ b(ne, { children: /* @__PURE__ */ b(re, { children: r }) }), /* @__PURE__ */ b("div", {
+					className: "flex-1 overflow-hidden mt-2",
+					children: s
+				})]
+			})
+		});
+	})() : null;
+	return /* @__PURE__ */ x(ie, { children: [/* @__PURE__ */ b(Z, {
+		...e,
+		schema: oe,
+		onChartClick: se
+	}), ce] });
 };
 e.register("object-chart", $, {
 	namespace: "plugin-charts",
@@ -816,11 +1005,11 @@ e.register("object-chart", $, {
 });
 //#endregion
 //#region src/index.tsx
-var be = {
-	"bar-chart": X,
+var Ie = {
+	"bar-chart": Ne,
 	chart: Z
 };
-e.register("bar-chart", X, {
+e.register("bar-chart", Ne, {
 	namespace: "plugin-charts",
 	label: "Bar Chart",
 	category: "plugin",
@@ -1050,4 +1239,4 @@ e.register("bar-chart", X, {
 	defaultProps: { chartType: "scatter" }
 });
 //#endregion
-export { X as ChartBarRenderer, Z as ChartRenderer, $ as ObjectChart, be as chartComponents };
+export { Ne as ChartBarRenderer, Z as ChartRenderer, $ as ObjectChart, Ie as chartComponents };