@undp/data-viz 2.6.0 → 2.6.1

package/dist/GriddedGraphs.js

@@ -1,265 +1,356 @@
-import { j as o } from "./compiler-runtime-qHgugrLy.js";
-import { useState as C, useRef as na, useMemo as B, useEffect as I, useEffectEvent as J, useCallback as sa } from "react";
-import { i as ua } from "./index-BuwmuDFJ.js";
-import { f as T } from "./index-EArKRVKg.js";
-import { CheckboxGroup as K, CheckboxGroupItem as Q } from "@undp/design-system-react/CheckboxGroup";
-import { Spinner as ca } from "@undp/design-system-react/Spinner";
-import { RadioGroup as $, RadioGroupItem as A } from "@undp/design-system-react/RadioGroup";
-import { DropdownSelect as V, createFilter as F } from "@undp/design-system-react/DropdownSelect";
-import { Label as R } from "@undp/design-system-react/Label";
-import { G as da } from "./GraphContainer-DcOM2CI6.js";
-import { G as ha } from "./GraphEl-C7KBBHvB.js";
-import { b as fa, d as pa, f as ma, c as ga, t as Ca } from "./fetchAndParseData-CDjQZ1fL.js";
-import { Colors as va } from "./Colors.js";
-import { a as ba, t as wa } from "./transformDataForAggregation-wdPf8bNt.js";
-import { g as X } from "./getUniqValue-DsqSii6M.js";
-import { GraphHeader as xa } from "./GraphHeader.js";
-import { GraphFooter as Ia } from "./GraphFooter.js";
-import { f as Y } from "./filterData-DsAiFzKY.js";
-import { ColorLegend as Va } from "./ColorLegend.js";
-import { c as Sa } from "./checkIfNullOrUndefined-DmfiKkNw.js";
-import { c as ja } from "./checkIfMultiple-D2tgEnYM.js";
-import { t as Z } from "./transformDataForSelect-D8AuvYdf.js";
-function Ka(_) {
-  const {
-    graphSettings: l,
-    dataSettings: i,
-    filters: O,
-    graphType: k,
-    dataTransform: D,
-    graphDataConfiguration: n,
-    noOfColumns: N,
-    columnGridBy: S,
-    dataFilters: L,
-    showCommonColorScale: M,
-    minGraphHeight: aa,
-    minGraphWidth: H,
-    debugMode: v,
-    dataSelectionOptions: U,
-    advancedDataSelectionOptions: E,
-    readableHeader: ea,
-    noOfFiltersPerRow: h = 4,
-    uiMode: u = "normal",
-    theme: la = "light"
-  } = _, [g, ta] = C(void 0), [f, oa] = C(void 0), [b, ra] = C([]), P = na(null), [p, m] = C(n), [w, W] = C([]), [c, j] = C({}), G = B(() => ({
-    ignoreCase: !0,
-    ignoreAccents: !0,
-    trim: !0
-  }), []), z = B(() => !f || w.length === 0 ? f : f.filter((r) => w.every((e) => e.value && T([e.value]).length > 0 ? ua(T([r[e.filter]]), T([e.value]).map((t) => t.value)).length > 0 : !0)), [w, f]);
-  I(() => {
-    ta(z);
-  }, [z]);
-  const q = J(() => {
-    const a = (O || []).map((r) => ({
-      filter: r.column,
-      label: r.label || `Filter by ${r.column}`,
-      singleSelect: r.singleSelect,
-      clearable: r.clearable,
-      ui: r.ui,
-      defaultValue: Z(r.defaultValue),
-      value: Z(r.defaultValue),
-      availableValues: X(f, r.column).filter((e) => !r.excludeValues?.includes(`${e}`)).map((e) => ({
-        value: e,
-        label: e
-      })),
-      allowSelectAll: r.allowSelectAll,
-      width: r.width
-    }));
-    W(a);
-  });
-  I(() => {
-    (async () => {
-      try {
-        const r = i.dataURL ? typeof i.dataURL == "string" ? i.fileType === "json" ? await fa(i.dataURL, i.columnsToArray, i.dataTransformation, v) : i.fileType === "api" ? await pa(i.dataURL, i.apiHeaders, i.columnsToArray, i.dataTransformation, v) : await ma(i.dataURL, i.dataTransformation, i.columnsToArray, v, i.delimiter, !0) : await ga(i.dataURL, i.idColumnTitle) : await Ca(i.data, i.columnsToArray);
-        oa(r);
-      } catch (r) {
-        console.error("Data fetching error:", r);
-      }
-    })(), q();
-  }, [i, v]), I(() => {
-    q();
-  }, [O, f]);
-  const ia = J(() => {
-    const a = X(f, S);
-    ra(a);
-  });
-  I(() => {
-    ia();
-  }, [S, f]), I(() => {
-    m(n);
-  }, [n]);
-  const x = sa((a, r) => {
-    W((e) => e.map((t) => t.filter === a ? {
-      ...t,
-      value: r
-    } : t));
-  }, []);
-  return /* @__PURE__ */ o.jsxs(da, { className: l?.classNames?.graphContainer, style: l?.styles?.graphContainer, id: l?.graphID, ref: P, "aria-label": l?.ariaLabel || "This is a gridded graph", backgroundColor: l?.backgroundColor ?? !1, theme: l?.theme || "light", language: l?.language || "en", width: l?.width, height: l?.height, padding: l?.padding, children: [
-    c?.graphTitle || c?.graphDescription || l?.graphTitle || l?.graphDescription || l?.graphDownload || l?.dataDownload ? /* @__PURE__ */ o.jsx(xa, { styles: {
-      title: c?.styles?.title || l?.styles?.title,
-      description: c?.styles?.description || l?.styles?.description
-    }, classNames: {
-      title: c?.classNames?.title || l?.classNames?.title,
-      description: c?.classNames?.description || l?.classNames?.description
-    }, graphTitle: c?.graphTitle || l?.graphTitle, graphDescription: c?.graphDescription || l?.graphDescription, width: c?.width || l?.width, graphDownload: l?.graphDownload ? P : void 0, dataDownload: l?.dataDownload && g && g.length > 0 ? g : null }) : null,
-    g && b.length > 0 ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-      w.length !== 0 || (U || []).length !== 0 || (E || []).length !== 0 ? /* @__PURE__ */ o.jsxs("div", { className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full", children: [
-        E?.map((a, r) => /* @__PURE__ */ o.jsxs("div", { style: {
-          width: a.width || `calc(${100 / h}% - ${(h - 1) / h}rem)`,
-          flexGrow: a.width ? 0 : 1,
-          flexShrink: a.ui !== "radio" || a.width ? 0 : 1,
-          minWidth: "240px"
-        }, className: "pb-4", children: [
-          /* @__PURE__ */ o.jsx(R, { className: "mb-2", children: a.label || "Graph by" }),
-          a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-            V,
-            {
-              options: a.options.map((e) => ({
-                ...e,
-                value: e.label
-              })),
-              isClearable: !1,
-              isSearchable: !0,
-              variant: u,
-              controlShouldRenderValue: !0,
-              defaultValue: a.defaultValue ? {
-                ...a.defaultValue,
-                value: a.defaultValue?.label
-              } : {
-                ...a.options[0],
-                value: a.options[0].label
-              },
-              onChange: (e) => {
-                j(e?.graphSettings || {}), m(e?.dataConfiguration);
-              }
-            }
-          ) : /* @__PURE__ */ o.jsx($, { defaultValue: a.defaultValue?.label || a.options[0].label, variant: u, onValueChange: (e) => {
-            const t = a.options[a.options.findIndex((d) => d.label === e)];
-            j(t.graphSettings || {}), m(t.dataConfiguration);
-          }, children: a.options.map((e, t) => /* @__PURE__ */ o.jsx(A, { label: e.label, value: e.label }, t)) })
-        ] }, r)),
-        U?.map((a, r) => /* @__PURE__ */ o.jsxs("div", { style: {
-          width: a.width || `calc(${100 / h}% - ${(h - 1) / h}rem)`,
-          flexGrow: a.width ? 0 : 1,
-          flexShrink: a.ui !== "radio" || a.width ? 0 : 1,
-          minWidth: "240px"
-        }, className: "pb-4", children: [
-          /* @__PURE__ */ o.jsx(R, { className: "mb-2", children: a.label || `Visualize ${a.chartConfigId} by` }),
-          ja(a.chartConfigId, p || []) ? a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-            V,
-            {
-              options: a.allowedColumnIds,
-              isMulti: !0,
-              variant: u,
-              isSearchable: !0,
-              controlShouldRenderValue: !0,
-              defaultValue: n ? n[n.findIndex((e) => e.chartConfigId === a.chartConfigId)].columnId.map((e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((t) => t.value === e)]) : void 0,
-              filterOption: F(G),
-              onChange: (e) => {
-                const t = {
-                  columnId: e.map(
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    (s) => s.value
-                  ),
-                  chartConfigId: a.chartConfigId
-                }, d = p?.map((s) => s.chartConfigId === t.chartConfigId ? t : s);
-                m(d);
-              },
-              isRtl: l?.language === "ar" || l?.language === "he"
-            }
-          ) : /* @__PURE__ */ o.jsx(K, { variant: u, defaultValue: n ? n[n.findIndex((e) => e.chartConfigId === a.chartConfigId)].columnId.map((e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((t) => t.value === e)]).map((e) => e.value) : [], onValueChange: (e) => {
-            const t = {
-              columnId: e || [],
-              chartConfigId: a.chartConfigId
-            }, d = p?.map((s) => s.chartConfigId === t.chartConfigId ? t : s);
-            m(d);
-          }, children: a.allowedColumnIds.map((e, t) => /* @__PURE__ */ o.jsx(Q, { label: e.label, value: e.label }, t)) }) : a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-            V,
-            {
-              options: a.allowedColumnIds,
-              isClearable: !1,
-              isSearchable: !0,
-              variant: u,
-              defaultValue: n ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === n[n.findIndex((t) => t.chartConfigId === a.chartConfigId)].columnId)] : void 0,
-              controlShouldRenderValue: !0,
-              onChange: (e) => {
-                const t = {
-                  columnId: e?.value,
-                  chartConfigId: a.chartConfigId
-                }, d = p?.map((s) => s.chartConfigId === t.chartConfigId ? t : s);
-                j(e?.graphSettings || {}), m(d);
-              }
-            }
-          ) : /* @__PURE__ */ o.jsx($, { variant: u, defaultValue: n ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === n[n.findIndex((t) => t.chartConfigId === a.chartConfigId)].columnId)].label : "", onValueChange: (e) => {
-            const t = a.allowedColumnIds[a.allowedColumnIds.findIndex((y) => y.label === e)], d = {
-              columnId: t.value,
-              chartConfigId: a.chartConfigId
-            }, s = p?.map((y) => y.chartConfigId === d.chartConfigId ? d : y);
-            j(t.graphSettings || {}), m(s);
-          }, children: a.allowedColumnIds.map((e, t) => /* @__PURE__ */ o.jsx(A, { label: e.label, value: e.label }, t)) })
-        ] }, r)),
-        w?.map((a, r) => /* @__PURE__ */ o.jsxs("div", { style: {
-          width: a.width || `calc(${100 / h}% - ${(h - 1) / h}rem)`,
-          flexGrow: a.width ? 0 : 1,
-          flexShrink: a.ui !== "radio" || a.width ? 0 : 1,
-          flexWrap: "wrap"
-        }, className: "pb-4", children: [
-          /* @__PURE__ */ o.jsx(R, { className: "mb-2", children: a.label }),
-          a.singleSelect ? a.ui !== "radio" ? /* @__PURE__ */ o.jsx(V, { options: a.availableValues, variant: u, isClearable: a.clearable === void 0 ? !0 : a.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: F(G), onChange: (e) => {
-            x(a.filter, e);
-          }, value: a.value, defaultValue: a.defaultValue }) : /* @__PURE__ */ o.jsx($, { variant: u, defaultValue: a.defaultValue.value, onValueChange: (e) => {
-            x(a.filter, a.availableValues.filter((t) => t.value === e));
-          }, children: a.availableValues.map((e, t) => /* @__PURE__ */ o.jsx(A, { label: `${e.label}`, value: `${e.value}` }, t)) }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-            a.ui !== "radio" ? /* @__PURE__ */ o.jsx(V, { options: a.availableValues, variant: u, size: "sm", isMulti: !0, isClearable: a.clearable === void 0 ? !0 : a.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: F(G), onChange: (e) => {
-              x(a.filter, e);
-            }, value: a.value, defaultValue: a.defaultValue }) : /* @__PURE__ */ o.jsx(K, { variant: u, defaultValue: a.defaultValue ? a.defaultValue.map((e) => `${e.value}`) : [], value: a.value ? a.value.map((e) => `${e.value}`) : void 0, onValueChange: (e) => {
-              x(a.filter, a.availableValues.filter((t) => e.indexOf(`${t.value}`) !== -1));
-            }, children: a.availableValues.map((e, t) => /* @__PURE__ */ o.jsx(Q, { label: `${e.label}`, value: `${e.value}` }, t)) }),
-            a.allowSelectAll ? /* @__PURE__ */ o.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: () => {
-              x(a.filter, a.availableValues);
-            }, children: "Select all options" }) : null
-          ] })
-        ] }, r))
-      ] }) : null,
-      M !== !1 && l?.showColorScale !== !1 ? /* @__PURE__ */ o.jsx(Va, { width: l?.width, colorLegendTitle: l?.colorLegendTitle, colors: l?.colors || l?.lineColors || va[l?.theme || "light"].categoricalColors.colors, colorDomain: l?.colorDomain || l?.labels || [], showNAColor: l?.showNAColor === void 0 || l?.showNAColor === null ? !0 : l?.showNAColor }) : null,
-      /* @__PURE__ */ o.jsx("div", { className: `flex flex-wrap gap-4 justify-center ${l?.language === "ar" || l?.language === "he" ? "flex-row-reverse" : "flex-row"}`, children: b.map((a, r) => /* @__PURE__ */ o.jsx("div", { style: {
-        width: `calc(${100 / (N || Math.min(4, b.length || 0))}% - ${((N || Math.min(4, b.length || 0)) - 1) / (N || Math.min(4, b.length || 0))}rem)`,
-        minWidth: Sa(H) ? "280px" : `${H}px`
-      }, children: /* @__PURE__ */ o.jsx(ha, { graph: k, graphDataConfiguration: p, graphData: ba(D ? wa(Y(g, L || []).filter(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (e) => e[S] === a
-      ), D.keyColumn, D.aggregationColumnsSetting) : Y(g, L || []).filter(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (e) => e[S] === a
-      ), k, p) || [], debugMode: v, settings: {
-        ...l || {},
-        ...c,
-        theme: l?.theme || la,
-        width: void 0,
-        height: void 0,
-        relativeHeight: l?.relativeHeight || 0.67,
-        minHeight: aa,
-        graphTitle: `${a}`,
-        graphDescription: void 0,
-        graphDownload: !1,
-        dataDownload: !1,
-        backgroundColor: void 0,
-        padding: "0",
-        footNote: void 0,
-        sources: void 0,
-        showColorScale: l?.showColorScale === !1 ? !1 : M === !1
-      }, readableHeader: ea || [] }) }, r)) })
-    ] }) : /* @__PURE__ */ o.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ o.jsx(ca, {}) }),
-    l?.sources || l?.footNote ? /* @__PURE__ */ o.jsx(Ia, { styles: {
-      footnote: l?.styles?.footnote,
-      source: l?.styles?.source
-    }, classNames: {
-      footnote: l?.classNames?.footnote,
-      source: l?.classNames?.source
-    }, sources: l?.sources, footNote: l?.footNote, width: l?.width }) : null
-  ] });
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { Colors as n } from "./Colors.js";
+import { t as r } from "./lodash.flattendeep-a__mQ60W.js";
+import { t as i } from "./lodash.intersection-C9QFuAQj.js";
+import { ColorLegend as ee } from "./ColorLegend.js";
+import { GraphFooter as te } from "./GraphFooter.js";
+import { GraphHeader as ne } from "./GraphHeader.js";
+import { n as re } from "./getValues-Bt73vs_w.js";
+import { t as ie } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { a as ae, i as a, o, r as oe, t as se } from "./fetchAndParseData-C50SqMPu.js";
+import { t as s } from "./getUniqValue-DZTOHgt8.js";
+import { t as c } from "./filterData-Dp_HZ71j.js";
+import { n as l, t as ce } from "./transformDataForGraph-DKYRsjv8.js";
+import { t as u } from "./transformDataForSelect-DRC8qPt4.js";
+import { n as le } from "./GraphContainer-DgEB1AVN.js";
+import { t as ue } from "./GraphEl-YjxZ25y6.js";
+import { useCallback as d, useEffect as f, useEffectEvent as p, useMemo as m, useRef as h, useState as g } from "react";
+import { CheckboxGroup as _, CheckboxGroupItem as v } from "@undp/design-system-react/CheckboxGroup";
+import { DropdownSelect as y, createFilter as b } from "@undp/design-system-react/DropdownSelect";
+import { Label as x } from "@undp/design-system-react/Label";
+import { RadioGroup as S, RadioGroupItem as C } from "@undp/design-system-react/RadioGroup";
+import { Spinner as de } from "@undp/design-system-react/Spinner";
+//#region src/Components/Dashboard/GriddedGraphs.tsx
+var w = /* @__PURE__ */ e(r(), 1), fe = /* @__PURE__ */ e(i(), 1), T = t();
+function E(e) {
+	let { graphSettings: t, dataSettings: r, filters: i, graphType: E, dataTransform: D, graphDataConfiguration: O, noOfColumns: k, columnGridBy: A, dataFilters: j, showCommonColorScale: M, minGraphHeight: pe, minGraphWidth: N, debugMode: P, dataSelectionOptions: F, advancedDataSelectionOptions: I, readableHeader: L, noOfFiltersPerRow: R = 4, uiMode: z = "normal", theme: me = "light" } = e, [B, he] = g(void 0), [V, ge] = g(void 0), [H, _e] = g([]), U = h(null), [W, G] = g(O), [K, q] = g([]), [J, Y] = g({}), X = m(() => ({
+		ignoreCase: !0,
+		ignoreAccents: !0,
+		trim: !0
+	}), []), Z = m(() => !V || K.length === 0 ? V : V.filter((e) => K.every((t) => t.value && (0, w.default)([t.value]).length > 0 ? (0, fe.default)((0, w.default)([e[t.filter]]), (0, w.default)([t.value]).map((e) => e.value)).length > 0 : !0)), [K, V]);
+	f(() => {
+		he(Z);
+	}, [Z]);
+	let Q = p(() => {
+		q((i || []).map((e) => ({
+			filter: e.column,
+			label: e.label || `Filter by ${e.column}`,
+			singleSelect: e.singleSelect,
+			clearable: e.clearable,
+			ui: e.ui,
+			defaultValue: u(e.defaultValue),
+			value: u(e.defaultValue),
+			availableValues: s(V, e.column).filter((t) => !e.excludeValues?.includes(`${t}`)).map((e) => ({
+				value: e,
+				label: e
+			})),
+			allowSelectAll: e.allowSelectAll,
+			width: e.width
+		})));
+	});
+	f(() => {
+		(async () => {
+			try {
+				ge(r.dataURL ? typeof r.dataURL == "string" ? r.fileType === "json" ? await oe(r.dataURL, r.columnsToArray, r.dataTransformation, P) : r.fileType === "api" ? await ae(r.dataURL, r.apiHeaders, r.columnsToArray, r.dataTransformation, P) : await se(r.dataURL, r.dataTransformation, r.columnsToArray, P, r.delimiter, !0) : await a(r.dataURL, r.idColumnTitle) : await o(r.data, r.columnsToArray));
+			} catch (e) {
+				console.error("Data fetching error:", e);
+			}
+		})(), Q();
+	}, [r, P]), f(() => {
+		Q();
+	}, [i, V]);
+	let ve = p(() => {
+		_e(s(V, A));
+	});
+	f(() => {
+		ve();
+	}, [A, V]), f(() => {
+		G(O);
+	}, [O]);
+	let $ = d((e, t) => {
+		q((n) => n.map((n) => n.filter === e ? {
+			...n,
+			value: t
+		} : n));
+	}, []);
+	return /* @__PURE__ */ (0, T.jsxs)(le, {
+		className: t?.classNames?.graphContainer,
+		style: t?.styles?.graphContainer,
+		id: t?.graphID,
+		ref: U,
+		"aria-label": t?.ariaLabel || "This is a gridded graph",
+		backgroundColor: t?.backgroundColor ?? !1,
+		theme: t?.theme || "light",
+		language: t?.language || "en",
+		width: t?.width,
+		height: t?.height,
+		padding: t?.padding,
+		children: [
+			J?.graphTitle || J?.graphDescription || t?.graphTitle || t?.graphDescription || t?.graphDownload || t?.dataDownload ? /* @__PURE__ */ (0, T.jsx)(ne, {
+				styles: {
+					title: J?.styles?.title || t?.styles?.title,
+					description: J?.styles?.description || t?.styles?.description
+				},
+				classNames: {
+					title: J?.classNames?.title || t?.classNames?.title,
+					description: J?.classNames?.description || t?.classNames?.description
+				},
+				graphTitle: J?.graphTitle || t?.graphTitle,
+				graphDescription: J?.graphDescription || t?.graphDescription,
+				width: J?.width || t?.width,
+				graphDownload: t?.graphDownload ? U : void 0,
+				dataDownload: t?.dataDownload && B && B.length > 0 ? B : null
+			}) : null,
+			B && H.length > 0 ? /* @__PURE__ */ (0, T.jsxs)(T.Fragment, { children: [
+				K.length !== 0 || (F || []).length !== 0 || (I || []).length !== 0 ? /* @__PURE__ */ (0, T.jsxs)("div", {
+					className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full",
+					children: [
+						I?.map((e, t) => /* @__PURE__ */ (0, T.jsxs)("div", {
+							style: {
+								width: e.width || `calc(${100 / R}% - ${(R - 1) / R}rem)`,
+								flexGrow: +!e.width,
+								flexShrink: e.ui !== "radio" || e.width ? 0 : 1,
+								minWidth: "240px"
+							},
+							className: "pb-4",
+							children: [/* @__PURE__ */ (0, T.jsx)(x, {
+								className: "mb-2",
+								children: e.label || "Graph by"
+							}), e.ui === "radio" ? /* @__PURE__ */ (0, T.jsx)(S, {
+								defaultValue: e.defaultValue?.label || e.options[0].label,
+								variant: z,
+								onValueChange: (t) => {
+									let n = e.options[e.options.findIndex((e) => e.label === t)];
+									Y(n.graphSettings || {}), G(n.dataConfiguration);
+								},
+								children: e.options.map((e) => /* @__PURE__ */ (0, T.jsx)(C, {
+									label: e.label,
+									value: e.label
+								}, e.label))
+							}) : /* @__PURE__ */ (0, T.jsx)(y, {
+								options: e.options.map((e) => ({
+									...e,
+									value: e.label
+								})),
+								isClearable: !1,
+								isSearchable: !0,
+								variant: z,
+								controlShouldRenderValue: !0,
+								defaultValue: e.defaultValue ? {
+									...e.defaultValue,
+									value: e.defaultValue?.label
+								} : {
+									...e.options[0],
+									value: e.options[0].label
+								},
+								onChange: (e) => {
+									Y(e?.graphSettings || {}), G(e?.dataConfiguration);
+								}
+							})]
+						}, t)),
+						F?.map((e, n) => /* @__PURE__ */ (0, T.jsxs)("div", {
+							style: {
+								width: e.width || `calc(${100 / R}% - ${(R - 1) / R}rem)`,
+								flexGrow: +!e.width,
+								flexShrink: e.ui !== "radio" || e.width ? 0 : 1,
+								minWidth: "240px"
+							},
+							className: "pb-4",
+							children: [/* @__PURE__ */ (0, T.jsx)(x, {
+								className: "mb-2",
+								children: e.label || `Visualize ${e.chartConfigId} by`
+							}), re(e.chartConfigId, W || []) ? e.ui === "radio" ? /* @__PURE__ */ (0, T.jsx)(_, {
+								variant: z,
+								defaultValue: O ? O[O.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 = W?.map((e) => e.chartConfigId === n.chartConfigId ? n : e);
+									G(r);
+								},
+								children: e.allowedColumnIds.map((e) => /* @__PURE__ */ (0, T.jsx)(v, {
+									label: e.label,
+									value: e.value
+								}, e.value))
+							}) : /* @__PURE__ */ (0, T.jsx)(y, {
+								options: e.allowedColumnIds,
+								isMulti: !0,
+								variant: z,
+								isSearchable: !0,
+								controlShouldRenderValue: !0,
+								defaultValue: O ? O[O.findIndex((t) => t.chartConfigId === e.chartConfigId)].columnId.map((t) => e.allowedColumnIds[e.allowedColumnIds.findIndex((e) => e.value === t)]) : void 0,
+								filterOption: b(X),
+								onChange: (t) => {
+									let n = {
+										columnId: t.map((e) => e.value),
+										chartConfigId: e.chartConfigId
+									}, r = W?.map((e) => e.chartConfigId === n.chartConfigId ? n : e);
+									G(r);
+								},
+								isRtl: t?.language === "ar" || t?.language === "he"
+							}) : e.ui === "radio" ? /* @__PURE__ */ (0, T.jsx)(S, {
+								variant: z,
+								defaultValue: O ? e.allowedColumnIds[e.allowedColumnIds.findIndex((t) => t.value === O[O.findIndex((t) => t.chartConfigId === e.chartConfigId)].columnId)].label : "",
+								onValueChange: (t) => {
+									let n = e.allowedColumnIds[e.allowedColumnIds.findIndex((e) => e.label === t)], r = {
+										columnId: n.value,
+										chartConfigId: e.chartConfigId
+									}, i = W?.map((e) => e.chartConfigId === r.chartConfigId ? r : e);
+									Y(n.graphSettings || {}), G(i);
+								},
+								children: e.allowedColumnIds.map((e) => /* @__PURE__ */ (0, T.jsx)(C, {
+									label: e.label,
+									value: e.value
+								}, e.value))
+							}) : /* @__PURE__ */ (0, T.jsx)(y, {
+								options: e.allowedColumnIds,
+								isClearable: !1,
+								isSearchable: !0,
+								variant: z,
+								defaultValue: O ? e.allowedColumnIds[e.allowedColumnIds.findIndex((t) => t.value === O[O.findIndex((t) => t.chartConfigId === e.chartConfigId)].columnId)] : void 0,
+								controlShouldRenderValue: !0,
+								onChange: (t) => {
+									let n = {
+										columnId: t?.value,
+										chartConfigId: e.chartConfigId
+									}, r = W?.map((e) => e.chartConfigId === n.chartConfigId ? n : e);
+									Y(t?.graphSettings || {}), G(r);
+								}
+							})]
+						}, n)),
+						K?.map((e, t) => /* @__PURE__ */ (0, T.jsxs)("div", {
+							style: {
+								width: e.width || `calc(${100 / R}% - ${(R - 1) / R}rem)`,
+								flexGrow: +!e.width,
+								flexShrink: e.ui !== "radio" || e.width ? 0 : 1,
+								flexWrap: "wrap"
+							},
+							className: "pb-4",
+							children: [/* @__PURE__ */ (0, T.jsx)(x, {
+								className: "mb-2",
+								children: e.label
+							}), e.singleSelect ? e.ui === "radio" ? /* @__PURE__ */ (0, T.jsx)(S, {
+								variant: z,
+								defaultValue: e.defaultValue.value,
+								onValueChange: (t) => {
+									$(e.filter, e.availableValues.filter((e) => e.value === t));
+								},
+								children: e.availableValues.map((e) => /* @__PURE__ */ (0, T.jsx)(C, {
+									label: `${e.label}`,
+									value: `${e.value}`
+								}, e.value))
+							}) : /* @__PURE__ */ (0, T.jsx)(y, {
+								options: e.availableValues,
+								variant: z,
+								isClearable: e.clearable === void 0 ? !0 : e.clearable,
+								isSearchable: !0,
+								controlShouldRenderValue: !0,
+								filterOption: b(X),
+								onChange: (t) => {
+									$(e.filter, t);
+								},
+								value: e.value,
+								defaultValue: e.defaultValue
+							}) : /* @__PURE__ */ (0, T.jsxs)(T.Fragment, { children: [e.ui === "radio" ? /* @__PURE__ */ (0, T.jsx)(_, {
+								variant: z,
+								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, T.jsx)(v, {
+									label: `${e.label}`,
+									value: `${e.value}`
+								}, e.value))
+							}) : /* @__PURE__ */ (0, T.jsx)(y, {
+								options: e.availableValues,
+								variant: z,
+								size: "sm",
+								isMulti: !0,
+								isClearable: e.clearable === void 0 ? !0 : e.clearable,
+								isSearchable: !0,
+								controlShouldRenderValue: !0,
+								filterOption: b(X),
+								onChange: (t) => {
+									$(e.filter, t);
+								},
+								value: e.value,
+								defaultValue: e.defaultValue
+							}), e.allowSelectAll ? /* @__PURE__ */ (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))
+					]
+				}) : null,
+				M !== !1 && t?.showColorScale !== !1 ? /* @__PURE__ */ (0, T.jsx)(ee, {
+					width: t?.width,
+					colorLegendTitle: t?.colorLegendTitle,
+					colors: t?.colors || t?.lineColors || n[t?.theme || "light"].categoricalColors.colors,
+					colorDomain: t?.colorDomain || t?.labels || [],
+					showNAColor: t?.showNAColor === void 0 || t?.showNAColor === null ? !0 : t?.showNAColor
+				}) : null,
+				/* @__PURE__ */ (0, T.jsx)("div", {
+					className: `flex flex-wrap gap-4 justify-center ${t?.language === "ar" || t?.language === "he" ? "flex-row-reverse" : "flex-row"}`,
+					children: H.map((e) => /* @__PURE__ */ (0, T.jsx)("div", {
+						style: {
+							width: `calc(${100 / (k || Math.min(4, H.length || 0))}% - ${((k || Math.min(4, H.length || 0)) - 1) / (k || Math.min(4, H.length || 0))}rem)`,
+							minWidth: ie(N) ? "280px" : `${N}px`
+						},
+						children: /* @__PURE__ */ (0, T.jsx)(ue, {
+							graph: E,
+							graphDataConfiguration: W,
+							graphData: ce(D ? l(c(B, j || []).filter((t) => t[A] === e), D.keyColumn, D.aggregationColumnsSetting) : c(B, j || []).filter((t) => t[A] === e), E, W) || [],
+							debugMode: P,
+							settings: {
+								...t || {},
+								...J,
+								theme: t?.theme || me,
+								width: void 0,
+								height: void 0,
+								relativeHeight: t?.relativeHeight || .67,
+								minHeight: pe,
+								graphTitle: `${e}`,
+								graphDescription: void 0,
+								graphDownload: !1,
+								dataDownload: !1,
+								backgroundColor: void 0,
+								padding: "0",
+								footNote: void 0,
+								sources: void 0,
+								showColorScale: t?.showColorScale === !1 ? !1 : M === !1
+							},
+							readableHeader: L || []
+						})
+					}, e))
+				})
+			] }) : /* @__PURE__ */ (0, T.jsx)("div", {
+				className: "w-full flex justify-center p-4",
+				children: /* @__PURE__ */ (0, T.jsx)(de, {})
+			}),
+			t?.sources || t?.footNote ? /* @__PURE__ */ (0, T.jsx)(te, {
+				styles: {
+					footnote: t?.styles?.footnote,
+					source: t?.styles?.source
+				},
+				classNames: {
+					footnote: t?.classNames?.footnote,
+					source: t?.classNames?.source
+				},
+				sources: t?.sources,
+				footNote: t?.footNote,
+				width: t?.width
+			}) : null
+		]
+	});
 }
-export {
-  Ka as GriddedGraphs
-};
-//# sourceMappingURL=GriddedGraphs.js.map
+//#endregion
+export { E as GriddedGraphs };
+
+//# sourceMappingURL=GriddedGraphs.js.map