@questpie/admin 2.0.0 → 3.0.0

package/dist/client/components/widgets/chart-widget.mjs

@@ -1,20 +1,15 @@
 import { useResolveText } from "../../i18n/hooks.mjs";
-import { formatCollectionName } from "../../lib/utils.mjs";
+import { formatLabel } from "../../lib/utils.mjs";
 import { useCollectionList } from "../../hooks/use-collection.mjs";
 import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
 import { useServerWidgetData } from "../../hooks/use-server-widget-data.mjs";
 import { ChartWidgetSkeleton } from "./widget-skeletons.mjs";
-import * as React$1 from "react";
+import { c } from "react/compiler-runtime";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
 //#region src/client/components/widgets/chart-widget.tsx
-/**
-* Chart Widget
-*
-* Displays data visualization over time.
-* Uses WidgetCard for consistent styling.
-*/
 const CHART_COLORS = [
 	"var(--color-chart-1)",
 	"var(--color-chart-2)",
@@ -25,26 +20,36 @@ const CHART_COLORS = [
 /**
 * Custom tooltip component matching shadcn style
 */
-function ChartTooltip({ active, payload, label }) {
+function ChartTooltip(t0) {
+	const $ = c(7);
+	const { active, payload, label } = t0;
 	if (!active || !payload?.length) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-md border border-border bg-background px-3 py-2 text-xs shadow-md",
-		children: [/* @__PURE__ */ jsx("p", {
-			className: "font-medium text-foreground",
+	let t1;
+	if ($[0] !== label) {
+		t1 = /* @__PURE__ */ jsx("p", {
+			className: "text-foreground font-medium",
 			children: label
-		}), payload.map((entry) => /* @__PURE__ */ jsxs("p", {
-			className: "text-muted-foreground",
-			children: [
-				entry.name,
-				":",
-				" ",
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium text-foreground",
-					children: entry.value
-				})
-			]
-		}, String(entry.name)))]
-	});
+		});
+		$[0] = label;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== payload) {
+		t2 = payload.map(_temp);
+		$[2] = payload;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1 || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "border-border bg-background border px-3 py-2 text-xs shadow-md",
+			children: [t1, t2]
+		});
+		$[4] = t1;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
 }
 /**
 * Chart widget component
@@ -54,197 +59,493 @@ function ChartTooltip({ active, payload, label }) {
 * - Multiple chart types (line, bar, area, pie)
 * - Configurable time ranges
 */
-function ChartWidget({ config }) {
+function _temp(entry) {
+	return /* @__PURE__ */ jsxs("p", {
+		className: "text-muted-foreground",
+		children: [
+			entry.name,
+			":",
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-foreground font-medium",
+				children: entry.value
+			})
+		]
+	}, String(entry.name));
+}
+function ChartWidget(t0) {
+	const $ = c(38);
+	const { config } = t0;
 	const resolveText = useResolveText();
-	const { collection, field, chartType = "area", timeRange = "30d", label, color = "var(--color-chart-1)", showGrid = true, realtime, hasFetchFn, refreshInterval } = config;
-	const serverQuery = useServerWidgetData(config.id, {
-		enabled: !!hasFetchFn,
-		refreshInterval
-	});
-	const collectionQuery = useCollectionList(collection, { limit: 1e3 }, void 0, { realtime });
-	const { isLoading, error, refetch } = hasFetchFn ? serverQuery : collectionQuery;
-	const collectionItems = hasFetchFn ? [] : Array.isArray(collectionQuery.data?.docs) ? collectionQuery.data.docs : [];
-	const displayLabel = label ? resolveText(label) : `${formatCollectionName(collection)} by ${field}`;
-	const chartData = React$1.useMemo(() => {
-		if (hasFetchFn) return serverQuery.data ?? [];
-		if (!collectionItems.length) return [];
-		const grouped = collectionItems.reduce((acc, item) => {
-			const value = item[field];
-			if (value === void 0 || value === null) return acc;
-			let key;
-			if (value instanceof Date || !isNaN(Date.parse(value))) key = formatDateForRange(new Date(value), timeRange);
-			else key = String(value);
-			acc[key] = (acc[key] || 0) + 1;
-			return acc;
-		}, {});
-		return Object.entries(grouped).map(([name, value]) => ({
-			name,
-			value
-		})).sort((a, b) => a.name.localeCompare(b.name));
-	}, [
-		hasFetchFn,
-		serverQuery.data,
-		collectionItems,
-		field,
-		timeRange
-	]);
-	const emptyContent = /* @__PURE__ */ jsx("div", {
-		className: "flex h-48 items-center justify-center text-muted-foreground",
-		children: /* @__PURE__ */ jsx("p", {
-			className: "text-sm",
-			children: "No data available"
-		})
-	});
-	const chartContent = chartData.length === 0 ? emptyContent : /* @__PURE__ */ jsx("div", {
-		className: "h-48 w-full",
-		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
-			width: "100%",
-			height: "100%",
-			children: renderChart(chartType, chartData, color, showGrid)
-		})
-	});
-	return /* @__PURE__ */ jsx(WidgetCard, {
-		title: displayLabel,
-		isLoading,
-		loadingSkeleton: /* @__PURE__ */ jsx(ChartWidgetSkeleton, {}),
-		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
-		onRefresh: () => refetch(),
-		children: chartContent
-	});
+	const { collection, field, chartType: t1, timeRange: t2, label, color: t3, showGrid: t4, realtime, hasLoader, refreshInterval } = config;
+	const chartType = t1 === void 0 ? "area" : t1;
+	const timeRange = t2 === void 0 ? "30d" : t2;
+	const color = t3 === void 0 ? "var(--color-chart-1)" : t3;
+	const showGrid = t4 === void 0 ? true : t4;
+	const t5 = !!hasLoader;
+	let t6;
+	if ($[0] !== refreshInterval || $[1] !== t5) {
+		t6 = {
+			enabled: t5,
+			refreshInterval
+		};
+		$[0] = refreshInterval;
+		$[1] = t5;
+		$[2] = t6;
+	} else t6 = $[2];
+	const serverQuery = useServerWidgetData(config.id, t6);
+	let t7;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { limit: 1e3 };
+		$[3] = t7;
+	} else t7 = $[3];
+	let t8;
+	if ($[4] !== realtime) {
+		t8 = { realtime };
+		$[4] = realtime;
+		$[5] = t8;
+	} else t8 = $[5];
+	const collectionQuery = useCollectionList(collection, t7, void 0, t8);
+	const { isLoading, error, refetch } = hasLoader ? serverQuery : collectionQuery;
+	let t9;
+	if ($[6] !== collectionQuery || $[7] !== hasLoader) {
+		t9 = hasLoader ? [] : Array.isArray(collectionQuery.data?.docs) ? collectionQuery.data.docs : [];
+		$[6] = collectionQuery;
+		$[7] = hasLoader;
+		$[8] = t9;
+	} else t9 = $[8];
+	const collectionItems = t9;
+	let t10;
+	if ($[9] !== collection || $[10] !== field || $[11] !== label || $[12] !== resolveText) {
+		t10 = label ? resolveText(label) : `${formatLabel(collection)} by ${field}`;
+		$[9] = collection;
+		$[10] = field;
+		$[11] = label;
+		$[12] = resolveText;
+		$[13] = t10;
+	} else t10 = $[13];
+	const displayLabel = t10;
+	let t11;
+	bb0: {
+		if (hasLoader) {
+			let t12$2;
+			if ($[14] !== serverQuery.data) {
+				t12$2 = serverQuery.data ?? [];
+				$[14] = serverQuery.data;
+				$[15] = t12$2;
+			} else t12$2 = $[15];
+			t11 = t12$2;
+			break bb0;
+		}
+		if (!collectionItems.length) {
+			let t12$2;
+			if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+				t12$2 = [];
+				$[16] = t12$2;
+			} else t12$2 = $[16];
+			t11 = t12$2;
+			break bb0;
+		}
+		let t12$1;
+		if ($[17] !== collectionItems || $[18] !== field || $[19] !== timeRange) {
+			const grouped = collectionItems.reduce((acc, item) => {
+				const value = item[field];
+				if (value === void 0 || value === null) return acc;
+				let key;
+				if (value instanceof Date || !isNaN(Date.parse(value))) key = formatDateForRange(new Date(value), timeRange);
+				else key = String(value);
+				acc[key] = (acc[key] || 0) + 1;
+				return acc;
+			}, {});
+			t12$1 = Object.entries(grouped).map(_temp2).sort(_temp3);
+			$[17] = collectionItems;
+			$[18] = field;
+			$[19] = timeRange;
+			$[20] = t12$1;
+		} else t12$1 = $[20];
+		t11 = t12$1;
+	}
+	const chartData = t11;
+	let t12;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex h-24 items-center justify-center",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				children: "No data available"
+			})
+		});
+		$[21] = t12;
+	} else t12 = $[21];
+	const emptyContent = t12;
+	let t13;
+	if ($[22] !== chartData || $[23] !== chartType || $[24] !== color || $[25] !== showGrid) {
+		t13 = chartData.length === 0 ? emptyContent : /* @__PURE__ */ jsx("div", {
+			className: "h-48 w-full",
+			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsx(ChartRenderer, {
+					type: chartType,
+					data: chartData,
+					color,
+					showGrid
+				})
+			})
+		});
+		$[22] = chartData;
+		$[23] = chartType;
+		$[24] = color;
+		$[25] = showGrid;
+		$[26] = t13;
+	} else t13 = $[26];
+	const chartContent = t13;
+	let t14;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(ChartWidgetSkeleton, {});
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] !== error) {
+		t15 = error instanceof Error ? error : error ? new Error(String(error)) : null;
+		$[28] = error;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== refetch) {
+		t16 = () => refetch();
+		$[30] = refetch;
+		$[31] = t16;
+	} else t16 = $[31];
+	let t17;
+	if ($[32] !== chartContent || $[33] !== displayLabel || $[34] !== isLoading || $[35] !== t15 || $[36] !== t16) {
+		t17 = /* @__PURE__ */ jsx(WidgetCard, {
+			title: displayLabel,
+			isLoading,
+			loadingSkeleton: t14,
+			error: t15,
+			onRefresh: t16,
+			children: chartContent
+		});
+		$[32] = chartContent;
+		$[33] = displayLabel;
+		$[34] = isLoading;
+		$[35] = t15;
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	return t17;
 }
 /**
-* Render the appropriate chart type
+* Renders the appropriate chart type as a proper component
 */
-function renderChart(type, data, color, showGrid) {
-	const commonProps = {
-		data,
-		margin: {
+function _temp3(a, b) {
+	return a.name.localeCompare(b.name);
+}
+function _temp2(t0) {
+	const [name, value_0] = t0;
+	return {
+		name,
+		value: value_0
+	};
+}
+function ChartRenderer(t0) {
+	const $ = c(46);
+	const { type, data, color, showGrid } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
 			top: 5,
 			right: 5,
 			left: -20,
 			bottom: 5
-		}
-	};
-	const axisStyle = {
-		fontSize: 10,
-		fill: "var(--color-muted-foreground)"
-	};
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== data) {
+		t2 = {
+			data,
+			margin: t1
+		};
+		$[1] = data;
+		$[2] = t2;
+	} else t2 = $[2];
+	const commonProps = t2;
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			fontSize: 10,
+			fill: "var(--color-muted-foreground)"
+		};
+		$[3] = t3;
+	} else t3 = $[3];
+	const axisStyle = t3;
 	switch (type) {
-		case "line": return /* @__PURE__ */ jsxs(LineChart, {
-			...commonProps,
-			children: [
-				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+		case "line": {
+			let t4;
+			if ($[4] !== showGrid) {
+				t4 = showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
 					strokeDasharray: "3 3",
 					stroke: "var(--color-border)",
 					opacity: .5
-				}),
-				/* @__PURE__ */ jsx(XAxis, {
+				});
+				$[4] = showGrid;
+				$[5] = t4;
+			} else t4 = $[5];
+			let t5;
+			let t6;
+			if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+				t5 = /* @__PURE__ */ jsx(XAxis, {
 					dataKey: "name",
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
+				});
+				t6 = /* @__PURE__ */ jsx(YAxis, {
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				}),
-				/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
-				/* @__PURE__ */ jsx(Line, {
+				});
+				$[6] = t5;
+				$[7] = t6;
+			} else {
+				t5 = $[6];
+				t6 = $[7];
+			}
+			let t7;
+			if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+				t7 = /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) });
+				$[8] = t7;
+			} else t7 = $[8];
+			let t8;
+			if ($[9] !== color) {
+				t8 = /* @__PURE__ */ jsx(Line, {
 					type: "monotone",
 					dataKey: "value",
 					stroke: color,
 					strokeWidth: 2,
 					dot: false
-				})
-			]
-		});
-		case "bar": return /* @__PURE__ */ jsxs(BarChart, {
-			...commonProps,
-			children: [
-				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+				});
+				$[9] = color;
+				$[10] = t8;
+			} else t8 = $[10];
+			let t9;
+			if ($[11] !== commonProps || $[12] !== t4 || $[13] !== t8) {
+				t9 = /* @__PURE__ */ jsxs(LineChart, {
+					...commonProps,
+					children: [
+						t4,
+						t5,
+						t6,
+						t7,
+						t8
+					]
+				});
+				$[11] = commonProps;
+				$[12] = t4;
+				$[13] = t8;
+				$[14] = t9;
+			} else t9 = $[14];
+			return t9;
+		}
+		case "bar": {
+			let t4;
+			if ($[15] !== showGrid) {
+				t4 = showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
 					strokeDasharray: "3 3",
 					stroke: "var(--color-border)",
 					opacity: .5
-				}),
-				/* @__PURE__ */ jsx(XAxis, {
+				});
+				$[15] = showGrid;
+				$[16] = t4;
+			} else t4 = $[16];
+			let t5;
+			let t6;
+			if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+				t5 = /* @__PURE__ */ jsx(XAxis, {
 					dataKey: "name",
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
+				});
+				t6 = /* @__PURE__ */ jsx(YAxis, {
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				}),
-				/* @__PURE__ */ jsx(Tooltip, {
+				});
+				$[17] = t5;
+				$[18] = t6;
+			} else {
+				t5 = $[17];
+				t6 = $[18];
+			}
+			let t7;
+			if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+				t7 = /* @__PURE__ */ jsx(Tooltip, {
 					content: /* @__PURE__ */ jsx(ChartTooltip, {}),
 					cursor: {
 						fill: "var(--color-muted)",
 						opacity: .3
 					}
-				}),
-				/* @__PURE__ */ jsx(Bar, {
+				});
+				$[19] = t7;
+			} else t7 = $[19];
+			let t8;
+			if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+				t8 = [
+					2,
+					2,
+					0,
+					0
+				];
+				$[20] = t8;
+			} else t8 = $[20];
+			let t9;
+			if ($[21] !== color) {
+				t9 = /* @__PURE__ */ jsx(Bar, {
 					dataKey: "value",
 					fill: color,
-					radius: [
-						2,
-						2,
-						0,
-						0
+					radius: t8
+				});
+				$[21] = color;
+				$[22] = t9;
+			} else t9 = $[22];
+			let t10;
+			if ($[23] !== commonProps || $[24] !== t4 || $[25] !== t9) {
+				t10 = /* @__PURE__ */ jsxs(BarChart, {
+					...commonProps,
+					children: [
+						t4,
+						t5,
+						t6,
+						t7,
+						t9
 					]
-				})
-			]
-		});
-		case "pie": return /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
-			data,
-			dataKey: "value",
-			nameKey: "name",
-			cx: "50%",
-			cy: "50%",
-			outerRadius: 60,
-			label: ({ name }) => name,
-			labelLine: false,
-			stroke: "var(--color-background)",
-			strokeWidth: 2,
-			children: data.map((entry) => /* @__PURE__ */ jsx(Cell, { fill: CHART_COLORS[data.indexOf(entry) % CHART_COLORS.length] }, `cell-${entry.name}`))
-		}), /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) })] });
+				});
+				$[23] = commonProps;
+				$[24] = t4;
+				$[25] = t9;
+				$[26] = t10;
+			} else t10 = $[26];
+			return t10;
+		}
+		case "pie": {
+			let t4;
+			if ($[27] !== data) {
+				t4 = data.map((entry) => /* @__PURE__ */ jsx(Cell, { fill: CHART_COLORS[data.indexOf(entry) % CHART_COLORS.length] }, `cell-${entry.name}`));
+				$[27] = data;
+				$[28] = t4;
+			} else t4 = $[28];
+			let t5;
+			if ($[29] !== data || $[30] !== t4) {
+				t5 = /* @__PURE__ */ jsx(Pie, {
+					data,
+					dataKey: "value",
+					nameKey: "name",
+					cx: "50%",
+					cy: "50%",
+					outerRadius: 60,
+					label: _temp4,
+					labelLine: false,
+					stroke: "var(--color-background)",
+					strokeWidth: 2,
+					children: t4
+				});
+				$[29] = data;
+				$[30] = t4;
+				$[31] = t5;
+			} else t5 = $[31];
+			let t6;
+			if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+				t6 = /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) });
+				$[32] = t6;
+			} else t6 = $[32];
+			let t7;
+			if ($[33] !== t5) {
+				t7 = /* @__PURE__ */ jsxs(PieChart, { children: [t5, t6] });
+				$[33] = t5;
+				$[34] = t7;
+			} else t7 = $[34];
+			return t7;
+		}
 		case "area":
-		default: return /* @__PURE__ */ jsxs(AreaChart, {
-			...commonProps,
-			children: [
-				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+		default: {
+			let t4;
+			if ($[35] !== showGrid) {
+				t4 = showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
 					strokeDasharray: "3 3",
 					stroke: "var(--color-border)",
 					opacity: .5
-				}),
-				/* @__PURE__ */ jsx(XAxis, {
+				});
+				$[35] = showGrid;
+				$[36] = t4;
+			} else t4 = $[36];
+			let t5;
+			let t6;
+			if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+				t5 = /* @__PURE__ */ jsx(XAxis, {
 					dataKey: "name",
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
+				});
+				t6 = /* @__PURE__ */ jsx(YAxis, {
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				}),
-				/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
-				/* @__PURE__ */ jsx(Area, {
+				});
+				$[37] = t5;
+				$[38] = t6;
+			} else {
+				t5 = $[37];
+				t6 = $[38];
+			}
+			let t7;
+			if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+				t7 = /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) });
+				$[39] = t7;
+			} else t7 = $[39];
+			let t8;
+			if ($[40] !== color) {
+				t8 = /* @__PURE__ */ jsx(Area, {
 					type: "monotone",
 					dataKey: "value",
 					stroke: color,
 					fill: color,
 					fillOpacity: .15
-				})
-			]
-		});
+				});
+				$[40] = color;
+				$[41] = t8;
+			} else t8 = $[41];
+			let t9;
+			if ($[42] !== commonProps || $[43] !== t4 || $[44] !== t8) {
+				t9 = /* @__PURE__ */ jsxs(AreaChart, {
+					...commonProps,
+					children: [
+						t4,
+						t5,
+						t6,
+						t7,
+						t8
+					]
+				});
+				$[42] = commonProps;
+				$[43] = t4;
+				$[44] = t8;
+				$[45] = t9;
+			} else t9 = $[45];
+			return t9;
+		}
 	}
 }
 /**
 * Format date based on time range for grouping
 */
+function _temp4(t0) {
+	const { name } = t0;
+	return name;
+}
 function formatDateForRange(date, timeRange) {
 	const months = [
 		"Jan",
@@ -278,5 +579,4 @@ function formatDateForRange(date, timeRange) {
 }
 
 //#endregion
-export { ChartWidget as default };
-//# sourceMappingURL=chart-widget.mjs.map
+export { ChartWidget as default };