@thebuoyant-tsdev/mui-ts-library 3.8.0 → 3.11.0

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

@@ -1,24 +1,24 @@
-import { useCallback as e, useLayoutEffect as t, useMemo as n, useRef as r, useState as i } from "react";
-import { Box as a, Tooltip as o, Typography as s, useTheme as c } from "@mui/material";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import * as d from "d3";
+import { useCallback as e, useEffect as t, useLayoutEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { Box as o, Tooltip as s, Typography as c, useTheme as l } from "@mui/material";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import * as f from "d3";
 //#region src/components/sunburst-chart/SunburstChart.tsx
-var f = 2 * Math.PI, p = 11, m = p * .5, h = 5;
-function g(e, t = 0, n = ".", r = ",") {
+var p = 2 * Math.PI, m = 11, h = m * .5, g = 5;
+function _(e, t = 0, n = ".", r = ",") {
 	if (e == null || !isFinite(e)) return "0";
 	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, t) {
-	let n = Math.floor(t / m);
-	return n <= 0 ? "" : e.length <= n ? e : n < h ? "" : e.slice(0, n - 1) + "…";
+	let n = Math.floor(t / h);
+	return n <= 0 ? "" : e.length <= n ? e : n < g ? "" : e.slice(0, n - 1) + "…";
 }
 function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsSep: r }) {
-	let i = (e.value ?? 0) > 0, o = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
-	return /* @__PURE__ */ u(a, {
+	let i = (e.value ?? 0) > 0, a = e.ancestors().map((e) => e.data.name).reverse().join(" › ");
+	return /* @__PURE__ */ d(o, {
 		sx: { py: .25 },
 		children: [
-			/* @__PURE__ */ l(s, {
+			/* @__PURE__ */ u(c, {
 				variant: "caption",
 				sx: {
 					fontWeight: "bold",
@@ -26,45 +26,45 @@ function te({ node: e, valueDecimalCount: t, valueDecimalSep: n, valueThousandsS
 				},
 				children: e.data.name
 			}),
-			i && /* @__PURE__ */ l(s, {
+			i && /* @__PURE__ */ u(c, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .85
 				},
-				children: g(e.value ?? 0, t, n, r)
+				children: _(e.value ?? 0, t, n, r)
 			}),
-			e.depth > 0 && /* @__PURE__ */ l(s, {
+			e.depth > 0 && /* @__PURE__ */ u(c, {
 				variant: "caption",
 				sx: {
 					display: "block",
 					opacity: .65,
 					mt: .25
 				},
-				children: o
+				children: a
 			})
 		]
 	});
 }
-function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g = 0, sortBy: _ = "value", chartColors: v, showRootLabel: y = !0, onSegmentClick: b, onZoomChange: x, valueDecimalCount: ne = 0, valueDecimalSeparator: re = ".", valueThousandsSeparator: S = ",", zoomable: C = !1, disabled: w = !1 }) {
-	let T = c(), E = r(null), [D, O] = i(`-${m / 2} -${m / 2} ${m} ${m}`), [k, A] = i(1), ie = n(() => {
-		if (k === 1) return D;
-		let [e, t, n, r] = D.split(" ").map(Number), i = n / k, a = r / k;
+function v({ data: c, size: h = 500, showSegmentLabels: g = !0, innerRadius: _ = 0, sortBy: v = "value", chartColors: y, showRootLabel: b = !0, onSegmentClick: x, onZoomChange: S, valueDecimalCount: ne = 0, valueDecimalSeparator: re = ".", valueThousandsSeparator: ie = ",", zoomable: C = !1, duration: w = 750, disabled: T = !1 }) {
+	let E = l(), D = i(null), [O, k] = a(`-${h / 2} -${h / 2} ${h} ${h}`), [A, j] = a(1), ae = r(() => {
+		if (A === 1) return O;
+		let [e, t, n, r] = O.split(" ").map(Number), i = n / A, a = r / A;
 		return `${e + (n - i) / 2} ${t + (r - a) / 2} ${i} ${a}`;
-	}, [D, k]), j = m / 2, M = Math.max(0, Math.min(g, Math.max(0, j - 1))), N = Math.max(1, j - M), ae = [
-		T.palette.primary.main,
-		T.palette.secondary.main,
-		T.palette.error.main,
-		T.palette.warning.main,
-		T.palette.success.main,
-		T.palette.info.main
-	], P = v && v.length > 0 ? v : ae, { root: F, ringThickness: I } = n(() => {
-		let e = d.hierarchy(s).sum((e) => e.value ?? 0);
-		_ === "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, {
+	}, [O, A]), M = h / 2, N = Math.max(0, Math.min(_, Math.max(0, M - 1))), P = Math.max(1, M - N), oe = [
+		E.palette.primary.main,
+		E.palette.secondary.main,
+		E.palette.error.main,
+		E.palette.warning.main,
+		E.palette.success.main,
+		E.palette.info.main
+	], F = y && y.length > 0 ? y : oe, { root: I, ringThickness: L } = r(() => {
+		let e = f.hierarchy(c).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,
 			sensitivity: "base"
 		}));
-		let t = d.partition().size([f, N])(e), n = d.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? N / n : N;
+		let t = f.partition().size([p, P])(e), n = f.max(t.descendants(), (e) => e.depth) ?? 0, r = n > 0 ? P / n : P;
 		return n > 0 && t.descendants().forEach((e) => {
 			e.depth === 0 ? (e.y0 = 0, e.y1 = 0) : (e.y0 = (e.depth - 1) * r, e.y1 = e.depth * r);
 		}), {
@@ -72,29 +72,61 @@ function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g =
 			ringThickness: r
 		};
 	}, [
-		s,
-		N,
-		_
-	]), [L, R] = i(F), [z, oe] = i(F);
-	z !== F && (oe(F), R(F));
-	let B = n(() => F.children?.map((e) => e.data.name) ?? [F.data.name], [F]), se = n(() => d.scaleOrdinal().domain(B).range(P), [P, B]), V = (e) => {
+		c,
+		P,
+		v
+	]), [R, z] = a(I), [se, ce] = a(I), B = (e) => ({
+		x0: e.x0,
+		x1: e.x1,
+		yShift: e.depth === 0 ? 0 : (e.depth - 1) * L
+	}), [V, H] = a(() => B(I)), U = i(V);
+	if (se !== I) {
+		ce(I), z(I);
+		let e = B(I);
+		U.current = e, H(e);
+	}
+	let W = r(() => I.children?.map((e) => e.data.name) ?? [I.data.name], [I]), le = r(() => f.scaleOrdinal().domain(W).range(F), [F, W]), ue = (e) => {
 		if (e.data.colorConfig?.fill) return e.data.colorConfig.fill;
 		let t = e;
 		for (; t.depth > 1;) t = t.parent;
-		return se(t.data.name);
-	}, H = n(() => d.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(j / 2).innerRadius((e) => M + e.y0).outerRadius((e) => M + e.y1 - 1), [j, M]), U = e((e) => {
-		let t = f / (L.x1 - L.x0), n = Math.max(0, Math.min(f, (e.x0 - L.x0) * t)), r = Math.max(0, Math.min(f, (e.x1 - L.x0) * t)), i = L.depth === 0 ? 0 : (L.depth - 1) * I;
+		return le(t.data.name);
+	}, de = r(() => f.arc().startAngle((e) => e.x0).endAngle((e) => e.x1).padAngle((e) => Math.min((e.x1 - e.x0) / 2, .005)).padRadius(M / 2).innerRadius((e) => N + e.y0).outerRadius((e) => N + e.y1 - 1), [M, N]), G = e((e) => {
+		let t = p / (V.x1 - V.x0);
 		return {
-			x0: n,
-			x1: r,
-			y0: Math.max(0, e.y0 - i),
-			y1: Math.max(0, e.y1 - i)
+			x0: Math.max(0, Math.min(p, (e.x0 - V.x0) * t)),
+			x1: Math.max(0, Math.min(p, (e.x1 - V.x0) * t)),
+			y0: Math.max(0, e.y0 - V.yShift),
+			y1: Math.max(0, e.y1 - V.yShift)
+		};
+	}, [V]);
+	t(() => {
+		let e = B(R), t = U.current;
+		if (t.x0 === e.x0 && t.x1 === e.x1 && t.yShift === e.yShift) return;
+		if (w <= 0) {
+			U.current = e, H(e);
+			return;
+		}
+		let n = null, r = f.interpolateNumber(t.x0, e.x0), i = f.interpolateNumber(t.x1, e.x1), a = f.interpolateNumber(t.yShift, e.yShift), o = performance.now(), s = (e) => {
+			let t = Math.min(1, (e - o) / w), c = f.easeCubic(t), l = {
+				x0: r(c),
+				x1: i(c),
+				yShift: a(c)
+			};
+			U.current = l, H(l), n = t < 1 ? requestAnimationFrame(s) : null;
 		};
-	}, [L, I]), W = (e) => e.x1 > e.x0 && e.y1 > e.y0, G = (e) => (M + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, ce = (e) => {
-		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = M + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
+		return n = requestAnimationFrame(s), () => {
+			n != null && cancelAnimationFrame(n);
+		};
+	}, [
+		R,
+		L,
+		w
+	]);
+	let fe = (e) => e.x1 > e.x0 && e.y1 > e.y0, pe = (e) => (N + (e.y0 + e.y1) / 2) * (e.x1 - e.x0) > 12, me = (e) => {
+		let t = (e.x0 + e.x1) / 2 * 180 / Math.PI, n = N + (e.y0 + e.y1) / 2, r = t < 180 ? 0 : 180;
 		return `rotate(${t - 90}) translate(${n},0) rotate(${r})`;
-	}, le = e((e) => e.ancestors().includes(L), [L]), K = e((e) => {
-		let t = e.ancestors().reverse(), n = e.value ?? 0, r = F.value ?? 0;
+	}, he = e((e) => e.ancestors().includes(R), [R]), K = e((e) => {
+		let t = e.ancestors().reverse(), n = e.value ?? 0, r = I.value ?? 0;
 		return {
 			id: e.data.id,
 			name: e.data.name,
@@ -106,179 +138,179 @@ function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g =
 			childrenCount: e.children?.length ?? 0,
 			data: e.data
 		};
-	}, [F]), q = e((e) => {
-		R(e), x && x({
+	}, [I]), q = e((e) => {
+		z(e), S && S({
 			focusNode: K(e),
-			isRoot: e === F
+			isRoot: e === I
 		});
 	}, [
-		F,
+		I,
 		K,
-		x
+		S
 	]);
-	t(() => {
-		let e = E.current;
+	n(() => {
+		let e = D.current;
 		if (!e) return;
 		let t = requestAnimationFrame(() => {
 			try {
 				let t = e.getBBox();
-				O(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
+				k(`${t.x - 8} ${t.y - 8} ${t.width + 16} ${t.height + 16}`);
 			} catch {
-				O(`-${m / 2} -${m / 2} ${m} ${m}`);
+				k(`-${h / 2} -${h / 2} ${h} ${h}`);
 			}
 		});
 		return () => cancelAnimationFrame(t);
 	}, [
-		m,
-		F,
-		L,
-		M,
+		h,
 		I,
-		y
+		R,
+		N,
+		L,
+		b
 	]);
-	let J = r(null), ue = (e) => {
+	let J = i(null), ge = (e) => {
 		J.current &&= (clearTimeout(J.current), null), J.current = setTimeout(() => {
 			e(), J.current = null;
 		}, 250);
 	}, Y = () => {
 		J.current &&= (clearTimeout(J.current), null);
 	};
-	t(() => {
-		if (w) return;
+	n(() => {
+		if (T) return;
 		let e = (e) => {
-			e.key === "Escape" && (Y(), q(F), A(1));
+			e.key === "Escape" && (Y(), q(I), j(1));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		w,
-		F,
+		T,
+		I,
 		q
 	]);
-	let de = e((e) => {
-		if (!C || w || !e.ctrlKey) return;
+	let _e = e((e) => {
+		if (!C || T || !e.ctrlKey) return;
 		e.preventDefault();
 		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-		A((e) => Math.max(.25, Math.min(8, e * t)));
-	}, [C, w]), X = F.descendants().filter((e) => e.depth > 0), fe = (e) => {
-		if (w) return;
+		j((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [C, T]), X = I.descendants().filter((e) => e.depth > 0), ve = (e) => {
+		if (T) return;
 		let t = X[Number(e.currentTarget.getAttribute("data-idx"))];
 		if (t) {
 			if (e.ctrlKey || e.metaKey) {
-				t.children && ue(() => q(t));
+				t.children && ge(() => q(t));
 				return;
 			}
-			b?.(K(t), e);
+			x?.(K(t), e);
 		}
-	}, pe = (e) => {
-		w || (e.ctrlKey || e.metaKey) && (Y(), q(L.parent ?? F));
+	}, ye = (e) => {
+		T || (e.ctrlKey || e.metaKey) && (Y(), q(R.parent ?? I));
 	}, Z = (e) => {
-		if (!w) {
+		if (!T) {
 			if (e.ctrlKey || e.metaKey) {
-				Y(), q(L.parent ?? F);
+				Y(), q(R.parent ?? I);
 				return;
 			}
-			b?.(K(L.parent ?? F), e);
+			x?.(K(R.parent ?? I), e);
 		}
 	}, Q = {
 		followCursor: !0,
 		enterDelay: 50,
 		enterNextDelay: 0,
-		disableHoverListener: w,
+		disableHoverListener: T,
 		slotProps: { tooltip: { sx: { maxWidth: 260 } } }
-	}, $ = T.palette.text.primary, me = T.typography.fontFamily;
-	return /* @__PURE__ */ l(a, {
+	}, $ = E.palette.text.primary, be = E.typography.fontFamily;
+	return /* @__PURE__ */ u(o, {
 		sx: {
 			display: "inline-flex",
-			opacity: w ? .5 : 1,
-			cursor: w ? "not-allowed" : "default",
+			opacity: T ? .5 : 1,
+			cursor: T ? "not-allowed" : "default",
 			userSelect: "none"
 		},
-		children: /* @__PURE__ */ l("svg", {
-			width: m,
-			height: m,
-			viewBox: ie,
-			onWheel: de,
+		children: /* @__PURE__ */ u("svg", {
+			width: h,
+			height: h,
+			viewBox: ae,
+			onWheel: _e,
 			style: {
-				fontFamily: me ?? "sans-serif",
-				overflow: C && k > 1 ? "hidden" : "visible"
+				fontFamily: be ?? "sans-serif",
+				overflow: C && A > 1 ? "hidden" : "visible"
 			},
 			role: "img",
-			"aria-label": s.name,
-			children: /* @__PURE__ */ u("g", {
-				ref: E,
+			"aria-label": c.name,
+			children: /* @__PURE__ */ d("g", {
+				ref: D,
 				children: [
-					M > 0 && /* @__PURE__ */ l(o, {
+					N > 0 && /* @__PURE__ */ u(s, {
 						...Q,
-						title: L.data.name,
+						title: R.data.name,
 						placement: "top",
-						children: /* @__PURE__ */ l("circle", {
+						children: /* @__PURE__ */ u("circle", {
 							cx: 0,
 							cy: 0,
-							r: M,
+							r: N,
 							fill: "transparent",
-							pointerEvents: w ? "none" : "auto",
+							pointerEvents: T ? "none" : "auto",
 							onClick: Z,
-							style: { cursor: w ? "not-allowed" : "pointer" }
+							style: { cursor: T ? "not-allowed" : "pointer" }
 						})
 					}),
-					/* @__PURE__ */ l("g", { children: X.map((e, t) => {
-						let n = U(e), r = W(n), i = !!e.children;
-						return /* @__PURE__ */ l(o, {
+					/* @__PURE__ */ u("g", { children: X.map((e, t) => {
+						let n = G(e), r = fe(n), i = !!e.children;
+						return /* @__PURE__ */ u(s, {
 							...Q,
 							placement: "top",
-							title: r ? /* @__PURE__ */ l(te, {
+							title: r ? /* @__PURE__ */ u(te, {
 								node: e,
 								valueDecimalCount: ne,
 								valueDecimalSep: re,
-								valueThousandsSep: S
+								valueThousandsSep: ie
 							}) : "",
-							children: /* @__PURE__ */ l("path", {
+							children: /* @__PURE__ */ u("path", {
 								"data-idx": t,
-								d: H(n) || "",
-								fill: V(e),
+								d: de(n) || "",
+								fill: ue(e),
 								fillOpacity: r ? i ? .75 : .5 : 0,
 								style: {
-									pointerEvents: r && !w ? "auto" : "none",
-									cursor: i && !w ? "pointer" : "default",
+									pointerEvents: r && !T ? "auto" : "none",
+									cursor: i && !T ? "pointer" : "default",
 									transition: "fill-opacity 0.15s"
 								},
-								onClick: fe,
-								onDoubleClick: pe
+								onClick: ve,
+								onDoubleClick: ye
 							})
 						}, `tt-${e.data.id}-${t}`);
 					}) }),
-					h && /* @__PURE__ */ l("g", {
+					g && /* @__PURE__ */ u("g", {
 						pointerEvents: "none",
 						textAnchor: "middle",
 						fill: $,
 						children: X.map((e, t) => {
-							if (!le(e)) return null;
-							let n = U(e);
-							if (!G(n)) return null;
-							let r = (M + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = ee(e.data.name, r);
-							return i ? /* @__PURE__ */ l("text", {
-								transform: ce(n),
+							if (!he(e)) return null;
+							let n = G(e);
+							if (!pe(n)) return null;
+							let r = (N + (n.y0 + n.y1) / 2) * (n.x1 - n.x0) * .88, i = ee(e.data.name, r);
+							return i ? /* @__PURE__ */ u("text", {
+								transform: me(n),
 								dy: "0.35em",
-								fontSize: p,
+								fontSize: m,
 								children: i
 							}, `lbl-${e.data.id}-${t}`) : null;
 						})
 					}),
-					y && /* @__PURE__ */ l(o, {
+					b && /* @__PURE__ */ u(s, {
 						...Q,
 						placement: "top",
 						title: "",
-						children: /* @__PURE__ */ l("g", {
+						children: /* @__PURE__ */ u("g", {
 							textAnchor: "middle",
 							fill: $,
-							pointerEvents: w ? "none" : "auto",
+							pointerEvents: T ? "none" : "auto",
 							onClick: Z,
-							style: { cursor: L !== F && !w ? "pointer" : "default" },
-							children: /* @__PURE__ */ l("text", {
+							style: { cursor: R !== I && !T ? "pointer" : "default" },
+							children: /* @__PURE__ */ u("text", {
 								fontSize: 13,
 								dy: "0.35em",
 								fontWeight: "bold",
-								children: L.data.name
+								children: R.data.name
 							})
 						})
 					})
@@ -287,6 +319,6 @@ function _({ data: s, size: m = 500, showSegmentLabels: h = !0, innerRadius: g =
 		})
 	});
 }
-_.displayName = "SunburstChart";
+v.displayName = "SunburstChart";
 //#endregion
-export { _ as SunburstChart };
+export { v as SunburstChart };

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

@@ -66,6 +66,8 @@ export type SunburstChartProps = {
     valueThousandsSeparator?: 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) */
+    duration?: number;
     /** Disables all interactions (default: false) */
     disabled?: boolean;
     /** Override any translation string */