require("./chunk-9hOWP6kD.cjs");
const require_registries = require("./registries-DBb6VjAX.cjs");
const require_src = require("./src-BFJg9F_s.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
let recharts = require("recharts");
//#region ../widgets/src/widgets/ChartWidget.tsx
const defaultData = [
	{
		name: "Jan",
		value: 186
	},
	{
		name: "Feb",
		value: 305
	},
	{
		name: "Mar",
		value: 237
	},
	{
		name: "Apr",
		value: 273
	},
	{
		name: "May",
		value: 209
	},
	{
		name: "Jun",
		value: 214
	}
];
const defaultPieData = [
	{
		name: "Jan",
		value: 186,
		fill: "var(--chart-1)"
	},
	{
		name: "Feb",
		value: 305,
		fill: "var(--chart-2)"
	},
	{
		name: "Mar",
		value: 237,
		fill: "var(--chart-3)"
	},
	{
		name: "Apr",
		value: 273,
		fill: "var(--chart-4)"
	},
	{
		name: "May",
		value: 209,
		fill: "var(--chart-5)"
	}
];
const defaultChartConfig = { value: {
	label: "Value",
	color: "var(--chart-1)"
} };
function ChartWidget({ titleEnabled = true, title = "Chart Widget", titleFontSize = "lg", titleColor = "foreground", description = "Displaying sample data", descriptionFontSize = "md", descriptionColor = "foreground", chartType = "bar", showLegend = false, showTooltip = true, showGrid = true, width = "100%", height = "300px", background = {
	type: "solid",
	color: "background"
}, padding = 4, borderRadius = "md", borderWidth = "none", borderColor = "muted", dataKey = "value", xAxisKey = "name", data, chartConfig, className, ...props }) {
	const backgroundColor = background.color || "background";
	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
	const chartData = data ?? defaultData;
	const chartPieData = chartType === "pie" && data ? data.map((item, index) => ({
		...item,
		fill: `var(--chart-${index % 5 + 1})`
	})) : defaultPieData;
	const config = chartConfig ?? defaultChartConfig;
	const chartElement = (() => {
		switch (chartType) {
			case "bar": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
				data: chartData,
				children: [
					showGrid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, { dataKey: xAxisKey }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {}),
					showTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltipContent, {}) }),
					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegendContent, {}) }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
						dataKey,
						fill: "var(--color-value)",
						radius: 8
					})
				]
			});
			case "line": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.LineChart, {
				data: chartData,
				children: [
					showGrid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, { dataKey: xAxisKey }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {}),
					showTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltipContent, {}) }),
					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegendContent, {}) }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Line, {
						type: "monotone",
						dataKey,
						stroke: "var(--color-value)",
						strokeWidth: 2,
						dot: { r: 4 }
					})
				]
			});
			case "area": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.AreaChart, {
				data: chartData,
				children: [
					showGrid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, { dataKey: xAxisKey }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {}),
					showTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltipContent, {}) }),
					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegendContent, {}) }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Area, {
						type: "monotone",
						dataKey,
						stroke: "var(--color-value)",
						fill: "var(--color-value)",
						fillOpacity: .6
					})
				]
			});
			case "pie": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.PieChart, { children: [
				showTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltipContent, { hideLabel: true }) }),
				showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegendContent, {}) }),
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Pie, {
					data: chartPieData,
					dataKey,
					nameKey: xAxisKey,
					cx: "50%",
					cy: "50%",
					outerRadius: 80,
					label: true
				})
			] });
			default: return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(recharts.BarChart, {
				data: chartData,
				children: [
					showGrid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.XAxis, { dataKey: xAxisKey }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.YAxis, {}),
					showTooltip && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartTooltipContent, {}) }),
					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartLegendContent, {}) }),
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
						dataKey,
						fill: "var(--color-value)",
						radius: 8
					})
				]
			});
		}
	})();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Card, {
		className: `bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${require_registries.borderWidthClasses[borderWidth]} ${borderWidth !== "none" ? require_registries.borderColorClasses[borderColor] : ""} ${className}`,
		style: {
			width,
			maxWidth: "100%",
			backgroundImage
		},
		...props,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
			className: "p-6",
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
				className: "mb-4",
				children: [titleEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
					className: `text-${titleFontSize} text-${titleColor} font-header font-bold`,
					children: title
				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
					className: `text-${descriptionFontSize} text-${descriptionColor}`,
					children: description
				})]
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.ChartContainer, {
				config,
				style: { height },
				children: chartElement
			})]
		})
	});
}
const chartWidgetPropertySchema = {
	widgetType: "ChartWidget",
	displayName: "Chart",
	tabsConfig: [{
		id: "styling",
		label: "Styling"
	}, {
		id: "data",
		label: "Data"
	}],
	dataSourceTargetProps: ["data", "chartConfig"],
	fields: [
		{
			key: "titleEnabled",
			label: "Widget Title",
			type: "boolean",
			description: "Enable the title displayed above the chart",
			defaultValue: true,
			tab: "styling",
			group: "Title"
		},
		{
			key: "title",
			label: "Title",
			type: "text",
			description: "The chart title",
			defaultValue: "Chart Widget",
			tab: "styling",
			group: "Title",
			requiresKeyToBeTrue: "titleEnabled"
		},
		require_registries.getFontSizeField({
			key: "titleFontSize",
			label: "Title Font Size",
			description: "Font size for the chart title",
			defaultValue: "lg",
			tab: "styling",
			group: "Title",
			requiresKeyToBeTrue: "titleEnabled"
		}),
		require_registries.getColorField({
			key: "titleColor",
			label: "Title Color",
			description: "Color for the chart title",
			defaultValue: "foreground",
			tab: "styling",
			group: "Title",
			requiresKeyToBeTrue: "titleEnabled"
		}),
		{
			key: "description",
			label: "Description",
			type: "textarea",
			description: "The chart description",
			rows: 2,
			defaultValue: "Displaying sample data",
			tab: "styling",
			group: "Description"
		},
		require_registries.getFontSizeField({
			key: "descriptionFontSize",
			label: "Description Font Size",
			description: "Font size for the chart description",
			defaultValue: "md",
			tab: "styling",
			group: "Description"
		}),
		require_registries.getColorField({
			key: "descriptionColor",
			label: "Description Color",
			description: "Color for the chart description",
			defaultValue: "foreground",
			tab: "styling",
			group: "Description"
		}),
		{
			key: "chartType",
			label: "Chart Type",
			type: "select",
			description: "Type of chart to display",
			options: [
				{
					label: "Bar Chart",
					value: "bar"
				},
				{
					label: "Line Chart",
					value: "line"
				},
				{
					label: "Area Chart",
					value: "area"
				},
				{
					label: "Pie Chart",
					value: "pie"
				}
			],
			defaultValue: "bar",
			tab: "styling",
			group: "Design"
		},
		{
			key: "showLegend",
			label: "Show Legend",
			type: "boolean",
			description: "Display chart legend",
			defaultValue: false,
			tab: "styling",
			group: "Design"
		},
		{
			key: "showTooltip",
			label: "Show Tooltip",
			type: "boolean",
			description: "Display tooltip on hover",
			defaultValue: true,
			tab: "styling",
			group: "Design"
		},
		{
			key: "showGrid",
			label: "Show Grid",
			type: "boolean",
			description: "Display background grid lines",
			defaultValue: true,
			tab: "styling",
			group: "Design"
		},
		{
			key: "separator",
			type: "separator",
			label: "Separator",
			tab: "styling",
			group: "Design"
		},
		{
			key: "width",
			label: "Width",
			type: "text",
			description: "Width of the chart container (CSS value, e.g., 100%, 600px)",
			defaultValue: "100%",
			tab: "styling",
			group: "Design"
		},
		require_registries.getHeightField({
			key: "height",
			label: "Height",
			description: "Height of the chart",
			defaultValue: "300px",
			tab: "styling",
			group: "Design"
		}),
		{
			key: "separator2",
			type: "separator",
			label: "Separator",
			tab: "styling",
			group: "Design"
		},
		{
			type: "background",
			key: "background",
			label: "Background",
			description: "Background for the chart container",
			defaultValue: "background",
			tab: "styling",
			group: "Design"
		},
		require_registries.getPaddingField({
			key: "padding",
			label: "Padding",
			description: "Padding for the chart container",
			defaultValue: 4,
			tab: "styling",
			group: "Design"
		}),
		require_registries.getBorderRadiusField({
			key: "borderRadius",
			label: "Border Radius",
			description: "Border radius for the chart container",
			defaultValue: "md",
			tab: "styling",
			group: "Design"
		}),
		require_registries.getBorderWidthField({
			key: "borderWidth",
			label: "Border Width",
			description: "Border width for the widget",
			defaultValue: "none",
			tab: "styling",
			group: "Design"
		}),
		require_registries.getBorderColorField({
			key: "borderColor",
			label: "Border Color",
			description: "Border color for the widget",
			defaultValue: "muted",
			tab: "styling",
			group: "Design"
		}),
		{
			key: "dataSource",
			label: "Data Source",
			type: "dataSource",
			description: "Configure dynamic data fetching from an API",
			tab: "data",
			group: "Data"
		},
		{
			key: "dataKey",
			label: "Data Key",
			type: "select",
			description: "Key in the data to use for chart values",
			options: [{
				label: "value",
				value: "value"
			}],
			defaultValue: "value",
			tab: "data",
			group: "Data"
		},
		{
			key: "xAxisKey",
			label: "X-Axis Key",
			type: "select",
			description: "Key in the data to use for X-axis labels",
			options: [{
				label: "name",
				value: "name"
			}],
			defaultValue: "name",
			tab: "data",
			group: "Data"
		}
	]
};
//#endregion
Object.defineProperty(exports, "ChartWidget", {
	enumerable: true,
	get: function() {
		return ChartWidget;
	}
});
Object.defineProperty(exports, "chartWidgetPropertySchema", {
	enumerable: true,
	get: function() {
		return chartWidgetPropertySchema;
	}
});

//# sourceMappingURL=ChartWidget-Brxz8j4Q.cjs.map