@undp/data-viz 1.5.9 → 2.0.1

package/dist/SingleGraphDashboardThreeDGraphs.js

@@ -1,616 +1,386 @@
-import { j as r, m as de } from "./index-CHPV5EwG-DBWUSD9b.js";
-import { useState as D, useRef as J, useMemo as M, useCallback as K, useEffect as N } from "react";
-import { i as ue } from "./index-V_JXij1_.js";
+import { c as de, j as o } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as S, useRef as Z, useEffectEvent as E, useEffect as A } from "react";
+import { i as ce } from "./index-BuwmuDFJ.js";
 import { f as z } from "./index-EArKRVKg.js";
-import { i as ce } from "./index-Bwrro8-q.js";
-import { Z as S, H as R } from "./DropdownSelect-6kjXM6oW.js";
-import { g as he, f as F, a as Q, v as X, c as ge, w as Y, G as _ } from "./checkIfMultiple-u2SmbiCf.js";
-import { u as B } from "./Typography-LmZ9LEpe.js";
-import { y as pe } from "./Spinner-Bpz70q_g.js";
-import { ThreeDGlobe as fe } from "./ThreeDGlobe.js";
-import { f as me, a as Ce, b as be, c as xe, t as ve } from "./fetchAndParseData-sapWbnYk.js";
-import { a as we, t as Ie } from "./transformDataForAggregation-sBpdlX8n.js";
-import { g as ee } from "./getUniqValue-DiCh_MOD.js";
+import { i as ue } from "./index-Bwrro8-q.js";
+import { j as $, D as L } from "./DropdownSelect-BbdPQa2k.js";
+import { g as he, b as M, y as J, h as K, c as ge, $ as Q, P as X } from "./checkIfMultiple-Y9iKaV_u.js";
+import { w as pe } from "./Spinner-D7rnnwnA.js";
+import { j as Y } from "./Typography-PxtFcnJb.js";
+import { ThreeDGlobe as me } from "./ThreeDGlobe.js";
+import { f as fe, a as Ce, b as be, c as ve, t as xe } from "./fetchAndParseData-BpqkBPQL.js";
+import { a as Ie, t as we } from "./transformDataForAggregation-CE3bAlHU.js";
+import { g as _ } from "./getUniqValue-BKHCm3zE.js";
 import { GraphHeader as De } from "./GraphHeader.js";
-import { f as ae } from "./filterData-9nEcQ-Jp.js";
-import { g as ye } from "./getGraphList-DuColTJM.js";
-import { t as te } from "./transformDataForSelect-D8AuvYdf.js";
-function Se(v) {
-  const {
-    settings: a,
-    graph: o,
+import { f as ee } from "./filterData-DsAiFzKY.js";
+import { g as ye } from "./getGraphList-BpEWn1Tk.js";
+import { t as ae } from "./transformDataForSelect-D8AuvYdf.js";
+import { G as Se } from "./GraphContainer-CRqzdKu2.js";
+function je(D) {
+  const a = de.c(24), {
+    settings: t,
+    graph: g,
     graphData: c,
-    debugMode: h,
-    graphDataConfiguration: f,
-    readableHeader: i,
-    updateFilters: j
-  } = v;
-  if (h && (console.log(`Graph: ${o}`), console.log("Transformed data:", c), console.log("Settings:", a)), typeof c == "string")
-    return /* @__PURE__ */ r.jsx(
-      "div",
-      {
-        className: `flex my-0 mx-auto grow flex-col justify-center ${a?.width ? "w-fit" : "w-full"}`,
-        style: { height: "inherit" },
-        children: /* @__PURE__ */ r.jsx(
-          B,
-          {
-            size: "sm",
-            marginBottom: "none",
-            className: "p-2 text-center text-accent-dark-red dark:text-accent-red",
-            children: c
-          }
-        )
-      }
-    );
-  const w = {
-    threeDGlobe: fe
-  }, m = (d) => {
-    switch (d) {
+    debugMode: w,
+    graphDataConfiguration: r,
+    readableHeader: j,
+    updateFilters: I
+  } = D;
+  if (w && (console.log(`Graph: ${g}`), console.log("Transformed data:", c), console.log("Settings:", t)), typeof c == "string") {
+    const f = `flex my-0 mx-auto grow flex-col justify-center ${t?.width ? "w-fit" : "w-full"}`;
+    let p;
+    a[0] === Symbol.for("react.memo_cache_sentinel") ? (p = {
+      height: "inherit"
+    }, a[0] = p) : p = a[0];
+    let d;
+    a[1] !== c ? (d = /* @__PURE__ */ o.jsx(Y, { size: "sm", marginBottom: "none", className: "p-2 text-center text-accent-dark-red dark:text-accent-red", children: c }), a[1] = c, a[2] = d) : d = a[2];
+    let x;
+    return a[3] !== f || a[4] !== d ? (x = /* @__PURE__ */ o.jsx("div", { className: f, style: p, children: d }), a[3] = f, a[4] = d, a[5] = x) : x = a[5], x;
+  }
+  let b;
+  a[6] === Symbol.for("react.memo_cache_sentinel") ? (b = {
+    threeDGlobe: me
+  }, a[6] = b) : b = a[6];
+  const H = b;
+  let V;
+  a[7] !== c || a[8] !== r || a[9] !== j || a[10] !== t || a[11] !== I ? (V = (f) => {
+    switch (f) {
       case "threeDGlobe":
         return {
-          globeOffset: a?.globeOffset,
-          collapseColorScaleByDefault: a?.collapseColorScaleByDefault,
-          polygonAltitude: a?.polygonAltitude,
-          highlightedIds: a?.highlightedIds,
-          scale: a?.scale,
-          theme: a?.theme,
-          resetSelectionOnDoubleClick: a?.resetSelectionOnDoubleClick,
-          graphTitle: a?.graphTitle,
-          mapData: a?.mapData,
-          graphDescription: a?.graphDescription,
-          footNote: a?.footNote,
-          width: a?.width,
-          height: a?.height,
-          sources: a?.sources,
-          colorDomain: a?.colorDomain,
-          colors: a?.colors,
-          colorLegendTitle: Object.keys(a || {}).indexOf("colorLegendTitle") !== -1 ? a?.colorLegendTitle : he("x", f || [], i || []),
-          scaleType: a?.scaleType,
+          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 ? t?.colorLegendTitle : he("x", r || [], j || []),
+          scaleType: t?.scaleType,
           data: c,
-          centerPoint: a?.centerPoint,
-          backgroundColor: a?.backgroundColor,
-          mapNoDataColor: a?.mapNoDataColor,
-          mapBorderColor: a?.mapBorderColor,
-          relativeHeight: a?.relativeHeight,
-          padding: a?.padding,
-          tooltip: a?.tooltip,
-          showColorScale: a?.showColorScale,
-          graphID: a?.graphID,
-          dataDownload: a?.dataDownload,
-          mapProperty: a?.mapProperty,
-          language: a?.language,
-          minHeight: a?.minHeight,
-          ariaLabel: a?.ariaLabel,
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          onSeriesMouseClick: (L) => {
-            j?.(L.id);
+          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: (p) => {
+            I?.(p.id);
           },
-          detailsOnClick: a?.detailsOnClick,
-          styles: a?.styles,
-          classNames: a?.classNames,
-          autoRotate: a?.autoRotate,
-          globeMaterial: a?.globeMaterial,
-          atmosphereColor: a?.atmosphereColor,
-          enableZoom: a?.enableZoom,
-          atmosphereAltitude: a?.atmosphereAltitude,
-          globeCurvatureResolution: a?.globeCurvatureResolution,
-          fogSettings: a?.fogSetting,
-          lights: a?.lights,
-          highlightedAltitude: a?.highlightedAltitude,
-          selectedId: a?.selectedId
+          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 {};
     }
-  }, V = w[o], H = m(o);
-  return /* @__PURE__ */ r.jsx(
-    "div",
-    {
-      className: `grow my-0 mx-auto flex flex-col h-inherit ${a?.width ? "w-fit" : "w-full"} justify-center ${a?.theme || "light"}`,
-      style: { minHeight: "inherit" },
-      children: V ? /* @__PURE__ */ r.jsx(V, { ...H }) : /* @__PURE__ */ r.jsx(
-        B,
-        {
-          size: "sm",
-          marginBottom: "none",
-          className: "p-2 text-center text-accent-dark-red dark:text-accent-red",
-          children: `Invalid chart type: ${o}`
-        }
-      )
-    }
-  );
+  }, a[7] = c, a[8] = r, a[9] = j, a[10] = t, a[11] = I, a[12] = V) : V = a[12];
+  const u = V, T = H[g];
+  let h;
+  a[13] !== u || a[14] !== g ? (h = u(g), a[13] = u, a[14] = g, a[15] = h) : h = a[15];
+  const m = h, N = `grow my-0 mx-auto flex flex-col w-full justify-center ${t?.theme || "light"}`;
+  let y;
+  a[16] === Symbol.for("react.memo_cache_sentinel") ? (y = {
+    minHeight: "inherit"
+  }, a[16] = y) : y = a[16];
+  let s;
+  a[17] !== T || a[18] !== g || a[19] !== m ? (s = T ? /* @__PURE__ */ o.jsx(T, { ...m }) : /* @__PURE__ */ o.jsx(Y, { size: "sm", marginBottom: "none", className: "p-2 text-center text-accent-dark-red dark:text-accent-red", children: `Invalid chart type: ${g}` }), a[17] = T, a[18] = g, a[19] = m, a[20] = s) : s = a[20];
+  let G;
+  return a[21] !== N || a[22] !== s ? (G = /* @__PURE__ */ o.jsx("div", { className: N, style: y, children: s }), a[21] = N, a[22] = s, a[23] = G) : G = a[23], G;
 }
-const U = (v, a) => {
-  const o = a?.map((c) => {
-    const h = v?.findIndex((i) => i.chartConfigId === c.chartConfigId);
-    if (h === -1) return {};
-    const f = v[h]?.allowedColumnIds?.findIndex(
-      (i) => i.value === c.columnId
-    );
-    return f === -1 ? {} : v[h].allowedColumnIds[f].graphSettings || {};
+const U = (D, a) => {
+  const t = a?.map((g) => {
+    const c = D?.findIndex((r) => r.chartConfigId === g.chartConfigId);
+    if (c === -1) return {};
+    const w = D[c]?.allowedColumnIds?.findIndex((r) => r.value === g.columnId);
+    return w === -1 ? {} : D[c].allowedColumnIds[w].graphSettings || {};
   }) || [];
-  return Object.assign({}, ...o);
+  return Object.assign({}, ...t);
 };
-function Be(v) {
+function We(D) {
   const {
     graphSettings: a,
-    dataSettings: o,
-    filters: c,
-    graphType: h,
-    dataTransform: f,
-    graphDataConfiguration: i,
+    dataSettings: t,
+    filters: g,
+    graphType: c,
+    dataTransform: w,
+    graphDataConfiguration: r,
     dataFilters: j,
-    debugMode: w,
-    dataSelectionOptions: m,
-    advancedDataSelectionOptions: V,
-    readableHeader: H,
-    noOfFiltersPerRow: d = 4,
-    updateFilters: L,
-    uiMode: g = "normal",
-    highlightDataPointSettings: C
-  } = v, [b, le] = D(void 0), [y, re] = D(void 0), [x, I] = D(
-    i
-  ), [p, k] = D({}), [T, oe] = D(void 0), [ie, ne] = D([]), W = J(null), E = J(
-    i
-  ), [$, Z] = D([]), A = M(
-    () => ({
-      ignoreCase: !0,
-      ignoreAccents: !0,
-      trim: !0
-    }),
-    []
-  ), q = K(async () => {
-    try {
-      const s = await (o.dataURL ? typeof o.dataURL == "string" ? o.fileType === "json" ? me(
-        o.dataURL,
-        o.columnsToArray,
-        o.dataTransformation,
-        w
-      ) : o.fileType === "api" ? Ce(
-        o.dataURL,
-        o.apiHeaders,
-        o.columnsToArray,
-        o.dataTransformation,
-        w
-      ) : be(
-        o.dataURL,
-        o.dataTransformation,
-        o.columnsToArray,
-        w,
-        o.delimiter,
-        !0
-      ) : xe(o.dataURL, o.idColumnTitle) : ve(o.data, o.columnsToArray));
-      re(s);
-      const t = (c || []).map((l) => ({
-        filter: l.column,
-        label: l.label || `Filter by ${l.column}`,
-        singleSelect: l.singleSelect,
-        clearable: l.clearable,
-        defaultValue: te(l.defaultValue),
-        value: te(l.defaultValue),
-        availableValues: ee(s, l.column).filter((n) => !l.excludeValues?.includes(`${n}`)).map((n) => ({ value: n, label: n })),
-        allowSelectAll: l.allowSelectAll,
-        width: l.width
-      }));
-      Z(t);
-    } catch (e) {
-      console.error("Data fetching error:", e);
+    debugMode: I,
+    dataSelectionOptions: b,
+    advancedDataSelectionOptions: H,
+    readableHeader: V,
+    noOfFiltersPerRow: u = 4,
+    updateFilters: T,
+    uiMode: h = "normal",
+    highlightDataPointSettings: m
+  } = D, [N, y] = S(void 0), [s, G] = S(void 0), [f, p] = S(r), [d, x] = S({}), [k, te] = S(void 0), [le, oe] = S([]), B = Z(null), W = Z(r), [O, q] = S([]), P = {
+    ignoreCase: !0,
+    ignoreAccents: !0,
+    trim: !0
+  }, ie = E(() => {
+    const e = (g || []).map((n) => ({
+      filter: n.column,
+      label: n.label || `Filter by ${n.column}`,
+      singleSelect: n.singleSelect,
+      clearable: n.clearable,
+      defaultValue: ae(n.defaultValue),
+      value: ae(n.defaultValue),
+      availableValues: _(s, n.column).filter((l) => !n.excludeValues?.includes(`${l}`)).map((l) => ({
+        value: l,
+        label: l
+      })),
+      allowSelectAll: n.allowSelectAll,
+      width: n.width
+    }));
+    q(e);
+  });
+  A(() => {
+    (async () => {
+      try {
+        const n = t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? await fe(t.dataURL, t.columnsToArray, t.dataTransformation, I) : t.fileType === "api" ? await Ce(t.dataURL, t.apiHeaders, t.columnsToArray, t.dataTransformation, I) : await be(t.dataURL, t.dataTransformation, t.columnsToArray, I, t.delimiter, !0) : await ve(t.dataURL, t.idColumnTitle) : await xe(t.data, t.columnsToArray);
+        G(n);
+      } catch (n) {
+        console.error("Data fetching error:", n);
+      }
+    })(), ie();
+  }, [t, g, I]);
+  const re = E(() => {
+    if (!s || O.length === 0) y(s);
+    else {
+      const e = s.filter((n) => O.every((l) => l.value && z([l.value]).length > 0 ? ce(z([n[l.filter]]), z([l.value]).map((i) => i.value)).length > 0 : !0));
+      y(e);
     }
-  }, [o, c, w]);
-  N(() => {
-    q();
-  }, [q]);
-  const G = M(() => !y || $.length === 0 ? y : y.filter(
-    (s) => $.every(
-      (t) => t.value && z([t.value]).length > 0 ? ue(
-        z([s[t.filter]]),
-        z([t.value]).map((l) => l.value)
-      ).length > 0 : !0
-    )
-  ), [$, y]);
-  N(() => {
-    m && k(U(m, i));
-  }, [m, i]), N(() => {
-    y && le(G);
-  }, [G, y]), N(() => {
-    C?.column && G && ne(
-      ee(G, C.column).filter((e) => !C?.excludeValues?.includes(`${e}`)).map((e) => ({ value: e, label: e }))
-    );
-  }, [G, C]), N(() => {
-    ce(E.current, i) || (I(i), E.current = i);
-  }, [i]);
-  const O = K((e, s) => {
-    Z((t) => t.map((l) => l.filter === e ? { ...l, value: s } : l));
-  }, []), se = M(() => {
-    if (!b) return;
-    const e = x;
-    return we(
-      f ? Ie(
-        ae(b, j || []),
-        f.keyColumn,
-        f.aggregationColumnsSetting
-      ) : ae(b, j || []),
-      h,
-      e
-    );
-  }, [h, x, b, j, f]);
-  return o ? /* @__PURE__ */ r.jsx(
-    "div",
-    {
-      className: `${a?.theme || "light"} flex ${a?.width ? "w-fit grow-0" : "w-full grow"}${a?.height ? "" : " h-full"}`,
-      dir: a?.language === "he" || a?.language === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ r.jsx(
-        "div",
-        {
-          className: de(
-            `${a?.backgroundColor ? a?.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${a?.language || "en"}`,
-            a?.classNames?.graphContainer
-          ),
-          style: {
-            ...a?.styles?.graphContainer || {},
-            ...a?.backgroundColor && a?.backgroundColor !== !0 ? { backgroundColor: a?.backgroundColor } : {}
-          },
-          id: a?.graphID,
-          ref: W,
-          children: /* @__PURE__ */ r.jsx(
-            "div",
-            {
-              style: {
-                padding: a?.backgroundColor ? a?.padding || "1rem" : a?.padding || 0,
-                flexGrow: 1,
-                display: "flex"
-              },
-              children: /* @__PURE__ */ r.jsx("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: b || ye.filter((e) => e.geoHubMapPresentation).map((e) => e.graphID).indexOf(h) !== -1 ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-                p?.graphTitle || p?.graphDescription || a?.graphTitle || a?.graphDescription || a?.graphDownload || a?.dataDownload ? /* @__PURE__ */ r.jsx(
-                  De,
-                  {
-                    styles: {
-                      title: p?.styles?.title || a?.styles?.title,
-                      description: p?.styles?.description || a?.styles?.description
-                    },
-                    classNames: {
-                      title: p?.classNames?.title || a?.classNames?.title,
-                      description: p?.classNames?.description || a?.classNames?.description
-                    },
-                    graphTitle: p?.graphTitle || a?.graphTitle,
-                    graphDescription: p?.graphDescription || a?.graphDescription,
-                    width: p?.width || a?.width,
-                    graphDownload: a?.graphDownload ? W.current : void 0,
-                    dataDownload: a?.dataDownload && b && b.length > 0 ? b : null
-                  }
-                ) : null,
-                $.length !== 0 || (m || []).length !== 0 || (V || []).length !== 0 || C ? /* @__PURE__ */ r.jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      gap: "1rem",
-                      flexWrap: "wrap",
-                      alignItems: "flex-start",
-                      width: "100%"
-                    },
-                    children: [
-                      V?.map((e, s) => /* @__PURE__ */ r.jsxs(
-                        "div",
-                        {
-                          style: {
-                            width: e.width || `calc(${100 / d}% - ${(d - 1) / d}rem)`,
-                            flexGrow: 1,
-                            flexShrink: e.ui !== "radio" ? 0 : 1,
-                            minWidth: "240px"
-                          },
-                          children: [
-                            /* @__PURE__ */ r.jsx(F, { className: "mb-2", children: e.label || "Graph by" }),
-                            e.ui !== "radio" ? /* @__PURE__ */ r.jsx(
-                              S,
-                              {
-                                options: e.options.map((t) => ({
-                                  ...t,
-                                  value: t.label
-                                })),
-                                size: "sm",
-                                isClearable: !1,
-                                isSearchable: !0,
-                                variant: g,
-                                controlShouldRenderValue: !0,
-                                defaultValue: e.defaultValue ? {
-                                  ...e.defaultValue,
-                                  value: e.defaultValue?.label
-                                } : {
-                                  ...e.options[0],
-                                  value: e.options[0].label
-                                },
-                                onChange: (t) => {
-                                  k(t?.graphSettings || {}), I(t?.dataConfiguration);
-                                }
-                              }
-                            ) : /* @__PURE__ */ r.jsx(
-                              Q,
-                              {
-                                defaultValue: e.defaultValue?.label || e.options[0].label,
-                                variant: g,
-                                onValueChange: (t) => {
-                                  const l = e.options[e.options.findIndex((n) => n.label === t)];
-                                  k(l.graphSettings || {}), I(l.dataConfiguration);
-                                },
-                                children: e.options.map((t, l) => /* @__PURE__ */ r.jsx(X, { label: t.label, value: t.label }, l))
-                              }
-                            )
-                          ]
-                        },
-                        s
-                      )),
-                      m?.map((e, s) => /* @__PURE__ */ r.jsxs(
-                        "div",
-                        {
-                          style: {
-                            width: e.width || `calc(${100 / d}% - ${(d - 1) / d}rem)`,
-                            flexGrow: 1,
-                            flexShrink: e.ui !== "radio" ? 0 : 1,
-                            minWidth: "240px"
-                          },
-                          children: [
-                            /* @__PURE__ */ r.jsx(F, { className: "mb-2", children: e.label || `Visualize ${e.chartConfigId} by` }),
-                            ge(e.chartConfigId, x || []) ? e.ui !== "radio" ? /* @__PURE__ */ r.jsx(
-                              S,
-                              {
-                                options: e.allowedColumnIds,
-                                size: "sm",
-                                isMulti: !0,
-                                isSearchable: !0,
-                                variant: g,
-                                controlShouldRenderValue: !0,
-                                defaultValue: i ? i[i.findIndex(
-                                  (t) => t.chartConfigId === e.chartConfigId
-                                )].columnId.map(
-                                  (t) => e.allowedColumnIds[e.allowedColumnIds.findIndex((l) => l.value === t)]
-                                ) : void 0,
-                                filterOption: R(A),
-                                onChange: (t) => {
-                                  const l = {
-                                    columnId: (t || []).map(
-                                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                      (u) => u.value
-                                    ),
-                                    chartConfigId: e.chartConfigId
-                                  }, n = x?.map(
-                                    (u) => u.chartConfigId === l.chartConfigId ? l : u
-                                  );
-                                  I(n);
-                                }
-                              }
-                            ) : /* @__PURE__ */ r.jsx(
-                              Y,
-                              {
-                                variant: g,
-                                defaultValue: i ? i[i.findIndex(
-                                  (t) => t.chartConfigId === e.chartConfigId
-                                )].columnId.map(
-                                  (t) => e.allowedColumnIds[e.allowedColumnIds.findIndex((l) => l.value === t)]
-                                ).map((t) => t.value) : [],
-                                onValueChange: (t) => {
-                                  const l = {
-                                    columnId: t || [],
-                                    chartConfigId: e.chartConfigId
-                                  }, n = x?.map(
-                                    (u) => u.chartConfigId === l.chartConfigId ? l : u
-                                  );
-                                  I(n);
-                                },
-                                children: e.allowedColumnIds.map((t, l) => /* @__PURE__ */ r.jsx(_, { label: t.label, value: t.label }, l))
-                              }
-                            ) : e.ui !== "radio" ? /* @__PURE__ */ r.jsx(
-                              S,
-                              {
-                                options: e.allowedColumnIds,
-                                size: "sm",
-                                isClearable: !1,
-                                isSearchable: !0,
-                                variant: g,
-                                controlShouldRenderValue: !0,
-                                defaultValue: i ? e.allowedColumnIds[e.allowedColumnIds.findIndex(
-                                  (t) => t.value === i[i.findIndex(
-                                    (l) => l.chartConfigId === e.chartConfigId
-                                  )].columnId
-                                )] : void 0,
-                                onChange: (t) => {
-                                  const l = {
-                                    columnId: t?.value,
-                                    chartConfigId: e.chartConfigId
-                                  }, n = x?.map(
-                                    (u) => u.chartConfigId === l.chartConfigId ? l : u
-                                  );
-                                  k(
-                                    U(m, n)
-                                  ), I(n);
-                                }
-                              }
-                            ) : /* @__PURE__ */ r.jsx(
-                              Q,
-                              {
-                                variant: g,
-                                defaultValue: i ? e.allowedColumnIds[e.allowedColumnIds.findIndex(
-                                  (t) => t.value === i[i.findIndex(
-                                    (l) => l.chartConfigId === e.chartConfigId
-                                  )].columnId
-                                )].label : "",
-                                onValueChange: (t) => {
-                                  const n = {
-                                    columnId: e.allowedColumnIds[e.allowedColumnIds.findIndex((P) => P.label === t)].value,
-                                    chartConfigId: e.chartConfigId
-                                  }, u = x?.map(
-                                    (P) => P.chartConfigId === n.chartConfigId ? n : P
-                                  );
-                                  k(
-                                    U(m, u)
-                                  ), I(u);
-                                },
-                                children: e.allowedColumnIds.map((t, l) => /* @__PURE__ */ r.jsx(X, { label: t.label, value: t.label }, l))
-                              }
-                            )
-                          ]
-                        },
-                        s
-                      )),
-                      $?.map((e, s) => /* @__PURE__ */ r.jsxs(
-                        "div",
-                        {
-                          style: {
-                            width: e.width || `calc(${100 / d}% - ${(d - 1) / d}rem)`,
-                            flexGrow: 1,
-                            flexShrink: 0,
-                            minWidth: "240px"
-                          },
-                          children: [
-                            /* @__PURE__ */ r.jsx(F, { className: "mb-2", children: e.label }),
-                            e.singleSelect ? /* @__PURE__ */ r.jsx(
-                              S,
-                              {
-                                options: e.availableValues,
-                                variant: g,
-                                isClearable: e.clearable === void 0 ? !0 : e.clearable,
-                                isSearchable: !0,
-                                controlShouldRenderValue: !0,
-                                filterOption: R(A),
-                                onChange: (t) => {
-                                  O(e.filter, t);
-                                },
-                                value: e.value,
-                                defaultValue: e.defaultValue
-                              }
-                            ) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-                              e.ui !== "radio" ? /* @__PURE__ */ r.jsx(
-                                S,
-                                {
-                                  options: e.availableValues,
-                                  variant: g,
-                                  size: "sm",
-                                  isMulti: !0,
-                                  isClearable: e.clearable === void 0 ? !0 : e.clearable,
-                                  isSearchable: !0,
-                                  controlShouldRenderValue: !0,
-                                  filterOption: R(A),
-                                  onChange: (t) => {
-                                    O(e.filter, t);
-                                  },
-                                  value: e.value,
-                                  defaultValue: e.defaultValue
-                                }
-                              ) : /* @__PURE__ */ r.jsx(
-                                Y,
-                                {
-                                  variant: g,
-                                  defaultValue: e.defaultValue ? e.defaultValue.map((t) => `${t.value}`) : [],
-                                  value: e.value ? e.value.map((t) => `${t.value}`) : void 0,
-                                  onValueChange: (t) => {
-                                    O(
-                                      e.filter,
-                                      e.availableValues.filter((l) => t.indexOf(`${l.value}`) !== -1)
-                                    );
-                                  },
-                                  children: e.availableValues.map((t, l) => /* @__PURE__ */ r.jsx(
-                                    _,
-                                    {
-                                      label: `${t.label}`,
-                                      value: `${t.value}`
-                                    },
-                                    l
-                                  ))
-                                }
-                              ),
-                              e.allowSelectAll ? /* @__PURE__ */ r.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: () => {
-                                    O(e.filter, e.availableValues);
-                                  },
-                                  children: "Select all options"
-                                }
-                              ) : null
-                            ] })
-                          ]
-                        },
-                        s
-                      )),
-                      C ? /* @__PURE__ */ r.jsxs(
-                        "div",
-                        {
-                          style: {
-                            width: C.width || `calc(${100 / d}% - ${(d - 1) / d}rem)`,
-                            flexGrow: 1,
-                            flexShrink: 0,
-                            minWidth: "240px"
-                          },
-                          children: [
-                            /* @__PURE__ */ r.jsx(F, { className: "mb-2", children: C.label || "Highlight data" }),
-                            /* @__PURE__ */ r.jsx(
-                              S,
-                              {
-                                options: ie,
-                                variant: g,
-                                size: "sm",
-                                isMulti: !0,
-                                isClearable: !0,
-                                isSearchable: !0,
-                                controlShouldRenderValue: !0,
-                                filterOption: R(A),
-                                onChange: (e) => {
-                                  oe(e?.map((s) => s.value));
-                                },
-                                value: T?.map((e) => ({
-                                  label: e,
-                                  value: e
-                                })),
-                                defaultValue: C.defaultValues?.map((e) => ({
-                                  label: e,
-                                  value: e
-                                }))
-                              }
-                            )
-                          ]
-                        }
-                      ) : null
-                    ]
-                  }
-                ) : null,
-                /* @__PURE__ */ r.jsx(
-                  Se,
-                  {
-                    graph: h,
-                    graphData: se,
-                    graphDataConfiguration: x,
-                    debugMode: w,
-                    readableHeader: H || [],
-                    updateFilters: L,
-                    settings: {
-                      ...a || {},
-                      ...p,
-                      graphTitle: void 0,
-                      graphDescription: void 0,
-                      graphDownload: !1,
-                      dataDownload: !1,
-                      backgroundColor: void 0,
-                      padding: "0",
-                      theme: a?.theme,
-                      ...T ? {
-                        highlightedDataPoints: T,
-                        highlightedIds: T?.map((e) => `${e}`),
-                        highlightedLines: T?.map((e) => e)
-                      } : {}
-                    }
-                  }
-                )
-              ] }) : /* @__PURE__ */ r.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ r.jsx(pe, {}) }) })
+  });
+  A(() => {
+    re();
+  }, [O, s]), A(() => {
+    b && x(U(b, r));
+  }, [b, r]);
+  const ne = E(() => {
+    m?.column && N && oe(_(N, m.column).filter((e) => !m?.excludeValues?.includes(`${e}`)).map((e) => ({
+      value: e,
+      label: e
+    })));
+  });
+  A(() => {
+    ne();
+  }, [m]), A(() => {
+    ue(W.current, r) || (p(r), W.current = r);
+  }, [r]);
+  const R = (e, n) => {
+    q((l) => l.map((i) => i.filter === e ? {
+      ...i,
+      value: n
+    } : i));
+  }, se = s ? Ie(w ? we(ee(s, j || []), w.keyColumn, w.aggregationColumnsSetting) : ee(s, j || []), c, f) : void 0;
+  return /* @__PURE__ */ o.jsx(Se, { className: a?.classNames?.graphContainer, style: a?.styles?.graphContainer, id: a?.graphID, ref: B, "aria-label": a?.ariaLabel, backgroundColor: a?.backgroundColor ?? !1, theme: a?.theme || "light", language: a?.language || "en", width: a?.width, height: a?.height, padding: a?.padding, minHeight: a?.minHeight, relativeHeight: a?.relativeHeight, children: s || ye.filter((e) => e.geoHubMapPresentation).map((e) => e.graphID).indexOf(c) !== -1 ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    d?.graphTitle || d?.graphDescription || a?.graphTitle || a?.graphDescription || a?.graphDownload || a?.dataDownload ? /* @__PURE__ */ o.jsx(De, { styles: {
+      title: d?.styles?.title || a?.styles?.title,
+      description: d?.styles?.description || a?.styles?.description
+    }, classNames: {
+      title: d?.classNames?.title || a?.classNames?.title,
+      description: d?.classNames?.description || a?.classNames?.description
+    }, graphTitle: d?.graphTitle || a?.graphTitle, graphDescription: d?.graphDescription || a?.graphDescription, width: d?.width || a?.width, graphDownload: a?.graphDownload ? B : void 0, dataDownload: a?.dataDownload && s && s.length > 0 ? s : null }) : null,
+    O.length !== 0 || (b || []).length !== 0 || (H || []).length !== 0 || m ? /* @__PURE__ */ o.jsxs("div", { className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full", children: [
+      H?.map((e, n) => /* @__PURE__ */ o.jsxs("div", { style: {
+        width: e.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        flexGrow: 1,
+        flexShrink: e.ui !== "radio" ? 0 : 1,
+        minWidth: "240px"
+      }, className: "pb-4", children: [
+        /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: e.label || "Graph by" }),
+        e.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+          $,
+          {
+            options: e.options.map((l) => ({
+              ...l,
+              value: l.label
+            })),
+            size: "sm",
+            isClearable: !1,
+            isSearchable: !0,
+            variant: h,
+            controlShouldRenderValue: !0,
+            defaultValue: e.defaultValue ? {
+              ...e.defaultValue,
+              value: e.defaultValue?.label
+            } : {
+              ...e.options[0],
+              value: e.options[0].label
+            },
+            onChange: (l) => {
+              x(l?.graphSettings || {}), p(l?.dataConfiguration);
             }
-          )
-        }
-      )
-    }
-  ) : /* @__PURE__ */ r.jsx(B, { size: "xs", className: "text-center text-accent-dark-red dark:text-accent-red p-2", children: "Please make sure either `dataSettings` props are present as they are required for data." });
+          }
+        ) : /* @__PURE__ */ o.jsx(J, { defaultValue: e.defaultValue?.label || e.options[0].label, variant: h, onValueChange: (l) => {
+          const i = e.options[e.options.findIndex((v) => v.label === l)];
+          x(i.graphSettings || {}), p(i.dataConfiguration);
+        }, children: e.options.map((l, i) => /* @__PURE__ */ o.jsx(K, { label: l.label, value: l.label }, i)) })
+      ] }, n)),
+      b?.map((e, n) => /* @__PURE__ */ o.jsxs("div", { style: {
+        width: e.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        flexGrow: 1,
+        flexShrink: e.ui !== "radio" ? 0 : 1,
+        minWidth: "240px"
+      }, className: "pb-4", children: [
+        /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: e.label || `Visualize ${e.chartConfigId} by` }),
+        ge(e.chartConfigId, f || []) ? e.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+          $,
+          {
+            options: e.allowedColumnIds,
+            size: "sm",
+            isMulti: !0,
+            isSearchable: !0,
+            variant: h,
+            controlShouldRenderValue: !0,
+            defaultValue: r ? r[r.findIndex((l) => l.chartConfigId === e.chartConfigId)].columnId.map((l) => e.allowedColumnIds[e.allowedColumnIds.findIndex((i) => i.value === l)]) : void 0,
+            filterOption: L(P),
+            onChange: (l) => {
+              const i = {
+                columnId: (l || []).map(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (C) => C.value
+                ),
+                chartConfigId: e.chartConfigId
+              }, v = f?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
+              p(v);
+            }
+          }
+        ) : /* @__PURE__ */ o.jsx(Q, { variant: h, defaultValue: r ? r[r.findIndex((l) => l.chartConfigId === e.chartConfigId)].columnId.map((l) => e.allowedColumnIds[e.allowedColumnIds.findIndex((i) => i.value === l)]).map((l) => l.value) : [], onValueChange: (l) => {
+          const i = {
+            columnId: l || [],
+            chartConfigId: e.chartConfigId
+          }, v = f?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
+          p(v);
+        }, children: e.allowedColumnIds.map((l, i) => /* @__PURE__ */ o.jsx(X, { label: l.label, value: l.label }, i)) }) : e.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+          $,
+          {
+            options: e.allowedColumnIds,
+            size: "sm",
+            isClearable: !1,
+            isSearchable: !0,
+            variant: h,
+            controlShouldRenderValue: !0,
+            defaultValue: r ? e.allowedColumnIds[e.allowedColumnIds.findIndex((l) => l.value === r[r.findIndex((i) => i.chartConfigId === e.chartConfigId)].columnId)] : void 0,
+            onChange: (l) => {
+              const i = {
+                columnId: l?.value,
+                chartConfigId: e.chartConfigId
+              }, v = f?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
+              x(U(b, v)), p(v);
+            }
+          }
+        ) : /* @__PURE__ */ o.jsx(J, { variant: h, defaultValue: r ? e.allowedColumnIds[e.allowedColumnIds.findIndex((l) => l.value === r[r.findIndex((i) => i.chartConfigId === e.chartConfigId)].columnId)].label : "", onValueChange: (l) => {
+          const v = {
+            columnId: e.allowedColumnIds[e.allowedColumnIds.findIndex((F) => F.label === l)].value,
+            chartConfigId: e.chartConfigId
+          }, C = f?.map((F) => F.chartConfigId === v.chartConfigId ? v : F);
+          x(U(b, C)), p(C);
+        }, children: e.allowedColumnIds.map((l, i) => /* @__PURE__ */ o.jsx(K, { label: l.label, value: l.label }, i)) })
+      ] }, n)),
+      O?.map((e, n) => /* @__PURE__ */ o.jsxs("div", { style: {
+        width: e.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        flexGrow: 1,
+        flexShrink: 0,
+        minWidth: "240px"
+      }, className: "pb-4", children: [
+        /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: e.label }),
+        e.singleSelect ? /* @__PURE__ */ o.jsx($, { options: e.availableValues, variant: h, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: L(P), onChange: (l) => {
+          R(e.filter, l);
+        }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          e.ui !== "radio" ? /* @__PURE__ */ o.jsx($, { options: e.availableValues, variant: h, size: "sm", isMulti: !0, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: L(P), onChange: (l) => {
+            R(e.filter, l);
+          }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ o.jsx(Q, { variant: h, defaultValue: e.defaultValue ? e.defaultValue.map((l) => `${l.value}`) : [], value: e.value ? e.value.map((l) => `${l.value}`) : void 0, onValueChange: (l) => {
+            R(e.filter, e.availableValues.filter((i) => l.indexOf(`${i.value}`) !== -1));
+          }, children: e.availableValues.map((l, i) => /* @__PURE__ */ o.jsx(X, { label: `${l.label}`, value: `${l.value}` }, i)) }),
+          e.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: () => {
+            R(e.filter, e.availableValues);
+          }, children: "Select all options" }) : null
+        ] })
+      ] }, n)),
+      m ? /* @__PURE__ */ o.jsxs("div", { style: {
+        width: m.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        flexGrow: 1,
+        flexShrink: 0,
+        minWidth: "240px"
+      }, className: "pb-4", children: [
+        /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: m.label || "Highlight data" }),
+        /* @__PURE__ */ o.jsx(
+          $,
+          {
+            options: le,
+            variant: h,
+            size: "sm",
+            isMulti: !0,
+            isClearable: !0,
+            isSearchable: !0,
+            controlShouldRenderValue: !0,
+            filterOption: L(P),
+            onChange: (e) => {
+              te(e?.map((n) => n.value));
+            },
+            value: k?.map((e) => ({
+              label: e,
+              value: e
+            })),
+            defaultValue: m.defaultValues?.map((e) => ({
+              label: e,
+              value: e
+            }))
+          }
+        )
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ o.jsx(je, { graph: c, graphData: se, graphDataConfiguration: f, debugMode: I, readableHeader: V || [], updateFilters: T, settings: {
+      ...a || {},
+      ...d,
+      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: a?.theme,
+      ...k ? {
+        highlightedDataPoints: k,
+        highlightedIds: k?.map((e) => `${e}`),
+        highlightedLines: k?.map((e) => e)
+      } : {}
+    } })
+  ] }) : /* @__PURE__ */ o.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ o.jsx(pe, {}) }) });
 }
 export {
-  Be as SingleGraphDashboardThreeDGraphs
+  We as SingleGraphDashboardThreeDGraphs
 };
 //# sourceMappingURL=SingleGraphDashboardThreeDGraphs.js.map