@acronis-platform/ui-react 5.4.1 → 5.4.2

package/dist/components/ui/composed-chart/composed-chart.js

@@ -2,157 +2,158 @@
 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, resolveAnimation as l, resolveAxisDomain as u, resolveBrushProps as d, resolveCartesianLabelPosition as ee, resolveCategoryRange as f, resolveChartReferenceValue as p, resolveLabelFillClass as te, resolveReferenceLineProps as ne, resolveRotatedTickAnchor as m, resolveXAxisHeight as re, resolveXAxisTitle as h, resolveYAxisTitle as g, toLabelFormatter as ie } from "../chart/chart-format.js";
-import * as ae from "react";
-import { Fragment as oe, jsx as _, jsxs as v } from "react/jsx-runtime";
-import { Area as se, Bar as ce, Brush as le, CartesianGrid as ue, ComposedChart as de, LabelList as fe, Line as pe, ReferenceArea as me, ReferenceLine as he, XAxis as y, YAxis as b } from "recharts";
+import { CHART_LABEL_MARGIN as c, resolveAnimation as l, resolveAxisDomain as u, resolveBrushProps as d, resolveCartesianLabelPosition as ee, resolveCategoryRange as f, resolveChartReferenceValue as p, resolveLabelFillClass as te, resolveReferenceLineProps as ne, resolveRotatedTickAnchor as re, resolveXAxisTickLabels as ie, resolveXAxisTitle as m, resolveYAxisTitle as h, toLabelFormatter as ae } from "../chart/chart-format.js";
+import { mergeXAxisLayoutMargin as oe, useXAxisLayout as se } from "../chart/use-x-axis-layout.js";
+import * as g from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Area as ce, Bar as le, Brush as ue, CartesianGrid as de, ComposedChart as fe, LabelList as pe, Line as me, ReferenceArea as he, ReferenceLine as ge, XAxis as b, YAxis as x } from "recharts";
 //#region src/components/ui/composed-chart/composed-chart.tsx
-var x = t("", {
+var _e = t("", {
 	variants: { orientation: {
 		vertical: "",
 		horizontal: ""
 	} },
 	defaultVariants: { orientation: "vertical" }
-}), ge = 100, _e = 50, S = "secondary", ve = {
+}), ve = 100, ye = 50, S = "secondary", be = {
 	top: 5,
 	right: 5,
 	bottom: 5,
 	left: 5
-}, ye = .85, be = { top: 16 }, C = ae.forwardRef(({ className: t, config: ae, palette: C, data: w, series: T, xKey: E, referenceLine: D, referenceArea: O, orientation: k = "vertical", xAxisLabel: xe, yAxisLabel: A, xUnit: Se, yUnit: Ce, curve: j = "monotone", barRadius: we = 4, barSize: Te, barGap: Ee, barCategoryGap: De, showBackground: Oe = !1, backgroundFill: ke = "var(--ui-background-surface-secondary)", showActiveBar: Ae = !1, fillOpacity: je = .3, strokeWidth: M, showDots: Me = !1, showActiveDots: Ne, connectNulls: Pe = !1, margin: N, showGrid: Fe = !0, showTooltip: Ie = !0, tooltipCursor: Le = !0, showLegend: Re = !0, legendPosition: P = "bottom", showXAxis: ze = !0, showYAxis: Be = !0, xTickFormatter: F, yTickFormatter: I, xAxisAngle: L, xAxisInterval: R, yAxisTickCount: z, yAxisDomain: Ve, yAxisOrientation: B, showSecondaryYAxis: V = !0, secondaryYAxisLabel: H, secondaryYUnit: U, secondaryYTickFormatter: W, secondaryYAxisTickCount: G, secondaryYAxisDomain: He, gridDashed: Ue, gridHorizontal: We, gridVertical: Ge, tooltipContent: Ke, animate: qe, animationDuration: Je, animationBegin: Ye, animationEasing: Xe, showLabels: K = !1, labelPosition: Ze, labelFormatter: Qe, showBrush: $e = !1, brushHeight: et, brushAriaLabel: tt, ...nt }, rt) => {
-	let q = l({
-		animate: qe,
-		animationDuration: Je,
-		animationBegin: Ye,
-		animationEasing: Xe
-	}), J = k === "horizontal", it = h(xe), Y = T.some((e) => e.yAxis === "secondary"), at = T.some((e) => e.yAxis !== "secondary"), X = Y && !at, ot = B ?? "left", st = ot === "left" ? "right" : "left", ct = g(A, J ? "left" : ot), lt = g(H, st), ut = h(H, "insideTop"), dt = u(Ve), ft = u(He), Z = (e) => {
+}, xe = .85, Se = { top: 16 }, C = g.forwardRef(({ className: t, config: C, palette: Ce, data: w, series: T, xKey: E, referenceLine: D, referenceArea: O, orientation: k = "vertical", xAxisLabel: A, yAxisLabel: j, xUnit: we, yUnit: Te, curve: M = "monotone", barRadius: Ee = 4, barSize: De, barGap: Oe, barCategoryGap: ke, showBackground: Ae = !1, backgroundFill: je = "var(--ui-background-surface-secondary)", showActiveBar: Me = !1, fillOpacity: Ne = .3, strokeWidth: N, showDots: Pe = !1, showActiveDots: Fe, connectNulls: Ie = !1, margin: P, showGrid: Le = !0, showTooltip: Re = !0, tooltipCursor: ze = !0, showLegend: Be = !0, legendPosition: F = "bottom", showXAxis: I = !0, showYAxis: L = !0, xTickFormatter: R, yTickFormatter: z, xAxisAngle: B, xAxisInterval: V, yAxisTickCount: H, yAxisDomain: Ve, yAxisOrientation: U, showSecondaryYAxis: W = !0, secondaryYAxisLabel: G, secondaryYUnit: He, secondaryYTickFormatter: Ue, secondaryYAxisTickCount: We, secondaryYAxisDomain: Ge, gridDashed: Ke, gridHorizontal: qe, gridVertical: Je, tooltipContent: Ye, animate: Xe, animationDuration: Ze, animationBegin: Qe, animationEasing: $e, showLabels: et = !1, labelPosition: tt, labelFormatter: nt, showBrush: rt = !1, brushHeight: it, brushAriaLabel: at, ...ot }, st) => {
+	let K = l({
+		animate: Xe,
+		animationDuration: Ze,
+		animationBegin: Qe,
+		animationEasing: $e
+	}), q = k === "horizontal", ct = m(A), J = T.some((e) => e.yAxis === "secondary"), lt = T.some((e) => e.yAxis !== "secondary"), Y = J && !lt, ut = U ?? "left", dt = ut === "left" ? "right" : "left", ft = h(j, q ? "left" : ut), pt = h(G, dt), mt = m(G, "insideTop"), ht = u(Ve), gt = u(Ge), X = (e) => {
 		let t = e === "secondary" ? S : void 0;
-		return J ? { xAxisId: t } : { yAxisId: t };
-	}, pt = X ? Z("secondary") : {}, mt = re(xe, L), ht = D ? Array.isArray(D) ? D : [D] : [], gt = (O ? Array.isArray(O) ? O : [O] : []).map((e) => ({
+		return q ? { xAxisId: t } : { yAxisId: t };
+	}, _t = Y ? X("secondary") : {}, vt = ie(q ? [] : w.map((e) => e[E]), R), yt = g.useRef(null), Z = se(yt, B, A, vt.join("\0")), bt = D ? Array.isArray(D) ? D : [D] : [], xt = (O ? Array.isArray(O) ? O : [O] : []).map((e) => ({
 		area: e,
 		range: f(e, w, E)
-	})).filter((e) => e.range !== void 0), _t = X ? "secondary" : "primary", vt = (e) => e.yAxis ?? "primary", yt = new Map(T.map((e) => [e.key, vt(e)])), bt = (e) => T.filter((t) => vt(t) === e).map((e) => e.key), xt = new Set(T.filter((e) => e.legendType === "none").map((e) => e.key)), Q = (e) => w[e]?.[E] ?? void 0, St = ht.map((e) => {
+	})).filter((e) => e.range !== void 0), St = Y ? "secondary" : "primary", Ct = (e) => e.yAxis ?? "primary", wt = new Map(T.map((e) => [e.key, Ct(e)])), Tt = (e) => T.filter((t) => Ct(t) === e).map((e) => e.key), Et = new Set(T.filter((e) => e.legendType === "none").map((e) => e.key)), Q = (e) => w[e]?.[E] ?? void 0, Dt = bt.map((e) => {
 		let t = e.category === void 0 ? void 0 : f({
 			from: e.category,
 			to: e.category
-		}, w, E), n = e.yAxis ?? (typeof e.average == "string" ? yt.get(e.average) ?? _t : _t), r = p(e, w, bt(n)), i = t ? Q(t[0]) : void 0;
+		}, w, E), n = e.yAxis ?? (typeof e.average == "string" ? wt.get(e.average) ?? St : St), r = p(e, w, Tt(n)), i = t ? Q(t[0]) : void 0;
 		return {
 			line: e,
 			lineAxis: n,
-			position: r === void 0 ? i === void 0 ? void 0 : J ? { y: i } : { x: i } : J ? { x: r } : { y: r },
-			isVerticalRule: r !== void 0 === J
+			position: r === void 0 ? i === void 0 ? void 0 : q ? { y: i } : { x: i } : q ? { x: r } : { y: r },
+			isVerticalRule: r !== void 0 === q
 		};
-	}).filter((e) => e.position !== void 0), Ct = K ? c : void 0, wt = St.some((e) => e.line.label && e.isVerticalRule) ? be : void 0, Tt = N || Ct || wt ? {
-		...N ? ve : {},
-		...wt,
-		...Ct,
-		...N
-	} : void 0, $ = /* @__PURE__ */ new Map();
+	}).filter((e) => e.position !== void 0), Ot = et ? c : void 0, kt = Dt.some((e) => e.line.label && e.isVerticalRule) ? Se : void 0, At = P || Ot || kt ? {
+		...P ? be : {},
+		...kt,
+		...Ot,
+		...P
+	} : void 0, jt = oe(At, Z.margin), $ = /* @__PURE__ */ new Map();
 	T.forEach((e, t) => {
 		e.stackId && e.type !== "line" && $.set(`${e.type}-${e.stackId}`, t);
 	});
-	let Et = () => /* @__PURE__ */ v(oe, { children: [
-		/* @__PURE__ */ _(y, {
+	let Mt = () => /* @__PURE__ */ y(_, { children: [
+		/* @__PURE__ */ v(b, {
 			type: "number",
-			hide: !ze || X,
+			hide: !I || Y,
 			tickLine: !1,
 			axisLine: !1,
-			unit: Se,
-			tickFormatter: F,
-			angle: L,
-			interval: R,
-			textAnchor: m(L),
-			tickCount: z,
-			domain: dt,
-			height: mt,
-			label: it
+			unit: we,
+			tickFormatter: R,
+			angle: B,
+			interval: V,
+			textAnchor: re(B),
+			tickCount: H,
+			domain: ht,
+			height: Z.height,
+			label: ct
 		}),
-		/* @__PURE__ */ _(b, {
+		/* @__PURE__ */ v(x, {
 			dataKey: E,
 			type: "category",
-			hide: !Be,
+			hide: !L,
 			tickLine: !1,
 			axisLine: !1,
-			tickFormatter: I,
-			width: A ? 96 : 80,
-			label: ct
+			tickFormatter: z,
+			width: j ? 96 : 80,
+			label: ft
 		}),
-		Y && /* @__PURE__ */ _(y, {
+		J && /* @__PURE__ */ v(b, {
 			xAxisId: S,
 			type: "number",
-			hide: !V,
+			hide: !W,
 			orientation: "top",
 			tickLine: !1,
 			axisLine: !1,
-			unit: U,
-			tickFormatter: W,
-			tickCount: G,
-			domain: ft,
-			label: ut
+			unit: He,
+			tickFormatter: Ue,
+			tickCount: We,
+			domain: gt,
+			label: mt
 		})
-	] }), Dt = () => /* @__PURE__ */ v(oe, { children: [
-		/* @__PURE__ */ _(y, {
+	] }), Nt = () => /* @__PURE__ */ y(_, { children: [
+		/* @__PURE__ */ v(b, {
 			dataKey: E,
 			type: "category",
-			hide: !ze,
+			hide: !I,
 			tickLine: !1,
 			axisLine: !1,
 			tickMargin: 8,
-			tickFormatter: F,
-			angle: L,
-			interval: R,
-			textAnchor: m(L),
-			height: mt,
-			label: it
+			tickFormatter: R,
+			angle: B,
+			interval: V,
+			textAnchor: re(B),
+			height: Z.height,
+			label: ct
 		}),
-		/* @__PURE__ */ _(b, {
+		/* @__PURE__ */ v(x, {
 			type: "number",
-			hide: !Be || X,
-			...B ? { orientation: B } : {},
+			hide: !L || Y,
+			...U ? { orientation: U } : {},
 			tickLine: !1,
 			axisLine: !1,
-			unit: Ce,
-			tickFormatter: I,
-			tickCount: z,
-			domain: dt,
-			width: A ? 72 : void 0,
-			label: ct
+			unit: Te,
+			tickFormatter: z,
+			tickCount: H,
+			domain: ht,
+			width: j ? 72 : void 0,
+			label: ft
 		}),
-		Y && /* @__PURE__ */ _(b, {
+		J && /* @__PURE__ */ v(x, {
 			yAxisId: S,
 			type: "number",
-			hide: !V,
-			orientation: st,
+			hide: !W,
+			orientation: dt,
 			tickLine: !1,
 			axisLine: !1,
-			unit: U,
-			tickFormatter: W,
-			tickCount: G,
-			domain: ft,
-			width: H ? 72 : void 0,
-			label: lt
+			unit: He,
+			tickFormatter: Ue,
+			tickCount: We,
+			domain: gt,
+			width: G ? 72 : void 0,
+			label: pt
 		})
-	] }), Ot = xt.size > 0 ? (e) => /* @__PURE__ */ _(i, {
-		verticalAlign: P,
-		payload: e.payload?.filter((e) => !xt.has(String(e.dataKey)))
-	}) : /* @__PURE__ */ _(i, { verticalAlign: P }), kt = (e, t) => {
-		let n = e.color ?? `var(--color-${s(e.key)})`, r = ge + t, i = Z(e.yAxis), a = e.stackId && e.type !== "line" ? `${e.type}-${e.stackId}` : void 0, o = e.fillOpacity ?? je, c = e.connectNulls ?? Pe, l = e.showDots ?? Me, u = e.showActiveDots ?? Ne, d = e.legendType ? { legendType: e.legendType } : {}, f = ee({
-			labelPosition: Ze,
+	] }), Pt = Et.size > 0 ? (e) => /* @__PURE__ */ v(i, {
+		verticalAlign: F,
+		payload: e.payload?.filter((e) => !Et.has(String(e.dataKey)))
+	}) : /* @__PURE__ */ v(i, { verticalAlign: F }), Ft = (e, t) => {
+		let n = e.color ?? `var(--color-${s(e.key)})`, r = ve + t, i = X(e.yAxis), a = e.stackId && e.type !== "line" ? `${e.type}-${e.stackId}` : void 0, o = e.fillOpacity ?? Ne, c = e.connectNulls ?? Ie, l = e.showDots ?? Pe, u = e.showActiveDots ?? Fe, d = e.legendType ? { legendType: e.legendType } : {}, f = ee({
+			labelPosition: tt,
 			isStacked: a !== void 0,
-			growingEnd: J ? "right" : "top"
-		}), p = K ? /* @__PURE__ */ _(fe, {
+			growingEnd: q ? "right" : "top"
+		}), p = et ? /* @__PURE__ */ v(pe, {
 			dataKey: e.key,
 			position: f,
-			formatter: ie(Qe),
+			formatter: ae(nt),
 			className: te(f, { translucentSeries: e.type === "area" }),
 			fontSize: 12
 		}) : null;
 		if (e.type === "bar") {
-			let o = e.barRadius ?? we, s = a === void 0 || $.get(a) === t, c = e.showBackground ?? Oe, l = e.showActiveBar ?? Ae;
-			return /* @__PURE__ */ _(ce, {
+			let o = e.barRadius ?? Ee, s = a === void 0 || $.get(a) === t, c = e.showBackground ?? Ae, l = e.showActiveBar ?? Me;
+			return /* @__PURE__ */ v(le, {
 				dataKey: e.key,
 				...i,
 				fill: n,
-				radius: o > 0 && s ? J ? [
+				radius: o > 0 && s ? q ? [
 					0,
 					o,
 					o,
@@ -172,17 +173,17 @@ var x = t("", {
 					strokeDasharray: e.strokeDasharray,
 					...e.strokeWidth === void 0 ? {} : { strokeWidth: e.strokeWidth }
 				},
-				...c ? { background: { fill: ke } } : {},
-				...l ? { activeBar: { fillOpacity: ye } } : {},
+				...c ? { background: { fill: je } } : {},
+				...l ? { activeBar: { fillOpacity: xe } } : {},
 				...d,
-				...q,
+				...K,
 				children: p
 			}, e.key);
 		}
 		if (e.type === "area") {
-			let t = e.strokeWidth ?? M, s = t === void 0 ? {} : { strokeWidth: t };
-			return /* @__PURE__ */ _(se, {
-				type: e.curve ?? j,
+			let t = e.strokeWidth ?? N, s = t === void 0 ? {} : { strokeWidth: t };
+			return /* @__PURE__ */ v(ce, {
+				type: e.curve ?? M,
 				dataKey: e.key,
 				...i,
 				stroke: n,
@@ -196,30 +197,30 @@ var x = t("", {
 				...u === void 0 ? {} : { activeDot: u ? { r: 5 } : !1 },
 				connectNulls: c,
 				...d,
-				...q,
+				...K,
 				children: p
 			}, e.key);
 		}
-		return /* @__PURE__ */ _(pe, {
-			type: e.curve ?? j,
+		return /* @__PURE__ */ v(me, {
+			type: e.curve ?? M,
 			dataKey: e.key,
 			...i,
 			stroke: n,
-			strokeWidth: e.strokeWidth ?? M ?? 2,
+			strokeWidth: e.strokeWidth ?? N ?? 2,
 			dot: l ? { r: 3 } : !1,
 			zIndex: r,
 			...e.strokeDasharray === void 0 ? {} : { strokeDasharray: e.strokeDasharray },
 			...u === void 0 ? {} : { activeDot: u ? { r: 5 } : !1 },
 			connectNulls: c,
 			...d,
-			...q,
+			...K,
 			children: p
 		}, e.key);
-	}, At = ({ area: e, range: t }, n) => {
+	}, It = ({ area: e, range: t }, n) => {
 		let [r, i] = t;
-		return /* @__PURE__ */ _(me, {
-			...pt,
-			...J ? {
+		return /* @__PURE__ */ v(he, {
+			..._t,
+			...q ? {
 				y1: Q(r),
 				y2: Q(i)
 			} : {
@@ -228,7 +229,7 @@ var x = t("", {
 			},
 			fill: "var(--ui-background-surface-secondary)",
 			fillOpacity: .6,
-			zIndex: _e,
+			zIndex: ye,
 			ifOverflow: "extendDomain",
 			label: e.label ? {
 				value: e.label,
@@ -237,52 +238,53 @@ var x = t("", {
 				fontSize: 12
 			} : void 0
 		}, `${e.label ?? "area"}-${n}`);
-	}, jt = ({ line: e, lineAxis: t, position: n, isVerticalRule: r }, i) => /* @__PURE__ */ _(he, {
-		...t === "secondary" && Y ? Z("secondary") : {},
+	}, Lt = ({ line: e, lineAxis: t, position: n, isVerticalRule: r }, i) => /* @__PURE__ */ v(ge, {
+		...t === "secondary" && J ? X("secondary") : {},
 		...n,
 		...ne(e.label, e.labelPosition ?? (r ? "top" : "insideTopRight"))
 	}, `${e.label ?? "ref"}-${i}`);
-	return /* @__PURE__ */ _("div", {
-		ref: rt,
+	return /* @__PURE__ */ v("div", {
+		ref: st,
 		"data-orientation": k,
-		className: e(x({ orientation: k }), t),
-		...nt,
-		children: /* @__PURE__ */ _(n, {
-			config: ae,
-			palette: C,
+		className: e(_e({ orientation: k }), t),
+		...ot,
+		children: /* @__PURE__ */ v(n, {
+			ref: yt,
+			config: C,
+			palette: Ce,
 			className: "size-full [&_.recharts-label]:fill-foreground",
-			children: /* @__PURE__ */ v(de, {
+			children: /* @__PURE__ */ y(fe, {
 				data: w,
-				layout: J ? "vertical" : "horizontal",
-				barSize: Te,
-				barGap: Ee,
-				barCategoryGap: De,
-				margin: Tt,
+				layout: q ? "vertical" : "horizontal",
+				barSize: De,
+				barGap: Oe,
+				barCategoryGap: ke,
+				margin: jt,
 				children: [
-					Fe && /* @__PURE__ */ _(ue, {
-						...pt,
-						horizontal: We ?? !J,
-						vertical: Ge ?? J,
-						strokeDasharray: Ue ? "3 3" : void 0
+					Le && /* @__PURE__ */ v(de, {
+						..._t,
+						horizontal: qe ?? !q,
+						vertical: Je ?? q,
+						strokeDasharray: Ke ? "3 3" : void 0
 					}),
-					J ? Et() : Dt(),
-					Ie && /* @__PURE__ */ _(a, {
-						...Le ? {} : { cursor: !1 },
-						content: Ke ?? /* @__PURE__ */ _(o, {})
+					q ? Mt() : Nt(),
+					Re && /* @__PURE__ */ v(a, {
+						...ze ? {} : { cursor: !1 },
+						content: Ye ?? /* @__PURE__ */ v(o, {})
 					}),
-					Re && /* @__PURE__ */ _(r, {
-						verticalAlign: P,
-						content: Ot
+					Be && /* @__PURE__ */ v(r, {
+						verticalAlign: F,
+						content: Pt
 					}),
-					T.map(kt),
-					gt.map(At),
-					St.map(jt),
-					$e && /* @__PURE__ */ _(le, {
+					T.map(Ft),
+					xt.map(It),
+					Dt.map(Lt),
+					rt && /* @__PURE__ */ v(ue, {
 						dataKey: E,
-						tickFormatter: J ? I : F,
+						tickFormatter: q ? z : R,
 						...d({
-							brushHeight: et,
-							brushAriaLabel: tt
+							brushHeight: it,
+							brushAriaLabel: at
 						})
 					})
 				]
@@ -292,6 +294,6 @@ var x = t("", {
 });
 C.displayName = "ComposedChart";
 //#endregion
-export { C as ComposedChart, x as composedChartVariants };
+export { C as ComposedChart, _e as composedChartVariants };
 
 //# sourceMappingURL=composed-chart.js.map