@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/radial-bar-chart/radial-bar-chart.js

@@ -1,377 +1,277 @@
-import { jsx as o, jsxs as S, Fragment as ie } from "react/jsx-runtime";
-import * as L from "react";
-import { RadialBarChart as ce, PolarGrid as se, PolarAngleAxis as ue, RadialBar as A, Cell as me, LabelList as de, Label as fe } from "recharts";
-import { cn as he } from "../../../lib/utils.js";
-import { resolveAnimation as ge, CHART_LABEL_FONT_SIZE as pe, resolveLabelFillClass as Ce } from "../chart/chart-format.js";
-import { ChartLegendContent as j, ChartContainer as xe, ChartTooltip as ve, ChartLegend as be, ChartTooltipContent as T } from "../chart/chart.js";
-function z({
-  centerLabel: a
-}) {
-  return /* @__PURE__ */ o(
-    fe,
-    {
-      content: ({ viewBox: r }) => {
-        if (!r || !("cx" in r)) return null;
-        const { cx: e = 0, cy: t = 0 } = r, n = a.value != null, l = a.label != null, i = n && l;
-        return /* @__PURE__ */ S("g", { children: [
-          n && /* @__PURE__ */ o(
-            "text",
-            {
-              x: e,
-              y: i ? t - 10 : t,
-              textAnchor: "middle",
-              dominantBaseline: "central",
-              className: "fill-foreground text-2xl font-semibold",
-              children: a.value
-            }
-          ),
-          l && /* @__PURE__ */ o(
-            "text",
-            {
-              x: e,
-              y: i ? t + 13 : t,
-              textAnchor: "middle",
-              dominantBaseline: "central",
-              className: "fill-muted-foreground text-sm",
-              children: a.label
-            }
-          )
-        ] });
-      }
-    }
-  );
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { CHART_DEFAULT_PALETTE as t } from "../chart/chart-palette.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 { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Cell as p, Label as m, LabelList as h, PolarAngleAxis as g, PolarGrid as _, RadialBar as v, RadialBarChart as y } from "recharts";
+//#region src/components/ui/radial-bar-chart/radial-bar-chart.tsx
+function b({ centerLabel: e }) {
+	return /* @__PURE__ */ d(m, { content: ({ viewBox: t }) => {
+		if (!t || !("cx" in t)) return null;
+		let { cx: n = 0, cy: r = 0 } = t, i = e.value != null, a = e.label != null, o = i && a;
+		return /* @__PURE__ */ f("g", { children: [i && /* @__PURE__ */ d("text", {
+			x: n,
+			y: o ? r - 10 : r,
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			className: "fill-foreground text-2xl font-semibold",
+			children: e.value
+		}), a && /* @__PURE__ */ d("text", {
+			x: n,
+			y: o ? r + 13 : r,
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			className: "fill-muted-foreground text-sm",
+			children: e.label
+		})] });
+	} });
 }
-function Se(a) {
-  const { format: r, name: e, value: t, formatter: n } = a;
-  if (t == null) return "";
-  const l = n ? n(t) : String(t);
-  return r === "name-value" && e != null ? `${e}: ${l}` : l;
+function x(e) {
+	let { format: t, name: n, value: r, formatter: i } = e;
+	if (r == null) return "";
+	let a = i ? i(r) : String(r);
+	return t === "name-value" && n != null ? `${n}: ${a}` : a;
 }
-const Be = 3;
-function Ne(a) {
-  const { value: r, domain: e, segments: t, sweep: n, closed: l } = a, i = l ? t : t - 1, c = i > 0 ? Math.min(Math.max(a.gap, 0), n / (2 * i)) : 0, s = (n - c * i) / t, [u, d] = e, C = d - u;
-  let v = (C > 0 ? Math.min(Math.max((r - u) / C, 0), 1) : 0) * s * t;
-  const m = [];
-  for (let f = 0; f < t; f++) {
-    const h = Math.min(Math.max(v, 0), s);
-    v -= h, m.push({ key: `seg-${f}-value`, degrees: h, kind: "value" }), m.push({
-      key: `seg-${f}-track`,
-      degrees: s - h,
-      kind: "track"
-    }), c > 0 && (l || f < t - 1) && m.push({ key: `seg-${f}-gap`, degrees: c, kind: "gap" });
-  }
-  return m;
+var S = 3;
+function C(e) {
+	let { value: t, domain: n, segments: r, sweep: i, closed: a } = e, o = a ? r : r - 1, s = o > 0 ? Math.min(Math.max(e.gap, 0), i / (2 * o)) : 0, c = (i - s * o) / r, [l, u] = n, d = u - l, f = (d > 0 ? Math.min(Math.max((t - l) / d, 0), 1) : 0) * c * r, p = [];
+	for (let e = 0; e < r; e++) {
+		let t = Math.min(Math.max(f, 0), c);
+		f -= t, p.push({
+			key: `seg-${e}-value`,
+			degrees: t,
+			kind: "value"
+		}), p.push({
+			key: `seg-${e}-track`,
+			degrees: c - t,
+			kind: "track"
+		}), s > 0 && (a || e < r - 1) && p.push({
+			key: `seg-${e}-gap`,
+			degrees: s,
+			kind: "gap"
+		});
+	}
+	return p;
 }
-function ke(a, r) {
-  return a === "gap" ? "transparent" : a === "track" ? "var(--ui-background-surface-secondary)" : `var(--color-${r})`;
+function w(e, t) {
+	return e === "gap" ? "transparent" : e === "track" ? "var(--ui-border-on-status-neutral)" : `var(--color-${t})`;
 }
-function $e(a) {
-  var u;
-  const { config: r, row: e, nameKey: t, dataKey: n, domainMax: l } = a, i = String(e[t]), c = e[n], s = typeof c == "number" ? c.toLocaleString() : String(c ?? "");
-  return {
-    colorName: i,
-    label: ((u = r[i]) == null ? void 0 : u.label) ?? i,
-    // The gauge's scale is the other half of the reading, so a known maximum
-    // comes along: "29 / 38", not a bare "29".
-    valueText: l == null ? s : `${s} / ${l.toLocaleString()}`
-  };
+function T(e) {
+	let { config: t, row: n, nameKey: r, dataKey: i, domainMax: a } = e, o = String(n[r]), s = n[i], c = typeof s == "number" ? s.toLocaleString() : String(s ?? "");
+	return {
+		colorName: o,
+		label: t[o]?.label ?? o,
+		valueText: a == null ? c : `${c} / ${a.toLocaleString()}`
+	};
 }
-function Le({
-  active: a,
-  payload: r,
-  ...e
-}) {
-  const { colorName: t, label: n, valueText: l } = $e(e);
-  return /* @__PURE__ */ o(
-    T,
-    {
-      active: a,
-      payload: r == null ? void 0 : r.slice(0, 1),
-      hideLabel: !0,
-      formatter: () => /* @__PURE__ */ S(ie, { children: [
-        /* @__PURE__ */ o(
-          "div",
-          {
-            className: "h-2.5 w-2.5 shrink-0 rounded-full",
-            style: { backgroundColor: `var(--color-${t})` }
-          }
-        ),
-        /* @__PURE__ */ S("div", { className: "flex flex-1 items-center justify-between gap-2 leading-none", children: [
-          /* @__PURE__ */ o("span", { className: "text-muted-foreground", children: n }),
-          /* @__PURE__ */ o("span", { className: "font-medium tabular-nums text-foreground", children: l })
-        ] })
-      ] })
-    }
-  );
+function E({ active: e, payload: t, ...n }) {
+	let { colorName: r, label: i, valueText: o } = T(n);
+	return /* @__PURE__ */ d(a, {
+		active: e,
+		payload: t?.slice(0, 1),
+		hideLabel: !0,
+		formatter: () => /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+			className: "h-2.5 w-2.5 shrink-0 rounded-full",
+			style: { backgroundColor: `var(--color-${r})` }
+		}), /* @__PURE__ */ f("div", {
+			className: "flex flex-1 items-center justify-between gap-2 leading-none",
+			children: [/* @__PURE__ */ d("span", {
+				className: "text-muted-foreground",
+				children: i
+			}), /* @__PURE__ */ d("span", {
+				className: "font-medium tabular-nums text-foreground",
+				children: o
+			})]
+		})] })
+	});
 }
-function Te(a, r) {
-  const e = a == null ? void 0 : a[r];
-  return e == null ? "" : String(e);
+function D(e, t) {
+	let n = e?.[t];
+	return n == null ? "" : String(n);
 }
-function Me(a) {
-  var c;
-  const { key: r, row: e, isMultiMetric: t, nameKey: n, config: l } = a;
-  if (!t) return e == null ? void 0 : e[n];
-  const i = (c = l[r]) == null ? void 0 : c.label;
-  return typeof i == "string" || typeof i == "number" ? i : r;
+function O(e) {
+	let { key: t, row: n, isMultiMetric: r, nameKey: i, config: a } = e;
+	if (!r) return n?.[i];
+	let o = a[t]?.label;
+	return typeof o == "string" || typeof o == "number" ? o : t;
 }
-function Re({
-  seriesKeys: a,
-  seriesData: r,
-  isMultiMetric: e,
-  config: t,
-  nameKey: n,
-  showBackground: l,
-  cornerRadius: i,
-  minPointSize: c,
-  animation: s,
-  centerLabel: u,
-  showLabels: d,
-  labelPosition: C,
-  labelFormat: B,
-  labelFormatter: v
-}) {
-  return a.map((m, f) => /* @__PURE__ */ S(
-    A,
-    {
-      dataKey: m,
-      fill: e ? `var(--color-${m})` : void 0,
-      background: l,
-      cornerRadius: i,
-      minPointSize: c,
-      ...s,
-      children: [
-        !e && r.map((h, b) => (
-          // Keyed by index, not the name: two arcs could share a nameKey
-          // value, which would collide as a React key. Same-named arcs
-          // intentionally share a color/config entry via `--color-<name>`.
-          /* @__PURE__ */ o(me, { fill: `var(--color-${h[n]})` }, b)
-        )),
-        f === 0 && u && /* @__PURE__ */ o(z, { centerLabel: u }),
-        d && /* @__PURE__ */ o(
-          de,
-          {
-            valueAccessor: (h) => Se({
-              format: B,
-              name: Me({
-                key: m,
-                row: h.payload,
-                isMultiMetric: e,
-                nameKey: n,
-                config: t
-              }),
-              value: h.value,
-              formatter: v
-            }),
-            position: C,
-            className: Ce(C),
-            fontSize: pe
-          }
-        )
-      ]
-    },
-    m
-  ));
+function ee({ seriesKeys: e, seriesData: t, isMultiMetric: n, config: r, nameKey: i, showBackground: a, cornerRadius: o, minPointSize: s, animation: l, centerLabel: u, showLabels: m, labelPosition: g, labelFormat: _, labelFormatter: y }) {
+	return e.map((e, S) => /* @__PURE__ */ f(v, {
+		dataKey: e,
+		fill: n ? `var(--color-${e})` : void 0,
+		background: a ? { fill: "var(--ui-border-on-status-neutral)" } : !1,
+		cornerRadius: o,
+		minPointSize: s,
+		...l,
+		children: [
+			!n && t.map((e, t) => /* @__PURE__ */ d(p, { fill: `var(--color-${e[i]})` }, t)),
+			S === 0 && u && /* @__PURE__ */ d(b, { centerLabel: u }),
+			m && /* @__PURE__ */ d(h, {
+				valueAccessor: (t) => x({
+					format: _,
+					name: O({
+						key: e,
+						row: t.payload,
+						isMultiMetric: n,
+						nameKey: i,
+						config: r
+					}),
+					value: t.value,
+					formatter: y
+				}),
+				position: g,
+				className: c(g),
+				fontSize: 12
+			})
+		]
+	}, e));
 }
-function Ee({
-  ringSegments: a,
-  row: r,
-  nameKey: e,
-  cornerRadius: t,
-  animation: n,
-  centerLabel: l
-}) {
-  return a.map((i, c) => /* @__PURE__ */ o(
-    A,
-    {
-      dataKey: i.key,
-      stackId: "segments",
-      name: String(r[e]),
-      fill: ke(i.kind, r[e]),
-      cornerRadius: t,
-      ...n,
-      children: c === 0 && l && /* @__PURE__ */ o(z, { centerLabel: l })
-    },
-    i.key
-  ));
+function te({ ringSegments: e, row: t, nameKey: n, cornerRadius: r, animation: i, centerLabel: a }) {
+	return e.map((e, o) => /* @__PURE__ */ d(v, {
+		dataKey: e.key,
+		stackId: "segments",
+		name: String(t[n]),
+		fill: w(e.kind, t[n]),
+		cornerRadius: r,
+		...i,
+		children: o === 0 && a && /* @__PURE__ */ d(b, { centerLabel: a })
+	}, e.key));
 }
-const Fe = L.forwardRef(
-  ({
-    className: a,
-    config: r,
-    data: e,
-    dataKey: t,
-    dataKeys: n,
-    nameKey: l,
-    innerRadius: i = 30,
-    outerRadius: c = 110,
-    startAngle: s = 90,
-    endAngle: u = -270,
-    valueDomain: d,
-    cornerRadius: C = 4,
-    cx: B,
-    cy: v,
-    barSize: m,
-    barGap: f,
-    barCategoryGap: h,
-    minAngle: b,
-    margin: G,
-    segments: N,
-    segmentGap: I = Be,
-    showBackground: O = !0,
-    showPolarGrid: V = !1,
-    centerLabel: M,
-    showTooltip: H = !0,
-    showLegend: X = !0,
-    tooltipContent: Y,
-    animate: Z,
-    animationDuration: q,
-    animationBegin: w,
-    animationEasing: J,
-    showLabels: Q = !1,
-    labelPosition: U,
-    labelFormat: W = "value",
-    labelFormatter: D,
-    ...y
-  }, K) => {
-    const R = ge({
-      animate: Z,
-      animationDuration: q,
-      animationBegin: w,
-      animationEasing: J
-    }), ee = U ?? "insideStart", x = !!(n != null && n.length), p = N != null && N > 1 && !x && e.length === 1 && typeof e[0][t] == "number", te = x ? n : [t], E = L.useMemo(
-      () => n != null && n.length ? n : [t],
-      [n, t]
-    ), k = Math.abs(u - s), F = p ? Ne({
-      value: e[0][t],
-      // Without a domain a lone value is its own maximum, so the ring fills.
-      domain: d ?? [0, e[0][t]],
-      segments: N,
-      gap: I,
-      sweep: k,
-      closed: k >= 360
-    }) : [], P = x ? e : e.map((g) => ({
-      ...g,
-      fill: `var(--color-${g[l]})`
-    })), re = p ? [
-      {
-        ...e[0],
-        ...Object.fromEntries(F.map((g) => [g.key, g.degrees]))
-      }
-    ] : P, ne = b === void 0 ? void 0 : u < s ? -b : b, ae = L.useCallback(
-      () => /* @__PURE__ */ o(
-        j,
-        {
-          payload: E.map((g) => ({
-            value: g,
-            dataKey: g,
-            color: `var(--color-${g})`,
-            type: "rect"
-          }))
-        }
-      ),
-      [E]
-    ), le = x ? ae : /* @__PURE__ */ o(j, { nameKey: l }), oe = () => p ? /* @__PURE__ */ o(
-      Le,
-      {
-        config: r,
-        row: e[0],
-        nameKey: l,
-        dataKey: t,
-        domainMax: d == null ? void 0 : d[1]
-      }
-    ) : x ? /* @__PURE__ */ o(
-      T,
-      {
-        labelFormatter: (g, $) => {
-          var _;
-          return Te(
-            (_ = $ == null ? void 0 : $[0]) == null ? void 0 : _.payload,
-            l
-          );
-        }
-      }
-    ) : /* @__PURE__ */ o(T, { nameKey: l, hideLabel: !0 });
-    return /* @__PURE__ */ o("div", { ref: K, className: he(a), ...y, children: /* @__PURE__ */ o(xe, { config: r, className: "size-full", children: /* @__PURE__ */ S(
-      ce,
-      {
-        data: re,
-        dataKey: x || p ? void 0 : t,
-        cx: B,
-        cy: v,
-        innerRadius: i,
-        outerRadius: c,
-        startAngle: s,
-        endAngle: u,
-        barSize: m,
-        barGap: f,
-        barCategoryGap: h,
-        margin: G,
-        children: [
-          V && /* @__PURE__ */ o(se, { gridType: "circle", radialLines: !1 }),
-          (d || p) && // The angular scale itself, not chrome: it maps a value onto a
-          // fraction of the sweep. Ticks/axis line stay off — the arcs and
-          // the optional center readout are the readout. A segmented ring is
-          // already measured in degrees, so its scale *is* the sweep.
-          /* @__PURE__ */ o(
-            ue,
-            {
-              type: "number",
-              domain: p ? [0, k] : d,
-              tick: !1,
-              axisLine: !1
-            }
-          ),
-          H && /* @__PURE__ */ o(
-            ve,
-            {
-              cursor: p ? !1 : void 0,
-              content: Y ?? oe()
-            }
-          ),
-          p ? /* @__PURE__ */ o(
-            Ee,
-            {
-              ringSegments: F,
-              row: e[0],
-              nameKey: l,
-              cornerRadius: C,
-              animation: R,
-              centerLabel: M
-            }
-          ) : /* @__PURE__ */ o(
-            Re,
-            {
-              seriesKeys: te,
-              seriesData: P,
-              isMultiMetric: x,
-              config: r,
-              nameKey: l,
-              showBackground: O,
-              cornerRadius: C,
-              minPointSize: ne,
-              animation: R,
-              centerLabel: M,
-              showLabels: Q,
-              labelPosition: ee,
-              labelFormat: W,
-              labelFormatter: D
-            }
-          ),
-          X && !p && /* @__PURE__ */ o(be, { content: le })
-        ]
-      }
-    ) }) });
-  }
-);
-Fe.displayName = "RadialBarChart";
-export {
-  Fe as RadialBarChart,
-  Le as RadialBarChartSegmentedTooltipContent,
-  Te as radialBarChartBandName,
-  Se as radialBarChartLabelText,
-  ke as radialBarChartSegmentFill,
-  $e as radialBarChartSegmentedReading,
-  Ne as radialBarChartSegments
-};
-//# sourceMappingURL=radial-bar-chart.js.map
+var k = l.forwardRef(({ className: c, config: u, palette: p, data: m, dataKey: h, dataKeys: v, nameKey: b, innerRadius: x = 20, outerRadius: w = 60, startAngle: T = 90, endAngle: O = -270, valueDomain: k, cornerRadius: A = 4, cx: ne, cy: j, barSize: re, barGap: ie, barCategoryGap: ae, minAngle: M, margin: N, segments: P, segmentGap: oe = S, showBackground: se = !0, showPolarGrid: ce = !1, centerLabel: F, showTooltip: le = !0, showLegend: I = !0, legendValueFormatter: L, tooltipContent: R, animate: z, animationDuration: B, animationBegin: V, animationEasing: H, showLabels: U = !1, labelPosition: ue, labelFormat: de = "value", labelFormatter: fe, ...pe }, me) => {
+	let W = s({
+		animate: z,
+		animationDuration: B,
+		animationBegin: V,
+		animationEasing: H
+	}), G = ue ?? "insideStart", K = !!v?.length, q = P != null && P > 1 && !K && m.length === 1 && typeof m[0][h] == "number", he = K ? v : [h], J = l.useMemo(() => v?.length ? v : [h], [v, h]), Y = Math.abs(O - T), X = q ? C({
+		value: m[0][h],
+		domain: k ?? [0, m[0][h]],
+		segments: P,
+		gap: oe,
+		sweep: Y,
+		closed: Y >= 360
+	}) : [], Z = K ? m : m.map((e) => ({
+		...e,
+		fill: `var(--color-${e[b]})`
+	})), Q = q ? [{
+		...m[0],
+		...Object.fromEntries(X.map((e) => [e.key, e.degrees]))
+	}] : Z, ge = M === void 0 ? void 0 : O < T ? -M : M, $ = l.useMemo(() => I ? o(u, p ?? t) : null, [
+		I,
+		u,
+		p
+	]), _e = l.useMemo(() => $ ? K ? J.map((e) => ({
+		value: e,
+		dataKey: e,
+		color: $[e]?.color ?? `var(--color-${e})`,
+		type: "rect",
+		payload: {}
+	})) : m.map((e) => ({
+		value: String(e[b]),
+		dataKey: b,
+		color: $[String(e[b])]?.color ?? `var(--color-${String(e[b])})`,
+		type: "rect",
+		payload: e
+	})) : [], [
+		$,
+		K,
+		J,
+		m,
+		b
+	]), ve = I && !q && !!$, ye = /* @__PURE__ */ f(y, {
+		data: Q,
+		dataKey: K || q ? void 0 : h,
+		cx: ne,
+		cy: j,
+		innerRadius: x,
+		outerRadius: w,
+		startAngle: T,
+		endAngle: O,
+		barSize: re,
+		barGap: ie,
+		barCategoryGap: ae,
+		margin: N ?? {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		},
+		children: [
+			ce && /* @__PURE__ */ d(_, {
+				gridType: "circle",
+				radialLines: !1
+			}),
+			(k || q) && /* @__PURE__ */ d(g, {
+				type: "number",
+				domain: q ? [0, Y] : k,
+				tick: !1,
+				axisLine: !1
+			}),
+			le && /* @__PURE__ */ d(i, {
+				cursor: !q && void 0,
+				content: R ?? (q ? /* @__PURE__ */ d(E, {
+					config: u,
+					row: m[0],
+					nameKey: b,
+					dataKey: h,
+					domainMax: k?.[1]
+				}) : K ? /* @__PURE__ */ d(a, { labelFormatter: (e, t) => D(t?.[0]?.payload, b) }) : /* @__PURE__ */ d(a, {
+					nameKey: b,
+					hideLabel: !0
+				}))
+			}),
+			q ? /* @__PURE__ */ d(te, {
+				ringSegments: X,
+				row: m[0],
+				nameKey: b,
+				cornerRadius: A,
+				animation: W,
+				centerLabel: F
+			}) : /* @__PURE__ */ d(ee, {
+				seriesKeys: he,
+				seriesData: Z,
+				isMultiMetric: K,
+				config: u,
+				nameKey: b,
+				showBackground: se,
+				cornerRadius: A,
+				minPointSize: ge,
+				animation: W,
+				centerLabel: F,
+				showLabels: U,
+				labelPosition: G,
+				labelFormat: de,
+				labelFormatter: fe
+			})
+		]
+	}), be = U && (G === "outside" || G === "end") ? "size-[200px]" : "size-[120px]";
+	return /* @__PURE__ */ f("div", {
+		ref: me,
+		className: e("flex flex-row items-center gap-4", !ve && "justify-center", c),
+		...pe,
+		children: [/* @__PURE__ */ d("div", {
+			className: e(be, "shrink-0"),
+			children: /* @__PURE__ */ d(n, {
+				config: u,
+				palette: p,
+				className: "size-full",
+				children: ye
+			})
+		}), I && !q && $ && /* @__PURE__ */ d(r, {
+			variant: "list",
+			payload: _e,
+			config: $,
+			nameKey: K ? void 0 : b,
+			valueKey: K ? void 0 : h,
+			valueFormatter: K ? void 0 : L,
+			className: "min-w-0 flex-1"
+		})]
+	});
+});
+k.displayName = "RadialBarChart";
+//#endregion
+export { k as RadialBarChart, E as RadialBarChartSegmentedTooltipContent, D as radialBarChartBandName, x as radialBarChartLabelText, w as radialBarChartSegmentFill, T as radialBarChartSegmentedReading, C as radialBarChartSegments };
+
+//# sourceMappingURL=radial-bar-chart.js.map