@undp/data-viz 1.5.8 → 2.0.0

package/dist/GriddedGraphs.js

@@ -1,95 +1,69 @@
-import { j as o } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useState as m, useRef as oa, useMemo as q, useEffect as T, useCallback as z } from "react";
-import { i as ra } from "./index-V_JXij1_.js";
-import { f as G } from "./index-EArKRVKg.js";
-import { f as $, a as B, v as J, c as na, w as ia, G as sa } from "./checkIfMultiple-ChTJk2Tk.js";
-import { y as da } from "./Spinner-C85UF28E.js";
-import { Z as x, H as A } from "./DropdownSelect-CtOKZHD0.js";
-import { G as ca } from "./GraphEl-CqWzvOyr.js";
-import { f as ua, a as ha, b as ga, c as fa, t as pa } from "./fetchAndParseData-sapWbnYk.js";
-import { Colors as ma } from "./Colors.js";
-import { a as Ca, t as wa } from "./transformDataForAggregation-sBpdlX8n.js";
-import { g as K } from "./getUniqValue-DiCh_MOD.js";
-import { GraphHeader as ba } from "./GraphHeader.js";
-import { GraphFooter as xa } from "./GraphFooter.js";
-import { f as Q } from "./filterData-9nEcQ-Jp.js";
+import { j as o } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as m, useRef as oa, useMemo as q, useEffect as G, useCallback as z } from "react";
+import { i as ra } from "./index-BuwmuDFJ.js";
+import { f as T } from "./index-EArKRVKg.js";
+import { b as A, y as B, h as J, c as na, $ as ia, P as sa } from "./checkIfMultiple-Y9iKaV_u.js";
+import { w as da } from "./Spinner-D7rnnwnA.js";
+import { j as x, D as R } from "./DropdownSelect-BbdPQa2k.js";
+import { G as ca } from "./GraphContainer-CRqzdKu2.js";
+import { G as ua } from "./GraphEl-DzRon4cb.js";
+import { f as ha, a as fa, b as ga, c as pa, t as ma } from "./fetchAndParseData-BpqkBPQL.js";
+import { Colors as Ca } from "./Colors.js";
+import { a as wa, t as ba } from "./transformDataForAggregation-CE3bAlHU.js";
+import { g as K } from "./getUniqValue-BKHCm3zE.js";
+import { GraphHeader as xa } from "./GraphHeader.js";
+import { GraphFooter as Ia } from "./GraphFooter.js";
+import { f as Q } from "./filterData-DsAiFzKY.js";
 import { ColorLegend as va } from "./ColorLegend.js";
-import { c as Ia } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { c as Sa } from "./checkIfNullOrUndefined-DmfiKkNw.js";
 import { t as X } from "./transformDataForSelect-D8AuvYdf.js";
-function Wa(Y) {
+function Ea(Y) {
   const {
-    graphSettings: e,
+    graphSettings: l,
     dataSettings: n,
-    filters: k,
-    graphType: R,
-    dataTransform: j,
+    filters: F,
+    graphType: $,
+    dataTransform: D,
     graphDataConfiguration: s,
-    noOfColumns: D,
-    columnGridBy: v,
-    dataFilters: F,
-    showCommonColorScale: O,
-    minGraphHeight: _,
-    minGraphWidth: H,
+    noOfColumns: j,
+    columnGridBy: I,
+    dataFilters: O,
+    showCommonColorScale: k,
+    minGraphHeight: Z,
+    minGraphWidth: L,
     debugMode: C,
-    dataSelectionOptions: L,
-    advancedDataSelectionOptions: M,
-    readableHeader: aa,
+    dataSelectionOptions: M,
+    advancedDataSelectionOptions: H,
+    readableHeader: _,
     noOfFiltersPerRow: u = 4,
     uiMode: h = "normal",
-    theme: U = "light"
-  } = Y, [p, ea] = m(void 0), [I, la] = m(void 0), [w, ta] = m([]), W = oa(null), [g, f] = m(
-    s
-  ), [b, P] = m([]), [c, y] = m({}), V = q(
-    () => ({
-      ignoreCase: !0,
-      ignoreAccents: !0,
-      trim: !0
-    }),
-    []
-  ), E = q(() => !I || b.length === 0 ? I : I.filter(
-    (d) => b.every(
-      (l) => l.value && G([l.value]).length > 0 ? ra(
-        G([d[l.filter]]),
-        G([l.value]).map((t) => t.value)
-      ).length > 0 : !0
-    )
-  ), [b, I]);
-  T(() => {
-    ea(E);
-  }, [E]);
-  const Z = z(async () => {
+    theme: aa = "light"
+  } = Y, [p, ea] = m(void 0), [v, la] = m(void 0), [w, ta] = m([]), U = oa(null), [f, g] = m(s), [b, P] = m([]), [c, S] = m({}), V = q(() => ({
+    ignoreCase: !0,
+    ignoreAccents: !0,
+    trim: !0
+  }), []), W = q(() => !v || b.length === 0 ? v : v.filter((d) => b.every((e) => e.value && T([e.value]).length > 0 ? ra(T([d[e.filter]]), T([e.value]).map((t) => t.value)).length > 0 : !0)), [b, v]);
+  G(() => {
+    ea(W);
+  }, [W]);
+  const E = z(async () => {
     if (n)
       try {
-        const d = await (n.dataURL ? typeof n.dataURL == "string" ? n.fileType === "json" ? ua(
-          n.dataURL,
-          n.columnsToArray,
-          n.dataTransformation,
-          C
-        ) : n.fileType === "api" ? ha(
-          n.dataURL,
-          n.apiHeaders,
-          n.columnsToArray,
-          n.dataTransformation,
-          C
-        ) : ga(
-          n.dataURL,
-          n.dataTransformation,
-          n.columnsToArray,
-          C,
-          n.delimiter,
-          !0
-        ) : fa(n.dataURL, n.idColumnTitle) : pa(n.data, n.columnsToArray));
+        const d = await (n.dataURL ? typeof n.dataURL == "string" ? n.fileType === "json" ? ha(n.dataURL, n.columnsToArray, n.dataTransformation, C) : n.fileType === "api" ? fa(n.dataURL, n.apiHeaders, n.columnsToArray, n.dataTransformation, C) : ga(n.dataURL, n.dataTransformation, n.columnsToArray, C, n.delimiter, !0) : pa(n.dataURL, n.idColumnTitle) : ma(n.data, n.columnsToArray));
         la(d);
-        const l = K(d, v);
-        ta(l);
-        const t = (k || []).map((r) => ({
+        const e = K(d, I);
+        ta(e);
+        const t = (F || []).map((r) => ({
           filter: r.column,
           label: r.label || `Filter by ${r.column}`,
           singleSelect: r.singleSelect,
           clearable: r.clearable,
           defaultValue: X(r.defaultValue),
           value: X(r.defaultValue),
-          availableValues: K(d, r.column).filter((i) => !r.excludeValues?.includes(`${i}`)).map((i) => ({ value: i, label: i })),
+          availableValues: K(d, r.column).filter((i) => !r.excludeValues?.includes(`${i}`)).map((i) => ({
+            value: i,
+            label: i
+          })),
           allowSelectAll: r.allowSelectAll,
           width: r.width
         }));
@@ -97,388 +71,180 @@ function Wa(Y) {
       } catch (a) {
         console.error("Data fetching error:", a);
       }
-  }, [n, C, v, k]);
-  T(() => {
-    Z();
-  }, [Z]), T(() => {
-    f(s);
+  }, [n, C, I, F]);
+  G(() => {
+    E();
+  }, [E]), G(() => {
+    g(s);
   }, [s]);
   const N = z((a, d) => {
-    P((l) => l.map((t) => t.filter === a ? { ...t, value: d } : t));
+    P((e) => e.map((t) => t.filter === a ? {
+      ...t,
+      value: d
+    } : t));
   }, []);
-  return /* @__PURE__ */ o.jsx(
-    "div",
-    {
-      className: `${U || e?.theme || "light"} flex  ${e?.width ? "w-fit grow-0" : "w-full grow"}`,
-      dir: e?.language === "he" || e?.language === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ o.jsx(
-        "div",
-        {
-          className: `${e?.backgroundColor ? e?.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${e?.language || "en"}`,
-          style: {
-            ...e?.backgroundColor && e?.backgroundColor !== !0 ? { backgroundColor: e?.backgroundColor } : {}
-          },
-          id: e?.graphID,
-          ref: W,
-          "aria-label": e?.ariaLabel || `${e?.graphTitle ? `The graph shows ${e?.graphTitle}. ` : ""}This is a gridded chart.${e?.graphDescription ? ` ${e?.graphDescription}` : ""}`,
-          children: /* @__PURE__ */ o.jsx(
-            "div",
+  return /* @__PURE__ */ o.jsxs(ca, { className: l?.classNames?.graphContainer, style: l?.styles?.graphContainer, id: l?.graphID, ref: U, "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 ? U : void 0, dataDownload: l?.dataDownload && p && p.length > 0 ? p : null }) : null,
+    p && w.length > 0 ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      b.length !== 0 || (M || []).length !== 0 || (H || []).length !== 0 ? /* @__PURE__ */ o.jsxs("div", { className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full", children: [
+        H?.map((a, d) => /* @__PURE__ */ o.jsxs("div", { style: {
+          width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+          flexGrow: 1,
+          flexShrink: a.ui !== "radio" ? 0 : 1,
+          minWidth: "240px"
+        }, className: "pb-4", children: [
+          /* @__PURE__ */ o.jsx(A, { className: "mb-2", children: a.label || "Graph by" }),
+          a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+            x,
             {
-              style: {
-                padding: e?.backgroundColor ? e?.padding || "1rem" : e?.padding || 0,
-                flexGrow: 1,
-                display: "flex"
+              options: a.options.map((e) => ({
+                ...e,
+                value: e.label
+              })),
+              isClearable: !1,
+              isSearchable: !0,
+              variant: h,
+              controlShouldRenderValue: !0,
+              defaultValue: a.defaultValue ? {
+                ...a.defaultValue,
+                value: a.defaultValue?.label
+              } : {
+                ...a.options[0],
+                value: a.options[0].label
               },
-              children: /* @__PURE__ */ o.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                c?.graphTitle || c?.graphDescription || e?.graphTitle || e?.graphDescription || e?.graphDownload || e?.dataDownload ? /* @__PURE__ */ o.jsx(
-                  ba,
-                  {
-                    styles: {
-                      title: c?.styles?.title || e?.styles?.title,
-                      description: c?.styles?.description || e?.styles?.description
-                    },
-                    classNames: {
-                      title: c?.classNames?.title || e?.classNames?.title,
-                      description: c?.classNames?.description || e?.classNames?.description
-                    },
-                    graphTitle: c?.graphTitle || e?.graphTitle,
-                    graphDescription: c?.graphDescription || e?.graphDescription,
-                    width: c?.width || e?.width,
-                    graphDownload: e?.graphDownload ? W.current : void 0,
-                    dataDownload: e?.dataDownload && p && p.length > 0 ? p : null
-                  }
-                ) : null,
-                p && w.length > 0 ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                  b.length !== 0 || (L || []).length !== 0 || (M || []).length !== 0 ? /* @__PURE__ */ o.jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        gap: "1rem",
-                        flexWrap: "wrap",
-                        alignItems: "flex-start",
-                        width: "100%"
-                      },
-                      children: [
-                        M?.map((a, d) => /* @__PURE__ */ o.jsxs(
-                          "div",
-                          {
-                            style: {
-                              width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
-                              flexGrow: 1,
-                              flexShrink: a.ui !== "radio" ? 0 : 1,
-                              minWidth: "240px"
-                            },
-                            children: [
-                              /* @__PURE__ */ o.jsx($, { className: "mb-2", children: a.label || "Graph by" }),
-                              a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-                                x,
-                                {
-                                  options: a.options.map((l) => ({
-                                    ...l,
-                                    value: l.label
-                                  })),
-                                  isClearable: !1,
-                                  isSearchable: !0,
-                                  variant: h,
-                                  controlShouldRenderValue: !0,
-                                  defaultValue: a.defaultValue ? {
-                                    ...a.defaultValue,
-                                    value: a.defaultValue?.label
-                                  } : {
-                                    ...a.options[0],
-                                    value: a.options[0].label
-                                  },
-                                  onChange: (l) => {
-                                    y(l?.graphSettings || {}), f(l?.dataConfiguration);
-                                  }
-                                }
-                              ) : /* @__PURE__ */ o.jsx(
-                                B,
-                                {
-                                  defaultValue: a.defaultValue?.label || a.options[0].label,
-                                  variant: h,
-                                  onValueChange: (l) => {
-                                    const t = a.options[a.options.findIndex((r) => r.label === l)];
-                                    y(t.graphSettings || {}), f(t.dataConfiguration);
-                                  },
-                                  children: a.options.map((l, t) => /* @__PURE__ */ o.jsx(J, { label: l.label, value: l.label }, t))
-                                }
-                              )
-                            ]
-                          },
-                          d
-                        )),
-                        L?.map((a, d) => /* @__PURE__ */ o.jsxs(
-                          "div",
-                          {
-                            style: {
-                              width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
-                              flexGrow: 1,
-                              flexShrink: a.ui !== "radio" ? 0 : 1,
-                              minWidth: "240px"
-                            },
-                            children: [
-                              /* @__PURE__ */ o.jsx($, { className: "mb-2", children: a.label || `Visualize ${a.chartConfigId} by` }),
-                              na(a.chartConfigId, g || []) ? a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-                                x,
-                                {
-                                  options: a.allowedColumnIds,
-                                  isMulti: !0,
-                                  variant: h,
-                                  isSearchable: !0,
-                                  controlShouldRenderValue: !0,
-                                  defaultValue: s ? s[s.findIndex(
-                                    (l) => l.chartConfigId === a.chartConfigId
-                                  )].columnId.map(
-                                    (l) => a.allowedColumnIds[a.allowedColumnIds.findIndex((t) => t.value === l)]
-                                  ) : void 0,
-                                  filterOption: A(V),
-                                  onChange: (l) => {
-                                    const t = {
-                                      columnId: l.map(
-                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                        (i) => i.value
-                                      ),
-                                      chartConfigId: a.chartConfigId
-                                    }, r = g?.map(
-                                      (i) => i.chartConfigId === t.chartConfigId ? t : i
-                                    );
-                                    f(r);
-                                  },
-                                  isRtl: e?.language === "ar" || e?.language === "he"
-                                }
-                              ) : /* @__PURE__ */ o.jsx(
-                                ia,
-                                {
-                                  variant: h,
-                                  defaultValue: s ? s[s.findIndex(
-                                    (l) => l.chartConfigId === a.chartConfigId
-                                  )].columnId.map(
-                                    (l) => a.allowedColumnIds[a.allowedColumnIds.findIndex((t) => t.value === l)]
-                                  ).map((l) => l.value) : [],
-                                  onValueChange: (l) => {
-                                    const t = {
-                                      columnId: l || [],
-                                      chartConfigId: a.chartConfigId
-                                    }, r = g?.map(
-                                      (i) => i.chartConfigId === t.chartConfigId ? t : i
-                                    );
-                                    f(r);
-                                  },
-                                  children: a.allowedColumnIds.map((l, t) => /* @__PURE__ */ o.jsx(sa, { label: l.label, value: l.label }, t))
-                                }
-                              ) : a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-                                x,
-                                {
-                                  options: a.allowedColumnIds,
-                                  isClearable: !1,
-                                  isSearchable: !0,
-                                  variant: h,
-                                  defaultValue: s ? a.allowedColumnIds[a.allowedColumnIds.findIndex(
-                                    (l) => l.value === s[s.findIndex(
-                                      (t) => t.chartConfigId === a.chartConfigId
-                                    )].columnId
-                                  )] : void 0,
-                                  controlShouldRenderValue: !0,
-                                  onChange: (l) => {
-                                    const t = {
-                                      columnId: l?.value,
-                                      chartConfigId: a.chartConfigId
-                                    }, r = g?.map(
-                                      (i) => i.chartConfigId === t.chartConfigId ? t : i
-                                    );
-                                    y(l?.graphSettings || {}), f(r);
-                                  }
-                                }
-                              ) : /* @__PURE__ */ o.jsx(
-                                B,
-                                {
-                                  variant: h,
-                                  defaultValue: s ? a.allowedColumnIds[a.allowedColumnIds.findIndex(
-                                    (l) => l.value === s[s.findIndex(
-                                      (t) => t.chartConfigId === a.chartConfigId
-                                    )].columnId
-                                  )].label : "",
-                                  onValueChange: (l) => {
-                                    const t = a.allowedColumnIds[a.allowedColumnIds.findIndex((S) => S.label === l)], r = {
-                                      columnId: t.value,
-                                      chartConfigId: a.chartConfigId
-                                    }, i = g?.map(
-                                      (S) => S.chartConfigId === r.chartConfigId ? r : S
-                                    );
-                                    y(t.graphSettings || {}), f(i);
-                                  },
-                                  children: a.allowedColumnIds.map((l, t) => /* @__PURE__ */ o.jsx(J, { label: l.label, value: l.label }, t))
-                                }
-                              )
-                            ]
-                          },
-                          d
-                        )),
-                        b?.map((a, d) => /* @__PURE__ */ o.jsxs(
-                          "div",
-                          {
-                            style: {
-                              width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
-                              flexGrow: 1,
-                              flexShrink: 0,
-                              flexWrap: "wrap"
-                            },
-                            children: [
-                              /* @__PURE__ */ o.jsx($, { className: "mb-2", children: a.label }),
-                              a.singleSelect ? /* @__PURE__ */ o.jsx(
-                                x,
-                                {
-                                  variant: h,
-                                  options: a.availableValues,
-                                  isClearable: a.clearable === void 0 ? !0 : a.clearable,
-                                  isRtl: e?.language === "ar" || e?.language === "he",
-                                  isSearchable: !0,
-                                  controlShouldRenderValue: !0,
-                                  filterOption: A(V),
-                                  onChange: (l) => {
-                                    N(a.filter, l);
-                                  },
-                                  defaultValue: a.defaultValue
-                                }
-                              ) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                                /* @__PURE__ */ o.jsx(
-                                  x,
-                                  {
-                                    variant: h,
-                                    options: a.availableValues,
-                                    isMulti: !0,
-                                    isClearable: a.clearable === void 0 ? !0 : a.clearable,
-                                    isSearchable: !0,
-                                    controlShouldRenderValue: !0,
-                                    filterOption: A(V),
-                                    onChange: (l) => {
-                                      N(a.filter, l);
-                                    },
-                                    defaultValue: a.defaultValue,
-                                    isRtl: e?.language === "ar" || e?.language === "he"
-                                  }
-                                ),
-                                a.allowSelectAll ? /* @__PURE__ */ o.jsx(
-                                  "button",
-                                  {
-                                    className: "bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400",
-                                    type: "button",
-                                    onClick: () => {
-                                      N(a.filter, a.availableValues);
-                                    },
-                                    children: "Select all options"
-                                  }
-                                ) : null
-                              ] })
-                            ]
-                          },
-                          d
-                        ))
-                      ]
-                    }
-                  ) : null,
-                  O !== !1 && e?.showColorScale !== !1 ? /* @__PURE__ */ o.jsx(
-                    va,
-                    {
-                      width: e?.width,
-                      colorLegendTitle: e?.colorLegendTitle,
-                      colors: e?.colors || e?.lineColors || ma[e?.theme || "light"].categoricalColors.colors,
-                      colorDomain: e?.colorDomain || e?.labels || [],
-                      showNAColor: e?.showNAColor === void 0 || e?.showNAColor === null ? !0 : e?.showNAColor
-                    }
-                  ) : null,
-                  /* @__PURE__ */ o.jsx(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        flexWrap: "wrap",
-                        gap: "1rem",
-                        flexDirection: e?.language === "ar" || e?.language === "he" ? "row-reverse" : "row",
-                        justifyContent: "center"
-                      },
-                      children: w.map((a, d) => /* @__PURE__ */ o.jsx(
-                        "div",
-                        {
-                          style: {
-                            width: `calc(${100 / (D || Math.min(4, w.length || 0))}% - ${((D || Math.min(4, w.length || 0)) - 1) / (D || Math.min(4, w.length || 0))}rem)`,
-                            minWidth: Ia(H) ? "280px" : `${H}px`
-                          },
-                          children: /* @__PURE__ */ o.jsx(
-                            ca,
-                            {
-                              graph: R,
-                              graphDataConfiguration: g,
-                              graphData: Ca(
-                                j ? wa(
-                                  Q(p, F || []).filter(
-                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    (l) => l[v] === a
-                                  ),
-                                  j.keyColumn,
-                                  j.aggregationColumnsSetting
-                                ) : Q(p, F || []).filter(
-                                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                  (l) => l[v] === a
-                                ),
-                                R,
-                                g
-                              ) || [],
-                              debugMode: C,
-                              settings: {
-                                ...e || {},
-                                ...c,
-                                theme: e?.theme || U,
-                                width: void 0,
-                                height: void 0,
-                                relativeHeight: e?.relativeHeight || 0.67,
-                                minHeight: _,
-                                graphTitle: `${a}`,
-                                graphDescription: void 0,
-                                graphDownload: !1,
-                                dataDownload: !1,
-                                backgroundColor: void 0,
-                                padding: "0",
-                                footNote: void 0,
-                                sources: void 0,
-                                showColorScale: e?.showColorScale === !1 ? !1 : O === !1
-                              },
-                              readableHeader: aa || []
-                            }
-                          )
-                        },
-                        d
-                      ))
-                    }
-                  )
-                ] }) : /* @__PURE__ */ o.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ o.jsx(da, {}) }),
-                e?.sources || e?.footNote ? /* @__PURE__ */ o.jsx(
-                  xa,
-                  {
-                    styles: {
-                      footnote: e?.styles?.footnote,
-                      source: e?.styles?.source
-                    },
-                    classNames: {
-                      footnote: e?.classNames?.footnote,
-                      source: e?.classNames?.source
-                    },
-                    sources: e?.sources,
-                    footNote: e?.footNote,
-                    width: e?.width
-                  }
-                ) : null
-              ] })
+              onChange: (e) => {
+                S(e?.graphSettings || {}), g(e?.dataConfiguration);
+              }
             }
-          )
-        }
-      )
-    }
-  );
+          ) : /* @__PURE__ */ o.jsx(B, { defaultValue: a.defaultValue?.label || a.options[0].label, variant: h, onValueChange: (e) => {
+            const t = a.options[a.options.findIndex((r) => r.label === e)];
+            S(t.graphSettings || {}), g(t.dataConfiguration);
+          }, children: a.options.map((e, t) => /* @__PURE__ */ o.jsx(J, { label: e.label, value: e.label }, t)) })
+        ] }, d)),
+        M?.map((a, d) => /* @__PURE__ */ o.jsxs("div", { style: {
+          width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+          flexGrow: 1,
+          flexShrink: a.ui !== "radio" ? 0 : 1,
+          minWidth: "240px"
+        }, className: "pb-4", children: [
+          /* @__PURE__ */ o.jsx(A, { className: "mb-2", children: a.label || `Visualize ${a.chartConfigId} by` }),
+          na(a.chartConfigId, f || []) ? a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+            x,
+            {
+              options: a.allowedColumnIds,
+              isMulti: !0,
+              variant: h,
+              isSearchable: !0,
+              controlShouldRenderValue: !0,
+              defaultValue: s ? s[s.findIndex((e) => e.chartConfigId === a.chartConfigId)].columnId.map((e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((t) => t.value === e)]) : void 0,
+              filterOption: R(V),
+              onChange: (e) => {
+                const t = {
+                  columnId: e.map(
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    (i) => i.value
+                  ),
+                  chartConfigId: a.chartConfigId
+                }, r = f?.map((i) => i.chartConfigId === t.chartConfigId ? t : i);
+                g(r);
+              },
+              isRtl: l?.language === "ar" || l?.language === "he"
+            }
+          ) : /* @__PURE__ */ o.jsx(ia, { variant: h, defaultValue: s ? s[s.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
+            }, r = f?.map((i) => i.chartConfigId === t.chartConfigId ? t : i);
+            g(r);
+          }, children: a.allowedColumnIds.map((e, t) => /* @__PURE__ */ o.jsx(sa, { label: e.label, value: e.label }, t)) }) : a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+            x,
+            {
+              options: a.allowedColumnIds,
+              isClearable: !1,
+              isSearchable: !0,
+              variant: h,
+              defaultValue: s ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === s[s.findIndex((t) => t.chartConfigId === a.chartConfigId)].columnId)] : void 0,
+              controlShouldRenderValue: !0,
+              onChange: (e) => {
+                const t = {
+                  columnId: e?.value,
+                  chartConfigId: a.chartConfigId
+                }, r = f?.map((i) => i.chartConfigId === t.chartConfigId ? t : i);
+                S(e?.graphSettings || {}), g(r);
+              }
+            }
+          ) : /* @__PURE__ */ o.jsx(B, { variant: h, defaultValue: s ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === s[s.findIndex((t) => t.chartConfigId === a.chartConfigId)].columnId)].label : "", onValueChange: (e) => {
+            const t = a.allowedColumnIds[a.allowedColumnIds.findIndex((y) => y.label === e)], r = {
+              columnId: t.value,
+              chartConfigId: a.chartConfigId
+            }, i = f?.map((y) => y.chartConfigId === r.chartConfigId ? r : y);
+            S(t.graphSettings || {}), g(i);
+          }, children: a.allowedColumnIds.map((e, t) => /* @__PURE__ */ o.jsx(J, { label: e.label, value: e.label }, t)) })
+        ] }, d)),
+        b?.map((a, d) => /* @__PURE__ */ o.jsxs("div", { style: {
+          width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+          flexGrow: 1,
+          flexShrink: 0,
+          flexWrap: "wrap"
+        }, className: "pb-4", children: [
+          /* @__PURE__ */ o.jsx(A, { className: "mb-2", children: a.label }),
+          a.singleSelect ? /* @__PURE__ */ o.jsx(x, { variant: h, options: a.availableValues, isClearable: a.clearable === void 0 ? !0 : a.clearable, isRtl: l?.language === "ar" || l?.language === "he", isSearchable: !0, controlShouldRenderValue: !0, filterOption: R(V), onChange: (e) => {
+            N(a.filter, e);
+          }, defaultValue: a.defaultValue }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+            /* @__PURE__ */ o.jsx(x, { variant: h, options: a.availableValues, isMulti: !0, isClearable: a.clearable === void 0 ? !0 : a.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: R(V), onChange: (e) => {
+              N(a.filter, e);
+            }, defaultValue: a.defaultValue, isRtl: l?.language === "ar" || l?.language === "he" }),
+            a.allowSelectAll ? /* @__PURE__ */ o.jsx("button", { className: "bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400", type: "button", onClick: () => {
+              N(a.filter, a.availableValues);
+            }, children: "Select all options" }) : null
+          ] })
+        ] }, d))
+      ] }) : null,
+      k !== !1 && l?.showColorScale !== !1 ? /* @__PURE__ */ o.jsx(va, { width: l?.width, colorLegendTitle: l?.colorLegendTitle, colors: l?.colors || l?.lineColors || Ca[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: w.map((a, d) => /* @__PURE__ */ o.jsx("div", { style: {
+        width: `calc(${100 / (j || Math.min(4, w.length || 0))}% - ${((j || Math.min(4, w.length || 0)) - 1) / (j || Math.min(4, w.length || 0))}rem)`,
+        minWidth: Sa(L) ? "280px" : `${L}px`
+      }, children: /* @__PURE__ */ o.jsx(ua, { graph: $, graphDataConfiguration: f, graphData: wa(D ? ba(Q(p, O || []).filter(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (e) => e[I] === a
+      ), D.keyColumn, D.aggregationColumnsSetting) : Q(p, O || []).filter(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (e) => e[I] === a
+      ), $, f) || [], debugMode: C, settings: {
+        ...l || {},
+        ...c,
+        theme: l?.theme || aa,
+        width: void 0,
+        height: void 0,
+        relativeHeight: l?.relativeHeight || 0.67,
+        minHeight: Z,
+        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 : k === !1
+      }, readableHeader: _ || [] }) }, d)) })
+    ] }) : /* @__PURE__ */ o.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ o.jsx(da, {}) }),
+    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
+  ] });
 }
 export {
-  Wa as GriddedGraphs
+  Ea as GriddedGraphs
 };
 //# sourceMappingURL=GriddedGraphs.js.map