@thebuoyant-tsdev/mui-ts-library 3.21.0 → 3.22.0

package/dist/components/radial-stacked-bar-chart/RadialStackedBarChart.js

@@ -8,17 +8,17 @@ function m(e, t = 0, n = ".", r = ",") {
 	let [i, a] = e.toFixed(Math.max(0, t)).split("."), o = i.replace(/\B(?=(\d{3})+(?!\d))/g, r);
 	return a ? `${o}${n}${a}` : o;
 }
-function ee(e) {
+function h(e) {
 	return Math.abs(e) >= 1e9 ? `${(e / 1e9).toFixed(1).replace(/\.0$/, "")}B` : Math.abs(e) >= 1e6 ? `${(e / 1e6).toFixed(1).replace(/\.0$/, "")}M` : Math.abs(e) >= 1e3 ? `${(e / 1e3).toFixed(1).replace(/\.0$/, "")}k` : String(e);
 }
-function te(e) {
+function g(e) {
 	return e.map((e) => typeof e == "string" ? {
 		key: e,
 		label: e
 	} : e);
 }
-function ne({ barData: e, seriesKey: t, seriesLabel: n, decimals: r, decimalSep: i, thousandSep: a }) {
-	let s = e.values[t] ?? 0, l = p.sum(Object.values(e.values)), u = l > 0 ? Math.round(s / l * 1e3) / 10 : 0;
+function ee({ barData: e, seriesKey: t, seriesLabel: n, decimals: r, decimalSep: i, thousandSep: a, valueFormatter: s }) {
+	let l = e.values[t] ?? 0, u = p.sum(Object.values(e.values)), h = u > 0 ? Math.round(l / u * 1e3) / 10 : 0, g = (e, t) => s ? s(e, t) : m(e, r, i, a);
 	return /* @__PURE__ */ f(o, {
 		sx: { py: .25 },
 		children: [
@@ -39,7 +39,7 @@ function ne({ barData: e, seriesKey: t, seriesLabel: n, decimals: r, decimalSep:
 				children: [
 					n,
 					": ",
-					m(s, r, i, a)
+					g(l, t)
 				]
 			}),
 			/* @__PURE__ */ f(c, {
@@ -50,48 +50,48 @@ function ne({ barData: e, seriesKey: t, seriesLabel: n, decimals: r, decimalSep:
 					mt: .25
 				},
 				children: [
-					u,
+					h,
 					"% · Total: ",
-					m(l, r, i, a)
+					g(u, "")
 				]
 			})
 		]
 	});
 }
-function h({ data: c, keys: m, size: h = 500, innerRadius: g, barPadding: _ = .12, chartColors: v, colorConfig: y, showLabels: b = !0, showGridLines: x = !0, gridLineCount: S = 3, showGridValues: re = !0, showLegend: C = !0, sortBy: w = "none", valueDecimalCount: ie = 0, valueDecimalSeparator: ae = ".", valueThousandsSeparator: oe = ",", gridValueFormatter: se, zoomable: T = !1, onBarClick: ce, disabled: E = !1, translation: D }) {
-	let O = l(), k = {
+function _({ data: c, keys: m, size: _ = 500, innerRadius: v, barPadding: y = .12, chartColors: b, colorConfig: x, showLabels: S = !0, showGridLines: C = !0, gridLineCount: w = 3, showGridValues: T = !0, showLegend: te = !0, sortBy: E = "none", valueDecimalCount: ne = 0, valueDecimalSeparator: re = ".", valueThousandsSeparator: ie = ",", valueFormatter: ae, gridValueFormatter: oe, zoomable: D = !1, onBarClick: O, disabled: k = !1, translation: se }) {
+	let A = l(), ce = {
 		...e,
-		...D
-	}, A = r(() => te(m), [m]), j = r(() => A.map((e) => e.key), [A]), M = c.length === 0 || A.length === 0, le = b ? 63 : 16, N = h / 2 - le, P = g == null ? Math.round(h * .18) : Math.max(0, Math.min(g, N - 1)), ue = [
-		O.palette.primary.main,
-		O.palette.secondary.main,
-		O.palette.success.main,
-		O.palette.warning.main,
-		O.palette.error.main,
-		O.palette.info.main,
+		...se
+	}, j = r(() => g(m), [m]), M = r(() => j.map((e) => e.key), [j]), N = c.length === 0 || j.length === 0, le = S ? 63 : 16, P = _ / 2 - le, F = v == null ? Math.round(_ * .18) : Math.max(0, Math.min(v, P - 1)), ue = [
+		A.palette.primary.main,
+		A.palette.secondary.main,
+		A.palette.success.main,
+		A.palette.warning.main,
+		A.palette.error.main,
+		A.palette.info.main,
 		"#8e24aa",
 		"#00897b",
 		"#f06292",
 		"#a1887f"
-	], F = v && v.length > 0 ? v : ue, I = t((e, t) => {
-		let n = y?.[e];
-		return n?.fill ? n.fill : F[t % F.length];
-	}, [y, F]), L = r(() => w === "value" ? [...c].sort((e, t) => p.sum(j, (e) => t.values[e] ?? 0) - p.sum(j, (t) => e.values[t] ?? 0)) : w === "label" ? [...c].sort((e, t) => e.label.localeCompare(t.label, void 0, {
+	], I = b && b.length > 0 ? b : ue, L = t((e, t) => {
+		let n = x?.[e];
+		return n?.fill ? n.fill : I[t % I.length];
+	}, [x, I]), R = r(() => E === "value" ? [...c].sort((e, t) => p.sum(M, (e) => t.values[e] ?? 0) - p.sum(M, (t) => e.values[t] ?? 0)) : E === "label" ? [...c].sort((e, t) => e.label.localeCompare(t.label, void 0, {
 		numeric: !0,
 		sensitivity: "base"
 	})) : c, [
 		c,
-		w,
-		j
-	]), R = r(() => p.max(L, (e) => p.sum(j, (t) => e.values[t] ?? 0)) ?? 0, [L, j]), z = r(() => p.scaleBand().domain(L.map((e) => e.id)).range([0, 2 * Math.PI]).padding(_), [L, _]), B = r(() => p.scaleLinear().domain([0, R]).range([P, N]), [
+		E,
+		M
+	]), z = r(() => p.max(R, (e) => p.sum(M, (t) => e.values[t] ?? 0)) ?? 0, [R, M]), B = r(() => p.scaleBand().domain(R.map((e) => e.id)).range([0, 2 * Math.PI]).padding(y), [R, y]), V = r(() => p.scaleLinear().domain([0, z]).range([F, P]), [
+		F,
 		P,
+		z
+	]), H = r(() => N ? [] : p.stack().keys(M).value((e, t) => e.values[t] ?? 0).order(p.stackOrderNone).offset(p.stackOffsetNone)(R), [
 		N,
-		R
-	]), V = r(() => M ? [] : p.stack().keys(j).value((e, t) => e.values[t] ?? 0).order(p.stackOrderNone).offset(p.stackOffsetNone)(L), [
-		M,
-		L,
-		j
-	]), H = r(() => p.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).innerRadius((e) => e.y0).outerRadius((e) => e.y1).padAngle(.008).padRadius(P + 10), [P]), U = r(() => R > 0 ? p.ticks(0, R, S).filter((e) => e > 0) : [], [R, S]), de = se ?? ee, [W, G] = a(1), K = i(null), [q, J] = a(`-${h / 2} -${h / 2} ${h} ${h}`), fe = r(() => {
+		R,
+		M
+	]), de = r(() => p.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).innerRadius((e) => e.y0).outerRadius((e) => e.y1).padAngle(.008).padRadius(F + 10), [F]), U = r(() => z > 0 ? p.ticks(0, z, w).filter((e) => e > 0) : [], [z, w]), fe = oe ?? h, [W, G] = a(1), K = i(null), [q, J] = a(`-${_ / 2} -${_ / 2} ${_} ${_}`), pe = r(() => {
 		if (W === 1) return q;
 		let [e, t, n, r] = q.split(" ").map(Number), i = n / W, a = r / W;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
@@ -104,125 +104,126 @@ function h({ data: c, keys: m, size: h = 500, innerRadius: g, barPadding: _ = .1
 				let t = e.getBBox();
 				J(`${t.x - 4} ${t.y - 4} ${t.width + 8} ${t.height + 8}`);
 			} catch {
-				J(`-${h / 2} -${h / 2} ${h} ${h}`);
+				J(`-${_ / 2} -${_ / 2} ${_} ${_}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
-		h,
+		_,
 		c,
 		m,
+		F,
 		P,
-		N,
-		b,
-		x
+		S,
+		C
 	]), n(() => {
-		if (E) return;
+		if (k) return;
 		let e = (e) => {
 			e.key === "Escape" && G(1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [E]);
-	let pe = t((e) => {
-		if (!T || E || !e.ctrlKey) return;
+	}, [k]);
+	let me = t((e) => {
+		if (!D || k || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
 		G((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [T, E]), me = -(A.length * 16) / 2, Y = Math.max(0, P * 2 - 10 - 5 - 10), X = 9 * .57, he = A.reduce((e, t) => Math.max(e, (t.label ?? t.key).length), 0), ge = -((15 + Math.min(he * X, Y)) / 2), Z = Math.max(1, Math.floor(Y / X)), _e = (e) => e.length <= Z ? e : `${e.slice(0, Z - 1)}…`, ve = {
+	}, [D, k]), he = -(j.length * 16) / 2, Y = Math.max(0, F * 2 - 10 - 5 - 10), X = 9 * .57, ge = j.reduce((e, t) => Math.max(e, (t.label ?? t.key).length), 0), _e = -((15 + Math.min(ge * X, Y)) / 2), Z = Math.max(1, Math.floor(Y / X)), ve = (e) => e.length <= Z ? e : `${e.slice(0, Z - 1)}…`, ye = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: E,
+		disableHoverListener: k,
 		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
-	}, Q = O.palette.text.primary, $ = O.palette.divider, ye = O.typography.fontFamily;
+	}, Q = A.palette.text.primary, $ = A.palette.divider, be = A.typography.fontFamily;
 	return /* @__PURE__ */ d(o, {
-		style: { opacity: E ? .5 : 1 },
+		style: { opacity: k ? .5 : 1 },
 		sx: {
 			display: "inline-flex",
-			cursor: E ? "not-allowed" : "default",
+			cursor: k ? "not-allowed" : "default",
 			userSelect: "none"
 		},
 		children: /* @__PURE__ */ d("svg", {
-			width: h,
-			height: h,
-			viewBox: fe,
-			onWheel: pe,
+			width: _,
+			height: _,
+			viewBox: pe,
+			onWheel: me,
 			style: {
-				fontFamily: ye ?? "sans-serif",
-				overflow: T && W > 1 ? "hidden" : "visible"
+				fontFamily: be ?? "sans-serif",
+				overflow: D && W > 1 ? "hidden" : "visible"
 			},
 			role: "img",
 			"aria-label": "Radial stacked bar chart",
 			children: /* @__PURE__ */ f("g", {
 				ref: K,
-				children: [M && /* @__PURE__ */ d("text", {
+				children: [N && /* @__PURE__ */ d("text", {
 					textAnchor: "middle",
 					dy: "0.35em",
 					fontSize: 13,
-					fill: O.palette.text.secondary,
-					children: k.noData
-				}), !M && /* @__PURE__ */ f(u, { children: [
-					x && U.map((e) => /* @__PURE__ */ d("circle", {
-						r: B(e),
+					fill: A.palette.text.secondary,
+					children: ce.noData
+				}), !N && /* @__PURE__ */ f(u, { children: [
+					C && U.map((e) => /* @__PURE__ */ d("circle", {
+						r: V(e),
 						fill: "none",
 						stroke: $,
 						strokeWidth: .5,
 						strokeDasharray: "3 2"
 					}, `grid-${e}`)),
-					x && /* @__PURE__ */ d("circle", {
-						r: P,
+					C && /* @__PURE__ */ d("circle", {
+						r: F,
 						fill: "none",
 						stroke: $,
 						strokeWidth: .75
 					}),
-					x && re && U.map((e) => /* @__PURE__ */ d("text", {
+					C && T && U.map((e) => /* @__PURE__ */ d("text", {
 						x: 0,
-						y: -B(e),
+						y: -V(e),
 						textAnchor: "middle",
 						dy: "-3",
 						fontSize: 9,
-						fill: O.palette.text.secondary,
+						fill: A.palette.text.secondary,
 						pointerEvents: "none",
-						children: de(e)
+						children: fe(e)
 					}, `gv-${e}`)),
-					V.map((e, t) => {
-						let n = e.key, r = A[t]?.label ?? n, i = I(n, t);
+					H.map((e, t) => {
+						let n = e.key, r = j[t]?.label ?? n, i = L(n, t);
 						return e.map((e, t) => {
-							let a = e.data, o = z(a.id) ?? 0, c = o + z.bandwidth(), l = B(e[0]), u = B(e[1]);
+							let a = e.data, o = B(a.id) ?? 0, c = o + B.bandwidth(), l = V(e[0]), u = V(e[1]);
 							if (u - l < .5) return null;
-							let f = H({
+							let f = de({
 								x0: o,
 								x1: c,
 								y0: l,
 								y1: u
 							}) ?? "";
 							return /* @__PURE__ */ d(s, {
-								...ve,
+								...ye,
 								placement: "top",
-								title: /* @__PURE__ */ d(ne, {
+								title: /* @__PURE__ */ d(ee, {
 									barData: a,
 									seriesKey: n,
 									seriesLabel: r,
-									decimals: ie,
-									decimalSep: ae,
-									thousandSep: oe
+									decimals: ne,
+									decimalSep: re,
+									thousandSep: ie,
+									valueFormatter: ae
 								}),
 								children: /* @__PURE__ */ d("path", {
 									d: f,
 									fill: i,
 									style: {
-										cursor: E ? "not-allowed" : "pointer",
+										cursor: k ? "not-allowed" : "pointer",
 										transition: "opacity 0.15s"
 									},
 									onMouseEnter: (e) => {
-										E || (e.currentTarget.style.opacity = "0.75");
+										k || (e.currentTarget.style.opacity = "0.75");
 									},
 									onMouseLeave: (e) => {
 										e.currentTarget.style.opacity = "1";
 									},
 									onClick: (e) => {
-										if (E) return;
-										let t = p.sum(j, (e) => a.values[e] ?? 0), r = {
+										if (k) return;
+										let t = p.sum(M, (e) => a.values[e] ?? 0), r = {
 											id: a.id,
 											label: a.label,
 											seriesKey: n,
@@ -230,14 +231,14 @@ function h({ data: c, keys: m, size: h = 500, innerRadius: g, barPadding: _ = .1
 											total: t,
 											values: a.values
 										};
-										ce?.(r, e);
+										O?.(r, e);
 									}
 								})
 							}, `${n}-${t}`);
 						});
 					}),
-					b && L.map((e) => {
-						let t = (z(e.id) ?? 0) + z.bandwidth() / 2, n = N + 8, r = n * Math.sin(t), i = -n * Math.cos(t), a = t * 180 / Math.PI;
+					S && R.map((e) => {
+						let t = (B(e.id) ?? 0) + B.bandwidth() / 2, n = P + 8, r = n * Math.sin(t), i = -n * Math.cos(t), a = t * 180 / Math.PI;
 						return /* @__PURE__ */ d("text", {
 							x: r,
 							y: i,
@@ -250,11 +251,11 @@ function h({ data: c, keys: m, size: h = 500, innerRadius: g, barPadding: _ = .1
 							children: e.label
 						}, `lbl-${e.id}`);
 					}),
-					C && /* @__PURE__ */ d("g", {
+					te && /* @__PURE__ */ d("g", {
 						pointerEvents: "none",
-						transform: `translate(${ge},0)`,
-						children: A.map((e, t) => {
-							let n = I(e.key, t), r = me + t * 16, i = _e(e.label ?? e.key);
+						transform: `translate(${_e},0)`,
+						children: j.map((e, t) => {
+							let n = L(e.key, t), r = he + t * 16, i = ve(e.label ?? e.key);
 							return /* @__PURE__ */ f("g", {
 								transform: `translate(0,${r})`,
 								children: [/* @__PURE__ */ d("rect", {
@@ -280,6 +281,6 @@ function h({ data: c, keys: m, size: h = 500, innerRadius: g, barPadding: _ = .1
 		})
 	});
 }
-h.displayName = "RadialStackedBarChart";
+_.displayName = "RadialStackedBarChart";
 //#endregion
-export { h as RadialStackedBarChart };
+export { _ as RadialStackedBarChart };

package/dist/components/radial-stacked-bar-chart/RadialStackedBarChart.types.d.ts

@@ -74,6 +74,14 @@ export type RadialStackedBarChartProps = {
     valueDecimalSeparator?: string;
     /** Thousands separator for values (default: ',') */
     valueThousandsSeparator?: string;
+    /**
+     * Custom formatter for tooltip bar values. Overrides `valueDecimalCount`,
+     * `valueDecimalSeparator`, and `valueThousandsSeparator` when provided.
+     * `seriesKey` is the key from `series` — use it to format different series differently.
+     * Example: `(v, key) => key === 'revenue' ? \`$${v.toFixed(0)}\` : \`${v} kg\``
+     * @since 3.22.0
+     */
+    valueFormatter?: (value: number, seriesKey: string) => string;
     /**
      * Custom formatter for the grid ring value labels.
      * Defaults to compact notation (e.g. 30000 → "30k", 3000000 → "3M").

package/dist/components/sunburst-chart/SunburstChart.d.ts

@@ -1,5 +1,5 @@
 import { type SunburstChartProps } from "./SunburstChart.types";
-export declare function SunburstChart({ data, size, showSegmentLabels, innerRadius, sortBy, chartColors, showRootLabel, onSegmentClick, onZoomChange, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, zoomable, duration, disabled, translation, }: SunburstChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function SunburstChart({ data, size, showSegmentLabels, innerRadius, sortBy, chartColors, showRootLabel, onSegmentClick, onZoomChange, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, zoomable, duration, disabled, translation, }: SunburstChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SunburstChart {
     var displayName: string;
 }

package/dist/components/sunburst-chart/SunburstChart.js

@@ -14,8 +14,8 @@ function te(e, t) {
 	let n = Math.floor(t / h);
 	return n <= 0 ? "" : e.length <= n ? e : n < g ? "" : e.slice(0, n - 1) + "…";
 }
-function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r }) {
-	let i = (e.value ?? 0) > 0, a = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
+function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r, valueFormatter: i }) {
+	let a = (e.value ?? 0) > 0, o = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
 	return /* @__PURE__ */ d(s, {
 		sx: { py: .25 },
 		children: [
@@ -27,13 +27,13 @@ function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 				},
 				children: e.data.name
 			}),
-			i && /* @__PURE__ */ u(l, {
+			a && /* @__PURE__ */ u(l, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .85
 				},
-				children: _(e.value ?? 0, t, n, r)
+				children: ((e) => i ? i(e) : _(e, t, n, r))(e.value ?? 0)
 			}),
 			e.depth > 0 && /* @__PURE__ */ u(l, {
 				variant: "caption",
@@ -42,27 +42,27 @@ function ne({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 					opacity: .65,
 					mt: .25
 				},
-				children: a
+				children: o
 			})
 		]
 	});
 }
-function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ = 0, sortBy: v = "value", chartColors: y, showRootLabel: b = !0, onSegmentClick: x, onZoomChange: S, valueDecimalCount: re = 0, valueDecimalSeparator: ie = ".", valueThousandsSeparator: ae = ",", zoomable: C = !1, duration: w = 750, disabled: T = !1, translation: oe }) {
-	let E = ee(), se = {
+function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ = 0, sortBy: v = "value", chartColors: y, showRootLabel: b = !0, onSegmentClick: x, onZoomChange: S, valueDecimalCount: re = 0, valueDecimalSeparator: ie = ".", valueThousandsSeparator: ae = ",", valueFormatter: oe, zoomable: C = !1, duration: w = 750, disabled: T = !1, translation: se }) {
+	let E = ee(), ce = {
 		...e,
-		...oe
-	}, D = !l.children?.length && !l.value, O = a(null), [k, A] = o(`-${h / 2} -${h / 2} ${h} ${h}`), [j, M] = o(1), ce = i(() => {
+		...se
+	}, D = !l.children?.length && !l.value, O = a(null), [k, A] = o(`-${h / 2} -${h / 2} ${h} ${h}`), [j, M] = o(1), le = i(() => {
 		if (j === 1) return k;
 		let [e, t, n, r] = k.split(" ").map(Number), i = n / j, a = r / j;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
-	}, [k, j]), N = h / 2, P = Math.max(0, Math.min(_, Math.max(0, N - 1))), F = Math.max(1, N - P), le = [
+	}, [k, j]), N = h / 2, P = Math.max(0, Math.min(_, Math.max(0, N - 1))), F = Math.max(1, N - P), ue = [
 		E.palette.primary.main,
 		E.palette.secondary.main,
 		E.palette.error.main,
 		E.palette.warning.main,
 		E.palette.success.main,
 		E.palette.info.main
-	], I = y && y.length > 0 ? y : le, { root: L, ringThickness: R } = i(() => {
+	], I = y && y.length > 0 ? y : ue, { root: L, ringThickness: R } = i(() => {
 		let e = f.hierarchy(l).sum((e) => e.value ?? 0);
 		v === "value" ? e.sort((e, t) => (t.value ?? 0) - (e.value ?? 0)) : e.sort((e, t) => String(e.data.name).localeCompare(String(t.data.name), void 0, {
 			numeric: !0,
@@ -79,22 +79,22 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		l,
 		F,
 		v
-	]), [z, B] = o(L), [ue, de] = o(L), V = (e) => ({
+	]), [z, B] = o(L), [de, fe] = o(L), V = (e) => ({
 		x0: e.x0,
 		x1: e.x1,
 		yShift: e.depth === 0 ? 0 : (e.depth - 1) * R
 	}), [H, U] = o(() => V(L)), W = a(H);
-	if (ue !== L) {
-		de(L), B(L);
+	if (de !== L) {
+		fe(L), B(L);
 		let e = V(L);
 		W.current = e, U(e);
 	}
-	let G = i(() => L.children?.map((e) => e.data.name) ?? [L.data.name], [L]), fe = i(() => f.scaleOrdinal().domain(G).range(I), [I, G]), pe = (e) => {
+	let G = i(() => L.children?.map((e) => e.data.name) ?? [L.data.name], [L]), pe = i(() => f.scaleOrdinal().domain(G).range(I), [I, G]), me = (e) => {
 		if (e.data.colorConfig?.fill) return e.data.colorConfig.fill;
 		let t = e;
 		for (; t.depth > 1;) t = t.parent;
-		return fe(t.data.name);
-	}, me = i(() => f.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(N / 2).innerRadius((e) => P + e.y0).outerRadius((e) => P + e.y1 - 1), [N, P]), K = t((e) => {
+		return pe(t.data.name);
+	}, he = i(() => f.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(N / 2).innerRadius((e) => P + e.y0).outerRadius((e) => P + e.y1 - 1), [N, P]), K = t((e) => {
 		let t = p / (H.x1 - H.x0);
 		return {
 			x0: Math.max(0, Math.min(p, (e.x0 - H.x0) * t)),
@@ -126,10 +126,10 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		R,
 		w
 	]);
-	let he = (e) => e.x1 > e.x0 && e.y1 > e.y0, ge = (e) => (P + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, _e = (e) => {
+	let ge = (e) => e.x1 > e.x0 && e.y1 > e.y0, _e = (e) => (P + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, ve = (e) => {
 		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = P + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
 		return `rotate(${t - 90}) translate(${n},0) rotate(${r})`;
-	}, ve = t((e) => e.ancestors().includes(z), [z]), q = t((e) => {
+	}, ye = t((e) => e.ancestors().includes(z), [z]), q = t((e) => {
 		let t = e.ancestors().reverse(), n = e.value ?? 0, r = L.value ?? 0;
 		return {
 			id: e.data.id,
@@ -172,7 +172,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		R,
 		b
 	]);
-	let Y = a(null), ye = (e) => {
+	let Y = a(null), be = (e) => {
 		Y.current &&= (clearTimeout(Y.current), null), Y.current = setTimeout(() => {
 			e(), Y.current = null;
 		}, 250);
@@ -190,22 +190,22 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		L,
 		J
 	]);
-	let be = t((e) => {
+	let xe = t((e) => {
 		if (!C || T || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
 		M((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [C, T]), Z = L.descendants().filter((e) => e.depth > 0), xe = (e) => {
+	}, [C, T]), Z = L.descendants().filter((e) => e.depth > 0), Se = (e) => {
 		if (T) return;
 		let t = Z[Number(e.currentTarget.getAttribute("data-idx"))];
 		if (t) {
 			if (e.ctrlKey || e.metaKey) {
-				t.children && ye(() => J(t));
+				t.children && be(() => J(t));
 				return;
 			}
 			x?.(q(t), e);
 		}
-	}, Se = (e) => {
+	}, Ce = (e) => {
 		T || (e.ctrlKey || e.metaKey) && (X(), J(z.parent ?? L));
 	}, Q = (e) => {
 		if (!T) {
@@ -221,7 +221,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		enterNextDelay: 0,
 		disableHoverListener: T,
 		slotProps: { tooltip: { sx: { maxWidth: 260 } } }
-	}, Ce = E.palette.text.primary, we = E.typography.fontFamily;
+	}, we = E.palette.text.primary, Te = E.typography.fontFamily;
 	return /* @__PURE__ */ u(s, {
 		sx: {
 			display: "inline-flex",
@@ -232,10 +232,10 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 		children: /* @__PURE__ */ u("svg", {
 			width: h,
 			height: h,
-			viewBox: ce,
-			onWheel: be,
+			viewBox: le,
+			onWheel: xe,
 			style: {
-				fontFamily: we ?? "sans-serif",
+				fontFamily: Te ?? "sans-serif",
 				overflow: C && j > 1 ? "hidden" : "visible"
 			},
 			role: "img",
@@ -248,7 +248,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 						dy: "0.35em",
 						fontSize: 13,
 						fill: E.palette.text.secondary,
-						children: se.noData
+						children: ce.noData
 					}),
 					P > 0 && /* @__PURE__ */ u(c, {
 						...$,
@@ -265,7 +265,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 						})
 					}),
 					/* @__PURE__ */ u("g", { children: Z.map((e, t) => {
-						let n = K(e), r = he(n), i = !!e.children;
+						let n = K(e), r = ge(n), i = !!e.children;
 						return /* @__PURE__ */ u(c, {
 							...$,
 							placement: "top",
@@ -273,34 +273,35 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 								node: e,
 								valueDecimalCount: re,
 								valueDecimalSep: ie,
-								valueThousandsSep: ae
+								valueThousandsSep: ae,
+								valueFormatter: oe
 							}) : "",
 							children: /* @__PURE__ */ u("path", {
 								"data-idx": t,
-								d: me(n) || "",
-								fill: pe(e),
+								d: he(n) || "",
+								fill: me(e),
 								fillOpacity: r ? i ? .75 : .5 : 0,
 								style: {
 									pointerEvents: r && !T ? "auto" : "none",
 									cursor: i && !T ? "pointer" : "default",
 									transition: "fill-opacity 0.15s"
 								},
-								onClick: xe,
-								onDoubleClick: Se
+								onClick: Se,
+								onDoubleClick: Ce
 							})
 						}, `tt-${e.data.id}-${t}`);
 					}) }),
 					g && /* @__PURE__ */ u("g", {
 						pointerEvents: "none",
 						textAnchor: "middle",
-						fill: Ce,
+						fill: we,
 						children: Z.map((e, t) => {
-							if (!ve(e)) return null;
+							if (!ye(e)) return null;
 							let n = K(e);
-							if (!ge(n)) return null;
+							if (!_e(n)) return null;
 							let r = (P + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = te(e.data.name, r);
 							return i ? /* @__PURE__ */ u("text", {
-								transform: _e(n),
+								transform: ve(n),
 								dy: "0.35em",
 								fontSize: m,
 								children: i
@@ -313,7 +314,7 @@ function v({ data: l, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ =
 						title: "",
 						children: /* @__PURE__ */ u("g", {
 							textAnchor: "middle",
-							fill: Ce,
+							fill: we,
 							pointerEvents: T ? "none" : "auto",
 							onClick: Q,
 							style: { cursor: z !== L && !T ? "pointer" : "default" },

package/dist/components/sunburst-chart/SunburstChart.types.d.ts

@@ -64,6 +64,13 @@ export type SunburstChartProps = {
     valueDecimalSeparator?: string;
     /** Thousands separator for values (default: ',') */
     valueThousandsSeparator?: string;
+    /**
+     * Custom formatter for numeric values in tooltips. Overrides `valueDecimalCount`,
+     * `valueDecimalSeparator`, and `valueThousandsSeparator`.
+     * Example: `(v) => \`${v.toLocaleString('de-DE')} MB\``
+     * @since 3.22.0
+     */
+    valueFormatter?: (value: number) => string;
     /** Enable Ctrl+Scroll zoom — content outside `size` is clipped (default: false) */
     zoomable?: boolean;
     /** Drill-down/out transition duration in ms — set to 0 to disable animation (default: 750) */