@undp/data-viz 2.6.0 → 2.6.1

package/dist/SingleGraphDashboardThreeDGraphs-BsCgN8DA.js

@@ -0,0 +1,461 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { t as n } from "./lodash.flattendeep-a__mQ60W.js";
+import { t as r } from "./lodash.intersection-C9QFuAQj.js";
+import { GraphHeader as i } from "./GraphHeader.js";
+import { n as a, t as o } from "./getValues-Bt73vs_w.js";
+import { a as s, i as c, o as l, r as u, t as d } from "./fetchAndParseData-C50SqMPu.js";
+import { t as f } from "./getUniqValue-DZTOHgt8.js";
+import { t as p } from "./filterData-Dp_HZ71j.js";
+import { n as m, t as ee } from "./transformDataForGraph-DKYRsjv8.js";
+import { t as te } from "./getGraphList-BIaPQiZ0.js";
+import { t as h } from "./transformDataForSelect-DRC8qPt4.js";
+import { n as ne } from "./GraphContainer-DgEB1AVN.js";
+import { t as g } from "./fast-deep-equal--80N92KJ.js";
+import { t as _ } from "./ThreeDGlobe-DXL9WkNi.js";
+import { useEffect as v, useEffectEvent as y, useRef as b, useState as x } from "react";
+import { CheckboxGroup as S, CheckboxGroupItem as C } from "@undp/design-system-react/CheckboxGroup";
+import { DropdownSelect as w, createFilter as T } from "@undp/design-system-react/DropdownSelect";
+import { Label as E } from "@undp/design-system-react/Label";
+import { RadioGroup as D, RadioGroupItem as O } from "@undp/design-system-react/RadioGroup";
+import { Spinner as re } from "@undp/design-system-react/Spinner";
+import { P as k } from "@undp/design-system-react/Typography";
+//#region src/Components/Dashboard/PerformanceIntensive/ThreeDGraphEl.tsx
+var A = /* @__PURE__ */ e(n(), 1), ie = /* @__PURE__ */ e(r(), 1), ae = /* @__PURE__ */ e(g(), 1), j = t();
+function oe(e) {
+	let { settings: t, graph: n, graphData: r, debugMode: i, graphDataConfiguration: a, readableHeader: s, updateFilters: c } = e;
+	if (i && (console.log(`Graph: ${n}`), console.log("Transformed data:", r), console.log("Settings:", t)), typeof r == "string") return /* @__PURE__ */ (0, j.jsx)("div", {
+		className: `flex my-0 mx-auto grow flex-col justify-center ${t?.width ? "w-fit" : "w-full"}`,
+		style: { height: "inherit" },
+		children: /* @__PURE__ */ (0, j.jsx)(k, {
+			size: "sm",
+			marginBottom: "none",
+			className: "p-2 text-center text-accent-dark-red dark:text-accent-red",
+			children: r
+		})
+	});
+	let l = { threeDGlobe: _ }, u = (e) => {
+		switch (e) {
+			case "threeDGlobe": return {
+				numberDisplayOptions: t?.numberDisplayOptions,
+				globeOffset: t?.globeOffset,
+				collapseColorScaleByDefault: t?.collapseColorScaleByDefault,
+				polygonAltitude: t?.polygonAltitude,
+				highlightedIds: t?.highlightedIds,
+				scale: t?.scale,
+				theme: t?.theme,
+				resetSelectionOnDoubleClick: t?.resetSelectionOnDoubleClick,
+				graphTitle: t?.graphTitle,
+				mapData: t?.mapData,
+				graphDescription: t?.graphDescription,
+				footNote: t?.footNote,
+				width: t?.width,
+				height: t?.height,
+				sources: t?.sources,
+				colorDomain: t?.colorDomain,
+				colors: t?.colors,
+				colorLegendTitle: Object.keys(t || {}).indexOf("colorLegendTitle") === -1 ? o("x", a || [], s || []) : t?.colorLegendTitle,
+				scaleType: t?.scaleType,
+				data: r,
+				centerPoint: t?.centerPoint,
+				backgroundColor: t?.backgroundColor,
+				mapNoDataColor: t?.mapNoDataColor,
+				mapBorderColor: t?.mapBorderColor,
+				relativeHeight: t?.relativeHeight,
+				padding: t?.padding,
+				tooltip: t?.tooltip,
+				showColorScale: t?.showColorScale,
+				graphID: t?.graphID,
+				dataDownload: t?.dataDownload,
+				mapProperty: t?.mapProperty,
+				language: t?.language,
+				minHeight: t?.minHeight,
+				ariaLabel: t?.ariaLabel,
+				onSeriesMouseClick: (e) => {
+					c?.(e.id);
+				},
+				detailsOnClick: t?.detailsOnClick,
+				styles: t?.styles,
+				classNames: t?.classNames,
+				autoRotate: t?.autoRotate,
+				globeMaterial: t?.globeMaterial,
+				atmosphereColor: t?.atmosphereColor,
+				enableZoom: t?.enableZoom,
+				atmosphereAltitude: t?.atmosphereAltitude,
+				globeCurvatureResolution: t?.globeCurvatureResolution,
+				fogSettings: t?.fogSetting,
+				lights: t?.lights,
+				highlightedAltitude: t?.highlightedAltitude,
+				selectedId: t?.selectedId
+			};
+			default: return {};
+		}
+	}, d = l[n], f = u(n);
+	return /* @__PURE__ */ (0, j.jsx)("div", {
+		className: `grow my-0 mx-auto flex flex-col w-full justify-center ${t?.theme || "light"}`,
+		style: { minHeight: "inherit" },
+		children: d ? /* @__PURE__ */ (0, j.jsx)(d, { ...f }) : /* @__PURE__ */ (0, j.jsx)(k, {
+			size: "sm",
+			marginBottom: "none",
+			className: "p-2 text-center text-accent-dark-red dark:text-accent-red",
+			children: `Invalid chart type: ${n}`
+		})
+	});
+}
+//#endregion
+//#region src/Components/Dashboard/PerformanceIntensive/SingleGraphDashboardThreeDGraphs.tsx
+var M = (e, t) => {
+	let n = t?.map((t) => {
+		let n = e?.findIndex((e) => e.chartConfigId === t.chartConfigId);
+		if (n === -1) return {};
+		let r = e[n]?.allowedColumnIds?.findIndex((e) => e.value === t.columnId);
+		return r === -1 ? {} : e[n].allowedColumnIds[r].graphSettings || {};
+	}) || [];
+	return Object.assign({}, ...n);
+};
+function N(e) {
+	let { graphSettings: t, dataSettings: n, filters: r, graphType: o, dataTransform: g, graphDataConfiguration: _, dataFilters: k, debugMode: N, dataSelectionOptions: P, advancedDataSelectionOptions: F, readableHeader: se, noOfFiltersPerRow: I = 4, updateFilters: ce, uiMode: L = "normal", highlightDataPointSettings: R } = e, [z, B] = x(void 0), [V, le] = x(void 0), [H, U] = x(_), [W, G] = x({}), [K, ue] = x(void 0), [de, fe] = x([]), q = b(null), J = b(_), [Y, X] = x([]), Z = {
+		ignoreCase: !0,
+		ignoreAccents: !0,
+		trim: !0
+	}, Q = y(() => {
+		X((r || []).map((e) => ({
+			filter: e.column,
+			label: e.label || `Filter by ${e.column}`,
+			singleSelect: e.singleSelect,
+			clearable: e.clearable,
+			defaultValue: h(e.defaultValue),
+			value: h(e.defaultValue),
+			availableValues: f(V, e.column).filter((t) => !e.excludeValues?.includes(`${t}`)).map((e) => ({
+				value: e,
+				label: e
+			})),
+			allowSelectAll: e.allowSelectAll,
+			width: e.width
+		})));
+	});
+	v(() => {
+		(async () => {
+			try {
+				le(n.dataURL ? typeof n.dataURL == "string" ? n.fileType === "json" ? await u(n.dataURL, n.columnsToArray, n.dataTransformation, N) : n.fileType === "api" ? await s(n.dataURL, n.apiHeaders, n.columnsToArray, n.dataTransformation, N) : await d(n.dataURL, n.dataTransformation, n.columnsToArray, N, n.delimiter, !0) : await c(n.dataURL, n.idColumnTitle) : await l(n.data, n.columnsToArray));
+			} catch (e) {
+				console.error("Data fetching error:", e);
+			}
+		})(), Q();
+	}, [n, N]), v(() => {
+		Q();
+	}, [r, V]);
+	let pe = y(() => {
+		!V || Y.length === 0 ? B(V) : B(V.filter((e) => Y.every((t) => t.value && (0, A.default)([t.value]).length > 0 ? (0, ie.default)((0, A.default)([e[t.filter]]), (0, A.default)([t.value]).map((e) => e.value)).length > 0 : !0)));
+	});
+	v(() => {
+		pe();
+	}, [Y, V]), v(() => {
+		P && G(M(P, _));
+	}, [P, _]);
+	let me = y(() => {
+		R?.column && z && fe(f(z, R.column).filter((e) => !R?.excludeValues?.includes(`${e}`)).map((e) => ({
+			value: e,
+			label: e
+		})));
+	});
+	v(() => {
+		me();
+	}, [R]), v(() => {
+		(0, ae.default)(J.current, _) || (U(_), J.current = _);
+	}, [_]);
+	let $ = (e, t) => {
+		X((n) => n.map((n) => n.filter === e ? {
+			...n,
+			value: t
+		} : n));
+	}, he = V ? ee(g ? m(p(V, k || []), g.keyColumn, g.aggregationColumnsSetting) : p(V, k || []), o, H) : void 0;
+	return /* @__PURE__ */ (0, j.jsx)(ne, {
+		className: t?.classNames?.graphContainer,
+		style: t?.styles?.graphContainer,
+		id: t?.graphID,
+		ref: q,
+		"aria-label": t?.ariaLabel,
+		backgroundColor: t?.backgroundColor ?? !1,
+		theme: t?.theme || "light",
+		language: t?.language || "en",
+		width: t?.width,
+		height: t?.height,
+		padding: t?.padding,
+		minHeight: t?.minHeight,
+		relativeHeight: t?.relativeHeight,
+		children: V || te.filter((e) => e.geoHubMapPresentation).map((e) => e.graphID).indexOf(o) !== -1 ? /* @__PURE__ */ (0, j.jsxs)(j.Fragment, { children: [
+			W?.graphTitle || W?.graphDescription || t?.graphTitle || t?.graphDescription || t?.graphDownload || t?.dataDownload ? /* @__PURE__ */ (0, j.jsx)(i, {
+				styles: {
+					title: W?.styles?.title || t?.styles?.title,
+					description: W?.styles?.description || t?.styles?.description
+				},
+				classNames: {
+					title: W?.classNames?.title || t?.classNames?.title,
+					description: W?.classNames?.description || t?.classNames?.description
+				},
+				graphTitle: W?.graphTitle || t?.graphTitle,
+				graphDescription: W?.graphDescription || t?.graphDescription,
+				width: W?.width || t?.width,
+				graphDownload: t?.graphDownload ? q : void 0,
+				dataDownload: t?.dataDownload && V && V.length > 0 ? V : null
+			}) : null,
+			Y.length !== 0 || (P || []).length !== 0 || (F || []).length !== 0 || R ? /* @__PURE__ */ (0, j.jsxs)("div", {
+				className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full",
+				children: [
+					F?.map((e, t) => /* @__PURE__ */ (0, j.jsxs)("div", {
+						style: {
+							width: e.width || `calc(${100 / I}% - ${(I - 1) / I}rem)`,
+							flexGrow: +!e.width,
+							flexShrink: e.ui !== "radio" || e.width ? 0 : 1,
+							minWidth: "240px"
+						},
+						className: "pb-4",
+						children: [/* @__PURE__ */ (0, j.jsx)(E, {
+							className: "mb-2",
+							children: e.label || "Graph by"
+						}), e.ui === "radio" ? /* @__PURE__ */ (0, j.jsx)(D, {
+							defaultValue: e.defaultValue?.label || e.options[0].label,
+							variant: L,
+							onValueChange: (t) => {
+								let n = e.options[e.options.findIndex((e) => e.label === t)];
+								G(n.graphSettings || {}), U(n.dataConfiguration);
+							},
+							children: e.options.map((e) => /* @__PURE__ */ (0, j.jsx)(O, {
+								label: e.label,
+								value: e.label
+							}, e.label))
+						}) : /* @__PURE__ */ (0, j.jsx)(w, {
+							options: e.options.map((e) => ({
+								...e,
+								value: e.label
+							})),
+							size: "sm",
+							isClearable: !1,
+							isSearchable: !0,
+							variant: L,
+							controlShouldRenderValue: !0,
+							defaultValue: e.defaultValue ? {
+								...e.defaultValue,
+								value: e.defaultValue?.label
+							} : {
+								...e.options[0],
+								value: e.options[0].label
+							},
+							onChange: (e) => {
+								G(e?.graphSettings || {}), U(e?.dataConfiguration);
+							}
+						})]
+					}, t)),
+					P?.map((e, t) => /* @__PURE__ */ (0, j.jsxs)("div", {
+						style: {
+							width: e.width || `calc(${100 / I}% - ${(I - 1) / I}rem)`,
+							flexGrow: +!e.width,
+							flexShrink: e.ui !== "radio" || e.width ? 0 : 1,
+							minWidth: "240px"
+						},
+						className: "pb-4",
+						children: [/* @__PURE__ */ (0, j.jsx)(E, {
+							className: "mb-2",
+							children: e.label || `Visualize ${e.chartConfigId} by`
+						}), a(e.chartConfigId, H || []) ? e.ui === "radio" ? /* @__PURE__ */ (0, j.jsx)(S, {
+							variant: L,
+							defaultValue: _ ? _[_.findIndex((t) => t.chartConfigId === e.chartConfigId)].columnId.map((t) => e.allowedColumnIds[e.allowedColumnIds.findIndex((e) => e.value === t)]).map((e) => e.value) : [],
+							onValueChange: (t) => {
+								let n = {
+									columnId: t || [],
+									chartConfigId: e.chartConfigId
+								}, r = H?.map((e) => e.chartConfigId === n.chartConfigId ? n : e);
+								U(r);
+							},
+							children: e.allowedColumnIds.map((e) => /* @__PURE__ */ (0, j.jsx)(C, {
+								label: e.label,
+								value: e.value
+							}, e.value))
+						}) : /* @__PURE__ */ (0, j.jsx)(w, {
+							options: e.allowedColumnIds,
+							size: "sm",
+							isMulti: !0,
+							isSearchable: !0,
+							variant: L,
+							controlShouldRenderValue: !0,
+							defaultValue: _ ? _[_.findIndex((t) => t.chartConfigId === e.chartConfigId)].columnId.map((t) => e.allowedColumnIds[e.allowedColumnIds.findIndex((e) => e.value === t)]) : void 0,
+							filterOption: T(Z),
+							onChange: (t) => {
+								let n = {
+									columnId: (t || []).map((e) => e.value),
+									chartConfigId: e.chartConfigId
+								}, r = H?.map((e) => e.chartConfigId === n.chartConfigId ? n : e);
+								U(r);
+							}
+						}) : e.ui === "radio" ? /* @__PURE__ */ (0, j.jsx)(D, {
+							variant: L,
+							defaultValue: _ ? e.allowedColumnIds[e.allowedColumnIds.findIndex((t) => t.value === _[_.findIndex((t) => t.chartConfigId === e.chartConfigId)].columnId)].label : "",
+							onValueChange: (t) => {
+								let n = {
+									columnId: e.allowedColumnIds[e.allowedColumnIds.findIndex((e) => e.label === t)].value,
+									chartConfigId: e.chartConfigId
+								}, r = H?.map((e) => e.chartConfigId === n.chartConfigId ? n : e);
+								G(M(P, r)), U(r);
+							},
+							children: e.allowedColumnIds.map((e) => /* @__PURE__ */ (0, j.jsx)(O, {
+								label: e.label,
+								value: e.value
+							}, e.value))
+						}) : /* @__PURE__ */ (0, j.jsx)(w, {
+							options: e.allowedColumnIds,
+							size: "sm",
+							isClearable: !1,
+							isSearchable: !0,
+							variant: L,
+							controlShouldRenderValue: !0,
+							defaultValue: _ ? e.allowedColumnIds[e.allowedColumnIds.findIndex((t) => t.value === _[_.findIndex((t) => t.chartConfigId === e.chartConfigId)].columnId)] : void 0,
+							onChange: (t) => {
+								let n = {
+									columnId: t?.value,
+									chartConfigId: e.chartConfigId
+								}, r = H?.map((e) => e.chartConfigId === n.chartConfigId ? n : e);
+								G(M(P, r)), U(r);
+							}
+						})]
+					}, t)),
+					Y?.map((e, t) => /* @__PURE__ */ (0, j.jsxs)("div", {
+						style: {
+							width: e.width || `calc(${100 / I}% - ${(I - 1) / I}rem)`,
+							flexGrow: +!e.width,
+							flexShrink: e.ui !== "radio" || e.width ? 0 : 1,
+							minWidth: "240px"
+						},
+						className: "pb-4",
+						children: [/* @__PURE__ */ (0, j.jsx)(E, {
+							className: "mb-2",
+							children: e.label
+						}), e.singleSelect ? e.ui === "radio" ? /* @__PURE__ */ (0, j.jsx)(D, {
+							variant: L,
+							defaultValue: e.defaultValue.value,
+							onValueChange: (t) => {
+								$(e.filter, e.availableValues.filter((e) => e.value === t));
+							},
+							children: e.availableValues.map((e) => /* @__PURE__ */ (0, j.jsx)(O, {
+								label: `${e.label}`,
+								value: `${e.value}`
+							}, e.value))
+						}) : /* @__PURE__ */ (0, j.jsx)(w, {
+							options: e.availableValues,
+							variant: L,
+							isClearable: e.clearable === void 0 ? !0 : e.clearable,
+							isSearchable: !0,
+							controlShouldRenderValue: !0,
+							filterOption: T(Z),
+							onChange: (t) => {
+								$(e.filter, t);
+							},
+							value: e.value,
+							defaultValue: e.defaultValue
+						}) : /* @__PURE__ */ (0, j.jsxs)(j.Fragment, { children: [e.ui === "radio" ? /* @__PURE__ */ (0, j.jsx)(S, {
+							variant: L,
+							defaultValue: e.defaultValue ? e.defaultValue.map((e) => `${e.value}`) : [],
+							value: e.value ? e.value.map((e) => `${e.value}`) : void 0,
+							onValueChange: (t) => {
+								$(e.filter, e.availableValues.filter((e) => t.indexOf(`${e.value}`) !== -1));
+							},
+							children: e.availableValues.map((e) => /* @__PURE__ */ (0, j.jsx)(C, {
+								label: `${e.label}`,
+								value: `${e.value}`
+							}, e.value))
+						}) : /* @__PURE__ */ (0, j.jsx)(w, {
+							options: e.availableValues,
+							variant: L,
+							size: "sm",
+							isMulti: !0,
+							isClearable: e.clearable === void 0 ? !0 : e.clearable,
+							isSearchable: !0,
+							controlShouldRenderValue: !0,
+							filterOption: T(Z),
+							onChange: (t) => {
+								$(e.filter, t);
+							},
+							value: e.value,
+							defaultValue: e.defaultValue
+						}), e.allowSelectAll ? /* @__PURE__ */ (0, j.jsx)("button", {
+							type: "button",
+							className: "bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400",
+							onClick: () => {
+								$(e.filter, e.availableValues);
+							},
+							children: "Select all options"
+						}) : null] })]
+					}, t)),
+					R ? /* @__PURE__ */ (0, j.jsxs)("div", {
+						style: {
+							width: R.width || `calc(${100 / I}% - ${(I - 1) / I}rem)`,
+							flexGrow: +!R.width,
+							flexShrink: 0,
+							minWidth: "240px"
+						},
+						className: "pb-4",
+						children: [/* @__PURE__ */ (0, j.jsx)(E, {
+							className: "mb-2",
+							children: R.label || "Highlight data"
+						}), /* @__PURE__ */ (0, j.jsx)(w, {
+							options: de,
+							variant: L,
+							size: "sm",
+							isMulti: !0,
+							isClearable: !0,
+							isSearchable: !0,
+							controlShouldRenderValue: !0,
+							filterOption: T(Z),
+							onChange: (e) => {
+								ue(e?.map((e) => e.value));
+							},
+							value: K?.map((e) => ({
+								label: e,
+								value: e
+							})),
+							defaultValue: R.defaultValues?.map((e) => ({
+								label: e,
+								value: e
+							}))
+						})]
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ (0, j.jsx)(oe, {
+				graph: o,
+				graphData: he,
+				graphDataConfiguration: H,
+				debugMode: N,
+				readableHeader: se || [],
+				updateFilters: ce,
+				settings: {
+					...t || {},
+					...W,
+					graphTitle: void 0,
+					graphDescription: void 0,
+					graphDownload: !1,
+					dataDownload: !1,
+					backgroundColor: void 0,
+					padding: "0",
+					width: void 0,
+					height: void 0,
+					relativeHeight: void 0,
+					minHeight: void 0,
+					theme: t?.theme,
+					...K ? {
+						highlightedDataPoints: K,
+						highlightedIds: K?.map((e) => `${e}`),
+						highlightedLines: K?.map((e) => e)
+					} : {}
+				}
+			})
+		] }) : /* @__PURE__ */ (0, j.jsx)("div", {
+			className: "w-full flex justify-center p-4",
+			children: /* @__PURE__ */ (0, j.jsx)(re, {})
+		})
+	});
+}
+//#endregion
+export { N as t };
+
+//# sourceMappingURL=SingleGraphDashboardThreeDGraphs-BsCgN8DA.js.map

package/dist/SingleGraphDashboardThreeDGraphs-BsCgN8DA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleGraphDashboardThreeDGraphs-BsCgN8DA.js","names":[],"sources":["../src/Components/Dashboard/PerformanceIntensive/ThreeDGraphEl.tsx","../src/Components/Dashboard/PerformanceIntensive/SingleGraphDashboardThreeDGraphs.tsx"],"sourcesContent":["import { P } from '@undp/design-system-react/Typography';\nimport type { GraphConfigurationDataType, GraphSettingsDataType, ThreeDGraphType } from '@/Types';\n\nimport { getValues } from '@/Utils/getValues';\nimport { ThreeDGlobe } from '../../Graphs/Maps/ThreeDGlobe';\n\ninterface Props {\n  graph: ThreeDGraphType;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  graphData: any;\n  settings?: GraphSettingsDataType;\n  debugMode?: boolean;\n  graphDataConfiguration?: GraphConfigurationDataType[];\n  readableHeader: {\n    value: string;\n    label: string;\n  }[];\n  updateFilters?: (_d: string) => void;\n}\n\nfunction ThreeDGraphEl(props: Props) {\n  const {\n    settings,\n    graph,\n    graphData,\n    debugMode,\n    graphDataConfiguration,\n    readableHeader,\n    updateFilters,\n  } = props;\n  if (debugMode) {\n    // biome-ignore lint/suspicious/noConsole: This is for debug mode\n    console.log(`Graph: ${graph}`);\n    // biome-ignore lint/suspicious/noConsole: This is for debug mode\n    console.log('Transformed data:', graphData);\n    // biome-ignore lint/suspicious/noConsole: This is for debug mode\n    console.log('Settings:', settings);\n  }\n  if (typeof graphData === 'string')\n    return (\n      <div\n        className={`flex my-0 mx-auto grow flex-col justify-center ${\n          settings?.width ? 'w-fit' : 'w-full'\n        }`}\n        style={{ height: 'inherit' }}\n      >\n        <P\n          size='sm'\n          marginBottom='none'\n          className='p-2 text-center text-accent-dark-red dark:text-accent-red'\n        >\n          {graphData}\n        </P>\n      </div>\n    );\n  const graphComponents: Record<ThreeDGraphType, React.ElementType | null> = {\n    threeDGlobe: ThreeDGlobe,\n  };\n  const getGraphProps = (graphType: ThreeDGraphType) => {\n    switch (graphType) {\n      case 'threeDGlobe':\n        return {\n          numberDisplayOptions: settings?.numberDisplayOptions,\n          globeOffset: settings?.globeOffset,\n          collapseColorScaleByDefault: settings?.collapseColorScaleByDefault,\n          polygonAltitude: settings?.polygonAltitude,\n          highlightedIds: settings?.highlightedIds,\n          scale: settings?.scale,\n          theme: settings?.theme,\n          resetSelectionOnDoubleClick: settings?.resetSelectionOnDoubleClick,\n          graphTitle: settings?.graphTitle,\n          mapData: settings?.mapData,\n          graphDescription: settings?.graphDescription,\n          footNote: settings?.footNote,\n          width: settings?.width,\n          height: settings?.height,\n          sources: settings?.sources,\n          colorDomain: settings?.colorDomain as string[] | number[],\n          colors: settings?.colors as string[] | undefined,\n          colorLegendTitle:\n            Object.keys(settings || {}).indexOf('colorLegendTitle') !== -1\n              ? settings?.colorLegendTitle\n              : getValues('x', graphDataConfiguration || [], readableHeader || []),\n          scaleType: settings?.scaleType,\n          data: graphData,\n          centerPoint: settings?.centerPoint,\n          backgroundColor: settings?.backgroundColor,\n          mapNoDataColor: settings?.mapNoDataColor,\n          mapBorderColor: settings?.mapBorderColor,\n          relativeHeight: settings?.relativeHeight,\n          padding: settings?.padding,\n          tooltip: settings?.tooltip,\n          showColorScale: settings?.showColorScale,\n          graphID: settings?.graphID,\n          dataDownload: settings?.dataDownload,\n          mapProperty: settings?.mapProperty,\n          language: settings?.language,\n          minHeight: settings?.minHeight,\n          ariaLabel: settings?.ariaLabel,\n          // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n          onSeriesMouseClick: (el: any) => {\n            updateFilters?.(el.id);\n          },\n          detailsOnClick: settings?.detailsOnClick,\n          styles: settings?.styles,\n          classNames: settings?.classNames,\n          autoRotate: settings?.autoRotate,\n          globeMaterial: settings?.globeMaterial,\n          atmosphereColor: settings?.atmosphereColor,\n          enableZoom: settings?.enableZoom,\n          atmosphereAltitude: settings?.atmosphereAltitude,\n          globeCurvatureResolution: settings?.globeCurvatureResolution,\n          fogSettings: settings?.fogSetting,\n          lights: settings?.lights,\n          highlightedAltitude: settings?.highlightedAltitude,\n          selectedId: settings?.selectedId,\n        };\n      default:\n        return {};\n    }\n  };\n  const GraphComponent = graphComponents[graph];\n  const graphProps = getGraphProps(graph);\n  return (\n    <div\n      className={`grow my-0 mx-auto flex flex-col w-full justify-center ${settings?.theme || 'light'}`}\n      style={{ minHeight: 'inherit' }}\n    >\n      {GraphComponent ? (\n        <GraphComponent {...graphProps} />\n      ) : (\n        <P\n          size='sm'\n          marginBottom='none'\n          className='p-2 text-center text-accent-dark-red dark:text-accent-red'\n        >\n          {`Invalid chart type: ${graph}`}\n        </P>\n      )}\n    </div>\n  );\n}\n\nexport default ThreeDGraphEl;\n","import { CheckboxGroup, CheckboxGroupItem } from '@undp/design-system-react/CheckboxGroup';\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\nimport { Label } from '@undp/design-system-react/Label';\nimport { RadioGroup, RadioGroupItem } from '@undp/design-system-react/RadioGroup';\nimport { Spinner } from '@undp/design-system-react/Spinner';\nimport isEqual from 'fast-deep-equal';\nimport flattenDeep from 'lodash.flattendeep';\nimport intersection from 'lodash.intersection';\nimport { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  AdvancedDataSelectionDataType,\n  AggregationSettingsDataType,\n  DataFilterDataType,\n  DataSelectionDataType,\n  DataSettingsDataType,\n  FilterSettingsDataType,\n  FilterUiSettingsDataType,\n  GraphConfigurationDataType,\n  GraphSettingsDataType,\n  HighlightDataPointSettingsDataType,\n  ThreeDGraphType,\n} from '@/Types';\nimport { checkIfMultiple } from '@/Utils/checkIfMultiple';\nimport {\n  fetchAndParseCSV,\n  fetchAndParseJSON,\n  fetchAndParseMultipleDataSources,\n  fetchAndTransformDataFromAPI,\n} from '@/Utils/fetchAndParseData';\nimport { graphList } from '@/Utils/getGraphList';\nimport { getUniqValue } from '@/Utils/getUniqValue';\nimport { filterData } from '@/Utils/transformData/filterData';\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\nimport { transformDataForAggregation } from '@/Utils/transformData/transformDataForAggregation';\nimport { transformDataForGraph } from '@/Utils/transformData/transformDataForGraph';\nimport { transformDefaultValue } from '@/Utils/transformDataForSelect';\nimport ThreeDGraphEl from './ThreeDGraphEl';\n\ninterface Props {\n  graphSettings?: GraphSettingsDataType;\n  readableHeader?: {\n    value: string;\n    label: string;\n  }[];\n  dataSettings: DataSettingsDataType;\n  filters?: FilterUiSettingsDataType[];\n  highlightDataPointSettings?: HighlightDataPointSettingsDataType;\n  noOfFiltersPerRow?: number;\n  graphType: ThreeDGraphType;\n  dataTransform?: {\n    keyColumn: string;\n    aggregationColumnsSetting?: AggregationSettingsDataType[];\n  };\n  dataFilters?: DataFilterDataType[];\n  graphDataConfiguration?: GraphConfigurationDataType[];\n  dataSelectionOptions?: DataSelectionDataType[];\n  advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];\n  debugMode?: boolean;\n  uiMode?: 'light' | 'normal';\n  updateFilters?: (_d: string) => void;\n}\n\nconst getGraphSettings = (\n  dataSelectionOptions: DataSelectionDataType[],\n  updatedConfig?: GraphConfigurationDataType[],\n) => {\n  const updatedSettings =\n    updatedConfig?.map((c) => {\n      const indx = dataSelectionOptions?.findIndex((opt) => opt.chartConfigId === c.chartConfigId);\n      if (indx === -1) return {};\n      const allowedValIndx = dataSelectionOptions[indx]?.allowedColumnIds?.findIndex(\n        (col) => col.value === c.columnId,\n      );\n      if (allowedValIndx === -1) return {};\n      return dataSelectionOptions[indx].allowedColumnIds[allowedValIndx].graphSettings || {};\n    }) || [];\n  return Object.assign({}, ...updatedSettings);\n};\n\nexport function SingleGraphDashboardThreeDGraphs(props: Props) {\n  const {\n    graphSettings,\n    dataSettings,\n    filters,\n    graphType,\n    dataTransform,\n    graphDataConfiguration,\n    dataFilters,\n    debugMode,\n    dataSelectionOptions,\n    advancedDataSelectionOptions,\n    readableHeader,\n    noOfFiltersPerRow = 4,\n    updateFilters,\n    uiMode = 'normal',\n    highlightDataPointSettings,\n  } = props;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [filteredData, setFilteredData] = useState<any>(undefined);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [data, setData] = useState<any>(undefined);\n  const [graphConfig, setGraphConfig] = useState<GraphConfigurationDataType[] | undefined>(\n    graphDataConfiguration,\n  );\n  const [advancedGraphSettings, setAdvancedGraphSettings] = useState<GraphSettingsDataType>({});\n  const [highlightedDataPointList, setHighlightedDataPointList] = useState<\n    (string | number)[] | undefined\n  >(undefined);\n  const [highlightedDataPointOptions, setHighlightedDataPointOption] = useState<\n    { label: string | number; value: string | number }[]\n  >([]);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n\n  const prevGraphDataConfigRef = useRef<GraphConfigurationDataType[] | undefined>(\n    graphDataConfiguration,\n  );\n  const [filterSettings, setFilterSettings] = useState<FilterSettingsDataType[]>([]);\n\n  const filterConfig = {\n    ignoreCase: true,\n    ignoreAccents: true,\n    trim: true,\n  };\n\n  const updateFiltersEvent = useEffectEvent(() => {\n    const filterSettingsTemp = (filters || []).map((el) => ({\n      filter: el.column,\n      label: el.label || `Filter by ${el.column}`,\n      singleSelect: el.singleSelect,\n      clearable: el.clearable,\n      defaultValue: transformDefaultValue(el.defaultValue),\n      value: transformDefaultValue(el.defaultValue),\n      availableValues: getUniqValue(data, el.column)\n        .filter((v) => !el.excludeValues?.includes(`${v}`))\n        .map((v) => ({ value: v, label: v })),\n      allowSelectAll: el.allowSelectAll,\n      width: el.width,\n    }));\n    setFilterSettings(filterSettingsTemp);\n  });\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const dataFromFile = dataSettings.dataURL\n          ? typeof dataSettings.dataURL === 'string'\n            ? dataSettings.fileType === 'json'\n              ? await fetchAndParseJSON(\n                  dataSettings.dataURL,\n                  dataSettings.columnsToArray,\n                  dataSettings.dataTransformation,\n                  debugMode,\n                )\n              : dataSettings.fileType === 'api'\n                ? await fetchAndTransformDataFromAPI(\n                    dataSettings.dataURL,\n                    dataSettings.apiHeaders,\n                    dataSettings.columnsToArray,\n                    dataSettings.dataTransformation,\n                    debugMode,\n                  )\n                : await fetchAndParseCSV(\n                    dataSettings.dataURL,\n                    dataSettings.dataTransformation,\n                    dataSettings.columnsToArray,\n                    debugMode,\n                    dataSettings.delimiter,\n                    true,\n                  )\n            : await fetchAndParseMultipleDataSources(\n                dataSettings.dataURL,\n                dataSettings.idColumnTitle,\n              )\n          : await transformColumnsToArray(dataSettings.data, dataSettings.columnsToArray);\n        setData(dataFromFile);\n      } catch (error) {\n        console.error('Data fetching error:', error);\n      }\n    };\n    fetchData();\n    updateFiltersEvent();\n  }, [dataSettings, debugMode]);\n\n  useEffect(() => {\n    updateFiltersEvent();\n  }, [filters, data]);\n\n  const filteredDataEvent = useEffectEvent(() => {\n    if (!data || filterSettings.length === 0) setFilteredData(data);\n    else {\n      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n      const result = data.filter((item: any) =>\n        filterSettings.every((filter) =>\n          filter.value && flattenDeep([filter.value]).length > 0\n            ? intersection(\n                flattenDeep([item[filter.filter]]),\n                flattenDeep([filter.value]).map((el) => el.value),\n              ).length > 0\n            : true,\n        ),\n      );\n      setFilteredData(result);\n    }\n  });\n\n  useEffect(() => {\n    filteredDataEvent();\n  }, [filterSettings, data]);\n\n  useEffect(() => {\n    if (dataSelectionOptions)\n      setAdvancedGraphSettings(getGraphSettings(dataSelectionOptions, graphDataConfiguration));\n  }, [dataSelectionOptions, graphDataConfiguration]);\n\n  const updateHighlightedDataPointOptions = useEffectEvent(() => {\n    if (highlightDataPointSettings?.column && filteredData)\n      setHighlightedDataPointOption(\n        getUniqValue(filteredData, highlightDataPointSettings.column)\n          .filter((v) => !highlightDataPointSettings?.excludeValues?.includes(`${v}`))\n          .map((d) => ({ value: d, label: d })),\n      );\n  });\n\n  useEffect(() => {\n    updateHighlightedDataPointOptions();\n  }, [highlightDataPointSettings]);\n\n  useEffect(() => {\n    if (!isEqual(prevGraphDataConfigRef.current, graphDataConfiguration)) {\n      setGraphConfig(graphDataConfiguration);\n      prevGraphDataConfigRef.current = graphDataConfiguration;\n    }\n  }, [graphDataConfiguration]);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const handleFilterChange = (filter: string, values: any) => {\n    setFilterSettings((prev) =>\n      prev.map((f) => (f.filter === filter ? { ...f, value: values } : f)),\n    );\n  };\n\n  const graphData = !data\n    ? undefined\n    : transformDataForGraph(\n        dataTransform\n          ? transformDataForAggregation(\n              filterData(data, dataFilters || []),\n              dataTransform.keyColumn,\n              dataTransform.aggregationColumnsSetting,\n            )\n          : filterData(data, dataFilters || []),\n        graphType,\n        graphConfig,\n      );\n  return (\n    <GraphContainer\n      className={graphSettings?.classNames?.graphContainer}\n      style={graphSettings?.styles?.graphContainer}\n      id={graphSettings?.graphID}\n      ref={graphParentDiv}\n      aria-label={graphSettings?.ariaLabel}\n      backgroundColor={graphSettings?.backgroundColor ?? false}\n      theme={graphSettings?.theme || 'light'}\n      language={graphSettings?.language || 'en'}\n      width={graphSettings?.width}\n      height={graphSettings?.height}\n      padding={graphSettings?.padding}\n      minHeight={graphSettings?.minHeight}\n      relativeHeight={graphSettings?.relativeHeight}\n    >\n      {data ||\n      graphList\n        .filter((el) => el.geoHubMapPresentation)\n        .map((el) => el.graphID)\n        .indexOf(graphType) !== -1 ? (\n        <>\n          {advancedGraphSettings?.graphTitle ||\n          advancedGraphSettings?.graphDescription ||\n          graphSettings?.graphTitle ||\n          graphSettings?.graphDescription ||\n          graphSettings?.graphDownload ||\n          graphSettings?.dataDownload ? (\n            <GraphHeader\n              styles={{\n                title: advancedGraphSettings?.styles?.title || graphSettings?.styles?.title,\n                description:\n                  advancedGraphSettings?.styles?.description || graphSettings?.styles?.description,\n              }}\n              classNames={{\n                title: advancedGraphSettings?.classNames?.title || graphSettings?.classNames?.title,\n                description:\n                  advancedGraphSettings?.classNames?.description ||\n                  graphSettings?.classNames?.description,\n              }}\n              graphTitle={advancedGraphSettings?.graphTitle || graphSettings?.graphTitle}\n              graphDescription={\n                advancedGraphSettings?.graphDescription || graphSettings?.graphDescription\n              }\n              width={advancedGraphSettings?.width || graphSettings?.width}\n              graphDownload={graphSettings?.graphDownload ? graphParentDiv : undefined}\n              dataDownload={\n                graphSettings?.dataDownload && data ? (data.length > 0 ? data : null) : null\n              }\n            />\n          ) : null}\n          {filterSettings.length !== 0 ||\n          (dataSelectionOptions || []).length !== 0 ||\n          (advancedDataSelectionOptions || []).length !== 0 ||\n          highlightDataPointSettings ? (\n            <div className='flex flex-wrap items-start gap-x-4 gap-y-0 w-full'>\n              {advancedDataSelectionOptions?.map((d, i) => (\n                <div\n                  style={{\n                    width:\n                      d.width ||\n                      `calc(${100 / noOfFiltersPerRow}% - ${\n                        (noOfFiltersPerRow - 1) / noOfFiltersPerRow\n                      }rem)`,\n                    flexGrow: d.width ? 0 : 1,\n                    flexShrink: d.ui !== 'radio' || d.width ? 0 : 1,\n                    minWidth: '240px',\n                  }}\n                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                  key={i}\n                  className='pb-4'\n                >\n                  <Label className='mb-2'>{d.label || 'Graph by'}</Label>\n                  {d.ui !== 'radio' ? (\n                    <DropdownSelect\n                      options={d.options.map((opt) => ({\n                        ...opt,\n                        value: opt.label,\n                      }))}\n                      size='sm'\n                      isClearable={false}\n                      isSearchable\n                      variant={uiMode}\n                      controlShouldRenderValue\n                      defaultValue={\n                        d.defaultValue\n                          ? {\n                              ...d.defaultValue,\n                              value: d.defaultValue?.label,\n                            }\n                          : {\n                              ...d.options[0],\n                              value: d.options[0].label,\n                            }\n                      }\n                      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                      onChange={(el: any) => {\n                        setAdvancedGraphSettings(el?.graphSettings || {});\n                        setGraphConfig(el?.dataConfiguration);\n                      }}\n                    />\n                  ) : (\n                    <RadioGroup\n                      defaultValue={d.defaultValue?.label || d.options[0].label}\n                      variant={uiMode}\n                      onValueChange={(el) => {\n                        const selectedOption =\n                          d.options[d.options.findIndex((opt) => opt.label === el)];\n                        setAdvancedGraphSettings(selectedOption.graphSettings || {});\n                        setGraphConfig(selectedOption.dataConfiguration);\n                      }}\n                    >\n                      {d.options.map((el) => (\n                        <RadioGroupItem label={el.label} value={el.label} key={el.label} />\n                      ))}\n                    </RadioGroup>\n                  )}\n                </div>\n              ))}\n              {dataSelectionOptions?.map((d, i) => (\n                <div\n                  style={{\n                    width:\n                      d.width ||\n                      `calc(${100 / noOfFiltersPerRow}% - ${\n                        (noOfFiltersPerRow - 1) / noOfFiltersPerRow\n                      }rem)`,\n                    flexGrow: d.width ? 0 : 1,\n                    flexShrink: d.ui !== 'radio' || d.width ? 0 : 1,\n                    minWidth: '240px',\n                  }}\n                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                  key={i}\n                  className='pb-4'\n                >\n                  <Label className='mb-2'>{d.label || `Visualize ${d.chartConfigId} by`}</Label>\n                  {!checkIfMultiple(d.chartConfigId, graphConfig || []) ? (\n                    d.ui !== 'radio' ? (\n                      <DropdownSelect\n                        options={d.allowedColumnIds}\n                        size='sm'\n                        isClearable={false}\n                        isSearchable\n                        variant={uiMode}\n                        controlShouldRenderValue\n                        defaultValue={\n                          graphDataConfiguration\n                            ? d.allowedColumnIds[\n                                d.allowedColumnIds.findIndex(\n                                  (j) =>\n                                    j.value ===\n                                    (graphDataConfiguration[\n                                      graphDataConfiguration.findIndex(\n                                        (el) => el.chartConfigId === d.chartConfigId,\n                                      )\n                                    ].columnId as string),\n                                )\n                              ]\n                            : undefined\n                        }\n                        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                        onChange={(el: any) => {\n                          const newGraphConfig = {\n                            columnId: el?.value as string,\n                            chartConfigId: d.chartConfigId,\n                          };\n                          const updatedConfig = graphConfig?.map((item) =>\n                            item.chartConfigId === newGraphConfig.chartConfigId\n                              ? newGraphConfig\n                              : item,\n                          );\n                          setAdvancedGraphSettings(\n                            getGraphSettings(dataSelectionOptions, updatedConfig),\n                          );\n                          setGraphConfig(updatedConfig);\n                        }}\n                      />\n                    ) : (\n                      <RadioGroup\n                        variant={uiMode}\n                        defaultValue={\n                          graphDataConfiguration\n                            ? d.allowedColumnIds[\n                                d.allowedColumnIds.findIndex(\n                                  (j) =>\n                                    j.value ===\n                                    (graphDataConfiguration[\n                                      graphDataConfiguration.findIndex(\n                                        (el) => el.chartConfigId === d.chartConfigId,\n                                      )\n                                    ].columnId as string),\n                                )\n                              ].label\n                            : ''\n                        }\n                        onValueChange={(el) => {\n                          const selectedOption =\n                            d.allowedColumnIds[\n                              d.allowedColumnIds.findIndex((opt) => opt.label === el)\n                            ];\n                          const newGraphConfig = {\n                            columnId: selectedOption.value,\n                            chartConfigId: d.chartConfigId,\n                          };\n                          const updatedConfig = graphConfig?.map((item) =>\n                            item.chartConfigId === newGraphConfig.chartConfigId\n                              ? newGraphConfig\n                              : item,\n                          );\n                          setAdvancedGraphSettings(\n                            getGraphSettings(dataSelectionOptions, updatedConfig),\n                          );\n                          setGraphConfig(updatedConfig);\n                        }}\n                      >\n                        {d.allowedColumnIds.map((el) => (\n                          <RadioGroupItem label={el.label} value={el.value} key={el.value} />\n                        ))}\n                      </RadioGroup>\n                    )\n                  ) : d.ui !== 'radio' ? (\n                    <DropdownSelect\n                      options={d.allowedColumnIds}\n                      size='sm'\n                      isMulti\n                      isSearchable\n                      variant={uiMode}\n                      controlShouldRenderValue\n                      defaultValue={\n                        graphDataConfiguration\n                          ? (\n                              graphDataConfiguration[\n                                graphDataConfiguration.findIndex(\n                                  (el) => el.chartConfigId === d.chartConfigId,\n                                )\n                              ].columnId as string[]\n                            ).map(\n                              (el) =>\n                                d.allowedColumnIds[\n                                  d.allowedColumnIds.findIndex((j) => j.value === el)\n                                ],\n                            )\n                          : undefined\n                      }\n                      filterOption={createFilter(filterConfig)}\n                      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                      onChange={(el: any) => {\n                        const newGraphConfig = {\n                          columnId: (el || []).map(\n                            // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                            (item: any) => item.value,\n                          ) as string[],\n                          chartConfigId: d.chartConfigId,\n                        };\n                        const updatedConfig = graphConfig?.map((item) =>\n                          item.chartConfigId === newGraphConfig.chartConfigId\n                            ? newGraphConfig\n                            : item,\n                        );\n                        setGraphConfig(updatedConfig);\n                      }}\n                    />\n                  ) : (\n                    <CheckboxGroup\n                      variant={uiMode}\n                      defaultValue={\n                        graphDataConfiguration\n                          ? (\n                              graphDataConfiguration[\n                                graphDataConfiguration.findIndex(\n                                  (el) => el.chartConfigId === d.chartConfigId,\n                                )\n                              ].columnId as string[]\n                            )\n                              .map(\n                                (el) =>\n                                  d.allowedColumnIds[\n                                    d.allowedColumnIds.findIndex((j) => j.value === el)\n                                  ],\n                              )\n                              .map((el) => el.value)\n                          : []\n                      }\n                      onValueChange={(el) => {\n                        const newGraphConfig = {\n                          columnId: el || [],\n                          chartConfigId: d.chartConfigId,\n                        };\n                        const updatedConfig = graphConfig?.map((item) =>\n                          item.chartConfigId === newGraphConfig.chartConfigId\n                            ? newGraphConfig\n                            : item,\n                        );\n                        setGraphConfig(updatedConfig);\n                      }}\n                    >\n                      {d.allowedColumnIds.map((el) => (\n                        <CheckboxGroupItem label={el.label} value={el.value} key={el.value} />\n                      ))}\n                    </CheckboxGroup>\n                  )}\n                </div>\n              ))}\n              {filterSettings?.map((d, i) => (\n                <div\n                  style={{\n                    width:\n                      d.width ||\n                      `calc(${100 / noOfFiltersPerRow}% - ${\n                        (noOfFiltersPerRow - 1) / noOfFiltersPerRow\n                      }rem)`,\n                    flexGrow: d.width ? 0 : 1,\n                    flexShrink: d.ui !== 'radio' || d.width ? 0 : 1,\n                    minWidth: '240px',\n                  }}\n                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\n                  key={i}\n                  className='pb-4'\n                >\n                  <Label className='mb-2'>{d.label}</Label>\n                  {d.singleSelect ? (\n                    d.ui !== 'radio' ? (\n                      <DropdownSelect\n                        options={d.availableValues}\n                        variant={uiMode}\n                        isClearable={d.clearable === undefined ? true : d.clearable}\n                        isSearchable\n                        controlShouldRenderValue\n                        filterOption={createFilter(filterConfig)}\n                        onChange={(el) => {\n                          handleFilterChange(d.filter, el);\n                        }}\n                        value={d.value}\n                        defaultValue={d.defaultValue}\n                      />\n                    ) : (\n                      <RadioGroup\n                        variant={uiMode}\n                        defaultValue={(d.defaultValue as { value: string; label: string }).value}\n                        onValueChange={(el) => {\n                          handleFilterChange(\n                            d.filter,\n                            d.availableValues.filter((v) => v.value === el),\n                          );\n                        }}\n                      >\n                        {d.availableValues.map((el) => (\n                          <RadioGroupItem\n                            label={`${el.label}`}\n                            value={`${el.value}`}\n                            key={el.value}\n                          />\n                        ))}\n                      </RadioGroup>\n                    )\n                  ) : (\n                    <>\n                      {d.ui !== 'radio' ? (\n                        <DropdownSelect\n                          options={d.availableValues}\n                          variant={uiMode}\n                          size='sm'\n                          isMulti\n                          isClearable={d.clearable === undefined ? true : d.clearable}\n                          isSearchable\n                          controlShouldRenderValue\n                          filterOption={createFilter(filterConfig)}\n                          onChange={(el) => {\n                            handleFilterChange(d.filter, el);\n                          }}\n                          value={d.value}\n                          defaultValue={d.defaultValue}\n                        />\n                      ) : (\n                        <CheckboxGroup\n                          variant={uiMode}\n                          defaultValue={\n                            d.defaultValue\n                              ? (\n                                  d.defaultValue as {\n                                    value: string | number;\n                                    label: string | number;\n                                  }[]\n                                ).map((el) => `${el.value}`)\n                              : []\n                          }\n                          value={\n                            d.value\n                              ? (\n                                  d.value as {\n                                    value: string | number;\n                                    label: string | number;\n                                  }[]\n                                ).map((el) => `${el.value}`)\n                              : undefined\n                          }\n                          onValueChange={(el) => {\n                            handleFilterChange(\n                              d.filter,\n                              d.availableValues.filter((v) => el.indexOf(`${v.value}`) !== -1),\n                            );\n                          }}\n                        >\n                          {d.availableValues.map((el) => (\n                            <CheckboxGroupItem\n                              label={`${el.label}`}\n                              value={`${el.value}`}\n                              key={el.value}\n                            />\n                          ))}\n                        </CheckboxGroup>\n                      )}\n                      {d.allowSelectAll ? (\n                        <button\n                          type='button'\n                          className='bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400'\n                          onClick={() => {\n                            handleFilterChange(d.filter, d.availableValues);\n                          }}\n                        >\n                          Select all options\n                        </button>\n                      ) : null}\n                    </>\n                  )}\n                </div>\n              ))}\n              {highlightDataPointSettings ? (\n                <div\n                  style={{\n                    width:\n                      highlightDataPointSettings.width ||\n                      `calc(${100 / noOfFiltersPerRow}% - ${\n                        (noOfFiltersPerRow - 1) / noOfFiltersPerRow\n                      }rem)`,\n                    flexGrow: highlightDataPointSettings.width ? 0 : 1,\n                    flexShrink: 0,\n                    minWidth: '240px',\n                  }}\n                  className='pb-4'\n                >\n                  <Label className='mb-2'>\n                    {highlightDataPointSettings.label || 'Highlight data'}\n                  </Label>\n                  <DropdownSelect\n                    options={highlightedDataPointOptions}\n                    variant={uiMode}\n                    size='sm'\n                    isMulti\n                    isClearable\n                    isSearchable\n                    controlShouldRenderValue\n                    filterOption={createFilter(filterConfig)}\n                    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                    onChange={(el: any) => {\n                      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n                      setHighlightedDataPointList(el?.map((d: any) => d.value));\n                    }}\n                    value={highlightedDataPointList?.map((d) => ({\n                      label: d,\n                      value: d,\n                    }))}\n                    defaultValue={highlightDataPointSettings.defaultValues?.map((d) => ({\n                      label: d,\n                      value: d,\n                    }))}\n                  />\n                </div>\n              ) : null}\n            </div>\n          ) : null}\n          <ThreeDGraphEl\n            graph={graphType}\n            graphData={graphData}\n            graphDataConfiguration={graphConfig}\n            debugMode={debugMode}\n            readableHeader={readableHeader || []}\n            updateFilters={updateFilters}\n            settings={{\n              ...(graphSettings || {}),\n              ...advancedGraphSettings,\n              graphTitle: undefined,\n              graphDescription: undefined,\n              graphDownload: false,\n              dataDownload: false,\n              backgroundColor: undefined,\n              padding: '0',\n              width: undefined,\n              height: undefined,\n              relativeHeight: undefined,\n              minHeight: undefined,\n              theme: graphSettings?.theme,\n              ...(highlightedDataPointList\n                ? {\n                    highlightedDataPoints: highlightedDataPointList,\n                    highlightedIds: highlightedDataPointList?.map((d) => `${d}`),\n                    highlightedLines: highlightedDataPointList?.map((d) => d),\n                  }\n                : {}),\n            }}\n          />\n        </>\n      ) : (\n        <div className='w-full flex justify-center p-4'>\n          <Spinner />\n        </div>\n      )}\n    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/SingleGraphDashboardThreeDGraphs-qstwmomC.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./lodash.flattendeep-_PlS_1wX.cjs`),r=require(`./lodash.intersection-BDR4j58n.cjs`),i=require(`./GraphHeader.cjs`),a=require(`./getValues-CX_V1GcA.cjs`),o=require(`./fetchAndParseData-Dlq4UzdG.cjs`),s=require(`./getUniqValue-BItnnZEr.cjs`),c=require(`./filterData-B2pPOkwy.cjs`),l=require(`./transformDataForGraph-CiaG24wJ.cjs`),u=require(`./getGraphList-DnwJeVCr.cjs`),d=require(`./transformDataForSelect-Bmaowc2Z.cjs`),f=require(`./GraphContainer-7xAPK4Tb.cjs`),p=require(`./fast-deep-equal-DN3ilkVq.cjs`),m=require(`./ThreeDGlobe-7eJdMW-R.cjs`);let h=require(`react`),g=require(`@undp/design-system-react/CheckboxGroup`),_=require(`@undp/design-system-react/DropdownSelect`),v=require(`@undp/design-system-react/Label`),y=require(`@undp/design-system-react/RadioGroup`),b=require(`@undp/design-system-react/Spinner`),x=require(`@undp/design-system-react/Typography`);var S=e.a(n.t(),1),C=e.a(r.t(),1),w=e.a(p.t(),1),T=t.t();function E(e){let{settings:t,graph:n,graphData:r,debugMode:i,graphDataConfiguration:o,readableHeader:s,updateFilters:c}=e;if(i&&(console.log(`Graph: ${n}`),console.log(`Transformed data:`,r),console.log(`Settings:`,t)),typeof r==`string`)return(0,T.jsx)(`div`,{className:`flex my-0 mx-auto grow flex-col justify-center ${t?.width?`w-fit`:`w-full`}`,style:{height:`inherit`},children:(0,T.jsx)(x.P,{size:`sm`,marginBottom:`none`,className:`p-2 text-center text-accent-dark-red dark:text-accent-red`,children:r})});let l={threeDGlobe:m.t},u=e=>{switch(e){case`threeDGlobe`:return{numberDisplayOptions:t?.numberDisplayOptions,globeOffset:t?.globeOffset,collapseColorScaleByDefault:t?.collapseColorScaleByDefault,polygonAltitude:t?.polygonAltitude,highlightedIds:t?.highlightedIds,scale:t?.scale,theme:t?.theme,resetSelectionOnDoubleClick:t?.resetSelectionOnDoubleClick,graphTitle:t?.graphTitle,mapData:t?.mapData,graphDescription:t?.graphDescription,footNote:t?.footNote,width:t?.width,height:t?.height,sources:t?.sources,colorDomain:t?.colorDomain,colors:t?.colors,colorLegendTitle:Object.keys(t||{}).indexOf(`colorLegendTitle`)===-1?a.t(`x`,o||[],s||[]):t?.colorLegendTitle,scaleType:t?.scaleType,data:r,centerPoint:t?.centerPoint,backgroundColor:t?.backgroundColor,mapNoDataColor:t?.mapNoDataColor,mapBorderColor:t?.mapBorderColor,relativeHeight:t?.relativeHeight,padding:t?.padding,tooltip:t?.tooltip,showColorScale:t?.showColorScale,graphID:t?.graphID,dataDownload:t?.dataDownload,mapProperty:t?.mapProperty,language:t?.language,minHeight:t?.minHeight,ariaLabel:t?.ariaLabel,onSeriesMouseClick:e=>{c?.(e.id)},detailsOnClick:t?.detailsOnClick,styles:t?.styles,classNames:t?.classNames,autoRotate:t?.autoRotate,globeMaterial:t?.globeMaterial,atmosphereColor:t?.atmosphereColor,enableZoom:t?.enableZoom,atmosphereAltitude:t?.atmosphereAltitude,globeCurvatureResolution:t?.globeCurvatureResolution,fogSettings:t?.fogSetting,lights:t?.lights,highlightedAltitude:t?.highlightedAltitude,selectedId:t?.selectedId};default:return{}}},d=l[n],f=u(n);return(0,T.jsx)(`div`,{className:`grow my-0 mx-auto flex flex-col w-full justify-center ${t?.theme||`light`}`,style:{minHeight:`inherit`},children:d?(0,T.jsx)(d,{...f}):(0,T.jsx)(x.P,{size:`sm`,marginBottom:`none`,className:`p-2 text-center text-accent-dark-red dark:text-accent-red`,children:`Invalid chart type: ${n}`})})}var D=(e,t)=>{let n=t?.map(t=>{let n=e?.findIndex(e=>e.chartConfigId===t.chartConfigId);if(n===-1)return{};let r=e[n]?.allowedColumnIds?.findIndex(e=>e.value===t.columnId);return r===-1?{}:e[n].allowedColumnIds[r].graphSettings||{}})||[];return Object.assign({},...n)};function O(e){let{graphSettings:t,dataSettings:n,filters:r,graphType:p,dataTransform:m,graphDataConfiguration:x,dataFilters:O,debugMode:k,dataSelectionOptions:A,advancedDataSelectionOptions:j,readableHeader:M,noOfFiltersPerRow:N=4,updateFilters:P,uiMode:F=`normal`,highlightDataPointSettings:I}=e,[L,R]=(0,h.useState)(void 0),[z,B]=(0,h.useState)(void 0),[V,H]=(0,h.useState)(x),[U,W]=(0,h.useState)({}),[G,K]=(0,h.useState)(void 0),[ee,te]=(0,h.useState)([]),q=(0,h.useRef)(null),J=(0,h.useRef)(x),[Y,X]=(0,h.useState)([]),Z={ignoreCase:!0,ignoreAccents:!0,trim:!0},Q=(0,h.useEffectEvent)(()=>{X((r||[]).map(e=>({filter:e.column,label:e.label||`Filter by ${e.column}`,singleSelect:e.singleSelect,clearable:e.clearable,defaultValue:d.t(e.defaultValue),value:d.t(e.defaultValue),availableValues:s.t(z,e.column).filter(t=>!e.excludeValues?.includes(`${t}`)).map(e=>({value:e,label:e})),allowSelectAll:e.allowSelectAll,width:e.width})))});(0,h.useEffect)(()=>{(async()=>{try{B(n.dataURL?typeof n.dataURL==`string`?n.fileType===`json`?await o.r(n.dataURL,n.columnsToArray,n.dataTransformation,k):n.fileType===`api`?await o.a(n.dataURL,n.apiHeaders,n.columnsToArray,n.dataTransformation,k):await o.t(n.dataURL,n.dataTransformation,n.columnsToArray,k,n.delimiter,!0):await o.i(n.dataURL,n.idColumnTitle):await o.o(n.data,n.columnsToArray))}catch(e){console.error(`Data fetching error:`,e)}})(),Q()},[n,k]),(0,h.useEffect)(()=>{Q()},[r,z]);let ne=(0,h.useEffectEvent)(()=>{!z||Y.length===0?R(z):R(z.filter(e=>Y.every(t=>t.value&&(0,S.default)([t.value]).length>0?(0,C.default)((0,S.default)([e[t.filter]]),(0,S.default)([t.value]).map(e=>e.value)).length>0:!0)))});(0,h.useEffect)(()=>{ne()},[Y,z]),(0,h.useEffect)(()=>{A&&W(D(A,x))},[A,x]);let re=(0,h.useEffectEvent)(()=>{I?.column&&L&&te(s.t(L,I.column).filter(e=>!I?.excludeValues?.includes(`${e}`)).map(e=>({value:e,label:e})))});(0,h.useEffect)(()=>{re()},[I]),(0,h.useEffect)(()=>{(0,w.default)(J.current,x)||(H(x),J.current=x)},[x]);let $=(e,t)=>{X(n=>n.map(n=>n.filter===e?{...n,value:t}:n))},ie=z?l.t(m?l.n(c.t(z,O||[]),m.keyColumn,m.aggregationColumnsSetting):c.t(z,O||[]),p,V):void 0;return(0,T.jsx)(f.n,{className:t?.classNames?.graphContainer,style:t?.styles?.graphContainer,id:t?.graphID,ref:q,"aria-label":t?.ariaLabel,backgroundColor:t?.backgroundColor??!1,theme:t?.theme||`light`,language:t?.language||`en`,width:t?.width,height:t?.height,padding:t?.padding,minHeight:t?.minHeight,relativeHeight:t?.relativeHeight,children:z||u.t.filter(e=>e.geoHubMapPresentation).map(e=>e.graphID).indexOf(p)!==-1?(0,T.jsxs)(T.Fragment,{children:[U?.graphTitle||U?.graphDescription||t?.graphTitle||t?.graphDescription||t?.graphDownload||t?.dataDownload?(0,T.jsx)(i.GraphHeader,{styles:{title:U?.styles?.title||t?.styles?.title,description:U?.styles?.description||t?.styles?.description},classNames:{title:U?.classNames?.title||t?.classNames?.title,description:U?.classNames?.description||t?.classNames?.description},graphTitle:U?.graphTitle||t?.graphTitle,graphDescription:U?.graphDescription||t?.graphDescription,width:U?.width||t?.width,graphDownload:t?.graphDownload?q:void 0,dataDownload:t?.dataDownload&&z&&z.length>0?z:null}):null,Y.length!==0||(A||[]).length!==0||(j||[]).length!==0||I?(0,T.jsxs)(`div`,{className:`flex flex-wrap items-start gap-x-4 gap-y-0 w-full`,children:[j?.map((e,t)=>(0,T.jsxs)(`div`,{style:{width:e.width||`calc(${100/N}% - ${(N-1)/N}rem)`,flexGrow:+!e.width,flexShrink:e.ui!==`radio`||e.width?0:1,minWidth:`240px`},className:`pb-4`,children:[(0,T.jsx)(v.Label,{className:`mb-2`,children:e.label||`Graph by`}),e.ui===`radio`?(0,T.jsx)(y.RadioGroup,{defaultValue:e.defaultValue?.label||e.options[0].label,variant:F,onValueChange:t=>{let n=e.options[e.options.findIndex(e=>e.label===t)];W(n.graphSettings||{}),H(n.dataConfiguration)},children:e.options.map(e=>(0,T.jsx)(y.RadioGroupItem,{label:e.label,value:e.label},e.label))}):(0,T.jsx)(_.DropdownSelect,{options:e.options.map(e=>({...e,value:e.label})),size:`sm`,isClearable:!1,isSearchable:!0,variant:F,controlShouldRenderValue:!0,defaultValue:e.defaultValue?{...e.defaultValue,value:e.defaultValue?.label}:{...e.options[0],value:e.options[0].label},onChange:e=>{W(e?.graphSettings||{}),H(e?.dataConfiguration)}})]},t)),A?.map((e,t)=>(0,T.jsxs)(`div`,{style:{width:e.width||`calc(${100/N}% - ${(N-1)/N}rem)`,flexGrow:+!e.width,flexShrink:e.ui!==`radio`||e.width?0:1,minWidth:`240px`},className:`pb-4`,children:[(0,T.jsx)(v.Label,{className:`mb-2`,children:e.label||`Visualize ${e.chartConfigId} by`}),a.n(e.chartConfigId,V||[])?e.ui===`radio`?(0,T.jsx)(g.CheckboxGroup,{variant:F,defaultValue:x?x[x.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId.map(t=>e.allowedColumnIds[e.allowedColumnIds.findIndex(e=>e.value===t)]).map(e=>e.value):[],onValueChange:t=>{let n={columnId:t||[],chartConfigId:e.chartConfigId},r=V?.map(e=>e.chartConfigId===n.chartConfigId?n:e);H(r)},children:e.allowedColumnIds.map(e=>(0,T.jsx)(g.CheckboxGroupItem,{label:e.label,value:e.value},e.value))}):(0,T.jsx)(_.DropdownSelect,{options:e.allowedColumnIds,size:`sm`,isMulti:!0,isSearchable:!0,variant:F,controlShouldRenderValue:!0,defaultValue:x?x[x.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId.map(t=>e.allowedColumnIds[e.allowedColumnIds.findIndex(e=>e.value===t)]):void 0,filterOption:(0,_.createFilter)(Z),onChange:t=>{let n={columnId:(t||[]).map(e=>e.value),chartConfigId:e.chartConfigId},r=V?.map(e=>e.chartConfigId===n.chartConfigId?n:e);H(r)}}):e.ui===`radio`?(0,T.jsx)(y.RadioGroup,{variant:F,defaultValue:x?e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===x[x.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId)].label:``,onValueChange:t=>{let n={columnId:e.allowedColumnIds[e.allowedColumnIds.findIndex(e=>e.label===t)].value,chartConfigId:e.chartConfigId},r=V?.map(e=>e.chartConfigId===n.chartConfigId?n:e);W(D(A,r)),H(r)},children:e.allowedColumnIds.map(e=>(0,T.jsx)(y.RadioGroupItem,{label:e.label,value:e.value},e.value))}):(0,T.jsx)(_.DropdownSelect,{options:e.allowedColumnIds,size:`sm`,isClearable:!1,isSearchable:!0,variant:F,controlShouldRenderValue:!0,defaultValue:x?e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===x[x.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId)]:void 0,onChange:t=>{let n={columnId:t?.value,chartConfigId:e.chartConfigId},r=V?.map(e=>e.chartConfigId===n.chartConfigId?n:e);W(D(A,r)),H(r)}})]},t)),Y?.map((e,t)=>(0,T.jsxs)(`div`,{style:{width:e.width||`calc(${100/N}% - ${(N-1)/N}rem)`,flexGrow:+!e.width,flexShrink:e.ui!==`radio`||e.width?0:1,minWidth:`240px`},className:`pb-4`,children:[(0,T.jsx)(v.Label,{className:`mb-2`,children:e.label}),e.singleSelect?e.ui===`radio`?(0,T.jsx)(y.RadioGroup,{variant:F,defaultValue:e.defaultValue.value,onValueChange:t=>{$(e.filter,e.availableValues.filter(e=>e.value===t))},children:e.availableValues.map(e=>(0,T.jsx)(y.RadioGroupItem,{label:`${e.label}`,value:`${e.value}`},e.value))}):(0,T.jsx)(_.DropdownSelect,{options:e.availableValues,variant:F,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:(0,_.createFilter)(Z),onChange:t=>{$(e.filter,t)},value:e.value,defaultValue:e.defaultValue}):(0,T.jsxs)(T.Fragment,{children:[e.ui===`radio`?(0,T.jsx)(g.CheckboxGroup,{variant:F,defaultValue:e.defaultValue?e.defaultValue.map(e=>`${e.value}`):[],value:e.value?e.value.map(e=>`${e.value}`):void 0,onValueChange:t=>{$(e.filter,e.availableValues.filter(e=>t.indexOf(`${e.value}`)!==-1))},children:e.availableValues.map(e=>(0,T.jsx)(g.CheckboxGroupItem,{label:`${e.label}`,value:`${e.value}`},e.value))}):(0,T.jsx)(_.DropdownSelect,{options:e.availableValues,variant:F,size:`sm`,isMulti:!0,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:(0,_.createFilter)(Z),onChange:t=>{$(e.filter,t)},value:e.value,defaultValue:e.defaultValue}),e.allowSelectAll?(0,T.jsx)(`button`,{type:`button`,className:`bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400`,onClick:()=>{$(e.filter,e.availableValues)},children:`Select all options`}):null]})]},t)),I?(0,T.jsxs)(`div`,{style:{width:I.width||`calc(${100/N}% - ${(N-1)/N}rem)`,flexGrow:+!I.width,flexShrink:0,minWidth:`240px`},className:`pb-4`,children:[(0,T.jsx)(v.Label,{className:`mb-2`,children:I.label||`Highlight data`}),(0,T.jsx)(_.DropdownSelect,{options:ee,variant:F,size:`sm`,isMulti:!0,isClearable:!0,isSearchable:!0,controlShouldRenderValue:!0,filterOption:(0,_.createFilter)(Z),onChange:e=>{K(e?.map(e=>e.value))},value:G?.map(e=>({label:e,value:e})),defaultValue:I.defaultValues?.map(e=>({label:e,value:e}))})]}):null]}):null,(0,T.jsx)(E,{graph:p,graphData:ie,graphDataConfiguration:V,debugMode:k,readableHeader:M||[],updateFilters:P,settings:{...t||{},...U,graphTitle:void 0,graphDescription:void 0,graphDownload:!1,dataDownload:!1,backgroundColor:void 0,padding:`0`,width:void 0,height:void 0,relativeHeight:void 0,minHeight:void 0,theme:t?.theme,...G?{highlightedDataPoints:G,highlightedIds:G?.map(e=>`${e}`),highlightedLines:G?.map(e=>e)}:{}}})]}):(0,T.jsx)(`div`,{className:`w-full flex justify-center p-4`,children:(0,T.jsx)(b.Spinner,{})})})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return O}});
+//# sourceMappingURL=SingleGraphDashboardThreeDGraphs-qstwmomC.cjs.map