@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,582 @@
+import { useResolveText } from "../../i18n/hooks.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 { 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
+const CHART_COLORS = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+];
+/**
+* Custom tooltip component matching shadcn style
+*/
+function ChartTooltip(t0) {
+	const $ = c(7);
+	const { active, payload, label } = t0;
+	if (!active || !payload?.length) return null;
+	let t1;
+	if ($[0] !== label) {
+		t1 = /* @__PURE__ */ jsx("p", {
+			className: "text-foreground font-medium",
+			children: label
+		});
+		$[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
+*
+* Displays:
+* - Time series data visualization
+* - Multiple chart types (line, bar, area, pie)
+* - Configurable time ranges
+*/
+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: 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;
+}
+/**
+* Renders the appropriate chart type as a proper component
+*/
+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
+		};
+		$[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": {
+			let t4;
+			if ($[4] !== showGrid) {
+				t4 = showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border)",
+					opacity: .5
+				});
+				$[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
+				});
+				t6 = /* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				});
+				$[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
+				});
+				$[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
+				});
+				$[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
+				});
+				t6 = /* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				});
+				$[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
+					}
+				});
+				$[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: 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
+					]
+				});
+				$[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: {
+			let t4;
+			if ($[35] !== showGrid) {
+				t4 = showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+					strokeDasharray: "3 3",
+					stroke: "var(--color-border)",
+					opacity: .5
+				});
+				$[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
+				});
+				t6 = /* @__PURE__ */ jsx(YAxis, {
+					tick: axisStyle,
+					tickLine: false,
+					axisLine: false
+				});
+				$[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",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec"
+	];
+	switch (timeRange) {
+		case "7d": return `${[
+			"Sun",
+			"Mon",
+			"Tue",
+			"Wed",
+			"Thu",
+			"Fri",
+			"Sat"
+		][date.getDay()]} ${date.getDate()}`;
+		case "30d": return `${months[date.getMonth()]} ${date.getDate()}`;
+		case "90d": return `W${Math.ceil(date.getDate() / 7)} ${months[date.getMonth()]}`;
+		case "1y": return `${months[date.getMonth()]} ${date.getFullYear()}`;
+		default: return `${months[date.getMonth()]} ${date.getDate()}`;
+	}
+}
+
+//#endregion
+export { ChartWidget as default };