@acronis-platform/ui-react 5.4.5 → 5.5.1
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 +114 -113
- package/dist/components/ui/area-chart/area-chart.js.map +1 -1
- package/dist/components/ui/bar-chart/bar-chart.js +53 -49
- package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
- package/dist/components/ui/chart/chart.js +52 -45
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/composed-chart/composed-chart.js +134 -130
- package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
- package/dist/components/ui/confidence-cone/confidence-cone.js +36 -35
- package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
- package/dist/components/ui/funnel-chart/funnel-chart.js +38 -37
- package/dist/components/ui/funnel-chart/funnel-chart.js.map +1 -1
- package/dist/components/ui/line-chart/line-chart.js +35 -34
- package/dist/components/ui/line-chart/line-chart.js.map +1 -1
- package/dist/components/ui/pie-chart/pie-chart.js +28 -27
- package/dist/components/ui/pie-chart/pie-chart.js.map +1 -1
- package/dist/components/ui/radar-chart/radar-chart.js +68 -65
- package/dist/components/ui/radar-chart/radar-chart.js.map +1 -1
- package/dist/components/ui/radial-bar-chart/radial-bar-chart.js +64 -63
- package/dist/components/ui/radial-bar-chart/radial-bar-chart.js.map +1 -1
- package/dist/components/ui/scatter-chart/scatter-chart.js +26 -26
- package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
- package/dist/components/ui/treemap/treemap.js +22 -22
- package/dist/components/ui/treemap/treemap.js.map +1 -1
- package/dist/llms/area-chart.md +1 -0
- package/dist/llms/bar-chart.md +1 -0
- package/dist/llms/chart.md +10 -0
- package/dist/llms/composed-chart.md +1 -0
- package/dist/llms/confidence-cone.md +1 -0
- package/dist/llms/funnel-chart.md +1 -0
- package/dist/llms/line-chart.md +1 -0
- package/dist/llms/pie-chart.md +1 -0
- package/dist/llms/radar-chart.md +1 -0
- package/dist/llms/radial-bar-chart.md +1 -0
- package/dist/llms/scatter-chart.md +1 -0
- package/dist/llms/treemap.md +1 -0
- package/dist/llms.txt +1 -1
- package/dist/src/components/ui/area-chart/area-chart.d.ts +6 -1
- package/dist/src/components/ui/bar-chart/bar-chart.d.ts +8 -2
- package/dist/src/components/ui/category-bar/category-bar.d.ts +1 -1
- package/dist/src/components/ui/chart/__stories__/palette-control.d.ts +16 -0
- package/dist/src/components/ui/chart/chart.d.ts +12 -1
- package/dist/src/components/ui/chart/index.d.ts +1 -1
- package/dist/src/components/ui/composed-chart/composed-chart.d.ts +6 -1
- package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts +6 -1
- package/dist/src/components/ui/funnel-chart/funnel-chart.d.ts +6 -1
- package/dist/src/components/ui/grid/grid.d.ts +1 -1
- package/dist/src/components/ui/line-chart/line-chart.d.ts +6 -1
- package/dist/src/components/ui/pie-chart/pie-chart.d.ts +6 -1
- package/dist/src/components/ui/progress-circle/progress-circle.d.ts +1 -1
- package/dist/src/components/ui/radar-chart/radar-chart.d.ts +9 -1
- package/dist/src/components/ui/radial-bar-chart/radial-bar-chart.d.ts +6 -1
- package/dist/src/components/ui/scatter-chart/scatter-chart.d.ts +6 -1
- package/dist/src/components/ui/spinner/spinner.d.ts +1 -1
- package/dist/src/components/ui/stack/stack.d.ts +1 -1
- package/dist/src/components/ui/treemap/treemap.d.ts +6 -1
- package/dist/ui-react.css +1 -1
- package/package.json +3 -3
|
@@ -3,12 +3,12 @@ import { cn as e } from "../../../lib/utils.js";
|
|
|
3
3
|
import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
|
|
4
4
|
import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o, toCssKey as s } from "../chart/chart.js";
|
|
5
5
|
import { CHART_LABEL_MARGIN as c, dropProjectionPayload as l, resolveAnimation as u, resolveAxisDomain as d, resolveBrushProps as f, resolveCartesianLabelPosition as p, resolveChartReferenceValue as m, resolveLabelFillClass as h, resolveReferenceLineProps as ee, resolveRotatedTickAnchor as te, resolveXAxisTickLabels as ne, resolveXAxisTitle as re, resolveYAxisTitle as ie, toLabelFormatter as ae, toReferenceLineList as oe } from "../chart/chart-format.js";
|
|
6
|
-
import { mergeXAxisLayoutMargin as se, useXAxisLayout as
|
|
7
|
-
import * as
|
|
8
|
-
import { Fragment as
|
|
9
|
-
import { Area as
|
|
6
|
+
import { mergeXAxisLayoutMargin as se, useXAxisLayout as ce } from "../chart/use-x-axis-layout.js";
|
|
7
|
+
import * as g from "react";
|
|
8
|
+
import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
|
|
9
|
+
import { Area as b, AreaChart as le, Brush as ue, CartesianGrid as de, LabelList as fe, ReferenceLine as pe, Text as me, XAxis as he, YAxis as ge, usePlotArea as x, useXAxisScale as S } from "recharts";
|
|
10
10
|
//#region src/components/ui/area-chart/area-chart.tsx
|
|
11
|
-
var
|
|
11
|
+
var C = t("", {
|
|
12
12
|
variants: {
|
|
13
13
|
layout: {
|
|
14
14
|
single: "",
|
|
@@ -24,38 +24,38 @@ var w = t("", {
|
|
|
24
24
|
fill: "solid"
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
|
-
function
|
|
27
|
+
function _e(e) {
|
|
28
28
|
return function(t) {
|
|
29
29
|
let n = {
|
|
30
30
|
...t,
|
|
31
31
|
payload: l(t.payload)
|
|
32
32
|
};
|
|
33
|
-
return typeof e == "function" ? /* @__PURE__ */
|
|
33
|
+
return typeof e == "function" ? /* @__PURE__ */ v(e, { ...n }) : g.cloneElement(e, n);
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
-
function
|
|
37
|
-
let r =
|
|
36
|
+
function ve({ projectionStart: e, prevTick: t, clipId: n }) {
|
|
37
|
+
let r = S(), i = x();
|
|
38
38
|
if (!r || !i) return null;
|
|
39
39
|
let a = r(t), o = r(e);
|
|
40
40
|
if (a == null || o == null) return null;
|
|
41
41
|
let s = (a + o) / 2, { x: c, y: l, width: u, height: d } = i;
|
|
42
|
-
return /* @__PURE__ */
|
|
42
|
+
return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y("defs", { children: [/* @__PURE__ */ v("clipPath", {
|
|
43
43
|
id: `${n}-actual`,
|
|
44
|
-
children: /* @__PURE__ */
|
|
44
|
+
children: /* @__PURE__ */ v("rect", {
|
|
45
45
|
x: c,
|
|
46
46
|
y: l,
|
|
47
47
|
width: s - c,
|
|
48
48
|
height: d
|
|
49
49
|
})
|
|
50
|
-
}), /* @__PURE__ */
|
|
50
|
+
}), /* @__PURE__ */ v("clipPath", {
|
|
51
51
|
id: `${n}-projection`,
|
|
52
|
-
children: /* @__PURE__ */
|
|
52
|
+
children: /* @__PURE__ */ v("rect", {
|
|
53
53
|
x: s,
|
|
54
54
|
y: l,
|
|
55
55
|
width: c + u - s,
|
|
56
56
|
height: d
|
|
57
57
|
})
|
|
58
|
-
})] }), /* @__PURE__ */
|
|
58
|
+
})] }), /* @__PURE__ */ v("line", {
|
|
59
59
|
x1: s,
|
|
60
60
|
y1: l,
|
|
61
61
|
x2: s,
|
|
@@ -64,172 +64,173 @@ function _e({ projectionStart: e, prevTick: t, clipId: n }) {
|
|
|
64
64
|
strokeDasharray: "4 4"
|
|
65
65
|
})] });
|
|
66
66
|
}
|
|
67
|
-
function
|
|
68
|
-
return /* @__PURE__ */
|
|
67
|
+
function ye({ dataKeys: e, gradientId: t, colorFor: n }) {
|
|
68
|
+
return /* @__PURE__ */ v("defs", { children: e.map((e) => /* @__PURE__ */ y("linearGradient", {
|
|
69
69
|
id: `${t}-${s(e)}`,
|
|
70
70
|
x1: "0",
|
|
71
71
|
y1: "0",
|
|
72
72
|
x2: "0",
|
|
73
73
|
y2: "1",
|
|
74
|
-
children: [/* @__PURE__ */
|
|
74
|
+
children: [/* @__PURE__ */ v("stop", {
|
|
75
75
|
offset: "5%",
|
|
76
76
|
stopColor: n(e),
|
|
77
77
|
stopOpacity: .8
|
|
78
|
-
}), /* @__PURE__ */
|
|
78
|
+
}), /* @__PURE__ */ v("stop", {
|
|
79
79
|
offset: "95%",
|
|
80
80
|
stopColor: n(e),
|
|
81
81
|
stopOpacity: .1
|
|
82
82
|
})]
|
|
83
83
|
}, e)) });
|
|
84
84
|
}
|
|
85
|
-
var
|
|
85
|
+
var w = g.forwardRef(({ className: t, config: _, palette: x, data: S, dataKeys: w, xKey: T, xAxisLabel: E, yAxisLabel: D, yUnit: be, layout: O = "single", fill: k = "solid", curve: A = "monotone", strokeWidth: j = 2, fillOpacity: M = .4, showDots: N = !1, dotSize: xe = 3, showActiveDot: Se, connectNulls: Ce = !1, areaSettings: P, referenceLine: we, projectionStart: F, showGrid: Te = !0, showTooltip: Ee = !0, showLegend: De = !0, legendFontSize: I, showXAxis: Oe = !0, showYAxis: ke = !0, xTickFormatter: L, yTickFormatter: Ae, xAxisAngle: R, xAxisInterval: je, yAxisTickCount: Me, yAxisDomain: Ne, gridDashed: Pe, gridHorizontal: Fe, gridVertical: Ie, tooltipContent: z, animate: Le, animationDuration: Re, animationBegin: ze, animationEasing: Be, showLabels: B = !1, labelPosition: Ve, labelFormatter: He, showBrush: Ue = !1, brushHeight: We, brushAriaLabel: Ge, ...Ke }, qe) => {
|
|
86
86
|
let V = u({
|
|
87
|
-
animate:
|
|
88
|
-
animationDuration:
|
|
89
|
-
animationBegin:
|
|
90
|
-
animationEasing:
|
|
91
|
-
}), H =
|
|
92
|
-
labelPosition:
|
|
87
|
+
animate: Le,
|
|
88
|
+
animationDuration: Re,
|
|
89
|
+
animationBegin: ze,
|
|
90
|
+
animationEasing: Be
|
|
91
|
+
}), H = O === "stacked", Je = p({
|
|
92
|
+
labelPosition: Ve,
|
|
93
93
|
isStacked: H
|
|
94
|
-
}), U =
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
]),
|
|
99
|
-
if (!
|
|
100
|
-
let e = new Set(
|
|
101
|
-
return ({ payload: t, index: n, ...r }) => /* @__PURE__ */
|
|
94
|
+
}), U = k === "gradient", Ye = oe(we), W = (e) => P?.[e]?.color ?? `var(--color-${s(e)})`, Xe = B || Object.values(P ?? {}).some((e) => e.showLabel), Ze = re(E), Qe = ie(D), $e = d(Ne), et = ne(S.map((e) => e[T]), L), G = g.useRef(null), K = ce(G, R, E, et.join("\0")), q = se(Xe ? c : void 0, K.margin), J = g.useMemo(() => F === void 0 ? -1 : S.findIndex((e) => e[T] === F), [
|
|
95
|
+
F,
|
|
96
|
+
S,
|
|
97
|
+
T
|
|
98
|
+
]), Y = J > 0, X = g.useMemo(() => {
|
|
99
|
+
if (!Y) return;
|
|
100
|
+
let e = new Set(S.slice(J).map((e) => e[T]));
|
|
101
|
+
return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ v(me, {
|
|
102
102
|
...r,
|
|
103
103
|
fontSize: 12,
|
|
104
104
|
className: e.has(t.value) ? "fill-[var(--ui-text-on-surface-disabled)]" : "fill-muted-foreground",
|
|
105
105
|
children: L ? L(t.value, n) : t.value
|
|
106
106
|
});
|
|
107
107
|
}, [
|
|
108
|
+
Y,
|
|
108
109
|
J,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
E,
|
|
110
|
+
S,
|
|
111
|
+
T,
|
|
112
112
|
L
|
|
113
|
-
]),
|
|
113
|
+
]), tt = g.useMemo(() => Y ? S.map((e) => ({
|
|
114
114
|
...e,
|
|
115
|
-
...Object.fromEntries(
|
|
116
|
-
})) :
|
|
115
|
+
...Object.fromEntries(w.map((t) => [`_proj_${t}`, e[t]]))
|
|
116
|
+
})) : S, [
|
|
117
|
+
Y,
|
|
118
|
+
S,
|
|
119
|
+
w
|
|
120
|
+
]), Z = g.useMemo(() => {
|
|
121
|
+
if (!(J <= 0)) return S[J - 1]?.[T];
|
|
122
|
+
}, [
|
|
117
123
|
J,
|
|
118
|
-
|
|
124
|
+
S,
|
|
119
125
|
T
|
|
120
|
-
]),
|
|
121
|
-
if (!(q <= 0)) return C[q - 1]?.[E];
|
|
122
|
-
}, [
|
|
123
|
-
q,
|
|
124
|
-
C,
|
|
125
|
-
E
|
|
126
|
-
]), tt = _.useMemo(() => J && z ? ge(z) : void 0, [J, z]), nt = J ? tt ?? ((e) => /* @__PURE__ */ y(o, {
|
|
126
|
+
]), nt = g.useMemo(() => Y && z ? _e(z) : void 0, [Y, z]), rt = Y ? nt ?? ((e) => /* @__PURE__ */ v(o, {
|
|
127
127
|
active: e.active,
|
|
128
128
|
label: e.label,
|
|
129
129
|
payload: l(e.payload)
|
|
130
|
-
})) : z ?? /* @__PURE__ */
|
|
130
|
+
})) : z ?? /* @__PURE__ */ v(o, {}), it = Y ? (e) => /* @__PURE__ */ v(i, {
|
|
131
131
|
verticalAlign: e.verticalAlign,
|
|
132
|
+
fontSize: I,
|
|
132
133
|
payload: l(e.payload)
|
|
133
|
-
}) : /* @__PURE__ */
|
|
134
|
-
return /* @__PURE__ */
|
|
135
|
-
ref:
|
|
136
|
-
"data-layout":
|
|
137
|
-
"data-fill":
|
|
138
|
-
className: e(
|
|
139
|
-
layout:
|
|
140
|
-
fill:
|
|
134
|
+
}) : /* @__PURE__ */ v(i, { fontSize: I }), Q = `area-gradient-${g.useId().replace(/:/g, "")}`, $ = `area-proj-${g.useId().replace(/:/g, "")}`;
|
|
135
|
+
return /* @__PURE__ */ v("div", {
|
|
136
|
+
ref: qe,
|
|
137
|
+
"data-layout": O,
|
|
138
|
+
"data-fill": k,
|
|
139
|
+
className: e(C({
|
|
140
|
+
layout: O,
|
|
141
|
+
fill: k
|
|
141
142
|
}), t),
|
|
142
|
-
...
|
|
143
|
-
children: /* @__PURE__ */
|
|
143
|
+
...Ke,
|
|
144
|
+
children: /* @__PURE__ */ v(n, {
|
|
144
145
|
ref: G,
|
|
145
|
-
config:
|
|
146
|
-
palette:
|
|
146
|
+
config: _,
|
|
147
|
+
palette: x,
|
|
147
148
|
className: "size-full [&_.recharts-label]:fill-foreground",
|
|
148
|
-
children: /* @__PURE__ */
|
|
149
|
-
data:
|
|
150
|
-
margin:
|
|
149
|
+
children: /* @__PURE__ */ y(le, {
|
|
150
|
+
data: tt,
|
|
151
|
+
margin: q,
|
|
151
152
|
children: [
|
|
152
|
-
U && /* @__PURE__ */
|
|
153
|
-
dataKeys:
|
|
153
|
+
U && /* @__PURE__ */ v(ye, {
|
|
154
|
+
dataKeys: w,
|
|
154
155
|
gradientId: Q,
|
|
155
156
|
colorFor: W
|
|
156
157
|
}),
|
|
157
|
-
|
|
158
|
-
horizontal:
|
|
159
|
-
vertical:
|
|
160
|
-
strokeDasharray:
|
|
158
|
+
Te && /* @__PURE__ */ v(de, {
|
|
159
|
+
horizontal: Fe ?? !0,
|
|
160
|
+
vertical: Ie ?? !1,
|
|
161
|
+
strokeDasharray: Pe ? "3 3" : void 0
|
|
161
162
|
}),
|
|
162
|
-
/* @__PURE__ */
|
|
163
|
-
dataKey:
|
|
163
|
+
/* @__PURE__ */ v(he, {
|
|
164
|
+
dataKey: T,
|
|
164
165
|
type: "category",
|
|
165
|
-
hide: !
|
|
166
|
+
hide: !Oe,
|
|
166
167
|
tickLine: !1,
|
|
167
168
|
axisLine: !1,
|
|
168
169
|
tickMargin: 8,
|
|
169
|
-
tickFormatter:
|
|
170
|
-
tick:
|
|
170
|
+
tickFormatter: X ? void 0 : L,
|
|
171
|
+
tick: X,
|
|
171
172
|
angle: R,
|
|
172
|
-
interval:
|
|
173
|
+
interval: je,
|
|
173
174
|
textAnchor: te(R),
|
|
174
175
|
height: K.height,
|
|
175
|
-
label:
|
|
176
|
+
label: Ze
|
|
176
177
|
}),
|
|
177
|
-
/* @__PURE__ */
|
|
178
|
+
/* @__PURE__ */ v(ge, {
|
|
178
179
|
type: "number",
|
|
179
|
-
hide: !
|
|
180
|
+
hide: !ke,
|
|
180
181
|
tickLine: !1,
|
|
181
182
|
axisLine: !1,
|
|
182
|
-
unit:
|
|
183
|
-
tickFormatter:
|
|
184
|
-
tickCount:
|
|
185
|
-
domain:
|
|
186
|
-
width:
|
|
187
|
-
label:
|
|
183
|
+
unit: be,
|
|
184
|
+
tickFormatter: Ae,
|
|
185
|
+
tickCount: Me,
|
|
186
|
+
domain: $e,
|
|
187
|
+
width: D ? 72 : void 0,
|
|
188
|
+
label: Qe
|
|
188
189
|
}),
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
projectionStart:
|
|
190
|
+
Ee && /* @__PURE__ */ v(a, { content: rt }),
|
|
191
|
+
De && /* @__PURE__ */ v(r, { content: it }),
|
|
192
|
+
Y && Z != null && /* @__PURE__ */ v(ve, {
|
|
193
|
+
projectionStart: F,
|
|
193
194
|
prevTick: Z,
|
|
194
195
|
clipId: $
|
|
195
196
|
}),
|
|
196
|
-
|
|
197
|
-
let t =
|
|
198
|
-
return /* @__PURE__ */
|
|
199
|
-
type: t?.curveType ??
|
|
197
|
+
w.map((e) => {
|
|
198
|
+
let t = P?.[e], n = t?.showDots ?? N, r = t?.dotSize ?? xe, i = Se ?? n, a = t?.showLabel ?? B, o = t?.labelPosition ?? Je;
|
|
199
|
+
return /* @__PURE__ */ v(b, {
|
|
200
|
+
type: t?.curveType ?? A ?? "monotone",
|
|
200
201
|
dataKey: e,
|
|
201
202
|
stackId: H ? "a" : void 0,
|
|
202
203
|
stroke: W(e),
|
|
203
|
-
strokeWidth: t?.strokeWidth ??
|
|
204
|
+
strokeWidth: t?.strokeWidth ?? j,
|
|
204
205
|
strokeDasharray: t?.dashed ? "5 5" : void 0,
|
|
205
206
|
fill: U ? `url(#${Q}-${s(e)})` : W(e),
|
|
206
|
-
fillOpacity: t?.fillOpacity ?? (U ? 1 :
|
|
207
|
+
fillOpacity: t?.fillOpacity ?? (U ? 1 : M),
|
|
207
208
|
dot: n ? { r } : !1,
|
|
208
209
|
activeDot: i ? { r: r + 2 } : !1,
|
|
209
|
-
connectNulls:
|
|
210
|
-
clipPath:
|
|
210
|
+
connectNulls: Ce,
|
|
211
|
+
clipPath: Y ? `url(#${$}-actual)` : void 0,
|
|
211
212
|
...V,
|
|
212
|
-
children: a && /* @__PURE__ */
|
|
213
|
+
children: a && /* @__PURE__ */ v(fe, {
|
|
213
214
|
dataKey: e,
|
|
214
215
|
position: o,
|
|
215
|
-
formatter: ae(
|
|
216
|
+
formatter: ae(He),
|
|
216
217
|
className: h(o, { translucentSeries: !0 }),
|
|
217
218
|
fontSize: 12
|
|
218
219
|
})
|
|
219
220
|
}, e);
|
|
220
221
|
}),
|
|
221
|
-
|
|
222
|
-
let t =
|
|
223
|
-
return /* @__PURE__ */
|
|
224
|
-
type: t?.curveType ??
|
|
222
|
+
Y && w.map((e) => {
|
|
223
|
+
let t = P?.[e];
|
|
224
|
+
return /* @__PURE__ */ v(b, {
|
|
225
|
+
type: t?.curveType ?? A ?? "monotone",
|
|
225
226
|
dataKey: `_proj_${e}`,
|
|
226
227
|
name: e,
|
|
227
228
|
stackId: H ? "proj" : void 0,
|
|
228
229
|
stroke: W(e),
|
|
229
|
-
strokeWidth: t?.strokeWidth ??
|
|
230
|
+
strokeWidth: t?.strokeWidth ?? j,
|
|
230
231
|
strokeDasharray: "5 5",
|
|
231
232
|
fill: U ? `url(#${Q}-${s(e)})` : W(e),
|
|
232
|
-
fillOpacity: t?.fillOpacity ?? (U ? 1 :
|
|
233
|
+
fillOpacity: t?.fillOpacity ?? (U ? 1 : M),
|
|
233
234
|
dot: !1,
|
|
234
235
|
activeDot: !1,
|
|
235
236
|
clipPath: `url(#${$}-projection)`,
|
|
@@ -238,19 +239,19 @@ var T = _.forwardRef(({ className: t, config: v, palette: S, data: C, dataKeys:
|
|
|
238
239
|
...V
|
|
239
240
|
}, `_proj_${e}`);
|
|
240
241
|
}),
|
|
241
|
-
|
|
242
|
-
let n = m(e,
|
|
243
|
-
return n === void 0 ? null : /* @__PURE__ */
|
|
242
|
+
Ye.map((e, t) => {
|
|
243
|
+
let n = m(e, S, w);
|
|
244
|
+
return n === void 0 ? null : /* @__PURE__ */ v(pe, {
|
|
244
245
|
y: n,
|
|
245
246
|
...ee(e.label, e.labelPosition)
|
|
246
247
|
}, `${e.label ?? "ref"}-${t}`);
|
|
247
248
|
}),
|
|
248
|
-
|
|
249
|
-
dataKey:
|
|
249
|
+
Ue && /* @__PURE__ */ v(ue, {
|
|
250
|
+
dataKey: T,
|
|
250
251
|
tickFormatter: L,
|
|
251
252
|
...f({
|
|
252
|
-
brushHeight:
|
|
253
|
-
brushAriaLabel:
|
|
253
|
+
brushHeight: We,
|
|
254
|
+
brushAriaLabel: Ge
|
|
254
255
|
})
|
|
255
256
|
})
|
|
256
257
|
]
|
|
@@ -258,8 +259,8 @@ var T = _.forwardRef(({ className: t, config: v, palette: S, data: C, dataKeys:
|
|
|
258
259
|
})
|
|
259
260
|
});
|
|
260
261
|
});
|
|
261
|
-
|
|
262
|
+
w.displayName = "AreaChart";
|
|
262
263
|
//#endregion
|
|
263
|
-
export {
|
|
264
|
+
export { w as AreaChart, C as areaChartVariants };
|
|
264
265
|
|
|
265
266
|
//# sourceMappingURL=area-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"area-chart.js","names":[],"sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Area,\n AreaChart as RechartsAreaChart,\n Brush,\n CartesianGrid,\n LabelList,\n ReferenceLine,\n Text,\n XAxis,\n YAxis,\n useXAxisScale,\n usePlotArea,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n CHART_LABEL_FONT_SIZE,\n CHART_LABEL_MARGIN,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n resolveAxisDomain,\n resolveBrushProps,\n resolveCartesianLabelPosition,\n dropProjectionPayload,\n resolveChartReferenceValue,\n resolveLabelFillClass,\n resolveReferenceLineProps,\n resolveRotatedTickAnchor,\n resolveXAxisTitle,\n resolveYAxisTitle,\n toLabelFormatter,\n toReferenceLineList,\n type ChartConfig,\n type ChartPalette,\n type ChartLegendContentProps,\n type ChartTooltipContentProps,\n type CartesianChartProps,\n type ChartAnimationProps,\n type ChartBrushProps,\n type ChartCurveType,\n type ChartDataLabelProps,\n type ChartReferenceLine,\n toCssKey,\n type CartesianLabelPosition,\n} from '../chart';\nimport {\n mergeXAxisLayoutMargin,\n useXAxisLayout,\n} from '../chart/use-x-axis-layout';\nimport { resolveXAxisTickLabels } from '../chart/chart-format';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n variants: {\n layout: {\n single: '',\n stacked: '',\n },\n fill: {\n solid: '',\n gradient: '',\n },\n },\n defaultVariants: {\n layout: 'single',\n fill: 'solid',\n },\n});\n\n/**\n * Style override for one series, keyed by its `dataKeys` entry. Anything left\n * unset falls back to the chart-wide prop, so an entry only states what differs\n * — e.g. a projection band that reads fainter than the actuals beside it.\n */\nexport interface AreaChartAreaSettings {\n /** Stroke and fill color. Defaults to the series' `config` color. */\n color?: string;\n /** Width of this series' top border. Defaults to the chart's `strokeWidth`. */\n strokeWidth?: number;\n /** Dash this series' top border. */\n dashed?: boolean;\n /** Interpolation for this series only. Defaults to the chart's `curve`. */\n curveType?: ChartCurveType;\n /**\n * Fill opacity for this series. Under `fill=\"gradient\"` it scales the\n * gradient's own alpha rather than replacing it.\n */\n fillOpacity?: number;\n /** Render this series' per-point dots. Defaults to the chart's `showDots`. */\n showDots?: boolean;\n /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */\n dotSize?: number;\n /** Show/hide this series' value labels, overriding the chart's `showLabels`. */\n showLabel?: boolean;\n /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */\n labelPosition?: CartesianLabelPosition;\n}\n\nexport interface AreaChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n VariantProps<typeof areaChartVariants>,\n CartesianChartProps,\n ChartAnimationProps,\n ChartBrushProps,\n ChartDataLabelProps {\n /**\n * The dataviz palette this chart's series are painted from. Series that\n * state no `color` of their own take a stop of it. See `ChartPalette`.\n */\n palette?: ChartPalette;\n /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n data: ReadonlyArray<Record<string, string | number | null>>;\n /**\n * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n * primitives). Series take their colour from the container's `palette`; each\n * entry maps a key to a `label` and an optional `tone`.\n */\n config: ChartConfig;\n /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n dataKeys: string[];\n /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n xKey: string;\n /** Interpolation between points. */\n curve?: ChartCurveType;\n /** Stroke width of each area's top border. */\n strokeWidth?: number;\n /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n fillOpacity?: number;\n /** Render a dot at each data point. */\n showDots?: boolean;\n /** Radius of each point's dot, in px. Its hover dot is 2px larger. */\n dotSize?: number;\n /**\n * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass\n * it explicitly to get hover dots on a dot-less area (`showDots={false}` with\n * `showActiveDot`) or a static-only area (dots without the hover one).\n */\n showActiveDot?: boolean;\n /** Bridge `null` gaps in the data instead of breaking the area. */\n connectNulls?: boolean;\n /**\n * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry\n * render from the chart-wide props.\n */\n areaSettings?: Record<string, AreaChartAreaSettings>;\n /**\n * One or more dashed reference/average lines on the value axis — a target, a\n * threshold, or a series mean. Pass a single object or an array to draw\n * several at once. On a stacked chart the value is read against the stack's\n * axis, not one series.\n */\n referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n /**\n * The category value (matching an `xKey` entry) at which the projection\n * zone starts. Ticks from this point onward render in the disabled text\n * color (`--ui-text-on-surface-disabled`). The chart data and series\n * themselves are not affected — only the X-axis tick appearance changes.\n *\n * Use this when displaying a forecast/projection range where future\n * data points should be visually de-emphasized on the axis.\n */\n projectionStart?: string | number;\n showLegend?: boolean;\n /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n labelPosition?: CartesianLabelPosition;\n}\n\ntype TooltipContentType = NonNullable<React.ComponentProps<typeof ChartTooltip>['content']>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\ntype LegendContentFn = Extract<\n React.ComponentProps<typeof ChartLegend>['content'],\n (...args: never[]) => unknown\n>;\ntype LegendContentProps = Parameters<LegendContentFn>[0];\n\nfunction createProjectionTooltip(tooltipContent: TooltipContentType) {\n return function ProjectionTooltip(props: TooltipRenderProps) {\n const merged = {\n ...props,\n payload: dropProjectionPayload(props.payload),\n } as TooltipRenderProps;\n if (typeof tooltipContent === 'function') {\n const Comp = tooltipContent as React.FunctionComponent<TooltipRenderProps>;\n return <Comp {...merged} />;\n }\n // Element-form tooltip: cloneElement is the React-idiomatic way to\n // re-render an existing element with new props (preserves refs & keys).\n return React.cloneElement(tooltipContent, merged);\n };\n}\n\n// Renders two <clipPath> defs (actual / projection) and a dashed separator\n// line at the visual midpoint between the last actual tick and the first\n// projection tick. Both the actual and projection <Area> series reference\n// these clip regions, so the exact same curve renders on each side — no kink.\nfunction ProjectionClip({\n projectionStart,\n prevTick,\n clipId,\n}: {\n projectionStart: string | number;\n prevTick: string | number;\n clipId: string;\n}) {\n const xScale = useXAxisScale();\n const plotArea = usePlotArea();\n if (!xScale || !plotArea) return null;\n const prevX = xScale(prevTick as string);\n const currX = xScale(projectionStart as string);\n if (prevX == null || currX == null) return null;\n const midX = (prevX + currX) / 2;\n const { x, y, width, height } = plotArea;\n return (\n <>\n <defs>\n <clipPath id={`${clipId}-actual`}>\n <rect x={x} y={y} width={midX - x} height={height} />\n </clipPath>\n <clipPath id={`${clipId}-projection`}>\n <rect x={midX} y={y} width={x + width - midX} height={height} />\n </clipPath>\n </defs>\n <line\n x1={midX}\n y1={y}\n x2={midX}\n y2={y + height}\n stroke=\"var(--ui-border-on-surface-border)\"\n strokeDasharray=\"4 4\"\n />\n </>\n );\n}\n\n/**\n * One top-to-bottom fade per series, referenced by each `<Area>`'s `fill`.\n *\n * The ids are scoped by `gradientId` because SVG `<defs>` ids are\n * document-global: two AreaCharts on the same page would otherwise share (and\n * silently overwrite) each other's stops.\n */\nfunction AreaFillGradients({\n dataKeys,\n gradientId,\n colorFor,\n}: {\n dataKeys: string[];\n gradientId: string;\n colorFor: (key: string) => string;\n}) {\n return (\n <defs>\n {dataKeys.map((key) => (\n <linearGradient\n key={key}\n id={`${gradientId}-${toCssKey(key)}`}\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <stop offset=\"5%\" stopColor={colorFor(key)} stopOpacity={0.8} />\n <stop offset=\"95%\" stopColor={colorFor(key)} stopOpacity={0.1} />\n </linearGradient>\n ))}\n </defs>\n );\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n (\n {\n className,\n config,\n palette,\n data,\n dataKeys,\n xKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n layout = 'single',\n fill = 'solid',\n curve = 'monotone',\n strokeWidth = 2,\n fillOpacity = 0.4,\n showDots = false,\n dotSize = 3,\n showActiveDot,\n connectNulls = false,\n areaSettings,\n referenceLine,\n projectionStart,\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 animate,\n animationDuration,\n animationBegin,\n animationEasing,\n showLabels = false,\n labelPosition,\n labelFormatter,\n showBrush = false,\n brushHeight,\n brushAriaLabel,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n const isStacked = layout === 'stacked';\n const areaLabelPosition = resolveCartesianLabelPosition({\n labelPosition,\n isStacked,\n });\n const isGradient = fill === 'gradient';\n const referenceLines = toReferenceLineList(referenceLine);\n\n // A series' `color` override has to reach its gradient stops too, or a\n // gradient-filled chart would keep painting the `config` color.\n const colorFor = (key: string) =>\n areaSettings?.[key]?.color ?? `var(--color-${toCssKey(key)})`;\n\n // The plot inset is needed as soon as *any* series carries outside labels —\n // a per-series `showLabel` counts, not only the chart-wide `showLabels`.\n const hasLabels =\n showLabels ||\n Object.values(areaSettings ?? {}).some((settings) => settings.showLabel);\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 = resolveXAxisTitle(xAxisLabel);\n const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n const xAxisTickLabels = resolveXAxisTickLabels(\n data.map((row) => row[xKey]),\n xTickFormatter\n );\n const chartContainerRef = React.useRef<HTMLDivElement>(null);\n const xAxisLayout = useXAxisLayout(\n chartContainerRef,\n xAxisAngle,\n xAxisLabel,\n xAxisTickLabels.join('\\u0000')\n );\n const chartMargin = mergeXAxisLayoutMargin(\n hasLabels ? CHART_LABEL_MARGIN : undefined,\n xAxisLayout.margin\n );\n\n const projStartIndex = React.useMemo(() => {\n if (projectionStart === undefined) return -1;\n return data.findIndex((row) => row[xKey] === projectionStart);\n }, [projectionStart, data, xKey]);\n // projStartIndex === 0 (boundary at the first tick) is excluded: there is no\n // \"previous tick\" to define the clip midpoint, so clipPath defs can't be\n // emitted, which would make all series invisible. Treat it as no-projection.\n const hasProjection = projStartIndex > 0;\n\n // Build the projection tick renderer when projectionStart is set. Each tick\n // past (and including) the start value renders in the disabled text color;\n // ticks before it stay in the muted-foreground color. Returns undefined when\n // projectionStart is absent or not found so recharts uses its own renderer.\n const projectionTick = React.useMemo(() => {\n if (!hasProjection) return undefined;\n const projectedValues = new Set(\n data.slice(projStartIndex).map((row) => row[xKey])\n );\n const ProjectionTick = ({\n payload,\n index,\n ...tickProps\n }: {\n payload: { value: string | number };\n index?: number;\n [key: string]: unknown;\n }) => (\n <Text\n {...(tickProps as React.ComponentProps<typeof Text>)}\n fontSize={12}\n className={\n projectedValues.has(payload.value)\n ? 'fill-[var(--ui-text-on-surface-disabled)]'\n : 'fill-muted-foreground'\n }\n >\n {xTickFormatter\n ? xTickFormatter(payload.value as never, index)\n : payload.value}\n </Text>\n );\n return ProjectionTick;\n }, [hasProjection, projStartIndex, data, xKey, xTickFormatter]);\n\n // When projection is active, copy each series value to `_proj_${key}` — same\n // data, no nulls. Both the actual and projection <Area> see the identical curve;\n // the clipPath (computed in ProjectionClip) restricts which half each paints.\n const chartData = React.useMemo(() => {\n if (!hasProjection) return data;\n return data.map((row) => ({\n ...row,\n ...Object.fromEntries(\n dataKeys.map((k) => [`_proj_${k}`, row[k]])\n ),\n }));\n }, [hasProjection, data, dataKeys]);\n\n // The tick immediately before the projection boundary — needed to compute the\n // visual midpoint where the clip edge and separator line are placed.\n const prevTickValue = React.useMemo(() => {\n if (projStartIndex <= 0) return undefined;\n return data[projStartIndex - 1]?.[xKey];\n }, [projStartIndex, data, xKey]);\n\n const projectionTooltip = React.useMemo(\n () =>\n hasProjection && tooltipContent\n ? createProjectionTooltip(tooltipContent)\n : undefined,\n [hasProjection, tooltipContent]\n );\n\n const tooltipNode = hasProjection\n ? (projectionTooltip ??\n ((tp: TooltipRenderProps) => (\n <ChartTooltipContent\n active={tp.active}\n label={tp.label}\n payload={\n dropProjectionPayload(\n tp.payload\n ) as ChartTooltipContentProps['payload']\n }\n />\n )))\n : (tooltipContent ?? <ChartTooltipContent />);\n\n const legendNode = hasProjection\n ? (lp: LegendContentProps) => (\n <ChartLegendContent\n verticalAlign={lp.verticalAlign}\n payload={\n dropProjectionPayload(\n lp.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )\n : <ChartLegendContent />;\n\n // recharts renders SVG <defs> once per chart; the gradient/clip ids must be\n // unique across chart instances on the page. useId gives a stable per-instance\n // id; strip the colons React emits (invalid in a url(#…) reference).\n const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n const clipId = `area-proj-${React.useId().replace(/:/g, '')}`;\n\n return (\n <div\n ref={ref}\n data-layout={layout}\n data-fill={fill}\n className={cn(areaChartVariants({ layout, fill }), className)}\n {...props}\n >\n <ChartContainer\n ref={chartContainerRef}\n config={config}\n palette={palette}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsAreaChart\n data={chartData as readonly unknown[]}\n margin={chartMargin}\n >\n {isGradient && (\n <AreaFillGradients\n dataKeys={dataKeys}\n gradientId={gradientId}\n colorFor={colorFor}\n />\n )}\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={projectionTick ? undefined : xTickFormatter}\n tick={projectionTick}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n height={xAxisLayout.height}\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 && <ChartTooltip content={tooltipNode} />}\n {showLegend && <ChartLegend content={legendNode} />}\n {hasProjection && prevTickValue != null && (\n <ProjectionClip\n projectionStart={projectionStart!}\n prevTick={prevTickValue}\n clipId={clipId}\n />\n )}\n {dataKeys.map((key) => {\n const settings = areaSettings?.[key];\n const seriesDots = settings?.showDots ?? showDots;\n const dotRadius = settings?.dotSize ?? dotSize;\n // The hover dot follows the static dots unless asked otherwise, so\n // a chart that sets neither renders exactly as before.\n const activeDot = showActiveDot ?? seriesDots;\n const seriesLabel = settings?.showLabel ?? showLabels;\n const seriesLabelPosition =\n settings?.labelPosition ?? areaLabelPosition;\n return (\n <Area\n key={key}\n type={settings?.curveType ?? curve ?? 'monotone'}\n dataKey={key}\n stackId={isStacked ? 'a' : undefined}\n stroke={colorFor(key)}\n strokeWidth={settings?.strokeWidth ?? strokeWidth}\n strokeDasharray={settings?.dashed ? '5 5' : undefined}\n fill={\n isGradient ? `url(#${gradientId}-${toCssKey(key)})` : colorFor(key)\n }\n fillOpacity={\n settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n }\n dot={seriesDots ? { r: dotRadius } : false}\n activeDot={activeDot ? { r: dotRadius + 2 } : false}\n connectNulls={connectNulls}\n clipPath={hasProjection ? `url(#${clipId}-actual)` : undefined}\n {...animation}\n >\n {seriesLabel && (\n <LabelList\n dataKey={key}\n position={seriesLabelPosition}\n formatter={toLabelFormatter(labelFormatter)}\n className={resolveLabelFillClass(seriesLabelPosition, {\n translucentSeries: true,\n })}\n fontSize={CHART_LABEL_FONT_SIZE}\n />\n )}\n </Area>\n );\n })}\n {hasProjection &&\n dataKeys.map((key) => {\n const settings = areaSettings?.[key];\n return (\n <Area\n key={`_proj_${key}`}\n type={settings?.curveType ?? curve ?? 'monotone'}\n dataKey={`_proj_${key}`}\n name={key}\n stackId={isStacked ? 'proj' : undefined}\n stroke={colorFor(key)}\n strokeWidth={settings?.strokeWidth ?? strokeWidth}\n strokeDasharray=\"5 5\"\n fill={\n isGradient ? `url(#${gradientId}-${toCssKey(key)})` : colorFor(key)\n }\n fillOpacity={\n settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n }\n dot={false}\n activeDot={false}\n clipPath={`url(#${clipId}-projection)`}\n legendType=\"none\"\n tooltipType=\"none\"\n {...animation}\n />\n );\n })}\n {/* Annotations draw over the series they describe. */}\n {referenceLines.map((ref, index) => {\n const value = resolveChartReferenceValue(ref, data, dataKeys);\n if (value === undefined) return null;\n return (\n <ReferenceLine\n key={`${ref.label ?? 'ref'}-${index}`}\n y={value}\n {...resolveReferenceLineProps(ref.label, ref.labelPosition)}\n />\n );\n })}\n {showBrush && (\n <Brush\n dataKey={xKey}\n tickFormatter={xTickFormatter}\n {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n />\n )}\n </RechartsAreaChart>\n </ChartContainer>\n </div>\n );\n }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"area-chart.js","names":[],"sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Area,\n AreaChart as RechartsAreaChart,\n Brush,\n CartesianGrid,\n LabelList,\n ReferenceLine,\n Text,\n XAxis,\n YAxis,\n useXAxisScale,\n usePlotArea,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n CHART_LABEL_FONT_SIZE,\n CHART_LABEL_MARGIN,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n resolveAxisDomain,\n resolveBrushProps,\n resolveCartesianLabelPosition,\n dropProjectionPayload,\n resolveChartReferenceValue,\n resolveLabelFillClass,\n resolveReferenceLineProps,\n resolveRotatedTickAnchor,\n resolveXAxisTitle,\n resolveYAxisTitle,\n toLabelFormatter,\n toReferenceLineList,\n type ChartConfig,\n type ChartLegendFontSize,\n type ChartPalette,\n type ChartLegendContentProps,\n type ChartTooltipContentProps,\n type CartesianChartProps,\n type ChartAnimationProps,\n type ChartBrushProps,\n type ChartCurveType,\n type ChartDataLabelProps,\n type ChartReferenceLine,\n toCssKey,\n type CartesianLabelPosition,\n} from '../chart';\nimport {\n mergeXAxisLayoutMargin,\n useXAxisLayout,\n} from '../chart/use-x-axis-layout';\nimport { resolveXAxisTickLabels } from '../chart/chart-format';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n variants: {\n layout: {\n single: '',\n stacked: '',\n },\n fill: {\n solid: '',\n gradient: '',\n },\n },\n defaultVariants: {\n layout: 'single',\n fill: 'solid',\n },\n});\n\n/**\n * Style override for one series, keyed by its `dataKeys` entry. Anything left\n * unset falls back to the chart-wide prop, so an entry only states what differs\n * — e.g. a projection band that reads fainter than the actuals beside it.\n */\nexport interface AreaChartAreaSettings {\n /** Stroke and fill color. Defaults to the series' `config` color. */\n color?: string;\n /** Width of this series' top border. Defaults to the chart's `strokeWidth`. */\n strokeWidth?: number;\n /** Dash this series' top border. */\n dashed?: boolean;\n /** Interpolation for this series only. Defaults to the chart's `curve`. */\n curveType?: ChartCurveType;\n /**\n * Fill opacity for this series. Under `fill=\"gradient\"` it scales the\n * gradient's own alpha rather than replacing it.\n */\n fillOpacity?: number;\n /** Render this series' per-point dots. Defaults to the chart's `showDots`. */\n showDots?: boolean;\n /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */\n dotSize?: number;\n /** Show/hide this series' value labels, overriding the chart's `showLabels`. */\n showLabel?: boolean;\n /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */\n labelPosition?: CartesianLabelPosition;\n}\n\nexport interface AreaChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n VariantProps<typeof areaChartVariants>,\n CartesianChartProps,\n ChartAnimationProps,\n ChartBrushProps,\n ChartDataLabelProps {\n /**\n * The dataviz palette this chart's series are painted from. Series that\n * state no `color` of their own take a stop of it. See `ChartPalette`.\n */\n palette?: ChartPalette;\n /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n data: ReadonlyArray<Record<string, string | number | null>>;\n /**\n * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n * primitives). Series take their colour from the container's `palette`; each\n * entry maps a key to a `label` and an optional `tone`.\n */\n config: ChartConfig;\n /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n dataKeys: string[];\n /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n xKey: string;\n /** Interpolation between points. */\n curve?: ChartCurveType;\n /** Stroke width of each area's top border. */\n strokeWidth?: number;\n /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n fillOpacity?: number;\n /** Render a dot at each data point. */\n showDots?: boolean;\n /** Radius of each point's dot, in px. Its hover dot is 2px larger. */\n dotSize?: number;\n /**\n * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass\n * it explicitly to get hover dots on a dot-less area (`showDots={false}` with\n * `showActiveDot`) or a static-only area (dots without the hover one).\n */\n showActiveDot?: boolean;\n /** Bridge `null` gaps in the data instead of breaking the area. */\n connectNulls?: boolean;\n /**\n * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry\n * render from the chart-wide props.\n */\n areaSettings?: Record<string, AreaChartAreaSettings>;\n /**\n * One or more dashed reference/average lines on the value axis — a target, a\n * threshold, or a series mean. Pass a single object or an array to draw\n * several at once. On a stacked chart the value is read against the stack's\n * axis, not one series.\n */\n referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n /**\n * The category value (matching an `xKey` entry) at which the projection\n * zone starts. Ticks from this point onward render in the disabled text\n * color (`--ui-text-on-surface-disabled`). The chart data and series\n * themselves are not affected — only the X-axis tick appearance changes.\n *\n * Use this when displaying a forecast/projection range where future\n * data points should be visually de-emphasized on the axis.\n */\n projectionStart?: string | number;\n showLegend?: boolean;\n /**\n * Font size of the legend text. Defaults to `'xs'` — the size the legend has\n * always rendered at. See `ChartLegendFontSize`.\n */\n legendFontSize?: ChartLegendFontSize;\n /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n labelPosition?: CartesianLabelPosition;\n}\n\ntype TooltipContentType = NonNullable<React.ComponentProps<typeof ChartTooltip>['content']>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\ntype LegendContentFn = Extract<\n React.ComponentProps<typeof ChartLegend>['content'],\n (...args: never[]) => unknown\n>;\ntype LegendContentProps = Parameters<LegendContentFn>[0];\n\nfunction createProjectionTooltip(tooltipContent: TooltipContentType) {\n return function ProjectionTooltip(props: TooltipRenderProps) {\n const merged = {\n ...props,\n payload: dropProjectionPayload(props.payload),\n } as TooltipRenderProps;\n if (typeof tooltipContent === 'function') {\n const Comp = tooltipContent as React.FunctionComponent<TooltipRenderProps>;\n return <Comp {...merged} />;\n }\n // Element-form tooltip: cloneElement is the React-idiomatic way to\n // re-render an existing element with new props (preserves refs & keys).\n return React.cloneElement(tooltipContent, merged);\n };\n}\n\n// Renders two <clipPath> defs (actual / projection) and a dashed separator\n// line at the visual midpoint between the last actual tick and the first\n// projection tick. Both the actual and projection <Area> series reference\n// these clip regions, so the exact same curve renders on each side — no kink.\nfunction ProjectionClip({\n projectionStart,\n prevTick,\n clipId,\n}: {\n projectionStart: string | number;\n prevTick: string | number;\n clipId: string;\n}) {\n const xScale = useXAxisScale();\n const plotArea = usePlotArea();\n if (!xScale || !plotArea) return null;\n const prevX = xScale(prevTick as string);\n const currX = xScale(projectionStart as string);\n if (prevX == null || currX == null) return null;\n const midX = (prevX + currX) / 2;\n const { x, y, width, height } = plotArea;\n return (\n <>\n <defs>\n <clipPath id={`${clipId}-actual`}>\n <rect x={x} y={y} width={midX - x} height={height} />\n </clipPath>\n <clipPath id={`${clipId}-projection`}>\n <rect x={midX} y={y} width={x + width - midX} height={height} />\n </clipPath>\n </defs>\n <line\n x1={midX}\n y1={y}\n x2={midX}\n y2={y + height}\n stroke=\"var(--ui-border-on-surface-border)\"\n strokeDasharray=\"4 4\"\n />\n </>\n );\n}\n\n/**\n * One top-to-bottom fade per series, referenced by each `<Area>`'s `fill`.\n *\n * The ids are scoped by `gradientId` because SVG `<defs>` ids are\n * document-global: two AreaCharts on the same page would otherwise share (and\n * silently overwrite) each other's stops.\n */\nfunction AreaFillGradients({\n dataKeys,\n gradientId,\n colorFor,\n}: {\n dataKeys: string[];\n gradientId: string;\n colorFor: (key: string) => string;\n}) {\n return (\n <defs>\n {dataKeys.map((key) => (\n <linearGradient\n key={key}\n id={`${gradientId}-${toCssKey(key)}`}\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <stop offset=\"5%\" stopColor={colorFor(key)} stopOpacity={0.8} />\n <stop offset=\"95%\" stopColor={colorFor(key)} stopOpacity={0.1} />\n </linearGradient>\n ))}\n </defs>\n );\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n (\n {\n className,\n config,\n palette,\n data,\n dataKeys,\n xKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n layout = 'single',\n fill = 'solid',\n curve = 'monotone',\n strokeWidth = 2,\n fillOpacity = 0.4,\n showDots = false,\n dotSize = 3,\n showActiveDot,\n connectNulls = false,\n areaSettings,\n referenceLine,\n projectionStart,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n legendFontSize,\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 animate,\n animationDuration,\n animationBegin,\n animationEasing,\n showLabels = false,\n labelPosition,\n labelFormatter,\n showBrush = false,\n brushHeight,\n brushAriaLabel,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n const isStacked = layout === 'stacked';\n const areaLabelPosition = resolveCartesianLabelPosition({\n labelPosition,\n isStacked,\n });\n const isGradient = fill === 'gradient';\n const referenceLines = toReferenceLineList(referenceLine);\n\n // A series' `color` override has to reach its gradient stops too, or a\n // gradient-filled chart would keep painting the `config` color.\n const colorFor = (key: string) =>\n areaSettings?.[key]?.color ?? `var(--color-${toCssKey(key)})`;\n\n // The plot inset is needed as soon as *any* series carries outside labels —\n // a per-series `showLabel` counts, not only the chart-wide `showLabels`.\n const hasLabels =\n showLabels ||\n Object.values(areaSettings ?? {}).some((settings) => settings.showLabel);\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 = resolveXAxisTitle(xAxisLabel);\n const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n const xAxisTickLabels = resolveXAxisTickLabels(\n data.map((row) => row[xKey]),\n xTickFormatter\n );\n const chartContainerRef = React.useRef<HTMLDivElement>(null);\n const xAxisLayout = useXAxisLayout(\n chartContainerRef,\n xAxisAngle,\n xAxisLabel,\n xAxisTickLabels.join('\\u0000')\n );\n const chartMargin = mergeXAxisLayoutMargin(\n hasLabels ? CHART_LABEL_MARGIN : undefined,\n xAxisLayout.margin\n );\n\n const projStartIndex = React.useMemo(() => {\n if (projectionStart === undefined) return -1;\n return data.findIndex((row) => row[xKey] === projectionStart);\n }, [projectionStart, data, xKey]);\n // projStartIndex === 0 (boundary at the first tick) is excluded: there is no\n // \"previous tick\" to define the clip midpoint, so clipPath defs can't be\n // emitted, which would make all series invisible. Treat it as no-projection.\n const hasProjection = projStartIndex > 0;\n\n // Build the projection tick renderer when projectionStart is set. Each tick\n // past (and including) the start value renders in the disabled text color;\n // ticks before it stay in the muted-foreground color. Returns undefined when\n // projectionStart is absent or not found so recharts uses its own renderer.\n const projectionTick = React.useMemo(() => {\n if (!hasProjection) return undefined;\n const projectedValues = new Set(\n data.slice(projStartIndex).map((row) => row[xKey])\n );\n const ProjectionTick = ({\n payload,\n index,\n ...tickProps\n }: {\n payload: { value: string | number };\n index?: number;\n [key: string]: unknown;\n }) => (\n <Text\n {...(tickProps as React.ComponentProps<typeof Text>)}\n fontSize={12}\n className={\n projectedValues.has(payload.value)\n ? 'fill-[var(--ui-text-on-surface-disabled)]'\n : 'fill-muted-foreground'\n }\n >\n {xTickFormatter\n ? xTickFormatter(payload.value as never, index)\n : payload.value}\n </Text>\n );\n return ProjectionTick;\n }, [hasProjection, projStartIndex, data, xKey, xTickFormatter]);\n\n // When projection is active, copy each series value to `_proj_${key}` — same\n // data, no nulls. Both the actual and projection <Area> see the identical curve;\n // the clipPath (computed in ProjectionClip) restricts which half each paints.\n const chartData = React.useMemo(() => {\n if (!hasProjection) return data;\n return data.map((row) => ({\n ...row,\n ...Object.fromEntries(\n dataKeys.map((k) => [`_proj_${k}`, row[k]])\n ),\n }));\n }, [hasProjection, data, dataKeys]);\n\n // The tick immediately before the projection boundary — needed to compute the\n // visual midpoint where the clip edge and separator line are placed.\n const prevTickValue = React.useMemo(() => {\n if (projStartIndex <= 0) return undefined;\n return data[projStartIndex - 1]?.[xKey];\n }, [projStartIndex, data, xKey]);\n\n const projectionTooltip = React.useMemo(\n () =>\n hasProjection && tooltipContent\n ? createProjectionTooltip(tooltipContent)\n : undefined,\n [hasProjection, tooltipContent]\n );\n\n const tooltipNode = hasProjection\n ? (projectionTooltip ??\n ((tp: TooltipRenderProps) => (\n <ChartTooltipContent\n active={tp.active}\n label={tp.label}\n payload={\n dropProjectionPayload(\n tp.payload\n ) as ChartTooltipContentProps['payload']\n }\n />\n )))\n : (tooltipContent ?? <ChartTooltipContent />);\n\n const legendNode = hasProjection\n ? (lp: LegendContentProps) => (\n <ChartLegendContent\n verticalAlign={lp.verticalAlign}\n fontSize={legendFontSize}\n payload={\n dropProjectionPayload(\n lp.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )\n : <ChartLegendContent fontSize={legendFontSize} />;\n\n // recharts renders SVG <defs> once per chart; the gradient/clip ids must be\n // unique across chart instances on the page. useId gives a stable per-instance\n // id; strip the colons React emits (invalid in a url(#…) reference).\n const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n const clipId = `area-proj-${React.useId().replace(/:/g, '')}`;\n\n return (\n <div\n ref={ref}\n data-layout={layout}\n data-fill={fill}\n className={cn(areaChartVariants({ layout, fill }), className)}\n {...props}\n >\n <ChartContainer\n ref={chartContainerRef}\n config={config}\n palette={palette}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsAreaChart\n data={chartData as readonly unknown[]}\n margin={chartMargin}\n >\n {isGradient && (\n <AreaFillGradients\n dataKeys={dataKeys}\n gradientId={gradientId}\n colorFor={colorFor}\n />\n )}\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={projectionTick ? undefined : xTickFormatter}\n tick={projectionTick}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n height={xAxisLayout.height}\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 && <ChartTooltip content={tooltipNode} />}\n {showLegend && <ChartLegend content={legendNode} />}\n {hasProjection && prevTickValue != null && (\n <ProjectionClip\n projectionStart={projectionStart!}\n prevTick={prevTickValue}\n clipId={clipId}\n />\n )}\n {dataKeys.map((key) => {\n const settings = areaSettings?.[key];\n const seriesDots = settings?.showDots ?? showDots;\n const dotRadius = settings?.dotSize ?? dotSize;\n // The hover dot follows the static dots unless asked otherwise, so\n // a chart that sets neither renders exactly as before.\n const activeDot = showActiveDot ?? seriesDots;\n const seriesLabel = settings?.showLabel ?? showLabels;\n const seriesLabelPosition =\n settings?.labelPosition ?? areaLabelPosition;\n return (\n <Area\n key={key}\n type={settings?.curveType ?? curve ?? 'monotone'}\n dataKey={key}\n stackId={isStacked ? 'a' : undefined}\n stroke={colorFor(key)}\n strokeWidth={settings?.strokeWidth ?? strokeWidth}\n strokeDasharray={settings?.dashed ? '5 5' : undefined}\n fill={\n isGradient ? `url(#${gradientId}-${toCssKey(key)})` : colorFor(key)\n }\n fillOpacity={\n settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n }\n dot={seriesDots ? { r: dotRadius } : false}\n activeDot={activeDot ? { r: dotRadius + 2 } : false}\n connectNulls={connectNulls}\n clipPath={hasProjection ? `url(#${clipId}-actual)` : undefined}\n {...animation}\n >\n {seriesLabel && (\n <LabelList\n dataKey={key}\n position={seriesLabelPosition}\n formatter={toLabelFormatter(labelFormatter)}\n className={resolveLabelFillClass(seriesLabelPosition, {\n translucentSeries: true,\n })}\n fontSize={CHART_LABEL_FONT_SIZE}\n />\n )}\n </Area>\n );\n })}\n {hasProjection &&\n dataKeys.map((key) => {\n const settings = areaSettings?.[key];\n return (\n <Area\n key={`_proj_${key}`}\n type={settings?.curveType ?? curve ?? 'monotone'}\n dataKey={`_proj_${key}`}\n name={key}\n stackId={isStacked ? 'proj' : undefined}\n stroke={colorFor(key)}\n strokeWidth={settings?.strokeWidth ?? strokeWidth}\n strokeDasharray=\"5 5\"\n fill={\n isGradient ? `url(#${gradientId}-${toCssKey(key)})` : colorFor(key)\n }\n fillOpacity={\n settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n }\n dot={false}\n activeDot={false}\n clipPath={`url(#${clipId}-projection)`}\n legendType=\"none\"\n tooltipType=\"none\"\n {...animation}\n />\n );\n })}\n {/* Annotations draw over the series they describe. */}\n {referenceLines.map((ref, index) => {\n const value = resolveChartReferenceValue(ref, data, dataKeys);\n if (value === undefined) return null;\n return (\n <ReferenceLine\n key={`${ref.label ?? 'ref'}-${index}`}\n y={value}\n {...resolveReferenceLineProps(ref.label, ref.labelPosition)}\n />\n );\n })}\n {showBrush && (\n <Brush\n dataKey={xKey}\n tickFormatter={xTickFormatter}\n {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n />\n )}\n </RechartsAreaChart>\n </ChartContainer>\n </div>\n );\n }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"mappings":"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"}
|