@thebuoyant-tsdev/mui-ts-library 3.2.1 → 3.6.0

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

@@ -0,0 +1,382 @@
+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";
+//#region src/components/circle-packing-chart/CirclePackingChart.tsx
+var f = .56;
+function p(e, t, n) {
+	return e.length * n * f <= t ? e : t >= 3 * n * f + n * 2 ? "…" : "";
+}
+function m({ data: f, size: m = 600, padding: h = 3, sortBy: g = "value", showLabels: _ = !0, showAllLabels: v = !1, labelFontSize: y = 13, innerLabelFontSize: b = 9, labelColor: ee, chartColors: x, depthColorStart: S, depthColorEnd: C, background: w, duration: T = 750, zoomable: E = !1, disabled: D = !1, onCircleClick: O, onZoomChange: k }) {
+	let A = c(), j = [
+		A.palette.primary.main,
+		A.palette.secondary.main,
+		A.palette.error.main,
+		A.palette.warning.main,
+		A.palette.success.main,
+		A.palette.info.main
+	], M = ee || A.palette.text.primary, te = w || A.palette.background.default, ne = A.typography.fontFamily, N = n(() => {
+		let e = d.hierarchy(f).sum((e) => e.value ?? 0);
+		return g === "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"
+		})), d.pack().size([m, m]).padding(h)(e);
+	}, [
+		f,
+		m,
+		h,
+		g
+	]), P = N.descendants(), F = n(() => d.max(P, (e) => e.depth) ?? 0, [P]), I = !!(S && C), L = n(() => I ? d.scaleSequential(d.interpolateHcl(S, C)).domain([0, Math.max(1, F)]) : null, [
+		I,
+		S,
+		C,
+		F
+	]), R = x && x.length > 0 ? x : j, z = e((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
+	]), [B, V] = i(1), H = e((e) => {
+		if (!E || D || !e.ctrlKey) return;
+		e.preventDefault();
+		let t = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+		V((e) => Math.max(.25, Math.min(8, e * t)));
+	}, [E, D]);
+	t(() => {
+		if (!E) return;
+		let e = (e) => {
+			e.key === "Escape" && V(1);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [E]);
+	let U = n(() => {
+		let e = `${-m / 2} ${-m / 2} ${m} ${m}`;
+		if (B === 1) return e;
+		let t = m / B, n = (m - t) / 2;
+		return `${-m / 2 + n} ${-m / 2 + n} ${t} ${t}`;
+	}, [m, B]), W = e((e) => {
+		let t = e.value ?? 0, n = N.value ?? 0;
+		return {
+			id: e.data.id ?? null,
+			name: e.data.name,
+			value: t || null,
+			percentage: n > 0 ? Math.round(t / n * 1e4) / 100 : 0,
+			depth: e.depth,
+			path: e.ancestors().map((e) => e.data.name).reverse(),
+			childrenCount: e.children?.length ?? 0,
+			data: e.data
+		};
+	}, [N]), G = r(null), K = r([
+		N.x,
+		N.y,
+		N.r * 2
+	]), q = r(N), [J, re] = i(N), Y = e((e) => {
+		q.current = e, re(e);
+	}, []), [ie, ae] = i(f);
+	ie !== f && (ae(f), Y(N), q.current = N);
+	let X = e((e) => {
+		let t = G.current;
+		if (!t) return;
+		K.current = e;
+		let n = m / e[2], r = q.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];
+			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 (_) {
+			let r = t.querySelectorAll("g[data-role='labels'] > text");
+			for (let t = 0; t < P.length; t++) {
+				let i = P[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 (v) {
+			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];
+				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;
+				if (l && !u && s >= 14) {
+					let t = p(a.data.name, c, b);
+					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,
+		m,
+		_,
+		v,
+		b,
+		N
+	]);
+	t(() => {
+		X([
+			J.x,
+			J.y,
+			J.r * 2
+		]);
+	}, [
+		N,
+		m,
+		J,
+		X
+	]);
+	let Z = e((e, t) => {
+		let n = G.current;
+		if (!n) return;
+		let r = J, i = K.current, a = [
+			e.x,
+			e.y,
+			e.r * 2
+		];
+		Y(e), d.select(n).transition().duration(t).ease(d.easeCubic).tween("zoom", () => {
+			let e = d.interpolateZoom(i, a);
+			return (t) => X(e(t));
+		});
+		let o = n.querySelectorAll("g[data-role='labels'] > text");
+		d.selectAll(o).transition().duration(t).ease(d.easeCubic).style("fill-opacity", (t, n) => +(P[n].parent === e)).on("start", function(t, n) {
+			P[n].parent === e && (this.style.display = "inline");
+		}).on("end", function(t, n) {
+			P[n].parent !== e && (this.style.display = "none");
+		}), k?.({
+			previousName: r.data.name,
+			currentName: e.data.name,
+			currentDepth: e.depth,
+			isRoot: e === N
+		});
+	}, [
+		J,
+		P,
+		N,
+		X,
+		k,
+		Y
+	]), Q = r(null), oe = (e) => {
+		Q.current &&= (clearTimeout(Q.current), null), Q.current = setTimeout(() => {
+			e(), Q.current = null;
+		}, 250);
+	}, $ = () => {
+		Q.current &&= (clearTimeout(Q.current), null);
+	};
+	t(() => {
+		if (D) return;
+		let e = (e) => {
+			e.key === "Escape" && ($(), Z(N, T));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		D,
+		N,
+		T
+	]);
+	let se = (e) => {
+		if (D || !(e.ctrlKey || e.metaKey)) return;
+		$(), e.preventDefault();
+		let t = J.parent ?? N;
+		t !== J && Z(t, e.altKey ? Math.max(250, T * 10) : T);
+	}, ce = {
+		followCursor: !0,
+		enterDelay: 50,
+		enterNextDelay: 0,
+		disableHoverListener: D,
+		slotProps: { tooltip: { sx: { maxWidth: 220 } } }
+	};
+	return /* @__PURE__ */ u(a, {
+		sx: {
+			display: "inline-flex",
+			position: "relative",
+			opacity: D ? .5 : 1,
+			cursor: D ? "not-allowed" : "default",
+			userSelect: "none"
+		},
+		children: [/* @__PURE__ */ u("svg", {
+			ref: G,
+			width: m,
+			height: m,
+			viewBox: U,
+			onWheel: H,
+			style: {
+				display: "block",
+				background: te,
+				fontFamily: ne ?? "sans-serif",
+				overflow: E && B > 1 ? "hidden" : "visible"
+			},
+			role: "img",
+			"aria-label": f.name,
+			onDoubleClick: se,
+			children: [
+				/* @__PURE__ */ l("g", {
+					"data-role": "nodes",
+					children: P.map((e, t) => {
+						let n = W(e), r = /* @__PURE__ */ u(a, {
+							sx: {
+								py: .5,
+								minWidth: 160
+							},
+							children: [/* @__PURE__ */ l(s, {
+								variant: "caption",
+								sx: {
+									fontWeight: "bold",
+									display: "block",
+									fontSize: "0.8rem"
+								},
+								children: e.data.name
+							}), (e.value ?? 0) > 0 && /* @__PURE__ */ u(a, {
+								sx: {
+									mt: .75,
+									borderTop: "1px solid rgba(255,255,255,0.2)",
+									pt: .75
+								},
+								children: [
+									/* @__PURE__ */ u(a, {
+										sx: {
+											display: "flex",
+											justifyContent: "space-between",
+											gap: 2
+										},
+										children: [/* @__PURE__ */ l(s, {
+											variant: "caption",
+											sx: { opacity: .6 },
+											children: "Value"
+										}), /* @__PURE__ */ l(s, {
+											variant: "caption",
+											children: e.value?.toLocaleString()
+										})]
+									}),
+									/* @__PURE__ */ u(a, {
+										sx: {
+											display: "flex",
+											justifyContent: "space-between",
+											gap: 2
+										},
+										children: [/* @__PURE__ */ l(s, {
+											variant: "caption",
+											sx: { opacity: .6 },
+											children: "Share"
+										}), /* @__PURE__ */ u(s, {
+											variant: "caption",
+											children: [n.percentage, "%"]
+										})]
+									}),
+									e.children && /* @__PURE__ */ u(a, {
+										sx: {
+											display: "flex",
+											justifyContent: "space-between",
+											gap: 2
+										},
+										children: [/* @__PURE__ */ l(s, {
+											variant: "caption",
+											sx: { opacity: .6 },
+											children: "Children"
+										}), /* @__PURE__ */ l(s, {
+											variant: "caption",
+											children: e.children.length
+										})]
+									})
+								]
+							})]
+						});
+						return /* @__PURE__ */ l("g", {
+							transform: `translate(${e.x - m / 2},${e.y - m / 2})`,
+							children: t === 0 ? null : /* @__PURE__ */ l(o, {
+								...ce,
+								title: r,
+								children: /* @__PURE__ */ l("circle", {
+									r: e.r,
+									fill: z(e),
+									stroke: e.data.colorConfig?.stroke ?? A.palette.background.paper,
+									strokeWidth: .75,
+									style: {
+										cursor: D ? "not-allowed" : e.children ? "pointer" : "default",
+										transition: "stroke-width 0.1s"
+									},
+									onMouseEnter: (e) => {
+										D || (e.currentTarget.style.strokeWidth = "2");
+									},
+									onMouseLeave: (e) => {
+										e.currentTarget.style.strokeWidth = "0.75";
+									},
+									onClick: (t) => {
+										if (!D) {
+											if (t.ctrlKey || t.metaKey) {
+												if (e.children) {
+													let n = t.altKey ? Math.max(250, T * 10) : T;
+													oe(() => Z(e, n));
+												}
+												return;
+											}
+											O?.(n, t);
+										}
+									},
+									onDoubleClick: (e) => {
+										if (!D && (e.ctrlKey || e.metaKey)) {
+											$(), e.preventDefault(), e.stopPropagation();
+											let t = J.parent ?? N;
+											t !== J && Z(t, e.altKey ? Math.max(250, T * 10) : T);
+										}
+									}
+								})
+							})
+						}, `n-${t}`);
+					})
+				}),
+				_ && /* @__PURE__ */ l("g", {
+					"data-role": "labels",
+					textAnchor: "middle",
+					dominantBaseline: "middle",
+					pointerEvents: "none",
+					fontSize: y,
+					fill: M,
+					children: P.map((e, t) => /* @__PURE__ */ l("text", {
+						transform: `translate(${e.x - m / 2},${e.y - m / 2})`,
+						style: {
+							display: e.parent === N ? "inline" : "none",
+							fillOpacity: +(e.parent === N)
+						},
+						children: e.data.name
+					}, `lbl-${t}`))
+				}),
+				v && /* @__PURE__ */ l("g", {
+					"data-role": "inner-labels",
+					textAnchor: "middle",
+					dominantBaseline: "middle",
+					pointerEvents: "none",
+					fontSize: b,
+					fill: M,
+					children: P.map((e, t) => /* @__PURE__ */ l("text", {
+						transform: `translate(${e.x - m / 2},${e.y - m / 2})`,
+						style: { display: "none" }
+					}, `inner-lbl-${t}`))
+				})
+			]
+		}), J !== N && !D && /* @__PURE__ */ l(a, {
+			sx: {
+				position: "absolute",
+				bottom: 6,
+				left: 0,
+				right: 0,
+				display: "flex",
+				justifyContent: "center",
+				pointerEvents: "none"
+			},
+			children: /* @__PURE__ */ u(s, {
+				variant: "caption",
+				sx: {
+					bgcolor: "action.hover",
+					borderRadius: 1,
+					px: 1,
+					py: .25,
+					color: "text.secondary",
+					fontSize: "0.7rem"
+				},
+				children: [J.ancestors().map((e) => e.data.name).reverse().join(" › "), " · Ctrl / Cmd ⌘+DblClick to zoom out · Escape to reset"]
+			})
+		})]
+	});
+}
+m.displayName = "CirclePackingChart";
+//#endregion
+export { m as CirclePackingChart };

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

@@ -0,0 +1,4 @@
+//#region src/components/circle-packing-chart/CirclePackingChart.types.ts
+var e = { noData: "No data" };
+//#endregion
+export { e as DEFAULT_CIRCLE_PACKING_TRANSLATION };

package/dist/components/gantt-chart/GanttBarRow.js

@@ -0,0 +1,202 @@
+import { addDays as e, calculateTaskPosition as t } from "./util/gantt-chart.util.js";
+import { STATUS_BAR_COLOR as n } from "./GanttChart.constants.js";
+import { useGanttTheme as r } from "./GanttChart.js";
+import { Box as i, useTheme as a } from "@mui/material";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/gantt-chart/GanttBarRow.tsx
+function l({ task: n, virtualTop: o, activeDrag: c, displayRange: l, totalWidth: f, gridColumnWidth: p, criticalTaskIds: m, draggable: h = !1, resizable: g = !1, progressDraggable: _ = !1, onTaskClick: v, onMilestoneClick: y, onContextMenu: b, suppressClickRef: x, handleBarMouseDown: S, handleProgressMouseDown: C, formatDragDate: w }) {
+	let T = a(), { statusColors: E, criticalPathColor: D, milestoneColor: O, barBorderRadius: k } = r(), A = c?.taskId === n.id, j = n;
+	if (A && c) if (c.type === "move") j = {
+		...n,
+		startDate: e(n.startDate, c.deltaDays),
+		endDate: e(n.endDate, c.deltaDays)
+	};
+	else if (c.type === "resize") {
+		let t = e(n.endDate, c.deltaDays);
+		j = {
+			...n,
+			endDate: t > n.startDate ? t : e(n.startDate, 1)
+		};
+	} else c.type === "progress" && c.newProgress !== void 0 && (j = {
+		...n,
+		progress: c.newProgress
+	});
+	let { left: M, width: N } = t(j, l);
+	return /* @__PURE__ */ s(i, {
+		"data-testid": `gantt-bar-row-${n.id}`,
+		style: o === void 0 ? void 0 : {
+			position: "absolute",
+			top: o,
+			left: 0,
+			width: "100%"
+		},
+		sx: {
+			height: 40,
+			position: "relative",
+			borderBottom: "1px solid",
+			borderColor: "divider",
+			backgroundImage: (e) => `linear-gradient(to right, transparent calc(${p}px - 1px), ${e.palette.divider} calc(${p}px - 1px), ${e.palette.divider} ${p}px)`,
+			backgroundSize: `${p}px 100%`,
+			backgroundRepeat: "repeat-x"
+		},
+		children: n.isMilestone ? /* @__PURE__ */ s(u, {
+			task: n,
+			left: M,
+			milestoneColor: O,
+			criticalPathColor: D,
+			isCritical: m.has(n.id),
+			onMilestoneClick: y,
+			theme: T
+		}) : /* @__PURE__ */ s(d, {
+			task: n,
+			effectiveTask: j,
+			left: M,
+			width: N,
+			totalWidth: f,
+			isDragging: A,
+			activeDrag: c,
+			draggable: h,
+			resizable: g,
+			progressDraggable: _,
+			isCritical: m.has(n.id),
+			statusColors: E,
+			criticalPathColor: D,
+			barBorderRadius: k,
+			onTaskClick: v,
+			onContextMenu: b,
+			suppressClickRef: x,
+			handleBarMouseDown: S,
+			handleProgressMouseDown: C,
+			formatDragDate: w,
+			theme: T
+		})
+	});
+}
+function u({ task: e, left: t, milestoneColor: n, criticalPathColor: r, isCritical: a, onMilestoneClick: o, theme: c }) {
+	return t < 0 || t > 100 ? null : /* @__PURE__ */ s(i, {
+		"data-testid": `gantt-milestone-${e.id}`,
+		sx: {
+			position: "absolute",
+			left: `${t}%`,
+			top: "50%",
+			width: 12,
+			height: 12,
+			bgcolor: n || "warning.main",
+			transform: "translate(-50%, -50%) rotate(45deg)",
+			cursor: o ? "pointer" : "default",
+			boxShadow: a ? `0 0 0 2.5px ${r || c.palette.error.main}` : void 0,
+			"&:hover": o ? { opacity: .8 } : void 0
+		},
+		onClick: () => o?.(e)
+	});
+}
+function d({ task: e, effectiveTask: t, left: r, width: a, totalWidth: l, isDragging: u, activeDrag: d, draggable: p, resizable: m, progressDraggable: h, isCritical: g, statusColors: _, criticalPathColor: v, barBorderRadius: y, onTaskClick: b, onContextMenu: x, suppressClickRef: S, handleBarMouseDown: C, handleProgressMouseDown: w, formatDragDate: T, theme: E }) {
+	let D = Math.max(0, r), O = Math.min(100, r + Math.max(a, .5)) - D;
+	return O <= 0 ? null : /* @__PURE__ */ c(o, { children: [
+		u && d && d.type !== "progress" && d.deltaDays !== 0 && /* @__PURE__ */ s(f, {
+			left: D,
+			children: d.type === "move" ? `${T(t.startDate)} – ${T(t.endDate)}` : `→ ${T(t.endDate)}`
+		}),
+		u && d?.type === "progress" && d.newProgress !== void 0 && /* @__PURE__ */ c(f, {
+			left: D,
+			children: [d.newProgress, "%"]
+		}),
+		/* @__PURE__ */ c(i, {
+			"data-testid": `gantt-bar-${e.id}`,
+			sx: {
+				position: "absolute",
+				left: `${D}%`,
+				width: `${O}%`,
+				height: 16,
+				top: "50%",
+				transform: "translateY(-50%)",
+				bgcolor: e.color ?? _?.[e.status] ?? n[e.status] ?? "grey.300",
+				borderRadius: y === void 0 ? 1 : `${y}px`,
+				overflow: "hidden",
+				opacity: u ? .75 : 1,
+				boxShadow: g ? `inset 0 0 0 2.5px ${v || E.palette.error.main}` : void 0,
+				cursor: u ? "grabbing" : p ? "grab" : b ? "pointer" : "default",
+				userSelect: "none",
+				"&:hover": p || b ? { opacity: u ? .75 : .8 } : void 0
+			},
+			onMouseDown: p ? (t) => C(t, e, "move") : void 0,
+			onContextMenu: (t) => {
+				t.preventDefault(), t.stopPropagation(), x(e, t.clientX, t.clientY);
+			},
+			onClick: () => {
+				if (S.current) {
+					S.current = !1;
+					return;
+				}
+				b?.(e);
+			},
+			children: [
+				t.progress !== void 0 && t.progress > 0 && /* @__PURE__ */ s(i, {
+					"data-testid": `gantt-progress-${e.id}`,
+					sx: {
+						position: "absolute",
+						left: 0,
+						top: 0,
+						width: `${Math.min(t.progress, 100)}%`,
+						height: "100%",
+						bgcolor: "currentColor",
+						opacity: .4
+					}
+				}),
+				h && /* @__PURE__ */ s(i, {
+					"data-testid": `gantt-progress-handle-${e.id}`,
+					sx: {
+						position: "absolute",
+						left: `${Math.min(t.progress ?? 0, 100)}%`,
+						top: 0,
+						width: 6,
+						height: "100%",
+						transform: "translateX(-50%)",
+						cursor: "ew-resize",
+						bgcolor: "rgba(255,255,255,0.35)"
+					},
+					onMouseDown: (n) => {
+						n.stopPropagation();
+						let r = O / 100 * l;
+						w(n, e, t.progress ?? 0, r);
+					}
+				}),
+				m && /* @__PURE__ */ s(i, {
+					"data-testid": `gantt-resize-handle-${e.id}`,
+					sx: {
+						position: "absolute",
+						right: 0,
+						top: 0,
+						width: 6,
+						height: "100%",
+						cursor: "ew-resize"
+					},
+					onMouseDown: (t) => {
+						t.stopPropagation(), C(t, e, "resize");
+					}
+				})
+			]
+		})
+	] });
+}
+function f({ left: e, children: t }) {
+	return /* @__PURE__ */ s(i, {
+		sx: {
+			position: "absolute",
+			left: `${e}%`,
+			top: 2,
+			bgcolor: "grey.800",
+			color: "common.white",
+			borderRadius: .5,
+			px: .75,
+			lineHeight: "18px",
+			fontSize: "0.65rem",
+			whiteSpace: "nowrap",
+			pointerEvents: "none",
+			zIndex: 100
+		},
+		children: t
+	});
+}
+//#endregion
+export { l as GanttBarRow };

package/dist/components/gantt-chart/GanttChart.constants.js

@@ -0,0 +1,14 @@
+//#region src/components/gantt-chart/GanttChart.constants.ts
+var e = {
+	planned: "warning.light",
+	"in-progress": "info.main",
+	done: "success.main",
+	blocked: "error.main"
+}, t = {
+	planned: "warning",
+	"in-progress": "info",
+	done: "success",
+	blocked: "error"
+};
+//#endregion
+export { e as STATUS_BAR_COLOR, t as STATUS_CHIP_COLOR };