@acronis-platform/ui-react 4.0.0 → 5.0.0

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

@@ -1,282 +1,274 @@
-import { jsx as c, jsxs as V } from "react/jsx-runtime";
-import * as N from "react";
-import { cva as fr } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { FunnelChart as dr, Funnel as mr, Cell as vr, LabelList as O } from "recharts";
-import { cn as hr } from "../../../lib/utils.js";
-import { resolveAnimation as pr, resolveLabelFillClass as R } from "../chart/chart-format.js";
-import { ChartContainer as br, ChartTooltip as Lr, ChartTooltipContent as Cr, ChartLegend as Ar, ChartLegendContent as Nr } from "../chart/chart.js";
-const _r = fr("", {
-  variants: {
-    lastShape: {
-      triangle: "",
-      rectangle: ""
-    }
-  },
-  defaultVariants: {
-    lastShape: "triangle"
-  }
-}), D = {
-  right: "right",
-  left: "left",
-  inside: "center"
+"use client";
+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, ChartLegendContent as r, ChartTooltip as i, ChartTooltipContent as a, resolveChartColors as o } from "../chart/chart.js";
+import { resolveAnimation as s, resolveLabelFillClass as c } from "../chart/chart-format.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Cell as f, Funnel as p, FunnelChart as m, LabelList as h } from "recharts";
+//#region src/components/ui/funnel-chart/funnel-chart.tsx
+var g = t("", {
+	variants: { lastShape: {
+		triangle: "",
+		rectangle: ""
+	} },
+	defaultVariants: { lastShape: "triangle" }
+}), _ = {
+	right: "right",
+	left: "left",
+	inside: "center"
 };
-function Er(r) {
-  switch (r) {
-    case "right":
-      return "left";
-    case "left":
-      return "right";
-    case "inside":
-      return "right";
-  }
+function v(e) {
+	switch (e) {
+		case "right": return "left";
+		case "left": return "right";
+		case "inside": return "right";
+	}
 }
-const G = "__stageLabel", j = "__stageValueLabel", Tr = 45, $r = {
-  stroke: "var(--ui-border-on-surface-border-active)",
-  strokeWidth: 2
-}, W = 96, H = {
-  top: 8,
-  right: W,
-  bottom: 8,
-  left: 24
-}, Ir = "75%";
-function gr(r) {
-  return r.includes("-");
+var y = "__stageLabel", b = "__stageValueLabel", x = "__stageIndex", S = "var(--ui-border-on-surface-border-active)", C = 2, ee = "size-[120px]", w = 2, T = 2, E = 1, D = {
+	top: 4,
+	right: 8,
+	bottom: 4,
+	left: 8
+}, O = Object.freeze({
+	type: "sequential",
+	ramp: "blue"
+}), k = (e, t) => Math.hypot(t[0] - e[0], t[1] - e[1]);
+function A(e, t, n) {
+	let r = k(e, t);
+	return r === 0 ? e : [e[0] + (t[0] - e[0]) * n / r, e[1] + (t[1] - e[1]) * n / r];
 }
-function Fr(r) {
-  const { showLabels: e, labelPosition: t, labelFormat: o } = r;
-  return e && t === "right" && gr(o) ? Ir : void 0;
+var j = ([e, t]) => `${Number(e.toFixed(3))},${Number(t.toFixed(3))}`;
+function M(e, t) {
+	let n = e.length;
+	if (n < 3) return "";
+	let r = "";
+	for (let i = 0; i < n; i++) {
+		let a = typeof t == "number" ? t : t[i], o = e[(i - 1 + n) % n], s = e[i], c = e[(i + 1) % n], l = Math.max(0, Math.min(a, k(o, s) / 2, k(s, c) / 2)), u = A(s, o, l), d = A(s, c, l);
+		r += `${i === 0 ? "M" : " L"} ${j(u)}`, r += ` Q ${j(s)} ${j(d)}`;
+	}
+	return `${r} Z`;
 }
-function xr(r) {
-  const { showLabels: e, labelPosition: t, showValueLabels: o, valuePosition: u } = r;
-  return {
-    ...H,
-    left: (e ? t : void 0) === "left" || (o ? u : void 0) === "left" ? W : H.left
-  };
+function N(e) {
+	let { x: t, y: n, upperWidth: r, lowerWidth: i, height: a } = e, o = e.radius, s = e.topRadius ?? o ?? T, c = e.bottomRadius ?? o ?? E;
+	if (a <= 0 || r <= 0 && i <= 0) return "";
+	let l = t + r / 2, u = r <= 0 ? [[l, n]] : [[t, n], [t + r, n]], d = i <= 0 ? [[l, n + a]] : [[l + i / 2, n + a], [l - i / 2, n + a]], f = [...u.map(() => s), ...d.map(() => c)];
+	return M([...u, ...d], f);
 }
-const Mr = (r) => {
-  const e = typeof r == "number" ? r : Number(r);
-  return Number.isFinite(e) ? `${(e * 100).toFixed(1)}%` : String(r);
-};
-function U(r) {
-  const {
-    name: e,
-    value: t,
-    base: o,
-    format: u,
-    formatter: n,
-    percentFormatter: m = Mr
-  } = r, v = n ? n(t) : String(t), h = typeof t == "number" ? t : Number(t), l = o > 0 && Number.isFinite(h) ? m(h / o) : "";
-  switch (u) {
-    case "name":
-      return e;
-    case "value":
-      return v;
-    case "percent":
-      return l;
-    case "name-value":
-      return `${e}: ${v}`;
-    case "name-percent":
-      return l ? `${e}: ${l}` : e;
-    case "value-percent":
-      return l ? `${v} (${l})` : v;
-  }
+function P(e) {
+	let { x: t, y: n, upperWidth: r, lowerWidth: i, height: a, gap: o } = e;
+	if (o <= 0 || a <= o) return {
+		x: t,
+		y: n,
+		upperWidth: r,
+		lowerWidth: i,
+		height: a
+	};
+	let s = r + (i - r) * o / a;
+	return {
+		x: t + r / 2 - s / 2,
+		y: n + o,
+		upperWidth: s,
+		lowerWidth: i,
+		height: a - o
+	};
+}
+var F = 96, I = {
+	top: 8,
+	right: F,
+	bottom: 8,
+	left: 24
+}, L = "75%";
+function R(e) {
+	return e.includes("-");
+}
+function z(e) {
+	let { showLabels: t, labelPosition: n, labelFormat: r } = e;
+	return t && n === "right" && R(r) ? L : void 0;
 }
-function Pr(r, e, t) {
-  if (t <= 1) return r;
-  const o = 100 - (100 - Tr) * e / (t - 1);
-  return `color-mix(in oklab, ${r} ${o.toFixed(1)}%, var(--ui-background-surface-primary))`;
+function B(e) {
+	let { showLabels: t, labelPosition: n, showValueLabels: r, valuePosition: i } = e, a = t ? n : void 0, o = r ? i : void 0, s = a === "left" || o === "left";
+	return !s && a !== "right" && o !== "right" ? { ...D } : {
+		...I,
+		left: s ? F : I.left
+	};
 }
-const kr = N.forwardRef(
-  ({
-    className: r,
-    config: e,
-    palette: t,
-    data: o,
-    dataKey: u,
-    nameKey: n,
-    lastShape: m = "triangle",
-    reversed: v = !1,
-    showLabels: h = !0,
-    labelFormat: l = "name",
-    labelPosition: L = "right",
-    showValueLabels: _ = !1,
-    valuePosition: Y,
-    labelFill: C,
-    labelFormatter: E,
-    percentFormatter: T,
-    showLegend: z = !1,
-    legendPos: $ = "bottom",
-    colorMode: I = "palette",
-    gradientColor: g,
-    stageSettings: a,
-    showActiveShape: X = !1,
-    stroke: q,
-    strokeWidth: F,
-    funnelWidth: w,
-    margin: y,
-    showTooltip: J = !0,
-    tooltipContent: Q,
-    animate: Z,
-    animationDuration: K,
-    animationBegin: rr,
-    animationEasing: er,
-    ...tr
-  }, nr) => {
-    const or = pr({
-      animate: Z,
-      animationDuration: K,
-      animationBegin: rr,
-      animationEasing: er
-    }), A = N.useMemo(() => {
-      var k;
-      const i = o.filter(
-        (f) => {
-          var b;
-          return !((b = a == null ? void 0 : a[String(f[n])]) != null && b.hidden);
-        }
-      ), s = i.length ? String(i[0][n]) : void 0, p = g ?? (s === void 0 ? void 0 : ((k = a == null ? void 0 : a[s]) == null ? void 0 : k.color) ?? `var(--color-${s})`), cr = i.reduce((f, b) => {
-        const d = Number(b[u]);
-        return Number.isFinite(d) && d > f ? d : f;
-      }, 0);
-      return i.map((f, b) => {
-        var B;
-        const d = String(f[n]), ur = ((B = a == null ? void 0 : a[d]) == null ? void 0 : B.color) ?? (I === "gradient" && p ? Pr(p, b, i.length) : `var(--color-${d})`), S = {
-          name: d,
-          value: f[u],
-          base: cr,
-          formatter: E,
-          percentFormatter: T
-        };
-        return {
-          ...f,
-          fill: ur,
-          [G]: U({
-            ...S,
-            format: l
-          }),
-          [j]: U({
-            ...S,
-            format: "value"
-          })
-        };
-      });
-    }, [
-      I,
-      o,
-      u,
-      g,
-      l,
-      E,
-      n,
-      T,
-      a
-    ]), ar = N.useMemo(() => {
-      const i = /* @__PURE__ */ new Set();
-      return A.flatMap((s) => {
-        const p = String(s[n]);
-        return i.has(p) ? [] : (i.add(p), [
-          {
-            value: p,
-            dataKey: n,
-            type: "rect",
-            color: String(s.fill),
-            payload: s
-          }
-        ]);
-      });
-    }, [n, A]), x = Y ?? Er(L), M = D[L], P = D[x], ir = {
-      ...xr({
-        showLabels: h,
-        labelPosition: L,
-        showValueLabels: _,
-        valuePosition: x
-      }),
-      ...y
-    }, lr = w ?? Fr({ showLabels: h, labelPosition: L, labelFormat: l }), sr = q ?? (F != null ? "var(--ui-border-on-surface-border)" : void 0);
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        ref: nr,
-        "data-last-shape": m,
-        className: hr(_r({ lastShape: m }), r),
-        ...tr,
-        children: /* @__PURE__ */ c(br, { config: e, palette: t, className: "size-full", children: /* @__PURE__ */ V(dr, { margin: ir, children: [
-          J && /* @__PURE__ */ c(
-            Lr,
-            {
-              content: Q ?? /* @__PURE__ */ c(Cr, { nameKey: n, hideLabel: !0 })
-            }
-          ),
-          z && /* @__PURE__ */ c(
-            Ar,
-            {
-              verticalAlign: $,
-              content: () => /* @__PURE__ */ c(
-                Nr,
-                {
-                  payload: ar,
-                  verticalAlign: $,
-                  nameKey: n
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ V(
-            mr,
-            {
-              dataKey: u,
-              nameKey: n,
-              data: A,
-              lastShapeType: m ?? "triangle",
-              reversed: v,
-              width: lr,
-              stroke: sr,
-              strokeWidth: F,
-              activeShape: X ? $r : void 0,
-              ...or,
-              children: [
-                A.map((i, s) => (
-                  // Keyed by index, not the name: two stages could share a nameKey
-                  // value, which would collide as a React key. Same-named stages
-                  // intentionally share a color/config entry via `--color-<name>`.
-                  /* @__PURE__ */ c(vr, { fill: String(i.fill) }, s)
-                )),
-                h && /* @__PURE__ */ c(
-                  O,
-                  {
-                    position: M,
-                    dataKey: G,
-                    className: C ? void 0 : R(M),
-                    fill: C,
-                    stroke: "none"
-                  }
-                ),
-                _ && /* @__PURE__ */ c(
-                  O,
-                  {
-                    position: P,
-                    dataKey: j,
-                    className: C ? void 0 : R(P),
-                    fill: C,
-                    stroke: "none"
-                  }
-                )
-              ]
-            }
-          )
-        ] }) })
-      }
-    );
-  }
-);
-kr.displayName = "FunnelChart";
-export {
-  kr as FunnelChart,
-  xr as funnelChartLabelMargin,
-  Fr as funnelChartLabelReserve,
-  U as funnelChartLabelText,
-  Er as funnelChartOppositeSide,
-  Mr as funnelChartPercent,
-  _r as funnelChartVariants
+var V = (e) => {
+	let t = typeof e == "number" ? e : Number(e);
+	return Number.isFinite(t) ? `${(t * 100).toFixed(1)}%` : String(e);
 };
-//# sourceMappingURL=funnel-chart.js.map
+function H(e) {
+	let { name: t, value: n, base: r, format: i, formatter: a, percentFormatter: o = V } = e, s = a ? a(n) : String(n), c = typeof n == "number" ? n : Number(n), l = r > 0 && Number.isFinite(c) ? o(c / r) : "";
+	switch (i) {
+		case "name": return t;
+		case "value": return s;
+		case "percent": return l;
+		case "name-value": return `${t}: ${s}`;
+		case "name-percent": return l ? `${t}: ${l}` : t;
+		case "value-percent": return l ? `${s} (${l})` : s;
+	}
+}
+function U({ x: t = 0, y: n = 0, upperWidth: r = 0, lowerWidth: i = 0, height: a = 0, fill: o, stroke: s, strokeWidth: c, className: l, isActive: d, payload: f, showActiveShape: p, topStageIndex: m = 0 }) {
+	let h = N(P({
+		x: t,
+		y: n,
+		upperWidth: r,
+		lowerWidth: i,
+		height: a,
+		gap: f?.[x] === m ? 0 : w
+	}));
+	if (!h) return null;
+	let g = !!(d && p);
+	return /* @__PURE__ */ u("path", {
+		className: e("recharts-funnel-stage", l),
+		d: h,
+		fill: o,
+		stroke: g ? S : s,
+		strokeWidth: g ? C : c
+	});
+}
+var W = l.forwardRef(({ className: t, config: S, palette: C, data: w, dataKey: T, nameKey: E, lastShape: D = "triangle", reversed: k = !1, showLabels: A = !1, labelFormat: j = "name", labelPosition: M = "right", showValueLabels: N = !1, valuePosition: P, labelFill: F, labelFormatter: I, percentFormatter: L, showLegend: R = !0, legendValueFormatter: V, stageSettings: W, showActiveShape: G = !1, stroke: K, strokeWidth: q, funnelWidth: te, margin: ne, showTooltip: re = !0, tooltipContent: ie, animate: ae, animationDuration: oe, animationBegin: se, animationEasing: ce, ...le }, ue) => {
+	let de = s({
+		animate: ae,
+		animationDuration: oe,
+		animationBegin: se,
+		animationEasing: ce
+	}), J = l.useMemo(() => {
+		let e = w.filter((e) => !W?.[String(e[E])]?.hidden), t = e.reduce((e, t) => {
+			let n = Number(t[T]);
+			return Number.isFinite(n) && n > e ? n : e;
+		}, 0);
+		return e.map((e, n) => {
+			let r = String(e[E]), i = W?.[r]?.color ?? `var(--color-${r})`, a = {
+				name: r,
+				value: e[T],
+				base: t,
+				formatter: I,
+				percentFormatter: L
+			};
+			return {
+				...e,
+				fill: i,
+				[x]: n,
+				[y]: H({
+					...a,
+					format: j
+				}),
+				[b]: H({
+					...a,
+					format: "value"
+				})
+			};
+		});
+	}, [
+		w,
+		T,
+		j,
+		I,
+		E,
+		L,
+		W
+	]), Y = l.useMemo(() => R ? o(S, C ?? O) : null, [
+		R,
+		S,
+		C
+	]), fe = l.useMemo(() => {
+		if (!Y) return [];
+		let e = /* @__PURE__ */ new Set();
+		return J.flatMap((t) => {
+			let n = String(t[E]);
+			return e.has(n) ? [] : (e.add(n), [{
+				value: n,
+				dataKey: E,
+				type: "rect",
+				color: W?.[n]?.color ?? Y[n]?.color ?? String(t.fill),
+				payload: t
+			}]);
+		});
+	}, [
+		E,
+		J,
+		Y,
+		W
+	]), X = P ?? v(M), pe = A && M !== "inside" || N && X !== "inside", Z = _[M], Q = _[X], me = {
+		...B({
+			showLabels: A,
+			labelPosition: M,
+			showValueLabels: N,
+			valuePosition: X
+		}),
+		...ne
+	}, he = te ?? z({
+		showLabels: A,
+		labelPosition: M,
+		labelFormat: j
+	}), ge = K ?? (q == null ? "none" : "var(--ui-border-on-surface-border)"), $ = (e) => /* @__PURE__ */ u(U, {
+		...e,
+		showActiveShape: G,
+		topStageIndex: k ? J.length - 1 : 0
+	});
+	return /* @__PURE__ */ d("div", {
+		ref: ue,
+		"data-last-shape": D,
+		className: e("flex flex-row items-center gap-4", !R && "justify-center", g({ lastShape: D }), t),
+		...le,
+		children: [/* @__PURE__ */ u("div", {
+			className: pe ? "h-[120px] flex-1" : e(ee, "shrink-0"),
+			children: /* @__PURE__ */ u(n, {
+				config: S,
+				palette: C ?? O,
+				className: "size-full",
+				children: /* @__PURE__ */ d(m, {
+					margin: me,
+					children: [re && /* @__PURE__ */ u(i, { content: ie ?? /* @__PURE__ */ u(a, {
+						nameKey: E,
+						hideLabel: !0
+					}) }), /* @__PURE__ */ d(p, {
+						dataKey: T,
+						nameKey: E,
+						data: J,
+						lastShapeType: D ?? "triangle",
+						reversed: k,
+						width: he,
+						stroke: ge,
+						strokeWidth: q,
+						shape: $,
+						activeShape: $,
+						...de,
+						children: [
+							J.map((e, t) => /* @__PURE__ */ u(f, { fill: String(e.fill) }, t)),
+							A && /* @__PURE__ */ u(h, {
+								position: Z,
+								dataKey: y,
+								className: F ? void 0 : c(Z),
+								fill: F,
+								stroke: "none"
+							}),
+							N && /* @__PURE__ */ u(h, {
+								position: Q,
+								dataKey: b,
+								className: F ? void 0 : c(Q),
+								fill: F,
+								stroke: "none"
+							})
+						]
+					})]
+				})
+			})
+		}), R && Y && /* @__PURE__ */ u(r, {
+			variant: "list",
+			payload: fe,
+			config: Y,
+			nameKey: E,
+			valueKey: T,
+			valueFormatter: V,
+			valueClassName: "text-[var(--ui-text-on-surface-primary)]",
+			className: "min-w-0 flex-1"
+		})]
+	});
+});
+W.displayName = "FunnelChart";
+//#endregion
+export { O as FUNNEL_CHART_DEFAULT_PALETTE, W as FunnelChart, B as funnelChartLabelMargin, z as funnelChartLabelReserve, H as funnelChartLabelText, v as funnelChartOppositeSide, V as funnelChartPercent, P as funnelChartStageInset, N as funnelChartStagePath, g as funnelChartVariants };
+
+//# sourceMappingURL=funnel-chart.js.map