npm - @acronis-platform/ui-react - Versions diffs - 5.5.3 → 5.5.5 - Mend

@acronis-platform/ui-react 5.5.3 → 5.5.5

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 (21) hide show

package/dist/components/ui/area-chart/area-chart.js +101 -101
package/dist/components/ui/area-chart/area-chart.js.map +1 -1
package/dist/components/ui/bar-chart/bar-chart.js +164 -164
package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
package/dist/components/ui/chart/chart-format.js +33 -30
package/dist/components/ui/chart/chart-format.js.map +1 -1
package/dist/components/ui/chart/use-x-axis-layout.js +29 -27
package/dist/components/ui/chart/use-x-axis-layout.js.map +1 -1
package/dist/components/ui/composed-chart/composed-chart.js +137 -137
package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
package/dist/components/ui/confidence-cone/confidence-cone.js +104 -104
package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
package/dist/components/ui/histogram/histogram.js +34 -34
package/dist/components/ui/histogram/histogram.js.map +1 -1
package/dist/components/ui/line-chart/line-chart.js +60 -60
package/dist/components/ui/line-chart/line-chart.js.map +1 -1
package/dist/components/ui/scatter-chart/scatter-chart.js +61 -61
package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
package/dist/llms.txt +1 -1
package/dist/src/components/ui/chart/chart-format.d.ts +6 -0
package/package.json +3 -3

package/dist/components/ui/area-chart/area-chart.js CHANGED Viewed

@@ -2,13 +2,13 @@
 import { cn as e } from "../../../lib/utils.js";
 import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o, toCssKey as s } from "../chart/chart.js";
-import { CHART_LABEL_MARGIN as c, dropProjectionPayload as l, resolveAnimation as u, resolveAxisDomain as d, resolveBrushProps as ee, resolveCartesianLabelPosition as te, resolveChartReferenceValue as f, resolveLabelFillClass as ne, resolveReferenceLineProps as re, resolveRotatedTickAnchor as ie, resolveXAxisTickLabels as ae, resolveXAxisTitle as oe, resolveYAxisTitle as se, toLabelFormatter as ce, toReferenceLineList as le } from "../chart/chart-format.js";
+import { CHART_LABEL_MARGIN as c, dropProjectionPayload as l, resolveAnimation as u, resolveAxisDomain as d, resolveBrushProps as ee, resolveCartesianLabelPosition as te, resolveChartReferenceValue as f, resolveLabelFillClass as ne, resolveReferenceLineProps as re, resolveRotatedTickAnchor as ie, resolveXAxisTickLabels as p, resolveXAxisTitle as ae, resolveYAxisTitle as oe, resolveYAxisWidth as se, toLabelFormatter as ce, toReferenceLineList as le } from "../chart/chart-format.js";
 import { mergeXAxisLayoutMargin as ue, useXAxisLayout as de } from "../chart/use-x-axis-layout.js";
-import * as p from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Area as _, AreaChart as fe, Brush as pe, CartesianGrid as me, LabelList as he, ReferenceLine as v, Text as y, XAxis as ge, YAxis as _e, usePlotArea as b, useXAxisScale as x } from "recharts";
+import * as m from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Area as v, AreaChart as fe, Brush as pe, CartesianGrid as me, LabelList as y, ReferenceLine as he, Text as ge, XAxis as _e, YAxis as b, usePlotArea as x, useXAxisScale as S } from "recharts";
 //#region src/components/ui/area-chart/area-chart.tsx
-var S = t("", {
+var C = t("", {
 	variants: {
 		layout: {
 			single: "",
@@ -30,32 +30,32 @@ function ve(e) {
 			...t,
 			payload: l(t.payload)
 		};
-		return typeof e == "function" ? /* @__PURE__ */ h(e, { ...n }) : p.cloneElement(e, n);
+		return typeof e == "function" ? /* @__PURE__ */ g(e, { ...n }) : m.cloneElement(e, n);
 	};
 }
 function ye({ projectionStart: e, prevTick: t, clipId: n }) {
-	let r = x(), i = b();
+	let r = S(), i = x();
 	if (!r || !i) return null;
 	let a = r(t), o = r(e);
 	if (a == null || o == null) return null;
 	let s = (a + o) / 2, { x: c, y: l, width: u, height: d } = i;
-	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("defs", { children: [/* @__PURE__ */ h("clipPath", {
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("defs", { children: [/* @__PURE__ */ g("clipPath", {
 		id: `${n}-actual`,
-		children: /* @__PURE__ */ h("rect", {
+		children: /* @__PURE__ */ g("rect", {
 			x: c,
 			y: l,
 			width: s - c,
 			height: d
 		})
-	}), /* @__PURE__ */ h("clipPath", {
+	}), /* @__PURE__ */ g("clipPath", {
 		id: `${n}-projection`,
-		children: /* @__PURE__ */ h("rect", {
+		children: /* @__PURE__ */ g("rect", {
 			x: s,
 			y: l,
 			width: c + u - s,
 			height: d
 		})
-	})] }), /* @__PURE__ */ h("line", {
+	})] }), /* @__PURE__ */ g("line", {
 		x1: s,
 		y1: l,
 		x2: s,
@@ -65,40 +65,40 @@ function ye({ projectionStart: e, prevTick: t, clipId: n }) {
 	})] });
 }
 function be({ dataKeys: e, gradientId: t, colorFor: n }) {
-	return /* @__PURE__ */ h("defs", { children: e.map((e) => /* @__PURE__ */ g("linearGradient", {
+	return /* @__PURE__ */ g("defs", { children: e.map((e) => /* @__PURE__ */ _("linearGradient", {
 		id: `${t}-${s(e)}`,
 		x1: "0",
 		y1: "0",
 		x2: "0",
 		y2: "1",
-		children: [/* @__PURE__ */ h("stop", {
+		children: [/* @__PURE__ */ g("stop", {
 			offset: "5%",
 			stopColor: n(e),
 			stopOpacity: .8
-		}), /* @__PURE__ */ h("stop", {
+		}), /* @__PURE__ */ g("stop", {
 			offset: "95%",
 			stopColor: n(e),
 			stopOpacity: .1
 		})]
 	}, e)) });
 }
-var C = p.forwardRef(({ className: t, config: m, palette: b, data: x, dataKeys: C, xKey: w, xAxisLabel: T, yAxisLabel: E, yUnit: xe, layout: D = "single", fill: O = "solid", curve: k = "monotone", strokeWidth: A = 2, fillOpacity: j = .4, showDots: M = !1, dotSize: Se = 3, showActiveDot: Ce, connectNulls: we = !1, areaSettings: N, referenceLine: Te, projectionStart: P, showGrid: Ee = !0, showTooltip: De = !0, showLegend: Oe = !0, legendFontSize: F, legendAriaLabel: I, showXAxis: ke = !0, showYAxis: Ae = !0, xTickFormatter: L, yTickFormatter: je, xAxisAngle: R, xAxisInterval: Me, yAxisTickCount: Ne, yAxisDomain: Pe, gridDashed: Fe, gridHorizontal: Ie, gridVertical: z, tooltipContent: B, animate: Le, animationDuration: Re, animationBegin: ze, animationEasing: Be, showLabels: V = !1, labelPosition: Ve, labelFormatter: He, showBrush: Ue = !1, brushHeight: We, brushAriaLabel: Ge, ...Ke }, qe) => {
+var w = m.forwardRef(({ className: t, config: h, palette: x, data: S, dataKeys: w, xKey: T, xAxisLabel: E, yAxisLabel: D, yUnit: xe, layout: O = "single", fill: k = "solid", curve: A = "monotone", strokeWidth: j = 2, fillOpacity: M = .4, showDots: Se = !1, dotSize: Ce = 3, showActiveDot: we, connectNulls: Te = !1, areaSettings: N, referenceLine: Ee, projectionStart: P, showGrid: De = !0, showTooltip: Oe = !0, showLegend: ke = !0, legendFontSize: F, legendAriaLabel: I, showXAxis: Ae = !0, showYAxis: je = !0, xTickFormatter: L, yTickFormatter: Me, xAxisAngle: R, xAxisInterval: Ne, yAxisTickCount: Pe, yAxisDomain: Fe, gridDashed: Ie, gridHorizontal: z, gridVertical: Le, tooltipContent: B, animate: Re, animationDuration: ze, animationBegin: Be, animationEasing: Ve, showLabels: V = !1, labelPosition: He, labelFormatter: Ue, showBrush: We = !1, brushHeight: Ge, brushAriaLabel: Ke, ...qe }, Je) => {
 	let H = u({
-		animate: Le,
-		animationDuration: Re,
-		animationBegin: ze,
-		animationEasing: Be
-	}), U = D === "stacked", Je = te({
-		labelPosition: Ve,
+		animate: Re,
+		animationDuration: ze,
+		animationBegin: Be,
+		animationEasing: Ve
+	}), U = O === "stacked", Ye = te({
+		labelPosition: He,
 		isStacked: U
-	}), W = O === "gradient", Ye = le(Te), G = (e) => N?.[e]?.color ?? `var(--color-${s(e)})`, Xe = V || Object.values(N ?? {}).some((e) => e.showLabel), Ze = oe(T), Qe = se(E), $e = d(Pe), et = ae(x.map((e) => e[w]), L), K = p.useRef(null), q = de(K, R, T, et.join("\0")), tt = ue(Xe ? c : void 0, q.margin), J = p.useMemo(() => P === void 0 ? -1 : x.findIndex((e) => e[w] === P), [
+	}), W = k === "gradient", Xe = le(Ee), G = (e) => N?.[e]?.color ?? `var(--color-${s(e)})`, Ze = V || Object.values(N ?? {}).some((e) => e.showLabel), Qe = ae(E), $e = oe(D), et = d(Fe), tt = p(S.map((e) => e[T]), L), K = m.useRef(null), q = de(K, R, E, tt.join("\0")), nt = ue(Ze ? c : void 0, q.margin), J = m.useMemo(() => P === void 0 ? -1 : S.findIndex((e) => e[T] === P), [
 		P,
-		x,
-		w
-	]), Y = J > 0, X = p.useMemo(() => {
+		S,
+		T
+	]), Y = J > 0, X = m.useMemo(() => {
 		if (!Y) return;
-		let e = new Set(x.slice(J).map((e) => e[w]));
-		return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ h(y, {
+		let e = new Set(S.slice(J).map((e) => e[T]));
+		return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ g(ge, {
 			...r,
 			fontSize: 12,
 			className: e.has(t.value) ? "fill-[var(--ui-text-on-surface-disabled)]" : "fill-muted-foreground",
@@ -107,134 +107,134 @@ var C = p.forwardRef(({ className: t, config: m, palette: b, data: x, dataKeys:
 	}, [
 		Y,
 		J,
-		x,
-		w,
+		S,
+		T,
 		L
-	]), nt = p.useMemo(() => Y ? x.map((e) => ({
+	]), rt = m.useMemo(() => Y ? S.map((e) => ({
 		...e,
-		...Object.fromEntries(C.map((t) => [`_proj_${t}`, e[t]]))
-	})) : x, [
+		...Object.fromEntries(w.map((t) => [`_proj_${t}`, e[t]]))
+	})) : S, [
 		Y,
-		x,
-		C
-	]), Z = p.useMemo(() => {
-		if (!(J <= 0)) return x[J - 1]?.[w];
+		S,
+		w
+	]), Z = m.useMemo(() => {
+		if (!(J <= 0)) return S[J - 1]?.[T];
 	}, [
 		J,
-		x,
-		w
-	]), rt = p.useMemo(() => Y && B ? ve(B) : void 0, [Y, B]), it = Y ? rt ?? ((e) => /* @__PURE__ */ h(o, {
+		S,
+		T
+	]), it = m.useMemo(() => Y && B ? ve(B) : void 0, [Y, B]), at = Y ? it ?? ((e) => /* @__PURE__ */ g(o, {
 		active: e.active,
 		label: e.label,
 		payload: l(e.payload)
-	})) : B ?? /* @__PURE__ */ h(o, {}), at = Y ? (e) => /* @__PURE__ */ h(i, {
+	})) : B ?? /* @__PURE__ */ g(o, {}), ot = Y ? (e) => /* @__PURE__ */ g(i, {
 		verticalAlign: e.verticalAlign,
 		fontSize: F,
 		ariaLabel: I,
 		payload: l(e.payload)
-	}) : /* @__PURE__ */ h(i, {
+	}) : /* @__PURE__ */ g(i, {
 		fontSize: F,
 		ariaLabel: I
-	}), Q = `area-gradient-${p.useId().replace(/:/g, "")}`, $ = `area-proj-${p.useId().replace(/:/g, "")}`;
-	return /* @__PURE__ */ h("div", {
-		ref: qe,
-		"data-layout": D,
-		"data-fill": O,
-		className: e(S({
-			layout: D,
-			fill: O
+	}), Q = `area-gradient-${m.useId().replace(/:/g, "")}`, $ = `area-proj-${m.useId().replace(/:/g, "")}`;
+	return /* @__PURE__ */ g("div", {
+		ref: Je,
+		"data-layout": O,
+		"data-fill": k,
+		className: e(C({
+			layout: O,
+			fill: k
 		}), t),
-		...Ke,
-		children: /* @__PURE__ */ h(n, {
+		...qe,
+		children: /* @__PURE__ */ g(n, {
 			ref: K,
-			config: m,
-			palette: b,
+			config: h,
+			palette: x,
 			className: "size-full [&_.recharts-label]:fill-foreground",
-			children: /* @__PURE__ */ g(fe, {
-				data: nt,
-				margin: tt,
+			children: /* @__PURE__ */ _(fe, {
+				data: rt,
+				margin: nt,
 				children: [
-					W && /* @__PURE__ */ h(be, {
-						dataKeys: C,
+					W && /* @__PURE__ */ g(be, {
+						dataKeys: w,
 						gradientId: Q,
 						colorFor: G
 					}),
-					Ee && /* @__PURE__ */ h(me, {
-						horizontal: Ie ?? !0,
-						vertical: z ?? !1,
-						strokeDasharray: Fe ? "3 3" : void 0
+					De && /* @__PURE__ */ g(me, {
+						horizontal: z ?? !0,
+						vertical: Le ?? !1,
+						strokeDasharray: Ie ? "3 3" : void 0
 					}),
-					/* @__PURE__ */ h(ge, {
-						dataKey: w,
+					/* @__PURE__ */ g(_e, {
+						dataKey: T,
 						type: "category",
-						hide: !ke,
+						hide: !Ae,
 						tickLine: !1,
 						axisLine: !1,
 						tickMargin: 8,
 						tickFormatter: X ? void 0 : L,
 						tick: X,
 						angle: R,
-						interval: Me,
+						interval: Ne,
 						textAnchor: ie(R),
 						height: q.height,
-						label: Ze
+						label: Qe
 					}),
-					/* @__PURE__ */ h(_e, {
+					/* @__PURE__ */ g(b, {
 						type: "number",
-						hide: !Ae,
+						hide: !je,
 						tickLine: !1,
 						axisLine: !1,
 						unit: xe,
-						tickFormatter: je,
-						tickCount: Ne,
-						domain: $e,
-						width: E ? 72 : void 0,
-						label: Qe
+						tickFormatter: Me,
+						tickCount: Pe,
+						domain: et,
+						width: se(S.length > 0, !!D),
+						label: $e
 					}),
-					De && /* @__PURE__ */ h(a, { content: it }),
-					Oe && /* @__PURE__ */ h(r, { content: at }),
-					Y && Z != null && /* @__PURE__ */ h(ye, {
+					Oe && /* @__PURE__ */ g(a, { content: at }),
+					ke && /* @__PURE__ */ g(r, { content: ot }),
+					Y && Z != null && /* @__PURE__ */ g(ye, {
 						projectionStart: P,
 						prevTick: Z,
 						clipId: $
 					}),
-					C.map((e) => {
-						let t = N?.[e], n = t?.showDots ?? M, r = t?.dotSize ?? Se, i = Ce ?? n, a = t?.showLabel ?? V, o = t?.labelPosition ?? Je;
-						return /* @__PURE__ */ h(_, {
-							type: t?.curveType ?? k ?? "monotone",
+					w.map((e) => {
+						let t = N?.[e], n = t?.showDots ?? Se, r = t?.dotSize ?? Ce, i = we ?? n, a = t?.showLabel ?? V, o = t?.labelPosition ?? Ye;
+						return /* @__PURE__ */ g(v, {
+							type: t?.curveType ?? A ?? "monotone",
 							dataKey: e,
 							stackId: U ? "a" : void 0,
 							stroke: G(e),
-							strokeWidth: t?.strokeWidth ?? A,
+							strokeWidth: t?.strokeWidth ?? j,
 							strokeDasharray: t?.dashed ? "5 5" : void 0,
 							fill: W ? `url(#${Q}-${s(e)})` : G(e),
-							fillOpacity: t?.fillOpacity ?? (W ? 1 : j),
+							fillOpacity: t?.fillOpacity ?? (W ? 1 : M),
 							dot: n ? { r } : !1,
 							activeDot: i ? { r: r + 2 } : !1,
-							connectNulls: we,
+							connectNulls: Te,
 							clipPath: Y ? `url(#${$}-actual)` : void 0,
 							...H,
-							children: a && /* @__PURE__ */ h(he, {
+							children: a && /* @__PURE__ */ g(y, {
 								dataKey: e,
 								position: o,
-								formatter: ce(He),
+								formatter: ce(Ue),
 								className: ne(o, { translucentSeries: !0 }),
 								fontSize: 12
 							})
 						}, e);
 					}),
-					Y && C.map((e) => {
+					Y && w.map((e) => {
 						let t = N?.[e];
-						return /* @__PURE__ */ h(_, {
-							type: t?.curveType ?? k ?? "monotone",
+						return /* @__PURE__ */ g(v, {
+							type: t?.curveType ?? A ?? "monotone",
 							dataKey: `_proj_${e}`,
 							name: e,
 							stackId: U ? "proj" : void 0,
 							stroke: G(e),
-							strokeWidth: t?.strokeWidth ?? A,
+							strokeWidth: t?.strokeWidth ?? j,
 							strokeDasharray: "5 5",
 							fill: W ? `url(#${Q}-${s(e)})` : G(e),
-							fillOpacity: t?.fillOpacity ?? (W ? 1 : j),
+							fillOpacity: t?.fillOpacity ?? (W ? 1 : M),
 							dot: !1,
 							activeDot: !1,
 							clipPath: `url(#${$}-projection)`,
@@ -243,19 +243,19 @@ var C = p.forwardRef(({ className: t, config: m, palette: b, data: x, dataKeys:
 							...H
 						}, `_proj_${e}`);
 					}),
-					Ye.map((e, t) => {
-						let n = f(e, x, C);
-						return n === void 0 ? null : /* @__PURE__ */ h(v, {
+					Xe.map((e, t) => {
+						let n = f(e, S, w);
+						return n === void 0 ? null : /* @__PURE__ */ g(he, {
 							y: n,
 							...re(e.label, e.labelPosition)
 						}, `${e.label ?? "ref"}-${t}`);
 					}),
-					Ue && /* @__PURE__ */ h(pe, {
-						dataKey: w,
+					We && /* @__PURE__ */ g(pe, {
+						dataKey: T,
 						tickFormatter: L,
 						...ee({
-							brushHeight: We,
-							brushAriaLabel: Ge
+							brushHeight: Ge,
+							brushAriaLabel: Ke
 						})
 					})
 				]
@@ -263,8 +263,8 @@ var C = p.forwardRef(({ className: t, config: m, palette: b, data: x, dataKeys:
 		})
 	});
 });
-C.displayName = "AreaChart";
+w.displayName = "AreaChart";
 //#endregion
-export { C as AreaChart, S as areaChartVariants };
+export { w as AreaChart, C as areaChartVariants };
 //# sourceMappingURL=area-chart.js.map

package/dist/components/ui/area-chart/area-chart.js.map CHANGED Viewed

	@@ -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 ChartLegendFontSize,\n type ChartLegendAriaLabelProps,\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 ChartLegendAriaLabelProps {\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 legendAriaLabel,\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 ariaLabel={legendAriaLabel}\n payload={\n dropProjectionPayload(\n lp.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )\n : <ChartLegendContent\n fontSize={legendFontSize}\n ariaLabel={legendAriaLabel}\n />;\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 ChartLegendAriaLabelProps,\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, resolveYAxisWidth } 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 ChartLegendAriaLabelProps {\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 legendAriaLabel,\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 ariaLabel={legendAriaLabel}\n payload={\n dropProjectionPayload(\n lp.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )\n : <ChartLegendContent\n fontSize={legendFontSize}\n ariaLabel={legendAriaLabel}\n />;\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={resolveYAxisWidth(data.length > 0, Boolean(yAxisLabel))}\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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"}