@acronis-platform/ui-react 0.58.0 → 0.60.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/dist/components/ui/area-chart/area-chart.js +91 -63
- package/dist/components/ui/area-chart/area-chart.js.map +1 -1
- package/dist/components/ui/bar-chart/bar-chart.js +104 -73
- package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
- package/dist/components/ui/calendar/calendar.js +17 -15
- package/dist/components/ui/calendar/calendar.js.map +1 -1
- package/dist/components/ui/carousel-dialog/carousel-dialog.js +87 -0
- package/dist/components/ui/carousel-dialog/carousel-dialog.js.map +1 -0
- package/dist/components/ui/category-bar/category-bar.js +126 -0
- package/dist/components/ui/category-bar/category-bar.js.map +1 -0
- package/dist/components/ui/chart/chart-format.js +40 -0
- package/dist/components/ui/chart/chart-format.js.map +1 -0
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/composed-chart/composed-chart.js +91 -63
- package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
- package/dist/components/ui/confidence-cone/confidence-cone.js +113 -85
- package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
- package/dist/components/ui/dialog/dialog.js +29 -29
- package/dist/components/ui/dialog/dialog.js.map +1 -1
- package/dist/components/ui/dialog-footer-carousel/dialog-footer-carousel.js +57 -0
- package/dist/components/ui/dialog-footer-carousel/dialog-footer-carousel.js.map +1 -0
- package/dist/components/ui/dialog-footer-default/dialog-footer-default.js +1 -1
- package/dist/components/ui/dialog-footer-default/dialog-footer-default.js.map +1 -1
- package/dist/components/ui/dialog-welcome/dialog-welcome.js +272 -0
- package/dist/components/ui/dialog-welcome/dialog-welcome.js.map +1 -0
- package/dist/components/ui/histogram/histogram.js +89 -61
- package/dist/components/ui/histogram/histogram.js.map +1 -1
- package/dist/components/ui/input/input.js.map +1 -1
- package/dist/components/ui/line-chart/line-chart.js +120 -92
- package/dist/components/ui/line-chart/line-chart.js.map +1 -1
- package/dist/components/ui/sankey-chart/sankey-chart.js +192 -0
- package/dist/components/ui/sankey-chart/sankey-chart.js.map +1 -0
- package/dist/components/ui/scatter-chart/scatter-chart.js +79 -51
- package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
- package/dist/components/ui/toolbar/toolbar.js +82 -92
- package/dist/components/ui/toolbar/toolbar.js.map +1 -1
- package/dist/index.js +461 -439
- package/dist/index.js.map +1 -1
- package/dist/lib/breakpoints.js +9 -6
- package/dist/lib/breakpoints.js.map +1 -1
- package/dist/node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.6/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js +25 -0
- package/dist/node_modules/.pnpm/embla-carousel-react@8.6.0_react@19.2.6/node_modules/embla-carousel-react/esm/embla-carousel-react.esm.js.map +1 -0
- package/dist/node_modules/.pnpm/embla-carousel-reactive-utils@8.6.0_embla-carousel@8.6.0/node_modules/embla-carousel-reactive-utils/esm/embla-carousel-reactive-utils.esm.js +36 -0
- package/dist/node_modules/.pnpm/embla-carousel-reactive-utils@8.6.0_embla-carousel@8.6.0/node_modules/embla-carousel-reactive-utils/esm/embla-carousel-reactive-utils.esm.js.map +1 -0
- package/dist/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/esm/embla-carousel.esm.js +1205 -0
- package/dist/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/esm/embla-carousel.esm.js.map +1 -0
- package/dist/react.js +461 -439
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/area-chart/area-chart.d.ts +2 -17
- package/dist/src/components/ui/bar-chart/bar-chart.d.ts +2 -17
- package/dist/src/components/ui/carousel-dialog/carousel-dialog.d.ts +28 -0
- package/dist/src/components/ui/carousel-dialog/index.d.ts +1 -0
- package/dist/src/components/ui/category-bar/category-bar.d.ts +51 -0
- package/dist/src/components/ui/category-bar/index.d.ts +1 -0
- package/dist/src/components/ui/chart/__tests__/chart-format.test.d.ts +1 -0
- package/dist/src/components/ui/chart/chart-format.d.ts +111 -0
- package/dist/src/components/ui/chart/chart.d.ts +2 -0
- package/dist/src/components/ui/chart/index.d.ts +3 -1
- package/dist/src/components/ui/composed-chart/composed-chart.d.ts +2 -17
- package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts +2 -19
- package/dist/src/components/ui/dialog-footer-carousel/dialog-footer-carousel.d.ts +9 -0
- package/dist/src/components/ui/dialog-footer-carousel/index.d.ts +1 -0
- package/dist/src/components/ui/dialog-welcome/dialog-welcome.d.ts +54 -0
- package/dist/src/components/ui/dialog-welcome/dialog-welcome.docs.d.ts +55 -0
- package/dist/src/components/ui/dialog-welcome/index.d.ts +1 -0
- package/dist/src/components/ui/histogram/histogram.d.ts +2 -17
- package/dist/src/components/ui/line-chart/line-chart.d.ts +2 -17
- package/dist/src/components/ui/sankey-chart/index.d.ts +2 -0
- package/dist/src/components/ui/sankey-chart/sankey-chart.d.ts +69 -0
- package/dist/src/components/ui/scatter-chart/scatter-chart.d.ts +2 -17
- package/dist/src/index.d.ts +5 -0
- package/dist/ui-react.css +1 -1
- package/package.json +5 -4
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { cva as
|
|
4
|
-
import { ComposedChart as
|
|
5
|
-
import { cn as
|
|
6
|
-
import { ChartContainer as
|
|
7
|
-
|
|
1
|
+
import { jsx as e, jsxs as at } from "react/jsx-runtime";
|
|
2
|
+
import * as m from "react";
|
|
3
|
+
import { cva as nt } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
4
|
+
import { ComposedChart as ot, LineChart as it, CartesianGrid as rt, XAxis as lt, YAxis as st, Area as dt, Line as ct } from "recharts";
|
|
5
|
+
import { cn as mt } from "../../../lib/utils.js";
|
|
6
|
+
import { ChartContainer as ft, ChartTooltip as C, ChartTooltipContent as b, ChartLegend as _, ChartLegendContent as B } from "../chart/chart.js";
|
|
7
|
+
import { resolveAxisDomain as ht } from "../chart/chart-format.js";
|
|
8
|
+
const ut = nt("", {
|
|
8
9
|
variants: {
|
|
9
10
|
curve: {
|
|
10
11
|
linear: "",
|
|
@@ -20,148 +21,175 @@ const tt = W("", {
|
|
|
20
21
|
curve: "monotone",
|
|
21
22
|
lineStyle: "solid"
|
|
22
23
|
}
|
|
23
|
-
}),
|
|
24
|
-
function
|
|
24
|
+
}), $ = "__band_";
|
|
25
|
+
function T(n) {
|
|
25
26
|
return n == null ? void 0 : n.filter(
|
|
26
|
-
(
|
|
27
|
+
(l) => !String(l.dataKey).startsWith($)
|
|
27
28
|
);
|
|
28
29
|
}
|
|
29
|
-
function
|
|
30
|
+
function vt(n) {
|
|
30
31
|
return function(i) {
|
|
31
|
-
const
|
|
32
|
+
const s = {
|
|
32
33
|
...i,
|
|
33
|
-
payload:
|
|
34
|
+
payload: T(i.payload)
|
|
34
35
|
};
|
|
35
|
-
return typeof n == "function" ?
|
|
36
|
+
return typeof n == "function" ? m.createElement(
|
|
36
37
|
n,
|
|
37
|
-
|
|
38
|
-
) :
|
|
38
|
+
s
|
|
39
|
+
) : m.cloneElement(n, s);
|
|
39
40
|
};
|
|
40
41
|
}
|
|
41
|
-
const
|
|
42
|
+
const pt = m.forwardRef(
|
|
42
43
|
({
|
|
43
44
|
className: n,
|
|
44
|
-
config:
|
|
45
|
+
config: l,
|
|
45
46
|
data: i,
|
|
46
|
-
dataKeys:
|
|
47
|
-
comparisonKeys:
|
|
48
|
-
deltaBands:
|
|
49
|
-
xKey:
|
|
50
|
-
xAxisLabel:
|
|
51
|
-
yAxisLabel:
|
|
52
|
-
yUnit:
|
|
53
|
-
curve:
|
|
54
|
-
lineStyle:
|
|
55
|
-
strokeWidth:
|
|
56
|
-
showDots:
|
|
57
|
-
connectNulls:
|
|
58
|
-
showGrid:
|
|
59
|
-
showTooltip:
|
|
60
|
-
showLegend:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
47
|
+
dataKeys: s,
|
|
48
|
+
comparisonKeys: f,
|
|
49
|
+
deltaBands: A,
|
|
50
|
+
xKey: E,
|
|
51
|
+
xAxisLabel: d,
|
|
52
|
+
yAxisLabel: h,
|
|
53
|
+
yUnit: F,
|
|
54
|
+
curve: c = "monotone",
|
|
55
|
+
lineStyle: u = "solid",
|
|
56
|
+
strokeWidth: M = 2,
|
|
57
|
+
showDots: k = !0,
|
|
58
|
+
connectNulls: D = !1,
|
|
59
|
+
showGrid: R = !0,
|
|
60
|
+
showTooltip: S = !0,
|
|
61
|
+
showLegend: N = !0,
|
|
62
|
+
showXAxis: j = !0,
|
|
63
|
+
showYAxis: z = !0,
|
|
64
|
+
xTickFormatter: I,
|
|
65
|
+
yTickFormatter: O,
|
|
66
|
+
xAxisAngle: r,
|
|
67
|
+
xAxisInterval: V,
|
|
68
|
+
yAxisTickCount: X,
|
|
69
|
+
yAxisDomain: G,
|
|
70
|
+
gridDashed: H,
|
|
71
|
+
gridHorizontal: P,
|
|
72
|
+
gridVertical: W,
|
|
73
|
+
tooltipContent: v,
|
|
74
|
+
...Y
|
|
75
|
+
}, q) => {
|
|
76
|
+
const x = u === "dashed" ? "5 5" : void 0, J = ht(G), K = d || r != null ? 30 + (r != null ? 20 : 0) + (d ? 18 : 0) : void 0, L = m.useMemo(
|
|
77
|
+
() => v ? vt(v) : void 0,
|
|
78
|
+
[v]
|
|
79
|
+
), Q = d ? { value: d, position: "insideBottom", offset: 0 } : void 0, U = h ? {
|
|
80
|
+
value: h,
|
|
69
81
|
angle: -90,
|
|
70
82
|
position: "insideLeft",
|
|
71
83
|
style: { textAnchor: "middle" }
|
|
72
|
-
} : void 0, o = (
|
|
73
|
-
field: `${
|
|
84
|
+
} : void 0, o = (A ?? []).map(([t, a], p) => ({
|
|
85
|
+
field: `${$}${p}`,
|
|
74
86
|
current: t,
|
|
75
87
|
comparison: a
|
|
76
|
-
})),
|
|
88
|
+
})), Z = o.length ? i.map((t) => {
|
|
77
89
|
const a = { ...t };
|
|
78
|
-
for (const { field: p, current:
|
|
79
|
-
const
|
|
80
|
-
a[p] = typeof
|
|
90
|
+
for (const { field: p, current: tt, comparison: et } of o) {
|
|
91
|
+
const y = t[tt], g = t[et];
|
|
92
|
+
a[p] = typeof y == "number" && typeof g == "number" ? [Math.min(y, g), Math.max(y, g)] : void 0;
|
|
81
93
|
}
|
|
82
94
|
return a;
|
|
83
|
-
}) : i,
|
|
95
|
+
}) : i, w = o.length > 0 ? ot : it;
|
|
84
96
|
return /* @__PURE__ */ e(
|
|
85
97
|
"div",
|
|
86
98
|
{
|
|
87
|
-
ref:
|
|
88
|
-
"data-curve":
|
|
89
|
-
"data-line-style":
|
|
90
|
-
className:
|
|
91
|
-
...
|
|
99
|
+
ref: q,
|
|
100
|
+
"data-curve": c,
|
|
101
|
+
"data-line-style": u,
|
|
102
|
+
className: mt(ut({ curve: c, lineStyle: u }), n),
|
|
103
|
+
...Y,
|
|
92
104
|
children: /* @__PURE__ */ e(
|
|
93
|
-
|
|
105
|
+
ft,
|
|
94
106
|
{
|
|
95
|
-
config:
|
|
107
|
+
config: l,
|
|
96
108
|
className: "size-full [&_.recharts-label]:fill-foreground",
|
|
97
|
-
children: /* @__PURE__ */
|
|
98
|
-
|
|
109
|
+
children: /* @__PURE__ */ at(w, { data: Z, children: [
|
|
110
|
+
R && /* @__PURE__ */ e(
|
|
111
|
+
rt,
|
|
112
|
+
{
|
|
113
|
+
horizontal: P ?? !0,
|
|
114
|
+
vertical: W ?? !1,
|
|
115
|
+
strokeDasharray: H ? "3 3" : void 0
|
|
116
|
+
}
|
|
117
|
+
),
|
|
99
118
|
/* @__PURE__ */ e(
|
|
100
|
-
|
|
119
|
+
lt,
|
|
101
120
|
{
|
|
102
|
-
dataKey:
|
|
121
|
+
dataKey: E,
|
|
103
122
|
type: "category",
|
|
123
|
+
hide: !j,
|
|
104
124
|
tickLine: !1,
|
|
105
125
|
axisLine: !1,
|
|
106
126
|
tickMargin: 8,
|
|
107
|
-
|
|
108
|
-
|
|
127
|
+
tickFormatter: I,
|
|
128
|
+
angle: r,
|
|
129
|
+
interval: V,
|
|
130
|
+
textAnchor: r != null ? r < 0 ? "end" : "start" : void 0,
|
|
131
|
+
height: K,
|
|
132
|
+
label: Q
|
|
109
133
|
}
|
|
110
134
|
),
|
|
111
135
|
/* @__PURE__ */ e(
|
|
112
|
-
|
|
136
|
+
st,
|
|
113
137
|
{
|
|
114
138
|
type: "number",
|
|
139
|
+
hide: !z,
|
|
115
140
|
tickLine: !1,
|
|
116
141
|
axisLine: !1,
|
|
117
|
-
unit:
|
|
118
|
-
|
|
119
|
-
|
|
142
|
+
unit: F,
|
|
143
|
+
tickFormatter: O,
|
|
144
|
+
tickCount: X,
|
|
145
|
+
domain: J,
|
|
146
|
+
width: h ? 72 : void 0,
|
|
147
|
+
label: U
|
|
120
148
|
}
|
|
121
149
|
),
|
|
122
|
-
|
|
150
|
+
S && (L ? (
|
|
123
151
|
// Strips the synthetic delta bands before the caller's tooltip
|
|
124
152
|
// sees them — the `__band_*` series feed the Areas, not the
|
|
125
153
|
// tooltip (a no-op when no bands are configured).
|
|
126
|
-
/* @__PURE__ */ e(
|
|
154
|
+
/* @__PURE__ */ e(C, { content: L })
|
|
127
155
|
) : o.length > 0 ? /* @__PURE__ */ e(
|
|
128
|
-
|
|
156
|
+
C,
|
|
129
157
|
{
|
|
130
158
|
content: (t) => /* @__PURE__ */ e(
|
|
131
159
|
b,
|
|
132
160
|
{
|
|
133
161
|
active: t.active,
|
|
134
162
|
label: t.label,
|
|
135
|
-
payload:
|
|
163
|
+
payload: T(
|
|
136
164
|
t.payload
|
|
137
165
|
)
|
|
138
166
|
}
|
|
139
167
|
)
|
|
140
168
|
}
|
|
141
|
-
) : /* @__PURE__ */ e(
|
|
142
|
-
|
|
143
|
-
|
|
169
|
+
) : /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(b, {}) })),
|
|
170
|
+
N && (o.length > 0 ? /* @__PURE__ */ e(
|
|
171
|
+
_,
|
|
144
172
|
{
|
|
145
173
|
content: (t) => /* @__PURE__ */ e(
|
|
146
|
-
|
|
174
|
+
B,
|
|
147
175
|
{
|
|
148
176
|
verticalAlign: t.verticalAlign,
|
|
149
|
-
payload:
|
|
177
|
+
payload: T(
|
|
150
178
|
t.payload
|
|
151
179
|
)
|
|
152
180
|
}
|
|
153
181
|
)
|
|
154
182
|
}
|
|
155
|
-
) : /* @__PURE__ */ e(
|
|
183
|
+
) : /* @__PURE__ */ e(_, { content: /* @__PURE__ */ e(B, {}) })),
|
|
156
184
|
o.map(({ field: t, current: a }) => /* @__PURE__ */ e(
|
|
157
|
-
|
|
185
|
+
dt,
|
|
158
186
|
{
|
|
159
187
|
dataKey: t,
|
|
160
|
-
type:
|
|
188
|
+
type: c ?? "monotone",
|
|
161
189
|
stroke: "none",
|
|
162
190
|
fill: `var(--color-${a})`,
|
|
163
191
|
fillOpacity: 0.12,
|
|
164
|
-
connectNulls:
|
|
192
|
+
connectNulls: D,
|
|
165
193
|
dot: !1,
|
|
166
194
|
activeDot: !1,
|
|
167
195
|
isAnimationActive: !1,
|
|
@@ -170,20 +198,20 @@ const at = d.forwardRef(
|
|
|
170
198
|
},
|
|
171
199
|
t
|
|
172
200
|
)),
|
|
173
|
-
|
|
174
|
-
const a =
|
|
201
|
+
s.map((t) => {
|
|
202
|
+
const a = f == null ? void 0 : f.includes(t);
|
|
175
203
|
return /* @__PURE__ */ e(
|
|
176
|
-
|
|
204
|
+
ct,
|
|
177
205
|
{
|
|
178
|
-
type:
|
|
206
|
+
type: c ?? "monotone",
|
|
179
207
|
dataKey: t,
|
|
180
208
|
stroke: `var(--color-${t})`,
|
|
181
|
-
strokeWidth:
|
|
182
|
-
strokeDasharray: a ? "5 5" :
|
|
209
|
+
strokeWidth: M,
|
|
210
|
+
strokeDasharray: a ? "5 5" : x,
|
|
183
211
|
strokeOpacity: a ? 0.5 : void 0,
|
|
184
|
-
dot: !a &&
|
|
185
|
-
activeDot: !a &&
|
|
186
|
-
connectNulls:
|
|
212
|
+
dot: !a && k ? { r: 3 } : !1,
|
|
213
|
+
activeDot: !a && k ? { r: 5 } : !1,
|
|
214
|
+
connectNulls: D,
|
|
187
215
|
isAnimationActive: !1
|
|
188
216
|
},
|
|
189
217
|
t
|
|
@@ -196,11 +224,11 @@ const at = d.forwardRef(
|
|
|
196
224
|
);
|
|
197
225
|
}
|
|
198
226
|
);
|
|
199
|
-
|
|
227
|
+
pt.displayName = "LineChart";
|
|
200
228
|
export {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
229
|
+
pt as LineChart,
|
|
230
|
+
vt as createBandStrippedTooltip,
|
|
231
|
+
T as dropBandSeries,
|
|
232
|
+
ut as lineChartVariants
|
|
205
233
|
};
|
|
206
234
|
//# sourceMappingURL=line-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-chart.js","sources":["../../../../src/components/ui/line-chart/line-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Area,\n CartesianGrid,\n ComposedChart,\n Line,\n LineChart as RechartsLineChart,\n XAxis,\n YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n type ChartLegendContentProps,\n type ChartTooltipContentProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Line-chart variant set: `curve` (how the segments\n// interpolate between points — straight, smoothed, or stepped) and `lineStyle`\n// (a solid or dashed stroke). \"single\" vs \"multi\" line is not a variant — it\n// falls out of how many `dataKeys` the caller plots. The classes stay empty\n// because recharts' SVG — not CSS — draws the lines: `curve` drives each\n// `<Line type>` and `lineStyle` drives its `strokeDasharray`. CVA is kept so the\n// variant set is a first-class, spec-conformant part of the API (matched against\n// ui-spec's api.yaml enums) and exposed via `VariantProps`; the resolved values\n// are also mirrored onto `data-curve` / `data-line-style` for styling hooks and\n// tests.\nconst lineChartVariants = cva('', {\n variants: {\n curve: {\n linear: '',\n monotone: '',\n step: '',\n },\n lineStyle: {\n solid: '',\n dashed: '',\n },\n },\n defaultVariants: {\n curve: 'monotone',\n lineStyle: 'solid',\n },\n});\n\n// Reserved field prefix for the synthetic delta-band range series. Each band\n// mints one `__band_<n>` field that feeds an <Area>; it must never surface in\n// the tooltip or legend (those describe only real, caller-supplied series).\nconst BAND_FIELD_PREFIX = '__band_';\n\n/**\n * Drop the synthetic delta-band range series from a recharts tooltip/legend\n * payload, keeping the real series (and their order). recharts already excludes\n * the band via `legendType`/`tooltipType=\"none\"`, so this is a second, explicit\n * guard — hence it's unit-tested rather than relying on that behavior.\n */\nexport function dropBandSeries<T extends { dataKey?: unknown }>(\n payload: readonly T[] | undefined\n): T[] | undefined {\n return payload?.filter(\n (item) => !String(item.dataKey).startsWith(BAND_FIELD_PREFIX)\n );\n}\n\ntype TooltipContentType = NonNullable<\n React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic delta bands are\n * stripped from the payload before it renders, while preserving recharts' own\n * mount semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\nexport function createBandStrippedTooltip(tooltipContent: TooltipContentType) {\n return function BandStrippedTooltip(props: TooltipRenderProps) {\n const merged = {\n ...props,\n payload: dropBandSeries(props.payload),\n } as TooltipRenderProps;\n return typeof tooltipContent === 'function'\n ? React.createElement(\n tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n merged\n )\n : React.cloneElement(tooltipContent, merged);\n };\n}\n\nexport interface LineChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n VariantProps<typeof lineChartVariants> {\n /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the line unless `connectNulls`). */\n data: ReadonlyArray<Record<string, string | number | null>>;\n /**\n * Per-series map of `label` / `color` (imported from the shared `Chart`\n * primitives). Series colors are caller-supplied — reference an existing\n * semantic `--ui-*` token; there is no chart palette tier yet.\n */\n config: ChartConfig;\n /** Series to plot — one `<Line>` per key. Each must exist in `config` and in every data row. */\n dataKeys: string[];\n /**\n * Subset of `dataKeys` to render as comparison/trend overlays (e.g. a\n * previous quarter or year) — dashed, dimmed, and dot-less, so they read as\n * secondary to the current-period lines. Keeps each series' own `config` color.\n */\n comparisonKeys?: string[];\n /**\n * Pairs of `[currentKey, comparisonKey]` to shade a delta band between — a\n * dimmed area filling the gap between the two series at each point,\n * visualizing the QoQ/YoY difference. Tinted with the first key's `config`\n * color. Rows where either value isn't numeric are left un-banded.\n *\n * Each pair mints an internal `__band_<n>` field (kept out of the tooltip and\n * legend), so avoid data/`config` keys with that reserved prefix.\n */\n deltaBands?: Array<[string, string]>;\n /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n xKey: string;\n /** Title rendered beneath the horizontal (X) axis. */\n xAxisLabel?: string;\n /** Title rendered beside the vertical (Y) axis (rotated). */\n yAxisLabel?: string;\n /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n yUnit?: string;\n /** Stroke width of each line. */\n strokeWidth?: number;\n /** Render a dot at each data point. */\n showDots?: boolean;\n /** Bridge `null` gaps in the data instead of breaking the line. */\n connectNulls?: boolean;\n showGrid?: boolean;\n showTooltip?: boolean;\n showLegend?: boolean;\n /**\n * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /\n * `indicator` — to customize formatting, per-series rows, or extra fields\n * without composing recharts yourself. Ignored when `showTooltip` is false.\n */\n tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n (\n {\n className,\n config,\n data,\n dataKeys,\n comparisonKeys,\n deltaBands,\n xKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n curve = 'monotone',\n lineStyle = 'solid',\n strokeWidth = 2,\n showDots = true,\n connectNulls = false,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n tooltipContent,\n ...props\n },\n ref\n ) => {\n const dashArray = lineStyle === 'dashed' ? '5 5' : undefined;\n\n // Memoized so recharts sees a stable content type across renders — a fresh\n // wrapper each render would remount the caller's tooltip and reset its state.\n const customTooltip = React.useMemo(\n () =>\n tooltipContent ? createBandStrippedTooltip(tooltipContent) : undefined,\n [tooltipContent]\n );\n\n // Axis titles: the X title sits below the ticks; the Y title is rotated in\n // the left gutter. Passed to recharts' native `label` (themed via the\n // `.recharts-label` fill selector on the container).\n const xAxisTitle = xAxisLabel\n ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n : undefined;\n const yAxisTitle = yAxisLabel\n ? {\n value: yAxisLabel,\n angle: -90,\n position: 'insideLeft' as const,\n style: { textAnchor: 'middle' as const },\n }\n : undefined;\n\n // Each delta band becomes a synthetic `[min, max]` range field per row that\n // a recharts <Area> shades. Rows where either series isn't numeric are left\n // un-banded (the area breaks there).\n const bands = (deltaBands ?? []).map(([current, comparison], index) => ({\n field: `${BAND_FIELD_PREFIX}${index}`,\n current,\n comparison,\n }));\n const chartData = bands.length\n ? data.map((row) => {\n const augmented: Record<string, unknown> = { ...row };\n for (const { field, current, comparison } of bands) {\n const a = row[current];\n const b = row[comparison];\n augmented[field] =\n typeof a === 'number' && typeof b === 'number'\n ? [Math.min(a, b), Math.max(a, b)]\n : undefined;\n }\n return augmented;\n })\n : data;\n\n // Only a delta band needs an <Area>, which recharts renders under\n // ComposedChart, not LineChart. Escalate to ComposedChart only then, so\n // plain line charts keep the LineChart base (and their baselines) untouched.\n const RootChart = bands.length > 0 ? ComposedChart : RechartsLineChart;\n\n return (\n <div\n ref={ref}\n data-curve={curve}\n data-line-style={lineStyle}\n className={cn(lineChartVariants({ curve, lineStyle }), className)}\n {...props}\n >\n <ChartContainer\n config={config}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RootChart data={chartData as readonly unknown[]}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis\n dataKey={xKey}\n type=\"category\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n height={xAxisLabel ? 48 : undefined}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n tickLine={false}\n axisLine={false}\n unit={yUnit}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {showTooltip &&\n (customTooltip ? (\n // Strips the synthetic delta bands before the caller's tooltip\n // sees them — the `__band_*` series feed the Areas, not the\n // tooltip (a no-op when no bands are configured).\n <ChartTooltip content={customTooltip} />\n ) : bands.length > 0 ? (\n <ChartTooltip\n content={(props) => (\n <ChartTooltipContent\n active={props.active}\n label={props.label}\n payload={\n dropBandSeries(\n props.payload\n ) as ChartTooltipContentProps['payload']\n }\n />\n )}\n />\n ) : (\n <ChartTooltip content={<ChartTooltipContent />} />\n ))}\n {showLegend &&\n (bands.length > 0 ? (\n <ChartLegend\n content={(props) => (\n <ChartLegendContent\n verticalAlign={props.verticalAlign}\n payload={\n dropBandSeries(\n props.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )}\n />\n ) : (\n <ChartLegend content={<ChartLegendContent />} />\n ))}\n {/* Delta bands render before the lines so the lines draw on top. */}\n {bands.map(({ field, current }) => (\n <Area\n key={field}\n dataKey={field}\n type={curve ?? 'monotone'}\n stroke=\"none\"\n fill={`var(--color-${current})`}\n fillOpacity={0.12}\n connectNulls={connectNulls}\n dot={false}\n activeDot={false}\n isAnimationActive={false}\n legendType=\"none\"\n tooltipType=\"none\"\n />\n ))}\n {dataKeys.map((key) => {\n // Comparison series read as secondary: always dashed, dimmed, and\n // dot-less, regardless of the global lineStyle / showDots.\n const isComparison = comparisonKeys?.includes(key);\n return (\n <Line\n key={key}\n type={curve ?? 'monotone'}\n dataKey={key}\n stroke={`var(--color-${key})`}\n strokeWidth={strokeWidth}\n strokeDasharray={isComparison ? '5 5' : dashArray}\n strokeOpacity={isComparison ? 0.5 : undefined}\n dot={!isComparison && showDots ? { r: 3 } : false}\n activeDot={!isComparison && showDots ? { r: 5 } : false}\n connectNulls={connectNulls}\n isAnimationActive={false}\n />\n );\n })}\n </RootChart>\n </ChartContainer>\n </div>\n );\n }\n);\nLineChart.displayName = 'LineChart';\n\nexport { LineChart, lineChartVariants };\n"],"names":["lineChartVariants","cva","BAND_FIELD_PREFIX","dropBandSeries","payload","item","createBandStrippedTooltip","tooltipContent","props","merged","React","LineChart","className","config","data","dataKeys","comparisonKeys","deltaBands","xKey","xAxisLabel","yAxisLabel","yUnit","curve","lineStyle","strokeWidth","showDots","connectNulls","showGrid","showTooltip","showLegend","ref","dashArray","customTooltip","xAxisTitle","yAxisTitle","bands","current","comparison","index","chartData","row","augmented","field","a","b","RootChart","ComposedChart","RechartsLineChart","jsx","cn","ChartContainer","jsxs","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area","key","isComparison","Line"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"line-chart.js","sources":["../../../../src/components/ui/line-chart/line-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Area,\n CartesianGrid,\n ComposedChart,\n Line,\n LineChart as RechartsLineChart,\n XAxis,\n YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAxisDomain,\n type ChartConfig,\n type ChartLegendContentProps,\n type ChartTooltipContentProps,\n type CartesianChartProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Line-chart variant set: `curve` (how the segments\n// interpolate between points — straight, smoothed, or stepped) and `lineStyle`\n// (a solid or dashed stroke). \"single\" vs \"multi\" line is not a variant — it\n// falls out of how many `dataKeys` the caller plots. The classes stay empty\n// because recharts' SVG — not CSS — draws the lines: `curve` drives each\n// `<Line type>` and `lineStyle` drives its `strokeDasharray`. CVA is kept so the\n// variant set is a first-class, spec-conformant part of the API (matched against\n// ui-spec's api.yaml enums) and exposed via `VariantProps`; the resolved values\n// are also mirrored onto `data-curve` / `data-line-style` for styling hooks and\n// tests.\nconst lineChartVariants = cva('', {\n variants: {\n curve: {\n linear: '',\n monotone: '',\n step: '',\n },\n lineStyle: {\n solid: '',\n dashed: '',\n },\n },\n defaultVariants: {\n curve: 'monotone',\n lineStyle: 'solid',\n },\n});\n\n// Reserved field prefix for the synthetic delta-band range series. Each band\n// mints one `__band_<n>` field that feeds an <Area>; it must never surface in\n// the tooltip or legend (those describe only real, caller-supplied series).\nconst BAND_FIELD_PREFIX = '__band_';\n\n/**\n * Drop the synthetic delta-band range series from a recharts tooltip/legend\n * payload, keeping the real series (and their order). recharts already excludes\n * the band via `legendType`/`tooltipType=\"none\"`, so this is a second, explicit\n * guard — hence it's unit-tested rather than relying on that behavior.\n */\nexport function dropBandSeries<T extends { dataKey?: unknown }>(\n payload: readonly T[] | undefined\n): T[] | undefined {\n return payload?.filter(\n (item) => !String(item.dataKey).startsWith(BAND_FIELD_PREFIX)\n );\n}\n\ntype TooltipContentType = NonNullable<\n React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic delta bands are\n * stripped from the payload before it renders, while preserving recharts' own\n * mount semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\nexport function createBandStrippedTooltip(tooltipContent: TooltipContentType) {\n return function BandStrippedTooltip(props: TooltipRenderProps) {\n const merged = {\n ...props,\n payload: dropBandSeries(props.payload),\n } as TooltipRenderProps;\n return typeof tooltipContent === 'function'\n ? React.createElement(\n tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n merged\n )\n : React.cloneElement(tooltipContent, merged);\n };\n}\n\nexport interface LineChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n VariantProps<typeof lineChartVariants>,\n CartesianChartProps {\n /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the line unless `connectNulls`). */\n data: ReadonlyArray<Record<string, string | number | null>>;\n /**\n * Per-series map of `label` / `color` (imported from the shared `Chart`\n * primitives). Series colors are caller-supplied — reference an existing\n * semantic `--ui-*` token; there is no chart palette tier yet.\n */\n config: ChartConfig;\n /** Series to plot — one `<Line>` per key. Each must exist in `config` and in every data row. */\n dataKeys: string[];\n /**\n * Subset of `dataKeys` to render as comparison/trend overlays (e.g. a\n * previous quarter or year) — dashed, dimmed, and dot-less, so they read as\n * secondary to the current-period lines. Keeps each series' own `config` color.\n */\n comparisonKeys?: string[];\n /**\n * Pairs of `[currentKey, comparisonKey]` to shade a delta band between — a\n * dimmed area filling the gap between the two series at each point,\n * visualizing the QoQ/YoY difference. Tinted with the first key's `config`\n * color. Rows where either value isn't numeric are left un-banded.\n *\n * Each pair mints an internal `__band_<n>` field (kept out of the tooltip and\n * legend), so avoid data/`config` keys with that reserved prefix.\n */\n deltaBands?: Array<[string, string]>;\n /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n xKey: string;\n /** Stroke width of each line. */\n strokeWidth?: number;\n /** Render a dot at each data point. */\n showDots?: boolean;\n /** Bridge `null` gaps in the data instead of breaking the line. */\n connectNulls?: boolean;\n showLegend?: boolean;\n}\n\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n (\n {\n className,\n config,\n data,\n dataKeys,\n comparisonKeys,\n deltaBands,\n xKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n curve = 'monotone',\n lineStyle = 'solid',\n strokeWidth = 2,\n showDots = true,\n connectNulls = false,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n showXAxis = true,\n showYAxis = true,\n xTickFormatter,\n yTickFormatter,\n xAxisAngle,\n xAxisInterval,\n yAxisTickCount,\n yAxisDomain,\n gridDashed,\n gridHorizontal,\n gridVertical,\n tooltipContent,\n ...props\n },\n ref\n ) => {\n const dashArray = lineStyle === 'dashed' ? '5 5' : undefined;\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n // Room for the X tick row: recharts' default 30, plus a rotated tick row\n // (+20) and/or the axis title (+18). Additive — both can be present at once,\n // which the old label-or-angle ternary under-allocated.\n const xAxisHeight =\n xAxisLabel || xAxisAngle != null\n ? 30 + (xAxisAngle != null ? 20 : 0) + (xAxisLabel ? 18 : 0)\n : undefined;\n\n // Memoized so recharts sees a stable content type across renders — a fresh\n // wrapper each render would remount the caller's tooltip and reset its state.\n const customTooltip = React.useMemo(\n () =>\n tooltipContent ? createBandStrippedTooltip(tooltipContent) : undefined,\n [tooltipContent]\n );\n\n // Axis titles: the X title sits below the ticks; the Y title is rotated in\n // the left gutter. Passed to recharts' native `label` (themed via the\n // `.recharts-label` fill selector on the container).\n const xAxisTitle = xAxisLabel\n ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n : undefined;\n const yAxisTitle = yAxisLabel\n ? {\n value: yAxisLabel,\n angle: -90,\n position: 'insideLeft' as const,\n style: { textAnchor: 'middle' as const },\n }\n : undefined;\n\n // Each delta band becomes a synthetic `[min, max]` range field per row that\n // a recharts <Area> shades. Rows where either series isn't numeric are left\n // un-banded (the area breaks there).\n const bands = (deltaBands ?? []).map(([current, comparison], index) => ({\n field: `${BAND_FIELD_PREFIX}${index}`,\n current,\n comparison,\n }));\n const chartData = bands.length\n ? data.map((row) => {\n const augmented: Record<string, unknown> = { ...row };\n for (const { field, current, comparison } of bands) {\n const a = row[current];\n const b = row[comparison];\n augmented[field] =\n typeof a === 'number' && typeof b === 'number'\n ? [Math.min(a, b), Math.max(a, b)]\n : undefined;\n }\n return augmented;\n })\n : data;\n\n // Only a delta band needs an <Area>, which recharts renders under\n // ComposedChart, not LineChart. Escalate to ComposedChart only then, so\n // plain line charts keep the LineChart base (and their baselines) untouched.\n const RootChart = bands.length > 0 ? ComposedChart : RechartsLineChart;\n\n return (\n <div\n ref={ref}\n data-curve={curve}\n data-line-style={lineStyle}\n className={cn(lineChartVariants({ curve, lineStyle }), className)}\n {...props}\n >\n <ChartContainer\n config={config}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RootChart data={chartData as readonly unknown[]}>\n {showGrid && (\n <CartesianGrid\n horizontal={gridHorizontal ?? true}\n vertical={gridVertical ?? false}\n strokeDasharray={gridDashed ? '3 3' : undefined}\n />\n )}\n <XAxis\n dataKey={xKey}\n type=\"category\"\n hide={!showXAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={xTickFormatter}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={\n xAxisAngle != null ? (xAxisAngle < 0 ? 'end' : 'start') : undefined\n }\n height={xAxisHeight}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n hide={!showYAxis}\n tickLine={false}\n axisLine={false}\n unit={yUnit}\n tickFormatter={yTickFormatter}\n tickCount={yAxisTickCount}\n domain={yDomain}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {showTooltip &&\n (customTooltip ? (\n // Strips the synthetic delta bands before the caller's tooltip\n // sees them — the `__band_*` series feed the Areas, not the\n // tooltip (a no-op when no bands are configured).\n <ChartTooltip content={customTooltip} />\n ) : bands.length > 0 ? (\n <ChartTooltip\n content={(props) => (\n <ChartTooltipContent\n active={props.active}\n label={props.label}\n payload={\n dropBandSeries(\n props.payload\n ) as ChartTooltipContentProps['payload']\n }\n />\n )}\n />\n ) : (\n <ChartTooltip content={<ChartTooltipContent />} />\n ))}\n {showLegend &&\n (bands.length > 0 ? (\n <ChartLegend\n content={(props) => (\n <ChartLegendContent\n verticalAlign={props.verticalAlign}\n payload={\n dropBandSeries(\n props.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )}\n />\n ) : (\n <ChartLegend content={<ChartLegendContent />} />\n ))}\n {/* Delta bands render before the lines so the lines draw on top. */}\n {bands.map(({ field, current }) => (\n <Area\n key={field}\n dataKey={field}\n type={curve ?? 'monotone'}\n stroke=\"none\"\n fill={`var(--color-${current})`}\n fillOpacity={0.12}\n connectNulls={connectNulls}\n dot={false}\n activeDot={false}\n isAnimationActive={false}\n legendType=\"none\"\n tooltipType=\"none\"\n />\n ))}\n {dataKeys.map((key) => {\n // Comparison series read as secondary: always dashed, dimmed, and\n // dot-less, regardless of the global lineStyle / showDots.\n const isComparison = comparisonKeys?.includes(key);\n return (\n <Line\n key={key}\n type={curve ?? 'monotone'}\n dataKey={key}\n stroke={`var(--color-${key})`}\n strokeWidth={strokeWidth}\n strokeDasharray={isComparison ? '5 5' : dashArray}\n strokeOpacity={isComparison ? 0.5 : undefined}\n dot={!isComparison && showDots ? { r: 3 } : false}\n activeDot={!isComparison && showDots ? { r: 5 } : false}\n connectNulls={connectNulls}\n isAnimationActive={false}\n />\n );\n })}\n </RootChart>\n </ChartContainer>\n </div>\n );\n }\n);\nLineChart.displayName = 'LineChart';\n\nexport { LineChart, lineChartVariants };\n"],"names":["lineChartVariants","cva","BAND_FIELD_PREFIX","dropBandSeries","payload","item","createBandStrippedTooltip","tooltipContent","props","merged","React","LineChart","className","config","data","dataKeys","comparisonKeys","deltaBands","xKey","xAxisLabel","yAxisLabel","yUnit","curve","lineStyle","strokeWidth","showDots","connectNulls","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","ref","dashArray","yDomain","resolveAxisDomain","xAxisHeight","customTooltip","xAxisTitle","yAxisTitle","bands","current","comparison","index","chartData","row","augmented","field","a","b","RootChart","ComposedChart","RechartsLineChart","jsx","cn","ChartContainer","jsxs","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area","key","isComparison","Line"],"mappings":"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"}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { jsxs as b, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import * as f from "react";
|
|
3
|
+
import { Sankey as R, Rectangle as T } from "recharts";
|
|
4
|
+
import { cn as j } from "../../../lib/utils.js";
|
|
5
|
+
import { ChartStyle as A, ChartContainer as q, ChartTooltip as B } from "../chart/chart.js";
|
|
6
|
+
function F(s, n, e) {
|
|
7
|
+
return function({
|
|
8
|
+
x: l,
|
|
9
|
+
y: m,
|
|
10
|
+
width: d,
|
|
11
|
+
height: t,
|
|
12
|
+
index: c,
|
|
13
|
+
payload: a
|
|
14
|
+
}) {
|
|
15
|
+
var i;
|
|
16
|
+
const r = String(a.name), h = ((i = s[r]) == null ? void 0 : i.label) ?? r, x = n.has(c);
|
|
17
|
+
return /* @__PURE__ */ b("g", { children: [
|
|
18
|
+
/* @__PURE__ */ o(
|
|
19
|
+
T,
|
|
20
|
+
{
|
|
21
|
+
x: l,
|
|
22
|
+
y: m,
|
|
23
|
+
width: d,
|
|
24
|
+
height: t,
|
|
25
|
+
fill: `var(--color-${r})`,
|
|
26
|
+
radius: 2
|
|
27
|
+
}
|
|
28
|
+
),
|
|
29
|
+
e && /* @__PURE__ */ o(
|
|
30
|
+
"text",
|
|
31
|
+
{
|
|
32
|
+
x: x ? l + d + 6 : l - 6,
|
|
33
|
+
y: m + t / 2,
|
|
34
|
+
textAnchor: x ? "start" : "end",
|
|
35
|
+
dominantBaseline: "middle",
|
|
36
|
+
className: "fill-foreground text-xs",
|
|
37
|
+
children: h
|
|
38
|
+
}
|
|
39
|
+
)
|
|
40
|
+
] });
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
function L({
|
|
44
|
+
sourceX: s,
|
|
45
|
+
targetX: n,
|
|
46
|
+
sourceY: e,
|
|
47
|
+
targetY: g,
|
|
48
|
+
sourceControlX: l,
|
|
49
|
+
targetControlX: m,
|
|
50
|
+
linkWidth: d,
|
|
51
|
+
payload: t
|
|
52
|
+
}) {
|
|
53
|
+
const c = String(t.target.name), a = t.color ?? `var(--color-${c})`;
|
|
54
|
+
return /* @__PURE__ */ o(
|
|
55
|
+
"path",
|
|
56
|
+
{
|
|
57
|
+
d: `M${s},${e}C${l},${e} ${m},${g} ${n},${g}`,
|
|
58
|
+
fill: "none",
|
|
59
|
+
stroke: a,
|
|
60
|
+
strokeWidth: Math.max(1, d),
|
|
61
|
+
strokeOpacity: t.color ? 1 : 0.35
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
function O(s, n, e) {
|
|
66
|
+
var m, d;
|
|
67
|
+
const g = (t) => {
|
|
68
|
+
var c;
|
|
69
|
+
return ((c = s[t]) == null ? void 0 : c.label) ?? t;
|
|
70
|
+
}, l = /* @__PURE__ */ new Map();
|
|
71
|
+
for (const t of n) {
|
|
72
|
+
const c = ((m = e[t.source]) == null ? void 0 : m.name) ?? "", a = ((d = e[t.target]) == null ? void 0 : d.name) ?? "";
|
|
73
|
+
l.set(c + " - " + a, {
|
|
74
|
+
color: t.color ?? `var(--color-${a})`,
|
|
75
|
+
opacity: t.color ? 1 : 0.35
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
return function({
|
|
79
|
+
active: c,
|
|
80
|
+
payload: a
|
|
81
|
+
}) {
|
|
82
|
+
if (!c || !(a != null && a.length)) return null;
|
|
83
|
+
const r = a[0], h = String((r == null ? void 0 : r.name) ?? "").split(" - "), x = h[h.length - 1], i = l.get(String((r == null ? void 0 : r.name) ?? "")), v = (i == null ? void 0 : i.color) ?? `var(--color-${x})`, y = (i == null ? void 0 : i.opacity) ?? 1, C = r == null ? void 0 : r.value;
|
|
84
|
+
return /* @__PURE__ */ b("div", { className: "flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md", children: [
|
|
85
|
+
/* @__PURE__ */ o(
|
|
86
|
+
"span",
|
|
87
|
+
{
|
|
88
|
+
className: "h-2.5 w-2.5 shrink-0 rounded-[2px]",
|
|
89
|
+
style: { backgroundColor: v, opacity: y }
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
/* @__PURE__ */ o("span", { className: "text-muted-foreground", children: h.map((M, w) => /* @__PURE__ */ b(f.Fragment, { children: [
|
|
93
|
+
w > 0 && " → ",
|
|
94
|
+
g(M)
|
|
95
|
+
] }, `${M}-${w}`)) }),
|
|
96
|
+
C != null && /* @__PURE__ */ o("span", { className: "ms-2 font-medium tabular-nums", children: I(C) })
|
|
97
|
+
] });
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
function I(s) {
|
|
101
|
+
return Array.isArray(s) ? s.map((n) => I(n)).join(" – ") : typeof s == "number" ? s.toLocaleString() : String(s);
|
|
102
|
+
}
|
|
103
|
+
const z = f.forwardRef(
|
|
104
|
+
({
|
|
105
|
+
className: s,
|
|
106
|
+
config: n,
|
|
107
|
+
data: e,
|
|
108
|
+
nodePadding: g = 24,
|
|
109
|
+
nodeWidth: l = 12,
|
|
110
|
+
linkCurvature: m = 0.5,
|
|
111
|
+
sort: d = !1,
|
|
112
|
+
showLabels: t = !0,
|
|
113
|
+
showLegend: c = !1,
|
|
114
|
+
showTooltip: a = !0,
|
|
115
|
+
tooltipContent: r,
|
|
116
|
+
...h
|
|
117
|
+
}, x) => {
|
|
118
|
+
const v = `chart-${f.useId().replace(/:/g, "")}`, y = f.useMemo(
|
|
119
|
+
() => new Set(e.links.map((u) => u.source)),
|
|
120
|
+
[e.links]
|
|
121
|
+
), C = f.useMemo(
|
|
122
|
+
() => F(n, y, t),
|
|
123
|
+
[n, y, t]
|
|
124
|
+
), M = f.useMemo(
|
|
125
|
+
() => O(n, e.links, e.nodes),
|
|
126
|
+
[n, e.links, e.nodes]
|
|
127
|
+
), w = f.useMemo(() => {
|
|
128
|
+
const u = /* @__PURE__ */ new Map(), N = /* @__PURE__ */ new Map();
|
|
129
|
+
for (const p of e.links)
|
|
130
|
+
N.set(p.source, (N.get(p.source) ?? 0) + p.value), u.set(p.target, (u.get(p.target) ?? 0) + p.value);
|
|
131
|
+
const k = e.nodes.map(
|
|
132
|
+
(p, $) => u.get($) ?? N.get($) ?? 0
|
|
133
|
+
), S = k.length ? Math.max(...k) : 0;
|
|
134
|
+
return e.nodes.map((p, $) => ({
|
|
135
|
+
name: p.name,
|
|
136
|
+
value: k[$],
|
|
137
|
+
pct: S > 0 ? Math.round(k[$] / S * 100) : 0
|
|
138
|
+
}));
|
|
139
|
+
}, [e]);
|
|
140
|
+
return /* @__PURE__ */ b(
|
|
141
|
+
"div",
|
|
142
|
+
{
|
|
143
|
+
ref: x,
|
|
144
|
+
"data-chart": v,
|
|
145
|
+
className: j("flex flex-col", s),
|
|
146
|
+
...h,
|
|
147
|
+
children: [
|
|
148
|
+
/* @__PURE__ */ o(A, { id: v, config: n }),
|
|
149
|
+
/* @__PURE__ */ o(q, { config: n, className: "min-h-0 flex-1", children: /* @__PURE__ */ o(
|
|
150
|
+
R,
|
|
151
|
+
{
|
|
152
|
+
data: e,
|
|
153
|
+
node: C,
|
|
154
|
+
link: L,
|
|
155
|
+
nodePadding: g,
|
|
156
|
+
nodeWidth: l,
|
|
157
|
+
linkCurvature: m,
|
|
158
|
+
sort: d,
|
|
159
|
+
align: "left",
|
|
160
|
+
margin: { top: 8, right: 24, bottom: 8, left: 24 },
|
|
161
|
+
children: a && /* @__PURE__ */ o(B, { content: r ?? M })
|
|
162
|
+
}
|
|
163
|
+
) }),
|
|
164
|
+
c && /* @__PURE__ */ o("div", { className: "mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs", children: w.map(({ name: u, value: N, pct: k }) => {
|
|
165
|
+
var S;
|
|
166
|
+
return /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
|
|
167
|
+
/* @__PURE__ */ o(
|
|
168
|
+
"span",
|
|
169
|
+
{
|
|
170
|
+
className: "size-2.5 shrink-0 rounded-full",
|
|
171
|
+
style: { backgroundColor: `var(--color-${u})` }
|
|
172
|
+
}
|
|
173
|
+
),
|
|
174
|
+
/* @__PURE__ */ o("span", { className: "truncate text-muted-foreground", children: ((S = n[u]) == null ? void 0 : S.label) ?? u }),
|
|
175
|
+
/* @__PURE__ */ o("span", { className: "ms-auto font-semibold tabular-nums", children: N.toLocaleString() }),
|
|
176
|
+
/* @__PURE__ */ b("span", { className: "w-9 shrink-0 text-end tabular-nums text-muted-foreground", children: [
|
|
177
|
+
k,
|
|
178
|
+
"%"
|
|
179
|
+
] })
|
|
180
|
+
] }, u);
|
|
181
|
+
}) })
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
);
|
|
187
|
+
z.displayName = "SankeyChart";
|
|
188
|
+
export {
|
|
189
|
+
z as SankeyChart,
|
|
190
|
+
O as makeSankeyTooltip
|
|
191
|
+
};
|
|
192
|
+
//# sourceMappingURL=sankey-chart.js.map
|