@object-ui/plugin-charts 4.3.0 → 4.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/dist/index.js +299 -272
- package/dist/index.umd.cjs +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,43 @@
|
|
|
1
1
|
# @object-ui/plugin-charts
|
|
2
2
|
|
|
3
|
+
## 4.5.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [ab5e281]
|
|
8
|
+
- Updated dependencies [6b6afd1]
|
|
9
|
+
- Updated dependencies [22fa558]
|
|
10
|
+
- Updated dependencies [aa7855f]
|
|
11
|
+
- Updated dependencies [170d89f]
|
|
12
|
+
- @object-ui/types@4.5.0
|
|
13
|
+
- @object-ui/components@4.5.0
|
|
14
|
+
- @object-ui/i18n@4.5.0
|
|
15
|
+
- @object-ui/core@4.5.0
|
|
16
|
+
- @object-ui/react@4.5.0
|
|
17
|
+
|
|
18
|
+
## 4.4.0
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies [2bd45af]
|
|
23
|
+
- @object-ui/components@4.4.0
|
|
24
|
+
- @object-ui/types@4.4.0
|
|
25
|
+
- @object-ui/core@4.4.0
|
|
26
|
+
- @object-ui/i18n@4.4.0
|
|
27
|
+
- @object-ui/react@4.4.0
|
|
28
|
+
|
|
29
|
+
## 4.3.1
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies [5f4ac6e]
|
|
34
|
+
- Updated dependencies [6b683c8]
|
|
35
|
+
- @object-ui/i18n@4.3.1
|
|
36
|
+
- @object-ui/components@4.3.1
|
|
37
|
+
- @object-ui/react@4.3.1
|
|
38
|
+
- @object-ui/types@4.3.1
|
|
39
|
+
- @object-ui/core@4.3.1
|
|
40
|
+
|
|
3
41
|
## 4.3.0
|
|
4
42
|
|
|
5
43
|
### Patch Changes
|
package/dist/index.js
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { ComponentRegistry as e, computeDrillFilter as t, extractRecords as n, isDrillEnabled as r, resolveDateMacros as i, resolveDrillTitle as a } from "@object-ui/core";
|
|
2
2
|
import * as o from "react";
|
|
3
3
|
import s, { Suspense as c, useCallback as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
|
|
4
|
-
import { Dialog as h, DialogContent as g, DialogHeader as _, DialogTitle as
|
|
5
|
-
import { Fragment as
|
|
6
|
-
import { Area as
|
|
7
|
-
import { SchemaRenderer as
|
|
8
|
-
import { AlertCircle as
|
|
9
|
-
import { useSafeFieldLabel as
|
|
4
|
+
import { Dialog as h, DialogContent as g, DialogHeader as _, DialogTitle as ee, Sheet as v, SheetContent as y, SheetHeader as te, SheetTitle as b, Skeleton as x } from "@object-ui/components";
|
|
5
|
+
import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
|
|
6
|
+
import { Area as T, AreaChart as ne, Bar as E, BarChart as D, CartesianGrid as O, Cell as k, Funnel as A, FunnelChart as j, LabelList as M, Legend as N, Line as P, LineChart as re, Pie as F, PieChart as I, PolarAngleAxis as L, PolarGrid as R, PolarRadiusAxis as z, Radar as B, RadarChart as ie, ResponsiveContainer as ae, Scatter as oe, ScatterChart as se, Tooltip as ce, XAxis as V, YAxis as H, ZAxis as le } from "recharts";
|
|
7
|
+
import { SchemaRenderer as ue, SchemaRendererContext as de, useDataScope as fe } from "@object-ui/react";
|
|
8
|
+
import { AlertCircle as pe } from "lucide-react";
|
|
9
|
+
import { useSafeFieldLabel as me } from "@object-ui/i18n";
|
|
10
10
|
//#region \0rolldown/runtime.js
|
|
11
|
-
var
|
|
11
|
+
var he = Object.defineProperty, U = (e, t) => () => (e && (t = e(e = 0)), t), ge = (e, t) => {
|
|
12
12
|
let n = {};
|
|
13
|
-
for (var r in e)
|
|
13
|
+
for (var r in e) he(n, r, {
|
|
14
14
|
get: e[r],
|
|
15
15
|
enumerable: !0
|
|
16
16
|
});
|
|
17
|
-
return t ||
|
|
18
|
-
},
|
|
19
|
-
function
|
|
20
|
-
return /* @__PURE__ */
|
|
17
|
+
return t || he(n, Symbol.toStringTag, { value: "Module" }), n;
|
|
18
|
+
}, _e = /* @__PURE__ */ ge({ default: () => ve });
|
|
19
|
+
function ve({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height: r = 400, className: i = "", color: a = "hsl(var(--primary))" }) {
|
|
20
|
+
return /* @__PURE__ */ C("div", {
|
|
21
21
|
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 ${i}`,
|
|
22
|
-
children: /* @__PURE__ */
|
|
22
|
+
children: /* @__PURE__ */ C(ae, {
|
|
23
23
|
width: "100%",
|
|
24
24
|
height: r,
|
|
25
|
-
children: /* @__PURE__ */
|
|
25
|
+
children: /* @__PURE__ */ w(D, {
|
|
26
26
|
data: e,
|
|
27
27
|
margin: {
|
|
28
28
|
top: 10,
|
|
@@ -31,64 +31,64 @@ function ye({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
31
31
|
bottom: 5
|
|
32
32
|
},
|
|
33
33
|
children: [
|
|
34
|
-
/* @__PURE__ */
|
|
34
|
+
/* @__PURE__ */ w("defs", { children: [/* @__PURE__ */ w("linearGradient", {
|
|
35
35
|
id: "barGradient",
|
|
36
36
|
x1: "0",
|
|
37
37
|
y1: "0",
|
|
38
38
|
x2: "0",
|
|
39
39
|
y2: "1",
|
|
40
40
|
children: [
|
|
41
|
-
/* @__PURE__ */
|
|
41
|
+
/* @__PURE__ */ C("stop", {
|
|
42
42
|
offset: "0%",
|
|
43
43
|
stopColor: a,
|
|
44
44
|
stopOpacity: 1
|
|
45
45
|
}),
|
|
46
|
-
/* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ C("stop", {
|
|
47
47
|
offset: "90%",
|
|
48
48
|
stopColor: a,
|
|
49
49
|
stopOpacity: .6
|
|
50
50
|
}),
|
|
51
|
-
/* @__PURE__ */
|
|
51
|
+
/* @__PURE__ */ C("stop", {
|
|
52
52
|
offset: "100%",
|
|
53
53
|
stopColor: a,
|
|
54
54
|
stopOpacity: .3
|
|
55
55
|
})
|
|
56
56
|
]
|
|
57
|
-
}), /* @__PURE__ */
|
|
57
|
+
}), /* @__PURE__ */ w("filter", {
|
|
58
58
|
id: "glow",
|
|
59
59
|
height: "130%",
|
|
60
60
|
children: [
|
|
61
|
-
/* @__PURE__ */
|
|
61
|
+
/* @__PURE__ */ C("feGaussianBlur", {
|
|
62
62
|
in: "SourceAlpha",
|
|
63
63
|
stdDeviation: "3",
|
|
64
64
|
result: "blur"
|
|
65
65
|
}),
|
|
66
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ C("feOffset", {
|
|
67
67
|
in: "blur",
|
|
68
68
|
dx: "0",
|
|
69
69
|
dy: "0",
|
|
70
70
|
result: "offsetBlur"
|
|
71
71
|
}),
|
|
72
|
-
/* @__PURE__ */
|
|
72
|
+
/* @__PURE__ */ C("feFlood", {
|
|
73
73
|
floodColor: a,
|
|
74
74
|
floodOpacity: "0.5",
|
|
75
75
|
result: "offsetColor"
|
|
76
76
|
}),
|
|
77
|
-
/* @__PURE__ */
|
|
77
|
+
/* @__PURE__ */ C("feComposite", {
|
|
78
78
|
in: "offsetColor",
|
|
79
79
|
in2: "offsetBlur",
|
|
80
80
|
operator: "in",
|
|
81
81
|
result: "offsetBlur"
|
|
82
82
|
}),
|
|
83
|
-
/* @__PURE__ */
|
|
83
|
+
/* @__PURE__ */ w("feMerge", { children: [/* @__PURE__ */ C("feMergeNode", { in: "offsetBlur" }), /* @__PURE__ */ C("feMergeNode", { in: "SourceGraphic" })] })
|
|
84
84
|
]
|
|
85
85
|
})] }),
|
|
86
|
-
/* @__PURE__ */
|
|
86
|
+
/* @__PURE__ */ C(O, {
|
|
87
87
|
strokeDasharray: "3 3",
|
|
88
88
|
stroke: "hsl(var(--border))",
|
|
89
89
|
vertical: !1
|
|
90
90
|
}),
|
|
91
|
-
/* @__PURE__ */
|
|
91
|
+
/* @__PURE__ */ C(V, {
|
|
92
92
|
dataKey: n,
|
|
93
93
|
tick: {
|
|
94
94
|
fill: "hsl(var(--muted-foreground))",
|
|
@@ -99,7 +99,7 @@ function ye({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
99
99
|
axisLine: { stroke: "hsl(var(--border))" },
|
|
100
100
|
dy: 10
|
|
101
101
|
}),
|
|
102
|
-
/* @__PURE__ */
|
|
102
|
+
/* @__PURE__ */ C(H, {
|
|
103
103
|
tick: {
|
|
104
104
|
fill: "hsl(var(--muted-foreground))",
|
|
105
105
|
fontSize: 12,
|
|
@@ -108,7 +108,7 @@ function ye({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
108
108
|
tickLine: !1,
|
|
109
109
|
axisLine: !1
|
|
110
110
|
}),
|
|
111
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ C(ce, {
|
|
112
112
|
cursor: {
|
|
113
113
|
fill: "hsl(var(--muted))",
|
|
114
114
|
opacity: .2
|
|
@@ -123,11 +123,11 @@ function ye({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
123
123
|
},
|
|
124
124
|
itemStyle: { color: "hsl(var(--primary))" }
|
|
125
125
|
}),
|
|
126
|
-
/* @__PURE__ */
|
|
126
|
+
/* @__PURE__ */ C(N, { wrapperStyle: {
|
|
127
127
|
paddingTop: "20px",
|
|
128
128
|
fontFamily: "monospace"
|
|
129
129
|
} }),
|
|
130
|
-
/* @__PURE__ */
|
|
130
|
+
/* @__PURE__ */ C(E, {
|
|
131
131
|
dataKey: t,
|
|
132
132
|
fill: "url(#barGradient)",
|
|
133
133
|
radius: [
|
|
@@ -144,32 +144,32 @@ function ye({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
144
144
|
})
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
|
-
var
|
|
147
|
+
var ye = U((() => {}));
|
|
148
148
|
//#endregion
|
|
149
149
|
//#region src/ChartContainerImpl.tsx
|
|
150
|
-
function
|
|
151
|
-
let e = o.useContext(
|
|
150
|
+
function be() {
|
|
151
|
+
let e = o.useContext(Ce);
|
|
152
152
|
if (!e) throw Error("useChart must be used within a <ChartContainer />");
|
|
153
153
|
return e;
|
|
154
154
|
}
|
|
155
|
-
function
|
|
155
|
+
function W({ id: e, className: t, children: n, config: r, ...i }) {
|
|
156
156
|
let a = o.useId(), s = `chart-${e || a.replace(/:/g, "")}`;
|
|
157
|
-
return /* @__PURE__ */
|
|
157
|
+
return /* @__PURE__ */ C(Ce.Provider, {
|
|
158
158
|
value: { config: r },
|
|
159
|
-
children: /* @__PURE__ */
|
|
159
|
+
children: /* @__PURE__ */ w("div", {
|
|
160
160
|
"data-slot": "chart",
|
|
161
161
|
"data-chart": s,
|
|
162
|
-
className:
|
|
162
|
+
className: q("flex w-full h-[350px] justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", t),
|
|
163
163
|
style: {
|
|
164
164
|
minHeight: 280,
|
|
165
165
|
minWidth: 0,
|
|
166
166
|
...i.style
|
|
167
167
|
},
|
|
168
168
|
...i,
|
|
169
|
-
children: [/* @__PURE__ */
|
|
169
|
+
children: [/* @__PURE__ */ C(we, {
|
|
170
170
|
id: s,
|
|
171
171
|
config: r
|
|
172
|
-
}), /* @__PURE__ */
|
|
172
|
+
}), /* @__PURE__ */ C(ae, {
|
|
173
173
|
width: "100%",
|
|
174
174
|
height: "100%",
|
|
175
175
|
children: n
|
|
@@ -177,15 +177,15 @@ function U({ id: e, className: t, children: n, config: r, ...i }) {
|
|
|
177
177
|
})
|
|
178
178
|
});
|
|
179
179
|
}
|
|
180
|
-
function
|
|
181
|
-
let { config: m } =
|
|
180
|
+
function G({ active: e, payload: t, className: n, indicator: r = "dot", hideLabel: i = !1, hideIndicator: a = !1, label: s, labelFormatter: c, labelClassName: l, formatter: u, color: d, nameKey: f, labelKey: p }) {
|
|
181
|
+
let { config: m } = be(), h = o.useMemo(() => {
|
|
182
182
|
if (i || !t?.length) return null;
|
|
183
|
-
let [e] = t, n =
|
|
184
|
-
return c ? /* @__PURE__ */
|
|
185
|
-
className:
|
|
183
|
+
let [e] = t, n = xe(m, e, `${p || e?.dataKey || e?.name || "value"}`), r = !p && typeof s == "string" ? m[s]?.label || s : n?.label;
|
|
184
|
+
return c ? /* @__PURE__ */ C("div", {
|
|
185
|
+
className: q("font-medium", l),
|
|
186
186
|
children: c(r, t)
|
|
187
|
-
}) : r ? /* @__PURE__ */
|
|
188
|
-
className:
|
|
187
|
+
}) : r ? /* @__PURE__ */ C("div", {
|
|
188
|
+
className: q("font-medium", l),
|
|
189
189
|
children: r
|
|
190
190
|
}) : null;
|
|
191
191
|
}, [
|
|
@@ -199,29 +199,29 @@ function W({ active: e, payload: t, className: n, indicator: r = "dot", hideLabe
|
|
|
199
199
|
]);
|
|
200
200
|
if (!e || !t?.length) return null;
|
|
201
201
|
let g = t.length === 1 && r !== "dot";
|
|
202
|
-
return /* @__PURE__ */
|
|
203
|
-
className:
|
|
204
|
-
children: [g ? null : h, /* @__PURE__ */
|
|
202
|
+
return /* @__PURE__ */ w("div", {
|
|
203
|
+
className: q("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", n),
|
|
204
|
+
children: [g ? null : h, /* @__PURE__ */ C("div", {
|
|
205
205
|
className: "grid gap-1.5",
|
|
206
206
|
children: t.filter((e) => e.type !== "none").map((e, t) => {
|
|
207
|
-
let n =
|
|
208
|
-
return /* @__PURE__ */
|
|
209
|
-
className:
|
|
210
|
-
children: u && e?.value !== void 0 && e.name ? u(e.value, e.name, e, t, e.payload) : /* @__PURE__ */
|
|
211
|
-
className:
|
|
207
|
+
let n = xe(m, e, `${f || e.name || e.dataKey || "value"}`), i = d || e.payload.fill || e.color;
|
|
208
|
+
return /* @__PURE__ */ C("div", {
|
|
209
|
+
className: q("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", r === "dot" ? "items-center" : ""),
|
|
210
|
+
children: u && e?.value !== void 0 && e.name ? u(e.value, e.name, e, t, e.payload) : /* @__PURE__ */ w(S, { children: [n?.icon ? /* @__PURE__ */ C(n.icon, {}) : !a && /* @__PURE__ */ C("div", {
|
|
211
|
+
className: q("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", r === "dot" ? "h-2.5 w-2.5" : "", r === "line" ? "w-1" : "", r === "dashed" ? "w-0 border-[1.5px] border-dashed bg-transparent" : "", g && r === "dashed" ? "my-0.5" : ""),
|
|
212
212
|
style: {
|
|
213
213
|
"--color-bg": i,
|
|
214
214
|
"--color-border": i
|
|
215
215
|
}
|
|
216
|
-
}), /* @__PURE__ */
|
|
217
|
-
className:
|
|
218
|
-
children: [/* @__PURE__ */
|
|
216
|
+
}), /* @__PURE__ */ w("div", {
|
|
217
|
+
className: q("flex flex-1 justify-between leading-none", g ? "items-end" : "items-center"),
|
|
218
|
+
children: [/* @__PURE__ */ w("div", {
|
|
219
219
|
className: "grid gap-1.5",
|
|
220
|
-
children: [g ? h : null, /* @__PURE__ */
|
|
220
|
+
children: [g ? h : null, /* @__PURE__ */ C("span", {
|
|
221
221
|
className: "text-muted-foreground",
|
|
222
222
|
children: n?.label || e.name
|
|
223
223
|
})]
|
|
224
|
-
}), e.value && /* @__PURE__ */
|
|
224
|
+
}), e.value && /* @__PURE__ */ C("span", {
|
|
225
225
|
className: "text-foreground font-mono font-medium tabular-nums",
|
|
226
226
|
children: e.value.toLocaleString()
|
|
227
227
|
})]
|
|
@@ -231,15 +231,15 @@ function W({ active: e, payload: t, className: n, indicator: r = "dot", hideLabe
|
|
|
231
231
|
})]
|
|
232
232
|
});
|
|
233
233
|
}
|
|
234
|
-
function
|
|
235
|
-
let { config: a } =
|
|
236
|
-
return n?.length ? /* @__PURE__ */
|
|
237
|
-
className:
|
|
234
|
+
function K({ className: e, hideIcon: t = !1, payload: n, verticalAlign: r = "bottom", nameKey: i }) {
|
|
235
|
+
let { config: a } = be();
|
|
236
|
+
return n?.length ? /* @__PURE__ */ C("div", {
|
|
237
|
+
className: q("flex items-center justify-center gap-4", r === "top" ? "pb-3" : "pt-3", e),
|
|
238
238
|
children: n.filter((e) => e.type !== "none").map((e) => {
|
|
239
|
-
let n =
|
|
240
|
-
return /* @__PURE__ */
|
|
241
|
-
className:
|
|
242
|
-
children: [n?.icon && !t ? /* @__PURE__ */
|
|
239
|
+
let n = xe(a, e, `${i || e.dataKey || "value"}`);
|
|
240
|
+
return /* @__PURE__ */ w("div", {
|
|
241
|
+
className: q("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
|
|
242
|
+
children: [n?.icon && !t ? /* @__PURE__ */ C(n.icon, {}) : /* @__PURE__ */ C("div", {
|
|
243
243
|
className: "h-2 w-2 shrink-0 rounded-[2px]",
|
|
244
244
|
style: { backgroundColor: e.color }
|
|
245
245
|
}), n?.label]
|
|
@@ -247,18 +247,18 @@ function G({ className: e, hideIcon: t = !1, payload: n, verticalAlign: r = "bot
|
|
|
247
247
|
})
|
|
248
248
|
}) : null;
|
|
249
249
|
}
|
|
250
|
-
function
|
|
250
|
+
function xe(e, t, n) {
|
|
251
251
|
if (typeof t != "object" || !t) return;
|
|
252
252
|
let r = "payload" in t && typeof t.payload == "object" && t.payload !== null ? t.payload : void 0, i = n;
|
|
253
253
|
return n in t && typeof t[n] == "string" ? i = t[n] : r && n in r && typeof r[n] == "string" && (i = r[n]), i in e ? e[i] : e[n];
|
|
254
254
|
}
|
|
255
|
-
var
|
|
256
|
-
|
|
255
|
+
var q, Se, Ce, we, J, Y, Te = U((() => {
|
|
256
|
+
q = (...e) => e.filter(Boolean).join(" "), Se = {
|
|
257
257
|
light: "",
|
|
258
258
|
dark: ".dark"
|
|
259
|
-
},
|
|
259
|
+
}, Ce = o.createContext(null), we = ({ id: e, config: t }) => {
|
|
260
260
|
let n = Object.entries(t).filter(([, e]) => e.theme || e.color);
|
|
261
|
-
return n.length ? /* @__PURE__ */
|
|
261
|
+
return n.length ? /* @__PURE__ */ C("style", { dangerouslySetInnerHTML: { __html: Object.entries(Se).map(([t, r]) => `
|
|
262
262
|
${r} [data-chart=${e}] {
|
|
263
263
|
${n.map(([e, n]) => {
|
|
264
264
|
let r = n.theme?.[t] || n.color;
|
|
@@ -266,9 +266,9 @@ ${n.map(([e, n]) => {
|
|
|
266
266
|
}).join("\n")}
|
|
267
267
|
}
|
|
268
268
|
`).join("\n") } }) : null;
|
|
269
|
-
},
|
|
270
|
-
})),
|
|
271
|
-
function
|
|
269
|
+
}, J = ce, Y = N;
|
|
270
|
+
})), Ee = /* @__PURE__ */ ge({ default: () => De });
|
|
271
|
+
function De({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r = "name", series: i = [], className: a = "", onChartClick: s }) {
|
|
272
272
|
let c = e === "column" ? "bar" : e, l = Array.isArray(t) ? t : [], [u, d] = o.useState(!1), f = o.useCallback((e) => {
|
|
273
273
|
if (!s || !e) return;
|
|
274
274
|
let t = Array.isArray(e.activePayload) ? e.activePayload[0] : void 0;
|
|
@@ -301,17 +301,17 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
301
301
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
302
302
|
}, []);
|
|
303
303
|
let g = {
|
|
304
|
-
bar:
|
|
305
|
-
"horizontal-bar":
|
|
306
|
-
line:
|
|
307
|
-
area:
|
|
308
|
-
pie:
|
|
309
|
-
donut:
|
|
310
|
-
radar:
|
|
311
|
-
scatter:
|
|
312
|
-
funnel:
|
|
313
|
-
combo:
|
|
314
|
-
}[c] ||
|
|
304
|
+
bar: D,
|
|
305
|
+
"horizontal-bar": D,
|
|
306
|
+
line: re,
|
|
307
|
+
area: ne,
|
|
308
|
+
pie: I,
|
|
309
|
+
donut: I,
|
|
310
|
+
radar: ie,
|
|
311
|
+
scatter: se,
|
|
312
|
+
funnel: j,
|
|
313
|
+
combo: D
|
|
314
|
+
}[c] || D, _ = o.useCallback((e) => {
|
|
315
315
|
if (e == null || e === "") return "";
|
|
316
316
|
let t = typeof e == "string" ? e : String(e);
|
|
317
317
|
if (/^\d{4}-\d{2}-\d{2}/.test(t)) {
|
|
@@ -336,24 +336,60 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
336
336
|
l,
|
|
337
337
|
r,
|
|
338
338
|
u
|
|
339
|
-
]),
|
|
339
|
+
]), ee = o.useMemo(() => l.some((e) => String(e[r] || "").length > 5), [l, r]), v = () => [
|
|
340
340
|
"hsl(var(--chart-1))",
|
|
341
341
|
"hsl(var(--chart-2))",
|
|
342
342
|
"hsl(var(--chart-3))",
|
|
343
343
|
"hsl(var(--chart-4))",
|
|
344
344
|
"hsl(var(--chart-5))"
|
|
345
|
-
]
|
|
345
|
+
], y = o.useCallback((e) => {
|
|
346
|
+
if (e == null || e === "") return "";
|
|
347
|
+
let t = typeof e == "number" ? e : Number(e);
|
|
348
|
+
if (!Number.isFinite(t)) return String(e);
|
|
349
|
+
try {
|
|
350
|
+
return new Intl.NumberFormat(void 0, {
|
|
351
|
+
notation: "compact",
|
|
352
|
+
maximumFractionDigits: 1
|
|
353
|
+
}).format(t);
|
|
354
|
+
} catch {
|
|
355
|
+
return String(t);
|
|
356
|
+
}
|
|
357
|
+
}, []), te = o.useMemo(() => ({
|
|
358
|
+
tickLine: !1,
|
|
359
|
+
tickMargin: 10,
|
|
360
|
+
axisLine: !1,
|
|
361
|
+
interval: "preserveStartEnd",
|
|
362
|
+
minTickGap: u ? 32 : 48,
|
|
363
|
+
tickFormatter: _,
|
|
364
|
+
...!u && ee && {
|
|
365
|
+
angle: -35,
|
|
366
|
+
textAnchor: "end",
|
|
367
|
+
height: 60
|
|
368
|
+
}
|
|
369
|
+
}), [
|
|
370
|
+
u,
|
|
371
|
+
ee,
|
|
372
|
+
_
|
|
373
|
+
]);
|
|
346
374
|
if (c === "pie" || c === "donut") {
|
|
347
|
-
let e = c === "donut" ? 60 : 0;
|
|
348
|
-
return
|
|
349
|
-
|
|
375
|
+
let e = c === "donut" ? 60 : 0, t = v(), o = { ...n };
|
|
376
|
+
return l.forEach((e, n) => {
|
|
377
|
+
let i = e?.[r];
|
|
378
|
+
if (i == null || i === "") return;
|
|
379
|
+
let a = String(i);
|
|
380
|
+
o[a] || (o[a] = {
|
|
381
|
+
label: a,
|
|
382
|
+
color: t[n % t.length]
|
|
383
|
+
});
|
|
384
|
+
}), /* @__PURE__ */ C(W, {
|
|
385
|
+
config: o,
|
|
350
386
|
className: a,
|
|
351
|
-
children: /* @__PURE__ */
|
|
352
|
-
/* @__PURE__ */
|
|
387
|
+
children: /* @__PURE__ */ w(I, { children: [
|
|
388
|
+
/* @__PURE__ */ C(J, {
|
|
353
389
|
cursor: !1,
|
|
354
|
-
content: /* @__PURE__ */
|
|
390
|
+
content: /* @__PURE__ */ C(G, { hideLabel: !0 })
|
|
355
391
|
}),
|
|
356
|
-
/* @__PURE__ */
|
|
392
|
+
/* @__PURE__ */ C(F, {
|
|
357
393
|
data: l,
|
|
358
394
|
dataKey: i[0]?.dataKey || "value",
|
|
359
395
|
nameKey: r || "name",
|
|
@@ -362,39 +398,36 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
362
398
|
paddingAngle: 2,
|
|
363
399
|
outerRadius: 80,
|
|
364
400
|
...h,
|
|
365
|
-
children: l.map((e,
|
|
366
|
-
let i =
|
|
367
|
-
|
|
368
|
-
let e = y();
|
|
369
|
-
i = e[t % e.length];
|
|
370
|
-
}
|
|
371
|
-
return /* @__PURE__ */ S(O, { fill: X(i) }, `cell-${t}`);
|
|
401
|
+
children: l.map((e, n) => {
|
|
402
|
+
let i = o[String(e[r])]?.color;
|
|
403
|
+
return i ||= t[n % t.length], /* @__PURE__ */ C(k, { fill: Z(i) }, `cell-${n}`);
|
|
372
404
|
})
|
|
373
405
|
}),
|
|
374
|
-
/* @__PURE__ */
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
406
|
+
/* @__PURE__ */ C(Y, {
|
|
407
|
+
verticalAlign: "bottom",
|
|
408
|
+
wrapperStyle: {
|
|
409
|
+
fontSize: u ? "11px" : "12px",
|
|
410
|
+
paddingTop: "8px"
|
|
411
|
+
},
|
|
412
|
+
content: /* @__PURE__ */ C(K, {
|
|
413
|
+
nameKey: r,
|
|
414
|
+
className: "flex-wrap"
|
|
415
|
+
})
|
|
383
416
|
})
|
|
384
417
|
] })
|
|
385
418
|
});
|
|
386
419
|
}
|
|
387
420
|
if (c === "funnel") {
|
|
388
|
-
let e = i[0]?.dataKey || "value", t =
|
|
421
|
+
let e = i[0]?.dataKey || "value", t = v(), o = s ? (t) => {
|
|
389
422
|
t && s({
|
|
390
423
|
category: t?.payload?.[r] ?? t?.[r],
|
|
391
424
|
value: t?.payload?.[e] ?? t?.[e]
|
|
392
425
|
});
|
|
393
426
|
} : void 0;
|
|
394
|
-
return /* @__PURE__ */
|
|
427
|
+
return /* @__PURE__ */ C(W, {
|
|
395
428
|
config: n,
|
|
396
429
|
className: a,
|
|
397
|
-
children: /* @__PURE__ */
|
|
430
|
+
children: /* @__PURE__ */ w(j, { children: [/* @__PURE__ */ C(J, { content: /* @__PURE__ */ C(G, {}) }), /* @__PURE__ */ w(A, {
|
|
398
431
|
dataKey: e,
|
|
399
432
|
data: l,
|
|
400
433
|
nameKey: r,
|
|
@@ -403,27 +436,27 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
403
436
|
onClick: o,
|
|
404
437
|
style: { cursor: "pointer" }
|
|
405
438
|
} : {},
|
|
406
|
-
children: [/* @__PURE__ */
|
|
439
|
+
children: [/* @__PURE__ */ C(M, {
|
|
407
440
|
position: "right",
|
|
408
441
|
fill: "hsl(var(--foreground))",
|
|
409
442
|
stroke: "none",
|
|
410
443
|
dataKey: r
|
|
411
|
-
}), l.map((e, n) => /* @__PURE__ */
|
|
444
|
+
}), l.map((e, n) => /* @__PURE__ */ C(k, { fill: Z(t[n % t.length]) }, `funnel-cell-${n}`))]
|
|
412
445
|
})] })
|
|
413
446
|
});
|
|
414
447
|
}
|
|
415
|
-
if (c === "radar") return /* @__PURE__ */
|
|
448
|
+
if (c === "radar") return /* @__PURE__ */ C(W, {
|
|
416
449
|
config: n,
|
|
417
450
|
className: a,
|
|
418
|
-
children: /* @__PURE__ */
|
|
451
|
+
children: /* @__PURE__ */ w(ie, {
|
|
419
452
|
data: l,
|
|
420
453
|
children: [
|
|
421
|
-
/* @__PURE__ */
|
|
422
|
-
/* @__PURE__ */
|
|
423
|
-
/* @__PURE__ */
|
|
424
|
-
/* @__PURE__ */
|
|
425
|
-
/* @__PURE__ */
|
|
426
|
-
content: /* @__PURE__ */
|
|
454
|
+
/* @__PURE__ */ C(R, {}),
|
|
455
|
+
/* @__PURE__ */ C(L, { dataKey: r }),
|
|
456
|
+
/* @__PURE__ */ C(z, {}),
|
|
457
|
+
/* @__PURE__ */ C(J, { content: /* @__PURE__ */ C(G, {}) }),
|
|
458
|
+
/* @__PURE__ */ C(Y, {
|
|
459
|
+
content: /* @__PURE__ */ C(K, {}),
|
|
427
460
|
...u && {
|
|
428
461
|
verticalAlign: "bottom",
|
|
429
462
|
wrapperStyle: {
|
|
@@ -433,8 +466,8 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
433
466
|
}
|
|
434
467
|
}),
|
|
435
468
|
i.map((e) => {
|
|
436
|
-
let t =
|
|
437
|
-
return /* @__PURE__ */
|
|
469
|
+
let t = Z(n[e.dataKey]?.color || X);
|
|
470
|
+
return /* @__PURE__ */ C(B, {
|
|
438
471
|
dataKey: e.dataKey,
|
|
439
472
|
stroke: t,
|
|
440
473
|
fill: t,
|
|
@@ -444,33 +477,35 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
444
477
|
]
|
|
445
478
|
})
|
|
446
479
|
});
|
|
447
|
-
if (c === "scatter") return /* @__PURE__ */
|
|
480
|
+
if (c === "scatter") return /* @__PURE__ */ C(W, {
|
|
448
481
|
config: n,
|
|
449
482
|
className: a,
|
|
450
|
-
children: /* @__PURE__ */
|
|
451
|
-
/* @__PURE__ */
|
|
452
|
-
/* @__PURE__ */
|
|
483
|
+
children: /* @__PURE__ */ w(se, { children: [
|
|
484
|
+
/* @__PURE__ */ C(O, { vertical: !1 }),
|
|
485
|
+
/* @__PURE__ */ C(V, {
|
|
453
486
|
type: "number",
|
|
454
487
|
dataKey: r,
|
|
455
488
|
name: String(n[r]?.label || r),
|
|
456
489
|
tickLine: !1,
|
|
457
490
|
axisLine: !1,
|
|
458
|
-
|
|
491
|
+
minTickGap: u ? 32 : 48
|
|
459
492
|
}),
|
|
460
|
-
/* @__PURE__ */
|
|
493
|
+
/* @__PURE__ */ C(H, {
|
|
461
494
|
type: "number",
|
|
462
495
|
dataKey: i[0]?.dataKey || "value",
|
|
463
496
|
name: String(n[i[0]?.dataKey]?.label || i[0]?.dataKey),
|
|
464
497
|
tickLine: !1,
|
|
465
|
-
axisLine: !1
|
|
498
|
+
axisLine: !1,
|
|
499
|
+
tickFormatter: y,
|
|
500
|
+
width: 48
|
|
466
501
|
}),
|
|
467
|
-
/* @__PURE__ */
|
|
502
|
+
/* @__PURE__ */ C(le, {
|
|
468
503
|
type: "number",
|
|
469
504
|
range: [60, 400]
|
|
470
505
|
}),
|
|
471
|
-
/* @__PURE__ */
|
|
472
|
-
/* @__PURE__ */
|
|
473
|
-
content: /* @__PURE__ */
|
|
506
|
+
/* @__PURE__ */ C(J, { content: /* @__PURE__ */ C(G, {}) }),
|
|
507
|
+
/* @__PURE__ */ C(Y, {
|
|
508
|
+
content: /* @__PURE__ */ C(K, {}),
|
|
474
509
|
...u && {
|
|
475
510
|
verticalAlign: "bottom",
|
|
476
511
|
wrapperStyle: {
|
|
@@ -480,8 +515,8 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
480
515
|
}
|
|
481
516
|
}),
|
|
482
517
|
i.map((e, t) => {
|
|
483
|
-
let r =
|
|
484
|
-
return /* @__PURE__ */
|
|
518
|
+
let r = v(), i = Z(n[e.dataKey]?.color || r[t % r.length]);
|
|
519
|
+
return /* @__PURE__ */ C(oe, {
|
|
485
520
|
name: n[e.dataKey]?.label || e.dataKey,
|
|
486
521
|
data: l,
|
|
487
522
|
fill: i
|
|
@@ -489,40 +524,35 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
489
524
|
})
|
|
490
525
|
] })
|
|
491
526
|
});
|
|
492
|
-
if (c === "combo") return /* @__PURE__ */
|
|
527
|
+
if (c === "combo") return /* @__PURE__ */ C(W, {
|
|
493
528
|
config: n,
|
|
494
529
|
className: a,
|
|
495
|
-
children: /* @__PURE__ */
|
|
530
|
+
children: /* @__PURE__ */ w(D, {
|
|
496
531
|
data: l,
|
|
497
532
|
children: [
|
|
498
|
-
/* @__PURE__ */
|
|
499
|
-
/* @__PURE__ */
|
|
533
|
+
/* @__PURE__ */ C(O, { vertical: !1 }),
|
|
534
|
+
/* @__PURE__ */ C(V, {
|
|
500
535
|
dataKey: r,
|
|
501
|
-
|
|
502
|
-
tickMargin: 10,
|
|
503
|
-
axisLine: !1,
|
|
504
|
-
interval: u ? Math.ceil(l.length / 5) : 0,
|
|
505
|
-
tickFormatter: _,
|
|
506
|
-
...!u && v && {
|
|
507
|
-
angle: -35,
|
|
508
|
-
textAnchor: "end",
|
|
509
|
-
height: 60
|
|
510
|
-
}
|
|
536
|
+
...te
|
|
511
537
|
}),
|
|
512
|
-
/* @__PURE__ */
|
|
538
|
+
/* @__PURE__ */ C(H, {
|
|
513
539
|
yAxisId: "left",
|
|
514
540
|
tickLine: !1,
|
|
515
|
-
axisLine: !1
|
|
541
|
+
axisLine: !1,
|
|
542
|
+
tickFormatter: y,
|
|
543
|
+
width: 48
|
|
516
544
|
}),
|
|
517
|
-
/* @__PURE__ */
|
|
545
|
+
/* @__PURE__ */ C(H, {
|
|
518
546
|
yAxisId: "right",
|
|
519
547
|
orientation: "right",
|
|
520
548
|
tickLine: !1,
|
|
521
|
-
axisLine: !1
|
|
549
|
+
axisLine: !1,
|
|
550
|
+
tickFormatter: y,
|
|
551
|
+
width: 48
|
|
522
552
|
}),
|
|
523
|
-
/* @__PURE__ */
|
|
524
|
-
/* @__PURE__ */
|
|
525
|
-
content: /* @__PURE__ */
|
|
553
|
+
/* @__PURE__ */ C(J, { content: /* @__PURE__ */ C(G, {}) }),
|
|
554
|
+
/* @__PURE__ */ C(Y, {
|
|
555
|
+
content: /* @__PURE__ */ C(K, {}),
|
|
526
556
|
...u && {
|
|
527
557
|
verticalAlign: "bottom",
|
|
528
558
|
wrapperStyle: {
|
|
@@ -532,22 +562,22 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
532
562
|
}
|
|
533
563
|
}),
|
|
534
564
|
i.map((e, t) => {
|
|
535
|
-
let r =
|
|
536
|
-
return i === "line" ? /* @__PURE__ */
|
|
565
|
+
let r = Z(n[e.dataKey]?.color || X), i = e.chartType || (t === 0 ? "bar" : "line"), a = i === "bar" ? "left" : "right";
|
|
566
|
+
return i === "line" ? /* @__PURE__ */ C(P, {
|
|
537
567
|
yAxisId: a,
|
|
538
568
|
type: "monotone",
|
|
539
569
|
dataKey: e.dataKey,
|
|
540
570
|
stroke: r,
|
|
541
571
|
strokeWidth: 2,
|
|
542
572
|
dot: !1
|
|
543
|
-
}, e.dataKey) : i === "area" ? /* @__PURE__ */
|
|
573
|
+
}, e.dataKey) : i === "area" ? /* @__PURE__ */ C(T, {
|
|
544
574
|
yAxisId: a,
|
|
545
575
|
type: "monotone",
|
|
546
576
|
dataKey: e.dataKey,
|
|
547
577
|
fill: r,
|
|
548
578
|
stroke: r,
|
|
549
579
|
fillOpacity: .4
|
|
550
|
-
}, e.dataKey) : /* @__PURE__ */
|
|
580
|
+
}, e.dataKey) : /* @__PURE__ */ C(E, {
|
|
551
581
|
yAxisId: a,
|
|
552
582
|
dataKey: e.dataKey,
|
|
553
583
|
fill: r,
|
|
@@ -557,43 +587,40 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
557
587
|
]
|
|
558
588
|
})
|
|
559
589
|
});
|
|
560
|
-
let
|
|
561
|
-
return /* @__PURE__ */
|
|
590
|
+
let b = c === "horizontal-bar";
|
|
591
|
+
return /* @__PURE__ */ C(W, {
|
|
562
592
|
config: n,
|
|
563
593
|
className: a,
|
|
564
|
-
children: /* @__PURE__ */
|
|
594
|
+
children: /* @__PURE__ */ w(g, {
|
|
565
595
|
data: l,
|
|
566
|
-
layout:
|
|
596
|
+
layout: b ? "vertical" : "horizontal",
|
|
567
597
|
...m,
|
|
568
598
|
children: [
|
|
569
|
-
/* @__PURE__ */
|
|
570
|
-
|
|
599
|
+
/* @__PURE__ */ C(O, { vertical: !1 }),
|
|
600
|
+
b ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(V, {
|
|
571
601
|
type: "number",
|
|
572
602
|
tickLine: !1,
|
|
573
|
-
axisLine: !1
|
|
574
|
-
|
|
603
|
+
axisLine: !1,
|
|
604
|
+
tickFormatter: y
|
|
605
|
+
}), /* @__PURE__ */ C(H, {
|
|
575
606
|
type: "category",
|
|
576
607
|
dataKey: r,
|
|
577
608
|
tickLine: !1,
|
|
578
609
|
axisLine: !1,
|
|
579
610
|
width: Math.min(140, Math.max(60, Math.max(...l.map((e) => String(e[r] ?? "").length)) * 7)),
|
|
580
611
|
tickFormatter: _
|
|
581
|
-
})] }) : /* @__PURE__ */ S(
|
|
612
|
+
})] }) : /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(V, {
|
|
582
613
|
dataKey: r,
|
|
614
|
+
...te
|
|
615
|
+
}), /* @__PURE__ */ C(H, {
|
|
583
616
|
tickLine: !1,
|
|
584
|
-
tickMargin: 10,
|
|
585
617
|
axisLine: !1,
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
}
|
|
593
|
-
}),
|
|
594
|
-
/* @__PURE__ */ S(q, { content: /* @__PURE__ */ S(W, {}) }),
|
|
595
|
-
/* @__PURE__ */ S(J, {
|
|
596
|
-
content: /* @__PURE__ */ S(G, {}),
|
|
618
|
+
tickFormatter: y,
|
|
619
|
+
width: 48
|
|
620
|
+
})] }),
|
|
621
|
+
/* @__PURE__ */ C(J, { content: /* @__PURE__ */ C(G, {}) }),
|
|
622
|
+
/* @__PURE__ */ C(Y, {
|
|
623
|
+
content: /* @__PURE__ */ C(K, {}),
|
|
597
624
|
...u && {
|
|
598
625
|
verticalAlign: "bottom",
|
|
599
626
|
wrapperStyle: {
|
|
@@ -603,23 +630,23 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
603
630
|
}
|
|
604
631
|
}),
|
|
605
632
|
i.map((e, t) => {
|
|
606
|
-
let r =
|
|
633
|
+
let r = v(), a = Z(n[e.dataKey]?.color || r[t % r.length] || X);
|
|
607
634
|
if (c === "bar" || c === "horizontal-bar") {
|
|
608
635
|
let t = i.length === 1 && l.length > 1;
|
|
609
|
-
return /* @__PURE__ */
|
|
636
|
+
return /* @__PURE__ */ C(E, {
|
|
610
637
|
dataKey: e.dataKey,
|
|
611
638
|
fill: a,
|
|
612
639
|
radius: 4,
|
|
613
|
-
children: t && l.map((e, t) => /* @__PURE__ */
|
|
640
|
+
children: t && l.map((e, t) => /* @__PURE__ */ C(k, { fill: Z(r[t % r.length]) }, `cell-${t}`))
|
|
614
641
|
}, e.dataKey);
|
|
615
642
|
}
|
|
616
|
-
return c === "line" ? /* @__PURE__ */
|
|
643
|
+
return c === "line" ? /* @__PURE__ */ C(P, {
|
|
617
644
|
type: "monotone",
|
|
618
645
|
dataKey: e.dataKey,
|
|
619
646
|
stroke: a,
|
|
620
647
|
strokeWidth: 2,
|
|
621
648
|
dot: !1
|
|
622
|
-
}, e.dataKey) : c === "area" ? /* @__PURE__ */
|
|
649
|
+
}, e.dataKey) : c === "area" ? /* @__PURE__ */ C(T, {
|
|
623
650
|
type: "monotone",
|
|
624
651
|
dataKey: e.dataKey,
|
|
625
652
|
fill: a,
|
|
@@ -631,8 +658,8 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
631
658
|
})
|
|
632
659
|
});
|
|
633
660
|
}
|
|
634
|
-
var
|
|
635
|
-
|
|
661
|
+
var X, Oe, Z, ke = U((() => {
|
|
662
|
+
Te(), X = "hsl(var(--primary))", Oe = {
|
|
636
663
|
slate: "#64748b",
|
|
637
664
|
gray: "#6b7280",
|
|
638
665
|
zinc: "#71717a",
|
|
@@ -655,10 +682,10 @@ var Y, ke, X, Ae = H((() => {
|
|
|
655
682
|
fuchsia: "#d946ef",
|
|
656
683
|
pink: "#ec4899",
|
|
657
684
|
rose: "#f43f5e"
|
|
658
|
-
},
|
|
659
|
-
})),
|
|
660
|
-
fallback: /* @__PURE__ */
|
|
661
|
-
children: /* @__PURE__ */
|
|
685
|
+
}, Z = (e) => Oe[e] || e;
|
|
686
|
+
})), Ae = s.lazy(() => Promise.resolve().then(() => (ye(), _e))), je = s.lazy(() => Promise.resolve().then(() => (ke(), Ee))), Me = ({ schema: e }) => /* @__PURE__ */ C(c, {
|
|
687
|
+
fallback: /* @__PURE__ */ C(x, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
|
|
688
|
+
children: /* @__PURE__ */ C(Ae, {
|
|
662
689
|
data: e.data,
|
|
663
690
|
dataKey: e.dataKey,
|
|
664
691
|
xAxisKey: e.xAxisKey,
|
|
@@ -666,7 +693,7 @@ var Y, ke, X, Ae = H((() => {
|
|
|
666
693
|
className: e.className,
|
|
667
694
|
color: e.color
|
|
668
695
|
})
|
|
669
|
-
}),
|
|
696
|
+
}), Q = ({ schema: e, onChartClick: t }) => {
|
|
670
697
|
let n = s.useMemo(() => {
|
|
671
698
|
let t = e.series, n = e.xAxisKey, r = e.config;
|
|
672
699
|
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) {
|
|
@@ -691,9 +718,9 @@ var Y, ke, X, Ae = H((() => {
|
|
|
691
718
|
className: e.className
|
|
692
719
|
};
|
|
693
720
|
}, [e]);
|
|
694
|
-
return /* @__PURE__ */
|
|
695
|
-
fallback: /* @__PURE__ */
|
|
696
|
-
children: /* @__PURE__ */
|
|
721
|
+
return /* @__PURE__ */ C(c, {
|
|
722
|
+
fallback: /* @__PURE__ */ C(x, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
|
|
723
|
+
children: /* @__PURE__ */ C(je, {
|
|
697
724
|
chartType: n.chartType,
|
|
698
725
|
data: n.data,
|
|
699
726
|
config: n.config,
|
|
@@ -706,10 +733,10 @@ var Y, ke, X, Ae = H((() => {
|
|
|
706
733
|
};
|
|
707
734
|
//#endregion
|
|
708
735
|
//#region src/ObjectChart.tsx
|
|
709
|
-
function
|
|
736
|
+
function $(e) {
|
|
710
737
|
return e.replace(/[_-]/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
|
|
711
738
|
}
|
|
712
|
-
function
|
|
739
|
+
function Ne(e, t) {
|
|
713
740
|
let { field: n, function: r, groupBy: i } = t, a = {};
|
|
714
741
|
for (let t of e) {
|
|
715
742
|
let e = String(t[i] ?? "Unknown");
|
|
@@ -740,13 +767,13 @@ function Pe(e, t) {
|
|
|
740
767
|
};
|
|
741
768
|
});
|
|
742
769
|
}
|
|
743
|
-
async function
|
|
770
|
+
async function Pe(e, t, r, i, a) {
|
|
744
771
|
if (!e.length || !t) return e;
|
|
745
772
|
let o = a || ((e, t) => t), s = `__raw_${t}`, c = r?.fields?.[t];
|
|
746
773
|
if (!c) {
|
|
747
774
|
let n = /^\d{4}-\d{2}-\d{2}/;
|
|
748
775
|
return e.map((e) => {
|
|
749
|
-
let r = e[t], i = String(r ?? ""), a = n.test(i) ? i :
|
|
776
|
+
let r = e[t], i = String(r ?? ""), a = n.test(i) ? i : $(i);
|
|
750
777
|
return {
|
|
751
778
|
...e,
|
|
752
779
|
[t]: o(i, a),
|
|
@@ -758,7 +785,7 @@ async function Fe(e, t, r, i, a) {
|
|
|
758
785
|
if (l === "select" || l === "picklist" || l === "dropdown") {
|
|
759
786
|
let n = c.options || [];
|
|
760
787
|
if (n.length === 0) return e.map((e) => {
|
|
761
|
-
let n = e[t], r = String(n ?? ""), i =
|
|
788
|
+
let n = e[t], r = String(n ?? ""), i = $(r);
|
|
762
789
|
return {
|
|
763
790
|
...e,
|
|
764
791
|
[t]: o(r, i),
|
|
@@ -768,7 +795,7 @@ async function Fe(e, t, r, i, a) {
|
|
|
768
795
|
let r = {};
|
|
769
796
|
for (let e of n) typeof e == "string" ? r[e] = e : e && typeof e == "object" && (r[String(e.value)] = e.label || String(e.value));
|
|
770
797
|
return e.map((e) => {
|
|
771
|
-
let n = e[t], i = String(n ?? ""), a = r[i] ||
|
|
798
|
+
let n = e[t], i = String(n ?? ""), a = r[i] || $(i);
|
|
772
799
|
return {
|
|
773
800
|
...e,
|
|
774
801
|
[t]: o(i, a),
|
|
@@ -821,19 +848,19 @@ async function Fe(e, t, r, i, a) {
|
|
|
821
848
|
let n = e[t], r = String(n ?? "");
|
|
822
849
|
return {
|
|
823
850
|
...e,
|
|
824
|
-
[t]: u.test(r) ? r :
|
|
851
|
+
[t]: u.test(r) ? r : $(r),
|
|
825
852
|
[s]: n
|
|
826
853
|
};
|
|
827
854
|
});
|
|
828
855
|
}
|
|
829
|
-
var
|
|
830
|
-
let { schema: o } = e, s = u(
|
|
856
|
+
var Fe = (e) => {
|
|
857
|
+
let { schema: o } = e, s = u(de), c = e.dataSource || s?.dataSource, x = fe(o.bind), { fieldOptionLabel: T } = me(), ne = p(T);
|
|
831
858
|
d(() => {
|
|
832
|
-
|
|
833
|
-
}, [
|
|
834
|
-
let [
|
|
859
|
+
ne.current = T;
|
|
860
|
+
}, [T]);
|
|
861
|
+
let [E, D] = m([]), [O, k] = m(!1), [A, j] = m(null), [M, N] = m(null), P = f(() => o.aggregate ? JSON.stringify(o.aggregate) : "", [o.aggregate]), re = f(() => o.filter ? JSON.stringify(o.filter) : "", [o.filter]), F = l(async (e, t) => {
|
|
835
862
|
if (!(!e || !o.objectName)) {
|
|
836
|
-
t.current && (
|
|
863
|
+
t.current && (k(!0), j(null));
|
|
837
864
|
try {
|
|
838
865
|
let r, a = i(o.filter);
|
|
839
866
|
if (o.aggregate && typeof e.aggregate == "function") {
|
|
@@ -844,76 +871,76 @@ var $ = (e) => {
|
|
|
844
871
|
filter: a
|
|
845
872
|
});
|
|
846
873
|
r = Array.isArray(t) ? t : [];
|
|
847
|
-
} else if (typeof e.find == "function") r = n(await e.find(o.objectName, { $filter: a })), o.aggregate && r.length > 0 && (r =
|
|
874
|
+
} else if (typeof e.find == "function") r = n(await e.find(o.objectName, { $filter: a })), o.aggregate && r.length > 0 && (r = Ne(r, o.aggregate));
|
|
848
875
|
else return;
|
|
849
876
|
let s = o.aggregate?.groupBy || o.xAxisKey;
|
|
850
877
|
if (s && typeof e.getObjectSchema == "function") try {
|
|
851
878
|
let t = await e.getObjectSchema(o.objectName);
|
|
852
|
-
r = await
|
|
879
|
+
r = await Pe(r, s, t, e, (e, t) => ne.current(o.objectName, s, e, t));
|
|
853
880
|
} catch {}
|
|
854
|
-
t.current &&
|
|
881
|
+
t.current && D(r);
|
|
855
882
|
} catch (e) {
|
|
856
|
-
console.error("[ObjectChart] Fetch error:", e), t.current &&
|
|
883
|
+
console.error("[ObjectChart] Fetch error:", e), t.current && j(e instanceof Error ? e.message : "Failed to load chart data");
|
|
857
884
|
} finally {
|
|
858
|
-
t.current &&
|
|
885
|
+
t.current && k(!1);
|
|
859
886
|
}
|
|
860
887
|
}
|
|
861
888
|
}, [
|
|
862
889
|
o.objectName,
|
|
863
|
-
|
|
864
|
-
|
|
890
|
+
P,
|
|
891
|
+
re,
|
|
865
892
|
o.xAxisKey
|
|
866
893
|
]);
|
|
867
894
|
d(() => {
|
|
868
895
|
let e = { current: !0 };
|
|
869
|
-
return o.objectName && !
|
|
896
|
+
return o.objectName && !x && !o.data && F(c, e), () => {
|
|
870
897
|
e.current = !1;
|
|
871
898
|
};
|
|
872
899
|
}, [
|
|
873
900
|
o.objectName,
|
|
874
901
|
c,
|
|
875
|
-
|
|
902
|
+
x,
|
|
876
903
|
o.data,
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
904
|
+
re,
|
|
905
|
+
P,
|
|
906
|
+
F
|
|
880
907
|
]);
|
|
881
|
-
let
|
|
882
|
-
if (!
|
|
883
|
-
let e = /* @__PURE__ */ new Map(), t = `__raw_${
|
|
884
|
-
for (let n of
|
|
885
|
-
let r = n?.[
|
|
908
|
+
let I = x || o.data || E, L = Array.isArray(I) ? I : [], R = o.drillDown, z = o.aggregate?.groupBy || o.xAxisKey, B = f(() => {
|
|
909
|
+
if (!z) return /* @__PURE__ */ new Map();
|
|
910
|
+
let e = /* @__PURE__ */ new Map(), t = `__raw_${z}`;
|
|
911
|
+
for (let n of L) {
|
|
912
|
+
let r = n?.[z];
|
|
886
913
|
if (r == null) continue;
|
|
887
914
|
let i = t in (n || {}) ? n[t] : r;
|
|
888
915
|
e.set(String(r), i);
|
|
889
916
|
}
|
|
890
917
|
return e;
|
|
891
|
-
}, [
|
|
918
|
+
}, [L, z]), ie = {
|
|
892
919
|
...o,
|
|
893
|
-
data:
|
|
920
|
+
data: L
|
|
894
921
|
};
|
|
895
|
-
if (
|
|
922
|
+
if (O && L.length === 0) return /* @__PURE__ */ C("div", {
|
|
896
923
|
className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (o.className || ""),
|
|
897
924
|
"data-testid": "chart-loading",
|
|
898
925
|
children: "Loading chart data…"
|
|
899
926
|
});
|
|
900
|
-
if (
|
|
927
|
+
if (A) return /* @__PURE__ */ w("div", {
|
|
901
928
|
className: "flex flex-col items-center justify-center gap-2 p-4 " + (o.className || ""),
|
|
902
929
|
"data-testid": "chart-error",
|
|
903
930
|
role: "alert",
|
|
904
931
|
children: [
|
|
905
|
-
/* @__PURE__ */
|
|
906
|
-
/* @__PURE__ */
|
|
932
|
+
/* @__PURE__ */ C(pe, { className: "h-6 w-6 text-destructive opacity-60" }),
|
|
933
|
+
/* @__PURE__ */ C("p", {
|
|
907
934
|
className: "text-xs text-destructive font-medium",
|
|
908
935
|
children: "Failed to load chart data"
|
|
909
936
|
}),
|
|
910
|
-
/* @__PURE__ */
|
|
937
|
+
/* @__PURE__ */ C("p", {
|
|
911
938
|
className: "text-xs text-muted-foreground max-w-xs text-center",
|
|
912
|
-
children:
|
|
939
|
+
children: A
|
|
913
940
|
})
|
|
914
941
|
]
|
|
915
942
|
});
|
|
916
|
-
if (!c && o.objectName &&
|
|
943
|
+
if (!c && o.objectName && L.length === 0) return /* @__PURE__ */ w("div", {
|
|
917
944
|
className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (o.className || ""),
|
|
918
945
|
"data-testid": "chart-no-datasource",
|
|
919
946
|
children: [
|
|
@@ -922,29 +949,29 @@ var $ = (e) => {
|
|
|
922
949
|
"”"
|
|
923
950
|
]
|
|
924
951
|
});
|
|
925
|
-
let
|
|
926
|
-
let t = e.category, n = t != null &&
|
|
927
|
-
|
|
952
|
+
let ae = r(R) ? (e) => {
|
|
953
|
+
let t = e.category, n = t != null && B.has(String(t)) ? B.get(String(t)) : t;
|
|
954
|
+
N({
|
|
928
955
|
...e,
|
|
929
956
|
category: n,
|
|
930
957
|
categoryLabel: t,
|
|
931
958
|
scope: "cell"
|
|
932
959
|
});
|
|
933
|
-
} : void 0,
|
|
934
|
-
let e = t(
|
|
960
|
+
} : void 0, oe = M && o.objectName ? (() => {
|
|
961
|
+
let e = t(R, M, { groupByField: z }), n = {
|
|
935
962
|
...o.filter || {},
|
|
936
963
|
...e
|
|
937
|
-
}, r = a(
|
|
964
|
+
}, r = a(R, M, o.title || "Details"), i = R?.target ?? "drawer", s = /* @__PURE__ */ C("div", {
|
|
938
965
|
className: "overflow-auto",
|
|
939
966
|
"data-testid": "chart-drill-body",
|
|
940
|
-
children: /* @__PURE__ */
|
|
967
|
+
children: /* @__PURE__ */ C(ue, {
|
|
941
968
|
schema: {
|
|
942
969
|
type: "object-data-table",
|
|
943
970
|
objectName: o.objectName,
|
|
944
971
|
filter: n,
|
|
945
972
|
pagination: !0,
|
|
946
|
-
pageSize:
|
|
947
|
-
columns:
|
|
973
|
+
pageSize: R?.maxRows,
|
|
974
|
+
columns: R?.columns?.map((e) => ({
|
|
948
975
|
accessorKey: e,
|
|
949
976
|
header: e
|
|
950
977
|
}))
|
|
@@ -952,33 +979,33 @@ var $ = (e) => {
|
|
|
952
979
|
dataSource: c
|
|
953
980
|
})
|
|
954
981
|
});
|
|
955
|
-
return i === "dialog" ? /* @__PURE__ */
|
|
982
|
+
return i === "dialog" ? /* @__PURE__ */ C(h, {
|
|
956
983
|
open: !0,
|
|
957
|
-
onOpenChange: (e) => !e &&
|
|
958
|
-
children: /* @__PURE__ */
|
|
984
|
+
onOpenChange: (e) => !e && N(null),
|
|
985
|
+
children: /* @__PURE__ */ w(g, {
|
|
959
986
|
className: "max-w-4xl",
|
|
960
|
-
children: [/* @__PURE__ */
|
|
987
|
+
children: [/* @__PURE__ */ C(_, { children: /* @__PURE__ */ C(ee, { children: r }) }), s]
|
|
961
988
|
})
|
|
962
|
-
}) : /* @__PURE__ */
|
|
989
|
+
}) : /* @__PURE__ */ C(v, {
|
|
963
990
|
open: !0,
|
|
964
|
-
onOpenChange: (e) => !e &&
|
|
965
|
-
children: /* @__PURE__ */
|
|
991
|
+
onOpenChange: (e) => !e && N(null),
|
|
992
|
+
children: /* @__PURE__ */ w(y, {
|
|
966
993
|
side: "right",
|
|
967
994
|
className: "w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl flex flex-col",
|
|
968
|
-
children: [/* @__PURE__ */
|
|
995
|
+
children: [/* @__PURE__ */ C(te, { children: /* @__PURE__ */ C(b, { children: r }) }), /* @__PURE__ */ C("div", {
|
|
969
996
|
className: "flex-1 overflow-hidden mt-2",
|
|
970
997
|
children: s
|
|
971
998
|
})]
|
|
972
999
|
})
|
|
973
1000
|
});
|
|
974
1001
|
})() : null;
|
|
975
|
-
return /* @__PURE__ */
|
|
1002
|
+
return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C(Q, {
|
|
976
1003
|
...e,
|
|
977
|
-
schema:
|
|
978
|
-
onChartClick:
|
|
979
|
-
}),
|
|
1004
|
+
schema: ie,
|
|
1005
|
+
onChartClick: ae
|
|
1006
|
+
}), oe] });
|
|
980
1007
|
};
|
|
981
|
-
e.register("object-chart",
|
|
1008
|
+
e.register("object-chart", Fe, {
|
|
982
1009
|
namespace: "plugin-charts",
|
|
983
1010
|
label: "Object Chart",
|
|
984
1011
|
category: "view",
|
|
@@ -1011,10 +1038,10 @@ e.register("object-chart", $, {
|
|
|
1011
1038
|
//#endregion
|
|
1012
1039
|
//#region src/index.tsx
|
|
1013
1040
|
var Ie = {
|
|
1014
|
-
"bar-chart":
|
|
1015
|
-
chart:
|
|
1041
|
+
"bar-chart": Me,
|
|
1042
|
+
chart: Q
|
|
1016
1043
|
};
|
|
1017
|
-
e.register("bar-chart",
|
|
1044
|
+
e.register("bar-chart", Me, {
|
|
1018
1045
|
namespace: "plugin-charts",
|
|
1019
1046
|
label: "Bar Chart",
|
|
1020
1047
|
category: "plugin",
|
|
@@ -1078,7 +1105,7 @@ e.register("bar-chart", Ne, {
|
|
|
1078
1105
|
height: 400,
|
|
1079
1106
|
color: "#8884d8"
|
|
1080
1107
|
}
|
|
1081
|
-
}), e.register("chart",
|
|
1108
|
+
}), e.register("chart", Fe, {
|
|
1082
1109
|
namespace: "view",
|
|
1083
1110
|
category: "view",
|
|
1084
1111
|
label: "Chart",
|
|
@@ -1105,7 +1132,7 @@ e.register("bar-chart", Ne, {
|
|
|
1105
1132
|
label: "Value Field"
|
|
1106
1133
|
}
|
|
1107
1134
|
]
|
|
1108
|
-
}), e.register("chart",
|
|
1135
|
+
}), e.register("chart", Q, {
|
|
1109
1136
|
namespace: "plugin-charts",
|
|
1110
1137
|
label: "Chart",
|
|
1111
1138
|
category: "plugin",
|
|
@@ -1217,31 +1244,31 @@ e.register("bar-chart", Ne, {
|
|
|
1217
1244
|
xAxisKey: "name",
|
|
1218
1245
|
series: [{ dataKey: "sales" }, { dataKey: "revenue" }]
|
|
1219
1246
|
}
|
|
1220
|
-
}), e.register("chart:bar",
|
|
1247
|
+
}), e.register("chart:bar", Q, {
|
|
1221
1248
|
namespace: "plugin-charts",
|
|
1222
1249
|
label: "Bar Chart (Alias)",
|
|
1223
1250
|
category: "plugin",
|
|
1224
1251
|
defaultProps: { chartType: "bar" }
|
|
1225
|
-
}), e.register("pie-chart",
|
|
1252
|
+
}), e.register("pie-chart", Q, {
|
|
1226
1253
|
namespace: "plugin-charts",
|
|
1227
1254
|
label: "Pie Chart",
|
|
1228
1255
|
category: "plugin",
|
|
1229
1256
|
defaultProps: { chartType: "pie" }
|
|
1230
|
-
}), e.register("donut-chart",
|
|
1257
|
+
}), e.register("donut-chart", Q, {
|
|
1231
1258
|
namespace: "plugin-charts",
|
|
1232
1259
|
label: "Donut Chart",
|
|
1233
1260
|
category: "plugin",
|
|
1234
1261
|
defaultProps: { chartType: "donut" }
|
|
1235
|
-
}), e.register("radar-chart",
|
|
1262
|
+
}), e.register("radar-chart", Q, {
|
|
1236
1263
|
namespace: "plugin-charts",
|
|
1237
1264
|
label: "Radar Chart",
|
|
1238
1265
|
category: "plugin",
|
|
1239
1266
|
defaultProps: { chartType: "radar" }
|
|
1240
|
-
}), e.register("scatter-chart",
|
|
1267
|
+
}), e.register("scatter-chart", Q, {
|
|
1241
1268
|
namespace: "plugin-charts",
|
|
1242
1269
|
label: "Scatter Chart",
|
|
1243
1270
|
category: "plugin",
|
|
1244
1271
|
defaultProps: { chartType: "scatter" }
|
|
1245
1272
|
});
|
|
1246
1273
|
//#endregion
|
|
1247
|
-
export {
|
|
1274
|
+
export { Me as ChartBarRenderer, Q as ChartRenderer, Fe as ObjectChart, Ie as chartComponents };
|
package/dist/index.umd.cjs
CHANGED
|
@@ -4,4 +4,4 @@ ${n.map(([e,n])=>{let r=n.theme?.[t]||n.color;return r?` --color-${e}: ${r};`:n
|
|
|
4
4
|
`)}
|
|
5
5
|
}
|
|
6
6
|
`).join(`
|
|
7
|
-
`)}}):null},A=a.Tooltip,j=a.Legend})),N=g({default:()=>P});function P({chartType:e=`bar`,data:t=[],config:r={},xAxisKey:o=`name`,series:s=[],className:c=``,onChartClick:l}){let u=e===`column`?`bar`:e,d=Array.isArray(t)?t:[],[f,p]=n.useState(!1),m=n.useCallback(e=>{if(!l||!e)return;let t=Array.isArray(e.activePayload)?e.activePayload[0]:void 0;l({category:e.activeLabel==null?void 0:String(e.activeLabel),series:t?.dataKey?String(t.dataKey):void 0,value:typeof t?.value==`number`?t.value:void 0})},[l]),h=n.useCallback(e=>{if(!l||!e)return;let t=e.payload?.[o],n=s[0]?.dataKey||`value`;l({category:t==null?void 0:String(t),series:n,value:typeof e.payload?.[n]==`number`?e.payload[n]:void 0})},[l,o,s]),g=l?{onClick:m,style:{cursor:`pointer`}}:{},_=l?{onClick:h,style:{cursor:`pointer`}}:{};n.useEffect(()=>{let e=()=>p(window.innerWidth<640);return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let v={bar:a.BarChart,"horizontal-bar":a.BarChart,line:a.LineChart,area:a.AreaChart,pie:a.PieChart,donut:a.PieChart,radar:a.RadarChart,scatter:a.ScatterChart,funnel:a.FunnelChart,combo:a.BarChart}[u]||a.BarChart,y=n.useCallback(e=>{if(e==null||e===``)return``;let t=typeof e==`string`?e:String(e);if(/^\d{4}-\d{2}-\d{2}/.test(t)){let e=new Date(t);if(!Number.isNaN(e.getTime())){let t=(d.length>1?Math.abs(new Date(String(d[d.length-1][o]??``)).getTime()-new Date(String(d[0][o]??``)).getTime()):0)/(1e3*60*60*24);try{return t<=62?e.toLocaleDateString(void 0,{month:`short`,day:`numeric`}):e.toLocaleDateString(void 0,{month:`short`,year:`numeric`})}catch{return e.toISOString().slice(0,10)}}}return f&&t.length>8?t.slice(0,8)+`…`:t},[d,o,f]),b=n.useMemo(()=>d.some(e=>String(e[o]||``).length>5),[d,o]),x=()=>[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`];if(u===`pie`||u===`donut`){let e=u===`donut`?60:0;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.PieChart,{children:[(0,i.jsx)(A,{cursor:!1,content:(0,i.jsx)(C,{hideLabel:!0})}),(0,i.jsx)(a.Pie,{data:d,dataKey:s[0]?.dataKey||`value`,nameKey:o||`name`,innerRadius:e,strokeWidth:5,paddingAngle:2,outerRadius:80,..._,children:d.map((e,t)=>{let n=r[e[o]]?.color;if(!n){let e=x();n=e[t%e.length]}return(0,i.jsx)(a.Cell,{fill:L(n)},`cell-${t}`)})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{nameKey:o}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}})]})})}if(u===`funnel`){let e=s[0]?.dataKey||`value`,t=x(),n=l?t=>{t&&l({category:t?.payload?.[o]??t?.[o],value:t?.payload?.[e]??t?.[e]})}:void 0;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.FunnelChart,{children:[(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsxs)(a.Funnel,{dataKey:e,data:d,nameKey:o,isAnimationActive:!0,...n?{onClick:n,style:{cursor:`pointer`}}:{},children:[(0,i.jsx)(a.LabelList,{position:`right`,fill:`hsl(var(--foreground))`,stroke:`none`,dataKey:o}),d.map((e,n)=>(0,i.jsx)(a.Cell,{fill:L(t[n%t.length])},`funnel-cell-${n}`))]})]})})}if(u===`radar`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.RadarChart,{data:d,children:[(0,i.jsx)(a.PolarGrid,{}),(0,i.jsx)(a.PolarAngleAxis,{dataKey:o}),(0,i.jsx)(a.PolarRadiusAxis,{}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map(e=>{let t=L(r[e.dataKey]?.color||F);return(0,i.jsx)(a.Radar,{dataKey:e.dataKey,stroke:t,fill:t,fillOpacity:.6},e.dataKey)})]})});if(u===`scatter`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.ScatterChart,{children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{type:`number`,dataKey:o,name:String(r[o]?.label||o),tickLine:!1,axisLine:!1,interval:f?Math.ceil(d.length/5):0}),(0,i.jsx)(a.YAxis,{type:`number`,dataKey:s[0]?.dataKey||`value`,name:String(r[s[0]?.dataKey]?.label||s[0]?.dataKey),tickLine:!1,axisLine:!1}),(0,i.jsx)(a.ZAxis,{type:`number`,range:[60,400]}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=x(),o=L(r[e.dataKey]?.color||n[t%n.length]);return(0,i.jsx)(a.Scatter,{name:r[e.dataKey]?.label||e.dataKey,data:d,fill:o},e.dataKey)})]})});if(u===`combo`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.BarChart,{data:d,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:o,tickLine:!1,tickMargin:10,axisLine:!1,interval:f?Math.ceil(d.length/5):0,tickFormatter:y,...!f&&b&&{angle:-35,textAnchor:`end`,height:60}}),(0,i.jsx)(a.YAxis,{yAxisId:`left`,tickLine:!1,axisLine:!1}),(0,i.jsx)(a.YAxis,{yAxisId:`right`,orientation:`right`,tickLine:!1,axisLine:!1}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=L(r[e.dataKey]?.color||F),o=e.chartType||(t===0?`bar`:`line`),s=o===`bar`?`left`:`right`;return o===`line`?(0,i.jsx)(a.Line,{yAxisId:s,type:`monotone`,dataKey:e.dataKey,stroke:n,strokeWidth:2,dot:!1},e.dataKey):o===`area`?(0,i.jsx)(a.Area,{yAxisId:s,type:`monotone`,dataKey:e.dataKey,fill:n,stroke:n,fillOpacity:.4},e.dataKey):(0,i.jsx)(a.Bar,{yAxisId:s,dataKey:e.dataKey,fill:n,radius:4},e.dataKey)})]})});let T=u===`horizontal-bar`;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(v,{data:d,layout:T?`vertical`:`horizontal`,...g,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),T?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.XAxis,{type:`number`,tickLine:!1,axisLine:!1}),(0,i.jsx)(a.YAxis,{type:`category`,dataKey:o,tickLine:!1,axisLine:!1,width:Math.min(140,Math.max(60,Math.max(...d.map(e=>String(e[o]??``).length))*7)),tickFormatter:y})]}):(0,i.jsx)(a.XAxis,{dataKey:o,tickLine:!1,tickMargin:10,axisLine:!1,interval:f?Math.ceil(d.length/5):0,tickFormatter:y,...!f&&b&&{angle:-35,textAnchor:`end`,height:60}}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=x(),o=L(r[e.dataKey]?.color||n[t%n.length]||F);if(u===`bar`||u===`horizontal-bar`){let t=s.length===1&&d.length>1;return(0,i.jsx)(a.Bar,{dataKey:e.dataKey,fill:o,radius:4,children:t&&d.map((e,t)=>(0,i.jsx)(a.Cell,{fill:L(n[t%n.length])},`cell-${t}`))},e.dataKey)}return u===`line`?(0,i.jsx)(a.Line,{type:`monotone`,dataKey:e.dataKey,stroke:o,strokeWidth:2,dot:!1},e.dataKey):u===`area`?(0,i.jsx)(a.Area,{type:`monotone`,dataKey:e.dataKey,fill:o,stroke:o,fillOpacity:.4},e.dataKey):null})]})})}var F,I,L,R=h((()=>{M(),F=`hsl(var(--primary))`,I={slate:`#64748b`,gray:`#6b7280`,zinc:`#71717a`,neutral:`#737373`,stone:`#78716c`,red:`#ef4444`,orange:`#f97316`,amber:`#f59e0b`,yellow:`#eab308`,lime:`#84cc16`,green:`#22c55e`,emerald:`#10b981`,teal:`#14b8a6`,cyan:`#06b6d4`,sky:`#0ea5e9`,blue:`#3b82f6`,indigo:`#6366f1`,violet:`#8b5cf6`,purple:`#a855f7`,fuchsia:`#d946ef`,pink:`#ec4899`,rose:`#f43f5e`},L=e=>I[e]||e})),z=n.default.lazy(()=>Promise.resolve().then(()=>(b(),v))),B=n.default.lazy(()=>Promise.resolve().then(()=>(R(),N))),V=({schema:e})=>(0,i.jsx)(n.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-48 sm:h-64 md:h-80 lg:h-[400px]`}),children:(0,i.jsx)(z,{data:e.data,dataKey:e.dataKey,xAxisKey:e.xAxisKey,height:e.height,className:e.className,color:e.color})}),H=({schema:e,onChartClick:t})=>{let a=n.default.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.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(0,i.jsx)(n.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-48 sm:h-64 md:h-80 lg:h-[400px]`}),children:(0,i.jsx)(B,{chartType:a.chartType,data:a.data,config:a.config,xAxisKey:a.xAxisKey,series:a.series,className:a.className,onChartClick:t})})};function U(e){return e.replace(/[_-]/g,` `).replace(/\b\w/g,e=>e.toUpperCase())}function W(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}})}async function G(e,n,r,i,a){if(!e.length||!n)return e;let o=a||((e,t)=>t),s=`__raw_${n}`,c=r?.fields?.[n];if(!c){let t=/^\d{4}-\d{2}-\d{2}/;return e.map(e=>{let r=e[n],i=String(r??``),a=t.test(i)?i:U(i);return{...e,[n]:o(i,a),[s]:r}})}let l=c.type;if(l===`select`||l===`picklist`||l===`dropdown`){let t=c.options||[];if(t.length===0)return e.map(e=>{let t=e[n],r=String(t??``),i=U(r);return{...e,[n]:o(r,i),[s]:t}});let r={};for(let e of t)typeof e==`string`?r[e]=e:e&&typeof e==`object`&&(r[String(e.value)]=e.label||String(e.value));return e.map(e=>{let t=e[n],i=String(t??``),a=r[i]||U(i);return{...e,[n]:o(i,a),[s]:t}})}if(l===`lookup`||l===`master_detail`){let r=c.reference_to||c.reference;if(!r||!i||typeof i.find!=`function`)return e.map(e=>({...e,[s]:e[n]}));let a=[...new Set(e.map(e=>e[n]).filter(e=>e!=null))];if(a.length===0)return e.map(e=>({...e,[s]:e[n]}));let o=c.id_field||`id`;try{let l=(0,t.extractRecords)(await i.find(r,{$filter:{[o]:{$in:a}},$top:a.length})),u=c.reference_field||c.display_field||`name`,d={};for(let e of l){let t=String(e[o]??e.id??e._id??``),n=e[u]||e.name||e.label||e.title||t;t&&(d[t]=String(n))}return e.map(e=>{let t=e[n],r=String(t??``);return{...e,[n]:d[r]||r,[s]:t}})}catch(t){return console.warn(`[ObjectChart] Failed to resolve lookup labels:`,t),e.map(e=>({...e,[s]:e[n]}))}}if(l===`date`||l===`datetime`||l===`date_time`||l===`timestamp`||l===`time`)return e.map(e=>({...e,[s]:e[n]}));let u=/^\d{4}-\d{2}-\d{2}/;return e.map(e=>{let t=e[n],r=String(t??``);return{...e,[n]:u.test(r)?r:U(r),[s]:t}})}var K=e=>{let{schema:a}=e,l=(0,n.useContext)(o.SchemaRendererContext),u=e.dataSource||l?.dataSource,d=(0,o.useDataScope)(a.bind),{fieldOptionLabel:f}=(0,c.useSafeFieldLabel)(),p=(0,n.useRef)(f);(0,n.useEffect)(()=>{p.current=f},[f]);let[m,h]=(0,n.useState)([]),[g,_]=(0,n.useState)(!1),[v,y]=(0,n.useState)(null),[b,x]=(0,n.useState)(null),S=(0,n.useMemo)(()=>a.aggregate?JSON.stringify(a.aggregate):``,[a.aggregate]),C=(0,n.useMemo)(()=>a.filter?JSON.stringify(a.filter):``,[a.filter]),w=(0,n.useCallback)(async(e,n)=>{if(!(!e||!a.objectName)){n.current&&(_(!0),y(null));try{let r,i=(0,t.resolveDateMacros)(a.filter);if(a.aggregate&&typeof e.aggregate==`function`){let t=await e.aggregate(a.objectName,{field:a.aggregate.field,function:a.aggregate.function,groupBy:a.aggregate.groupBy,filter:i});r=Array.isArray(t)?t:[]}else if(typeof e.find==`function`)r=(0,t.extractRecords)(await e.find(a.objectName,{$filter:i})),a.aggregate&&r.length>0&&(r=W(r,a.aggregate));else return;let o=a.aggregate?.groupBy||a.xAxisKey;if(o&&typeof e.getObjectSchema==`function`)try{let t=await e.getObjectSchema(a.objectName);r=await G(r,o,t,e,(e,t)=>p.current(a.objectName,o,e,t))}catch{}n.current&&h(r)}catch(e){console.error(`[ObjectChart] Fetch error:`,e),n.current&&y(e instanceof Error?e.message:`Failed to load chart data`)}finally{n.current&&_(!1)}}},[a.objectName,S,C,a.xAxisKey]);(0,n.useEffect)(()=>{let e={current:!0};return a.objectName&&!d&&!a.data&&w(u,e),()=>{e.current=!1}},[a.objectName,u,d,a.data,C,S,w]);let T=d||a.data||m,E=Array.isArray(T)?T:[],D=a.drillDown,O=a.aggregate?.groupBy||a.xAxisKey,k=(0,n.useMemo)(()=>{if(!O)return new Map;let e=new Map,t=`__raw_${O}`;for(let n of E){let r=n?.[O];if(r==null)continue;let i=t in(n||{})?n[t]:r;e.set(String(r),i)}return e},[E,O]),A={...a,data:E};if(g&&E.length===0)return(0,i.jsx)(`div`,{className:`flex items-center justify-center text-muted-foreground text-sm p-4 `+(a.className||``),"data-testid":`chart-loading`,children:`Loading chart data…`});if(v)return(0,i.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-2 p-4 `+(a.className||``),"data-testid":`chart-error`,role:`alert`,children:[(0,i.jsx)(s.AlertCircle,{className:`h-6 w-6 text-destructive opacity-60`}),(0,i.jsx)(`p`,{className:`text-xs text-destructive font-medium`,children:`Failed to load chart data`}),(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground max-w-xs text-center`,children:v})]});if(!u&&a.objectName&&E.length===0)return(0,i.jsxs)(`div`,{className:`flex items-center justify-center text-muted-foreground text-sm p-4 `+(a.className||``),"data-testid":`chart-no-datasource`,children:[`No data source available for “`,a.objectName,`”`]});let j=(0,t.isDrillEnabled)(D)?e=>{let t=e.category,n=t!=null&&k.has(String(t))?k.get(String(t)):t;x({...e,category:n,categoryLabel:t,scope:`cell`})}:void 0,M=b&&a.objectName?(()=>{let e=(0,t.computeDrillFilter)(D,b,{groupByField:O}),n={...a.filter||{},...e},s=(0,t.resolveDrillTitle)(D,b,a.title||`Details`),c=D?.target??`drawer`,l=(0,i.jsx)(`div`,{className:`overflow-auto`,"data-testid":`chart-drill-body`,children:(0,i.jsx)(o.SchemaRenderer,{schema:{type:`object-data-table`,objectName:a.objectName,filter:n,pagination:!0,pageSize:D?.maxRows,columns:D?.columns?.map(e=>({accessorKey:e,header:e}))},dataSource:u})});return c===`dialog`?(0,i.jsx)(r.Dialog,{open:!0,onOpenChange:e=>!e&&x(null),children:(0,i.jsxs)(r.DialogContent,{className:`max-w-4xl`,children:[(0,i.jsx)(r.DialogHeader,{children:(0,i.jsx)(r.DialogTitle,{children:s})}),l]})}):(0,i.jsx)(r.Sheet,{open:!0,onOpenChange:e=>!e&&x(null),children:(0,i.jsxs)(r.SheetContent,{side:`right`,className:`w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl flex flex-col`,children:[(0,i.jsx)(r.SheetHeader,{children:(0,i.jsx)(r.SheetTitle,{children:s})}),(0,i.jsx)(`div`,{className:`flex-1 overflow-hidden mt-2`,children:l})]})})})():null;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(H,{...e,schema:A,onChartClick:j}),M]})};t.ComponentRegistry.register(`object-chart`,K,{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 }`}]});var q={"bar-chart":V,chart:H};t.ComponentRegistry.register(`bar-chart`,V,{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.ComponentRegistry.register(`chart`,K,{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.ComponentRegistry.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.ComponentRegistry.register(`chart:bar`,H,{namespace:`plugin-charts`,label:`Bar Chart (Alias)`,category:`plugin`,defaultProps:{chartType:`bar`}}),t.ComponentRegistry.register(`pie-chart`,H,{namespace:`plugin-charts`,label:`Pie Chart`,category:`plugin`,defaultProps:{chartType:`pie`}}),t.ComponentRegistry.register(`donut-chart`,H,{namespace:`plugin-charts`,label:`Donut Chart`,category:`plugin`,defaultProps:{chartType:`donut`}}),t.ComponentRegistry.register(`radar-chart`,H,{namespace:`plugin-charts`,label:`Radar Chart`,category:`plugin`,defaultProps:{chartType:`radar`}}),t.ComponentRegistry.register(`scatter-chart`,H,{namespace:`plugin-charts`,label:`Scatter Chart`,category:`plugin`,defaultProps:{chartType:`scatter`}}),e.ChartBarRenderer=V,e.ChartRenderer=H,e.ObjectChart=K,e.chartComponents=q});
|
|
7
|
+
`)}}):null},A=a.Tooltip,j=a.Legend})),N=g({default:()=>P});function P({chartType:e=`bar`,data:t=[],config:r={},xAxisKey:o=`name`,series:s=[],className:c=``,onChartClick:l}){let u=e===`column`?`bar`:e,d=Array.isArray(t)?t:[],[f,p]=n.useState(!1),m=n.useCallback(e=>{if(!l||!e)return;let t=Array.isArray(e.activePayload)?e.activePayload[0]:void 0;l({category:e.activeLabel==null?void 0:String(e.activeLabel),series:t?.dataKey?String(t.dataKey):void 0,value:typeof t?.value==`number`?t.value:void 0})},[l]),h=n.useCallback(e=>{if(!l||!e)return;let t=e.payload?.[o],n=s[0]?.dataKey||`value`;l({category:t==null?void 0:String(t),series:n,value:typeof e.payload?.[n]==`number`?e.payload[n]:void 0})},[l,o,s]),g=l?{onClick:m,style:{cursor:`pointer`}}:{},_=l?{onClick:h,style:{cursor:`pointer`}}:{};n.useEffect(()=>{let e=()=>p(window.innerWidth<640);return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let v={bar:a.BarChart,"horizontal-bar":a.BarChart,line:a.LineChart,area:a.AreaChart,pie:a.PieChart,donut:a.PieChart,radar:a.RadarChart,scatter:a.ScatterChart,funnel:a.FunnelChart,combo:a.BarChart}[u]||a.BarChart,y=n.useCallback(e=>{if(e==null||e===``)return``;let t=typeof e==`string`?e:String(e);if(/^\d{4}-\d{2}-\d{2}/.test(t)){let e=new Date(t);if(!Number.isNaN(e.getTime())){let t=(d.length>1?Math.abs(new Date(String(d[d.length-1][o]??``)).getTime()-new Date(String(d[0][o]??``)).getTime()):0)/(1e3*60*60*24);try{return t<=62?e.toLocaleDateString(void 0,{month:`short`,day:`numeric`}):e.toLocaleDateString(void 0,{month:`short`,year:`numeric`})}catch{return e.toISOString().slice(0,10)}}}return f&&t.length>8?t.slice(0,8)+`…`:t},[d,o,f]),b=n.useMemo(()=>d.some(e=>String(e[o]||``).length>5),[d,o]),x=()=>[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`],T=n.useCallback(e=>{if(e==null||e===``)return``;let t=typeof e==`number`?e:Number(e);if(!Number.isFinite(t))return String(e);try{return new Intl.NumberFormat(void 0,{notation:`compact`,maximumFractionDigits:1}).format(t)}catch{return String(t)}},[]),E=n.useMemo(()=>({tickLine:!1,tickMargin:10,axisLine:!1,interval:`preserveStartEnd`,minTickGap:f?32:48,tickFormatter:y,...!f&&b&&{angle:-35,textAnchor:`end`,height:60}}),[f,b,y]);if(u===`pie`||u===`donut`){let e=u===`donut`?60:0,t=x(),n={...r};return d.forEach((e,r)=>{let i=e?.[o];if(i==null||i===``)return;let a=String(i);n[a]||(n[a]={label:a,color:t[r%t.length]})}),(0,i.jsx)(S,{config:n,className:c,children:(0,i.jsxs)(a.PieChart,{children:[(0,i.jsx)(A,{cursor:!1,content:(0,i.jsx)(C,{hideLabel:!0})}),(0,i.jsx)(a.Pie,{data:d,dataKey:s[0]?.dataKey||`value`,nameKey:o||`name`,innerRadius:e,strokeWidth:5,paddingAngle:2,outerRadius:80,..._,children:d.map((e,r)=>{let s=n[String(e[o])]?.color;return s||=t[r%t.length],(0,i.jsx)(a.Cell,{fill:L(s)},`cell-${r}`)})}),(0,i.jsx)(j,{verticalAlign:`bottom`,wrapperStyle:{fontSize:f?`11px`:`12px`,paddingTop:`8px`},content:(0,i.jsx)(w,{nameKey:o,className:`flex-wrap`})})]})})}if(u===`funnel`){let e=s[0]?.dataKey||`value`,t=x(),n=l?t=>{t&&l({category:t?.payload?.[o]??t?.[o],value:t?.payload?.[e]??t?.[e]})}:void 0;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.FunnelChart,{children:[(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsxs)(a.Funnel,{dataKey:e,data:d,nameKey:o,isAnimationActive:!0,...n?{onClick:n,style:{cursor:`pointer`}}:{},children:[(0,i.jsx)(a.LabelList,{position:`right`,fill:`hsl(var(--foreground))`,stroke:`none`,dataKey:o}),d.map((e,n)=>(0,i.jsx)(a.Cell,{fill:L(t[n%t.length])},`funnel-cell-${n}`))]})]})})}if(u===`radar`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.RadarChart,{data:d,children:[(0,i.jsx)(a.PolarGrid,{}),(0,i.jsx)(a.PolarAngleAxis,{dataKey:o}),(0,i.jsx)(a.PolarRadiusAxis,{}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map(e=>{let t=L(r[e.dataKey]?.color||F);return(0,i.jsx)(a.Radar,{dataKey:e.dataKey,stroke:t,fill:t,fillOpacity:.6},e.dataKey)})]})});if(u===`scatter`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.ScatterChart,{children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{type:`number`,dataKey:o,name:String(r[o]?.label||o),tickLine:!1,axisLine:!1,minTickGap:f?32:48}),(0,i.jsx)(a.YAxis,{type:`number`,dataKey:s[0]?.dataKey||`value`,name:String(r[s[0]?.dataKey]?.label||s[0]?.dataKey),tickLine:!1,axisLine:!1,tickFormatter:T,width:48}),(0,i.jsx)(a.ZAxis,{type:`number`,range:[60,400]}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=x(),o=L(r[e.dataKey]?.color||n[t%n.length]);return(0,i.jsx)(a.Scatter,{name:r[e.dataKey]?.label||e.dataKey,data:d,fill:o},e.dataKey)})]})});if(u===`combo`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.BarChart,{data:d,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:o,...E}),(0,i.jsx)(a.YAxis,{yAxisId:`left`,tickLine:!1,axisLine:!1,tickFormatter:T,width:48}),(0,i.jsx)(a.YAxis,{yAxisId:`right`,orientation:`right`,tickLine:!1,axisLine:!1,tickFormatter:T,width:48}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=L(r[e.dataKey]?.color||F),o=e.chartType||(t===0?`bar`:`line`),s=o===`bar`?`left`:`right`;return o===`line`?(0,i.jsx)(a.Line,{yAxisId:s,type:`monotone`,dataKey:e.dataKey,stroke:n,strokeWidth:2,dot:!1},e.dataKey):o===`area`?(0,i.jsx)(a.Area,{yAxisId:s,type:`monotone`,dataKey:e.dataKey,fill:n,stroke:n,fillOpacity:.4},e.dataKey):(0,i.jsx)(a.Bar,{yAxisId:s,dataKey:e.dataKey,fill:n,radius:4},e.dataKey)})]})});let D=u===`horizontal-bar`;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(v,{data:d,layout:D?`vertical`:`horizontal`,...g,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),D?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.XAxis,{type:`number`,tickLine:!1,axisLine:!1,tickFormatter:T}),(0,i.jsx)(a.YAxis,{type:`category`,dataKey:o,tickLine:!1,axisLine:!1,width:Math.min(140,Math.max(60,Math.max(...d.map(e=>String(e[o]??``).length))*7)),tickFormatter:y})]}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.XAxis,{dataKey:o,...E}),(0,i.jsx)(a.YAxis,{tickLine:!1,axisLine:!1,tickFormatter:T,width:48})]}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...f&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=x(),o=L(r[e.dataKey]?.color||n[t%n.length]||F);if(u===`bar`||u===`horizontal-bar`){let t=s.length===1&&d.length>1;return(0,i.jsx)(a.Bar,{dataKey:e.dataKey,fill:o,radius:4,children:t&&d.map((e,t)=>(0,i.jsx)(a.Cell,{fill:L(n[t%n.length])},`cell-${t}`))},e.dataKey)}return u===`line`?(0,i.jsx)(a.Line,{type:`monotone`,dataKey:e.dataKey,stroke:o,strokeWidth:2,dot:!1},e.dataKey):u===`area`?(0,i.jsx)(a.Area,{type:`monotone`,dataKey:e.dataKey,fill:o,stroke:o,fillOpacity:.4},e.dataKey):null})]})})}var F,I,L,R=h((()=>{M(),F=`hsl(var(--primary))`,I={slate:`#64748b`,gray:`#6b7280`,zinc:`#71717a`,neutral:`#737373`,stone:`#78716c`,red:`#ef4444`,orange:`#f97316`,amber:`#f59e0b`,yellow:`#eab308`,lime:`#84cc16`,green:`#22c55e`,emerald:`#10b981`,teal:`#14b8a6`,cyan:`#06b6d4`,sky:`#0ea5e9`,blue:`#3b82f6`,indigo:`#6366f1`,violet:`#8b5cf6`,purple:`#a855f7`,fuchsia:`#d946ef`,pink:`#ec4899`,rose:`#f43f5e`},L=e=>I[e]||e})),z=n.default.lazy(()=>Promise.resolve().then(()=>(b(),v))),B=n.default.lazy(()=>Promise.resolve().then(()=>(R(),N))),V=({schema:e})=>(0,i.jsx)(n.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-48 sm:h-64 md:h-80 lg:h-[400px]`}),children:(0,i.jsx)(z,{data:e.data,dataKey:e.dataKey,xAxisKey:e.xAxisKey,height:e.height,className:e.className,color:e.color})}),H=({schema:e,onChartClick:t})=>{let a=n.default.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.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(0,i.jsx)(n.Suspense,{fallback:(0,i.jsx)(r.Skeleton,{className:`w-full h-48 sm:h-64 md:h-80 lg:h-[400px]`}),children:(0,i.jsx)(B,{chartType:a.chartType,data:a.data,config:a.config,xAxisKey:a.xAxisKey,series:a.series,className:a.className,onChartClick:t})})};function U(e){return e.replace(/[_-]/g,` `).replace(/\b\w/g,e=>e.toUpperCase())}function W(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}})}async function G(e,n,r,i,a){if(!e.length||!n)return e;let o=a||((e,t)=>t),s=`__raw_${n}`,c=r?.fields?.[n];if(!c){let t=/^\d{4}-\d{2}-\d{2}/;return e.map(e=>{let r=e[n],i=String(r??``),a=t.test(i)?i:U(i);return{...e,[n]:o(i,a),[s]:r}})}let l=c.type;if(l===`select`||l===`picklist`||l===`dropdown`){let t=c.options||[];if(t.length===0)return e.map(e=>{let t=e[n],r=String(t??``),i=U(r);return{...e,[n]:o(r,i),[s]:t}});let r={};for(let e of t)typeof e==`string`?r[e]=e:e&&typeof e==`object`&&(r[String(e.value)]=e.label||String(e.value));return e.map(e=>{let t=e[n],i=String(t??``),a=r[i]||U(i);return{...e,[n]:o(i,a),[s]:t}})}if(l===`lookup`||l===`master_detail`){let r=c.reference_to||c.reference;if(!r||!i||typeof i.find!=`function`)return e.map(e=>({...e,[s]:e[n]}));let a=[...new Set(e.map(e=>e[n]).filter(e=>e!=null))];if(a.length===0)return e.map(e=>({...e,[s]:e[n]}));let o=c.id_field||`id`;try{let l=(0,t.extractRecords)(await i.find(r,{$filter:{[o]:{$in:a}},$top:a.length})),u=c.reference_field||c.display_field||`name`,d={};for(let e of l){let t=String(e[o]??e.id??e._id??``),n=e[u]||e.name||e.label||e.title||t;t&&(d[t]=String(n))}return e.map(e=>{let t=e[n],r=String(t??``);return{...e,[n]:d[r]||r,[s]:t}})}catch(t){return console.warn(`[ObjectChart] Failed to resolve lookup labels:`,t),e.map(e=>({...e,[s]:e[n]}))}}if(l===`date`||l===`datetime`||l===`date_time`||l===`timestamp`||l===`time`)return e.map(e=>({...e,[s]:e[n]}));let u=/^\d{4}-\d{2}-\d{2}/;return e.map(e=>{let t=e[n],r=String(t??``);return{...e,[n]:u.test(r)?r:U(r),[s]:t}})}var K=e=>{let{schema:a}=e,l=(0,n.useContext)(o.SchemaRendererContext),u=e.dataSource||l?.dataSource,d=(0,o.useDataScope)(a.bind),{fieldOptionLabel:f}=(0,c.useSafeFieldLabel)(),p=(0,n.useRef)(f);(0,n.useEffect)(()=>{p.current=f},[f]);let[m,h]=(0,n.useState)([]),[g,_]=(0,n.useState)(!1),[v,y]=(0,n.useState)(null),[b,x]=(0,n.useState)(null),S=(0,n.useMemo)(()=>a.aggregate?JSON.stringify(a.aggregate):``,[a.aggregate]),C=(0,n.useMemo)(()=>a.filter?JSON.stringify(a.filter):``,[a.filter]),w=(0,n.useCallback)(async(e,n)=>{if(!(!e||!a.objectName)){n.current&&(_(!0),y(null));try{let r,i=(0,t.resolveDateMacros)(a.filter);if(a.aggregate&&typeof e.aggregate==`function`){let t=await e.aggregate(a.objectName,{field:a.aggregate.field,function:a.aggregate.function,groupBy:a.aggregate.groupBy,filter:i});r=Array.isArray(t)?t:[]}else if(typeof e.find==`function`)r=(0,t.extractRecords)(await e.find(a.objectName,{$filter:i})),a.aggregate&&r.length>0&&(r=W(r,a.aggregate));else return;let o=a.aggregate?.groupBy||a.xAxisKey;if(o&&typeof e.getObjectSchema==`function`)try{let t=await e.getObjectSchema(a.objectName);r=await G(r,o,t,e,(e,t)=>p.current(a.objectName,o,e,t))}catch{}n.current&&h(r)}catch(e){console.error(`[ObjectChart] Fetch error:`,e),n.current&&y(e instanceof Error?e.message:`Failed to load chart data`)}finally{n.current&&_(!1)}}},[a.objectName,S,C,a.xAxisKey]);(0,n.useEffect)(()=>{let e={current:!0};return a.objectName&&!d&&!a.data&&w(u,e),()=>{e.current=!1}},[a.objectName,u,d,a.data,C,S,w]);let T=d||a.data||m,E=Array.isArray(T)?T:[],D=a.drillDown,O=a.aggregate?.groupBy||a.xAxisKey,k=(0,n.useMemo)(()=>{if(!O)return new Map;let e=new Map,t=`__raw_${O}`;for(let n of E){let r=n?.[O];if(r==null)continue;let i=t in(n||{})?n[t]:r;e.set(String(r),i)}return e},[E,O]),A={...a,data:E};if(g&&E.length===0)return(0,i.jsx)(`div`,{className:`flex items-center justify-center text-muted-foreground text-sm p-4 `+(a.className||``),"data-testid":`chart-loading`,children:`Loading chart data…`});if(v)return(0,i.jsxs)(`div`,{className:`flex flex-col items-center justify-center gap-2 p-4 `+(a.className||``),"data-testid":`chart-error`,role:`alert`,children:[(0,i.jsx)(s.AlertCircle,{className:`h-6 w-6 text-destructive opacity-60`}),(0,i.jsx)(`p`,{className:`text-xs text-destructive font-medium`,children:`Failed to load chart data`}),(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground max-w-xs text-center`,children:v})]});if(!u&&a.objectName&&E.length===0)return(0,i.jsxs)(`div`,{className:`flex items-center justify-center text-muted-foreground text-sm p-4 `+(a.className||``),"data-testid":`chart-no-datasource`,children:[`No data source available for “`,a.objectName,`”`]});let j=(0,t.isDrillEnabled)(D)?e=>{let t=e.category,n=t!=null&&k.has(String(t))?k.get(String(t)):t;x({...e,category:n,categoryLabel:t,scope:`cell`})}:void 0,M=b&&a.objectName?(()=>{let e=(0,t.computeDrillFilter)(D,b,{groupByField:O}),n={...a.filter||{},...e},s=(0,t.resolveDrillTitle)(D,b,a.title||`Details`),c=D?.target??`drawer`,l=(0,i.jsx)(`div`,{className:`overflow-auto`,"data-testid":`chart-drill-body`,children:(0,i.jsx)(o.SchemaRenderer,{schema:{type:`object-data-table`,objectName:a.objectName,filter:n,pagination:!0,pageSize:D?.maxRows,columns:D?.columns?.map(e=>({accessorKey:e,header:e}))},dataSource:u})});return c===`dialog`?(0,i.jsx)(r.Dialog,{open:!0,onOpenChange:e=>!e&&x(null),children:(0,i.jsxs)(r.DialogContent,{className:`max-w-4xl`,children:[(0,i.jsx)(r.DialogHeader,{children:(0,i.jsx)(r.DialogTitle,{children:s})}),l]})}):(0,i.jsx)(r.Sheet,{open:!0,onOpenChange:e=>!e&&x(null),children:(0,i.jsxs)(r.SheetContent,{side:`right`,className:`w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl flex flex-col`,children:[(0,i.jsx)(r.SheetHeader,{children:(0,i.jsx)(r.SheetTitle,{children:s})}),(0,i.jsx)(`div`,{className:`flex-1 overflow-hidden mt-2`,children:l})]})})})():null;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(H,{...e,schema:A,onChartClick:j}),M]})};t.ComponentRegistry.register(`object-chart`,K,{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 }`}]});var q={"bar-chart":V,chart:H};t.ComponentRegistry.register(`bar-chart`,V,{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.ComponentRegistry.register(`chart`,K,{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.ComponentRegistry.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.ComponentRegistry.register(`chart:bar`,H,{namespace:`plugin-charts`,label:`Bar Chart (Alias)`,category:`plugin`,defaultProps:{chartType:`bar`}}),t.ComponentRegistry.register(`pie-chart`,H,{namespace:`plugin-charts`,label:`Pie Chart`,category:`plugin`,defaultProps:{chartType:`pie`}}),t.ComponentRegistry.register(`donut-chart`,H,{namespace:`plugin-charts`,label:`Donut Chart`,category:`plugin`,defaultProps:{chartType:`donut`}}),t.ComponentRegistry.register(`radar-chart`,H,{namespace:`plugin-charts`,label:`Radar Chart`,category:`plugin`,defaultProps:{chartType:`radar`}}),t.ComponentRegistry.register(`scatter-chart`,H,{namespace:`plugin-charts`,label:`Scatter Chart`,category:`plugin`,defaultProps:{chartType:`scatter`}}),e.ChartBarRenderer=V,e.ChartRenderer=H,e.ObjectChart=K,e.chartComponents=q});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@object-ui/plugin-charts",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Chart components plugin for Object UI, powered by Recharts",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"lucide-react": "^1.16.0",
|
|
28
28
|
"recharts": "^3.8.1",
|
|
29
|
-
"@object-ui/components": "4.
|
|
30
|
-
"@object-ui/core": "4.
|
|
31
|
-
"@object-ui/i18n": "4.
|
|
32
|
-
"@object-ui/react": "4.
|
|
33
|
-
"@object-ui/types": "4.
|
|
29
|
+
"@object-ui/components": "4.5.0",
|
|
30
|
+
"@object-ui/core": "4.5.0",
|
|
31
|
+
"@object-ui/i18n": "4.5.0",
|
|
32
|
+
"@object-ui/react": "4.5.0",
|
|
33
|
+
"@object-ui/types": "4.5.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^18.0.0 || ^19.0.0",
|