@thebuoyant-tsdev/mui-ts-library 3.14.1 → 3.16.0

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

@@ -0,0 +1,285 @@
+import { DEFAULT_RADIAL_STACKED_BAR_CHART_TRANSLATION as e } from "./RadialStackedBarChart.types.js";
+import { useCallback 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 { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import * as p from "d3";
+//#region src/components/radial-stacked-bar-chart/RadialStackedBarChart.tsx
+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) {
+	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) {
+	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;
+	return /* @__PURE__ */ f(o, {
+		sx: { py: .25 },
+		children: [
+			/* @__PURE__ */ d(c, {
+				variant: "caption",
+				sx: {
+					fontWeight: "bold",
+					display: "block"
+				},
+				children: e.label
+			}),
+			/* @__PURE__ */ f(c, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .85
+				},
+				children: [
+					n,
+					": ",
+					m(s, r, i, a)
+				]
+			}),
+			/* @__PURE__ */ f(c, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					opacity: .65,
+					mt: .25
+				},
+				children: [
+					u,
+					"% · Total: ",
+					m(l, r, i, a)
+				]
+			})
+		]
+	});
+}
+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 = {
+		...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,
+		"#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, {
+		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]), [
+		P,
+		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(() => {
+		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}`;
+	}, [q, W]);
+	n(() => {
+		let e = K.current;
+		if (!e) return;
+		let t = requestAnimationFrame(() => {
+			try {
+				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}`);
+			}
+		});
+		return () => cancelAnimationFrame(t);
+	}, [
+		h,
+		c,
+		m,
+		P,
+		N,
+		b,
+		x
+	]), n(() => {
+		if (E) 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;
+		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 = {
+		followCursor: !0,
+		enterDelay: 50,
+		enterNextDelay: 0,
+		disableHoverListener: E,
+		slotProps: { tooltip: { sx: { maxWidth: 240 } } }
+	}, Q = O.palette.text.primary, $ = O.palette.divider, ye = O.typography.fontFamily;
+	return /* @__PURE__ */ d(o, {
+		style: { opacity: E ? .5 : 1 },
+		sx: {
+			display: "inline-flex",
+			cursor: E ? "not-allowed" : "default",
+			userSelect: "none"
+		},
+		children: /* @__PURE__ */ d("svg", {
+			width: h,
+			height: h,
+			viewBox: fe,
+			onWheel: pe,
+			style: {
+				fontFamily: ye ?? "sans-serif",
+				overflow: T && W > 1 ? "hidden" : "visible"
+			},
+			role: "img",
+			"aria-label": "Radial stacked bar chart",
+			children: /* @__PURE__ */ f("g", {
+				ref: K,
+				children: [M && /* @__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: "none",
+						stroke: $,
+						strokeWidth: .5,
+						strokeDasharray: "3 2"
+					}, `grid-${e}`)),
+					x && /* @__PURE__ */ d("circle", {
+						r: P,
+						fill: "none",
+						stroke: $,
+						strokeWidth: .75
+					}),
+					x && re && U.map((e) => /* @__PURE__ */ d("text", {
+						x: 0,
+						y: -B(e),
+						textAnchor: "middle",
+						dy: "-3",
+						fontSize: 9,
+						fill: O.palette.text.secondary,
+						pointerEvents: "none",
+						children: de(e)
+					}, `gv-${e}`)),
+					V.map((e, t) => {
+						let n = e.key, r = A[t]?.label ?? n, i = I(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]);
+							if (u - l < .5) return null;
+							let f = H({
+								x0: o,
+								x1: c,
+								y0: l,
+								y1: u
+							}) ?? "";
+							return /* @__PURE__ */ d(s, {
+								...ve,
+								placement: "top",
+								title: /* @__PURE__ */ d(ne, {
+									barData: a,
+									seriesKey: n,
+									seriesLabel: r,
+									decimals: ie,
+									decimalSep: ae,
+									thousandSep: oe
+								}),
+								children: /* @__PURE__ */ d("path", {
+									d: f,
+									fill: i,
+									style: {
+										cursor: E ? "not-allowed" : "pointer",
+										transition: "opacity 0.15s"
+									},
+									onMouseEnter: (e) => {
+										E || (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 = {
+											id: a.id,
+											label: a.label,
+											seriesKey: n,
+											value: a.values[n] ?? 0,
+											total: t,
+											values: a.values
+										};
+										ce?.(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;
+						return /* @__PURE__ */ d("text", {
+							x: r,
+							y: i,
+							transform: `rotate(${a < 180 ? a - 90 : a + 90},${r},${i})`,
+							textAnchor: "middle",
+							dominantBaseline: "central",
+							fontSize: 11,
+							fill: Q,
+							pointerEvents: "none",
+							children: e.label
+						}, `lbl-${e.id}`);
+					}),
+					C && /* @__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);
+							return /* @__PURE__ */ f("g", {
+								transform: `translate(0,${r})`,
+								children: [/* @__PURE__ */ d("rect", {
+									x: 0,
+									y: 0,
+									width: 10,
+									height: 10,
+									fill: n,
+									rx: 2
+								}), /* @__PURE__ */ d("text", {
+									x: 15,
+									y: 10 / 2,
+									dominantBaseline: "central",
+									fontSize: 9,
+									fill: Q,
+									children: i
+								})]
+							}, `leg-${e.key}`);
+						})
+					})
+				] })]
+			})
+		})
+	});
+}
+h.displayName = "RadialStackedBarChart";
+//#endregion
+export { h as RadialStackedBarChart };

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

@@ -0,0 +1,91 @@
+/** One series (stack layer) — key is the data field name, label overrides the legend text */
+export type RadialStackedBarSeries = {
+    key: string;
+    label?: string;
+};
+/** One bar (e.g. one country, state, or category) */
+export type RadialStackedBarData = {
+    /** Unique identifier — used as React key and in callback payloads */
+    id: string;
+    /** Outer-edge label shown next to the bar */
+    label: string;
+    /** Value per series key — missing keys are treated as 0 */
+    values: Record<string, number>;
+};
+/**
+ * Per-series color overrides.
+ * Key = series key. Value = color config — null / omit = use palette.
+ * Example: `{ "65 Years and Over": { fill: "#1565C0" } }`
+ */
+export type RadialStackedBarColorConfigs = Record<string, {
+    fill?: string;
+} | null>;
+/** Payload delivered to `onBarClick` */
+export type RadialStackedBarBarInfo = {
+    id: string;
+    label: string;
+    /** Series key that was clicked */
+    seriesKey: string;
+    /** Value of the clicked segment */
+    value: number;
+    /** Total bar value (sum of all series) */
+    total: number;
+    /** All values for this bar */
+    values: Record<string, number>;
+};
+export type RadialStackedBarChartTranslation = {
+    noData: string;
+};
+export declare const DEFAULT_RADIAL_STACKED_BAR_CHART_TRANSLATION: RadialStackedBarChartTranslation;
+export type RadialStackedBarChartProps = {
+    /** Array of bars — each bar has a label and a value per series key */
+    data: RadialStackedBarData[];
+    /**
+     * Series definitions in stack order (innermost first).
+     * Pass `string[]` for quick setup — the string becomes both key and legend label.
+     * Pass `RadialStackedBarSeries[]` to customize the legend label independently from the key.
+     */
+    keys: RadialStackedBarSeries[] | string[];
+    /** Width and height of the SVG in pixels (default: 500) */
+    size?: number;
+    /** Inner radius of the bar area in px — controls the center hole size (default: size * 0.18) */
+    innerRadius?: number;
+    /** Fractional gap between adjacent bars — 0 = no gap, 1 = all gap (default: 0.12) */
+    barPadding?: number;
+    /** Custom color palette for the series — falls back to MUI theme palette when omitted */
+    chartColors?: string[];
+    /** Per-series color overrides keyed by series key — takes precedence over `chartColors` */
+    colorConfig?: RadialStackedBarColorConfigs;
+    /** Show bar labels on the outer edge (default: true) */
+    showLabels?: boolean;
+    /** Show concentric grid rings (default: true) */
+    showGridLines?: boolean;
+    /** Number of concentric grid rings (default: 3) */
+    gridLineCount?: number;
+    /** Show value labels on the outermost grid ring (default: true) */
+    showGridValues?: boolean;
+    /** Show the series legend (default: true) */
+    showLegend?: boolean;
+    /** Sort bars by total descending ('value'), by label ascending ('label'), or keep original order ('none') — default: 'none' */
+    sortBy?: 'value' | 'label' | 'none';
+    /** Decimal places for values in tooltips (default: 0) */
+    valueDecimalCount?: number;
+    /** Decimal separator for values (default: '.') */
+    valueDecimalSeparator?: string;
+    /** Thousands separator for values (default: ',') */
+    valueThousandsSeparator?: string;
+    /**
+     * Custom formatter for the grid ring value labels.
+     * Defaults to compact notation (e.g. 30000 → "30k", 3000000 → "3M").
+     * Example: `(v) => \`${(v / 1e6).toFixed(0)}M\``
+     */
+    gridValueFormatter?: (value: number) => string;
+    /** Enable Ctrl/Cmd+Scroll visual zoom — content outside `size` is clipped (default: false) */
+    zoomable?: boolean;
+    /** Fired on click of any bar segment */
+    onBarClick?: (info: RadialStackedBarBarInfo, event: React.MouseEvent<SVGPathElement>) => void;
+    /** Disables all interactions (default: false) */
+    disabled?: boolean;
+    /** Override any translation string */
+    translation?: Partial<RadialStackedBarChartTranslation>;
+};

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

@@ -0,0 +1,4 @@
+//#region src/components/radial-stacked-bar-chart/RadialStackedBarChart.types.ts
+var e = { noData: "No data" };
+//#endregion
+export { e as DEFAULT_RADIAL_STACKED_BAR_CHART_TRANSLATION };