@undp/data-viz 2.0.7 → 2.0.9

package/dist/GriddedGraphs.js

@@ -1,107 +1,115 @@
 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 { 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 { b as A, y as B, h as J, c as na, $ as ia, P as sa } from "./checkIfMultiple-Y9iKaV_u.js";
+import { b as $, y as A, h as F, c as ca, $ as K, P as Q } 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-CGq1EWRn.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-CjwEAUOR.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 Sa } from "./checkIfNullOrUndefined-DmfiKkNw.js";
-import { t as X } from "./transformDataForSelect-D8AuvYdf.js";
-function Ea(Y) {
+import { j as V, D as O } from "./DropdownSelect-BbdPQa2k.js";
+import { G as ha } from "./GraphContainer-CRqzdKu2.js";
+import { G as fa } from "./GraphEl-CGq1EWRn.js";
+import { f as pa, a as ga, b as ma, c as Ca, t as va } from "./fetchAndParseData-BpqkBPQL.js";
+import { Colors as ba } from "./Colors.js";
+import { a as wa, t as xa } from "./transformDataForAggregation-DEU__LUl.js";
+import { g as X } from "./getUniqValue-DsqSii6M.js";
+import { GraphHeader as Ia } from "./GraphHeader.js";
+import { GraphFooter as Va } from "./GraphFooter.js";
+import { f as Y } from "./filterData-DsAiFzKY.js";
+import { ColorLegend as Sa } from "./ColorLegend.js";
+import { c as ja } from "./checkIfNullOrUndefined-DmfiKkNw.js";
+import { t as Z } from "./transformDataForSelect-D8AuvYdf.js";
+function qa(_) {
   const {
     graphSettings: l,
-    dataSettings: n,
-    filters: F,
-    graphType: $,
+    dataSettings: i,
+    filters: R,
+    graphType: k,
     dataTransform: D,
-    graphDataConfiguration: s,
-    noOfColumns: j,
-    columnGridBy: I,
-    dataFilters: O,
-    showCommonColorScale: k,
-    minGraphHeight: Z,
-    minGraphWidth: L,
-    debugMode: C,
-    dataSelectionOptions: M,
-    advancedDataSelectionOptions: H,
-    readableHeader: _,
-    noOfFiltersPerRow: u = 4,
-    uiMode: h = "normal",
-    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(() => ({
+    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"
+  } = _, [m, ta] = C(void 0), [f, oa] = C(void 0), [b, ra] = C([]), P = na(null), [p, g] = C(n), [w, W] = C([]), [c, j] = C({}), G = B(() => ({
     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)
+  }), []), 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 = (R || []).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 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 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
-          })),
-          allowSelectAll: r.allowSelectAll,
-          width: r.width
-        }));
-        P(t);
-      } catch (a) {
-        console.error("Data fetching error:", a);
+        const r = i.dataURL ? typeof i.dataURL == "string" ? i.fileType === "json" ? await pa(i.dataURL, i.columnsToArray, i.dataTransformation, v) : i.fileType === "api" ? await ga(i.dataURL, i.apiHeaders, i.columnsToArray, i.dataTransformation, v) : await ma(i.dataURL, i.dataTransformation, i.columnsToArray, v, i.delimiter, !0) : await Ca(i.dataURL, i.idColumnTitle) : await va(i.data, i.columnsToArray);
+        oa(r);
+      } catch (r) {
+        console.error("Data fetching error:", r);
       }
-  }, [n, C, I, F]);
-  G(() => {
-    E();
-  }, [E]), G(() => {
-    g(s);
-  }, [s]);
-  const N = z((a, d) => {
-    P((e) => e.map((t) => t.filter === a ? {
+    })(), q();
+  }, [i, v]), I(() => {
+    q();
+  }, [R, f]);
+  const ia = J(() => {
+    const a = X(f, S);
+    ra(a);
+  });
+  I(() => {
+    ia();
+  }, [S, f]), I(() => {
+    g(n);
+  }, [n]);
+  const x = sa((a, r) => {
+    W((e) => e.map((t) => t.filter === a ? {
       ...t,
-      value: d
+      value: r
     } : t));
   }, []);
-  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: {
+  return /* @__PURE__ */ o.jsxs(ha, { 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(Ia, { 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)`,
+    }, graphTitle: c?.graphTitle || l?.graphTitle, graphDescription: c?.graphDescription || l?.graphDescription, width: c?.width || l?.width, graphDownload: l?.graphDownload ? P : void 0, dataDownload: l?.dataDownload && m && m.length > 0 ? m : null }) : null,
+    m && 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: 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" }),
+          /* @__PURE__ */ o.jsx($, { className: "mb-2", children: a.label || "Graph by" }),
           a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-            x,
+            V,
             {
               options: a.options.map((e) => ({
                 ...e,
@@ -109,7 +117,7 @@ function Ea(Y) {
               })),
               isClearable: !1,
               isSearchable: !0,
-              variant: h,
+              variant: u,
               controlShouldRenderValue: !0,
               defaultValue: a.defaultValue ? {
                 ...a.defaultValue,
@@ -119,111 +127,115 @@ function Ea(Y) {
                 value: a.options[0].label
               },
               onChange: (e) => {
-                S(e?.graphSettings || {}), g(e?.dataConfiguration);
+                j(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)`,
+          ) : /* @__PURE__ */ o.jsx(A, { 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 || {}), g(t.dataConfiguration);
+          }, children: a.options.map((e, t) => /* @__PURE__ */ o.jsx(F, { 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: 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,
+          /* @__PURE__ */ o.jsx($, { className: "mb-2", children: a.label || `Visualize ${a.chartConfigId} by` }),
+          ca(a.chartConfigId, p || []) ? a.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+            V,
             {
               options: a.allowedColumnIds,
               isMulti: !0,
-              variant: h,
+              variant: u,
               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),
+              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: O(G),
               onChange: (e) => {
                 const t = {
                   columnId: e.map(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    (i) => i.value
+                    (s) => s.value
                   ),
                   chartConfigId: a.chartConfigId
-                }, r = f?.map((i) => i.chartConfigId === t.chartConfigId ? t : i);
-                g(r);
+                }, d = p?.map((s) => s.chartConfigId === t.chartConfigId ? t : s);
+                g(d);
               },
               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) => {
+          ) : /* @__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
-            }, 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,
+            }, d = p?.map((s) => s.chartConfigId === t.chartConfigId ? t : s);
+            g(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: h,
-              defaultValue: s ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === s[s.findIndex((t) => t.chartConfigId === a.chartConfigId)].columnId)] : void 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
-                }, r = f?.map((i) => i.chartConfigId === t.chartConfigId ? t : i);
-                S(e?.graphSettings || {}), g(r);
+                }, d = p?.map((s) => s.chartConfigId === t.chartConfigId ? t : s);
+                j(e?.graphSettings || {}), g(d);
               }
             }
-          ) : /* @__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 = {
+          ) : /* @__PURE__ */ o.jsx(A, { 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
-            }, 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)`,
+            }, s = p?.map((y) => y.chartConfigId === d.chartConfigId ? d : y);
+            j(t.graphSettings || {}), g(s);
+          }, children: a.allowedColumnIds.map((e, t) => /* @__PURE__ */ o.jsx(F, { 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: 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);
+          /* @__PURE__ */ o.jsx($, { 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: O(G), onChange: (e) => {
+            x(a.filter, e);
+          }, value: a.value, defaultValue: a.defaultValue }) : /* @__PURE__ */ o.jsx(A, { 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(F, { 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: O(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
           ] })
-        ] }, d))
+        ] }, r))
       ] }) : 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(
+      M !== !1 && l?.showColorScale !== !1 ? /* @__PURE__ */ o.jsx(Sa, { width: l?.width, colorLegendTitle: l?.colorLegendTitle, colors: l?.colors || l?.lineColors || ba[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: ja(H) ? "280px" : `${H}px`
+      }, children: /* @__PURE__ */ o.jsx(fa, { graph: k, graphDataConfiguration: p, graphData: wa(D ? xa(Y(m, L || []).filter(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (e) => e[I] === a
-      ), D.keyColumn, D.aggregationColumnsSetting) : Q(p, O || []).filter(
+        (e) => e[S] === a
+      ), D.keyColumn, D.aggregationColumnsSetting) : Y(m, L || []).filter(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (e) => e[I] === a
-      ), $, f) || [], debugMode: C, settings: {
+        (e) => e[S] === a
+      ), k, p) || [], debugMode: v, settings: {
         ...l || {},
         ...c,
-        theme: l?.theme || aa,
+        theme: l?.theme || la,
         width: void 0,
         height: void 0,
         relativeHeight: l?.relativeHeight || 0.67,
-        minHeight: Z,
+        minHeight: aa,
         graphTitle: `${a}`,
         graphDescription: void 0,
         graphDownload: !1,
@@ -232,10 +244,10 @@ function Ea(Y) {
         padding: "0",
         footNote: void 0,
         sources: void 0,
-        showColorScale: l?.showColorScale === !1 ? !1 : k === !1
-      }, readableHeader: _ || [] }) }, d)) })
+        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(da, {}) }),
-    l?.sources || l?.footNote ? /* @__PURE__ */ o.jsx(Ia, { styles: {
+    l?.sources || l?.footNote ? /* @__PURE__ */ o.jsx(Va, { styles: {
       footnote: l?.styles?.footnote,
       source: l?.styles?.source
     }, classNames: {
@@ -245,6 +257,6 @@ function Ea(Y) {
   ] });
 }
 export {
-  Ea as GriddedGraphs
+  qa as GriddedGraphs
 };
 //# sourceMappingURL=GriddedGraphs.js.map