@object-ui/plugin-charts 3.1.3 → 3.1.5

package/dist/ChartImpl-0VlpsMWG.js

@@ -0,0 +1,134 @@
+import { t as e } from "./jsx-runtime-C8d0IhUE.js";
+import { Y as t, d as n, en as r, f as i, sn as a, t as o, u as s, v as c } from "./BarChart-XZkfLmcU.js";
+//#region src/ChartImpl.tsx
+var l = e();
+function u({ data: e = [], dataKey: u = "value", xAxisKey: d = "name", height: f = 400, className: p = "", color: m = "hsl(var(--primary))" }) {
+	return /* @__PURE__ */ (0, l.jsx)("div", {
+		className: `p-2 sm:p-3 md:p-4 rounded-xl border border-border bg-card/40 backdrop-blur-sm shadow-lg shadow-background/5 ${p}`,
+		children: /* @__PURE__ */ (0, l.jsx)(a, {
+			width: "100%",
+			height: f,
+			children: /* @__PURE__ */ (0, l.jsxs)(o, {
+				data: e,
+				margin: {
+					top: 10,
+					right: 10,
+					left: 10,
+					bottom: 5
+				},
+				children: [
+					/* @__PURE__ */ (0, l.jsxs)("defs", { children: [/* @__PURE__ */ (0, l.jsxs)("linearGradient", {
+						id: "barGradient",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [
+							/* @__PURE__ */ (0, l.jsx)("stop", {
+								offset: "0%",
+								stopColor: m,
+								stopOpacity: 1
+							}),
+							/* @__PURE__ */ (0, l.jsx)("stop", {
+								offset: "90%",
+								stopColor: m,
+								stopOpacity: .6
+							}),
+							/* @__PURE__ */ (0, l.jsx)("stop", {
+								offset: "100%",
+								stopColor: m,
+								stopOpacity: .3
+							})
+						]
+					}), /* @__PURE__ */ (0, l.jsxs)("filter", {
+						id: "glow",
+						height: "130%",
+						children: [
+							/* @__PURE__ */ (0, l.jsx)("feGaussianBlur", {
+								in: "SourceAlpha",
+								stdDeviation: "3",
+								result: "blur"
+							}),
+							/* @__PURE__ */ (0, l.jsx)("feOffset", {
+								in: "blur",
+								dx: "0",
+								dy: "0",
+								result: "offsetBlur"
+							}),
+							/* @__PURE__ */ (0, l.jsx)("feFlood", {
+								floodColor: m,
+								floodOpacity: "0.5",
+								result: "offsetColor"
+							}),
+							/* @__PURE__ */ (0, l.jsx)("feComposite", {
+								in: "offsetColor",
+								in2: "offsetBlur",
+								operator: "in",
+								result: "offsetBlur"
+							}),
+							/* @__PURE__ */ (0, l.jsxs)("feMerge", { children: [/* @__PURE__ */ (0, l.jsx)("feMergeNode", { in: "offsetBlur" }), /* @__PURE__ */ (0, l.jsx)("feMergeNode", { in: "SourceGraphic" })] })
+						]
+					})] }),
+					/* @__PURE__ */ (0, l.jsx)(c, {
+						strokeDasharray: "3 3",
+						stroke: "hsl(var(--border))",
+						vertical: !1
+					}),
+					/* @__PURE__ */ (0, l.jsx)(n, {
+						dataKey: d,
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12,
+							fontFamily: "monospace"
+						},
+						tickLine: !1,
+						axisLine: { stroke: "hsl(var(--border))" },
+						dy: 10
+					}),
+					/* @__PURE__ */ (0, l.jsx)(s, {
+						tick: {
+							fill: "hsl(var(--muted-foreground))",
+							fontSize: 12,
+							fontFamily: "monospace"
+						},
+						tickLine: !1,
+						axisLine: !1
+					}),
+					/* @__PURE__ */ (0, l.jsx)(t, {
+						cursor: {
+							fill: "hsl(var(--muted))",
+							opacity: .2
+						},
+						contentStyle: {
+							backgroundColor: "hsl(var(--popover))",
+							borderColor: "hsl(var(--border))",
+							color: "hsl(var(--popover-foreground))",
+							borderRadius: "8px",
+							fontFamily: "monospace",
+							boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+						},
+						itemStyle: { color: "hsl(var(--primary))" }
+					}),
+					/* @__PURE__ */ (0, l.jsx)(r, { wrapperStyle: {
+						paddingTop: "20px",
+						fontFamily: "monospace"
+					} }),
+					/* @__PURE__ */ (0, l.jsx)(i, {
+						dataKey: u,
+						fill: "url(#barGradient)",
+						radius: [
+							4,
+							4,
+							0,
+							0
+						],
+						filter: "url(#glow)",
+						animationDuration: 1500
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { u as default };

package/dist/index.js

@@ -1,8 +1,409 @@
-import "@object-ui/core";
-import { C as t, a as o, O as s, c as C } from "./index-CYV5Bp-d.js";
-export {
-  t as ChartBarRenderer,
-  o as ChartRenderer,
-  s as ObjectChart,
-  C as chartComponents
+import { t as e } from "./jsx-runtime-C8d0IhUE.js";
+import { ComponentRegistry as t, extractRecords as n } from "@object-ui/core";
+import r, { Suspense as i, useContext as a, useEffect as o, useState as s } from "react";
+import { Skeleton as c } from "@object-ui/components";
+import { SchemaRendererContext as l, useDataScope as u } from "@object-ui/react";
+//#region src/ChartRenderer.tsx
+var d = e(), f = r.lazy(() => import("./ChartImpl-0VlpsMWG.js")), p = r.lazy(() => import("./AdvancedChartImpl-DmHTUUVD.js")), m = ({ schema: e }) => /* @__PURE__ */ (0, d.jsx)(i, {
+	fallback: /* @__PURE__ */ (0, d.jsx)(c, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
+	children: /* @__PURE__ */ (0, d.jsx)(f, {
+		data: e.data,
+		dataKey: e.dataKey,
+		xAxisKey: e.xAxisKey,
+		height: e.height,
+		className: e.className,
+		color: e.color
+	})
+}), h = ({ schema: e }) => {
+	let t = r.useMemo(() => {
+		let t = e.series, n = e.xAxisKey, r = e.config;
+		if (n || (e.index ? n = e.index : e.category && (n = e.category)), t || (e.categories ? t = e.categories.map((e) => ({ dataKey: e })) : e.value && (t = [{ dataKey: e.value }])), !r && t) {
+			let n = e.colors || [
+				"hsl(var(--chart-1))",
+				"hsl(var(--chart-2))",
+				"hsl(var(--chart-3))"
+			], i = {};
+			t.forEach((e, t) => {
+				i[e.dataKey] = {
+					label: e.dataKey,
+					color: n[t % n.length]
+				};
+			}), r = i;
+		}
+		return {
+			chartType: e.chartType,
+			data: Array.isArray(e.data) ? e.data : [],
+			config: r,
+			xAxisKey: n,
+			series: t,
+			className: e.className
+		};
+	}, [e]);
+	return /* @__PURE__ */ (0, d.jsx)(i, {
+		fallback: /* @__PURE__ */ (0, d.jsx)(c, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
+		children: /* @__PURE__ */ (0, d.jsx)(p, {
+			chartType: t.chartType,
+			data: t.data,
+			config: t.config,
+			xAxisKey: t.xAxisKey,
+			series: t.series,
+			className: t.className
+		})
+	});
 };
+//#endregion
+//#region src/ObjectChart.tsx
+function g(e, t) {
+	let { field: n, function: r, groupBy: i } = t, a = {};
+	for (let t of e) {
+		let e = String(t[i] ?? "Unknown");
+		a[e] || (a[e] = []), a[e].push(t);
+	}
+	return Object.entries(a).map(([e, t]) => {
+		let a = t.map((e) => Number(e[n]) || 0), o;
+		switch (r) {
+			case "count":
+				o = t.length;
+				break;
+			case "avg":
+				o = a.length > 0 ? a.reduce((e, t) => e + t, 0) / a.length : 0;
+				break;
+			case "min":
+				o = a.length > 0 ? Math.min(...a) : 0;
+				break;
+			case "max":
+				o = a.length > 0 ? Math.max(...a) : 0;
+				break;
+			default:
+				o = a.reduce((e, t) => e + t, 0);
+				break;
+		}
+		return {
+			[i]: e,
+			[n]: o
+		};
+	});
+}
+var _ = (e) => {
+	let { schema: t } = e, r = a(l), i = e.dataSource || r?.dataSource, c = u(t.bind), [f, p] = s([]), [m, _] = s(!1);
+	o(() => {
+		let e = !0;
+		return t.objectName && !c && !t.data && (async () => {
+			if (!(!i || !t.objectName)) {
+				e && _(!0);
+				try {
+					let r;
+					if (t.aggregate && typeof i.aggregate == "function") {
+						let e = await i.aggregate(t.objectName, {
+							field: t.aggregate.field,
+							function: t.aggregate.function,
+							groupBy: t.aggregate.groupBy,
+							filter: t.filter
+						});
+						r = Array.isArray(e) ? e : [];
+					} else if (typeof i.find == "function") r = n(await i.find(t.objectName, { $filter: t.filter })), t.aggregate && r.length > 0 && (r = g(r, t.aggregate));
+					else return;
+					e && p(r);
+				} catch (e) {
+					console.error("[ObjectChart] Fetch error:", e);
+				} finally {
+					e && _(!1);
+				}
+			}
+		})(), () => {
+			e = !1;
+		};
+	}, [
+		t.objectName,
+		i,
+		c,
+		t.data,
+		t.filter,
+		t.aggregate
+	]);
+	let v = c || t.data || f, y = Array.isArray(v) ? v : [], b = {
+		...t,
+		data: y
+	};
+	return m && y.length === 0 ? /* @__PURE__ */ (0, d.jsx)("div", {
+		className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (t.className || ""),
+		children: "Loading chart data…"
+	}) : !i && t.objectName && y.length === 0 ? /* @__PURE__ */ (0, d.jsxs)("div", {
+		className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (t.className || ""),
+		children: [
+			"No data source available for \"",
+			t.objectName,
+			"\""
+		]
+	}) : /* @__PURE__ */ (0, d.jsx)(h, {
+		...e,
+		schema: b
+	});
+};
+t.register("object-chart", _, {
+	namespace: "plugin-charts",
+	label: "Object Chart",
+	category: "view",
+	inputs: [
+		{
+			name: "objectName",
+			type: "string",
+			label: "Object Name",
+			required: !0
+		},
+		{
+			name: "data",
+			type: "array",
+			label: "Data",
+			description: "Optional static data"
+		},
+		{
+			name: "filter",
+			type: "array",
+			label: "Filter"
+		},
+		{
+			name: "aggregate",
+			type: "object",
+			label: "Aggregate",
+			description: "Aggregation config: { field, function, groupBy }"
+		}
+	]
+});
+//#endregion
+//#region src/index.tsx
+var v = {
+	"bar-chart": m,
+	chart: h
+};
+t.register("bar-chart", m, {
+	namespace: "plugin-charts",
+	label: "Bar Chart",
+	category: "plugin",
+	inputs: [
+		{
+			name: "data",
+			type: "array",
+			label: "Data",
+			required: !0
+		},
+		{
+			name: "dataKey",
+			type: "string",
+			label: "Data Key",
+			defaultValue: "value"
+		},
+		{
+			name: "xAxisKey",
+			type: "string",
+			label: "X-Axis Key",
+			defaultValue: "name"
+		},
+		{
+			name: "height",
+			type: "number",
+			label: "Height",
+			defaultValue: 400
+		},
+		{
+			name: "color",
+			type: "color",
+			label: "Color",
+			defaultValue: "#8884d8"
+		}
+	],
+	defaultProps: {
+		data: [
+			{
+				name: "Jan",
+				value: 400
+			},
+			{
+				name: "Feb",
+				value: 300
+			},
+			{
+				name: "Mar",
+				value: 600
+			},
+			{
+				name: "Apr",
+				value: 800
+			},
+			{
+				name: "May",
+				value: 500
+			}
+		],
+		dataKey: "value",
+		xAxisKey: "name",
+		height: 400,
+		color: "#8884d8"
+	}
+}), t.register("chart", _, {
+	namespace: "view",
+	category: "view",
+	label: "Chart",
+	inputs: [
+		{
+			name: "objectName",
+			type: "string",
+			label: "Object Name",
+			required: !0
+		},
+		{
+			name: "type",
+			type: "string",
+			label: "Chart Type"
+		},
+		{
+			name: "categoryField",
+			type: "string",
+			label: "Category Field"
+		},
+		{
+			name: "valueField",
+			type: "string",
+			label: "Value Field"
+		}
+	]
+}), t.register("chart", h, {
+	namespace: "plugin-charts",
+	label: "Chart",
+	category: "plugin",
+	inputs: [
+		{
+			name: "chartType",
+			type: "enum",
+			label: "Chart Type",
+			enum: [
+				{
+					label: "Bar",
+					value: "bar"
+				},
+				{
+					label: "Line",
+					value: "line"
+				},
+				{
+					label: "Area",
+					value: "area"
+				},
+				{
+					label: "Pie",
+					value: "pie"
+				},
+				{
+					label: "Donut",
+					value: "donut"
+				},
+				{
+					label: "Radar",
+					value: "radar"
+				},
+				{
+					label: "Scatter",
+					value: "scatter"
+				}
+			],
+			defaultValue: "bar"
+		},
+		{
+			name: "data",
+			type: "code",
+			label: "Data (JSON)",
+			required: !0
+		},
+		{
+			name: "config",
+			type: "code",
+			label: "Config (JSON)"
+		},
+		{
+			name: "xAxisKey",
+			type: "string",
+			label: "X Axis Key",
+			defaultValue: "name"
+		},
+		{
+			name: "series",
+			type: "code",
+			label: "Series (JSON Array)",
+			required: !0
+		},
+		{
+			name: "className",
+			type: "string",
+			label: "CSS Class"
+		}
+	],
+	defaultProps: {
+		chartType: "bar",
+		data: [
+			{
+				name: "Jan",
+				sales: 400,
+				revenue: 240
+			},
+			{
+				name: "Feb",
+				sales: 300,
+				revenue: 139
+			},
+			{
+				name: "Mar",
+				sales: 600,
+				revenue: 380
+			},
+			{
+				name: "Apr",
+				sales: 800,
+				revenue: 430
+			},
+			{
+				name: "May",
+				sales: 500,
+				revenue: 220
+			}
+		],
+		config: {
+			sales: {
+				label: "Sales",
+				color: "#8884d8"
+			},
+			revenue: {
+				label: "Revenue",
+				color: "#82ca9d"
+			}
+		},
+		xAxisKey: "name",
+		series: [{ dataKey: "sales" }, { dataKey: "revenue" }]
+	}
+}), t.register("chart:bar", h, {
+	namespace: "plugin-charts",
+	label: "Bar Chart (Alias)",
+	category: "plugin",
+	defaultProps: { chartType: "bar" }
+}), t.register("pie-chart", h, {
+	namespace: "plugin-charts",
+	label: "Pie Chart",
+	category: "plugin",
+	defaultProps: { chartType: "pie" }
+}), t.register("donut-chart", h, {
+	namespace: "plugin-charts",
+	label: "Donut Chart",
+	category: "plugin",
+	defaultProps: { chartType: "donut" }
+}), t.register("radar-chart", h, {
+	namespace: "plugin-charts",
+	label: "Radar Chart",
+	category: "plugin",
+	defaultProps: { chartType: "radar" }
+}), t.register("scatter-chart", h, {
+	namespace: "plugin-charts",
+	label: "Scatter Chart",
+	category: "plugin",
+	defaultProps: { chartType: "scatter" }
+});
+//#endregion
+export { m as ChartBarRenderer, h as ChartRenderer, _ as ObjectChart, v as chartComponents };