@undp/data-viz 2.5.4 → 2.6.1

package/dist/DotDensityMap-F0i_P_SE.js

@@ -0,0 +1,463 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { i as n, l as r, m as ee, u as i } from "./Icons-BLXwPP3h.js";
+import { t as a } from "./CsvDownloadButton-BZ7Zr0Gz.js";
+import { ImageDownloadButton as te } from "./ImageDownloadButton.js";
+import { Colors as o } from "./Colors.js";
+import { GraphFooter as s } from "./GraphFooter.js";
+import { GraphHeader as c } from "./GraphHeader.js";
+import { t as l } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { r as u } from "./fetchAndParseData-C50SqMPu.js";
+import { t as d } from "./uniqBy-feeqYuys.js";
+import { n as ne, t as f } from "./GraphContainer-DgEB1AVN.js";
+import { n as re, t as ie } from "./parse-5MWhaq6h.js";
+import { t as ae } from "./getSliderMarks-CTKVxOEm.js";
+import { a as oe, c as p, i as m, l as se, n as ce, o as le, r as ue, s as de, t as fe } from "./src-2DIiCwTd.js";
+import { t as pe } from "./pow-CISbw8TV.js";
+import { t as h } from "./fast-deep-equal--80N92KJ.js";
+import { t as g } from "./proxy-BiRrIImK.js";
+import { t as me } from "./AnimatePresence-CE6xBsMZ.js";
+import { t as he } from "./use-in-view-CjlKdln1.js";
+import { t as ge } from "./DetailsModal-DxUowfkg.js";
+import { t as _e } from "./Tooltip-Y6uTGwkF.js";
+import { t as _ } from "./select-0Z0HV7nm.js";
+import { t as ve } from "./esm-D23XoYrV.js";
+import { cn as v } from "@undp/design-system-react/cn";
+import { useEffect as y, useEffectEvent as ye, useMemo as be, useRef as b, useState as x } from "react";
+import { Spinner as xe } from "@undp/design-system-react/Spinner";
+import { P as Se } from "@undp/design-system-react/Typography";
+import { SliderUI as Ce } from "@undp/design-system-react/SliderUI";
+//#region src/Components/Graphs/Maps/DotDensityMap/Graph.tsx
+var we = /* @__PURE__ */ e(h(), 1), S = t();
+function Te(e) {
+	let { data: t, colors: r, mapData: i, colorLegendTitle: s, colorDomain: c, radius: l, height: u, width: d, scale: ne, centerPoint: f, tooltip: re, showLabels: ie, mapBorderWidth: ae, mapBorderColor: h, mapNoDataColor: ye, onSeriesMouseOver: xe, showColorScale: Ce, zoomScaleExtend: Te, zoomTranslateExtend: Ee, highlightedDataPoints: De, onSeriesMouseClick: C, resetSelectionOnDoubleClick: Oe, detailsOnClick: w, styles: ke, classNames: T, mapProjection: E, zoomInteraction: D, animate: O, dimmedOpacity: Ae, customLayers: je, maxRadiusValue: Me, collapseColorScaleByDefault: k, projectionRotate: A, rewindCoordinatesInMapData: j, overlayMapData: M, overlayMapBorderColor: Ne, overlayMapBorderWidth: Pe, graphDownload: N, dataDownload: P } = e, F = be(() => j ? p(i, { reverse: !0 }) : i, [i, j]), Fe = be(() => !j || !M ? M : p(M, { reverse: !0 }), [M, j]), [Ie, I] = x(void 0), [L, R] = x(k === void 0 ? !(d < 680) : !k), z = b(null), [B, V] = x(void 0), [H, U] = x(void 0), [W, G] = x(void 0), [K, q] = x(void 0), J = b(null), Y = he(J, {
+		once: O.once,
+		amount: O.amount
+	}), Le = b(null), X = t.filter((e) => e.radius === void 0 || e.radius === null).length === t.length ? void 0 : pe().domain([0, Me]).range([.25, l]).nice();
+	y(() => {
+		let e = _(Le.current), t = _(J.current), n = fe().scaleExtent(Te).translateExtent(Ee || [[-20, -20], [d + 20, u + 20]]).filter((e) => {
+			if (D === "noZoom") return !1;
+			if (D === "button") return !e.type.includes("wheel");
+			let t = e.type === "wheel", n = e.type.startsWith("touch"), r = e.type === "mousedown" || e.type === "mousemove";
+			return n ? !0 : t ? D === "scroll" ? !0 : e.ctrlKey : r && !e.button && !e.ctrlKey;
+		}).on("zoom", ({ transform: t }) => {
+			e.attr("transform", t);
+		});
+		t.call(n), z.current = n;
+	}, [
+		u,
+		d,
+		D
+	]);
+	let Z = se(F), Q = ve(F), Re = (Z[2] - Z[0]) * 1.15, ze = (Z[3] - Z[1]) * 1.15, Be = d * 190 / 960 * 360 / Re, Ve = u * 190 / 678 * 180 / ze, $ = ne * Math.min(Be, Ve), He = E === "mercator" ? oe().rotate(A).center(f || Q.geometry.coordinates).translate([d / 2, u / 2]).scale($) : E === "equalEarth" ? m().rotate(A).center(f || Q.geometry.coordinates).translate([d / 2, u / 2]).scale($) : E === "naturalEarth" ? ue().rotate(A).center(f || Q.geometry.coordinates).translate([d / 2, u / 2]).scale($) : E === "orthographic" ? ce().rotate(A).center(f || Q.geometry.coordinates).translate([d / 2, u / 2]).scale($) : le().rotate(A).center(f || Q.geometry.coordinates).translate([d / 2, u / 2]).scale($), Ue = de().projection(He), We = (e) => {
+		!J.current || !z.current || _(J.current).call(z.current.scaleBy, e === "in" ? 1.2 : 1 / 1.2);
+	};
+	return /* @__PURE__ */ (0, S.jsxs)(S.Fragment, { children: [
+		/* @__PURE__ */ (0, S.jsxs)("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ (0, S.jsx)(g.svg, {
+					width: `${d}px`,
+					height: `${u}px`,
+					viewBox: `0 0 ${d} ${u}`,
+					ref: J,
+					direction: "ltr",
+					children: /* @__PURE__ */ (0, S.jsxs)("g", {
+						ref: Le,
+						children: [
+							je.filter((e) => e.position === "before").map((e) => e.layer),
+							F.features.map((e, t) => {
+								let n = Ue(e);
+								return n ? /* @__PURE__ */ (0, S.jsx)("path", {
+									d: n,
+									style: {
+										stroke: h,
+										strokeWidth: ae,
+										fill: ye,
+										vectorEffect: "non-scaling-stroke"
+									}
+								}, t) : null;
+							}),
+							Fe?.features.map((e, t) => {
+								let n = Ue(e);
+								return n ? /* @__PURE__ */ (0, S.jsx)("g", { children: /* @__PURE__ */ (0, S.jsx)("path", {
+									d: n,
+									style: {
+										stroke: Ne || h,
+										strokeWidth: Pe || ae + 1,
+										fill: "none",
+										pointerEvents: "none",
+										vectorEffect: "non-scaling-stroke"
+									}
+								}) }, t) : null;
+							}),
+							/* @__PURE__ */ (0, S.jsx)(me, { children: t.map((e) => {
+								let n = t.filter((e) => e.color).length === 0 ? r[0] : e.color ? r[c.indexOf(`${e.color}`)] : o.gray;
+								return /* @__PURE__ */ (0, S.jsxs)(g.g, {
+									className: "undp-map-dots",
+									variants: {
+										initial: { opacity: 0 },
+										whileInView: {
+											opacity: Ie ? Ie === n ? 1 : Ae : De && De.indexOf(e.label || "") === -1 ? Ae : 1,
+											transition: { duration: O.duration }
+										}
+									},
+									initial: "initial",
+									animate: Y ? "whileInView" : "initial",
+									exit: {
+										opacity: 0,
+										transition: { duration: O.duration }
+									},
+									onMouseEnter: (t) => {
+										U(e), q(t.clientY), G(t.clientX), xe?.(e);
+									},
+									onMouseMove: (t) => {
+										U(e), q(t.clientY), G(t.clientX);
+									},
+									onMouseLeave: () => {
+										U(void 0), G(void 0), q(void 0), xe?.(void 0);
+									},
+									onClick: () => {
+										(C || w) && ((0, we.default)(B, e) && Oe ? (V(void 0), C?.(void 0)) : (V(e), C?.(e)));
+									},
+									transform: `translate(${He([e.long, e.lat])[0]},${He([e.long, e.lat])[1]})`,
+									children: [/* @__PURE__ */ (0, S.jsx)(g.circle, {
+										cx: 0,
+										cy: 0,
+										variants: {
+											initial: {
+												r: 0,
+												fill: t.filter((e) => e.color).length === 0 ? r[0] : e.color ? r[c.indexOf(`${e.color}`)] : o.gray,
+												stroke: t.filter((e) => e.color).length === 0 ? r[0] : e.color ? r[c.indexOf(`${e.color}`)] : o.gray
+											},
+											whileInView: {
+												r: X ? X(e.radius || 0) : l,
+												fill: t.filter((e) => e.color).length === 0 ? r[0] : e.color ? r[c.indexOf(`${e.color}`)] : o.gray,
+												stroke: t.filter((e) => e.color).length === 0 ? r[0] : e.color ? r[c.indexOf(`${e.color}`)] : o.gray,
+												transition: { duration: O.duration }
+											}
+										},
+										initial: "initial",
+										animate: Y ? "whileInView" : "initial",
+										exit: {
+											r: 0,
+											transition: { duration: O.duration }
+										},
+										style: {
+											fillOpacity: .8,
+											vectorEffect: "non-scaling-stroke"
+										}
+									}), ie && e.label ? /* @__PURE__ */ (0, S.jsx)(g.text, {
+										variants: {
+											initial: {
+												opacity: 0,
+												x: X ? X(e.radius || 0) : l,
+												fill: t.filter((e) => e.color).length === 0 ? r[0] : e.color ? r[c.indexOf(`${e.color}`)] : o.gray
+											},
+											whileInView: {
+												opacity: 1,
+												x: X ? X(e.radius || 0) : l,
+												transition: { duration: O.duration },
+												fill: t.filter((e) => e.color).length === 0 ? r[0] : e.color ? r[c.indexOf(`${e.color}`)] : o.gray
+											}
+										},
+										initial: "initial",
+										animate: Y ? "whileInView" : "initial",
+										exit: {
+											opacity: 0,
+											transition: { duration: O.duration }
+										},
+										y: 0,
+										className: v("graph-value text-sm", T?.graphObjectValues),
+										style: {
+											textAnchor: "start",
+											vectorEffect: "non-scaling-stroke",
+											...ke?.graphObjectValues || {}
+										},
+										dx: 4,
+										dy: 5,
+										children: e.label
+									}) : null]
+								}, e.label || `${e.lat}-${e.long}`);
+							}) }),
+							je.filter((e) => e.position === "after").map((e) => e.layer)
+						]
+					})
+				}),
+				t.filter((e) => e.color).length === 0 || Ce === !1 ? null : /* @__PURE__ */ (0, S.jsx)("div", {
+					className: v("absolute left-4 bottom-4 map-color-legend", T?.colorLegend),
+					children: L ? /* @__PURE__ */ (0, S.jsxs)(S.Fragment, { children: [/* @__PURE__ */ (0, S.jsx)("button", {
+						type: "button",
+						className: "color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]",
+						onClick: () => {
+							R(!1);
+						},
+						children: /* @__PURE__ */ (0, S.jsx)(ee, {})
+					}), /* @__PURE__ */ (0, S.jsxs)("div", {
+						className: "p-2",
+						style: { backgroundColor: "rgba(240,240,240, 0.7)" },
+						children: [s && s !== "" ? /* @__PURE__ */ (0, S.jsx)("p", {
+							className: "p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300",
+							style: {
+								display: "-webkit-box",
+								WebkitLineClamp: "1",
+								WebkitBoxOrient: "vertical"
+							},
+							children: s
+						}) : null, /* @__PURE__ */ (0, S.jsx)("div", {
+							className: "flex flex-col gap-3",
+							children: c.map((e, t) => /* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "flex gap-2 items-center",
+								onMouseOver: () => {
+									I(r[t % r.length]);
+								},
+								onFocus: () => {
+									I(r[t % r.length]);
+								},
+								onMouseLeave: () => {
+									I(void 0);
+								},
+								children: [/* @__PURE__ */ (0, S.jsx)("div", {
+									className: "w-2 h-2 rounded-full",
+									style: { backgroundColor: r[t % r.length] }
+								}), /* @__PURE__ */ (0, S.jsx)(Se, {
+									size: "sm",
+									marginBottom: "none",
+									leading: "none",
+									children: e
+								})]
+							}, t))
+						})]
+					})] }) : /* @__PURE__ */ (0, S.jsx)("button", {
+						type: "button",
+						className: "p-1 border-0 rounded-[2px] text-primary-gray-700 bg-primary-gray-300 dark:bg-primary-gray-500 map-legend-button",
+						onClick: () => {
+							R(!0);
+						},
+						children: /* @__PURE__ */ (0, S.jsx)(n, {})
+					})
+				}),
+				D === "button" && /* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "absolute left-4 top-4 flex flex-col undp-viz-zoom-buttons",
+					children: [/* @__PURE__ */ (0, S.jsx)("button", {
+						type: "button",
+						onClick: () => We("in"),
+						className: "leading-0 px-2 py-3.5 text-primary-gray-700 border border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100",
+						children: "+"
+					}), /* @__PURE__ */ (0, S.jsx)("button", {
+						type: "button",
+						onClick: () => We("out"),
+						className: "leading-0 px-2 py-3.5 text-primary-gray-700 border border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100",
+						children: "–"
+					})]
+				}),
+				(N || P) && /* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "absolute right-4 top-4 flex flex-col image-download-button gap-2",
+					children: [N && /* @__PURE__ */ (0, S.jsx)(te, {
+						nodeID: N,
+						buttonSmall: !0,
+						className: "p-1"
+					}), P && P.length > 0 && /* @__PURE__ */ (0, S.jsx)(a, {
+						csvData: P,
+						buttonSmall: !0,
+						headers: Object.keys(P[0]).map((e) => ({
+							label: e,
+							key: e
+						})),
+						className: "p-1"
+					})]
+				})
+			]
+		}),
+		w && B !== void 0 ? /* @__PURE__ */ (0, S.jsx)(ge, {
+			body: w,
+			data: B,
+			setData: V,
+			className: T?.modal
+		}) : null,
+		H && re && W && K ? /* @__PURE__ */ (0, S.jsx)(_e, {
+			data: H,
+			body: re,
+			xPos: W,
+			yPos: K,
+			backgroundStyle: ke?.tooltip,
+			className: T?.tooltip
+		}) : null
+	] });
+}
+//#endregion
+//#region src/Components/Graphs/Maps/DotDensityMap/index.tsx
+function Ee(e) {
+	let { data: t, mapData: n = "https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-v2.json", graphTitle: ee, colors: a, sources: te, graphDescription: oe, height: p, width: m, footNote: se = "The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.", colorLegendTitle: ce, colorDomain: le, radius: ue = 5, scale: de = .95, centerPoint: fe, padding: pe, mapBorderWidth: h = .5, mapNoDataColor: g = o.light.graphNoData, backgroundColor: me = !1, showLabels: he = !1, mapBorderColor: ge = o.light.grays["gray-500"], tooltip: _e, relativeHeight: _, onSeriesMouseOver: ve, isWorldMap: v = !0, showColorScale: Se = !0, zoomScaleExtend: we = [.8, 6], zoomTranslateExtend: Ee, graphID: De, highlightedDataPoints: C, onSeriesMouseClick: Oe, graphDownload: w = !1, dataDownload: ke = !1, showAntarctica: T = !1, language: E = "en", minHeight: D = 0, theme: O = "light", ariaLabel: Ae, resetSelectionOnDoubleClick: je = !0, detailsOnClick: Me, styles: k, classNames: A, mapProjection: j = "naturalEarth", zoomInteraction: M = "button", animate: Ne = !1, dimmedOpacity: Pe = .3, customLayers: N = [], maxRadiusValue: P, timeline: F = {
+		enabled: !1,
+		autoplay: !1,
+		showOnlyActiveDate: !0
+	}, collapseColorScaleByDefault: Fe, projectionRotate: Ie = [0, 0], rewindCoordinatesInMapData: I = !0, mapOverlay: L } = e, [R, z] = x(0), [B, V] = x(0), [H, U] = x(F.autoplay), W = be(() => {
+		let e = [...new Set(t.filter((e) => e.date).map((e) => ie(`${e.date}`, F.dateFormat || "yyyy", /* @__PURE__ */ new Date()).getTime()))];
+		return e.sort((e, t) => e - t), e;
+	}, [t, F.dateFormat]), [G, K] = x(F.autoplay ? 0 : W.length - 1), [q, J] = x(void 0), [Y, Le] = x(void 0), X = b(null), Z = b(null);
+	y(() => {
+		let e = new ResizeObserver((e) => {
+			z(e[0].target.clientWidth || 620), V(e[0].target.clientHeight || 480);
+		});
+		return X.current && e.observe(X.current), () => e.disconnect();
+	}, []);
+	let Q = ye((e) => {
+		J(e);
+	}), Re = ye((e) => {
+		Le(e);
+	});
+	y(() => {
+		typeof n == "string" ? u(n).then((e) => {
+			Q(e);
+		}) : Q(n);
+	}, [n]), y(() => {
+		L?.mapData || Re(void 0), typeof L?.mapData == "string" ? u(L?.mapData).then((e) => {
+			Re(e);
+		}) : Re(L?.mapData);
+	}, [L?.mapData]), y(() => {
+		let e = setInterval(() => {
+			K((e) => e < W.length - 1 ? e + 1 : 0);
+		}, (F.speed || 2) * 1e3);
+		return H || clearInterval(e), () => clearInterval(e);
+	}, [
+		W,
+		H,
+		F.speed
+	]);
+	let ze = ae(W, G, F.showOnlyActiveDate, F.dateFormat || "yyyy");
+	return /* @__PURE__ */ (0, S.jsxs)(ne, {
+		className: A?.graphContainer,
+		style: k?.graphContainer,
+		id: De,
+		ref: Z,
+		"aria-label": Ae,
+		backgroundColor: me,
+		theme: O,
+		language: E,
+		minHeight: D,
+		width: m,
+		height: p,
+		relativeHeight: _,
+		padding: pe,
+		children: [
+			ee || oe ? /* @__PURE__ */ (0, S.jsx)(c, {
+				styles: {
+					title: k?.title,
+					description: k?.description
+				},
+				classNames: {
+					title: A?.title,
+					description: A?.description
+				},
+				graphTitle: ee,
+				graphDescription: oe,
+				width: m
+			}) : null,
+			F.enabled && W.length > 0 && ze ? /* @__PURE__ */ (0, S.jsxs)("div", {
+				className: "flex gap-6 items-center",
+				dir: "ltr",
+				children: [/* @__PURE__ */ (0, S.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						U(!H);
+					},
+					className: "p-0 border-0 cursor-pointer bg-transparent",
+					"aria-label": H ? "Click to pause animation" : "Click to play animation",
+					children: H ? /* @__PURE__ */ (0, S.jsx)(r, {}) : /* @__PURE__ */ (0, S.jsx)(i, {})
+				}), /* @__PURE__ */ (0, S.jsx)(Ce, {
+					min: W[0],
+					max: W[W.length - 1],
+					marks: ze,
+					step: null,
+					defaultValue: W[W.length - 1],
+					value: W[G],
+					onChangeComplete: (e) => {
+						K(W.indexOf(e));
+					},
+					onChange: (e) => {
+						K(W.indexOf(e));
+					},
+					"aria-label": "Time slider. Use arrow keys to adjust selected time period."
+				})]
+			}) : null,
+			/* @__PURE__ */ (0, S.jsx)(f, {
+				ref: X,
+				children: R && B && q ? /* @__PURE__ */ (0, S.jsx)(Te, {
+					data: t.filter((e) => F.enabled ? `${e.date}` === re(new Date(W[G]), F.dateFormat || "yyyy") : e),
+					mapData: T ? q : {
+						...q,
+						features: q.features.filter((e) => e.properties?.NAME !== "Antarctica")
+					},
+					colorDomain: t.filter((e) => e.color).length === 0 ? [] : le || d(t, "color", !0),
+					width: R,
+					height: B,
+					scale: de,
+					centerPoint: fe,
+					colors: t.filter((e) => e.color).length === 0 ? a ? [a] : [o.primaryColors["blue-600"]] : a || o[O].categoricalColors.colors,
+					colorLegendTitle: ce,
+					radius: ue,
+					overlayMapData: Y,
+					overlayMapBorderColor: L?.mapBorderColor,
+					overlayMapBorderWidth: L?.mapBorderWidth,
+					mapBorderWidth: h,
+					mapNoDataColor: g,
+					mapBorderColor: ge,
+					tooltip: _e,
+					onSeriesMouseOver: ve,
+					showLabels: he,
+					isWorldMap: v,
+					showColorScale: Se,
+					zoomScaleExtend: we,
+					zoomTranslateExtend: Ee,
+					onSeriesMouseClick: Oe,
+					highlightedDataPoints: C,
+					resetSelectionOnDoubleClick: je,
+					styles: k,
+					classNames: A,
+					zoomInteraction: M,
+					detailsOnClick: Me,
+					mapProjection: j || (v ? "naturalEarth" : "mercator"),
+					animate: Ne === !0 ? {
+						duration: .5,
+						once: !0,
+						amount: .5
+					} : Ne || {
+						duration: 0,
+						once: !0,
+						amount: 0
+					},
+					dimmedOpacity: Pe,
+					customLayers: N,
+					maxRadiusValue: l(P) ? Math.max(...t.map((e) => e.radius).filter((e) => e != null)) : P,
+					collapseColorScaleByDefault: Fe,
+					projectionRotate: Ie,
+					rewindCoordinatesInMapData: I,
+					graphDownload: w ? Z : void 0,
+					dataDownload: ke ? 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
+				}) : /* @__PURE__ */ (0, S.jsx)("div", {
+					style: { height: `${Math.max(D, p || (_ ? D ? (m || R) * _ > D ? (m || R) * _ : D : (m || R) * _ : B))}px` },
+					className: "flex items-center justify-center",
+					children: /* @__PURE__ */ (0, S.jsx)(xe, { "aria-label": "Loading graph" })
+				})
+			}),
+			te || se ? /* @__PURE__ */ (0, S.jsx)(s, {
+				styles: {
+					footnote: k?.footnote,
+					source: k?.source
+				},
+				classNames: {
+					footnote: A?.footnote,
+					source: A?.source
+				},
+				sources: te,
+				footNote: se,
+				width: m
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Ee as t };
+
+//# sourceMappingURL=DotDensityMap-F0i_P_SE.js.map

package/dist/DotDensityMap-F0i_P_SE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotDensityMap-F0i_P_SE.js","names":[],"sources":["../src/Components/Graphs/Maps/DotDensityMap/Graph.tsx","../src/Components/Graphs/Maps/DotDensityMap/index.tsx"],"sourcesContent":["import bbox from '@turf/bbox';\nimport centerOfMass from '@turf/center-of-mass';\nimport rewind from '@turf/rewind';\nimport { cn } from '@undp/design-system-react/cn';\nimport { P } from '@undp/design-system-react/Typography';\nimport {\n  geoAlbersUsa,\n  geoEqualEarth,\n  geoMercator,\n  geoNaturalEarth1,\n  geoOrthographic,\n  geoPath,\n} from 'd3-geo';\nimport { scaleSqrt } from 'd3-scale';\nimport { select } from 'd3-selection';\nimport { type D3ZoomEvent, type ZoomBehavior, zoom } from 'd3-zoom';\nimport isEqual from 'fast-deep-equal';\nimport type { FeatureCollection } from 'geojson';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport { type RefObject, useEffect, useMemo, useRef, useState } from 'react';\nimport { CsvDownloadButton } from '@/Components/Actions/CsvDownloadButton';\nimport { ImageDownloadButton } from '@/Components/Actions/ImageDownloadButton';\nimport { Colors } from '@/Components/ColorPalette';\nimport { DetailsModal } from '@/Components/Elements/DetailsModal';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport { ExpandIcon, X } from '@/Components/Icons';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  DotDensityMapDataType,\n  MapProjectionTypes,\n  StyleObject,\n  ZoomInteractionTypes,\n} from '@/Types';\n\ninterface Props {\n  data: DotDensityMapDataType[];\n\n  mapData: FeatureCollection;\n  colorDomain: string[];\n  width: number;\n  height: number;\n  scale: number;\n  centerPoint?: [number, number];\n  colors: string[];\n  colorLegendTitle?: string;\n  radius: number;\n  mapBorderWidth: number;\n  mapNoDataColor: string;\n  showLabels: boolean;\n  mapBorderColor: 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  isWorldMap: boolean;\n  showColorScale: boolean;\n  zoomScaleExtend: [number, number];\n  zoomTranslateExtend?: [[number, number], [number, number]];\n  highlightedDataPoints?: (string | number)[];\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseClick?: (_d: any) => void;\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  zoomInteraction: ZoomInteractionTypes;\n  mapProjection: MapProjectionTypes;\n  animate: AnimateDataType;\n  dimmedOpacity: number;\n  customLayers: CustomLayerDataType[];\n  maxRadiusValue: number;\n  collapseColorScaleByDefault?: boolean;\n  projectionRotate: [number, number] | [number, number, number];\n  rewindCoordinatesInMapData: boolean;\n  overlayMapData?: FeatureCollection;\n  overlayMapBorderColor?: string;\n  overlayMapBorderWidth?: number;\n  graphDownload?: RefObject<HTMLDivElement | null>;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  dataDownload: any;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    colors,\n    mapData,\n    colorLegendTitle,\n    colorDomain,\n    radius,\n    height,\n    width,\n    scale,\n    centerPoint,\n    tooltip,\n    showLabels,\n    mapBorderWidth,\n    mapBorderColor,\n    mapNoDataColor,\n    onSeriesMouseOver,\n    showColorScale,\n    zoomScaleExtend,\n    zoomTranslateExtend,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    resetSelectionOnDoubleClick,\n    detailsOnClick,\n    styles,\n    classNames,\n    mapProjection,\n    zoomInteraction,\n    animate,\n    dimmedOpacity,\n    customLayers,\n    maxRadiusValue,\n    collapseColorScaleByDefault,\n    projectionRotate,\n    rewindCoordinatesInMapData,\n    overlayMapData,\n    overlayMapBorderColor,\n    overlayMapBorderWidth,\n    graphDownload,\n    dataDownload,\n  } = props;\n  const formattedMapData = useMemo(() => {\n    if (!rewindCoordinatesInMapData) return mapData;\n\n    return rewind(mapData, { reverse: true }) as FeatureCollection;\n  }, [mapData, rewindCoordinatesInMapData]);\n  const formattedOverlayMapData = useMemo(() => {\n    if (!rewindCoordinatesInMapData || !overlayMapData) return overlayMapData;\n\n    return rewind(overlayMapData, { reverse: true }) as FeatureCollection;\n  }, [overlayMapData, rewindCoordinatesInMapData]);\n  const [selectedColor, setSelectedColor] = useState<string | undefined>(undefined);\n\n  const [showLegend, setShowLegend] = useState(\n    collapseColorScaleByDefault === undefined ? !(width < 680) : !collapseColorScaleByDefault,\n  );\n  const zoomRef = useRef<ZoomBehavior<SVGSVGElement, unknown> | null>(null);\n\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const mapSvg = useRef<SVGSVGElement>(null);\n  const isInView = useInView(mapSvg, {\n    once: animate.once,\n    amount: animate.amount,\n  });\n  const mapG = useRef<SVGGElement>(null);\n  const radiusScale =\n    data.filter((d) => d.radius === undefined || d.radius === null).length !== data.length\n      ? scaleSqrt().domain([0, maxRadiusValue]).range([0.25, radius]).nice()\n      : undefined;\n\n  useEffect(() => {\n    const mapGSelect = select(mapG.current);\n    const mapSvgSelect = select(mapSvg.current);\n    const zoomFilter = (e: D3ZoomEvent<SVGSVGElement, unknown>['sourceEvent']) => {\n      if (zoomInteraction === 'noZoom') return false;\n      if (zoomInteraction === 'button') return !e.type.includes('wheel');\n      const isWheel = e.type === 'wheel';\n      const isTouch = e.type.startsWith('touch');\n      const isDrag = e.type === 'mousedown' || e.type === 'mousemove';\n\n      if (isTouch) return true;\n      if (isWheel) {\n        if (zoomInteraction === 'scroll') return true;\n        return e.ctrlKey;\n      }\n      return isDrag && !e.button && !e.ctrlKey;\n    };\n    const zoomBehavior = zoom<SVGSVGElement, unknown>()\n      .scaleExtent(zoomScaleExtend)\n      .translateExtent(\n        zoomTranslateExtend || [\n          [-20, -20],\n          [width + 20, height + 20],\n        ],\n      )\n      .filter(zoomFilter)\n      .on('zoom', ({ transform }) => {\n        mapGSelect.attr('transform', transform);\n      });\n\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    mapSvgSelect.call(zoomBehavior as any);\n\n    zoomRef.current = zoomBehavior;\n  }, [height, width, zoomInteraction]);\n\n  const bounds = bbox(formattedMapData);\n\n  const center = centerOfMass(formattedMapData);\n  const lonDiff = (bounds[2] - bounds[0]) * 1.15;\n  const latDiff = (bounds[3] - bounds[1]) * 1.15;\n  const scaleX = (((width * 190) / 960) * 360) / lonDiff;\n  const scaleY = (((height * 190) / 678) * 180) / latDiff;\n  const scaleVar = scale * Math.min(scaleX, scaleY);\n\n  const projection =\n    mapProjection === 'mercator'\n      ? geoMercator()\n          .rotate(projectionRotate)\n          .center(centerPoint || (center.geometry.coordinates as [number, number]))\n          .translate([width / 2, height / 2])\n          .scale(scaleVar)\n      : mapProjection === 'equalEarth'\n        ? geoEqualEarth()\n            .rotate(projectionRotate)\n            .center(centerPoint || (center.geometry.coordinates as [number, number]))\n            .translate([width / 2, height / 2])\n            .scale(scaleVar)\n        : mapProjection === 'naturalEarth'\n          ? geoNaturalEarth1()\n              .rotate(projectionRotate)\n              .center(centerPoint || (center.geometry.coordinates as [number, number]))\n              .translate([width / 2, height / 2])\n              .scale(scaleVar)\n          : mapProjection === 'orthographic'\n            ? geoOrthographic()\n                .rotate(projectionRotate)\n                .center(centerPoint || (center.geometry.coordinates as [number, number]))\n                .translate([width / 2, height / 2])\n                .scale(scaleVar)\n            : geoAlbersUsa()\n                .rotate(projectionRotate)\n                .center(centerPoint || (center.geometry.coordinates as [number, number]))\n                .translate([width / 2, height / 2])\n                .scale(scaleVar);\n\n  const pathGenerator = geoPath().projection(projection);\n  const handleZoom = (direction: 'in' | 'out') => {\n    if (!mapSvg.current || !zoomRef.current) return;\n    const svg = select(mapSvg.current);\n    svg.call(zoomRef.current.scaleBy, direction === 'in' ? 1.2 : 1 / 1.2);\n  };\n\n  return (\n    <>\n      <div className='relative'>\n        <motion.svg\n          width={`${width}px`}\n          height={`${height}px`}\n          viewBox={`0 0 ${width} ${height}`}\n          ref={mapSvg}\n          direction='ltr'\n        >\n          <g ref={mapG}>\n            {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n            {formattedMapData.features.map((d, i: number) => {\n              const path = pathGenerator(d);\n              if (!path) return null;\n              return (\n                <path\n                  d={path}\n                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                  key={i}\n                  style={{\n                    stroke: mapBorderColor,\n                    strokeWidth: mapBorderWidth,\n                    fill: mapNoDataColor,\n                    vectorEffect: 'non-scaling-stroke',\n                  }}\n                />\n              );\n            })}\n            {formattedOverlayMapData?.features.map((d, i: number) => {\n              const path = pathGenerator(d);\n              if (!path) return null;\n              return (\n                // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                <g key={i}>\n                  <path\n                    d={path}\n                    style={{\n                      stroke: overlayMapBorderColor || mapBorderColor,\n                      strokeWidth: overlayMapBorderWidth || mapBorderWidth + 1,\n                      fill: 'none',\n                      pointerEvents: 'none',\n                      vectorEffect: 'non-scaling-stroke',\n                    }}\n                  />\n                </g>\n              );\n            })}\n            <AnimatePresence>\n              {data.map((d) => {\n                const color =\n                  data.filter((el) => el.color).length === 0\n                    ? colors[0]\n                    : !d.color\n                      ? Colors.gray\n                      : colors[colorDomain.indexOf(`${d.color}`)];\n                return (\n                  <motion.g\n                    className='undp-map-dots'\n                    key={d.label || `${d.lat}-${d.long}`}\n                    variants={{\n                      initial: { opacity: 0 },\n                      whileInView: {\n                        opacity: selectedColor\n                          ? selectedColor === color\n                            ? 1\n                            : dimmedOpacity\n                          : highlightedDataPoints\n                            ? highlightedDataPoints.indexOf(d.label || '') !== -1\n                              ? 1\n                              : dimmedOpacity\n                            : 1,\n                        transition: { duration: animate.duration },\n                      },\n                    }}\n                    initial='initial'\n                    animate={isInView ? 'whileInView' : 'initial'}\n                    exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                    onMouseEnter={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                      onSeriesMouseOver?.(d);\n                    }}\n                    onMouseMove={(event) => {\n                      setMouseOverData(d);\n                      setEventY(event.clientY);\n                      setEventX(event.clientX);\n                    }}\n                    onMouseLeave={() => {\n                      setMouseOverData(undefined);\n                      setEventX(undefined);\n                      setEventY(undefined);\n                      onSeriesMouseOver?.(undefined);\n                    }}\n                    onClick={() => {\n                      if (onSeriesMouseClick || detailsOnClick) {\n                        if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\n                          setMouseClickData(undefined);\n                          onSeriesMouseClick?.(undefined);\n                        } else {\n                          setMouseClickData(d);\n                          onSeriesMouseClick?.(d);\n                        }\n                      }\n                    }}\n                    transform={`translate(${\n                      (projection([d.long, d.lat]) as [number, number])[0]\n                    },${(projection([d.long, d.lat]) as [number, number])[1]})`}\n                  >\n                    <motion.circle\n                      cx={0}\n                      cy={0}\n                      variants={{\n                        initial: {\n                          r: 0,\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? colors[0]\n                              : !d.color\n                                ? Colors.gray\n                                : colors[colorDomain.indexOf(`${d.color}`)],\n                          stroke:\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                        whileInView: {\n                          r: !radiusScale ? radius : radiusScale(d.radius || 0),\n                          fill:\n                            data.filter((el) => el.color).length === 0\n                              ? colors[0]\n                              : !d.color\n                                ? Colors.gray\n                                : colors[colorDomain.indexOf(`${d.color}`)],\n                          stroke:\n                            data.filter((el) => el.color).length === 0\n                              ? colors[0]\n                              : !d.color\n                                ? Colors.gray\n                                : colors[colorDomain.indexOf(`${d.color}`)],\n                          transition: { duration: animate.duration },\n                        },\n                      }}\n                      initial='initial'\n                      animate={isInView ? 'whileInView' : 'initial'}\n                      exit={{ r: 0, transition: { duration: animate.duration } }}\n                      style={{\n                        fillOpacity: 0.8,\n                        vectorEffect: 'non-scaling-stroke',\n                      }}\n                    />\n                    {showLabels && d.label ? (\n                      <motion.text\n                        variants={{\n                          initial: {\n                            opacity: 0,\n                            x: !radiusScale ? radius : radiusScale(d.radius || 0),\n                            fill:\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                          whileInView: {\n                            opacity: 1,\n                            x: !radiusScale ? radius : radiusScale(d.radius || 0),\n                            transition: { duration: animate.duration },\n                            fill:\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                        }}\n                        initial='initial'\n                        animate={isInView ? 'whileInView' : 'initial'}\n                        exit={{ opacity: 0, transition: { duration: animate.duration } }}\n                        y={0}\n                        className={cn('graph-value text-sm', classNames?.graphObjectValues)}\n                        style={{\n                          textAnchor: 'start',\n                          vectorEffect: 'non-scaling-stroke',\n                          ...(styles?.graphObjectValues || {}),\n                        }}\n                        dx={4}\n                        dy={5}\n                      >\n                        {d.label}\n                      </motion.text>\n                    ) : null}\n                  </motion.g>\n                );\n              })}\n            </AnimatePresence>\n            {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n          </g>\n        </motion.svg>\n        {data.filter((el) => el.color).length === 0 || showColorScale === false ? null : (\n          <div className={cn('absolute left-4 bottom-4 map-color-legend', classNames?.colorLegend)}>\n            {showLegend ? (\n              <>\n                <button\n                  type='button'\n                  className='color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]'\n                  onClick={() => {\n                    setShowLegend(false);\n                  }}\n                >\n                  <X />\n                </button>\n                <div className='p-2' style={{ backgroundColor: 'rgba(240,240,240, 0.7)' }}>\n                  {colorLegendTitle && colorLegendTitle !== '' ? (\n                    <p\n                      className='p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300'\n                      style={{\n                        display: '-webkit-box',\n                        WebkitLineClamp: '1',\n                        WebkitBoxOrient: 'vertical',\n                      }}\n                    >\n                      {colorLegendTitle}\n                    </p>\n                  ) : null}\n                  <div className='flex flex-col gap-3'>\n                    {colorDomain.map((d, i) => (\n                      // biome-ignore lint/a11y/noStaticElementInteractions: interaction for color legend\n                      <div\n                        // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                        key={i}\n                        className='flex gap-2 items-center'\n                        onMouseOver={() => {\n                          setSelectedColor(colors[i % colors.length]);\n                        }}\n                        onFocus={() => {\n                          setSelectedColor(colors[i % colors.length]);\n                        }}\n                        onMouseLeave={() => {\n                          setSelectedColor(undefined);\n                        }}\n                      >\n                        <div\n                          className='w-2 h-2 rounded-full'\n                          style={{ backgroundColor: colors[i % colors.length] }}\n                        />\n                        <P size='sm' marginBottom='none' leading='none'>\n                          {d}\n                        </P>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </>\n            ) : (\n              <button\n                type='button'\n                className='p-1 border-0 rounded-[2px] text-primary-gray-700 bg-primary-gray-300 dark:bg-primary-gray-500 map-legend-button'\n                onClick={() => {\n                  setShowLegend(true);\n                }}\n              >\n                <ExpandIcon />\n              </button>\n            )}\n          </div>\n        )}\n        {zoomInteraction === 'button' && (\n          <div className='absolute left-4 top-4 flex flex-col undp-viz-zoom-buttons'>\n            <button\n              type='button'\n              onClick={() => handleZoom('in')}\n              className='leading-0 px-2 py-3.5 text-primary-gray-700 border border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100'\n            >\n              +\n            </button>\n            <button\n              type='button'\n              onClick={() => handleZoom('out')}\n              className='leading-0 px-2 py-3.5 text-primary-gray-700 border border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100'\n            >\n              –\n            </button>\n          </div>\n        )}\n        {(graphDownload || dataDownload) && (\n          <div className='absolute right-4 top-4 flex flex-col image-download-button gap-2'>\n            {graphDownload && (\n              <ImageDownloadButton nodeID={graphDownload} buttonSmall className='p-1' />\n            )}\n            {dataDownload && dataDownload.length > 0 && (\n              <CsvDownloadButton\n                csvData={dataDownload}\n                buttonSmall\n                headers={Object.keys(dataDownload[0]).map((d) => ({\n                  label: d,\n                  key: d,\n                }))}\n                className='p-1'\n              />\n            )}\n          </div>\n        )}\n      </div>\n      {detailsOnClick && mouseClickData !== undefined ? (\n        <DetailsModal\n          body={detailsOnClick}\n          data={mouseClickData}\n          setData={setMouseClickData}\n          className={classNames?.modal}\n        />\n      ) : null}\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      ) : null}\n    </>\n  );\n}\n","import { SliderUI } from '@undp/design-system-react/SliderUI';\nimport { Spinner } from '@undp/design-system-react/Spinner';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport type { FeatureCollection } from 'geojson';\nimport { useEffect, useEffectEvent, useMemo, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport { Pause, Play } from '@/Components/Icons';\nimport type {\n  AnimateDataType,\n  ClassNameObject,\n  CustomLayerDataType,\n  DotDensityMapDataType,\n  Languages,\n  MapOverlayDataType,\n  MapProjectionTypes,\n  SourcesDataType,\n  StyleObject,\n  TimelineDataType,\n  ZoomInteractionTypes,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\nimport { getSliderMarks } from '@/Utils/getSliderMarks';\nimport { uniqBy } from '@/Utils/uniqBy';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: DotDensityMapDataType[];\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 the 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  /** Color for the areas where data is no available */\n  mapNoDataColor?: 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\n  // Graph Parameters\n  /** Maximum radius of the circle */\n  radius?: number;\n  /** Map data as an object in geoJson format or a url for geoJson */\n  mapData?: FeatureCollection | string;\n  /** Detail if any other map needs to be overlayed over the main map */\n  mapOverlay?: MapOverlayDataType;\n  /** Defines if the coordinates in the map data should be rewinded or not. Try to change this is the visualization shows countries as holes instead of shapes. */\n  rewindCoordinatesInMapData?: boolean;\n  /** Scaling factor for the map. Multiplies the scale number to scale. */\n  scale?: number;\n  /** Center point of the map */\n  centerPoint?: [number, number];\n  /** Controls the rotation of the map projection, in degrees, applied before rendering. Useful for shifting the antimeridian to focus the map on different regions */\n  projectionRotate?: [number, number] | [number, number, number];\n  /** Defines the zoom mode for the map */\n  zoomInteraction?: ZoomInteractionTypes;\n  /** Stroke width of the regions in the map */\n  mapBorderWidth?: number;\n  /** Stroke color of the regions in the map */\n  mapBorderColor?: string;\n  /** Toggle if the map is a world map */\n  isWorldMap?: boolean;\n  /** Map projection type */\n  mapProjection?: MapProjectionTypes;\n  /** Extend of the allowed zoom in the map */\n  zoomScaleExtend?: [number, number];\n  /** Extend of the allowed panning in the map */\n  zoomTranslateExtend?: [[number, number], [number, number]];\n  /** Toggle visibility of labels */\n  showLabels?: boolean;\n  /** Maximum value mapped to the radius chart */\n  maxRadiusValue?: number;\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  /** Toggles if the graph animates in when loaded.  */\n  animate?: boolean | AnimateDataType;\n  /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */\n  showColorScale?: boolean;\n  /** Toggle if color scale is collapsed by default. */\n  collapseColorScaleByDefault?: boolean;\n  /** Toggles the visibility of Antarctica in the default map. Only applicable for the default map. */\n  showAntarctica?: boolean;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */\n  timeline?: TimelineDataType;\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 DotDensityMap(props: Props) {\n  const {\n    data,\n    mapData = 'https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-v2.json',\n    graphTitle,\n    colors,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote = 'The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.',\n    colorLegendTitle,\n    colorDomain,\n    radius = 5,\n    scale = 0.95,\n    centerPoint,\n    padding,\n    mapBorderWidth = 0.5,\n    mapNoDataColor = Colors.light.graphNoData,\n    backgroundColor = false,\n    showLabels = false,\n    mapBorderColor = Colors.light.grays['gray-500'],\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    isWorldMap = true,\n    showColorScale = true,\n    zoomScaleExtend = [0.8, 6],\n    zoomTranslateExtend,\n    graphID,\n    highlightedDataPoints,\n    onSeriesMouseClick,\n    graphDownload = false,\n    dataDownload = false,\n    showAntarctica = false,\n    language = 'en',\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    resetSelectionOnDoubleClick = true,\n    detailsOnClick,\n    styles,\n    classNames,\n    mapProjection = 'naturalEarth',\n    zoomInteraction = 'button',\n    animate = false,\n    dimmedOpacity = 0.3,\n    customLayers = [],\n    maxRadiusValue,\n    timeline = { enabled: false, autoplay: false, showOnlyActiveDate: true },\n    collapseColorScaleByDefault,\n    projectionRotate = [0, 0],\n    rewindCoordinatesInMapData = true,\n    mapOverlay,\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n  const [play, setPlay] = useState(timeline.autoplay);\n  const uniqDatesSorted = useMemo(() => {\n    const dates = [\n      ...new Set(\n        data\n          .filter((d) => d.date)\n          .map((d) => parse(`${d.date}`, timeline.dateFormat || 'yyyy', new Date()).getTime()),\n      ),\n    ];\n    dates.sort((a, b) => a - b);\n    return dates;\n  }, [data, timeline.dateFormat]);\n  const [index, setIndex] = useState(timeline.autoplay ? 0 : uniqDatesSorted.length - 1);\n\n  const [mapShape, setMapShape] = useState<FeatureCollection | undefined>(undefined);\n  const [overlayMapShape, setOverlayMapShape] = useState<FeatureCollection | undefined>(undefined);\n\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\n  const onUpdateShape = useEffectEvent((shape: FeatureCollection) => {\n    setMapShape(shape);\n  });\n\n  const onUpdateOverlayMapShape = useEffectEvent((shape: FeatureCollection | undefined) => {\n    setOverlayMapShape(shape);\n  });\n  useEffect(() => {\n    if (typeof mapData === 'string') {\n      const fetchData = fetchAndParseJSON(mapData);\n      fetchData.then((d) => {\n        onUpdateShape(d);\n      });\n    } else {\n      onUpdateShape(mapData);\n    }\n  }, [mapData]);\n  useEffect(() => {\n    if (!mapOverlay?.mapData) onUpdateOverlayMapShape(undefined);\n    if (typeof mapOverlay?.mapData === 'string') {\n      const fetchData = fetchAndParseJSON(mapOverlay?.mapData);\n      fetchData.then((d) => {\n        onUpdateOverlayMapShape(d as FeatureCollection);\n      });\n    } else {\n      onUpdateOverlayMapShape(mapOverlay?.mapData);\n    }\n  }, [mapOverlay?.mapData]);\n\n  useEffect(() => {\n    const interval = setInterval(\n      () => {\n        setIndex((i) => (i < uniqDatesSorted.length - 1 ? i + 1 : 0));\n      },\n      (timeline.speed || 2) * 1000,\n    );\n    if (!play) clearInterval(interval);\n    return () => clearInterval(interval);\n  }, [uniqDatesSorted, play, timeline.speed]);\n\n  const markObj = getSliderMarks(\n    uniqDatesSorted,\n    index,\n    timeline.showOnlyActiveDate,\n    timeline.dateFormat || 'yyyy',\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 ? (\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        />\n      ) : null}\n      {timeline.enabled && uniqDatesSorted.length > 0 && markObj ? (\n        <div className='flex gap-6 items-center' dir='ltr'>\n          <button\n            type='button'\n            onClick={() => {\n              setPlay(!play);\n            }}\n            className='p-0 border-0 cursor-pointer bg-transparent'\n            aria-label={play ? 'Click to pause animation' : 'Click to play animation'}\n          >\n            {play ? <Pause /> : <Play />}\n          </button>\n          <SliderUI\n            min={uniqDatesSorted[0]}\n            max={uniqDatesSorted[uniqDatesSorted.length - 1]}\n            marks={markObj}\n            step={null}\n            defaultValue={uniqDatesSorted[uniqDatesSorted.length - 1]}\n            value={uniqDatesSorted[index]}\n            onChangeComplete={(nextValue) => {\n              setIndex(uniqDatesSorted.indexOf(nextValue as number));\n            }}\n            onChange={(nextValue) => {\n              setIndex(uniqDatesSorted.indexOf(nextValue as number));\n            }}\n            aria-label='Time slider. Use arrow keys to adjust selected time period.'\n          />\n        </div>\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {svgWidth && svgHeight && mapShape ? (\n          <Graph\n            data={data.filter((d) =>\n              timeline.enabled\n                ? `${d.date}` ===\n                  format(new Date(uniqDatesSorted[index]), timeline.dateFormat || 'yyyy')\n                : d,\n            )}\n            mapData={\n              showAntarctica\n                ? mapShape\n                : {\n                    ...mapShape,\n                    features: mapShape.features.filter(\n                      (el) => el.properties?.NAME !== 'Antarctica',\n                    ),\n                  }\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            scale={scale}\n            centerPoint={centerPoint}\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            colorLegendTitle={colorLegendTitle}\n            radius={radius}\n            overlayMapData={overlayMapShape}\n            overlayMapBorderColor={mapOverlay?.mapBorderColor}\n            overlayMapBorderWidth={mapOverlay?.mapBorderWidth}\n            mapBorderWidth={mapBorderWidth}\n            mapNoDataColor={mapNoDataColor}\n            mapBorderColor={mapBorderColor}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            showLabels={showLabels}\n            isWorldMap={isWorldMap}\n            showColorScale={showColorScale}\n            zoomScaleExtend={zoomScaleExtend}\n            zoomTranslateExtend={zoomTranslateExtend}\n            onSeriesMouseClick={onSeriesMouseClick}\n            highlightedDataPoints={highlightedDataPoints}\n            resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\n            styles={styles}\n            classNames={classNames}\n            zoomInteraction={zoomInteraction}\n            detailsOnClick={detailsOnClick}\n            mapProjection={mapProjection || (isWorldMap ? 'naturalEarth' : 'mercator')}\n            animate={\n              animate === true\n                ? { duration: 0.5, once: true, amount: 0.5 }\n                : animate || { duration: 0, once: true, amount: 0 }\n            }\n            dimmedOpacity={dimmedOpacity}\n            customLayers={customLayers}\n            maxRadiusValue={\n              !checkIfNullOrUndefined(maxRadiusValue)\n                ? (maxRadiusValue as number)\n                : Math.max(\n                    ...data.map((d) => d.radius).filter((d) => d !== undefined && d !== null),\n                  )\n            }\n            collapseColorScaleByDefault={collapseColorScaleByDefault}\n            projectionRotate={projectionRotate}\n            rewindCoordinatesInMapData={rewindCoordinatesInMapData}\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        ) : (\n          <div\n            style={{\n              height: `${Math.max(\n                minHeight,\n                height ||\n                  (relativeHeight\n                    ? minHeight\n                      ? (width || svgWidth) * relativeHeight > minHeight\n                        ? (width || svgWidth) * relativeHeight\n                        : minHeight\n                      : (width || svgWidth) * relativeHeight\n                    : svgHeight),\n              )}px`,\n            }}\n            className='flex items-center justify-center'\n          >\n            <Spinner aria-label='Loading graph' />\n          </div>\n        )}\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"],"mappings":"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"}

package/dist/DotDensityMap.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index-CHPV5EwG-D4pAp7u0.cjs"),s=require("react"),jt=require("./parse-xYI9yrvL.cjs"),bt=require("./getSliderMarks-BzrpHrHS.cjs"),Ot=require("./Spinner-WHzzloYQ.cjs"),Mt=require("./index-DQA8q5sC.cjs"),k=require("./index-DLFt97gy.cjs"),Nt=require("./Typography-BqmyF1gP.cjs"),qt=require("./index-C5K--w8d.cjs"),Bt=require("./Tooltip-C9F3uYG0.cjs"),D=require("./Colors.cjs"),st=require("./index-BhI7mBJx.cjs"),It=require("./DetailsModal-Du8Fr1QD.cjs"),$t=require("./ImageDownloadButton.cjs"),Pt=require("./CsvDownloadButton.cjs"),_t=require("./pow-BnyPO-NX.cjs"),yt=require("./select-Bnfk0lJx.cjs"),nt=require("./proxy-CqH8m8IQ.cjs"),zt=require("./use-in-view-dnRv_qqF.cjs"),Wt=require("./index-FXfr51ZM.cjs"),Vt=require("./GraphFooter.cjs"),Lt=require("./GraphHeader.cjs"),Et=require("./fetchAndParseData-QTF6tjij.cjs"),At=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),Ft=require("./uniqBy-O05lp2S5.cjs"),Dt=require("./GraphContainer-Cul9b74X.cjs");function Tt(n){const{data:e,colors:a,mapData:Q,colorLegendTitle:I,colorDomain:g,radius:O,height:f,width:d,scale:m,centerPoint:$,tooltip:ee,showLabels:ye,mapBorderWidth:ve,mapBorderColor:je,mapNoDataColor:be,onSeriesMouseOver:te,showColorScale:Pe,zoomScaleExtend:_e,zoomTranslateExtend:ze,highlightedDataPoints:Ee,onSeriesMouseClick:oe,resetSelectionOnDoubleClick:De,detailsOnClick:v,styles:re,classNames:L,mapProjection:A,zoomInteraction:w,animate:j,dimmedOpacity:ae,customLayers:ne,maxRadiusValue:we,collapseColorScaleByDefault:Ce,projectionRotate:P,rewindCoordinatesInMapData:F,overlayMapData:T,overlayMapBorderColor:We,overlayMapBorderWidth:Ve,graphDownload:G,dataDownload:_}=n,H=s.useMemo(()=>F?k.index_default(Q,{reverse:!0}):Q,[Q,F]),p=s.useMemo(()=>!F||!T?T:k.index_default(T,{reverse:!0}),[T,F]),[u,Re]=s.useState(void 0),[Le,Se]=s.useState(Ce===void 0?!(d<680):!Ce),se=s.useRef(null),[z,W]=s.useState(void 0),[U,X]=s.useState(void 0),[Y,ie]=s.useState(void 0),[x,b]=s.useState(void 0),C=s.useRef(null),J=zt.useInView(C,{once:j.once,amount:j.amount}),le=s.useRef(null),R=e.filter(t=>t.radius===void 0||t.radius===null).length!==e.length?_t.sqrt().domain([0,we]).range([.25,O]).nice():void 0;s.useEffect(()=>{const t=yt.select(le.current),h=yt.select(C.current),r=y=>{if(w==="noZoom")return!1;if(w==="button")return!y.type.includes("wheel");const Ne=y.type==="wheel",qe=y.type.startsWith("touch"),pe=y.type==="mousedown"||y.type==="mousemove";return qe?!0:Ne?w==="scroll"?!0:y.ctrlKey:pe&&!y.button&&!y.ctrlKey},N=k.zoom().scaleExtent(_e).translateExtent(ze||[[-20,-20],[d+20,f+20]]).filter(r).on("zoom",({transform:y})=>{t.attr("transform",y)});h.call(N),se.current=N},[f,d,w]);const V=k.index_default$1(H),M=qt.index_default(H),ke=(V[2]-V[0])*1.15,Oe=(V[3]-V[1])*1.15,ce=d*190/960*360/ke,Me=f*190/678*180/Oe,S=m*Math.min(ce,Me),K=A==="mercator"?k.geoMercator().rotate(P).center($||M.geometry.coordinates).translate([d/2,f/2]).scale(S):A==="equalEarth"?k.geoEqualEarth().rotate(P).center($||M.geometry.coordinates).translate([d/2,f/2]).scale(S):A==="naturalEarth"?k.geoNaturalEarth1().rotate(P).center($||M.geometry.coordinates).translate([d/2,f/2]).scale(S):A==="orthographic"?k.geoOrthographic().rotate(P).center($||M.geometry.coordinates).translate([d/2,f/2]).scale(S):k.geoAlbersUsa().rotate(P).center($||M.geometry.coordinates).translate([d/2,f/2]).scale(S),ue=k.geoPath().projection(K),de=t=>{if(!C.current||!se.current)return;yt.select(C.current).call(se.current.scaleBy,t==="in"?1.2:1/1.2)};return o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsxs("div",{className:"relative",children:[o.jsxRuntimeExports.jsx(nt.motion.svg,{width:`${d}px`,height:`${f}px`,viewBox:`0 0 ${d} ${f}`,ref:C,direction:"ltr",children:o.jsxRuntimeExports.jsxs("g",{ref:le,children:[ne.filter(t=>t.position==="before").map(t=>t.layer),H.features.map((t,h)=>{const r=ue(t);return r?o.jsxRuntimeExports.jsx("path",{d:r,style:{stroke:je,strokeWidth:ve,fill:be,vectorEffect:"non-scaling-stroke"}},h):null}),p?.features.map((t,h)=>{const r=ue(t);return r?o.jsxRuntimeExports.jsx("g",{children:o.jsxRuntimeExports.jsx("path",{d:r,style:{stroke:We||je,strokeWidth:Ve||ve+1,fill:"none",pointerEvents:"none",vectorEffect:"non-scaling-stroke"}})},h):null}),o.jsxRuntimeExports.jsx(Wt.AnimatePresence,{children:e.map(t=>{const h=e.filter(r=>r.color).length===0?a[0]:t.color?a[g.indexOf(`${t.color}`)]:D.Colors.gray;return o.jsxRuntimeExports.jsxs(nt.motion.g,{className:"undp-map-dots",variants:{initial:{opacity:0},whileInView:{opacity:u?u===h?1:ae:Ee?Ee.indexOf(t.label||"")!==-1?1:ae:1,transition:{duration:j.duration}}},initial:"initial",animate:J?"whileInView":"initial",exit:{opacity:0,transition:{duration:j.duration}},onMouseEnter:r=>{X(t),b(r.clientY),ie(r.clientX),te?.(t)},onMouseMove:r=>{X(t),b(r.clientY),ie(r.clientX)},onMouseLeave:()=>{X(void 0),ie(void 0),b(void 0),te?.(void 0)},onClick:()=>{(oe||v)&&(Mt.isEqual(z,t)&&De?(W(void 0),oe?.(void 0)):(W(t),oe?.(t)))},transform:`translate(${K([t.long,t.lat])[0]},${K([t.long,t.lat])[1]})`,children:[o.jsxRuntimeExports.jsx(nt.motion.circle,{cx:0,cy:0,variants:{initial:{r:0,fill:e.filter(r=>r.color).length===0?a[0]:t.color?a[g.indexOf(`${t.color}`)]:D.Colors.gray,stroke:e.filter(r=>r.color).length===0?a[0]:t.color?a[g.indexOf(`${t.color}`)]:D.Colors.gray},whileInView:{r:R?R(t.radius||0):O,fill:e.filter(r=>r.color).length===0?a[0]:t.color?a[g.indexOf(`${t.color}`)]:D.Colors.gray,stroke:e.filter(r=>r.color).length===0?a[0]:t.color?a[g.indexOf(`${t.color}`)]:D.Colors.gray,transition:{duration:j.duration}}},initial:"initial",animate:J?"whileInView":"initial",exit:{r:0,transition:{duration:j.duration}},style:{fillOpacity:.8,vectorEffect:"non-scaling-stroke"}}),ye&&t.label?o.jsxRuntimeExports.jsx(nt.motion.text,{variants:{initial:{opacity:0,x:R?R(t.radius||0):O,fill:e.filter(r=>r.color).length===0?a[0]:t.color?a[g.indexOf(`${t.color}`)]:D.Colors.gray},whileInView:{opacity:1,x:R?R(t.radius||0):O,transition:{duration:j.duration},fill:e.filter(r=>r.color).length===0?a[0]:t.color?a[g.indexOf(`${t.color}`)]:D.Colors.gray}},initial:"initial",animate:J?"whileInView":"initial",exit:{opacity:0,transition:{duration:j.duration}},y:0,className:o.mo("graph-value text-sm",L?.graphObjectValues),style:{textAnchor:"start",vectorEffect:"non-scaling-stroke",...re?.graphObjectValues||{}},dx:4,dy:5,children:t.label}):null]},t.label||`${t.lat}-${t.long}`)})}),ne.filter(t=>t.position==="after").map(t=>t.layer)]})}),e.filter(t=>t.color).length===0||Pe===!1?null:o.jsxRuntimeExports.jsx("div",{className:o.mo("absolute left-4 bottom-4 map-color-legend",L?.colorLegend),children:Le?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx("div",{className:"color-legend-close-button bg-[rgba(240,240,240,0.7)] dark:bg-[rgba(30,30,30,0.7)] border border-[var(--gray-400)] rounded-full w-6 h-6 p-[3px] cursor-pointer z-10 absolute right-[-0.75rem] top-[-0.75rem]",onClick:()=>{Se(!1)},children:o.jsxRuntimeExports.jsx(st.X,{})}),o.jsxRuntimeExports.jsxs("div",{className:"p-2",style:{backgroundColor:"rgba(240,240,240, 0.7)"},children:[I&&I!==""?o.jsxRuntimeExports.jsx("p",{className:"p-0 leading-normal overflow-hidden text-primary-gray-700 dark:text-primary-gray-300",style:{display:"-webkit-box",WebkitLineClamp:"1",WebkitBoxOrient:"vertical"},children:I}):null,o.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-3",children:g.map((t,h)=>o.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 items-center",onMouseOver:()=>{Re(a[h%a.length])},onMouseLeave:()=>{Re(void 0)},children:[o.jsxRuntimeExports.jsx("div",{className:"w-2 h-2 rounded-full",style:{backgroundColor:a[h%a.length]}}),o.jsxRuntimeExports.jsx(Nt._,{size:"sm",marginBottom:"none",leading:"none",children:t})]},h))})]})]}):o.jsxRuntimeExports.jsx("button",{type:"button",className:"p-1 border-0 rounded-[2px] text-primary-gray-700 bg-primary-gray-300 dark:bg-primary-gray-500 map-legend-button",onClick:()=>{Se(!0)},children:o.jsxRuntimeExports.jsx(st.ExpandIcon,{})})}),w==="button"&&o.jsxRuntimeExports.jsxs("div",{className:"absolute left-4 top-4 flex flex-col undp-viz-zoom-buttons",children:[o.jsxRuntimeExports.jsx("button",{onClick:()=>de("in"),className:"leading-0 px-2 py-3.5 text-primary-gray-700 border border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100",children:"+"}),o.jsxRuntimeExports.jsx("button",{onClick:()=>de("out"),className:"leading-0 px-2 py-3.5 text-primary-gray-700 border border-t-0 border-primary-gray-400 bg-primary-gray-200 dark:border-primary-gray-550 dark:bg-primary-gray-600 dark:text-primary-gray-100",children:"–"})]}),(G||_)&&o.jsxRuntimeExports.jsxs("div",{className:"absolute right-4 top-4 flex flex-col image-download-button gap-2",children:[G&&o.jsxRuntimeExports.jsx($t.ImageDownloadButton,{nodeID:G,buttonSmall:!0,className:"p-1"}),_&&_.length>0&&o.jsxRuntimeExports.jsx(Pt.CsvDownloadButton,{csvData:_,buttonSmall:!0,headers:Object.keys(_[0]).map(t=>({label:t,key:t})),className:"p-1"})]})]}),v&&z!==void 0?o.jsxRuntimeExports.jsx(It.DetailsModal,{body:v,data:z,setData:W,className:L?.modal}):null,U&&ee&&Y&&x?o.jsxRuntimeExports.jsx(Bt.Tooltip,{data:U,body:ee,xPos:Y,yPos:x,backgroundStyle:re?.tooltip,className:L?.tooltip}):null]})}function Gt(n){const e=o.compilerRuntimeExports.c(127),{data:a,mapData:Q,graphTitle:I,colors:g,sources:O,graphDescription:f,height:d,width:m,footNote:$,colorLegendTitle:ee,colorDomain:ye,radius:ve,scale:je,centerPoint:be,padding:te,mapBorderWidth:Pe,mapNoDataColor:_e,backgroundColor:ze,showLabels:Ee,mapBorderColor:oe,tooltip:De,relativeHeight:v,onSeriesMouseOver:re,isWorldMap:L,showColorScale:A,zoomScaleExtend:w,zoomTranslateExtend:j,graphID:ae,highlightedDataPoints:ne,onSeriesMouseClick:we,graphDownload:Ce,dataDownload:P,showAntarctica:F,language:T,minHeight:We,theme:Ve,ariaLabel:G,resetSelectionOnDoubleClick:_,detailsOnClick:H,styles:p,classNames:u,mapProjection:Re,zoomInteraction:Le,animate:Se,dimmedOpacity:se,customLayers:z,maxRadiusValue:W,timeline:U,collapseColorScaleByDefault:X,projectionRotate:Y,rewindCoordinatesInMapData:ie,mapOverlay:x}=n,b=Q===void 0?"https://raw.githubusercontent.com/UNDP-Data/dv-country-geojson/refs/heads/main/worldMap-v2.json":Q,C=$===void 0?"The designations employed and the presentation of material on this map do not imply the expression of any opinion whatsoever on the part of the Secretariat of the United Nations or UNDP concerning the legal status of any country, territory, city or area or its authorities, or concerning the delimitation of its frontiers or boundaries.":$,J=ve===void 0?5:ve,le=je===void 0?.95:je,R=Pe===void 0?.5:Pe,V=_e===void 0?D.Colors.light.graphNoData:_e,M=ze===void 0?!1:ze,ke=Ee===void 0?!1:Ee,Oe=oe===void 0?D.Colors.light.grays["gray-500"]:oe,ce=L===void 0?!0:L,Me=A===void 0?!0:A;let S;e[0]!==w?(S=w===void 0?[.8,6]:w,e[0]=w,e[1]=S):S=e[1];const K=S,ue=Ce===void 0?!1:Ce,de=P===void 0?!1:P,t=F===void 0?!1:F,h=T===void 0?"en":T,r=We===void 0?0:We,N=Ve===void 0?"light":Ve,y=_===void 0?!0:_,Ne=Re===void 0?"naturalEarth":Re,qe=Le===void 0?"button":Le,pe=Se===void 0?!1:Se,it=se===void 0?.3:se;let Ae;e[2]!==z?(Ae=z===void 0?[]:z,e[2]=z,e[3]=Ae):Ae=e[3];const lt=Ae;let Fe;e[4]!==U?(Fe=U===void 0?{enabled:!1,autoplay:!1,showOnlyActiveDate:!0}:U,e[4]=U,e[5]=Fe):Fe=e[5];const i=Fe;let Te;e[6]!==Y?(Te=Y===void 0?[0,0]:Y,e[6]=Y,e[7]=Te):Te=e[7];const ct=Te,ut=ie===void 0?!0:ie,[Z,wt]=s.useState(0),[Be,Ct]=s.useState(0),[q,Rt]=s.useState(i.autoplay);let Ie;if(e[8]!==a||e[9]!==i.dateFormat){let l;e[11]!==i.dateFormat?(l=E=>jt.parse(`${E.date}`,i.dateFormat||"yyyy",new Date).getTime(),e[11]=i.dateFormat,e[12]=l):l=e[12],Ie=[...new Set(a.filter(ro).map(l))],Ie.sort(oo),e[8]=a,e[9]=i.dateFormat,e[10]=Ie}else Ie=e[10];const c=Ie,[B,dt]=s.useState(i.autoplay?0:c.length-1),[me,St]=s.useState(void 0),[pt,kt]=s.useState(void 0),mt=s.useRef(null),vt=s.useRef(null);let Ge,He;e[13]===Symbol.for("react.memo_cache_sentinel")?(Ge=()=>{const l=new ResizeObserver(E=>{wt(E[0].target.clientWidth||620),Ct(E[0].target.clientHeight||480)});return mt.current&&l.observe(mt.current),()=>l.disconnect()},He=[],e[13]=Ge,e[14]=He):(Ge=e[13],He=e[14]),s.useEffect(Ge,He);let Ue;e[15]===Symbol.for("react.memo_cache_sentinel")?(Ue=l=>{St(l)},e[15]=Ue):Ue=e[15];const Xe=s.useEffectEvent(Ue);let Ye;e[16]===Symbol.for("react.memo_cache_sentinel")?(Ye=l=>{kt(l)},e[16]=Ye):Ye=e[16];const $e=s.useEffectEvent(Ye);let Je;e[17]!==b||e[18]!==Xe?(Je=()=>{typeof b=="string"?Et.fetchAndParseJSON(b).then(E=>{Xe(E)}):Xe(b)},e[17]=b,e[18]=Xe,e[19]=Je):Je=e[19];let Ke;e[20]!==b?(Ke=[b],e[20]=b,e[21]=Ke):Ke=e[21],s.useEffect(Je,Ke);let Ze;e[22]!==x?.mapData||e[23]!==$e?(Ze=()=>{x?.mapData||$e(void 0),typeof x?.mapData=="string"?Et.fetchAndParseJSON(x?.mapData).then(E=>{$e(E)}):$e(x?.mapData)},e[22]=x?.mapData,e[23]=$e,e[24]=Ze):Ze=e[24];const xt=x?.mapData;let Qe;e[25]!==xt?(Qe=[xt],e[25]=xt,e[26]=Qe):Qe=e[26],s.useEffect(Ze,Qe);let et,tt;e[27]!==q||e[28]!==i.speed||e[29]!==c?(et=()=>{const l=setInterval(()=>{dt(E=>E<c.length-1?E+1:0)},(i.speed||2)*1e3);return q||clearInterval(l),()=>clearInterval(l)},tt=[c,q,i.speed],e[27]=q,e[28]=i.speed,e[29]=c,e[30]=et,e[31]=tt):(et=e[30],tt=e[31]),s.useEffect(et,tt);const ht=i.dateFormat||"yyyy";let ot;e[32]!==B||e[33]!==ht||e[34]!==i.showOnlyActiveDate||e[35]!==c?(ot=bt.getSliderMarks(c,B,i.showOnlyActiveDate,ht),e[32]=B,e[33]=ht,e[34]=i.showOnlyActiveDate,e[35]=c,e[36]=ot):ot=e[36];const rt=ot,ft=u?.graphContainer,gt=p?.graphContainer;let xe;e[37]!==u?.description||e[38]!==u?.title||e[39]!==f||e[40]!==I||e[41]!==p?.description||e[42]!==p?.title||e[43]!==m?(xe=I||f?o.jsxRuntimeExports.jsx(Lt.GraphHeader,{styles:{title:p?.title,description:p?.description},classNames:{title:u?.title,description:u?.description},graphTitle:I,graphDescription:f,width:m}):null,e[37]=u?.description,e[38]=u?.title,e[39]=f,e[40]=I,e[41]=p?.description,e[42]=p?.title,e[43]=m,e[44]=xe):xe=e[44];let he;e[45]!==B||e[46]!==rt||e[47]!==q||e[48]!==i.enabled||e[49]!==c?(he=i.enabled&&c.length>0&&rt?o.jsxRuntimeExports.jsxs("div",{className:"flex gap-6 items-center",dir:"ltr",children:[o.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>{Rt(!q)},className:"p-0 border-0 cursor-pointer bg-transparent","aria-label":q?"Click to pause animation":"Click to play animation",children:q?o.jsxRuntimeExports.jsx(st.Pause,{}):o.jsxRuntimeExports.jsx(st.Play,{})}),o.jsxRuntimeExports.jsx(bt.Nr,{min:c[0],max:c[c.length-1],marks:rt,step:null,defaultValue:c[c.length-1],value:c[B],onChangeComplete:l=>{dt(c.indexOf(l))},onChange:l=>{dt(c.indexOf(l))},"aria-label":"Time slider. Use arrow keys to adjust selected time period."})]}):null,e[45]=B,e[46]=rt,e[47]=q,e[48]=i.enabled,e[49]=c,e[50]=he):he=e[50];let fe;e[51]!==pe||e[52]!==be||e[53]!==u||e[54]!==X||e[55]!==ye||e[56]!==ee||e[57]!==g||e[58]!==lt||e[59]!==a||e[60]!==de||e[61]!==H||e[62]!==it||e[63]!==ue||e[64]!==d||e[65]!==ne||e[66]!==B||e[67]!==ce||e[68]!==Oe||e[69]!==R||e[70]!==V||e[71]!==x?.mapBorderColor||e[72]!==x?.mapBorderWidth||e[73]!==Ne||e[74]!==me||e[75]!==W||e[76]!==r||e[77]!==we||e[78]!==re||e[79]!==pt||e[80]!==ct||e[81]!==J||e[82]!==v||e[83]!==y||e[84]!==ut||e[85]!==le||e[86]!==t||e[87]!==Me||e[88]!==ke||e[89]!==p||e[90]!==Be||e[91]!==Z||e[92]!==N||e[93]!==i.dateFormat||e[94]!==i.enabled||e[95]!==De||e[96]!==c||e[97]!==m||e[98]!==qe||e[99]!==K||e[100]!==j?(fe=o.jsxRuntimeExports.jsx(Dt.GraphArea,{ref:mt,children:Z&&Be&&me?o.jsxRuntimeExports.jsx(Tt,{data:a.filter(l=>i.enabled?`${l.date}`===jt.format(new Date(c[B]),i.dateFormat||"yyyy"):l),mapData:t?me:{...me,features:me.features.filter(to)},colorDomain:a.filter(eo).length===0?[]:ye||Ft.uniqBy(a,"color",!0),width:Z,height:Be,scale:le,centerPoint:be,colors:a.filter(Qt).length===0?g?[g]:[D.Colors.primaryColors["blue-600"]]:g||D.Colors[N].categoricalColors.colors,colorLegendTitle:ee,radius:J,overlayMapData:pt,overlayMapBorderColor:x?.mapBorderColor,overlayMapBorderWidth:x?.mapBorderWidth,mapBorderWidth:R,mapNoDataColor:V,mapBorderColor:Oe,tooltip:De,onSeriesMouseOver:re,showLabels:ke,isWorldMap:ce,showColorScale:Me,zoomScaleExtend:K,zoomTranslateExtend:j,onSeriesMouseClick:we,highlightedDataPoints:ne,resetSelectionOnDoubleClick:y,styles:p,classNames:u,zoomInteraction:qe,detailsOnClick:H,mapProjection:Ne||(ce?"naturalEarth":"mercator"),animate:pe===!0?{duration:.5,once:!0,amount:.5}:pe||{duration:0,once:!0,amount:0},dimmedOpacity:it,customLayers:lt,maxRadiusValue:At.checkIfNullOrUndefined(W)?Math.max(...a.map(Zt).filter(Kt)):W,collapseColorScaleByDefault:X,projectionRotate:ct,rewindCoordinatesInMapData:ut,graphDownload:ue?vt:void 0,dataDownload:de?a.map(Jt).filter(Yt).length>0?a.map(Xt).filter(Ut):a.filter(Ht):null}):o.jsxRuntimeExports.jsx("div",{style:{height:`${Math.max(r,d||(v?r?(m||Z)*v>r?(m||Z)*v:r:(m||Z)*v:Be))}px`},className:"flex items-center justify-center",children:o.jsxRuntimeExports.jsx(Ot.w,{"aria-label":"Loading graph"})})}),e[51]=pe,e[52]=be,e[53]=u,e[54]=X,e[55]=ye,e[56]=ee,e[57]=g,e[58]=lt,e[59]=a,e[60]=de,e[61]=H,e[62]=it,e[63]=ue,e[64]=d,e[65]=ne,e[66]=B,e[67]=ce,e[68]=Oe,e[69]=R,e[70]=V,e[71]=x?.mapBorderColor,e[72]=x?.mapBorderWidth,e[73]=Ne,e[74]=me,e[75]=W,e[76]=r,e[77]=we,e[78]=re,e[79]=pt,e[80]=ct,e[81]=J,e[82]=v,e[83]=y,e[84]=ut,e[85]=le,e[86]=t,e[87]=Me,e[88]=ke,e[89]=p,e[90]=Be,e[91]=Z,e[92]=N,e[93]=i.dateFormat,e[94]=i.enabled,e[95]=De,e[96]=c,e[97]=m,e[98]=qe,e[99]=K,e[100]=j,e[101]=fe):fe=e[101];let ge;e[102]!==u?.footnote||e[103]!==u?.source||e[104]!==C||e[105]!==O||e[106]!==p?.footnote||e[107]!==p?.source||e[108]!==m?(ge=O||C?o.jsxRuntimeExports.jsx(Vt.GraphFooter,{styles:{footnote:p?.footnote,source:p?.source},classNames:{footnote:u?.footnote,source:u?.source},sources:O,footNote:C,width:m}):null,e[102]=u?.footnote,e[103]=u?.source,e[104]=C,e[105]=O,e[106]=p?.footnote,e[107]=p?.source,e[108]=m,e[109]=ge):ge=e[109];let at;return e[110]!==G||e[111]!==M||e[112]!==ae||e[113]!==d||e[114]!==h||e[115]!==r||e[116]!==te||e[117]!==v||e[118]!==ft||e[119]!==gt||e[120]!==xe||e[121]!==he||e[122]!==fe||e[123]!==ge||e[124]!==N||e[125]!==m?(at=o.jsxRuntimeExports.jsxs(Dt.GraphContainer,{className:ft,style:gt,id:ae,ref:vt,"aria-label":G,backgroundColor:M,theme:N,language:h,minHeight:r,width:m,height:d,relativeHeight:v,padding:te,children:[xe,he,fe,ge]}),e[110]=G,e[111]=M,e[112]=ae,e[113]=d,e[114]=h,e[115]=r,e[116]=te,e[117]=v,e[118]=ft,e[119]=gt,e[120]=xe,e[121]=he,e[122]=fe,e[123]=ge,e[124]=N,e[125]=m,e[126]=at):at=e[126],at}function Ht(n){return n!==void 0}function Ut(n){return n!==void 0}function Xt(n){return n.data}function Yt(n){return n!==void 0}function Jt(n){return n.data}function Kt(n){return n!=null}function Zt(n){return n.radius}function Qt(n){return n.color}function eo(n){return n.color}function to(n){return n.properties?.NAME!=="Antarctica"}function oo(n,e){return n-e}function ro(n){return n.date}exports.DotDensityMap=Gt;
-//# sourceMappingURL=DotDensityMap.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./DotDensityMap-Bx_8p5wJ.cjs`);exports.DotDensityMap=e.t;