@acronis-platform/ui-react 5.1.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/components/ui/area-chart/area-chart.js +107 -107
  2. package/dist/components/ui/area-chart/area-chart.js.map +1 -1
  3. package/dist/components/ui/bar-chart/bar-chart.js +162 -162
  4. package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
  5. package/dist/components/ui/category-bar/category-bar.js +50 -50
  6. package/dist/components/ui/category-bar/category-bar.js.map +1 -1
  7. package/dist/components/ui/chart/chart.js +53 -40
  8. package/dist/components/ui/chart/chart.js.map +1 -1
  9. package/dist/components/ui/checkbox/checkbox.js +1 -1
  10. package/dist/components/ui/checkbox/checkbox.js.map +1 -1
  11. package/dist/components/ui/combobox/combobox.js +1 -1
  12. package/dist/components/ui/combobox/combobox.js.map +1 -1
  13. package/dist/components/ui/composed-chart/composed-chart.js +146 -146
  14. package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
  15. package/dist/components/ui/confidence-cone/confidence-cone.js +97 -97
  16. package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
  17. package/dist/components/ui/dropdown-menu/dropdown-menu.js +2 -2
  18. package/dist/components/ui/dropdown-menu/dropdown-menu.js.map +1 -1
  19. package/dist/components/ui/funnel-chart/funnel-chart.js +120 -120
  20. package/dist/components/ui/funnel-chart/funnel-chart.js.map +1 -1
  21. package/dist/components/ui/histogram/histogram.js +58 -58
  22. package/dist/components/ui/histogram/histogram.js.map +1 -1
  23. package/dist/components/ui/input-num-picker/input-num-picker.js.map +1 -1
  24. package/dist/components/ui/input-select/input-select.js +1 -1
  25. package/dist/components/ui/input-select/input-select.js.map +1 -1
  26. package/dist/components/ui/line-chart/line-chart.js +91 -91
  27. package/dist/components/ui/line-chart/line-chart.js.map +1 -1
  28. package/dist/components/ui/number-field/number-field.js.map +1 -1
  29. package/dist/components/ui/pie-chart/pie-chart.js +92 -92
  30. package/dist/components/ui/pie-chart/pie-chart.js.map +1 -1
  31. package/dist/components/ui/radar-chart/radar-chart.js +37 -37
  32. package/dist/components/ui/radar-chart/radar-chart.js.map +1 -1
  33. package/dist/components/ui/radial-bar-chart/radial-bar-chart.js +112 -112
  34. package/dist/components/ui/radial-bar-chart/radial-bar-chart.js.map +1 -1
  35. package/dist/components/ui/sankey-chart/sankey-chart.js +78 -78
  36. package/dist/components/ui/sankey-chart/sankey-chart.js.map +1 -1
  37. package/dist/components/ui/scatter-chart/scatter-chart.js +57 -57
  38. package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
  39. package/dist/components/ui/sidebar-primary/sidebar-primary.js +10 -5
  40. package/dist/components/ui/sidebar-primary/sidebar-primary.js.map +1 -1
  41. package/dist/components/ui/treemap/treemap.js +87 -87
  42. package/dist/components/ui/treemap/treemap.js.map +1 -1
  43. package/dist/index.js +111 -111
  44. package/dist/llms/checkbox.md +63 -12
  45. package/dist/llms/sidebar-primary.md +18 -1
  46. package/dist/llms.txt +1 -1
  47. package/dist/react.js +111 -111
  48. package/dist/src/components/ui/chart/chart.d.ts +1 -0
  49. package/dist/src/components/ui/chart/index.d.ts +1 -1
  50. package/dist/src/components/ui/radial-bar-chart/radial-bar-chart.d.ts +3 -2
  51. package/dist/src/components/ui/sankey-chart/sankey-chart.d.ts +1 -1
  52. package/dist/src/components/ui/sidebar-primary/sidebar-primary.d.ts +23 -0
  53. package/dist/src/components/ui/treemap/treemap.d.ts +3 -2
  54. package/dist/ui-react.css +1 -1
  55. package/package.json +2 -2
@@ -1,13 +1,13 @@
1
1
  "use client";
2
2
  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
- import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o } from "../chart/chart.js";
5
- import { CHART_LABEL_MARGIN as s, dropProjectionPayload as c, resolveAnimation as l, resolveAxisDomain as u, resolveBrushProps as d, resolveCartesianLabelPosition as ee, resolveChartReferenceValue as te, resolveLabelFillClass as ne, resolveReferenceLineProps as f, resolveRotatedTickAnchor as p, resolveXAxisHeight as re, resolveXAxisTitle as ie, resolveYAxisTitle as ae, toLabelFormatter as oe, toReferenceLineList as se } from "../chart/chart-format.js";
6
- import * as m from "react";
7
- import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
8
- import { Area as v, AreaChart as y, Brush as b, CartesianGrid as ce, LabelList as le, ReferenceLine as ue, Text as de, XAxis as fe, YAxis as pe, usePlotArea as x, useXAxisScale as S } from "recharts";
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
+ import { CHART_LABEL_MARGIN as c, dropProjectionPayload as l, resolveAnimation as u, resolveAxisDomain as d, resolveBrushProps as ee, resolveCartesianLabelPosition as te, resolveChartReferenceValue as ne, resolveLabelFillClass as re, resolveReferenceLineProps as ie, resolveRotatedTickAnchor as ae, resolveXAxisHeight as oe, resolveXAxisTitle as se, resolveYAxisTitle as ce, toLabelFormatter as le, toReferenceLineList as ue } from "../chart/chart-format.js";
6
+ import * as f from "react";
7
+ import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
8
+ import { Area as g, AreaChart as de, Brush as _, CartesianGrid as v, LabelList as y, ReferenceLine as b, Text as x, XAxis as fe, YAxis as pe, usePlotArea as S, useXAxisScale as C } from "recharts";
9
9
  //#region src/components/ui/area-chart/area-chart.tsx
10
- var C = t("", {
10
+ var w = t("", {
11
11
  variants: {
12
12
  layout: {
13
13
  single: "",
@@ -27,34 +27,34 @@ function me(e) {
27
27
  return function(t) {
28
28
  let n = {
29
29
  ...t,
30
- payload: c(t.payload)
30
+ payload: l(t.payload)
31
31
  };
32
- return typeof e == "function" ? /* @__PURE__ */ g(e, { ...n }) : m.cloneElement(e, n);
32
+ return typeof e == "function" ? /* @__PURE__ */ m(e, { ...n }) : f.cloneElement(e, n);
33
33
  };
34
34
  }
35
35
  function he({ projectionStart: e, prevTick: t, clipId: n }) {
36
- let r = S(), i = x();
36
+ let r = C(), i = S();
37
37
  if (!r || !i) return null;
38
38
  let a = r(t), o = r(e);
39
39
  if (a == null || o == null) return null;
40
40
  let s = (a + o) / 2, { x: c, y: l, width: u, height: d } = i;
41
- return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("defs", { children: [/* @__PURE__ */ g("clipPath", {
41
+ return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("defs", { children: [/* @__PURE__ */ m("clipPath", {
42
42
  id: `${n}-actual`,
43
- children: /* @__PURE__ */ g("rect", {
43
+ children: /* @__PURE__ */ m("rect", {
44
44
  x: c,
45
45
  y: l,
46
46
  width: s - c,
47
47
  height: d
48
48
  })
49
- }), /* @__PURE__ */ g("clipPath", {
49
+ }), /* @__PURE__ */ m("clipPath", {
50
50
  id: `${n}-projection`,
51
- children: /* @__PURE__ */ g("rect", {
51
+ children: /* @__PURE__ */ m("rect", {
52
52
  x: s,
53
53
  y: l,
54
54
  width: c + u - s,
55
55
  height: d
56
56
  })
57
- })] }), /* @__PURE__ */ g("line", {
57
+ })] }), /* @__PURE__ */ m("line", {
58
58
  x1: s,
59
59
  y1: l,
60
60
  x2: s,
@@ -64,189 +64,189 @@ function he({ projectionStart: e, prevTick: t, clipId: n }) {
64
64
  })] });
65
65
  }
66
66
  function ge({ dataKeys: e, gradientId: t, colorFor: n }) {
67
- return /* @__PURE__ */ g("defs", { children: e.map((e) => /* @__PURE__ */ _("linearGradient", {
68
- id: `${t}-${e}`,
67
+ return /* @__PURE__ */ m("defs", { children: e.map((e) => /* @__PURE__ */ h("linearGradient", {
68
+ id: `${t}-${s(e)}`,
69
69
  x1: "0",
70
70
  y1: "0",
71
71
  x2: "0",
72
72
  y2: "1",
73
- children: [/* @__PURE__ */ g("stop", {
73
+ children: [/* @__PURE__ */ m("stop", {
74
74
  offset: "5%",
75
75
  stopColor: n(e),
76
76
  stopOpacity: .8
77
- }), /* @__PURE__ */ g("stop", {
77
+ }), /* @__PURE__ */ m("stop", {
78
78
  offset: "95%",
79
79
  stopColor: n(e),
80
80
  stopOpacity: .1
81
81
  })]
82
82
  }, e)) });
83
83
  }
84
- var w = m.forwardRef(({ className: t, config: h, palette: x, data: S, dataKeys: w, xKey: T, xAxisLabel: E, yAxisLabel: D, yUnit: _e, layout: O = "single", fill: k = "solid", curve: A = "monotone", strokeWidth: j = 2, fillOpacity: M = .4, showDots: N = !1, dotSize: P = 3, showActiveDot: F, connectNulls: I = !1, areaSettings: L, referenceLine: ve, projectionStart: R, showGrid: ye = !0, showTooltip: be = !0, showLegend: xe = !0, showXAxis: Se = !0, showYAxis: Ce = !0, xTickFormatter: z, yTickFormatter: we, xAxisAngle: B, xAxisInterval: Te, yAxisTickCount: Ee, yAxisDomain: De, gridDashed: Oe, gridHorizontal: ke, gridVertical: Ae, tooltipContent: V, animate: je, animationDuration: Me, animationBegin: Ne, animationEasing: Pe, showLabels: H = !1, labelPosition: Fe, labelFormatter: Ie, showBrush: Le = !1, brushHeight: Re, brushAriaLabel: ze, ...Be }, Ve) => {
85
- let U = l({
84
+ var T = f.forwardRef(({ className: t, config: p, palette: S, data: C, dataKeys: T, xKey: E, xAxisLabel: D, yAxisLabel: O, yUnit: _e, layout: k = "single", fill: A = "solid", curve: j = "monotone", strokeWidth: M = 2, fillOpacity: N = .4, showDots: P = !1, dotSize: F = 3, showActiveDot: I, connectNulls: ve = !1, areaSettings: L, referenceLine: ye, projectionStart: R, showGrid: be = !0, showTooltip: xe = !0, showLegend: Se = !0, showXAxis: Ce = !0, showYAxis: z = !0, xTickFormatter: B, yTickFormatter: we, xAxisAngle: V, xAxisInterval: Te, yAxisTickCount: Ee, yAxisDomain: De, gridDashed: Oe, gridHorizontal: ke, gridVertical: Ae, tooltipContent: H, animate: je, animationDuration: Me, animationBegin: Ne, animationEasing: Pe, showLabels: U = !1, labelPosition: Fe, labelFormatter: Ie, showBrush: Le = !1, brushHeight: Re, brushAriaLabel: ze, ...Be }, Ve) => {
85
+ let W = u({
86
86
  animate: je,
87
87
  animationDuration: Me,
88
88
  animationBegin: Ne,
89
89
  animationEasing: Pe
90
- }), W = O === "stacked", He = ee({
90
+ }), G = k === "stacked", He = te({
91
91
  labelPosition: Fe,
92
- isStacked: W
93
- }), G = k === "gradient", Ue = se(ve), K = (e) => L?.[e]?.color ?? `var(--color-${e})`, We = H || Object.values(L ?? {}).some((e) => e.showLabel), Ge = ie(E), Ke = ae(D), qe = u(De), q = re(E, B), J = m.useMemo(() => R === void 0 ? -1 : S.findIndex((e) => e[T] === R), [
92
+ isStacked: G
93
+ }), K = A === "gradient", Ue = ue(ye), q = (e) => L?.[e]?.color ?? `var(--color-${s(e)})`, We = U || Object.values(L ?? {}).some((e) => e.showLabel), Ge = se(D), Ke = ce(O), qe = d(De), Je = oe(D, V), J = f.useMemo(() => R === void 0 ? -1 : C.findIndex((e) => e[E] === R), [
94
94
  R,
95
- S,
96
- T
97
- ]), Y = J > 0, X = m.useMemo(() => {
95
+ C,
96
+ E
97
+ ]), Y = J > 0, X = f.useMemo(() => {
98
98
  if (!Y) return;
99
- let e = new Set(S.slice(J).map((e) => e[T]));
100
- return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ g(de, {
99
+ let e = new Set(C.slice(J).map((e) => e[E]));
100
+ return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ m(x, {
101
101
  ...r,
102
102
  fontSize: 12,
103
103
  className: e.has(t.value) ? "fill-[var(--ui-text-on-surface-disabled)]" : "fill-muted-foreground",
104
- children: z ? z(t.value, n) : t.value
104
+ children: B ? B(t.value, n) : t.value
105
105
  });
106
106
  }, [
107
107
  Y,
108
108
  J,
109
- S,
110
- T,
111
- z
112
- ]), Je = m.useMemo(() => Y ? S.map((e) => ({
109
+ C,
110
+ E,
111
+ B
112
+ ]), Ye = f.useMemo(() => Y ? C.map((e) => ({
113
113
  ...e,
114
- ...Object.fromEntries(w.map((t) => [`_proj_${t}`, e[t]]))
115
- })) : S, [
114
+ ...Object.fromEntries(T.map((t) => [`_proj_${t}`, e[t]]))
115
+ })) : C, [
116
116
  Y,
117
- S,
118
- w
119
- ]), Z = m.useMemo(() => {
120
- if (!(J <= 0)) return S[J - 1]?.[T];
117
+ C,
118
+ T
119
+ ]), Z = f.useMemo(() => {
120
+ if (!(J <= 0)) return C[J - 1]?.[E];
121
121
  }, [
122
122
  J,
123
- S,
124
- T
125
- ]), Ye = m.useMemo(() => Y && V ? me(V) : void 0, [Y, V]), Xe = Y ? Ye ?? ((e) => /* @__PURE__ */ g(o, {
123
+ C,
124
+ E
125
+ ]), Xe = f.useMemo(() => Y && H ? me(H) : void 0, [Y, H]), Ze = Y ? Xe ?? ((e) => /* @__PURE__ */ m(o, {
126
126
  active: e.active,
127
127
  label: e.label,
128
- payload: c(e.payload)
129
- })) : V ?? /* @__PURE__ */ g(o, {}), Ze = Y ? (e) => /* @__PURE__ */ g(i, {
128
+ payload: l(e.payload)
129
+ })) : H ?? /* @__PURE__ */ m(o, {}), Qe = Y ? (e) => /* @__PURE__ */ m(i, {
130
130
  verticalAlign: e.verticalAlign,
131
- payload: c(e.payload)
132
- }) : /* @__PURE__ */ g(i, {}), Q = `area-gradient-${m.useId().replace(/:/g, "")}`, $ = `area-proj-${m.useId().replace(/:/g, "")}`;
133
- return /* @__PURE__ */ g("div", {
131
+ payload: l(e.payload)
132
+ }) : /* @__PURE__ */ m(i, {}), Q = `area-gradient-${f.useId().replace(/:/g, "")}`, $ = `area-proj-${f.useId().replace(/:/g, "")}`;
133
+ return /* @__PURE__ */ m("div", {
134
134
  ref: Ve,
135
- "data-layout": O,
136
- "data-fill": k,
137
- className: e(C({
138
- layout: O,
139
- fill: k
135
+ "data-layout": k,
136
+ "data-fill": A,
137
+ className: e(w({
138
+ layout: k,
139
+ fill: A
140
140
  }), t),
141
141
  ...Be,
142
- children: /* @__PURE__ */ g(n, {
143
- config: h,
144
- palette: x,
142
+ children: /* @__PURE__ */ m(n, {
143
+ config: p,
144
+ palette: S,
145
145
  className: "size-full [&_.recharts-label]:fill-foreground",
146
- children: /* @__PURE__ */ _(y, {
147
- data: Je,
148
- margin: We ? s : void 0,
146
+ children: /* @__PURE__ */ h(de, {
147
+ data: Ye,
148
+ margin: We ? c : void 0,
149
149
  children: [
150
- G && /* @__PURE__ */ g(ge, {
151
- dataKeys: w,
150
+ K && /* @__PURE__ */ m(ge, {
151
+ dataKeys: T,
152
152
  gradientId: Q,
153
- colorFor: K
153
+ colorFor: q
154
154
  }),
155
- ye && /* @__PURE__ */ g(ce, {
155
+ be && /* @__PURE__ */ m(v, {
156
156
  horizontal: ke ?? !0,
157
157
  vertical: Ae ?? !1,
158
158
  strokeDasharray: Oe ? "3 3" : void 0
159
159
  }),
160
- /* @__PURE__ */ g(fe, {
161
- dataKey: T,
160
+ /* @__PURE__ */ m(fe, {
161
+ dataKey: E,
162
162
  type: "category",
163
- hide: !Se,
163
+ hide: !Ce,
164
164
  tickLine: !1,
165
165
  axisLine: !1,
166
166
  tickMargin: 8,
167
- tickFormatter: X ? void 0 : z,
167
+ tickFormatter: X ? void 0 : B,
168
168
  tick: X,
169
- angle: B,
169
+ angle: V,
170
170
  interval: Te,
171
- textAnchor: p(B),
172
- height: q,
171
+ textAnchor: ae(V),
172
+ height: Je,
173
173
  label: Ge
174
174
  }),
175
- /* @__PURE__ */ g(pe, {
175
+ /* @__PURE__ */ m(pe, {
176
176
  type: "number",
177
- hide: !Ce,
177
+ hide: !z,
178
178
  tickLine: !1,
179
179
  axisLine: !1,
180
180
  unit: _e,
181
181
  tickFormatter: we,
182
182
  tickCount: Ee,
183
183
  domain: qe,
184
- width: D ? 72 : void 0,
184
+ width: O ? 72 : void 0,
185
185
  label: Ke
186
186
  }),
187
- be && /* @__PURE__ */ g(a, { content: Xe }),
188
- xe && /* @__PURE__ */ g(r, { content: Ze }),
189
- Y && Z != null && /* @__PURE__ */ g(he, {
187
+ xe && /* @__PURE__ */ m(a, { content: Ze }),
188
+ Se && /* @__PURE__ */ m(r, { content: Qe }),
189
+ Y && Z != null && /* @__PURE__ */ m(he, {
190
190
  projectionStart: R,
191
191
  prevTick: Z,
192
192
  clipId: $
193
193
  }),
194
- w.map((e) => {
195
- let t = L?.[e], n = t?.showDots ?? N, r = t?.dotSize ?? P, i = F ?? n, a = t?.showLabel ?? H, o = t?.labelPosition ?? He;
196
- return /* @__PURE__ */ g(v, {
197
- type: t?.curveType ?? A ?? "monotone",
194
+ T.map((e) => {
195
+ let t = L?.[e], n = t?.showDots ?? P, r = t?.dotSize ?? F, i = I ?? n, a = t?.showLabel ?? U, o = t?.labelPosition ?? He;
196
+ return /* @__PURE__ */ m(g, {
197
+ type: t?.curveType ?? j ?? "monotone",
198
198
  dataKey: e,
199
- stackId: W ? "a" : void 0,
200
- stroke: K(e),
201
- strokeWidth: t?.strokeWidth ?? j,
199
+ stackId: G ? "a" : void 0,
200
+ stroke: q(e),
201
+ strokeWidth: t?.strokeWidth ?? M,
202
202
  strokeDasharray: t?.dashed ? "5 5" : void 0,
203
- fill: G ? `url(#${Q}-${e})` : K(e),
204
- fillOpacity: t?.fillOpacity ?? (G ? 1 : M),
203
+ fill: K ? `url(#${Q}-${s(e)})` : q(e),
204
+ fillOpacity: t?.fillOpacity ?? (K ? 1 : N),
205
205
  dot: n ? { r } : !1,
206
206
  activeDot: i ? { r: r + 2 } : !1,
207
- connectNulls: I,
207
+ connectNulls: ve,
208
208
  clipPath: Y ? `url(#${$}-actual)` : void 0,
209
- ...U,
210
- children: a && /* @__PURE__ */ g(le, {
209
+ ...W,
210
+ children: a && /* @__PURE__ */ m(y, {
211
211
  dataKey: e,
212
212
  position: o,
213
- formatter: oe(Ie),
214
- className: ne(o, { translucentSeries: !0 }),
213
+ formatter: le(Ie),
214
+ className: re(o, { translucentSeries: !0 }),
215
215
  fontSize: 12
216
216
  })
217
217
  }, e);
218
218
  }),
219
- Y && w.map((e) => {
219
+ Y && T.map((e) => {
220
220
  let t = L?.[e];
221
- return /* @__PURE__ */ g(v, {
222
- type: t?.curveType ?? A ?? "monotone",
221
+ return /* @__PURE__ */ m(g, {
222
+ type: t?.curveType ?? j ?? "monotone",
223
223
  dataKey: `_proj_${e}`,
224
224
  name: e,
225
- stackId: W ? "proj" : void 0,
226
- stroke: K(e),
227
- strokeWidth: t?.strokeWidth ?? j,
225
+ stackId: G ? "proj" : void 0,
226
+ stroke: q(e),
227
+ strokeWidth: t?.strokeWidth ?? M,
228
228
  strokeDasharray: "5 5",
229
- fill: G ? `url(#${Q}-${e})` : K(e),
230
- fillOpacity: t?.fillOpacity ?? (G ? 1 : M),
229
+ fill: K ? `url(#${Q}-${s(e)})` : q(e),
230
+ fillOpacity: t?.fillOpacity ?? (K ? 1 : N),
231
231
  dot: !1,
232
232
  activeDot: !1,
233
233
  clipPath: `url(#${$}-projection)`,
234
234
  legendType: "none",
235
235
  tooltipType: "none",
236
- ...U
236
+ ...W
237
237
  }, `_proj_${e}`);
238
238
  }),
239
239
  Ue.map((e, t) => {
240
- let n = te(e, S, w);
241
- return n === void 0 ? null : /* @__PURE__ */ g(ue, {
240
+ let n = ne(e, C, T);
241
+ return n === void 0 ? null : /* @__PURE__ */ m(b, {
242
242
  y: n,
243
- ...f(e.label, e.labelPosition)
243
+ ...ie(e.label, e.labelPosition)
244
244
  }, `${e.label ?? "ref"}-${t}`);
245
245
  }),
246
- Le && /* @__PURE__ */ g(b, {
247
- dataKey: T,
248
- tickFormatter: z,
249
- ...d({
246
+ Le && /* @__PURE__ */ m(_, {
247
+ dataKey: E,
248
+ tickFormatter: B,
249
+ ...ee({
250
250
  brushHeight: Re,
251
251
  brushAriaLabel: ze
252
252
  })
@@ -256,8 +256,8 @@ var w = m.forwardRef(({ className: t, config: h, palette: x, data: S, dataKeys:
256
256
  })
257
257
  });
258
258
  });
259
- w.displayName = "AreaChart";
259
+ T.displayName = "AreaChart";
260
260
  //#endregion
261
- export { w as AreaChart, C as areaChartVariants };
261
+ export { T as AreaChart, w as areaChartVariants };
262
262
 
263
263
  //# 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 resolveXAxisHeight,\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 type CartesianLabelPosition,\n} from '../chart';\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}-${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-${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 xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\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 config={config}\n palette={palette}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsAreaChart\n data={chartData as readonly unknown[]}\n margin={hasLabels ? CHART_LABEL_MARGIN : undefined}\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={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 && <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}-${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}-${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 resolveXAxisHeight,\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';\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 xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\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 config={config}\n palette={palette}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsAreaChart\n data={chartData as readonly unknown[]}\n margin={hasLabels ? CHART_LABEL_MARGIN : undefined}\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={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 && <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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"}