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

package/dist/components/circle-packing-chart/CirclePackingChart.js

@@ -5,61 +5,61 @@ import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import * as p from "d3";
 //#region src/components/circle-packing-chart/CirclePackingChart.tsx
 var m = .56;
-function ee(e, t, n) {
+function h(e, t, n) {
 	return e.length * n * m <= t ? e : t >= 3 * n * m + n * 2 ? "…" : "";
 }
-function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLabels: v = !0, showAllLabels: y = !1, labelFontSize: te = 13, innerLabelFontSize: b = 9, labelColor: ne, chartColors: x, depthColorStart: S, depthColorEnd: C, background: w, duration: T = 750, zoomable: E = !1, disabled: D = !1, onCircleClick: O, onZoomChange: k, translation: re }) {
-	let A = u(), ie = {
+function g({ data: m, size: g = 600, padding: _ = 3, sortBy: v = "value", showLabels: y = !0, showAllLabels: b = !1, labelFontSize: ee = 13, innerLabelFontSize: x = 9, labelColor: te, chartColors: S, depthColorStart: C, depthColorEnd: w, background: T, duration: E = 750, zoomable: D = !1, disabled: O = !1, onCircleClick: k, onZoomChange: A, valueFormatter: j, translation: ne }) {
+	let M = u(), re = {
 		...e,
-		...re
-	}, ae = !m.children?.length && !m.value, oe = [
-		A.palette.primary.main,
-		A.palette.secondary.main,
-		A.palette.error.main,
-		A.palette.warning.main,
-		A.palette.success.main,
-		A.palette.info.main
-	], j = ne || A.palette.text.primary, M = w || A.palette.background.default, se = A.typography.fontFamily, N = i(() => {
+		...ne
+	}, ie = !m.children?.length && !m.value, ae = [
+		M.palette.primary.main,
+		M.palette.secondary.main,
+		M.palette.error.main,
+		M.palette.warning.main,
+		M.palette.success.main,
+		M.palette.info.main
+	], N = te || M.palette.text.primary, P = T || M.palette.background.default, F = M.typography.fontFamily, I = i(() => {
 		let e = p.hierarchy(m).sum((e) => e.value ?? 0);
-		return _ === "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, {
+		return 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,
 			sensitivity: "base"
-		})), p.pack().size([h, h]).padding(g)(e);
+		})), p.pack().size([g, g]).padding(_)(e);
 	}, [
 		m,
-		h,
 		g,
-		_
-	]), P = N.descendants(), F = i(() => p.max(P, (e) => e.depth) ?? 0, [P]), I = !!(S && C), L = i(() => I ? p.scaleSequential(p.interpolateHcl(S, C)).domain([0, Math.max(1, F)]) : null, [
-		I,
-		S,
+		_,
+		v
+	]), L = I.descendants(), R = i(() => p.max(L, (e) => e.depth) ?? 0, [L]), z = !!(C && w), B = i(() => z ? p.scaleSequential(p.interpolateHcl(C, w)).domain([0, Math.max(1, R)]) : null, [
+		z,
 		C,
-		F
-	]), R = x && x.length > 0 ? x : oe, ce = t((e) => e.data.colorConfig?.fill ? e.data.colorConfig.fill : I && L ? e.children ? L(e.depth) : A.palette.background.paper : R[e.depth % R.length], [
-		I,
-		L,
-		R,
-		A
-	]), [z, B] = o(1), V = t((e) => {
-		if (!E || D || !e.ctrlKey) return;
+		w,
+		R
+	]), V = S && S.length > 0 ? S : ae, oe = t((e) => e.data.colorConfig?.fill ? e.data.colorConfig.fill : z && B ? e.children ? B(e.depth) : M.palette.background.paper : V[e.depth % V.length], [
+		z,
+		B,
+		V,
+		M
+	]), [H, U] = o(1), se = t((e) => {
+		if (!D || O || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		B((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [E, D]);
+		U((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [D, O]);
 	r(() => {
-		if (!E) return;
+		if (!D) return;
 		let e = (e) => {
-			e.key === "Escape" && B(1);
+			e.key === "Escape" && U(1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [E]);
-	let H = i(() => {
-		let e = `${-h / 2} ${-h / 2} ${h} ${h}`;
-		if (z === 1) return e;
-		let t = h / z, n = (h - t) / 2;
-		return `${-h / 2 + n} ${-h / 2 + n} ${t} ${t}`;
-	}, [h, z]), U = t((e) => {
-		let t = e.value ?? 0, n = N.value ?? 0;
+	}, [D]);
+	let ce = i(() => {
+		let e = `${-g / 2} ${-g / 2} ${g} ${g}`;
+		if (H === 1) return e;
+		let t = g / H, n = (g - t) / 2;
+		return `${-g / 2 + n} ${-g / 2 + n} ${t} ${t}`;
+	}, [g, H]), le = t((e) => {
+		let t = e.value ?? 0, n = I.value ?? 0;
 		return {
 			id: e.data.id ?? null,
 			name: e.data.name,
@@ -70,51 +70,51 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 			childrenCount: e.children?.length ?? 0,
 			data: e.data
 		};
-	}, [N]), W = a(null), G = a([
-		N.x,
-		N.y,
-		N.r * 2
-	]), K = a(N), [q, le] = o(N), J = t((e) => {
-		K.current = e, le(e);
-	}, []), [ue, de] = o(N);
-	ue !== N && (de(N), J(N), K.current = N);
+	}, [I]), W = a(null), G = a([
+		I.x,
+		I.y,
+		I.r * 2
+	]), K = a(I), [q, ue] = o(I), J = t((e) => {
+		K.current = e, ue(e);
+	}, []), [de, fe] = o(I);
+	de !== I && (fe(I), J(I), K.current = I);
 	let Y = t((e) => {
 		let t = W.current;
 		if (!t) return;
 		G.current = e;
-		let n = h / e[2], r = K.current, i = t.querySelectorAll("g[data-role='nodes'] > g"), a = t.querySelectorAll("g[data-role='nodes'] > g > circle");
-		for (let t = 0; t < P.length; t++) {
-			let r = P[t], o = i[t];
+		let n = g / e[2], r = K.current, i = t.querySelectorAll("g[data-role='nodes'] > g"), a = t.querySelectorAll("g[data-role='nodes'] > g > circle");
+		for (let t = 0; t < L.length; t++) {
+			let r = L[t], o = i[t];
 			o && o.setAttribute("transform", `translate(${(r.x - e[0]) * n},${(r.y - e[1]) * n})`);
 			let s = t - 1;
 			s >= 0 && a[s] && a[s].setAttribute("r", String(r.r * n));
 		}
-		if (v) {
+		if (y) {
 			let r = t.querySelectorAll("g[data-role='labels'] > text");
-			for (let t = 0; t < P.length; t++) {
-				let i = P[t], a = r[t];
+			for (let t = 0; t < L.length; t++) {
+				let i = L[t], a = r[t];
 				a && (a.setAttribute("transform", `translate(${(i.x - e[0]) * n},${(i.y - e[1]) * n})`), a.setAttribute("font-weight", i.children ? "bold" : "normal"));
 			}
 		}
-		if (y) {
+		if (b) {
 			let i = t.querySelectorAll("g[data-role='inner-labels'] > text");
-			for (let t = 0; t < P.length; t++) {
-				let a = P[t], o = i[t];
+			for (let t = 0; t < L.length; t++) {
+				let a = L[t], o = i[t];
 				if (!o) continue;
-				let s = a.r * n, c = s * 1.6, l = r === N ? a !== N : a.ancestors().includes(r), u = a.parent === r;
+				let s = a.r * n, c = s * 1.6, l = r === I ? a !== I : a.ancestors().includes(r), u = a.parent === r;
 				if (l && !u && s >= 14) {
-					let t = ee(a.data.name, c, b);
+					let t = h(a.data.name, c, x);
 					t ? (o.textContent = t, o.setAttribute("transform", `translate(${(a.x - e[0]) * n},${(a.y - e[1]) * n})`), o.setAttribute("font-weight", a.children ? "bold" : "normal"), o.style.display = "inline") : o.style.display = "none";
 				} else o.style.display = "none";
 			}
 		}
 	}, [
-		P,
-		h,
-		v,
+		L,
+		g,
 		y,
 		b,
-		N
+		x,
+		I
 	]);
 	r(() => {
 		Y([
@@ -123,8 +123,8 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 			q.r * 2
 		]);
 	}, [
-		N,
-		h,
+		I,
+		g,
 		q,
 		Y
 	]);
@@ -141,24 +141,24 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 			return (t) => Y(e(t));
 		});
 		let o = n.querySelectorAll("g[data-role='labels'] > text");
-		p.selectAll(o).transition().duration(t).ease(p.easeCubic).style("fill-opacity", (t, n) => +(P[n].parent === e)).on("start", function(t, n) {
-			P[n].parent === e && (this.style.display = "inline");
+		p.selectAll(o).transition().duration(t).ease(p.easeCubic).style("fill-opacity", (t, n) => +(L[n].parent === e)).on("start", function(t, n) {
+			L[n].parent === e && (this.style.display = "inline");
 		}).on("end", function(t, n) {
-			P[n].parent !== e && (this.style.display = "none");
-		}), k?.({
+			L[n].parent !== e && (this.style.display = "none");
+		}), A?.({
 			previousName: r.data.name,
 			currentName: e.data.name,
 			currentDepth: e.depth,
-			isRoot: e === N
+			isRoot: e === I
 		});
 	}, [
 		q,
-		P,
-		N,
+		L,
+		I,
 		Y,
-		k,
+		A,
 		J
-	]), Z = a(null), fe = (e) => {
+	]), Z = a(null), pe = (e) => {
 		Z.current &&= (clearTimeout(Z.current), null), Z.current = setTimeout(() => {
 			e(), Z.current = null;
 		}, 250);
@@ -168,63 +168,63 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 	n(() => {
 		$.current = X;
 	}, [X]), r(() => {
-		if (D) return;
+		if (O) return;
 		let e = (e) => {
-			e.key === "Escape" && (Q(), $.current(N, T));
+			e.key === "Escape" && (Q(), $.current(I, E));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		D,
-		N,
-		T
+		O,
+		I,
+		E
 	]);
-	let pe = (e) => {
-		if (D || !(e.ctrlKey || e.metaKey)) return;
+	let me = (e) => {
+		if (O || !(e.ctrlKey || e.metaKey)) return;
 		Q(), e.preventDefault();
-		let t = q.parent ?? N;
-		t !== q && X(t, e.altKey ? Math.max(250, T * 10) : T);
-	}, me = {
+		let t = q.parent ?? I;
+		t !== q && X(t, e.altKey ? Math.max(250, E * 10) : E);
+	}, he = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: D,
+		disableHoverListener: O,
 		slotProps: { tooltip: { sx: { maxWidth: 220 } } }
 	};
 	return /* @__PURE__ */ f(s, {
 		sx: {
 			display: "inline-flex",
 			position: "relative",
-			opacity: D ? .5 : 1,
-			cursor: D ? "not-allowed" : "default",
+			opacity: O ? .5 : 1,
+			cursor: O ? "not-allowed" : "default",
 			userSelect: "none"
 		},
 		children: [/* @__PURE__ */ f("svg", {
 			ref: W,
-			width: h,
-			height: h,
-			viewBox: H,
-			onWheel: V,
+			width: g,
+			height: g,
+			viewBox: ce,
+			onWheel: se,
 			style: {
 				display: "block",
-				background: M,
-				fontFamily: se ?? "sans-serif",
-				overflow: E && z > 1 ? "hidden" : "visible"
+				background: P,
+				fontFamily: F ?? "sans-serif",
+				overflow: D && H > 1 ? "hidden" : "visible"
 			},
 			role: "img",
 			"aria-label": m.name,
-			onDoubleClick: pe,
+			onDoubleClick: me,
 			children: [
-				ae && /* @__PURE__ */ d("text", {
+				ie && /* @__PURE__ */ d("text", {
 					textAnchor: "middle",
 					dy: "0.35em",
 					fontSize: 13,
-					fill: A.palette.text.secondary,
-					children: ie.noData
+					fill: M.palette.text.secondary,
+					children: re.noData
 				}),
 				/* @__PURE__ */ d("g", {
 					"data-role": "nodes",
-					children: P.map((e, t) => {
-						let n = U(e), r = /* @__PURE__ */ f(s, {
+					children: L.map((e, t) => {
+						let n = le(e), r = /* @__PURE__ */ f(s, {
 							sx: {
 								py: .5,
 								minWidth: 160
@@ -256,7 +256,7 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 											children: "Value"
 										}), /* @__PURE__ */ d(l, {
 											variant: "caption",
-											children: e.value?.toLocaleString()
+											children: j ? j(e.value ?? 0) : (e.value ?? 0).toLocaleString()
 										})]
 									}),
 									/* @__PURE__ */ f(s, {
@@ -293,42 +293,42 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 							})]
 						});
 						return /* @__PURE__ */ d("g", {
-							transform: `translate(${e.x - h / 2},${e.y - h / 2})`,
+							transform: `translate(${e.x - g / 2},${e.y - g / 2})`,
 							children: t === 0 ? null : /* @__PURE__ */ d(c, {
-								...me,
+								...he,
 								title: r,
 								children: /* @__PURE__ */ d("circle", {
 									r: e.r,
-									fill: ce(e),
-									stroke: e.data.colorConfig?.stroke ?? A.palette.background.paper,
+									fill: oe(e),
+									stroke: e.data.colorConfig?.stroke ?? M.palette.background.paper,
 									strokeWidth: .75,
 									style: {
-										cursor: D ? "not-allowed" : e.children ? "pointer" : "default",
+										cursor: O ? "not-allowed" : e.children ? "pointer" : "default",
 										transition: "stroke-width 0.1s"
 									},
 									onMouseEnter: (e) => {
-										D || (e.currentTarget.style.strokeWidth = "2");
+										O || (e.currentTarget.style.strokeWidth = "2");
 									},
 									onMouseLeave: (e) => {
 										e.currentTarget.style.strokeWidth = "0.75";
 									},
 									onClick: (t) => {
-										if (!D) {
+										if (!O) {
 											if (t.ctrlKey || t.metaKey) {
 												if (e.children) {
-													let n = t.altKey ? Math.max(250, T * 10) : T;
-													fe(() => X(e, n));
+													let n = t.altKey ? Math.max(250, E * 10) : E;
+													pe(() => X(e, n));
 												}
 												return;
 											}
-											O?.(n, t);
+											k?.(n, t);
 										}
 									},
 									onDoubleClick: (e) => {
-										if (!D && (e.ctrlKey || e.metaKey)) {
+										if (!O && (e.ctrlKey || e.metaKey)) {
 											Q(), e.preventDefault(), e.stopPropagation();
-											let t = q.parent ?? N;
-											t !== q && X(t, e.altKey ? Math.max(250, T * 10) : T);
+											let t = q.parent ?? I;
+											t !== q && X(t, e.altKey ? Math.max(250, E * 10) : E);
 										}
 									}
 								})
@@ -336,36 +336,36 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 						}, `n-${t}`);
 					})
 				}),
-				v && /* @__PURE__ */ d("g", {
+				y && /* @__PURE__ */ d("g", {
 					"data-role": "labels",
 					textAnchor: "middle",
 					dominantBaseline: "middle",
 					pointerEvents: "none",
-					fontSize: te,
-					fill: j,
-					children: P.map((e, t) => /* @__PURE__ */ d("text", {
-						transform: `translate(${e.x - h / 2},${e.y - h / 2})`,
+					fontSize: ee,
+					fill: N,
+					children: L.map((e, t) => /* @__PURE__ */ d("text", {
+						transform: `translate(${e.x - g / 2},${e.y - g / 2})`,
 						style: {
-							display: e.parent === N ? "inline" : "none",
-							fillOpacity: +(e.parent === N)
+							display: e.parent === I ? "inline" : "none",
+							fillOpacity: +(e.parent === I)
 						},
 						children: e.data.name
 					}, `lbl-${t}`))
 				}),
-				y && /* @__PURE__ */ d("g", {
+				b && /* @__PURE__ */ d("g", {
 					"data-role": "inner-labels",
 					textAnchor: "middle",
 					dominantBaseline: "middle",
 					pointerEvents: "none",
-					fontSize: b,
-					fill: j,
-					children: P.map((e, t) => /* @__PURE__ */ d("text", {
-						transform: `translate(${e.x - h / 2},${e.y - h / 2})`,
+					fontSize: x,
+					fill: N,
+					children: L.map((e, t) => /* @__PURE__ */ d("text", {
+						transform: `translate(${e.x - g / 2},${e.y - g / 2})`,
 						style: { display: "none" }
 					}, `inner-lbl-${t}`))
 				})
 			]
-		}), q !== N && !D && /* @__PURE__ */ d(s, {
+		}), q !== I && !O && /* @__PURE__ */ d(s, {
 			sx: {
 				position: "absolute",
 				bottom: 6,
@@ -390,6 +390,6 @@ function h({ data: m, size: h = 600, padding: g = 3, sortBy: _ = "value", showLa
 		})]
 	});
 }
-h.displayName = "CirclePackingChart";
+g.displayName = "CirclePackingChart";
 //#endregion
-export { h as CirclePackingChart };
+export { g as CirclePackingChart };

package/dist/components/circle-packing-chart/CirclePackingChart.types.d.ts

@@ -99,6 +99,13 @@ export type CirclePackingChartProps = {
     onCircleClick?: (info: CirclePackingNodeInfo, event: React.MouseEvent<SVGCircleElement>) => void;
     /** Fires when the zoom focus changes */
     onZoomChange?: (zoom: CirclePackingZoomInfo) => void;
+    /**
+     * Custom formatter for numeric node values shown in tooltips.
+     * When omitted, values are formatted with `toLocaleString()`.
+     * Example: `(v) => \`${v.toLocaleString('de-DE')} MB\``
+     * @since 3.22.0
+     */
+    valueFormatter?: (value: number) => string;
     /** Override translation strings */
     translation?: Partial<CirclePackingTranslation>;
 };

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

@@ -1,5 +1,5 @@
 import { type RadialStackedBarChartProps } from "./RadialStackedBarChart.types";
-export declare function RadialStackedBarChart({ data, keys, size, innerRadius, barPadding, chartColors, colorConfig, showLabels, showGridLines, gridLineCount, showGridValues, showLegend, sortBy, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, gridValueFormatter, zoomable, onBarClick, disabled, translation, }: RadialStackedBarChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function RadialStackedBarChart({ data, keys, size, innerRadius, barPadding, chartColors, colorConfig, showLabels, showGridLines, gridLineCount, showGridValues, showLegend, sortBy, valueDecimalCount, valueDecimalSeparator, valueThousandsSeparator, valueFormatter, gridValueFormatter, zoomable, onBarClick, disabled, translation, }: RadialStackedBarChartProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace RadialStackedBarChart {
     var displayName: string;
 }