@undp/data-viz 2.5.4 → 2.6.1

package/dist/CirclePackingGraph-uSZwfRvW.js

@@ -0,0 +1,320 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { Colors as n } from "./Colors.js";
+import { GraphFooter as r } from "./GraphFooter.js";
+import { GraphHeader as i } from "./GraphHeader.js";
+import { t as a } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { t as o } from "./uniqBy-feeqYuys.js";
+import { n as s, t as c } from "./GraphContainer-DgEB1AVN.js";
+import { t as l } from "./lodash.orderby-Dn2sr3tw.js";
+import { ColorLegendWithMouseOver as u } from "./ColorLegendWithMouseOver.js";
+import { t as d } from "./EmptyState-DBmT1Adf.js";
+import { t as f } from "./pow-CISbw8TV.js";
+import { t as p } from "./numberFormattingFunction-Cha8dhHc.js";
+import { t as m } from "./DetailsModal-DxUowfkg.js";
+import { t as h } from "./Tooltip-Y6uTGwkF.js";
+import { t as g } from "./getTextColorBasedOnBgColor-Ch7uw_Px.js";
+import { a as _, i as v, n as y, r as ee, t as te } from "./y-C3UBwapx.js";
+import { cn as ne } from "@undp/design-system-react/cn";
+import { useEffect as re, useMemo as b, useRef as x, useState as S } from "react";
+import { Spinner as ie } from "@undp/design-system-react/Spinner";
+import { P as C } from "@undp/design-system-react/Typography";
+//#region node_modules/d3-array/src/extent.js
+function w(e, t) {
+	let n, r;
+	if (t === void 0) for (let t of e) t != null && (n === void 0 ? t >= t && (n = r = t) : (n > t && (n = t), r < t && (r = t)));
+	else {
+		let i = -1;
+		for (let a of e) (a = t(a, ++i, e)) != null && (n === void 0 ? a >= a && (n = r = a) : (n > a && (n = a), r < a && (r = a)));
+	}
+	return [n, r];
+}
+//#endregion
+//#region node_modules/d3-force-boundary/dist/d3-force-boundary.esm.js
+function T(e) {
+	return function() {
+		return e;
+	};
+}
+function ae(e, t, n, r) {
+	var i = T(.1), a = !0, o = T(Math.min((n - e) / 2, (r - t) / 2)), s, c, l, u, d, f, p, m, h, g;
+	typeof e != "function" && (e = T(e == null ? -100 : +e)), typeof n != "function" && (n = T(n == null ? 100 : +n)), typeof t != "function" && (t = T(t == null ? -100 : +t)), typeof r != "function" && (r = T(r == null ? 100 : +r));
+	function _(e, t, n, r, i) {
+		return (e - t) * Math.min(2, Math.abs(e - t) / e) * n * i;
+	}
+	function v(e) {
+		for (var t = 0, n = s.length, r; t < n; ++t) r = s[t], r.x < u[t] + m[t] || r.x > d[t] - m[t] || r.y < f[t] + m[t] || r.y > p[t] - m[t] ? (r.vx += _(h[t], r.x, c[t], m[t], e), r.vy += _(g[t], r.y, l[t], m[t], e)) : r.y < f[t] + m[t] || (r.y, p[t] - m[t]), a && (r.x >= d[t] && (r.vx += d[t] - r.x), r.x <= u[t] && (r.vx += u[t] - r.x), r.y >= p[t] && (r.vy += p[t] - r.y), r.y <= f[t] && (r.vy += f[t] - r.y));
+	}
+	function y() {
+		if (s) {
+			var a, _ = s.length;
+			for (c = Array(_), l = Array(_), u = Array(_), f = Array(_), d = Array(_), p = Array(_), g = Array(_), h = Array(_), m = Array(_), a = 0; a < _; ++a) c[a] = isNaN(u[a] = +e(s[a], a, s)) || isNaN(d[a] = +n(s[a], a, s)) ? 0 : +i(s[a], a, s), l[a] = isNaN(f[a] = +t(s[a], a, s)) || isNaN(p[a] = +r(s[a], a, s)) ? 0 : +i(s[a], a, s), h[a] = u[a] + (d[a] - u[a]) / 2, g[a] = f[a] + (p[a] - f[a]) / 2, m[a] = +o(s[a], a, s);
+		}
+	}
+	return v.initialize = function(e) {
+		s = e, y();
+	}, v.x0 = function(t) {
+		return arguments.length ? (e = typeof t == "function" ? t : T(+t), y(), v) : e;
+	}, v.x1 = function(e) {
+		return arguments.length ? (n = typeof e == "function" ? e : T(+e), y(), v) : n;
+	}, v.y0 = function(e) {
+		return arguments.length ? (t = typeof e == "function" ? e : T(+e), y(), v) : t;
+	}, v.y1 = function(e) {
+		return arguments.length ? (r = typeof e == "function" ? e : T(+e), y(), v) : r;
+	}, v.strength = function(e) {
+		return arguments.length ? (i = typeof e == "function" ? e : T(+e), y(), v) : i;
+	}, v.border = function(e) {
+		return arguments.length ? (o = typeof e == "function" ? e : T(+e), y(), v) : o;
+	}, v.hardBoundary = function(e) {
+		return arguments.length ? (a = e, v) : a;
+	}, v;
+}
+//#endregion
+//#region src/Components/Graphs/CirclePackingGraph/Graph.tsx
+var oe = /* @__PURE__ */ e(l(), 1), E = t(), D = (e) => {
+	let { data: t, colors: r, leftMargin: i, width: o, height: s, colorDomain: c, selectedColor: l, rightMargin: u, topMargin: d, bottomMargin: T, showLabels: D, tooltip: O, onSeriesMouseOver: k, showValues: A, suffix: se, prefix: ce, highlightedDataPoints: j, onSeriesMouseClick: M, maxRadiusValue: N, radius: P, resetSelectionOnDoubleClick: le, detailsOnClick: F, styles: I, classNames: L, dimmedOpacity: R, precision: ue, locale: de, padZeros: z } = e, B = x(null), [V, H] = S(void 0), [U, W] = S(void 0), [G, K] = S(void 0), [q, J] = S(void 0), [Y, X] = S(void 0), [Z, fe] = S(null), Q = {
+		top: d,
+		bottom: T,
+		left: i,
+		right: u
+	}, pe = o - Q.left - Q.right, me = s - Q.top - Q.bottom, he = b(() => t.filter((e) => !a(e.size)).length === 0 ? t : (0, oe.default)(t.filter((e) => !a(e.size)), "radius", "asc"), [t]), $ = b(() => t.filter((e) => e.size === void 0 || e.size === null).length === t.length ? void 0 : f().domain([0, a(N) ? Math.max(...t.map((e) => e.size).filter((e) => e != null)) : N]).range([.25, P]).nice(), [
+		t,
+		P,
+		N
+	]);
+	re(() => {
+		(() => {
+			let e = he.map((e) => ({
+				...e,
+				...e.data && { data: { ...e.data } }
+			}));
+			v(e).force("y", te((e) => me / 2).strength(1)).force("x", y((e) => pe / 2).strength(1)).force("collide", _((e) => $ ? $(e.size || 0) + 1 : P + 1)).force("charge", ee().strength(-15)).force("boundary", ae(0, 0, pe, me).strength(.2).border(50)).alphaDecay(.05).tick(1e4).on("tick", () => {
+				fe(e);
+			}).on("end", () => {
+				fe(e);
+				let t = w(e, (e) => e.x - ($ ? $(e.size || 0) + 1 : P + 1))[0] || 0, n = w(e, (e) => e.y - ($ ? $(e.size || 0) + 1 : P + 1))[0] || 0, r = w(e, (e) => e.x + ($ ? $(e.size || 0) + 1 : P + 1))[1] || 0, i = w(e, (e) => e.y + ($ ? $(e.size || 0) + 1 : P + 1))[1] || 0;
+				K([
+					t,
+					n,
+					t < 0 ? r - t : r,
+					n < 0 ? i - n : i
+				]);
+			});
+		})();
+	}, [
+		P,
+		me,
+		pe,
+		he,
+		$
+	]);
+	let ge = (e, t) => {
+		H(t), X(e.clientY), J(e.clientX), k?.(t);
+	}, _e = (e, t) => {
+		H(t), X(e.clientY), J(e.clientX);
+	}, ve = (e) => {
+		(M || F) && (U === e.label && le ? (W(void 0), M?.(void 0)) : (W(e.label), M?.(e)));
+	}, ye = () => {
+		H(void 0), J(void 0), X(void 0), k?.(void 0);
+	}, be = (e) => t.filter((e) => e.color).length === 0 ? r[0] : e.color ? r[c.indexOf(e.color)] : n.gray, xe = (e) => l ? e.color && r[c.indexOf(e.color)] === l ? 1 : R : j && j.indexOf(e.label) === -1 ? R : .85;
+	return Z ? G ? /* @__PURE__ */ (0, E.jsxs)(E.Fragment, { children: [
+		/* @__PURE__ */ (0, E.jsx)("svg", {
+			width: `${o}px`,
+			height: `${s}px`,
+			viewBox: `${G[0] > 0 ? 0 : G[0]} ${G[1] > 0 ? 0 : G[1]} ${o < G[2] ? G[2] : o} ${s < G[3] ? G[3] : s}`,
+			direction: "ltr",
+			ref: B,
+			children: /* @__PURE__ */ (0, E.jsx)("g", {
+				transform: `translate(${Q.left},${Q.top})`,
+				children: Z.map((e) => {
+					let t = be(e), n = xe(e), r = $ ? $(e.size || 0) : P, i = r > 20 && (D || A);
+					return /* @__PURE__ */ (0, E.jsxs)("g", {
+						className: "undp-viz-g-with-hover",
+						opacity: n,
+						transform: `translate(${e.x},${e.y})`,
+						onMouseEnter: (t) => ge(t, e),
+						onMouseMove: (t) => _e(t, e),
+						onClick: () => ve(e),
+						onMouseLeave: ye,
+						children: [/* @__PURE__ */ (0, E.jsx)("circle", {
+							cx: 0,
+							cy: 0,
+							r,
+							fill: t
+						}), (i || A) && e.size !== void 0 && e.size !== null && r >= 15 && /* @__PURE__ */ (0, E.jsx)("g", { children: /* @__PURE__ */ (0, E.jsx)("foreignObject", {
+							y: 0 - r,
+							x: 0 - r,
+							width: 2 * r,
+							height: 2 * r,
+							children: /* @__PURE__ */ (0, E.jsxs)("div", {
+								className: "flex flex-col justify-center items-center h-full py-0 px-3",
+								style: {
+									display: "flex",
+									flexDirection: "column",
+									justifyContent: "center",
+									alignItems: "center",
+									height: "100%",
+									padding: "0 0.75rem"
+								},
+								children: [D && /* @__PURE__ */ (0, E.jsx)(C, {
+									className: ne("text-center leading-[1.25] overflow-hidden m-0 circle-packing-label", L?.graphObjectValues),
+									marginBottom: "none",
+									style: {
+										fontSize: `${Math.min(Math.max(Math.round(r / 4), 12), Math.max(Math.round(r * 12 / `${e.label}`.length), 12), 14)}px`,
+										WebkitLineClamp: r * 2 < 60 ? 1 : r * 2 < 75 ? 2 : r * 2 < 100 ? 3 : void 0,
+										display: "-webkit-box",
+										WebkitBoxOrient: "vertical",
+										color: g(t),
+										hyphens: "auto",
+										...I?.graphObjectValues || {}
+									},
+									children: e.label
+								}), A && /* @__PURE__ */ (0, E.jsx)(C, {
+									className: "text-center font-bold leading-[1.25] w-full m-0 circle-packing-value",
+									marginBottom: "none",
+									style: {
+										fontSize: `${Math.min(Math.max(Math.round(r / 4), 14), 14)}px`,
+										color: g(t)
+									},
+									children: p(e.size, void 0, ue, ce, se, de, z)
+								})]
+							})
+						}) })]
+					}, e.label);
+				})
+			})
+		}),
+		V && O && q && Y && /* @__PURE__ */ (0, E.jsx)(h, {
+			data: V,
+			body: O,
+			xPos: q,
+			yPos: Y,
+			backgroundStyle: I?.tooltip,
+			className: L?.tooltip
+		}),
+		F && U !== void 0 ? /* @__PURE__ */ (0, E.jsx)(m, {
+			body: F,
+			data: U,
+			setData: W,
+			className: L?.modal
+		}) : null
+	] }) : null : /* @__PURE__ */ (0, E.jsx)("div", {
+		style: {
+			width: `${o}px`,
+			height: `${s}px`
+		},
+		children: /* @__PURE__ */ (0, E.jsx)("div", {
+			className: "flex m-auto items-center justify-center p-0 leading-none text-base h-40",
+			children: /* @__PURE__ */ (0, E.jsx)(ie, {})
+		})
+	});
+};
+//#endregion
+//#region src/Components/Graphs/CirclePackingGraph/getMaxCircleRadius.ts
+function O(e, t, n, r) {
+	let i = e.filter((e) => e != null), a = r === !1 ? Math.sqrt(t * n / Math.PI) : Math.min(t, n) / 2, o = i.reduce((e, t) => e + t, 0), s = Math.max(...i);
+	return a * Math.sqrt(s / o) * (r ? ((e) => e <= 200 ? .85 : e <= 250 ? .95 : 1)(a) : 1) * (r ? ((e) => e <= 5 ? .9 : e <= 10 ? .85 : e <= 20 ? .8 : .7)(i.length) : 1);
+}
+//#endregion
+//#region src/Components/Graphs/CirclePackingGraph/index.tsx
+function k(e) {
+	let { data: t, graphTitle: a, colors: l, sources: f, graphDescription: p, leftMargin: m = 0, rightMargin: h = 0, height: g, width: _, footNote: v, colorDomain: y, colorLegendTitle: ee, padding: te, backgroundColor: ne = !1, topMargin: b = 0, bottomMargin: ie = 0, showLabels: C = !0, relativeHeight: w, tooltip: T, onSeriesMouseOver: ae, showColorScale: oe = !0, showValues: k, graphID: A, highlightedDataPoints: se, onSeriesMouseClick: ce, graphDownload: j = !1, dataDownload: M = !1, language: N = "en", showNAColor: P, minHeight: le = 0, theme: F = "light", ariaLabel: I, radius: L, maxRadiusValue: R, resetSelectionOnDoubleClick: ue = !0, detailsOnClick: de, styles: z, classNames: B, dimmedOpacity: V = .3, circularBoundary: H = !0, numberDisplayOptions: U } = e, [W, G] = S(0), [K, q] = S(0), [J, Y] = S(void 0), X = x(null), Z = x(null);
+	return re(() => {
+		let e = new ResizeObserver((e) => {
+			G(e[0].target.clientWidth || 620), q(e[0].target.clientHeight || 480);
+		});
+		return X.current && e.observe(X.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ (0, E.jsxs)(s, {
+		className: B?.graphContainer,
+		style: z?.graphContainer,
+		id: A,
+		ref: Z,
+		"aria-label": I,
+		backgroundColor: ne,
+		theme: F,
+		language: N,
+		minHeight: le,
+		width: _,
+		height: g,
+		relativeHeight: w,
+		padding: te,
+		children: [
+			a || p || j || M ? /* @__PURE__ */ (0, E.jsx)(i, {
+				styles: {
+					title: z?.title,
+					description: z?.description
+				},
+				classNames: {
+					title: B?.title,
+					description: B?.description
+				},
+				graphTitle: a,
+				graphDescription: p,
+				width: _,
+				graphDownload: j ? Z : void 0,
+				dataDownload: M ? t.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? t.map((e) => e.data).filter((e) => e !== void 0) : t.filter((e) => e !== void 0) : null
+			}) : null,
+			oe && t.filter((e) => e.color).length !== 0 && t.length > 0 ? /* @__PURE__ */ (0, E.jsx)(u, {
+				width: _,
+				colorLegendTitle: ee,
+				colors: l || n[F].categoricalColors.colors,
+				colorDomain: y || o(t, "color", !0),
+				setSelectedColor: Y,
+				showNAColor: P ?? !0,
+				isCenter: !0,
+				className: B?.colorLegend
+			}) : null,
+			/* @__PURE__ */ (0, E.jsxs)(c, {
+				ref: X,
+				children: [t.length === 0 && /* @__PURE__ */ (0, E.jsx)(d, {}), W && K && t.length > 0 ? /* @__PURE__ */ (0, E.jsx)(D, {
+					data: t,
+					colors: t.filter((e) => e.color).length === 0 ? l ? [l] : [n.primaryColors["blue-600"]] : l || n[F].categoricalColors.colors,
+					colorDomain: t.filter((e) => e.color).length === 0 ? [] : y || o(t, "color", !0),
+					width: W,
+					height: K,
+					leftMargin: m,
+					rightMargin: h,
+					topMargin: b,
+					bottomMargin: ie,
+					showLabels: C,
+					showValues: k === !1 ? k : t.filter((e) => e.size).length !== 0,
+					selectedColor: J,
+					tooltip: T,
+					onSeriesMouseOver: ae,
+					highlightedDataPoints: se,
+					onSeriesMouseClick: ce,
+					theme: F,
+					radius: L || O(t.map((e) => e.size), W, K, H),
+					maxRadiusValue: R,
+					resetSelectionOnDoubleClick: ue,
+					detailsOnClick: de,
+					styles: z,
+					classNames: B,
+					dimmedOpacity: V,
+					locale: U?.locale || "en",
+					padZeros: U?.padZeros || !1,
+					suffix: U?.suffix || "",
+					prefix: U?.prefix || "",
+					precision: U?.precision ?? 2
+				}) : null]
+			}),
+			f || v ? /* @__PURE__ */ (0, E.jsx)(r, {
+				styles: {
+					footnote: z?.footnote,
+					source: z?.source
+				},
+				classNames: {
+					footnote: B?.footnote,
+					source: B?.source
+				},
+				sources: f,
+				footNote: v,
+				width: _
+			}) : null
+		]
+	});
+}
+//#endregion
+export { w as n, k as t };
+
+//# sourceMappingURL=CirclePackingGraph-uSZwfRvW.js.map

package/dist/CirclePackingGraph-uSZwfRvW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CirclePackingGraph-uSZwfRvW.js","names":[],"sources":["../node_modules/d3-array/src/extent.js","../node_modules/d3-force-boundary/dist/d3-force-boundary.esm.js","../src/Components/Graphs/CirclePackingGraph/Graph.tsx","../src/Components/Graphs/CirclePackingGraph/getMaxCircleRadius.ts","../src/Components/Graphs/CirclePackingGraph/index.tsx"],"sourcesContent":["export default function extent(values, valueof) {\n  let min;\n  let max;\n  if (valueof === undefined) {\n    for (const value of values) {\n      if (value != null) {\n        if (min === undefined) {\n          if (value >= value) min = max = value;\n        } else {\n          if (min > value) min = value;\n          if (max < value) max = value;\n        }\n      }\n    }\n  } else {\n    let index = -1;\n    for (let value of values) {\n      if ((value = valueof(value, ++index, values)) != null) {\n        if (min === undefined) {\n          if (value >= value) min = max = value;\n        } else {\n          if (min > value) min = value;\n          if (max < value) max = value;\n        }\n      }\n    }\n  }\n  return [min, max];\n}\n","// https://observablehq.com/@john-guerra/d3-force-boundary v0.0.2 Copyright 2022 John Alexis Guerra Gómez\nfunction constant(x) {\n  return function() {\n    return x;\n  };\n}\n\nfunction forceBoundary(x0, y0, x1, y1) {\n  var strength = constant(0.1),\n      hardBoundary = true,\n      border = constant( Math.min((x1 - x0)/2, (y1 - y0)/2) ),\n      nodes,\n      strengthsX,\n      strengthsY,\n      x0z, x1z,\n      y0z, y1z,\n      borderz,\n      halfX, halfY;\n\n  if (typeof x0 !== \"function\") x0 = constant(x0 == null ? -100 : +x0);\n  if (typeof x1 !== \"function\") x1 = constant(x1 == null ? 100 : +x1);\n  if (typeof y0 !== \"function\") y0 = constant(y0 == null ? -100 : +y0);\n  if (typeof y1 !== \"function\") y1 = constant(y1 == null ? 100 : +y1);\n\n  function getVx(halfX, x, strengthX, border, alpha) {\n    return (halfX - x) *  Math.min(2, Math.abs( halfX - x) / halfX) * strengthX * alpha;\n  }\n\n  function force(alpha) {\n    for (var i = 0, n = nodes.length, node; i < n; ++i) {\n      node = nodes[i];\n      // debugger;\n      if ((node.x < (x0z[i] + borderz[i]) || node.x > (x1z[i] - borderz[i])) ||\n        (node.y < (y0z[i] + borderz[i]) || node.y > (y1z[i] - borderz[i]))) {\n        node.vx += getVx(halfX[i], node.x, strengthsX[i], borderz[i], alpha);\n        node.vy += getVx(halfY[i], node.y, strengthsY[i], borderz[i], alpha);\n      } else if (node.y < (y0z[i] + borderz[i]) || node.y > (y1z[i] - borderz[i])) ;\n\n      if (hardBoundary) {\n        if (node.x >= x1z[i]) node.vx += x1z[i] - node.x;\n        if (node.x <= x0z[i]) node.vx += x0z[i] - node.x;\n        if (node.y >= y1z[i]) node.vy += y1z[i] - node.y;\n        if (node.y <= y0z[i]) node.vy += y0z[i] - node.y;\n      }\n    }\n  }\n\n  function initialize() {\n    if (!nodes) return;\n    var i, n = nodes.length;\n    strengthsX = new Array(n);\n    strengthsY = new Array(n);\n    x0z = new Array(n);\n    y0z = new Array(n);\n    x1z = new Array(n);\n    y1z = new Array(n);\n    halfY = new Array(n);\n    halfX = new Array(n);\n    borderz = new Array(n);\n\n    for (i = 0; i < n; ++i) {\n      strengthsX[i] = (isNaN(x0z[i] = +x0(nodes[i], i, nodes)) ||\n        isNaN(x1z[i] = +x1(nodes[i], i, nodes))) ? 0 : +strength(nodes[i], i, nodes);\n      strengthsY[i] = (isNaN(y0z[i] = +y0(nodes[i], i, nodes)) ||\n        isNaN(y1z[i] = +y1(nodes[i], i, nodes))) ? 0 : +strength(nodes[i], i, nodes);\n      halfX[i] = x0z[i] + (x1z[i] - x0z[i])/2,\n      halfY[i] = y0z[i] + (y1z[i] - y0z[i])/2;\n      borderz[i] = +border(nodes[i], i, nodes);\n    }\n  }\n\n  force.initialize = function(_) {\n    nodes = _;\n    initialize();\n  };\n\n  force.x0 = function(_) {\n    return arguments.length ? (x0 = typeof _ === \"function\" ? _ : constant(+_), initialize(), force) : x0;\n  };\n\n  force.x1 = function(_) {\n    return arguments.length ? (x1 = typeof _ === \"function\" ? _ : constant(+_), initialize(), force) : x1;\n  };\n\n  force.y0 = function(_) {\n    return arguments.length ? (y0 = typeof _ === \"function\" ? _ : constant(+_), initialize(), force) : y0;\n  };\n\n  force.y1 = function(_) {\n    return arguments.length ? (y1 = typeof _ === \"function\" ? _ : constant(+_), initialize(), force) : y1;\n  };\n\n  force.strength = function(_) {\n    return arguments.length ? (strength = typeof _ === \"function\" ? _ : constant(+_), initialize(), force) : strength;\n  };\n\n  force.border = function(_) {\n    return arguments.length ? (border = typeof _ === \"function\" ? _ : constant(+_), initialize(), force) : border;\n  };\n\n  force.hardBoundary = function(_) {\n    return arguments.length ? (hardBoundary = _, force) : hardBoundary;\n  };\n\n  return force;\n}\n\nexport default forceBoundary;\n","import { cn } from '@undp/design-system-react/cn';\nimport { Spinner } from '@undp/design-system-react/Spinner';\nimport { P } from '@undp/design-system-react/Typography';\nimport { extent } from 'd3-array';\nimport { forceCollide, forceManyBody, forceSimulation, forceX, forceY } from 'd3-force';\nimport forceBoundary from 'd3-force-boundary';\nimport { scaleSqrt } from 'd3-scale';\nimport orderBy from 'lodash.orderby';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type { ClassNameObject, StyleObject, TreeMapDataType } from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\n\ninterface Props {\n  data: TreeMapDataType[];\n  colors: string[];\n  colorDomain: string[];\n  leftMargin: number;\n  rightMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  showLabels: boolean;\n  showValues: boolean;\n  width: number;\n  height: number;\n  suffix: string;\n  prefix: string;\n  selectedColor?: string;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  highlightedDataPoints?: (string | number)[];\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n  theme: 'light' | 'dark';\n  maxRadiusValue?: number;\n  radius: number;\n  resetSelectionOnDoubleClick: boolean;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  dimmedOpacity: number;\n  precision: number;\n  locale: string;\n  padZeros: boolean;\n}\n\ninterface TreeMapDataTypeForBubbleChart extends TreeMapDataType {\n  x: number;\n  y: number;\n  vx: number;\n  vy: number;\n}\n\nexport const Graph = (props: Props) => {\n  const {\n    data,\n    colors,\n    leftMargin,\n    width,\n    height,\n    colorDomain,\n    selectedColor,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    showLabels,\n    tooltip,\n    onSeriesMouseOver,\n    showValues,\n    suffix,\n    prefix,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    maxRadiusValue,\n    radius,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    styles,\n    classNames,\n    dimmedOpacity,\n    precision,\n    locale,\n    padZeros,\n  } = props;\n  const svgRef = useRef(null);\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  const [viewPortDimensions, setViewPortDimensions] = useState<\n    [number, number, number, number] | undefined\n  >(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const [finalData, setFinalData] = useState<TreeMapDataTypeForBubbleChart[] | null>(null);\n\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: leftMargin,\n    right: rightMargin,\n  };\n\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n\n  const dataOrdered = useMemo(\n    () =>\n      data.filter((d) => !checkIfNullOrUndefined(d.size)).length === 0\n        ? data\n        : orderBy(\n            data.filter((d) => !checkIfNullOrUndefined(d.size)),\n            'radius',\n            'asc',\n          ),\n    [data],\n  );\n\n  const radiusScale = useMemo(\n    () =>\n      data.filter((d) => d.size === undefined || d.size === null).length !== data.length\n        ? scaleSqrt()\n            .domain([\n              0,\n              checkIfNullOrUndefined(maxRadiusValue)\n                ? Math.max(...data.map((d) => d.size).filter((d) => d !== undefined && d !== null))\n                : (maxRadiusValue as number),\n            ])\n            .range([0.25, radius])\n            .nice()\n        : undefined,\n    [data, radius, maxRadiusValue],\n  );\n\n  // Memoize simulation setup\n  useEffect(() => {\n    const setupSimulation = () => {\n      const dataTemp = dataOrdered.map((d) => ({ ...d, ...(d.data && { data: { ...d.data } }) }));\n      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n      const simulation = forceSimulation(dataTemp as any)\n        .force('y', forceY((_d) => graphHeight / 2).strength(1))\n        .force('x', forceX((_d) => graphWidth / 2).strength(1))\n        .force(\n          'collide',\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          forceCollide((d: any) => (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1)),\n        )\n        .force('charge', forceManyBody().strength(-15))\n        .force('boundary', forceBoundary(0, 0, graphWidth, graphHeight).strength(0.2).border(50))\n        .alphaDecay(0.05)\n        .tick(10000);\n\n      simulation\n        .on('tick', () => {\n          setFinalData(dataTemp as TreeMapDataTypeForBubbleChart[]);\n        })\n        .on('end', () => {\n          setFinalData(dataTemp as TreeMapDataTypeForBubbleChart[]);\n          const xMinExtent =\n            extent(\n              dataTemp as TreeMapDataTypeForBubbleChart[],\n              (d) => d.x - (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1),\n            )[0] || 0;\n          const yMinExtent =\n            extent(\n              dataTemp as TreeMapDataTypeForBubbleChart[],\n              (d) => d.y - (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1),\n            )[0] || 0;\n          const xMaxExtent =\n            extent(\n              dataTemp as TreeMapDataTypeForBubbleChart[],\n              (d) => d.x + (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1),\n            )[1] || 0;\n          const yMaxExtent =\n            extent(\n              dataTemp as TreeMapDataTypeForBubbleChart[],\n              (d) => d.y + (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1),\n            )[1] || 0;\n          setViewPortDimensions([\n            xMinExtent,\n            yMinExtent,\n            xMinExtent < 0 ? xMaxExtent - xMinExtent : xMaxExtent,\n            yMinExtent < 0 ? yMaxExtent - yMinExtent : yMaxExtent,\n          ]);\n        });\n    };\n\n    setupSimulation();\n  }, [radius, graphHeight, graphWidth, dataOrdered, radiusScale]);\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const handleMouseEnter = (event: any, d: any) => {\n    setMouseOverData(d);\n    setEventY(event.clientY);\n    setEventX(event.clientX);\n    onSeriesMouseOver?.(d);\n  };\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const handleMouseMove = (event: any, d: any) => {\n    setMouseOverData(d);\n    setEventY(event.clientY);\n    setEventX(event.clientX);\n  };\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const handleClick = (d: any) => {\n    if (onSeriesMouseClick || detailsOnClick) {\n      if (mouseClickData === d.label && resetSelectionOnDoubleClick) {\n        setMouseClickData(undefined);\n        onSeriesMouseClick?.(undefined);\n      } else {\n        setMouseClickData(d.label);\n        onSeriesMouseClick?.(d);\n      }\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setMouseOverData(undefined);\n    setEventX(undefined);\n    setEventY(undefined);\n    onSeriesMouseOver?.(undefined);\n  };\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const getCircleColor = (d: any) =>\n    data.filter((el) => el.color).length === 0\n      ? colors[0]\n      : !d.color\n        ? Colors.gray\n        : colors[colorDomain.indexOf(d.color)];\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const getOpacity = (d: any) =>\n    selectedColor\n      ? d.color\n        ? colors[colorDomain.indexOf(d.color)] === selectedColor\n          ? 1\n          : dimmedOpacity\n        : dimmedOpacity\n      : highlightedDataPoints\n        ? highlightedDataPoints.indexOf(d.label) !== -1\n          ? 0.85\n          : dimmedOpacity\n        : 0.85;\n\n  // Render loading state\n  if (!finalData) {\n    return (\n      <div style={{ width: `${width}px`, height: `${height}px` }}>\n        <div className='flex m-auto items-center justify-center p-0 leading-none text-base h-40'>\n          <Spinner />\n        </div>\n      </div>\n    );\n  }\n  if (viewPortDimensions) {\n    return (\n      <>\n        <svg\n          width={`${width}px`}\n          height={`${height}px`}\n          viewBox={`${viewPortDimensions[0] > 0 ? 0 : viewPortDimensions[0]} ${\n            viewPortDimensions[1] > 0 ? 0 : viewPortDimensions[1]\n          } ${width < viewPortDimensions[2] ? viewPortDimensions[2] : width} ${\n            height < viewPortDimensions[3] ? viewPortDimensions[3] : height\n          }`}\n          direction='ltr'\n          ref={svgRef}\n        >\n          <g transform={`translate(${margin.left},${margin.top})`}>\n            {finalData.map((d) => {\n              const circleColor = getCircleColor(d);\n              const opacity = getOpacity(d);\n              const bubbleRadius = radiusScale ? radiusScale(d.size || 0) : radius;\n              const showLabel = bubbleRadius > 20 && (showLabels || showValues);\n              return (\n                // biome-ignore lint/a11y/noStaticElementInteractions: interaction for graph\n                <g\n                  className='undp-viz-g-with-hover'\n                  key={d.label}\n                  opacity={opacity}\n                  transform={`translate(${d.x},${d.y})`}\n                  onMouseEnter={(event) => handleMouseEnter(event, d)}\n                  onMouseMove={(event) => handleMouseMove(event, d)}\n                  onClick={() => handleClick(d)}\n                  onMouseLeave={handleMouseLeave}\n                >\n                  <circle cx={0} cy={0} r={bubbleRadius} fill={circleColor} />\n                  {(showLabel || showValues) &&\n                    d.size !== undefined &&\n                    d.size !== null &&\n                    bubbleRadius >= 15 && (\n                      <g>\n                        <foreignObject\n                          y={0 - bubbleRadius}\n                          x={0 - bubbleRadius}\n                          width={2 * bubbleRadius}\n                          height={2 * bubbleRadius}\n                        >\n                          <div\n                            className='flex flex-col justify-center items-center h-full py-0 px-3'\n                            style={{\n                              display: 'flex',\n                              flexDirection: 'column',\n                              justifyContent: 'center',\n                              alignItems: 'center',\n                              height: '100%',\n                              padding: '0 0.75rem',\n                            }}\n                          >\n                            {showLabels && (\n                              <P\n                                className={cn(\n                                  'text-center leading-[1.25] overflow-hidden m-0 circle-packing-label',\n                                  classNames?.graphObjectValues,\n                                )}\n                                marginBottom='none'\n                                style={{\n                                  fontSize: `${Math.min(\n                                    Math.max(Math.round(bubbleRadius / 4), 12),\n                                    Math.max(\n                                      Math.round((bubbleRadius * 12) / `${d.label}`.length),\n                                      12,\n                                    ),\n                                    14,\n                                  )}px`,\n                                  WebkitLineClamp:\n                                    bubbleRadius * 2 < 60\n                                      ? 1\n                                      : bubbleRadius * 2 < 75\n                                        ? 2\n                                        : bubbleRadius * 2 < 100\n                                          ? 3\n                                          : undefined,\n                                  display: '-webkit-box',\n                                  WebkitBoxOrient: 'vertical',\n                                  color: getTextColorBasedOnBgColor(circleColor),\n                                  hyphens: 'auto',\n                                  ...(styles?.graphObjectValues || {}),\n                                }}\n                              >\n                                {d.label}\n                              </P>\n                            )}\n                            {showValues && (\n                              <P\n                                className='text-center font-bold leading-[1.25] w-full m-0 circle-packing-value'\n                                marginBottom='none'\n                                style={{\n                                  fontSize: `${Math.min(\n                                    Math.max(Math.round(bubbleRadius / 4), 14),\n                                    14,\n                                  )}px`,\n                                  color: getTextColorBasedOnBgColor(circleColor),\n                                }}\n                              >\n                                {numberFormattingFunction(\n                                  d.size,\n                                  undefined,\n                                  precision,\n                                  prefix,\n                                  suffix,\n                                  locale,\n                                  padZeros,\n                                )}\n                              </P>\n                            )}\n                          </div>\n                        </foreignObject>\n                      </g>\n                    )}\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n        {mouseOverData && tooltip && eventX && eventY && (\n          <Tooltip\n            data={mouseOverData}\n            body={tooltip}\n            xPos={eventX}\n            yPos={eventY}\n            backgroundStyle={styles?.tooltip}\n            className={classNames?.tooltip}\n          />\n        )}\n        {detailsOnClick && mouseClickData !== undefined ? (\n          <DetailsModal\n            body={detailsOnClick}\n            data={mouseClickData}\n            setData={setMouseClickData}\n            className={classNames?.modal}\n          />\n        ) : null}\n      </>\n    );\n  }\n  return null;\n};\n","export function getMaxCircleRadius(\n  values: (number | undefined | null)[],\n  width: number,\n  height: number,\n  circularBoundary?: boolean,\n) {\n  const filteredValues = values.filter((d) => d !== undefined && d !== null);\n  const containerRadius =\n    circularBoundary === false\n      ? Math.sqrt((width * height) / Math.PI)\n      : Math.min(width, height) / 2;\n  const totalValue = filteredValues.reduce((sum, v) => sum + v, 0);\n  const maxValue = Math.max(...filteredValues);\n  const getPackingEfficiency = (n: number) => {\n    if (n <= 5) return 0.9;\n    if (n <= 10) return 0.85;\n    if (n <= 20) return 0.8;\n    return 0.7;\n  };\n  const getEfficiencyBecauseOfContainerRadius = (r: number) => {\n    if (r <= 200) return 0.85;\n    if (r <= 250) return 0.95;\n    return 1;\n  };\n  return (\n    containerRadius *\n    Math.sqrt(maxValue / totalValue) *\n    (circularBoundary ? getEfficiencyBecauseOfContainerRadius(containerRadius) : 1) *\n    (circularBoundary ? getPackingEfficiency(filteredValues.length) : 1)\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { ColorLegendWithMouseOver } from '@/Components/Elements/ColorLegendWithMouseOver';\nimport { EmptyState } from '@/Components/Elements/EmptyState';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  ClassNameObject,\n  Languages,\n  NumberFormatOptions,\n  SourcesDataType,\n  StyleObject,\n  TreeMapDataType,\n} from '@/Types';\nimport { uniqBy } from '@/Utils/uniqBy';\nimport { Graph } from './Graph';\nimport { getMaxCircleRadius } from './getMaxCircleRadius';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: TreeMapDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Color or array of colors for circle */\n  colors?: string | string[];\n  /** Domain of colors for the graph */\n  colorDomain?: string[];\n  /** Title for the color legend */\n  colorLegendTitle?: string;\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n  /** Left margin of the graph */\n  leftMargin?: number;\n  /** Right margin of the graph */\n  rightMargin?: number;\n  /** Top margin of the graph */\n  topMargin?: number;\n  /** Bottom margin of the graph */\n  bottomMargin?: number;\n\n  // Values and Ticks\n  /** Maximum value mapped to the radius chart */\n  maxRadiusValue?: number;\n\n  // Graph Parameters\n  /** If true, the graph will be rendered in a circle layout */\n  circularBoundary?: boolean;\n  /** Maximum radius of the circle */\n  radius?: number;\n  /** Toggle visibility of labels */\n  showLabels?: boolean;\n  /** Toggle visibility of values */\n  showValues?: boolean;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */\n  showNAColor?: boolean;\n  /** Data points to highlight. Use the label value from data to highlight the data point */\n  highlightedDataPoints?: (string | number)[];\n  /** Defines the opacity of the non-highlighted data */\n  dimmedOpacity?: number;\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\n  numberDisplayOptions?: NumberFormatOptions;\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n  /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */\n  resetSelectionOnDoubleClick?: boolean;\n\n  // Interactions and Callbacks\n  /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  detailsOnClick?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  /** Callback for mouse click event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function CirclePackingGraph(props: Props) {\n  const {\n    data,\n    graphTitle,\n    colors,\n    sources,\n    graphDescription,\n    leftMargin = 0,\n    rightMargin = 0,\n    height,\n    width,\n    footNote,\n    colorDomain,\n    colorLegendTitle,\n    padding,\n    backgroundColor = false,\n    topMargin = 0,\n    bottomMargin = 0,\n    showLabels = true,\n    relativeHeight,\n    tooltip,\n    onSeriesMouseOver,\n    showColorScale = true,\n    showValues,\n    graphID,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    graphDownload = false,\n    dataDownload = false,\n    language = 'en',\n    showNAColor,\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    radius,\n    maxRadiusValue,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    styles,\n    classNames,\n    dimmedOpacity = 0.3,\n    circularBoundary = true,\n    numberDisplayOptions,\n  } = props;\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      {showColorScale && data.filter((el) => el.color).length !== 0 && data.length > 0 ? (\n        <ColorLegendWithMouseOver\n          width={width}\n          colorLegendTitle={colorLegendTitle}\n          colors={(colors as string[] | undefined) || Colors[theme].categoricalColors.colors}\n          colorDomain={colorDomain || (uniqBy(data, 'color', true) as string[])}\n          setSelectedColor={setSelectedColor}\n          showNAColor={showNAColor === undefined || showNAColor === null ? true : showNAColor}\n          isCenter\n          className={classNames?.colorLegend}\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {data.length === 0 && <EmptyState />}\n        {svgWidth && svgHeight && data.length > 0 ? (\n          <Graph\n            data={data}\n            colors={\n              data.filter((el) => el.color).length === 0\n                ? colors\n                  ? [colors as string]\n                  : [Colors.primaryColors['blue-600']]\n                : (colors as string[] | undefined) || Colors[theme].categoricalColors.colors\n            }\n            colorDomain={\n              data.filter((el) => el.color).length === 0\n                ? []\n                : colorDomain || (uniqBy(data, 'color', true) as string[])\n            }\n            width={svgWidth}\n            height={svgHeight}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            showLabels={showLabels}\n            showValues={\n              showValues !== false\n                ? data.filter((el) => el.size).length !== 0\n                : (showValues as boolean)\n            }\n            selectedColor={selectedColor}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            highlightedDataPoints={highlightedDataPoints}\n            onSeriesMouseClick={onSeriesMouseClick}\n            theme={theme}\n            radius={\n              !radius\n                ? getMaxCircleRadius(\n                    data.map((d) => d.size),\n                    svgWidth,\n                    svgHeight,\n                    circularBoundary,\n                  )\n                : radius\n            }\n            maxRadiusValue={maxRadiusValue}\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n            detailsOnClick={detailsOnClick}\n            styles={styles}\n            classNames={classNames}\n            dimmedOpacity={dimmedOpacity}\n            locale={numberDisplayOptions?.locale || 'en'}\n            padZeros={numberDisplayOptions?.padZeros || false}\n            suffix={numberDisplayOptions?.suffix || ''}\n            prefix={numberDisplayOptions?.prefix || ''}\n            precision={numberDisplayOptions?.precision ?? 2}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"x_google_ignoreList":[0,1],"mappings":"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"}

package/dist/CirclePackingGraph.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./index-CHPV5EwG-D4pAp7u0.cjs");require("react");const e=require("./index-DuLvdHo2.cjs");require("./GraphFooter.cjs");require("./GraphHeader.cjs");require("./ColorLegendWithMouseOver.cjs");require("./Colors.cjs");require("./EmptyState-CFmiFPHz.cjs");require("./uniqBy-O05lp2S5.cjs");require("./GraphContainer-Cul9b74X.cjs");exports.CirclePackingGraph=e.CirclePackingGraph;
-//# sourceMappingURL=CirclePackingGraph.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./CirclePackingGraph-Rl84B8C1.cjs`);exports.CirclePackingGraph=e.t;

package/dist/CirclePackingGraph.d.ts

@@ -1,162 +1,2 @@
-import { JSX } from 'react/jsx-runtime';
-
-declare interface AxesClassNameObject {
-    gridLines?: string;
-    labels?: string;
-    title?: string;
-    axis?: string;
-}
-
-declare interface AxesStyleObject {
-    gridLines?: React.CSSProperties;
-    labels?: React.CSSProperties;
-    title?: React.CSSProperties;
-    axis?: React.CSSProperties;
-}
-
-export declare function CirclePackingGraph(props: Props): JSX.Element;
-
-declare interface ClassNameObject {
-    title?: string;
-    footnote?: string;
-    source?: string;
-    description?: string;
-    tooltip?: string;
-    xAxis?: AxesClassNameObject;
-    yAxis?: AxesClassNameObject;
-    legend?: string;
-    graphContainer?: string;
-    graphObjectValues?: string;
-    dataConnectors?: string;
-    mouseOverLine?: string;
-    regLine?: string;
-    dataCards?: string;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-declare interface NumberFormatOptions {
-    locale?: string;
-    precision?: number;
-    prefix?: string;
-    suffix?: string;
-    padZeros?: boolean;
-}
-
-declare interface Props {
-    /** Array of data objects */
-    data: TreeMapDataType[];
-    /** Title of the graph */
-    graphTitle?: string | React.ReactNode;
-    /** Description of the graph */
-    graphDescription?: string | React.ReactNode;
-    /** Footnote for the graph */
-    footNote?: string | React.ReactNode;
-    /** Source data for the graph */
-    sources?: SourcesDataType[];
-    /** Accessibility label */
-    ariaLabel?: string;
-    /** Color or array of colors for circle */
-    colors?: string | string[];
-    /** Domain of colors for the graph */
-    colorDomain?: string[];
-    /** Title for the color legend */
-    colorLegendTitle?: string;
-    /** Background color of the graph */
-    backgroundColor?: string | boolean;
-    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
-    styles?: StyleObject;
-    /** Custom class names */
-    classNames?: ClassNameObject;
-    /** Width of the graph */
-    width?: number;
-    /** Height of the graph */
-    height?: number;
-    /** Minimum height of the graph */
-    minHeight?: number;
-    /** Relative height scaling factor. This overwrites the height props */
-    relativeHeight?: number;
-    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
-    padding?: string;
-    /** Left margin of the graph */
-    leftMargin?: number;
-    /** Right margin of the graph */
-    rightMargin?: number;
-    /** Top margin of the graph */
-    topMargin?: number;
-    /** Bottom margin of the graph */
-    bottomMargin?: number;
-    /** Maximum value mapped to the radius chart */
-    maxRadiusValue?: number;
-    /** If true, the graph will be rendered in a circle layout */
-    circularBoundary?: boolean;
-    /** Maximum radius of the circle */
-    radius?: number;
-    /** Toggle visibility of labels */
-    showLabels?: boolean;
-    /** Toggle visibility of values */
-    showValues?: boolean;
-    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
-    showColorScale?: boolean;
-    /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */
-    showNAColor?: boolean;
-    /** Data points to highlight. Use the label value from data to highlight the data point */
-    highlightedDataPoints?: (string | number)[];
-    /** Defines the opacity of the non-highlighted data */
-    dimmedOpacity?: number;
-    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
-    numberDisplayOptions?: NumberFormatOptions;
-    /** Enable graph download option as png */
-    graphDownload?: boolean;
-    /** Enable data download option as a csv */
-    dataDownload?: boolean;
-    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
-    resetSelectionOnDoubleClick?: boolean;
-    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    tooltip?: string | ((_d: any) => React.ReactNode);
-    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
-    detailsOnClick?: string | ((_d: any) => React.ReactNode);
-    /** Callback for mouse over event */
-    onSeriesMouseOver?: (_d: any) => void;
-    /** Callback for mouse click event */
-    onSeriesMouseClick?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-declare interface StyleObject {
-    title?: React.CSSProperties;
-    footnote?: React.CSSProperties;
-    source?: React.CSSProperties;
-    description?: React.CSSProperties;
-    graphContainer?: React.CSSProperties;
-    tooltip?: React.CSSProperties;
-    xAxis?: AxesStyleObject;
-    yAxis?: AxesStyleObject;
-    graphObjectValues?: React.CSSProperties;
-    dataConnectors?: React.CSSProperties;
-    mouseOverLine?: React.CSSProperties;
-    regLine?: React.CSSProperties;
-    dataCards?: React.CSSProperties;
-    modal?: React.CSSProperties;
-}
-
-declare interface TreeMapDataType {
-    label: string | number;
-    size?: number | null;
-    color?: string;
-    data?: object;
-}
-
-export { }
+export * from './Components/Graphs/CirclePackingGraph/index'
+export {}

package/dist/CirclePackingGraph.js

@@ -1,14 +1,2 @@
-import "./index-CHPV5EwG-BzibaIRc.js";
-import "react";
-import { C as g } from "./index-BPyj_6hG.js";
-import "./GraphFooter.js";
-import "./GraphHeader.js";
-import "./ColorLegendWithMouseOver.js";
-import "./Colors.js";
-import "./EmptyState-CaxXCkiN.js";
-import "./uniqBy-BHy4I8PK.js";
-import "./GraphContainer-B8ZqOzKI.js";
-export {
-  g as CirclePackingGraph
-};
-//# sourceMappingURL=CirclePackingGraph.js.map
+import { t as e } from "./CirclePackingGraph-uSZwfRvW.js";
+export { e as CirclePackingGraph };

package/dist/ColorLegend.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-CHPV5EwG-D4pAp7u0.cjs"),b=require("./Typography-BqmyF1gP.cjs"),B=require("./Colors.cjs");function T(w){const e=s.compilerRuntimeExports.c(29),{colorLegendTitle:a,colorDomain:g,colors:t,showNAColor:h,width:v,isCenter:d,className:E,labelsToBeHidden:u}=w;let j;e[0]!==u?(j=u===void 0?[]:u,e[0]=u,e[1]=j):j=e[1];const m=j,R=d&&"justify-center";let l;e[2]!==E||e[3]!==R?(l=s.mo("flex leading-0 pb-3",R,E),e[2]=E,e[3]=R,e[4]=l):l=e[4];const C=v?`${v}px`:"none";let o;e[5]!==C?(o={maxWidth:C},e[5]=C,e[6]=o):o=e[6];let n;e[7]!==a||e[8]!==d?(n=a&&a!==""?s.jsxRuntimeExports.jsx(b._,{size:"sm",marginBottom:"2xs",className:d?"text-center":"",children:a}):null,e[7]=a,e[8]=d,e[9]=n):n=e[9];let i;if(e[10]!==g||e[11]!==t||e[12]!==m){let f;e[14]!==t||e[15]!==m?(f=(N,y)=>m.includes(N)?null:s.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-1",children:[s.jsxRuntimeExports.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:t[y%t.length]}}),N===""?null:s.jsxRuntimeExports.jsx(b._,{size:"sm",marginBottom:"none",children:N})]},y),e[14]=t,e[15]=m,e[16]=f):f=e[16],i=g.map(f),e[10]=g,e[11]=t,e[12]=m,e[13]=i}else i=e[13];let r;e[17]!==h?(r=h?s.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-1",children:[s.jsxRuntimeExports.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:B.Colors.gray}}),s.jsxRuntimeExports.jsx(b._,{size:"sm",marginBottom:"none",children:"NA"})]}):null,e[17]=h,e[18]=r):r=e[18];let x;e[19]!==i||e[20]!==r?(x=s.jsxRuntimeExports.jsxs("div",{className:"flex flex-wrap mb-0 gap-3.5",children:[i,r]}),e[19]=i,e[20]=r,e[21]=x):x=e[21];let c;e[22]!==n||e[23]!==x?(c=s.jsxRuntimeExports.jsxs("div",{children:[n,x]}),e[22]=n,e[23]=x,e[24]=c):c=e[24];let p;return e[25]!==c||e[26]!==l||e[27]!==o?(p=s.jsxRuntimeExports.jsx("div",{className:l,style:o,"aria-label":"Color legend",children:c}),e[25]=c,e[26]=l,e[27]=o,e[28]=p):p=e[28],p}exports.ColorLegend=T;
-//# sourceMappingURL=ColorLegend.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./jsx-runtime-Cd1vCQjn.cjs`),t=require(`./Colors.cjs`);let n=require(`@undp/design-system-react/cn`),r=require(`@undp/design-system-react/Typography`);var i=e.t();function a(e){let{colorLegendTitle:a,colorDomain:o,colors:s,showNAColor:c,width:l,isCenter:u,className:d,labelsToBeHidden:f=[]}=e;return(0,i.jsx)(`div`,{className:(0,n.cn)(`flex leading-0 pb-3`,u&&`justify-center`,d),style:{maxWidth:l?`${l}px`:`none`},children:(0,i.jsxs)(`div`,{children:[a&&a!==``?(0,i.jsx)(r.P,{size:`sm`,marginBottom:`2xs`,className:u?`text-center`:``,children:a}):null,(0,i.jsxs)(`div`,{className:`flex flex-wrap mb-0 gap-3.5`,children:[o.map((e,t)=>f.includes(e)?null:(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`div`,{className:`w-3 h-3 rounded-full`,style:{backgroundColor:s[t%s.length]}}),e===``?null:(0,i.jsx)(r.P,{size:`sm`,marginBottom:`none`,children:e})]},t)),c?(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`div`,{className:`w-3 h-3 rounded-full`,style:{backgroundColor:t.Colors.gray}}),(0,i.jsx)(r.P,{size:`sm`,marginBottom:`none`,children:`NA`})]}):null]})]})})}exports.ColorLegend=a;
+//# sourceMappingURL=ColorLegend.cjs.map