npm - @acronis-platform/ui-react - Versions diffs - 0.60.0 → 0.61.0 - Mend

@acronis-platform/ui-react 0.60.0 → 0.61.0

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

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

@@ -1,69 +1,377 @@
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import * as x from "react";
-import { RadialBarChart as L, RadialBar as N, Cell as $ } from "recharts";
-import { cn as b } from "../../../lib/utils.js";
-import { ChartContainer as j, ChartTooltip as A, ChartTooltipContent as T, ChartLegend as k, ChartLegendContent as z } from "../chart/chart.js";
-const D = x.forwardRef(
+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
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+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;
+}
+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;
+}
+function ke(a, r) {
+  return a === "gap" ? "transparent" : a === "track" ? "var(--ui-background-surface-secondary)" : `var(--color-${r})`;
+}
+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 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 Te(a, r) {
+  const e = a == null ? void 0 : a[r];
+  return e == null ? "" : String(e);
+}
+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 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({
+  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
+  ));
+}
+const Fe = L.forwardRef(
   ({
-    className: l,
-    config: e,
-    data: n,
-    dataKey: i,
-    nameKey: a,
-    innerRadius: s = 30,
+    className: a,
+    config: r,
+    data: e,
+    dataKey: t,
+    dataKeys: n,
+    nameKey: l,
+    innerRadius: i = 30,
     outerRadius: c = 110,
-    startAngle: d = 90,
-    endAngle: h = -270,
-    cornerRadius: m = 4,
-    showBackground: C = !0,
-    showTooltip: f = !0,
-    showLegend: p = !0,
-    tooltipContent: u,
-    ...R
-  }, B) => {
-    const o = n.map((t) => ({
-      ...t,
-      fill: `var(--color-${t[a]})`
-    }));
-    return /* @__PURE__ */ r("div", { ref: B, className: b(l), ...R, children: /* @__PURE__ */ r(j, { config: e, className: "size-full", children: /* @__PURE__ */ g(
-      L,
+    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,
       {
-        data: o,
-        dataKey: i,
-        innerRadius: s,
+        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: d,
-        endAngle: h,
+        startAngle: s,
+        endAngle: u,
+        barSize: m,
+        barGap: f,
+        barCategoryGap: h,
+        margin: G,
         children: [
-          f && /* @__PURE__ */ r(
-            A,
+          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,
             {
-              content: u ?? /* @__PURE__ */ r(T, { nameKey: a, hideLabel: !0 })
+              type: "number",
+              domain: p ? [0, k] : d,
+              tick: !1,
+              axisLine: !1
             }
           ),
-          /* @__PURE__ */ r(
-            N,
+          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,
             {
-              dataKey: i,
-              background: C,
-              cornerRadius: m,
-              isAnimationActive: !1,
-              children: o.map((t, v) => (
-                // 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__ */ r($, { fill: `var(--color-${t[a]})` }, v)
-              ))
+              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
             }
           ),
-          p && /* @__PURE__ */ r(k, { content: /* @__PURE__ */ r(z, { nameKey: a }) })
+          X && !p && /* @__PURE__ */ o(be, { content: le })
         ]
       }
     ) }) });
   }
 );
-D.displayName = "RadialBarChart";
+Fe.displayName = "RadialBarChart";
 export {
-  D as RadialBarChart
+  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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"radial-bar-chart.js","sources":["../../../../src/components/ui/radial-bar-chart/radial-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Cell, RadialBar, RadialBarChart as RechartsRadialBarChart } from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives (a polar/radial\n// type). Rows become concentric arcs sized by `dataKey`, each colored from its\n// `--color-<name>` var. Like ScatterChart/ComposedChart there's no CVA variant:\n// a radial bar's expressiveness is geometry (angles/radii, plain props) and the\n// data mapping, not a visual \"mode\". The angular sweep is exposed as\n// startAngle/endAngle props so a caller can build a gauge or a full ring.\nexport interface RadialBarChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'> {\n /** Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. /\n data: ReadonlyArray<Record<string, string \| number>>;\n /\n Per-arc map of `label` / `color`, keyed by the arc's `nameKey` value\n * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n * custom properties. Colors are caller-supplied — reference an existing\n * semantic `--ui-` token; there is no chart palette tier yet.\n /\n config: ChartConfig;\n /** Numeric field that sizes each arc. /\n dataKey: string;\n /\n Label field that names each arc (drives the legend, tooltip, and\n * `--color-<name>` lookup). Values should be unique per chart (arcs sharing a\n * name share one `config`/color entry) and CSS-safe — they become part of a\n * custom-property name.\n /\n nameKey: string;\n /* Inner radius of the innermost arc. /\n innerRadius?: number;\n /* Outer radius of the outermost arc. /\n outerRadius?: number;\n /* Angle (degrees) the arcs sweep from. /\n startAngle?: number;\n /* Angle (degrees) the arcs sweep to (default is a full clockwise circle). /\n endAngle?: number;\n /* Corner radius on each arc's ends. /\n cornerRadius?: number;\n /* Render a muted background track behind each arc. /\n showBackground?: boolean;\n showTooltip?: boolean;\n showLegend?: boolean;\n /\n Replace the default tooltip. Pass a configured `ChartTooltipContent`\n * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n * to customize formatting, per-arc rows, or extra fields without composing\n * recharts yourself. Ignored when `showTooltip` is false.\n */\n tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst RadialBarChart = React.forwardRef<HTMLDivElement, RadialBarChartProps>(\n (\n {\n className,\n config,\n data,\n dataKey,\n nameKey,\n innerRadius = 30,\n outerRadius = 110,\n startAngle = 90,\n endAngle = -270,\n cornerRadius = 4,\n showBackground = true,\n showTooltip = true,\n showLegend = true,\n tooltipContent,\n ...props\n },\n ref\n ) => {\n // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n // hover resolves the arc color in the tooltip — recharts' RadialBar, like\n // Funnel, carries no per-arc color on the tooltip payload item.\n const seriesData: Record<string, string \| number>[] = data.map((row) => ({\n ...row,\n fill: `var(--color-${row[nameKey]})`,\n }));\n\n return (\n <div ref={ref} className={cn(className)} {...props}>\n <ChartContainer config={config} className=\"size-full\">\n <RechartsRadialBarChart\n data={seriesData}\n dataKey={dataKey}\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n startAngle={startAngle}\n endAngle={endAngle}\n >\n {showTooltip && (\n <ChartTooltip\n content={\n tooltipContent ?? (\n <ChartTooltipContent nameKey={nameKey} hideLabel />\n )\n }\n />\n )}\n <RadialBar\n dataKey={dataKey}\n background={showBackground}\n cornerRadius={cornerRadius}\n isAnimationActive={false}\n >\n {seriesData.map((entry, index) => (\n // Keyed by index, not the name: two arcs could share a nameKey\n // value, which would collide as a React key. Same-named arcs\n // intentionally share a color/config entry via `--color-<name>`.\n <Cell key={index} fill={`var(--color-${entry[nameKey]})`} />\n ))}\n </RadialBar>\n {showLegend && (\n <ChartLegend content={<ChartLegendContent nameKey={nameKey} />} />\n )}\n </RechartsRadialBarChart>\n </ChartContainer>\n </div>\n );\n }\n);\nRadialBarChart.displayName = 'RadialBarChart';\n\nexport { RadialBarChart };\n"],"names":["RadialBarChart","React","className","config","data","dataKey","nameKey","innerRadius","outerRadius","startAngle","endAngle","cornerRadius","showBackground","showTooltip","showLegend","tooltipContent","props","ref","seriesData","row","jsx","cn","ChartContainer","jsxs","RechartsRadialBarChart","ChartTooltip","ChartTooltipContent","RadialBar","entry","index","Cell","ChartLegend","ChartLegendContent"],"mappings":";;;;;AAgEA,MAAMA,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,UAAAC,IAAW;AAAA,IACX,cAAAC,IAAe;AAAA,IACf,gBAAAC,IAAiB;AAAA,IACjB,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAgDd,EAAK,IAAI,CAACe,OAAS;AAAA,MACvE,GAAGA;AAAA,MACH,MAAM,eAAeA,EAAIb,CAAO,CAAC;AAAA,IAAA,EACjC;AAEF,WACE,gBAAAc,EAAC,OAAA,EAAI,KAAAH,GAAU,WAAWI,EAAGnB,CAAS,GAAI,GAAGc,GAC3C,UAAA,gBAAAI,EAACE,GAAA,EAAe,QAAAnB,GAAgB,WAAU,aACxC,UAAA,gBAAAoB;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,MAAMN;AAAA,QACN,SAAAb;AAAA,QACA,aAAAE;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,QACA,UAAAC;AAAA,QAEC,UAAA;AAAA,UAAAG,KACC,gBAAAO;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,SACEV,KACE,gBAAAK,EAACM,GAAA,EAAoB,SAAApB,GAAkB,WAAS,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAKzD,gBAAAc;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,SAAAtB;AAAA,cACA,YAAYO;AAAA,cACZ,cAAAD;AAAA,cACA,mBAAmB;AAAA,cAElB,UAAAO,EAAW,IAAI,CAACU,GAAOC;AAAA;AAAA;AAAA;AAAA,gBAItB,gBAAAT,EAACU,KAAiB,MAAM,eAAeF,EAAMtB,CAAO,CAAC,OAA1CuB,CAA+C;AAAA,eAC3D;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFf,KACC,gBAAAM,EAACW,GAAA,EAAY,SAAS,gBAAAX,EAACY,GAAA,EAAmB,SAAA1B,GAAkB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGtE,EAAA,CACF;AAAA,EAEJ;AACF;AACAN,EAAe,cAAc;"}
1	+ {"version":3,"file":"radial-bar-chart.js","sources":["../../../../src/components/ui/radial-bar-chart/radial-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n Cell,\n Label,\n LabelList,\n PolarAngleAxis,\n PolarGrid,\n RadialBar,\n RadialBarChart as RechartsRadialBarChart,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n resolveLabelFillClass,\n CHART_LABEL_FONT_SIZE,\n type ChartConfig,\n type ChartAnimationProps,\n type ChartDataLabelProps,\n type ChartTooltipContentProps,\n type PolarLabelPosition,\n type ResolvedAnimation,\n type TickFormatter,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives (a polar/radial\n// type). Rows become concentric arcs sized by `dataKey`, each colored from its\n// `--color-<name>` var; `dataKeys` switches to one arc per metric instead. Like\n// ScatterChart/ComposedChart there's no CVA variant: a radial bar's\n// expressiveness is geometry (angles/radii, plain props) and the data mapping,\n// not a visual \"mode\". The angular sweep is exposed as startAngle/endAngle props\n// so a caller can build a gauge or a full ring.\n\n/** Row-per-arc datum: the `nameKey` label plus each metric's numeric value. /\ntype RadialBarChartDatum = Record<string, string \| number>;\n\n/* What an arc's data label reads. /\nexport type RadialBarChartLabelFormat = 'value' \| 'name-value';\n\nexport interface RadialBarChartCenterLabel {\n // Rendered as SVG <text>, which only lays out text — hence string \| number,\n // not ReactNode.\n /* Headline metric rendered large in the hole (e.g. the gauge's value). /\n value?: string \| number;\n /* Caption rendered under the value. /\n label?: string \| number;\n}\n\n/\n The readout in the hole at the centre of the arcs — a headline value over a\n * caption. Rendered as a recharts `<Label>`, which is what supplies the polar\n * viewBox the text centres itself on.\n \n There is one readout for the whole chart, so it hangs off the first series\n * drawn — every series shares the same viewBox.\n /\nfunction RadialBarChartCenterLabelContent({\n centerLabel,\n}: {\n centerLabel: RadialBarChartCenterLabel;\n}) {\n return (\n <Label\n content={({ viewBox }) => {\n if (!viewBox \|\| !('cx' in viewBox)) return null;\n const { cx: centerX = 0, cy: centerY = 0 } = viewBox as {\n cx?: number;\n cy?: number;\n };\n const hasValue = centerLabel.value != null;\n const hasLabel = centerLabel.label != null;\n // Straddle the centre when both lines show, so the value + label block\n // is centered as a whole (not just the value).\n const both = hasValue && hasLabel;\n return (\n <g>\n {hasValue && (\n <text\n x={centerX}\n y={both ? centerY - 10 : centerY}\n textAnchor=\"middle\"\n dominantBaseline=\"central\"\n className=\"fill-foreground text-2xl font-semibold\"\n >\n {centerLabel.value}\n </text>\n )}\n {hasLabel && (\n <text\n x={centerX}\n y={both ? centerY + 13 : centerY}\n textAnchor=\"middle\"\n dominantBaseline=\"central\"\n className=\"fill-muted-foreground text-sm\"\n >\n {centerLabel.label}\n </text>\n )}\n </g>\n );\n }}\n />\n );\n}\n\n/\n Compose one arc's data-label text. Exported for unit tests; not part of the\n * package's public API.\n \n `labelFormatter` only ever formats the numeric part, so a chart's labels and\n * its tooltip stay in the same units under either format. A nullish value yields\n * an empty label, which recharts renders as no `<text>` at all.\n /\nexport function radialBarChartLabelText(options: {\n format: RadialBarChartLabelFormat;\n name: string \| number \| undefined;\n value: string \| number \| undefined;\n formatter?: TickFormatter;\n}): string {\n const { format, name, value, formatter } = options;\n if (value == null) return '';\n const valueText = formatter ? formatter(value) : String(value);\n return format === 'name-value' && name != null\n ? `${name}: ${valueText}`\n : valueText;\n}\n\n/* One piece of a segmented gauge's ring: a length in degrees and what it is. /\nexport interface RadialBarChartSegment {\n /* Synthetic series key — stable for a given (index, kind). /\n key: string;\n /* Angular length of the piece, in degrees. /\n degrees: number;\n /* `value` is the metric, `track` the unreached remainder, `gap` the notch. /\n kind: 'value' \| 'track' \| 'gap';\n}\n\n/* Fallback gap between a segmented gauge's segments, in degrees. /\nconst SEGMENT_GAP = 3;\n\n/\n Cut a gauge's sweep into equal segments separated by gaps, and split the\n * segment the value ends inside into its reached and unreached parts. Exported\n * for unit tests; not part of the package's public API.\n \n Lengths come back in degrees, which is what lets the ring be built as one\n * stack of synthetic series over a `[0, sweep]` angular scale: recharts lays\n * stacked radial bars out sequentially along the angle, so a transparent series\n * between two colored ones reads as a real notch in the ring. A `gap` that\n * would leave no room for the segments themselves is clamped.\n /\nexport function radialBarChartSegments(options: {\n value: number;\n domain: [number, number];\n segments: number;\n gap: number;\n /* Absolute sweep of the chart, in degrees. /\n sweep: number;\n /* A full-circle sweep also needs a gap between the last segment and the first. /\n closed: boolean;\n}): RadialBarChartSegment[] {\n const { value, domain, segments, sweep, closed } = options;\n const gapCount = closed ? segments : segments - 1;\n // Leave at least half the sweep for the segments, however wide a gap is asked\n // for — an all-gap ring would render as nothing at all. A negative gap would\n // stretch the pieces past the sweep and overlap them, so it floors at zero.\n const gap =\n gapCount > 0\n ? Math.min(Math.max(options.gap, 0), sweep / (2 gapCount))\n : 0;\n const segmentDegrees = (sweep - gap * gapCount) / segments;\n const [min, max] = domain;\n const span = max - min;\n // A domain with no span (`[n, n]`) or an inverted one (`[max, min]`) cannot\n // place a value on the ring at all, so there is no fraction to draw and the\n // ring stays empty. It deliberately does not fall back to comparing the value\n // against zero: that reported a full ring for `{ value: 5, domain: [100,\n // 100] }`, i.e. claimed completion the data never supported. For a gauge,\n // under-reading a domain that says nothing is the safe direction.\n const fraction =\n span > 0 ? Math.min(Math.max((value - min) / span, 0), 1) : 0;\n // The value maps onto the drawn ring, so the gaps never eat into it.\n let remainingValue = fraction * segmentDegrees * segments;\n\n const pieces: RadialBarChartSegment[] = [];\n for (let index = 0; index < segments; index++) {\n const reached = Math.min(Math.max(remainingValue, 0), segmentDegrees);\n remainingValue -= reached;\n // Both halves are always emitted, including at zero length: a stable key set\n // keeps recharts' series identities steady as the value changes.\n pieces.push({ key: `seg-${index}-value`, degrees: reached, kind: 'value' });\n pieces.push({\n key: `seg-${index}-track`,\n degrees: segmentDegrees - reached,\n kind: 'track',\n });\n if (gap > 0 && (closed \|\| index < segments - 1)) {\n pieces.push({ key: `seg-${index}-gap`, degrees: gap, kind: 'gap' });\n }\n }\n return pieces;\n}\n\n/*\n Fill for one piece of a segmented gauge's ring. Exported for unit tests and so\n * the forced-open tooltip story can build a ring from the real implementation\n * rather than a copy of it; not part of the package's public API.\n /\nexport function radialBarChartSegmentFill(\n kind: RadialBarChartSegment['kind'],\n colorName: string \| number\n): string {\n if (kind === 'gap') return 'transparent';\n // The unreached remainder plays the part `showBackground`'s track plays on a\n // continuous arc, so it takes the same muted surface.\n return kind === 'track'\n ? 'var(--ui-background-surface-secondary)'\n : `var(--color-${colorName})`;\n}\n\n/\n What a segmented gauge's tooltip reads. Exported for unit tests; not part of\n * the package's public API.\n \n A segmented ring's series are pieces of geometry, so recharts would offer the\n * hovered piece's own name and length (\"seg-3-value\", 41.2°). Hovering anywhere\n * on the ring should read the metric instead, so the reading is rebuilt from the\n * data row.\n /\nexport function radialBarChartSegmentedReading(options: {\n config: ChartConfig;\n row: RadialBarChartDatum;\n nameKey: string;\n dataKey: string;\n /* The `valueDomain` maximum, when the gauge has one. /\n domainMax?: number;\n}): { colorName: string; label: React.ReactNode; valueText: string } {\n const { config, row, nameKey, dataKey, domainMax } = options;\n const colorName = String(row[nameKey]);\n const value = row[dataKey];\n const valueText =\n typeof value === 'number' ? value.toLocaleString() : String(value ?? '');\n return {\n colorName,\n label: config[colorName]?.label ?? colorName,\n // The gauge's scale is the other half of the reading, so a known maximum\n // comes along: \"29 / 38\", not a bare \"29\".\n valueText:\n domainMax == null\n ? valueText\n : `${valueText} / ${domainMax.toLocaleString()}`,\n };\n}\n\n/\n The tooltip a segmented gauge shows — the same swatch/name/value layout the\n * default `ChartTooltipContent` row uses, dot included, over the reading from\n * `radialBarChartSegmentedReading`. Exported for the forced-open\n * visual-regression story; not part of the package's public API.\n \n `payload` is trimmed to one row: a radial tooltip is axis-shared and collects a\n * row from every series — two dozen identical rows for one metric.\n * (`tooltipType=\"none\"` only tags them, and scoping the tooltip to the hovered\n * item instead would drop it in the corner — unlike Pie/Bar sectors, a RadialBar\n * sector carries no tooltip coordinate.)\n \n A real component rather than a closure so it can be handed to `ChartTooltip`\n * as an element: recharts `cloneElement`s an element but `createElement`s a\n * function, and a closure rebuilt each render is a new element type — which\n * remounts the tooltip on every parent render instead of updating it.\n /\nexport function RadialBarChartSegmentedTooltipContent({\n active,\n payload,\n ...reading\n}: {\n active?: boolean;\n // Loosely typed on purpose: recharts' own payload generics are wider than the\n // shared `ChartTooltipContentProps` accepts, and only the row count matters.\n payload?: readonly unknown[];\n config: ChartConfig;\n row: RadialBarChartDatum;\n nameKey: string;\n dataKey: string;\n domainMax?: number;\n}) {\n const { colorName, label, valueText } =\n radialBarChartSegmentedReading(reading);\n\n return (\n <ChartTooltipContent\n active={active}\n payload={payload?.slice(0, 1) as ChartTooltipContentProps['payload']}\n hideLabel\n formatter={() => (\n <>\n <div\n className=\"h-2.5 w-2.5 shrink-0 rounded-full\"\n style={{ backgroundColor: `var(--color-${colorName})` }}\n />\n <div className=\"flex flex-1 items-center justify-between gap-2 leading-none\">\n <span className=\"text-muted-foreground\">{label}</span>\n <span className=\"font-medium tabular-nums text-foreground\">\n {valueText}\n </span>\n </div>\n </>\n )}\n />\n );\n}\n\n/\n The band a multi-metric tooltip's header names. Exported for unit tests; not\n * part of the package's public API.\n \n Each tooltip row is one metric, so the header names the band the hovered arc\n * belongs to. recharts' own label is the radius-axis index, which reads as a\n * bare number.\n /\nexport function radialBarChartBandName(\n row: RadialBarChartDatum \| undefined,\n nameKey: string\n): string {\n const name = row?.[nameKey];\n return name == null ? '' : String(name);\n}\n\n/\n What an arc's data label calls the arc: the row's own `nameKey` value, or — in\n * multi-metric mode, where one arc is one metric — that metric's `config` label.\n /\nfunction radialBarChartArcName(options: {\n key: string;\n row: RadialBarChartDatum \| undefined;\n isMultiMetric: boolean;\n nameKey: string;\n config: ChartConfig;\n}): string \| number \| undefined {\n const { key, row, isMultiMetric, nameKey, config } = options;\n if (!isMultiMetric) return row?.[nameKey];\n // ChartConfig labels are ReactNode; only a plain string/number can go into an\n // SVG <text>.\n const label = config[key]?.label;\n return typeof label === 'string' \|\| typeof label === 'number' ? label : key;\n}\n\n/\n The default mapping's arcs: one `RadialBar` per series — one for the single\n * `dataKey`, or one per `dataKeys` entry in multi-metric mode — drawn\n * concentrically.\n \n recharts collects its graphical items from the store (each `RadialBar`\n * registers itself on render) rather than by scanning the chart's children for\n * their types, so grouping them inside a component of our own is invisible to it.\n * The `Cell`s stay direct children of their `RadialBar`, which does read its own\n * children by type.\n /\nfunction RadialBarChartSeries({\n seriesKeys,\n seriesData,\n isMultiMetric,\n config,\n nameKey,\n showBackground,\n cornerRadius,\n minPointSize,\n animation,\n centerLabel,\n showLabels,\n labelPosition,\n labelFormat,\n labelFormatter,\n}: {\n seriesKeys: string[];\n seriesData: RadialBarChartDatum[];\n isMultiMetric: boolean;\n config: ChartConfig;\n nameKey: string;\n showBackground: boolean;\n cornerRadius: number;\n minPointSize: number \| undefined;\n animation: ResolvedAnimation;\n centerLabel: RadialBarChartCenterLabel \| undefined;\n showLabels: boolean;\n labelPosition: PolarLabelPosition;\n labelFormat: RadialBarChartLabelFormat;\n labelFormatter?: TickFormatter;\n}) {\n return seriesKeys.map((key, seriesIndex) => (\n <RadialBar\n key={key}\n dataKey={key}\n fill={isMultiMetric ? `var(--color-${key})` : undefined}\n background={showBackground}\n cornerRadius={cornerRadius}\n minPointSize={minPointSize}\n {...animation}\n >\n {!isMultiMetric &&\n seriesData.map((entry, index) => (\n // Keyed by index, not the name: two arcs could share a nameKey\n // value, which would collide as a React key. Same-named arcs\n // intentionally share a color/config entry via `--color-<name>`.\n <Cell key={index} fill={`var(--color-${entry[nameKey]})`} />\n ))}\n {seriesIndex === 0 && centerLabel && (\n <RadialBarChartCenterLabelContent centerLabel={centerLabel} />\n )}\n {showLabels && (\n <LabelList\n // `valueAccessor` rather than `dataKey`: the label text can\n // carry the arc's name, which only the whole row (single\n // metric) or the metric's config entry can supply. recharts\n // ignores the accessor when a dataKey is set, so the two\n // can't be combined.\n valueAccessor={(entry) =>\n radialBarChartLabelText({\n format: labelFormat,\n name: radialBarChartArcName({\n key,\n row: entry.payload as RadialBarChartDatum \| undefined,\n isMultiMetric,\n nameKey,\n config,\n }),\n value: entry.value as string \| number \| undefined,\n formatter: labelFormatter,\n })\n }\n position={labelPosition}\n className={resolveLabelFillClass(labelPosition)}\n fontSize={CHART_LABEL_FONT_SIZE}\n />\n )}\n </RadialBar>\n ));\n}\n\n/\n A segmented gauge's ring: the pieces from `radialBarChartSegments` as one stack\n * of synthetic series, so they lay out sequentially around the ring instead of\n * concentrically and the `gap` pieces read as notches.\n /\nfunction RadialBarChartSegmentedSeries({\n ringSegments,\n row,\n nameKey,\n cornerRadius,\n animation,\n centerLabel,\n}: {\n ringSegments: RadialBarChartSegment[];\n row: RadialBarChartDatum;\n nameKey: string;\n cornerRadius: number;\n animation: ResolvedAnimation;\n centerLabel: RadialBarChartCenterLabel \| undefined;\n}) {\n return ringSegments.map((segment, index) => (\n <RadialBar\n key={segment.key}\n dataKey={segment.key}\n stackId=\"segments\"\n // The metric's name, so the hover has a row to key off at all\n // (`ChartTooltipContent` keys its row off `name`).\n name={String(row[nameKey])}\n fill={radialBarChartSegmentFill(segment.kind, row[nameKey])}\n cornerRadius={cornerRadius}\n {...animation}\n >\n {index === 0 && centerLabel && (\n <RadialBarChartCenterLabelContent centerLabel={centerLabel} />\n )}\n </RadialBar>\n ));\n}\n\nexport interface RadialBarChartProps\n extends\n Omit<React.ComponentProps<'div'>, 'children'>,\n ChartAnimationProps,\n ChartDataLabelProps {\n /* Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. /\n data: ReadonlyArray<RadialBarChartDatum>;\n /\n Per-arc map of `label` / `color`, keyed by the arc's `nameKey` value — or, in\n * multi-metric mode, by each `dataKeys` entry (imported from the shared `Chart`\n * primitives). Turned into `--color-<name>` custom properties. Colors are\n * caller-supplied — reference an existing semantic `--ui-` token; there is no\n chart palette tier yet.\n /\n config: ChartConfig;\n /* Numeric field that sizes each arc. Ignored when `dataKeys` is set. /\n dataKey: string;\n /\n Plot several metrics instead of one arc per row: one arc per key, colored and\n * named from `config` keyed by the key (not by `nameKey`) — the same\n * convention as the cartesian charts. Every metric shares one angular scale, so\n * pair it with `valueDomain` when the metrics are measured against a known\n * maximum. `nameKey` still names the band each metric's arc sits in.\n /\n dataKeys?: string[];\n /\n Label field that names each arc (drives the legend, tooltip, and\n * `--color-<name>` lookup). Values should be unique per chart (arcs sharing a\n * name share one `config`/color entry) and CSS-safe — they become part of a\n * custom-property name. In multi-metric mode it names the band rather than the\n * arc, so the legend and colors come from `dataKeys` instead.\n /\n nameKey: string;\n /* Inner radius of the innermost arc. /\n innerRadius?: number;\n /* Outer radius of the outermost arc. /\n outerRadius?: number;\n /* Angle (degrees) the arcs sweep from. /\n startAngle?: number;\n /* Angle (degrees) the arcs sweep to (default is a full clockwise circle). /\n endAngle?: number;\n /\n The value range the sweep represents, as `[min, max]`. Without it every arc\n * is drawn relative to the largest value in the data — so a single value\n * always fills the whole sweep, which is never what a gauge means. Set it to\n * the metric's own scale (e.g. `[0, 100]` for a percentage) and each arc\n * becomes that fraction of the sweep, over the `showBackground` track.\n /\n valueDomain?: [number, number];\n /* Corner radius on each arc's ends. /\n cornerRadius?: number;\n /\n Horizontal center of the arcs, in px or a percentage of the width.\n * Defaults to the middle (`50%`).\n /\n cx?: number \| string;\n /\n Vertical center of the arcs, in px or a percentage of the height. Defaults to\n * the middle (`50%`) — worth moving for a half-circle gauge, whose drawn half\n * otherwise sits in the upper half of the surface.\n /\n cy?: number \| string;\n /* Thickness of each arc, in px. Omit to let the radii and the gaps size it. /\n barSize?: number;\n /* Gap between the arcs of different metrics in one band, in px. /\n barGap?: number \| string;\n /* Gap between bands, in px or a percentage string. /\n barCategoryGap?: number \| string;\n /\n Smallest angle a non-zero arc may occupy, in degrees, so a tiny value stays\n * visible (and hoverable). recharts applies the floor to a `0` as well, which\n * reads as a small positive value — leave this unset when a metric can\n * legitimately be zero.\n /\n minAngle?: number;\n /* Plot-area margin, in px. Omit to use recharts' default (5 on every side). /\n margin?: { top?: number; right?: number; bottom?: number; left?: number };\n /\n Draw the gauge's ring as this many equal segments, notched apart — the\n * segmented-gauge look. Applies to a single-value gauge only and needs\n * `valueDomain` to know what a full ring means. Anything that isn't one — more\n * than one row, `dataKeys` set, fewer than two segments, or a `dataKey` value\n * that isn't a number (a stringified `\"29\"` off an API) — falls back to the\n * normal concentric arcs, legend included, rather than erroring.\n \n The ring is then synthetic geometry rather than data rows, so the arc labels\n * and the legend are suppressed: put the readout in `centerLabel`. The tooltip\n * stays, and reads the metric (with the `valueDomain` maximum when there is\n * one) wherever on the ring it is hovered. `showBackground` is redundant too —\n * the unreached segments are the track.\n /\n segments?: number;\n /* Gap between a segmented gauge's segments, in degrees. Defaults to `3`. /\n segmentGap?: number;\n /* Render a muted background track behind each arc. /\n showBackground?: boolean;\n /* Draw the concentric polar grid behind the arcs. /\n showPolarGrid?: boolean;\n /\n Custom content for the hole at the center — a headline `value` and/or a\n * `label` caption, stacked and centered. Needs an `innerRadius` big enough to\n * hold the text; it is not clipped to the hole.\n /\n centerLabel?: RadialBarChartCenterLabel;\n showTooltip?: boolean;\n showLegend?: boolean;\n /\n Replace the default tooltip. Pass a configured `ChartTooltipContent`\n * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n * to customize formatting, per-arc rows, or extra fields without composing\n * recharts yourself. Ignored when `showTooltip` is false.\n \n On a segmented gauge it takes over from the built-in reading, and the payload\n * it receives is the ring's synthetic pieces (`seg-2-track`, a length in\n * degrees) rather than data rows — read the metric off `payload[0].payload`.\n /\n tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n /\n Position of the value labels when `showLabels` is on. Defaults to\n * `insideStart` — the labels sit inside each arc, and therefore render in the\n * on-fill label token so they stay legible over the arc colour.\n /\n labelPosition?: PolarLabelPosition;\n /\n What each data label reads when `showLabels` is on — the value alone (the\n * default), or the arc's name and its value. The name is the row's `nameKey`\n * value, or the metric's `config` label in multi-metric mode.\n /\n labelFormat?: RadialBarChartLabelFormat;\n}\n\nconst RadialBarChart = React.forwardRef<HTMLDivElement, RadialBarChartProps>(\n (\n {\n className,\n config,\n data,\n dataKey,\n dataKeys,\n nameKey,\n innerRadius = 30,\n outerRadius = 110,\n startAngle = 90,\n endAngle = -270,\n valueDomain,\n cornerRadius = 4,\n cx,\n cy,\n barSize,\n barGap,\n barCategoryGap,\n minAngle,\n margin,\n segments,\n segmentGap = SEGMENT_GAP,\n showBackground = true,\n showPolarGrid = false,\n centerLabel,\n showTooltip = true,\n showLegend = true,\n tooltipContent,\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n showLabels = false,\n labelPosition,\n labelFormat = 'value',\n labelFormatter,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n const arcLabelPosition = labelPosition ?? 'insideStart';\n const isMultiMetric = !!dataKeys?.length;\n // A segmented ring is one metric cut into pieces, so it only means anything\n // for a single-row, single-metric chart.\n const isSegmented =\n segments != null &&\n segments > 1 &&\n !isMultiMetric &&\n data.length === 1 &&\n typeof data[0][dataKey] === 'number';\n const seriesKeys = isMultiMetric ? dataKeys! : [dataKey];\n // Stable across renders so the memoized legend content below keeps its\n // identity; `seriesKeys` itself is a fresh array every render.\n const legendKeys = React.useMemo(\n () => (dataKeys?.length ? dataKeys : [dataKey]),\n [dataKeys, dataKey]\n );\n const sweep = Math.abs(endAngle - startAngle);\n const ringSegments = isSegmented\n ? radialBarChartSegments({\n value: data[0][dataKey] as number,\n // Without a domain a lone value is its own maximum, so the ring fills.\n domain: valueDomain ?? [0, data[0][dataKey] as number],\n segments: segments!,\n gap: segmentGap,\n sweep,\n closed: sweep >= 360,\n })\n : [];\n\n // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n // hover resolves the arc color in the tooltip — recharts' RadialBar, like\n // Funnel, carries no per-arc color on the tooltip payload item. Only in\n // single-metric mode: with one color per metric, a row-level fill would\n // paint every tooltip swatch the same.\n const seriesData: RadialBarChartDatum[] = isMultiMetric\n ? (data as RadialBarChartDatum[])\n : data.map((row) => ({\n ...row,\n fill: `var(--color-${row[nameKey]})`,\n }));\n\n // Each piece of the ring becomes a synthetic series on the one row, measured\n // in degrees — see `radialBarChartSegments`. Built from the raw row, not\n // from `seriesData`: a row-level `fill` wins over a series' own `fill` in\n // recharts, which would paint the track and the notches the arc's color.\n const plotData: RadialBarChartDatum[] = isSegmented\n ? [\n {\n ...data[0],\n ...Object.fromEntries(ringSegments.map((s) => [s.key, s.degrees])),\n },\n ]\n : seriesData;\n\n // recharts measures the radial floor in degrees, then extends the arc by\n // `mathSign(deltaAngle \|\| minPointSize)`, where `deltaAngle` is the arc's\n // own angular length (RadialBar.js). So for a non-zero arc the floor already\n // grows along the arc's direction whatever sign it carries; the sign only\n // decides which way an arc of exactly zero degrees grows. Carry the sweep's\n // sign so that one grows forwards on a counter-clockwise chart too.\n const minPointSize =\n minAngle === undefined\n ? undefined\n : endAngle < startAngle\n ? -minAngle\n : minAngle;\n\n // recharts derives a radial legend from the data rows* — one entry per row,\n // named and colored from the row itself (hence the stamped `fill`). That is\n // the single-metric mapping; it cannot name one arc per metric. So the\n // multi-metric payload is composed here, and passed as a content function:\n // recharts clones a content element with its own row-derived payload, which\n // would overwrite ours.\n //\n // Memoized because recharts `createElement`s a function content — a new\n // closure each render is a new element type, which would remount the whole\n // legend on every parent render instead of updating it.\n const multiMetricLegendContent = React.useCallback(\n () => (\n <ChartLegendContent\n payload={legendKeys.map((key) => ({\n value: key,\n dataKey: key,\n color: `var(--color-${key})`,\n type: 'rect' as const,\n }))}\n />\n ),\n [legendKeys]\n );\n const legendContent = isMultiMetric ? (\n multiMetricLegendContent\n ) : (\n <ChartLegendContent nameKey={nameKey} />\n );\n\n // The built-in tooltip reading, which each mapping composes differently: a\n // segmented ring rebuilds it from the data row, multi-metric renames the\n // header after the band, and the default mapping reads the hovered arc.\n const getDefaultTooltipContent = () => {\n if (isSegmented) {\n return (\n <RadialBarChartSegmentedTooltipContent\n config={config}\n row={data[0]}\n nameKey={nameKey}\n dataKey={dataKey}\n domainMax={valueDomain?.[1]}\n />\n );\n }\n\n if (isMultiMetric) {\n return (\n <ChartTooltipContent\n labelFormatter={(_, payload) =>\n radialBarChartBandName(\n payload?.[0]?.payload as RadialBarChartDatum \| undefined,\n nameKey\n )\n }\n />\n );\n }\n\n return <ChartTooltipContent nameKey={nameKey} hideLabel />;\n };\n\n return (\n <div ref={ref} className={cn(className)} {...props}>\n <ChartContainer config={config} className=\"size-full\">\n <RechartsRadialBarChart\n data={plotData}\n // Only meaningful for the single-metric mapping; in multi-metric and\n // segmented mode each <RadialBar> carries its own key and the scale\n // spans them all.\n dataKey={isMultiMetric \|\| isSegmented ? undefined : dataKey}\n cx={cx}\n cy={cy}\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n startAngle={startAngle}\n endAngle={endAngle}\n barSize={barSize}\n barGap={barGap}\n barCategoryGap={barCategoryGap}\n margin={margin}\n >\n {showPolarGrid && (\n <PolarGrid gridType=\"circle\" radialLines={false} />\n )}\n {(valueDomain \|\| isSegmented) && (\n // The angular scale itself, not chrome: it maps a value onto a\n // fraction of the sweep. Ticks/axis line stay off — the arcs and\n // the optional center readout are the readout. A segmented ring is\n // already measured in degrees, so its scale is the sweep.\n <PolarAngleAxis\n type=\"number\"\n domain={isSegmented ? [0, sweep] : valueDomain}\n tick={false}\n axisLine={false}\n />\n )}\n {showTooltip && (\n <ChartTooltip\n // The hover cursor marks which band of the angular axis is\n // active, which on a segmented ring is one metric either way —\n // it just draws a hairline across the gauge.\n cursor={isSegmented ? false : undefined}\n content={tooltipContent ?? getDefaultTooltipContent()}\n />\n )}\n {isSegmented ? (\n <RadialBarChartSegmentedSeries\n ringSegments={ringSegments}\n row={data[0]}\n nameKey={nameKey}\n cornerRadius={cornerRadius}\n animation={animation}\n centerLabel={centerLabel}\n />\n ) : (\n <RadialBarChartSeries\n seriesKeys={seriesKeys}\n seriesData={seriesData}\n isMultiMetric={isMultiMetric}\n config={config}\n nameKey={nameKey}\n showBackground={showBackground}\n cornerRadius={cornerRadius}\n minPointSize={minPointSize}\n animation={animation}\n centerLabel={centerLabel}\n showLabels={showLabels}\n labelPosition={arcLabelPosition}\n labelFormat={labelFormat}\n labelFormatter={labelFormatter}\n />\n )}\n {showLegend && !isSegmented && (\n <ChartLegend content={legendContent} />\n )}\n </RechartsRadialBarChart>\n </ChartContainer>\n </div>\n );\n }\n);\nRadialBarChart.displayName = 'RadialBarChart';\n\nexport { RadialBarChart };\n"],"names":["RadialBarChartCenterLabelContent","centerLabel","jsx","Label","viewBox","centerX","centerY","hasValue","hasLabel","both","radialBarChartLabelText","options","format","name","value","formatter","valueText","SEGMENT_GAP","radialBarChartSegments","domain","segments","sweep","closed","gapCount","gap","segmentDegrees","min","max","span","remainingValue","pieces","index","reached","radialBarChartSegmentFill","kind","colorName","radialBarChartSegmentedReading","config","row","nameKey","dataKey","domainMax","_a","RadialBarChartSegmentedTooltipContent","active","payload","reading","label","ChartTooltipContent","jsxs","Fragment","radialBarChartBandName","radialBarChartArcName","key","isMultiMetric","RadialBarChartSeries","seriesKeys","seriesData","showBackground","cornerRadius","minPointSize","animation","showLabels","labelPosition","labelFormat","labelFormatter","seriesIndex","RadialBar","entry","Cell","LabelList","resolveLabelFillClass","CHART_LABEL_FONT_SIZE","RadialBarChartSegmentedSeries","ringSegments","segment","RadialBarChart","React","className","data","dataKeys","innerRadius","outerRadius","startAngle","endAngle","valueDomain","cx","cy","barSize","barGap","barCategoryGap","minAngle","margin","segmentGap","showPolarGrid","showTooltip","showLegend","tooltipContent","animate","animationDuration","animationBegin","animationEasing","props","ref","resolveAnimation","arcLabelPosition","isSegmented","legendKeys","plotData","s","multiMetricLegendContent","ChartLegendContent","legendContent","getDefaultTooltipContent","_","cn","ChartContainer","RechartsRadialBarChart","PolarGrid","PolarAngleAxis","ChartTooltip","ChartLegend"],"mappings":"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"}

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

@@ -161,24 +161,31 @@ const z = f.forwardRef(
               children: a && /* @__PURE__ */ o(B, { content: r ?? M })
             }
           ) }),
-          c && /* @__PURE__ */ o("div", { className: "mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs", children: w.map(({ name: u, value: N, pct: k }) => {
-            var S;
-            return /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ o(
-                "span",
-                {
-                  className: "size-2.5 shrink-0 rounded-full",
-                  style: { backgroundColor: `var(--color-${u})` }
-                }
-              ),
-              /* @__PURE__ */ o("span", { className: "truncate text-muted-foreground", children: ((S = n[u]) == null ? void 0 : S.label) ?? u }),
-              /* @__PURE__ */ o("span", { className: "ms-auto font-semibold tabular-nums", children: N.toLocaleString() }),
-              /* @__PURE__ */ b("span", { className: "w-9 shrink-0 text-end tabular-nums text-muted-foreground", children: [
-                k,
-                "%"
-              ] })
-            ] }, u);
-          }) })
+          c && /* @__PURE__ */ o(
+            "div",
+            {
+              "data-slot": "sankey-chart-legend",
+              className: "mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs",
+              children: w.map(({ name: u, value: N, pct: k }) => {
+                var S;
+                return /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ o(
+                    "span",
+                    {
+                      className: "size-2.5 shrink-0 rounded-sm",
+                      style: { backgroundColor: `var(--color-${u})` }
+                    }
+                  ),
+                  /* @__PURE__ */ o("span", { className: "truncate text-muted-foreground", children: ((S = n[u]) == null ? void 0 : S.label) ?? u }),
+                  /* @__PURE__ */ o("span", { className: "ms-auto font-semibold tabular-nums", children: N.toLocaleString() }),
+                  /* @__PURE__ */ b("span", { className: "w-9 shrink-0 text-end tabular-nums text-muted-foreground", children: [
+                    k,
+                    "%"
+                  ] })
+                ] }, u);
+              })
+            }
+          )
         ]
       }
     );