@acronis-platform/ui-react 3.0.0 → 4.0.0

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

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