@questpie/admin 3.2.3 → 3.2.5

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

@@ -7,12 +7,17 @@ import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
 import { useServerWidgetData } from "../../hooks/use-server-widget-data.mjs";
 import { WidgetEmptyState } from "./widget-empty-state.mjs";
 import { ChartWidgetSkeleton } from "./widget-skeletons.mjs";
-import { c } from "react/compiler-runtime";
-import "react";
+import * as React from "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)",
@@ -23,36 +28,26 @@ const CHART_COLORS = [
 /**
 * Custom tooltip component matching shadcn style
 */
-function ChartTooltip(t0) {
-	const $ = c(7);
-	const { active, payload, label } = t0;
+function ChartTooltip({ active, payload, label }) {
 	if (!active || !payload?.length) return null;
-	let t1;
-	if ($[0] !== label) {
-		t1 = /* @__PURE__ */ jsx("p", {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border bg-background border px-3 py-2 text-xs shadow-md",
+		children: [/* @__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;
+		}), payload.map((entry) => /* @__PURE__ */ jsxs("p", {
+			className: "text-muted-foreground",
+			children: [
+				entry.name,
+				":",
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "text-foreground font-medium",
+					children: entry.value
+				})
+			]
+		}, String(entry.name)))]
+	});
 }
 /**
 * Chart widget component
@@ -62,569 +57,226 @@ function ChartTooltip(t0) {
 * - 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(63);
-	const { config } = t0;
+function ChartWidget({ config }) {
 	const resolveText = useResolveText();
 	const { t, locale } = useTranslation();
-	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);
-	const t7 = !!collection && !hasLoader;
-	let t8;
-	if ($[3] !== t7) {
-		t8 = { schemaQueryOptions: { enabled: t7 } };
-		$[3] = t7;
-		$[4] = t8;
-	} else t8 = $[4];
-	const { fields } = useCollectionFields(collection, t8);
+	const { collection, field, chartType = "area", timeRange = "30d", label, color = "var(--color-chart-1)", showGrid = true, realtime, hasLoader, refreshInterval } = config;
+	const serverQuery = useServerWidgetData(config.id, {
+		enabled: !!hasLoader,
+		refreshInterval
+	});
+	const { fields } = useCollectionFields(collection, { schemaQueryOptions: { enabled: !!collection && !hasLoader } });
 	const fieldDef = fields[field];
 	const fieldType = fieldDef?.name;
 	const selectOptions = fieldDef?.["~options"]?.options;
-	let t9;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = { limit: 1e3 };
-		$[5] = t9;
-	} else t9 = $[5];
-	const t10 = !hasLoader;
-	let t11;
-	if ($[6] !== t10) {
-		t11 = { enabled: t10 };
-		$[6] = t10;
-		$[7] = t11;
-	} else t11 = $[7];
-	let t12;
-	if ($[8] !== realtime) {
-		t12 = { realtime };
-		$[8] = realtime;
-		$[9] = t12;
-	} else t12 = $[9];
-	const collectionQuery = useCollectionList(collection, t9, t11, t12);
+	const collectionQuery = useCollectionList(collection, { limit: 1e3 }, { enabled: !hasLoader }, { realtime });
 	const { isLoading, error, refetch, isFetching } = hasLoader ? serverQuery : collectionQuery;
-	let t13;
-	bb0: {
-		if (hasLoader) {
-			let t14$2;
-			if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-				t14$2 = [];
-				$[10] = t14$2;
-			} else t14$2 = $[10];
-			t13 = t14$2;
-			break bb0;
-		}
-		let t14$1;
-		if ($[11] !== collectionQuery.data) {
-			t14$1 = Array.isArray(collectionQuery.data?.docs) ? collectionQuery.data.docs : [];
-			$[11] = collectionQuery.data;
-			$[12] = t14$1;
-		} else t14$1 = $[12];
-		t13 = t14$1;
-	}
-	const collectionItems = t13;
-	let t14;
-	if ($[13] !== collection || $[14] !== config.title || $[15] !== field || $[16] !== label || $[17] !== resolveText) {
-		t14 = config.title ? resolveText(config.title) : label ? resolveText(label) : `${formatLabel(collection)} by ${field}`;
-		$[13] = collection;
-		$[14] = config.title;
-		$[15] = field;
-		$[16] = label;
-		$[17] = resolveText;
-		$[18] = t14;
-	} else t14 = $[18];
-	const displayLabel = t14;
-	let t15;
-	bb1: {
-		if (hasLoader) {
-			let t16$2;
-			if ($[19] !== serverQuery.data) {
-				t16$2 = serverQuery.data ?? [];
-				$[19] = serverQuery.data;
-				$[20] = t16$2;
-			} else t16$2 = $[20];
-			t15 = t16$2;
-			break bb1;
-		}
-		if (!collectionItems.length) {
-			let t16$2;
-			if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-				t16$2 = [];
-				$[21] = t16$2;
-			} else t16$2 = $[21];
-			t15 = t16$2;
-			break bb1;
-		}
-		let t16$1;
-		if ($[22] !== collectionItems || $[23] !== field || $[24] !== fieldType || $[25] !== locale || $[26] !== resolveText || $[27] !== selectOptions || $[28] !== t || $[29] !== timeRange) {
-			const grouped = collectionItems.reduce((acc, item) => {
-				const value = item[field];
-				if (value === void 0 || value === null) return acc;
-				let key;
-				if (fieldType === "select") key = resolveOptionLabelForValue({
-					value,
-					options: selectOptions,
-					resolveText,
-					t,
-					locale
-				});
-				else 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;
-			}, {});
-			t16$1 = Object.entries(grouped).map(_temp2).sort(_temp3);
-			$[22] = collectionItems;
-			$[23] = field;
-			$[24] = fieldType;
-			$[25] = locale;
-			$[26] = resolveText;
-			$[27] = selectOptions;
-			$[28] = t;
-			$[29] = timeRange;
-			$[30] = t16$1;
-		} else t16$1 = $[30];
-		t15 = t16$1;
-	}
-	const chartData = t15;
-	let t16;
-	if ($[31] !== t) {
-		t16 = t("widget.chart.emptyTitle");
-		$[31] = t;
-		$[32] = t16;
-	} else t16 = $[32];
-	let t17;
-	if ($[33] !== t) {
-		t17 = t("widget.chart.emptyDescription");
-		$[33] = t;
-		$[34] = t17;
-	} else t17 = $[34];
-	let t18;
-	if ($[35] !== t16 || $[36] !== t17) {
-		t18 = /* @__PURE__ */ jsx(WidgetEmptyState, {
-			iconName: "ph:chart-line",
-			title: t16,
-			description: t17,
-			className: "min-h-48"
-		});
-		$[35] = t16;
-		$[36] = t17;
-		$[37] = t18;
-	} else t18 = $[37];
-	const emptyContent = t18;
-	let t19;
-	if ($[38] !== chartData || $[39] !== chartType || $[40] !== color || $[41] !== emptyContent || $[42] !== showGrid) {
-		t19 = 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
-				})
+	const collectionItems = React.useMemo(() => {
+		if (hasLoader) return [];
+		return Array.isArray(collectionQuery.data?.docs) ? collectionQuery.data.docs : [];
+	}, [hasLoader, collectionQuery.data]);
+	const displayLabel = config.title ? resolveText(config.title) : label ? resolveText(label) : `${formatLabel(collection)} by ${field}`;
+	const chartData = React.useMemo(() => {
+		if (hasLoader) 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 (fieldType === "select") key = resolveOptionLabelForValue({
+				value,
+				options: selectOptions,
+				resolveText,
+				t,
+				locale
+			});
+			else 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));
+	}, [
+		hasLoader,
+		serverQuery.data,
+		collectionItems,
+		field,
+		fieldType,
+		selectOptions,
+		resolveText,
+		t,
+		locale,
+		timeRange
+	]);
+	const emptyContent = /* @__PURE__ */ jsx(WidgetEmptyState, {
+		iconName: "ph:chart-line",
+		title: t("widget.chart.emptyTitle"),
+		description: t("widget.chart.emptyDescription"),
+		className: "min-h-48"
+	});
+	const chartContent = 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
 			})
-		});
-		$[38] = chartData;
-		$[39] = chartType;
-		$[40] = color;
-		$[41] = emptyContent;
-		$[42] = showGrid;
-		$[43] = t19;
-	} else t19 = $[43];
-	const chartContent = t19;
-	let t20;
-	if ($[44] !== config.description || $[45] !== resolveText) {
-		t20 = config.description ? resolveText(config.description) : void 0;
-		$[44] = config.description;
-		$[45] = resolveText;
-		$[46] = t20;
-	} else t20 = $[46];
-	const t21 = isFetching && !isLoading;
-	let t22;
-	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
-		t22 = /* @__PURE__ */ jsx(ChartWidgetSkeleton, {});
-		$[47] = t22;
-	} else t22 = $[47];
-	let t23;
-	if ($[48] !== error) {
-		t23 = error instanceof Error ? error : error ? new Error(String(error)) : null;
-		$[48] = error;
-		$[49] = t23;
-	} else t23 = $[49];
-	let t24;
-	if ($[50] !== refetch) {
-		t24 = () => refetch();
-		$[50] = refetch;
-		$[51] = t24;
-	} else t24 = $[51];
-	let t25;
-	if ($[52] !== chartContent || $[53] !== config.actions || $[54] !== config.cardVariant || $[55] !== config.className || $[56] !== displayLabel || $[57] !== isLoading || $[58] !== t20 || $[59] !== t21 || $[60] !== t23 || $[61] !== t24) {
-		t25 = /* @__PURE__ */ jsx(WidgetCard, {
-			title: displayLabel,
-			description: t20,
-			variant: config.cardVariant,
-			isLoading,
-			isRefreshing: t21,
-			loadingSkeleton: t22,
-			error: t23,
-			onRefresh: t24,
-			actions: config.actions,
-			className: config.className,
-			children: chartContent
-		});
-		$[52] = chartContent;
-		$[53] = config.actions;
-		$[54] = config.cardVariant;
-		$[55] = config.className;
-		$[56] = displayLabel;
-		$[57] = isLoading;
-		$[58] = t20;
-		$[59] = t21;
-		$[60] = t23;
-		$[61] = t24;
-		$[62] = t25;
-	} else t25 = $[62];
-	return t25;
+		})
+	});
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title: displayLabel,
+		description: config.description ? resolveText(config.description) : void 0,
+		variant: config.cardVariant,
+		isLoading,
+		isRefreshing: isFetching && !isLoading,
+		loadingSkeleton: /* @__PURE__ */ jsx(ChartWidgetSkeleton, {}),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		actions: config.actions,
+		className: config.className,
+		children: chartContent
+	});
 }
 /**
 * 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 = {
+function ChartRenderer({ type, data, color, showGrid }) {
+	const commonProps = {
+		data,
+		margin: {
 			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;
+		}
+	};
+	const axisStyle = {
+		fontSize: 10,
+		fill: "var(--color-muted-foreground)"
+	};
 	switch (type) {
-		case "line": {
-			let t4;
-			if ($[4] !== showGrid) {
-				t4 = showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+		case "line": return /* @__PURE__ */ jsxs(LineChart, {
+			...commonProps,
+			children: [
+				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, {
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
 					dataKey: "name",
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				});
-				t6 = /* @__PURE__ */ jsx(YAxis, {
+				}),
+				/* @__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, {
+				}),
+				/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
+				/* @__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, {
+				})
+			]
+		});
+		case "bar": return /* @__PURE__ */ jsxs(BarChart, {
+			...commonProps,
+			children: [
+				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, {
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
 					dataKey: "name",
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				});
-				t6 = /* @__PURE__ */ jsx(YAxis, {
+				}),
+				/* @__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, {
+				}),
+				/* @__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, {
+				}),
+				/* @__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
+					radius: [
+						2,
+						2,
+						0,
+						0
 					]
-				});
-				$[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 "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, {}) })] });
 		case "area":
-		default: {
-			let t4;
-			if ($[35] !== showGrid) {
-				t4 = showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+		default: return /* @__PURE__ */ jsxs(AreaChart, {
+			...commonProps,
+			children: [
+				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, {
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
 					dataKey: "name",
 					tick: axisStyle,
 					tickLine: false,
 					axisLine: false
-				});
-				t6 = /* @__PURE__ */ jsx(YAxis, {
+				}),
+				/* @__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, {
+				}),
+				/* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartTooltip, {}) }),
+				/* @__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",