@fluid-app/rep-widgets 0.1.16 → 0.1.17

package/dist/ChartWidget-DhAVW8w4.cjs

@@ -0,0 +1,432 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _fluid_app_ui_primitives = require("@fluid-app/ui-primitives");
+let recharts = require("recharts");
+let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
+//#region src/widgets/ChartWidget.tsx
+var ChartWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	ChartWidget: () => ChartWidget,
+	chartWidgetPropertySchema: () => chartWidgetPropertySchema
+});
+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", 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)(_fluid_app_ui_primitives.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartTooltipContent, {}) }),
+					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.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)(_fluid_app_ui_primitives.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartTooltipContent, {}) }),
+					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.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)(_fluid_app_ui_primitives.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartTooltipContent, {}) }),
+					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.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)(_fluid_app_ui_primitives.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartTooltipContent, { hideLabel: true }) }),
+				showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.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)(_fluid_app_ui_primitives.ChartTooltip, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartTooltipContent, {}) }),
+					showLegend && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartLegend, { content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.ChartLegendContent, {}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Bar, {
+						dataKey,
+						fill: "var(--color-value)",
+						radius: 8
+					})
+				]
+			});
+		}
+	})();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.Card, {
+		className: `bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${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-bold`,
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `text-${descriptionFontSize} text-${descriptionColor}`,
+					children: description
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_ui_primitives.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"
+		},
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "titleFontSize",
+			label: "Title Font Size",
+			description: "Font size for the chart title",
+			defaultValue: "lg",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		(0, _fluid_app_rep_core_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"
+		},
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "descriptionFontSize",
+			label: "Description Font Size",
+			description: "Font size for the chart description",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Description"
+		}),
+		(0, _fluid_app_rep_core_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"
+		},
+		(0, _fluid_app_rep_core_registries.getHeightField)({
+			key: "height",
+			label: "Height",
+			description: "Height of the chart",
+			min: 50,
+			max: 1200,
+			step: 10,
+			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"
+		},
+		(0, _fluid_app_rep_core_registries.getPaddingField)({
+			key: "padding",
+			label: "Padding",
+			description: "Padding for the chart container",
+			defaultValue: 4,
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_rep_core_registries.getBorderRadiusField)({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the chart container",
+			defaultValue: "md",
+			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, "ChartWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return ChartWidget_exports;
+	}
+});
+Object.defineProperty(exports, "chartWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return chartWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=ChartWidget-DhAVW8w4.cjs.map

package/dist/ChartWidget-DhAVW8w4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartWidget-DhAVW8w4.cjs","names":["RechartsBarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Bar","RechartsLineChart","Line","RechartsAreaChart","Area","RechartsPieChart","Pie","Card","ChartContainer"],"sources":["../src/widgets/ChartWidget.tsx"],"sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n  Card,\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@fluid-app/ui-primitives\";\nimport type { ComponentProps } from \"react\";\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  Line,\n  LineChart as RechartsLineChart,\n  Area,\n  AreaChart as RechartsAreaChart,\n  Pie,\n  PieChart as RechartsPieChart,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n} from \"recharts\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getHeightField,\n  getPaddingField,\n} from \"../core/fields\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\n\ntype ChartDataPoint = Record<string, unknown>;\n\ntype ChartWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  title?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Description\n  description?: string;\n  descriptionFontSize?: FontSizeOptions;\n  descriptionColor?: ColorOptions;\n\n  // Design\n  chartType?: \"bar\" | \"line\" | \"area\" | \"pie\";\n  showLegend?: boolean;\n  showTooltip?: boolean;\n  showGrid?: boolean;\n  width?: string;\n  height?: string;\n  background?: BackgroundValue;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Data\n  dataKey?: string;\n  xAxisKey?: string;\n  /** Chart data - when provided via dataSource, this overrides defaultData */\n  data?: ChartDataPoint[];\n  /** Chart configuration - can be dynamically provided via dataSource */\n  chartConfig?: Record<string, { label: string; color: string }>;\n};\n\n// Default sample data for demonstration\nconst defaultData = [\n  { name: \"Jan\", value: 186 },\n  { name: \"Feb\", value: 305 },\n  { name: \"Mar\", value: 237 },\n  { name: \"Apr\", value: 273 },\n  { name: \"May\", value: 209 },\n  { name: \"Jun\", value: 214 },\n];\n\n// Pie chart data with individual fill properties\nconst defaultPieData = [\n  { name: \"Jan\", value: 186, fill: \"var(--chart-1)\" },\n  { name: \"Feb\", value: 305, fill: \"var(--chart-2)\" },\n  { name: \"Mar\", value: 237, fill: \"var(--chart-3)\" },\n  { name: \"Apr\", value: 273, fill: \"var(--chart-4)\" },\n  { name: \"May\", value: 209, fill: \"var(--chart-5)\" },\n];\n\nconst defaultChartConfig = {\n  value: {\n    label: \"Value\",\n    color: \"var(--chart-1)\",\n  },\n};\n\nexport function ChartWidget({\n  titleEnabled = true,\n  title = \"Chart Widget\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  description = \"Displaying sample data\",\n  descriptionFontSize = \"md\",\n  descriptionColor = \"foreground\",\n\n  chartType = \"bar\",\n  showLegend = false,\n  showTooltip = true,\n  showGrid = true,\n  width = \"100%\",\n  height = \"300px\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  padding = 4,\n  borderRadius = \"md\",\n\n  dataKey = \"value\",\n  xAxisKey = \"name\",\n  data,\n  chartConfig,\n  className,\n  ...props\n}: ChartWidgetProps) {\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n  // Use provided data or fall back to default\n  const chartData = data ?? defaultData;\n  const chartPieData =\n    chartType === \"pie\" && data\n      ? data.map((item, index) => ({\n          ...item,\n          fill: `var(--chart-${(index % 5) + 1})`,\n        }))\n      : defaultPieData;\n  const config = chartConfig ?? defaultChartConfig;\n  const chartElement = (() => {\n    switch (chartType) {\n      case \"bar\":\n        return (\n          <RechartsBarChart data={chartData}>\n            {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n            <XAxis dataKey={xAxisKey} />\n            <YAxis />\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Bar dataKey={dataKey} fill=\"var(--color-value)\" radius={8} />\n          </RechartsBarChart>\n        );\n\n      case \"line\":\n        return (\n          <RechartsLineChart data={chartData}>\n            {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n            <XAxis dataKey={xAxisKey} />\n            <YAxis />\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Line\n              type=\"monotone\"\n              dataKey={dataKey}\n              stroke=\"var(--color-value)\"\n              strokeWidth={2}\n              dot={{ r: 4 }}\n            />\n          </RechartsLineChart>\n        );\n\n      case \"area\":\n        return (\n          <RechartsAreaChart data={chartData}>\n            {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n            <XAxis dataKey={xAxisKey} />\n            <YAxis />\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Area\n              type=\"monotone\"\n              dataKey={dataKey}\n              stroke=\"var(--color-value)\"\n              fill=\"var(--color-value)\"\n              fillOpacity={0.6}\n            />\n          </RechartsAreaChart>\n        );\n\n      case \"pie\":\n        return (\n          <RechartsPieChart>\n            {showTooltip && (\n              <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Pie\n              data={chartPieData}\n              dataKey={dataKey}\n              nameKey={xAxisKey}\n              cx=\"50%\"\n              cy=\"50%\"\n              outerRadius={80}\n              label\n            />\n          </RechartsPieChart>\n        );\n\n      default:\n        // Fallback to bar chart for unknown chart types\n        return (\n          <RechartsBarChart data={chartData}>\n            {showGrid && <CartesianGrid strokeDasharray=\"3 3\" />}\n            <XAxis dataKey={xAxisKey} />\n            <YAxis />\n            {showTooltip && <ChartTooltip content={<ChartTooltipContent />} />}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            <Bar dataKey={dataKey} fill=\"var(--color-value)\" radius={8} />\n          </RechartsBarChart>\n        );\n    }\n  })();\n\n  return (\n    <Card\n      className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className}`}\n      style={{\n        width,\n        maxWidth: \"100%\",\n        backgroundImage,\n      }}\n      {...props}\n    >\n      <div className=\"p-6\">\n        <div className=\"mb-4\">\n          {titleEnabled && (\n            <h3\n              className={`text-${titleFontSize} text-${titleColor} font-bold`}\n            >\n              {title}\n            </h3>\n          )}\n          {description && (\n            <p\n              className={`text-${descriptionFontSize} text-${descriptionColor}`}\n            >\n              {description}\n            </p>\n          )}\n        </div>\n        <ChartContainer config={config} style={{ height }}>\n          {chartElement}\n        </ChartContainer>\n      </div>\n    </Card>\n  );\n}\n\nexport const chartWidgetPropertySchema = {\n  widgetType: \"ChartWidget\",\n  displayName: \"Chart\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"data\", \"chartConfig\"],\n  fields: [\n    // Content Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the chart\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"The chart title\",\n      defaultValue: \"Chart Widget\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      key: \"titleFontSize\",\n      label: \"Title Font Size\",\n      description: \"Font size for the chart title\",\n      defaultValue: \"lg\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the chart title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Content Tab - Description Group\n    {\n      key: \"description\",\n      label: \"Description\",\n      type: \"textarea\",\n      description: \"The chart description\",\n      rows: 2,\n      defaultValue: \"Displaying sample data\",\n      tab: \"styling\",\n      group: \"Description\",\n    },\n    getFontSizeField({\n      key: \"descriptionFontSize\",\n      label: \"Description Font Size\",\n      description: \"Font size for the chart description\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Description\",\n    }),\n    getColorField({\n      key: \"descriptionColor\",\n      label: \"Description Color\",\n      description: \"Color for the chart description\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Description\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      key: \"chartType\",\n      label: \"Chart Type\",\n      type: \"select\",\n      description: \"Type of chart to display\",\n      options: [\n        { label: \"Bar Chart\", value: \"bar\" },\n        { label: \"Line Chart\", value: \"line\" },\n        { label: \"Area Chart\", value: \"area\" },\n        { label: \"Pie Chart\", value: \"pie\" },\n      ],\n      defaultValue: \"bar\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"showLegend\",\n      label: \"Show Legend\",\n      type: \"boolean\",\n      description: \"Display chart legend\",\n      defaultValue: false,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"showTooltip\",\n      label: \"Show Tooltip\",\n      type: \"boolean\",\n      description: \"Display tooltip on hover\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"showGrid\",\n      label: \"Show Grid\",\n      type: \"boolean\",\n      description: \"Display background grid lines\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"width\",\n      label: \"Width\",\n      type: \"text\",\n      description:\n        \"Width of the chart container (CSS value, e.g., 100%, 600px)\",\n      defaultValue: \"100%\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getHeightField({\n      key: \"height\",\n      label: \"Height\",\n      description: \"Height of the chart\",\n      min: 50,\n      max: 1200,\n      step: 10,\n      defaultValue: \"300px\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"separator2\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the chart container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding for the chart container\",\n      defaultValue: 4,\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      label: \"Border Radius\",\n      description: \"Border radius for the chart container\",\n      defaultValue: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Data Tab - Data Group\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure dynamic data fetching from an API\",\n      tab: \"data\",\n      group: \"Data\",\n    },\n    {\n      key: \"dataKey\",\n      label: \"Data Key\",\n      type: \"select\",\n      description: \"Key in the data to use for chart values\",\n      options: [{ label: \"value\", value: \"value\" }],\n      defaultValue: \"value\",\n      tab: \"data\",\n      group: \"Data\",\n    },\n    {\n      key: \"xAxisKey\",\n      label: \"X-Axis Key\",\n      type: \"select\",\n      description: \"Key in the data to use for X-axis labels\",\n      options: [{ label: \"name\", value: \"name\" }],\n      defaultValue: \"name\",\n      tab: \"data\",\n      group: \"Data\",\n    },\n  ],\n} satisfies WidgetPropertySchema;\n"],"mappings":"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AAC;EAGF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACR;uDACgB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EAGF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS;IACP;KAAE,OAAO;KAAa,OAAO;KAAO;IACpC;KAAE,OAAO;KAAc,OAAO;KAAQ;IACtC;KAAE,OAAO;KAAc,OAAO;KAAQ;IACtC;KAAE,OAAO;KAAa,OAAO;KAAO;IACrC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aACE;GACF,cAAc;GACd,KAAK;GACL,OAAO;GACR;qDACc;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EAGF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CAAC;IAAE,OAAO;IAAS,OAAO;IAAS,CAAC;GAC7C,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CAAC;IAAE,OAAO;IAAQ,OAAO;IAAQ,CAAC;GAC3C,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACF;CACF"}