@object-ui/plugin-charts 4.0.12 → 4.3.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
CHANGED
|
@@ -1,5 +1,58 @@
|
|
|
1
1
|
# @object-ui/plugin-charts
|
|
2
2
|
|
|
3
|
+
## 4.3.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [f196cf4]
|
|
8
|
+
- Updated dependencies [ee1cc96]
|
|
9
|
+
- Updated dependencies [0b032be]
|
|
10
|
+
- Updated dependencies [115d36a]
|
|
11
|
+
- Updated dependencies [4e7bc1b]
|
|
12
|
+
- Updated dependencies [8442c05]
|
|
13
|
+
- @object-ui/i18n@4.3.0
|
|
14
|
+
- @object-ui/components@4.3.0
|
|
15
|
+
- @object-ui/react@4.3.0
|
|
16
|
+
- @object-ui/types@4.3.0
|
|
17
|
+
- @object-ui/core@4.3.0
|
|
18
|
+
|
|
19
|
+
## 4.2.1
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- @object-ui/types@4.2.1
|
|
24
|
+
- @object-ui/core@4.2.1
|
|
25
|
+
- @object-ui/i18n@4.2.1
|
|
26
|
+
- @object-ui/react@4.2.1
|
|
27
|
+
- @object-ui/components@4.2.1
|
|
28
|
+
|
|
29
|
+
## 4.2.0
|
|
30
|
+
|
|
31
|
+
### Patch Changes
|
|
32
|
+
|
|
33
|
+
- Updated dependencies [eb738bd]
|
|
34
|
+
- Updated dependencies [650392e]
|
|
35
|
+
- Updated dependencies [84b4bf1]
|
|
36
|
+
- @object-ui/i18n@4.2.0
|
|
37
|
+
- @object-ui/components@4.2.0
|
|
38
|
+
- @object-ui/react@4.2.0
|
|
39
|
+
- @object-ui/types@4.2.0
|
|
40
|
+
- @object-ui/core@4.2.0
|
|
41
|
+
|
|
42
|
+
## 4.1.0
|
|
43
|
+
|
|
44
|
+
### Patch Changes
|
|
45
|
+
|
|
46
|
+
- b4ce9e2: Fix summary reports: render chart + KPIs, correct empty-table on server-aggregated data.
|
|
47
|
+
- `plugin-report`: `SpecReportGrid` now renders a KPI strip (per aggregating column) and a chart section above the grid for `summary` reports. KPI section auto-hides when no aggregating columns. New `buildChartData()` adapter buckets aggregated `ReportRow[]` to chart-ready data, auto-sorts pie/funnel descending, and falls back to row count when the chart `yAxis` points at a non-numeric column. When the data is server-aggregated, the grid switches columns to `[groupings, ${field}__${agg}]` so cells aren't empty against a raw-row column schema.
|
|
48
|
+
- `plugin-charts`: register `'column'` as an alias of `'bar'` in `ChartRenderer` / `AdvancedChartImpl` (Recharts only has `BarChart`).
|
|
49
|
+
- `app-shell`: `ReportView` now routes any object-backed report (matrix/joined/summary/tabular/columns/groupingsAcross) through the spec `ReportRenderer`; fully-legacy `fields`+`data` schemas still use `ReportViewer`.
|
|
50
|
+
- @object-ui/types@4.1.0
|
|
51
|
+
- @object-ui/core@4.1.0
|
|
52
|
+
- @object-ui/i18n@4.1.0
|
|
53
|
+
- @object-ui/react@4.1.0
|
|
54
|
+
- @object-ui/components@4.1.0
|
|
55
|
+
|
|
3
56
|
## 4.0.12
|
|
4
57
|
|
|
5
58
|
### 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 v, Sheet 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 v, Sheet as y, SheetContent as ee, SheetHeader as te, SheetTitle as ne, Skeleton as b } from "@object-ui/components";
|
|
5
|
+
import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
|
|
6
|
+
import { Area as w, AreaChart as re, Bar as T, BarChart as E, CartesianGrid as D, Cell as O, Funnel as ie, FunnelChart as k, LabelList as A, Legend as j, Line as M, LineChart as N, Pie as P, PieChart as F, PolarAngleAxis as I, PolarGrid as L, PolarRadiusAxis as R, Radar as z, RadarChart as ae, ResponsiveContainer as oe, Scatter as se, ScatterChart as ce, Tooltip as le, XAxis as B, YAxis as V, ZAxis as ue } from "recharts";
|
|
7
|
+
import { SchemaRenderer as de, SchemaRendererContext as fe, useDataScope as pe } from "@object-ui/react";
|
|
8
|
+
import { AlertCircle as me } from "lucide-react";
|
|
9
|
+
import { useSafeFieldLabel as he } from "@object-ui/i18n";
|
|
10
10
|
//#region \0rolldown/runtime.js
|
|
11
|
-
var
|
|
11
|
+
var ge = Object.defineProperty, H = (e, t) => () => (e && (t = e(e = 0)), t), _e = (e, t) => {
|
|
12
12
|
let n = {};
|
|
13
|
-
for (var r in e)
|
|
13
|
+
for (var r in e) ge(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 || ge(n, Symbol.toStringTag, { value: "Module" }), n;
|
|
18
|
+
}, ve = /* @__PURE__ */ _e({ default: () => ye });
|
|
19
|
+
function ye({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height: r = 400, className: i = "", color: a = "hsl(var(--primary))" }) {
|
|
20
|
+
return /* @__PURE__ */ S("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__ */ S(oe, {
|
|
23
23
|
width: "100%",
|
|
24
24
|
height: r,
|
|
25
|
-
children: /* @__PURE__ */
|
|
25
|
+
children: /* @__PURE__ */ C(E, {
|
|
26
26
|
data: e,
|
|
27
27
|
margin: {
|
|
28
28
|
top: 10,
|
|
@@ -31,64 +31,64 @@ function be({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
31
31
|
bottom: 5
|
|
32
32
|
},
|
|
33
33
|
children: [
|
|
34
|
-
/* @__PURE__ */
|
|
34
|
+
/* @__PURE__ */ C("defs", { children: [/* @__PURE__ */ C("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__ */ S("stop", {
|
|
42
42
|
offset: "0%",
|
|
43
43
|
stopColor: a,
|
|
44
44
|
stopOpacity: 1
|
|
45
45
|
}),
|
|
46
|
-
/* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ S("stop", {
|
|
47
47
|
offset: "90%",
|
|
48
48
|
stopColor: a,
|
|
49
49
|
stopOpacity: .6
|
|
50
50
|
}),
|
|
51
|
-
/* @__PURE__ */
|
|
51
|
+
/* @__PURE__ */ S("stop", {
|
|
52
52
|
offset: "100%",
|
|
53
53
|
stopColor: a,
|
|
54
54
|
stopOpacity: .3
|
|
55
55
|
})
|
|
56
56
|
]
|
|
57
|
-
}), /* @__PURE__ */
|
|
57
|
+
}), /* @__PURE__ */ C("filter", {
|
|
58
58
|
id: "glow",
|
|
59
59
|
height: "130%",
|
|
60
60
|
children: [
|
|
61
|
-
/* @__PURE__ */
|
|
61
|
+
/* @__PURE__ */ S("feGaussianBlur", {
|
|
62
62
|
in: "SourceAlpha",
|
|
63
63
|
stdDeviation: "3",
|
|
64
64
|
result: "blur"
|
|
65
65
|
}),
|
|
66
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ S("feOffset", {
|
|
67
67
|
in: "blur",
|
|
68
68
|
dx: "0",
|
|
69
69
|
dy: "0",
|
|
70
70
|
result: "offsetBlur"
|
|
71
71
|
}),
|
|
72
|
-
/* @__PURE__ */
|
|
72
|
+
/* @__PURE__ */ S("feFlood", {
|
|
73
73
|
floodColor: a,
|
|
74
74
|
floodOpacity: "0.5",
|
|
75
75
|
result: "offsetColor"
|
|
76
76
|
}),
|
|
77
|
-
/* @__PURE__ */
|
|
77
|
+
/* @__PURE__ */ S("feComposite", {
|
|
78
78
|
in: "offsetColor",
|
|
79
79
|
in2: "offsetBlur",
|
|
80
80
|
operator: "in",
|
|
81
81
|
result: "offsetBlur"
|
|
82
82
|
}),
|
|
83
|
-
/* @__PURE__ */
|
|
83
|
+
/* @__PURE__ */ C("feMerge", { children: [/* @__PURE__ */ S("feMergeNode", { in: "offsetBlur" }), /* @__PURE__ */ S("feMergeNode", { in: "SourceGraphic" })] })
|
|
84
84
|
]
|
|
85
85
|
})] }),
|
|
86
|
-
/* @__PURE__ */
|
|
86
|
+
/* @__PURE__ */ S(D, {
|
|
87
87
|
strokeDasharray: "3 3",
|
|
88
88
|
stroke: "hsl(var(--border))",
|
|
89
89
|
vertical: !1
|
|
90
90
|
}),
|
|
91
|
-
/* @__PURE__ */
|
|
91
|
+
/* @__PURE__ */ S(B, {
|
|
92
92
|
dataKey: n,
|
|
93
93
|
tick: {
|
|
94
94
|
fill: "hsl(var(--muted-foreground))",
|
|
@@ -99,7 +99,7 @@ function be({ 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__ */ S(V, {
|
|
103
103
|
tick: {
|
|
104
104
|
fill: "hsl(var(--muted-foreground))",
|
|
105
105
|
fontSize: 12,
|
|
@@ -108,7 +108,7 @@ function be({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
108
108
|
tickLine: !1,
|
|
109
109
|
axisLine: !1
|
|
110
110
|
}),
|
|
111
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ S(le, {
|
|
112
112
|
cursor: {
|
|
113
113
|
fill: "hsl(var(--muted))",
|
|
114
114
|
opacity: .2
|
|
@@ -123,11 +123,11 @@ function be({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
123
123
|
},
|
|
124
124
|
itemStyle: { color: "hsl(var(--primary))" }
|
|
125
125
|
}),
|
|
126
|
-
/* @__PURE__ */
|
|
126
|
+
/* @__PURE__ */ S(j, { wrapperStyle: {
|
|
127
127
|
paddingTop: "20px",
|
|
128
128
|
fontFamily: "monospace"
|
|
129
129
|
} }),
|
|
130
|
-
/* @__PURE__ */
|
|
130
|
+
/* @__PURE__ */ S(T, {
|
|
131
131
|
dataKey: t,
|
|
132
132
|
fill: "url(#barGradient)",
|
|
133
133
|
radius: [
|
|
@@ -144,19 +144,19 @@ function be({ data: e = [], dataKey: t = "value", xAxisKey: n = "name", height:
|
|
|
144
144
|
})
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
|
-
var
|
|
147
|
+
var be = H((() => {}));
|
|
148
148
|
//#endregion
|
|
149
149
|
//#region src/ChartContainerImpl.tsx
|
|
150
|
-
function
|
|
150
|
+
function xe() {
|
|
151
151
|
let e = o.useContext(we);
|
|
152
152
|
if (!e) throw Error("useChart must be used within a <ChartContainer />");
|
|
153
153
|
return e;
|
|
154
154
|
}
|
|
155
|
-
function
|
|
155
|
+
function U({ 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__ */ S(we.Provider, {
|
|
158
158
|
value: { config: r },
|
|
159
|
-
children: /* @__PURE__ */
|
|
159
|
+
children: /* @__PURE__ */ C("div", {
|
|
160
160
|
"data-slot": "chart",
|
|
161
161
|
"data-chart": s,
|
|
162
162
|
className: K("flex w-full h-[350px] justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", t),
|
|
@@ -166,10 +166,10 @@ function H({ id: e, className: t, children: n, config: r, ...i }) {
|
|
|
166
166
|
...i.style
|
|
167
167
|
},
|
|
168
168
|
...i,
|
|
169
|
-
children: [/* @__PURE__ */
|
|
169
|
+
children: [/* @__PURE__ */ S(Te, {
|
|
170
170
|
id: s,
|
|
171
171
|
config: r
|
|
172
|
-
}), /* @__PURE__ */
|
|
172
|
+
}), /* @__PURE__ */ S(oe, {
|
|
173
173
|
width: "100%",
|
|
174
174
|
height: "100%",
|
|
175
175
|
children: n
|
|
@@ -177,14 +177,14 @@ function H({ id: e, className: t, children: n, config: r, ...i }) {
|
|
|
177
177
|
})
|
|
178
178
|
});
|
|
179
179
|
}
|
|
180
|
-
function
|
|
181
|
-
let { config: m } =
|
|
180
|
+
function W({ 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 } = xe(), h = o.useMemo(() => {
|
|
182
182
|
if (i || !t?.length) return null;
|
|
183
|
-
let [e] = t, n =
|
|
184
|
-
return c ? /* @__PURE__ */
|
|
183
|
+
let [e] = t, n = Se(m, e, `${p || e?.dataKey || e?.name || "value"}`), r = !p && typeof s == "string" ? m[s]?.label || s : n?.label;
|
|
184
|
+
return c ? /* @__PURE__ */ S("div", {
|
|
185
185
|
className: K("font-medium", l),
|
|
186
186
|
children: c(r, t)
|
|
187
|
-
}) : r ? /* @__PURE__ */
|
|
187
|
+
}) : r ? /* @__PURE__ */ S("div", {
|
|
188
188
|
className: K("font-medium", l),
|
|
189
189
|
children: r
|
|
190
190
|
}) : null;
|
|
@@ -199,29 +199,29 @@ function U({ 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__ */
|
|
202
|
+
return /* @__PURE__ */ C("div", {
|
|
203
203
|
className: K("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__ */
|
|
204
|
+
children: [g ? null : h, /* @__PURE__ */ S("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__ */
|
|
207
|
+
let n = Se(m, e, `${f || e.name || e.dataKey || "value"}`), i = d || e.payload.fill || e.color;
|
|
208
|
+
return /* @__PURE__ */ S("div", {
|
|
209
209
|
className: K("[&>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__ */ x
|
|
210
|
+
children: u && e?.value !== void 0 && e.name ? u(e.value, e.name, e, t, e.payload) : /* @__PURE__ */ C(x, { children: [n?.icon ? /* @__PURE__ */ S(n.icon, {}) : !a && /* @__PURE__ */ S("div", {
|
|
211
211
|
className: K("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__ */
|
|
216
|
+
}), /* @__PURE__ */ C("div", {
|
|
217
217
|
className: K("flex flex-1 justify-between leading-none", g ? "items-end" : "items-center"),
|
|
218
|
-
children: [/* @__PURE__ */
|
|
218
|
+
children: [/* @__PURE__ */ C("div", {
|
|
219
219
|
className: "grid gap-1.5",
|
|
220
|
-
children: [g ? h : null, /* @__PURE__ */
|
|
220
|
+
children: [g ? h : null, /* @__PURE__ */ S("span", {
|
|
221
221
|
className: "text-muted-foreground",
|
|
222
222
|
children: n?.label || e.name
|
|
223
223
|
})]
|
|
224
|
-
}), e.value && /* @__PURE__ */
|
|
224
|
+
}), e.value && /* @__PURE__ */ S("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 U({ 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__ */
|
|
234
|
+
function G({ className: e, hideIcon: t = !1, payload: n, verticalAlign: r = "bottom", nameKey: i }) {
|
|
235
|
+
let { config: a } = xe();
|
|
236
|
+
return n?.length ? /* @__PURE__ */ S("div", {
|
|
237
237
|
className: K("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__ */
|
|
239
|
+
let n = Se(a, e, `${i || e.dataKey || "value"}`);
|
|
240
|
+
return /* @__PURE__ */ C("div", {
|
|
241
241
|
className: K("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
|
|
242
|
-
children: [n?.icon && !t ? /* @__PURE__ */
|
|
242
|
+
children: [n?.icon && !t ? /* @__PURE__ */ S(n.icon, {}) : /* @__PURE__ */ S("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 W({ className: e, hideIcon: t = !1, payload: n, verticalAlign: r = "bot
|
|
|
247
247
|
})
|
|
248
248
|
}) : null;
|
|
249
249
|
}
|
|
250
|
-
function
|
|
250
|
+
function Se(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 K, Ce, we, Te, q, J, Ee =
|
|
255
|
+
var K, Ce, we, Te, q, J, Ee = H((() => {
|
|
256
256
|
K = (...e) => e.filter(Boolean).join(" "), Ce = {
|
|
257
257
|
light: "",
|
|
258
258
|
dark: ".dark"
|
|
259
259
|
}, we = o.createContext(null), Te = ({ 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__ */ S("style", { dangerouslySetInnerHTML: { __html: Object.entries(Ce).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,10 +266,10 @@ ${n.map(([e, n]) => {
|
|
|
266
266
|
}).join("\n")}
|
|
267
267
|
}
|
|
268
268
|
`).join("\n") } }) : null;
|
|
269
|
-
}, q =
|
|
270
|
-
})), De = /* @__PURE__ */
|
|
269
|
+
}, q = le, J = j;
|
|
270
|
+
})), De = /* @__PURE__ */ _e({ default: () => Oe });
|
|
271
271
|
function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r = "name", series: i = [], className: a = "", onChartClick: s }) {
|
|
272
|
-
let c = Array.isArray(t) ? t : [], [
|
|
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;
|
|
275
275
|
s({
|
|
@@ -277,7 +277,7 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
277
277
|
series: t?.dataKey ? String(t.dataKey) : void 0,
|
|
278
278
|
value: typeof t?.value == "number" ? t.value : void 0
|
|
279
279
|
});
|
|
280
|
-
}, [s]),
|
|
280
|
+
}, [s]), p = o.useCallback((e) => {
|
|
281
281
|
if (!s || !e) return;
|
|
282
282
|
let t = e.payload?.[r], n = i[0]?.dataKey || "value";
|
|
283
283
|
s({
|
|
@@ -289,35 +289,35 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
289
289
|
s,
|
|
290
290
|
r,
|
|
291
291
|
i
|
|
292
|
-
]),
|
|
293
|
-
onClick: d,
|
|
294
|
-
style: { cursor: "pointer" }
|
|
295
|
-
} : {}, m = s ? {
|
|
292
|
+
]), m = s ? {
|
|
296
293
|
onClick: f,
|
|
297
294
|
style: { cursor: "pointer" }
|
|
295
|
+
} : {}, h = s ? {
|
|
296
|
+
onClick: p,
|
|
297
|
+
style: { cursor: "pointer" }
|
|
298
298
|
} : {};
|
|
299
299
|
o.useEffect(() => {
|
|
300
|
-
let e = () =>
|
|
300
|
+
let e = () => d(window.innerWidth < 640);
|
|
301
301
|
return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
|
|
302
302
|
}, []);
|
|
303
|
-
let
|
|
304
|
-
bar:
|
|
305
|
-
"horizontal-bar":
|
|
306
|
-
line:
|
|
307
|
-
area:
|
|
308
|
-
pie:
|
|
309
|
-
donut:
|
|
310
|
-
radar:
|
|
311
|
-
scatter:
|
|
312
|
-
funnel:
|
|
313
|
-
combo:
|
|
314
|
-
}[
|
|
303
|
+
let g = {
|
|
304
|
+
bar: E,
|
|
305
|
+
"horizontal-bar": E,
|
|
306
|
+
line: N,
|
|
307
|
+
area: re,
|
|
308
|
+
pie: F,
|
|
309
|
+
donut: F,
|
|
310
|
+
radar: ae,
|
|
311
|
+
scatter: ce,
|
|
312
|
+
funnel: k,
|
|
313
|
+
combo: E
|
|
314
|
+
}[c] || E, _ = 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)) {
|
|
318
318
|
let e = new Date(t);
|
|
319
319
|
if (!Number.isNaN(e.getTime())) {
|
|
320
|
-
let t = (
|
|
320
|
+
let t = (l.length > 1 ? Math.abs(new Date(String(l[l.length - 1][r] ?? "")).getTime() - new Date(String(l[0][r] ?? "")).getTime()) : 0) / (1e3 * 60 * 60 * 24);
|
|
321
321
|
try {
|
|
322
322
|
return t <= 62 ? e.toLocaleDateString(void 0, {
|
|
323
323
|
month: "short",
|
|
@@ -331,49 +331,49 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
331
331
|
}
|
|
332
332
|
}
|
|
333
333
|
}
|
|
334
|
-
return
|
|
334
|
+
return u && t.length > 8 ? t.slice(0, 8) + "…" : t;
|
|
335
335
|
}, [
|
|
336
|
-
|
|
336
|
+
l,
|
|
337
337
|
r,
|
|
338
|
-
|
|
339
|
-
]),
|
|
338
|
+
u
|
|
339
|
+
]), v = o.useMemo(() => l.some((e) => String(e[r] || "").length > 5), [l, r]), y = () => [
|
|
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
|
];
|
|
346
|
-
if (
|
|
347
|
-
let
|
|
348
|
-
return /* @__PURE__ */
|
|
346
|
+
if (c === "pie" || c === "donut") {
|
|
347
|
+
let e = c === "donut" ? 60 : 0;
|
|
348
|
+
return /* @__PURE__ */ S(U, {
|
|
349
349
|
config: n,
|
|
350
350
|
className: a,
|
|
351
|
-
children: /* @__PURE__ */
|
|
352
|
-
/* @__PURE__ */
|
|
351
|
+
children: /* @__PURE__ */ C(F, { children: [
|
|
352
|
+
/* @__PURE__ */ S(q, {
|
|
353
353
|
cursor: !1,
|
|
354
|
-
content: /* @__PURE__ */
|
|
354
|
+
content: /* @__PURE__ */ S(W, { hideLabel: !0 })
|
|
355
355
|
}),
|
|
356
|
-
/* @__PURE__ */
|
|
357
|
-
data:
|
|
356
|
+
/* @__PURE__ */ S(P, {
|
|
357
|
+
data: l,
|
|
358
358
|
dataKey: i[0]?.dataKey || "value",
|
|
359
359
|
nameKey: r || "name",
|
|
360
|
-
innerRadius:
|
|
360
|
+
innerRadius: e,
|
|
361
361
|
strokeWidth: 5,
|
|
362
362
|
paddingAngle: 2,
|
|
363
363
|
outerRadius: 80,
|
|
364
|
-
...
|
|
365
|
-
children:
|
|
364
|
+
...h,
|
|
365
|
+
children: l.map((e, t) => {
|
|
366
366
|
let i = n[e[r]]?.color;
|
|
367
367
|
if (!i) {
|
|
368
|
-
let e =
|
|
368
|
+
let e = y();
|
|
369
369
|
i = e[t % e.length];
|
|
370
370
|
}
|
|
371
|
-
return /* @__PURE__ */
|
|
371
|
+
return /* @__PURE__ */ S(O, { fill: X(i) }, `cell-${t}`);
|
|
372
372
|
})
|
|
373
373
|
}),
|
|
374
|
-
/* @__PURE__ */
|
|
375
|
-
content: /* @__PURE__ */
|
|
376
|
-
...
|
|
374
|
+
/* @__PURE__ */ S(J, {
|
|
375
|
+
content: /* @__PURE__ */ S(G, { nameKey: r }),
|
|
376
|
+
...u && {
|
|
377
377
|
verticalAlign: "bottom",
|
|
378
378
|
wrapperStyle: {
|
|
379
379
|
fontSize: "11px",
|
|
@@ -384,47 +384,47 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
384
384
|
] })
|
|
385
385
|
});
|
|
386
386
|
}
|
|
387
|
-
if (
|
|
388
|
-
let e = i[0]?.dataKey || "value", t =
|
|
387
|
+
if (c === "funnel") {
|
|
388
|
+
let e = i[0]?.dataKey || "value", t = y(), o = s ? (t) => {
|
|
389
389
|
t && s({
|
|
390
390
|
category: t?.payload?.[r] ?? t?.[r],
|
|
391
391
|
value: t?.payload?.[e] ?? t?.[e]
|
|
392
392
|
});
|
|
393
393
|
} : void 0;
|
|
394
|
-
return /* @__PURE__ */
|
|
394
|
+
return /* @__PURE__ */ S(U, {
|
|
395
395
|
config: n,
|
|
396
396
|
className: a,
|
|
397
|
-
children: /* @__PURE__ */
|
|
397
|
+
children: /* @__PURE__ */ C(k, { children: [/* @__PURE__ */ S(q, { content: /* @__PURE__ */ S(W, {}) }), /* @__PURE__ */ C(ie, {
|
|
398
398
|
dataKey: e,
|
|
399
|
-
data:
|
|
399
|
+
data: l,
|
|
400
400
|
nameKey: r,
|
|
401
401
|
isAnimationActive: !0,
|
|
402
402
|
...o ? {
|
|
403
403
|
onClick: o,
|
|
404
404
|
style: { cursor: "pointer" }
|
|
405
405
|
} : {},
|
|
406
|
-
children: [/* @__PURE__ */
|
|
406
|
+
children: [/* @__PURE__ */ S(A, {
|
|
407
407
|
position: "right",
|
|
408
408
|
fill: "hsl(var(--foreground))",
|
|
409
409
|
stroke: "none",
|
|
410
410
|
dataKey: r
|
|
411
|
-
}),
|
|
411
|
+
}), l.map((e, n) => /* @__PURE__ */ S(O, { fill: X(t[n % t.length]) }, `funnel-cell-${n}`))]
|
|
412
412
|
})] })
|
|
413
413
|
});
|
|
414
414
|
}
|
|
415
|
-
if (
|
|
415
|
+
if (c === "radar") return /* @__PURE__ */ S(U, {
|
|
416
416
|
config: n,
|
|
417
417
|
className: a,
|
|
418
|
-
children: /* @__PURE__ */
|
|
419
|
-
data:
|
|
418
|
+
children: /* @__PURE__ */ C(ae, {
|
|
419
|
+
data: l,
|
|
420
420
|
children: [
|
|
421
|
-
/* @__PURE__ */
|
|
422
|
-
/* @__PURE__ */
|
|
423
|
-
/* @__PURE__ */
|
|
424
|
-
/* @__PURE__ */
|
|
425
|
-
/* @__PURE__ */
|
|
426
|
-
content: /* @__PURE__ */
|
|
427
|
-
...
|
|
421
|
+
/* @__PURE__ */ S(L, {}),
|
|
422
|
+
/* @__PURE__ */ S(I, { dataKey: r }),
|
|
423
|
+
/* @__PURE__ */ S(R, {}),
|
|
424
|
+
/* @__PURE__ */ S(q, { content: /* @__PURE__ */ S(W, {}) }),
|
|
425
|
+
/* @__PURE__ */ S(J, {
|
|
426
|
+
content: /* @__PURE__ */ S(G, {}),
|
|
427
|
+
...u && {
|
|
428
428
|
verticalAlign: "bottom",
|
|
429
429
|
wrapperStyle: {
|
|
430
430
|
fontSize: "11px",
|
|
@@ -434,7 +434,7 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
434
434
|
}),
|
|
435
435
|
i.map((e) => {
|
|
436
436
|
let t = X(n[e.dataKey]?.color || Y);
|
|
437
|
-
return /* @__PURE__ */
|
|
437
|
+
return /* @__PURE__ */ S(z, {
|
|
438
438
|
dataKey: e.dataKey,
|
|
439
439
|
stroke: t,
|
|
440
440
|
fill: t,
|
|
@@ -444,34 +444,34 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
444
444
|
]
|
|
445
445
|
})
|
|
446
446
|
});
|
|
447
|
-
if (
|
|
447
|
+
if (c === "scatter") return /* @__PURE__ */ S(U, {
|
|
448
448
|
config: n,
|
|
449
449
|
className: a,
|
|
450
|
-
children: /* @__PURE__ */
|
|
451
|
-
/* @__PURE__ */
|
|
452
|
-
/* @__PURE__ */
|
|
450
|
+
children: /* @__PURE__ */ C(ce, { children: [
|
|
451
|
+
/* @__PURE__ */ S(D, { vertical: !1 }),
|
|
452
|
+
/* @__PURE__ */ S(B, {
|
|
453
453
|
type: "number",
|
|
454
454
|
dataKey: r,
|
|
455
455
|
name: String(n[r]?.label || r),
|
|
456
456
|
tickLine: !1,
|
|
457
457
|
axisLine: !1,
|
|
458
|
-
interval:
|
|
458
|
+
interval: u ? Math.ceil(l.length / 5) : 0
|
|
459
459
|
}),
|
|
460
|
-
/* @__PURE__ */
|
|
460
|
+
/* @__PURE__ */ S(V, {
|
|
461
461
|
type: "number",
|
|
462
462
|
dataKey: i[0]?.dataKey || "value",
|
|
463
463
|
name: String(n[i[0]?.dataKey]?.label || i[0]?.dataKey),
|
|
464
464
|
tickLine: !1,
|
|
465
465
|
axisLine: !1
|
|
466
466
|
}),
|
|
467
|
-
/* @__PURE__ */
|
|
467
|
+
/* @__PURE__ */ S(ue, {
|
|
468
468
|
type: "number",
|
|
469
469
|
range: [60, 400]
|
|
470
470
|
}),
|
|
471
|
-
/* @__PURE__ */
|
|
472
|
-
/* @__PURE__ */
|
|
473
|
-
content: /* @__PURE__ */
|
|
474
|
-
...
|
|
471
|
+
/* @__PURE__ */ S(q, { content: /* @__PURE__ */ S(W, {}) }),
|
|
472
|
+
/* @__PURE__ */ S(J, {
|
|
473
|
+
content: /* @__PURE__ */ S(G, {}),
|
|
474
|
+
...u && {
|
|
475
475
|
verticalAlign: "bottom",
|
|
476
476
|
wrapperStyle: {
|
|
477
477
|
fontSize: "11px",
|
|
@@ -480,50 +480,50 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
480
480
|
}
|
|
481
481
|
}),
|
|
482
482
|
i.map((e, t) => {
|
|
483
|
-
let r =
|
|
484
|
-
return /* @__PURE__ */
|
|
483
|
+
let r = y(), i = X(n[e.dataKey]?.color || r[t % r.length]);
|
|
484
|
+
return /* @__PURE__ */ S(se, {
|
|
485
485
|
name: n[e.dataKey]?.label || e.dataKey,
|
|
486
|
-
data:
|
|
486
|
+
data: l,
|
|
487
487
|
fill: i
|
|
488
488
|
}, e.dataKey);
|
|
489
489
|
})
|
|
490
490
|
] })
|
|
491
491
|
});
|
|
492
|
-
if (
|
|
492
|
+
if (c === "combo") return /* @__PURE__ */ S(U, {
|
|
493
493
|
config: n,
|
|
494
494
|
className: a,
|
|
495
|
-
children: /* @__PURE__ */
|
|
496
|
-
data:
|
|
495
|
+
children: /* @__PURE__ */ C(E, {
|
|
496
|
+
data: l,
|
|
497
497
|
children: [
|
|
498
|
-
/* @__PURE__ */
|
|
499
|
-
/* @__PURE__ */
|
|
498
|
+
/* @__PURE__ */ S(D, { vertical: !1 }),
|
|
499
|
+
/* @__PURE__ */ S(B, {
|
|
500
500
|
dataKey: r,
|
|
501
501
|
tickLine: !1,
|
|
502
502
|
tickMargin: 10,
|
|
503
503
|
axisLine: !1,
|
|
504
|
-
interval:
|
|
505
|
-
tickFormatter:
|
|
506
|
-
...!
|
|
504
|
+
interval: u ? Math.ceil(l.length / 5) : 0,
|
|
505
|
+
tickFormatter: _,
|
|
506
|
+
...!u && v && {
|
|
507
507
|
angle: -35,
|
|
508
508
|
textAnchor: "end",
|
|
509
509
|
height: 60
|
|
510
510
|
}
|
|
511
511
|
}),
|
|
512
|
-
/* @__PURE__ */
|
|
512
|
+
/* @__PURE__ */ S(V, {
|
|
513
513
|
yAxisId: "left",
|
|
514
514
|
tickLine: !1,
|
|
515
515
|
axisLine: !1
|
|
516
516
|
}),
|
|
517
|
-
/* @__PURE__ */
|
|
517
|
+
/* @__PURE__ */ S(V, {
|
|
518
518
|
yAxisId: "right",
|
|
519
519
|
orientation: "right",
|
|
520
520
|
tickLine: !1,
|
|
521
521
|
axisLine: !1
|
|
522
522
|
}),
|
|
523
|
-
/* @__PURE__ */
|
|
524
|
-
/* @__PURE__ */
|
|
525
|
-
content: /* @__PURE__ */
|
|
526
|
-
...
|
|
523
|
+
/* @__PURE__ */ S(q, { content: /* @__PURE__ */ S(W, {}) }),
|
|
524
|
+
/* @__PURE__ */ S(J, {
|
|
525
|
+
content: /* @__PURE__ */ S(G, {}),
|
|
526
|
+
...u && {
|
|
527
527
|
verticalAlign: "bottom",
|
|
528
528
|
wrapperStyle: {
|
|
529
529
|
fontSize: "11px",
|
|
@@ -533,21 +533,21 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
533
533
|
}),
|
|
534
534
|
i.map((e, t) => {
|
|
535
535
|
let r = X(n[e.dataKey]?.color || Y), i = e.chartType || (t === 0 ? "bar" : "line"), a = i === "bar" ? "left" : "right";
|
|
536
|
-
return i === "line" ? /* @__PURE__ */
|
|
536
|
+
return i === "line" ? /* @__PURE__ */ S(M, {
|
|
537
537
|
yAxisId: a,
|
|
538
538
|
type: "monotone",
|
|
539
539
|
dataKey: e.dataKey,
|
|
540
540
|
stroke: r,
|
|
541
541
|
strokeWidth: 2,
|
|
542
542
|
dot: !1
|
|
543
|
-
}, e.dataKey) : i === "area" ? /* @__PURE__ */
|
|
543
|
+
}, e.dataKey) : i === "area" ? /* @__PURE__ */ S(w, {
|
|
544
544
|
yAxisId: a,
|
|
545
545
|
type: "monotone",
|
|
546
546
|
dataKey: e.dataKey,
|
|
547
547
|
fill: r,
|
|
548
548
|
stroke: r,
|
|
549
549
|
fillOpacity: .4
|
|
550
|
-
}, e.dataKey) : /* @__PURE__ */
|
|
550
|
+
}, e.dataKey) : /* @__PURE__ */ S(T, {
|
|
551
551
|
yAxisId: a,
|
|
552
552
|
dataKey: e.dataKey,
|
|
553
553
|
fill: r,
|
|
@@ -557,44 +557,44 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
557
557
|
]
|
|
558
558
|
})
|
|
559
559
|
});
|
|
560
|
-
let ee =
|
|
561
|
-
return /* @__PURE__ */
|
|
560
|
+
let ee = c === "horizontal-bar";
|
|
561
|
+
return /* @__PURE__ */ S(U, {
|
|
562
562
|
config: n,
|
|
563
563
|
className: a,
|
|
564
|
-
children: /* @__PURE__ */
|
|
565
|
-
data:
|
|
564
|
+
children: /* @__PURE__ */ C(g, {
|
|
565
|
+
data: l,
|
|
566
566
|
layout: ee ? "vertical" : "horizontal",
|
|
567
|
-
...
|
|
567
|
+
...m,
|
|
568
568
|
children: [
|
|
569
|
-
/* @__PURE__ */
|
|
570
|
-
ee ? /* @__PURE__ */ x
|
|
569
|
+
/* @__PURE__ */ S(D, { vertical: !1 }),
|
|
570
|
+
ee ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(B, {
|
|
571
571
|
type: "number",
|
|
572
572
|
tickLine: !1,
|
|
573
573
|
axisLine: !1
|
|
574
|
-
}), /* @__PURE__ */
|
|
574
|
+
}), /* @__PURE__ */ S(V, {
|
|
575
575
|
type: "category",
|
|
576
576
|
dataKey: r,
|
|
577
577
|
tickLine: !1,
|
|
578
578
|
axisLine: !1,
|
|
579
|
-
width: Math.min(140, Math.max(60, Math.max(...
|
|
580
|
-
tickFormatter:
|
|
581
|
-
})] }) : /* @__PURE__ */
|
|
579
|
+
width: Math.min(140, Math.max(60, Math.max(...l.map((e) => String(e[r] ?? "").length)) * 7)),
|
|
580
|
+
tickFormatter: _
|
|
581
|
+
})] }) : /* @__PURE__ */ S(B, {
|
|
582
582
|
dataKey: r,
|
|
583
583
|
tickLine: !1,
|
|
584
584
|
tickMargin: 10,
|
|
585
585
|
axisLine: !1,
|
|
586
|
-
interval:
|
|
587
|
-
tickFormatter:
|
|
588
|
-
...!
|
|
586
|
+
interval: u ? Math.ceil(l.length / 5) : 0,
|
|
587
|
+
tickFormatter: _,
|
|
588
|
+
...!u && v && {
|
|
589
589
|
angle: -35,
|
|
590
590
|
textAnchor: "end",
|
|
591
591
|
height: 60
|
|
592
592
|
}
|
|
593
593
|
}),
|
|
594
|
-
/* @__PURE__ */
|
|
595
|
-
/* @__PURE__ */
|
|
596
|
-
content: /* @__PURE__ */
|
|
597
|
-
...
|
|
594
|
+
/* @__PURE__ */ S(q, { content: /* @__PURE__ */ S(W, {}) }),
|
|
595
|
+
/* @__PURE__ */ S(J, {
|
|
596
|
+
content: /* @__PURE__ */ S(G, {}),
|
|
597
|
+
...u && {
|
|
598
598
|
verticalAlign: "bottom",
|
|
599
599
|
wrapperStyle: {
|
|
600
600
|
fontSize: "11px",
|
|
@@ -602,36 +602,36 @@ function Oe({ chartType: e = "bar", data: t = [], config: n = {}, xAxisKey: r =
|
|
|
602
602
|
}
|
|
603
603
|
}
|
|
604
604
|
}),
|
|
605
|
-
i.map((
|
|
606
|
-
let
|
|
607
|
-
if (
|
|
608
|
-
let
|
|
609
|
-
return /* @__PURE__ */
|
|
610
|
-
dataKey:
|
|
611
|
-
fill:
|
|
605
|
+
i.map((e, t) => {
|
|
606
|
+
let r = y(), a = X(n[e.dataKey]?.color || r[t % r.length] || Y);
|
|
607
|
+
if (c === "bar" || c === "horizontal-bar") {
|
|
608
|
+
let t = i.length === 1 && l.length > 1;
|
|
609
|
+
return /* @__PURE__ */ S(T, {
|
|
610
|
+
dataKey: e.dataKey,
|
|
611
|
+
fill: a,
|
|
612
612
|
radius: 4,
|
|
613
|
-
children:
|
|
614
|
-
},
|
|
613
|
+
children: t && l.map((e, t) => /* @__PURE__ */ S(O, { fill: X(r[t % r.length]) }, `cell-${t}`))
|
|
614
|
+
}, e.dataKey);
|
|
615
615
|
}
|
|
616
|
-
return
|
|
616
|
+
return c === "line" ? /* @__PURE__ */ S(M, {
|
|
617
617
|
type: "monotone",
|
|
618
|
-
dataKey:
|
|
619
|
-
stroke:
|
|
618
|
+
dataKey: e.dataKey,
|
|
619
|
+
stroke: a,
|
|
620
620
|
strokeWidth: 2,
|
|
621
621
|
dot: !1
|
|
622
|
-
},
|
|
622
|
+
}, e.dataKey) : c === "area" ? /* @__PURE__ */ S(w, {
|
|
623
623
|
type: "monotone",
|
|
624
|
-
dataKey:
|
|
625
|
-
fill:
|
|
626
|
-
stroke:
|
|
624
|
+
dataKey: e.dataKey,
|
|
625
|
+
fill: a,
|
|
626
|
+
stroke: a,
|
|
627
627
|
fillOpacity: .4
|
|
628
|
-
},
|
|
628
|
+
}, e.dataKey) : null;
|
|
629
629
|
})
|
|
630
630
|
]
|
|
631
631
|
})
|
|
632
632
|
});
|
|
633
633
|
}
|
|
634
|
-
var Y, ke, X, Ae =
|
|
634
|
+
var Y, ke, X, Ae = H((() => {
|
|
635
635
|
Ee(), Y = "hsl(var(--primary))", ke = {
|
|
636
636
|
slate: "#64748b",
|
|
637
637
|
gray: "#6b7280",
|
|
@@ -656,9 +656,9 @@ var Y, ke, X, Ae = V((() => {
|
|
|
656
656
|
pink: "#ec4899",
|
|
657
657
|
rose: "#f43f5e"
|
|
658
658
|
}, X = (e) => ke[e] || e;
|
|
659
|
-
})), je = s.lazy(() => Promise.resolve().then(() => (
|
|
660
|
-
fallback: /* @__PURE__ */ b
|
|
661
|
-
children: /* @__PURE__ */
|
|
659
|
+
})), je = s.lazy(() => Promise.resolve().then(() => (be(), ve))), Me = s.lazy(() => Promise.resolve().then(() => (Ae(), De))), Ne = ({ schema: e }) => /* @__PURE__ */ S(c, {
|
|
660
|
+
fallback: /* @__PURE__ */ S(b, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
|
|
661
|
+
children: /* @__PURE__ */ S(je, {
|
|
662
662
|
data: e.data,
|
|
663
663
|
dataKey: e.dataKey,
|
|
664
664
|
xAxisKey: e.xAxisKey,
|
|
@@ -691,9 +691,9 @@ var Y, ke, X, Ae = V((() => {
|
|
|
691
691
|
className: e.className
|
|
692
692
|
};
|
|
693
693
|
}, [e]);
|
|
694
|
-
return /* @__PURE__ */
|
|
695
|
-
fallback: /* @__PURE__ */ b
|
|
696
|
-
children: /* @__PURE__ */
|
|
694
|
+
return /* @__PURE__ */ S(c, {
|
|
695
|
+
fallback: /* @__PURE__ */ S(b, { className: "w-full h-48 sm:h-64 md:h-80 lg:h-[400px]" }),
|
|
696
|
+
children: /* @__PURE__ */ S(Me, {
|
|
697
697
|
chartType: n.chartType,
|
|
698
698
|
data: n.data,
|
|
699
699
|
config: n.config,
|
|
@@ -827,13 +827,13 @@ async function Fe(e, t, r, i, a) {
|
|
|
827
827
|
});
|
|
828
828
|
}
|
|
829
829
|
var $ = (e) => {
|
|
830
|
-
let { schema: o } = e, s = u(
|
|
830
|
+
let { schema: o } = e, s = u(fe), c = e.dataSource || s?.dataSource, b = pe(o.bind), { fieldOptionLabel: w } = he(), re = p(w);
|
|
831
831
|
d(() => {
|
|
832
|
-
|
|
833
|
-
}, [
|
|
834
|
-
let [
|
|
832
|
+
re.current = w;
|
|
833
|
+
}, [w]);
|
|
834
|
+
let [T, E] = m([]), [D, O] = m(!1), [ie, k] = m(null), [A, j] = m(null), M = f(() => o.aggregate ? JSON.stringify(o.aggregate) : "", [o.aggregate]), N = f(() => o.filter ? JSON.stringify(o.filter) : "", [o.filter]), P = l(async (e, t) => {
|
|
835
835
|
if (!(!e || !o.objectName)) {
|
|
836
|
-
t.current && (
|
|
836
|
+
t.current && (O(!0), k(null));
|
|
837
837
|
try {
|
|
838
838
|
let r, a = i(o.filter);
|
|
839
839
|
if (o.aggregate && typeof e.aggregate == "function") {
|
|
@@ -849,71 +849,71 @@ var $ = (e) => {
|
|
|
849
849
|
let s = o.aggregate?.groupBy || o.xAxisKey;
|
|
850
850
|
if (s && typeof e.getObjectSchema == "function") try {
|
|
851
851
|
let t = await e.getObjectSchema(o.objectName);
|
|
852
|
-
r = await Fe(r, s, t, e, (e, t) =>
|
|
852
|
+
r = await Fe(r, s, t, e, (e, t) => re.current(o.objectName, s, e, t));
|
|
853
853
|
} catch {}
|
|
854
|
-
t.current &&
|
|
854
|
+
t.current && E(r);
|
|
855
855
|
} catch (e) {
|
|
856
|
-
console.error("[ObjectChart] Fetch error:", e), t.current &&
|
|
856
|
+
console.error("[ObjectChart] Fetch error:", e), t.current && k(e instanceof Error ? e.message : "Failed to load chart data");
|
|
857
857
|
} finally {
|
|
858
|
-
t.current &&
|
|
858
|
+
t.current && O(!1);
|
|
859
859
|
}
|
|
860
860
|
}
|
|
861
861
|
}, [
|
|
862
862
|
o.objectName,
|
|
863
|
-
j,
|
|
864
863
|
M,
|
|
864
|
+
N,
|
|
865
865
|
o.xAxisKey
|
|
866
866
|
]);
|
|
867
867
|
d(() => {
|
|
868
868
|
let e = { current: !0 };
|
|
869
|
-
return o.objectName && !
|
|
869
|
+
return o.objectName && !b && !o.data && P(c, e), () => {
|
|
870
870
|
e.current = !1;
|
|
871
871
|
};
|
|
872
872
|
}, [
|
|
873
873
|
o.objectName,
|
|
874
874
|
c,
|
|
875
|
-
|
|
875
|
+
b,
|
|
876
876
|
o.data,
|
|
877
|
+
N,
|
|
877
878
|
M,
|
|
878
|
-
|
|
879
|
-
N
|
|
879
|
+
P
|
|
880
880
|
]);
|
|
881
|
-
let
|
|
882
|
-
if (!
|
|
883
|
-
let e = /* @__PURE__ */ new Map(), t = `__raw_${
|
|
884
|
-
for (let n of
|
|
885
|
-
let r = n?.[
|
|
881
|
+
let F = b || o.data || T, I = Array.isArray(F) ? F : [], L = o.drillDown, R = o.aggregate?.groupBy || o.xAxisKey, z = f(() => {
|
|
882
|
+
if (!R) return /* @__PURE__ */ new Map();
|
|
883
|
+
let e = /* @__PURE__ */ new Map(), t = `__raw_${R}`;
|
|
884
|
+
for (let n of I) {
|
|
885
|
+
let r = n?.[R];
|
|
886
886
|
if (r == null) continue;
|
|
887
887
|
let i = t in (n || {}) ? n[t] : r;
|
|
888
888
|
e.set(String(r), i);
|
|
889
889
|
}
|
|
890
890
|
return e;
|
|
891
|
-
}, [
|
|
891
|
+
}, [I, R]), ae = {
|
|
892
892
|
...o,
|
|
893
|
-
data:
|
|
893
|
+
data: I
|
|
894
894
|
};
|
|
895
|
-
if (
|
|
895
|
+
if (D && I.length === 0) return /* @__PURE__ */ S("div", {
|
|
896
896
|
className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (o.className || ""),
|
|
897
897
|
"data-testid": "chart-loading",
|
|
898
898
|
children: "Loading chart data…"
|
|
899
899
|
});
|
|
900
|
-
if (
|
|
900
|
+
if (ie) return /* @__PURE__ */ C("div", {
|
|
901
901
|
className: "flex flex-col items-center justify-center gap-2 p-4 " + (o.className || ""),
|
|
902
902
|
"data-testid": "chart-error",
|
|
903
903
|
role: "alert",
|
|
904
904
|
children: [
|
|
905
|
-
/* @__PURE__ */
|
|
906
|
-
/* @__PURE__ */
|
|
905
|
+
/* @__PURE__ */ S(me, { className: "h-6 w-6 text-destructive opacity-60" }),
|
|
906
|
+
/* @__PURE__ */ S("p", {
|
|
907
907
|
className: "text-xs text-destructive font-medium",
|
|
908
908
|
children: "Failed to load chart data"
|
|
909
909
|
}),
|
|
910
|
-
/* @__PURE__ */
|
|
910
|
+
/* @__PURE__ */ S("p", {
|
|
911
911
|
className: "text-xs text-muted-foreground max-w-xs text-center",
|
|
912
|
-
children:
|
|
912
|
+
children: ie
|
|
913
913
|
})
|
|
914
914
|
]
|
|
915
915
|
});
|
|
916
|
-
if (!c && o.objectName &&
|
|
916
|
+
if (!c && o.objectName && I.length === 0) return /* @__PURE__ */ C("div", {
|
|
917
917
|
className: "flex items-center justify-center text-muted-foreground text-sm p-4 " + (o.className || ""),
|
|
918
918
|
"data-testid": "chart-no-datasource",
|
|
919
919
|
children: [
|
|
@@ -922,29 +922,29 @@ var $ = (e) => {
|
|
|
922
922
|
"”"
|
|
923
923
|
]
|
|
924
924
|
});
|
|
925
|
-
let
|
|
926
|
-
let t = e.category, n = t != null &&
|
|
927
|
-
|
|
925
|
+
let oe = r(L) ? (e) => {
|
|
926
|
+
let t = e.category, n = t != null && z.has(String(t)) ? z.get(String(t)) : t;
|
|
927
|
+
j({
|
|
928
928
|
...e,
|
|
929
929
|
category: n,
|
|
930
930
|
categoryLabel: t,
|
|
931
931
|
scope: "cell"
|
|
932
932
|
});
|
|
933
|
-
} : void 0,
|
|
934
|
-
let e = t(
|
|
933
|
+
} : void 0, se = A && o.objectName ? (() => {
|
|
934
|
+
let e = t(L, A, { groupByField: R }), n = {
|
|
935
935
|
...o.filter || {},
|
|
936
936
|
...e
|
|
937
|
-
}, r = a(
|
|
937
|
+
}, r = a(L, A, o.title || "Details"), i = L?.target ?? "drawer", s = /* @__PURE__ */ S("div", {
|
|
938
938
|
className: "overflow-auto",
|
|
939
939
|
"data-testid": "chart-drill-body",
|
|
940
|
-
children: /* @__PURE__ */
|
|
940
|
+
children: /* @__PURE__ */ S(de, {
|
|
941
941
|
schema: {
|
|
942
942
|
type: "object-data-table",
|
|
943
943
|
objectName: o.objectName,
|
|
944
944
|
filter: n,
|
|
945
945
|
pagination: !0,
|
|
946
|
-
pageSize:
|
|
947
|
-
columns:
|
|
946
|
+
pageSize: L?.maxRows,
|
|
947
|
+
columns: L?.columns?.map((e) => ({
|
|
948
948
|
accessorKey: e,
|
|
949
949
|
header: e
|
|
950
950
|
}))
|
|
@@ -952,31 +952,31 @@ var $ = (e) => {
|
|
|
952
952
|
dataSource: c
|
|
953
953
|
})
|
|
954
954
|
});
|
|
955
|
-
return i === "dialog" ? /* @__PURE__ */
|
|
955
|
+
return i === "dialog" ? /* @__PURE__ */ S(h, {
|
|
956
956
|
open: !0,
|
|
957
|
-
onOpenChange: (e) => !e &&
|
|
958
|
-
children: /* @__PURE__ */
|
|
957
|
+
onOpenChange: (e) => !e && j(null),
|
|
958
|
+
children: /* @__PURE__ */ C(g, {
|
|
959
959
|
className: "max-w-4xl",
|
|
960
|
-
children: [/* @__PURE__ */
|
|
960
|
+
children: [/* @__PURE__ */ S(_, { children: /* @__PURE__ */ S(v, { children: r }) }), s]
|
|
961
961
|
})
|
|
962
|
-
}) : /* @__PURE__ */
|
|
962
|
+
}) : /* @__PURE__ */ S(y, {
|
|
963
963
|
open: !0,
|
|
964
|
-
onOpenChange: (e) => !e &&
|
|
965
|
-
children: /* @__PURE__ */
|
|
964
|
+
onOpenChange: (e) => !e && j(null),
|
|
965
|
+
children: /* @__PURE__ */ C(ee, {
|
|
966
966
|
side: "right",
|
|
967
967
|
className: "w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl flex flex-col",
|
|
968
|
-
children: [/* @__PURE__ */
|
|
968
|
+
children: [/* @__PURE__ */ S(te, { children: /* @__PURE__ */ S(ne, { children: r }) }), /* @__PURE__ */ S("div", {
|
|
969
969
|
className: "flex-1 overflow-hidden mt-2",
|
|
970
970
|
children: s
|
|
971
971
|
})]
|
|
972
972
|
})
|
|
973
973
|
});
|
|
974
974
|
})() : null;
|
|
975
|
-
return /* @__PURE__ */ x
|
|
975
|
+
return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(Z, {
|
|
976
976
|
...e,
|
|
977
|
-
schema:
|
|
978
|
-
onChartClick:
|
|
979
|
-
}),
|
|
977
|
+
schema: ae,
|
|
978
|
+
onChartClick: oe
|
|
979
|
+
}), se] });
|
|
980
980
|
};
|
|
981
981
|
e.register("object-chart", $, {
|
|
982
982
|
namespace: "plugin-charts",
|
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=Array.isArray(t)?t:[],[d,f]=n.useState(!1),p=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]),m=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]),h=l?{onClick:p,style:{cursor:`pointer`}}:{},g=l?{onClick:m,style:{cursor:`pointer`}}:{};n.useEffect(()=>{let e=()=>f(window.innerWidth<640);return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[]);let _={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}[e]||a.BarChart,v=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=(u.length>1?Math.abs(new Date(String(u[u.length-1][o]??``)).getTime()-new Date(String(u[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 d&&t.length>8?t.slice(0,8)+`…`:t},[u,o,d]),y=n.useMemo(()=>u.some(e=>String(e[o]||``).length>5),[u,o]),b=()=>[`hsl(var(--chart-1))`,`hsl(var(--chart-2))`,`hsl(var(--chart-3))`,`hsl(var(--chart-4))`,`hsl(var(--chart-5))`];if(e===`pie`||e===`donut`){let t=e===`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:u,dataKey:s[0]?.dataKey||`value`,nameKey:o||`name`,innerRadius:t,strokeWidth:5,paddingAngle:2,outerRadius:80,...g,children:u.map((e,t)=>{let n=r[e[o]]?.color;if(!n){let e=b();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}),...d&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}})]})})}if(e===`funnel`){let e=s[0]?.dataKey||`value`,t=b(),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:u,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}),u.map((e,n)=>(0,i.jsx)(a.Cell,{fill:L(t[n%t.length])},`funnel-cell-${n}`))]})]})})}if(e===`radar`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.RadarChart,{data:u,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,{}),...d&&{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(e===`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:d?Math.ceil(u.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,{}),...d&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((e,t)=>{let n=b(),o=L(r[e.dataKey]?.color||n[t%n.length]);return(0,i.jsx)(a.Scatter,{name:r[e.dataKey]?.label||e.dataKey,data:u,fill:o},e.dataKey)})]})});if(e===`combo`)return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(a.BarChart,{data:u,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:o,tickLine:!1,tickMargin:10,axisLine:!1,interval:d?Math.ceil(u.length/5):0,tickFormatter:v,...!d&&y&&{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,{}),...d&&{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 x=e===`horizontal-bar`;return(0,i.jsx)(S,{config:r,className:c,children:(0,i.jsxs)(_,{data:u,layout:x?`vertical`:`horizontal`,...h,children:[(0,i.jsx)(a.CartesianGrid,{vertical:!1}),x?(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(...u.map(e=>String(e[o]??``).length))*7)),tickFormatter:v})]}):(0,i.jsx)(a.XAxis,{dataKey:o,tickLine:!1,tickMargin:10,axisLine:!1,interval:d?Math.ceil(u.length/5):0,tickFormatter:v,...!d&&y&&{angle:-35,textAnchor:`end`,height:60}}),(0,i.jsx)(A,{content:(0,i.jsx)(C,{})}),(0,i.jsx)(j,{content:(0,i.jsx)(w,{}),...d&&{verticalAlign:`bottom`,wrapperStyle:{fontSize:`11px`,paddingTop:`8px`}}}),s.map((t,n)=>{let o=b(),c=L(r[t.dataKey]?.color||o[n%o.length]||F);if(e===`bar`||e===`horizontal-bar`){let e=s.length===1&&u.length>1;return(0,i.jsx)(a.Bar,{dataKey:t.dataKey,fill:c,radius:4,children:e&&u.map((e,t)=>(0,i.jsx)(a.Cell,{fill:L(o[t%o.length])},`cell-${t}`))},t.dataKey)}return e===`line`?(0,i.jsx)(a.Line,{type:`monotone`,dataKey:t.dataKey,stroke:c,strokeWidth:2,dot:!1},t.dataKey):e===`area`?(0,i.jsx)(a.Area,{type:`monotone`,dataKey:t.dataKey,fill:c,stroke:c,fillOpacity:.4},t.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))`];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});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ChartConfig } from './ChartContainerImpl';
|
|
2
2
|
export interface AdvancedChartImplProps {
|
|
3
|
-
chartType?: 'bar' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo';
|
|
3
|
+
chartType?: 'bar' | 'column' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo';
|
|
4
4
|
data?: Array<Record<string, any>>;
|
|
5
5
|
config?: ChartConfig;
|
|
6
6
|
xAxisKey?: string;
|
|
@@ -24,4 +24,4 @@ export interface AdvancedChartImplProps {
|
|
|
24
24
|
* AdvancedChartImpl - The heavy implementation that imports Recharts with full features
|
|
25
25
|
* This component is lazy-loaded to avoid including Recharts in the initial bundle
|
|
26
26
|
*/
|
|
27
|
-
export default function AdvancedChartImpl({ chartType, data: rawData, config, xAxisKey, series, className, onChartClick, }: AdvancedChartImplProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export default function AdvancedChartImpl({ chartType: rawChartType, data: rawData, config, xAxisKey, series, className, onChartClick, }: AdvancedChartImplProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -20,7 +20,7 @@ export interface ChartRendererProps {
|
|
|
20
20
|
type: string;
|
|
21
21
|
id?: string;
|
|
22
22
|
className?: string;
|
|
23
|
-
chartType?: 'bar' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo';
|
|
23
|
+
chartType?: 'bar' | 'column' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo';
|
|
24
24
|
data?: Array<Record<string, any>>;
|
|
25
25
|
config?: Record<string, any>;
|
|
26
26
|
xAxisKey?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@object-ui/plugin-charts",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.3.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.0
|
|
30
|
-
"@object-ui/core": "4.0
|
|
31
|
-
"@object-ui/i18n": "4.0
|
|
32
|
-
"@object-ui/react": "4.0
|
|
33
|
-
"@object-ui/types": "4.0
|
|
29
|
+
"@object-ui/components": "4.3.0",
|
|
30
|
+
"@object-ui/core": "4.3.0",
|
|
31
|
+
"@object-ui/i18n": "4.3.0",
|
|
32
|
+
"@object-ui/react": "4.3.0",
|
|
33
|
+
"@object-ui/types": "4.3.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^18.0.0 || ^19.0.0",
|