@undp/data-viz 1.5.8 → 2.0.0

package/dist/PerformanceIntensiveMultiGraphDashboard.js

@@ -1,353 +1,162 @@
-import { j as r } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useState as v, useMemo as M, useEffect as A, useCallback as H } from "react";
-import { i as Z } from "./index-V_JXij1_.js";
-import { f as S } from "./index-EArKRVKg.js";
-import { Z as G, H as N } from "./DropdownSelect-CtOKZHD0.js";
-import { f as q } from "./checkIfMultiple-ChTJk2Tk.js";
+import { j as s } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as S, useEffectEvent as M, useEffect as y } from "react";
+import { i as I } from "./index-BuwmuDFJ.js";
+import { f as D } from "./index-EArKRVKg.js";
+import { j as G, D as H } from "./DropdownSelect-BbdPQa2k.js";
+import { b as q } from "./checkIfMultiple-Y9iKaV_u.js";
 import { SingleGraphDashboard as J } from "./SingleGraphDashboard.js";
 import { SingleGraphDashboardThreeDGraphs as B } from "./SingleGraphDashboardThreeDGraphs.js";
 import { SingleGraphDashboardGeoHubMaps as K } from "./SingleGraphDashboardGeoHubMaps.js";
-import { f as Q, a as X, b as Y, c as _, t as aa } from "./fetchAndParseData-sapWbnYk.js";
-import { g as ea } from "./getUniqValue-DiCh_MOD.js";
-import { GraphHeader as ta } from "./GraphHeader.js";
-import { f as W } from "./filterData-9nEcQ-Jp.js";
-import { t as $ } from "./transformDataForSelect-D8AuvYdf.js";
-const D = (f) => f.map((t) => t.columnWidth || 1).reduce((t, u) => t + u, 0), ra = [
-  "barChart",
-  "choroplethMap",
-  "biVariateChoroplethMap",
-  "circlePacking",
-  "treeMap"
-];
-function ya(f) {
+import { f as Q, a as X, b as Y, c as Z, t as _ } from "./fetchAndParseData-BpqkBPQL.js";
+import { g as aa } from "./getUniqValue-BKHCm3zE.js";
+import { GraphHeader as ea } from "./GraphHeader.js";
+import { f as k } from "./filterData-DsAiFzKY.js";
+import { t as R } from "./transformDataForSelect-D8AuvYdf.js";
+import { G as ta } from "./GraphContainer-CRqzdKu2.js";
+const T = (f) => f.map((t) => t.columnWidth || 1).reduce((t, h) => t + h, 0), ia = ["barChart", "choroplethMap", "biVariateChoroplethMap", "circlePacking", "treeMap"];
+function xa(f) {
   const {
     dashboardID: w,
-    dashboardLayout: i,
+    dashboardLayout: r,
     dataSettings: t,
-    filters: u,
-    debugMode: d,
-    theme: g = "light",
+    filters: h,
+    debugMode: l,
+    theme: p = "light",
     readableHeader: C,
-    dataFilters: T,
+    dataFilters: F,
     noOfFiltersPerRow: b = 4,
-    filterPosition: F,
-    uiMode: c = "normal",
-    graphStyles: y,
+    filterPosition: j,
+    uiMode: d = "normal",
+    graphStyles: v,
     graphClassNames: x
-  } = f, [h, R] = v(void 0), [p, z] = v(void 0), [o, j] = v([]), L = ["threeDGlobe"], P = ["geoHubCompareMap", "geoHubMap", "geoHubMapWithLayerSelection"], O = M(
-    () => ({
-      ignoreCase: !0,
-      ignoreAccents: !0,
-      trim: !0
-    }),
-    []
-  ), k = M(() => !p || o.length === 0 ? p : p.filter(
-    (n) => o.every(
-      (a) => a.value && S([a.value]).length > 0 ? Z(
-        S([n[a.filter]]),
-        S([a.value]).map((s) => s.value)
-      ).length > 0 : !0
-    )
-  ), [o, p]);
-  A(() => {
-    R(k);
-  }, [k]);
-  const V = H(async () => {
-    if (t)
+  } = f, [g, O] = S(void 0), [u, W] = S(void 0), [n, V] = S([]), z = ["threeDGlobe"], L = ["geoHubCompareMap", "geoHubMap", "geoHubMapWithLayerSelection"], N = {
+    ignoreCase: !0,
+    ignoreAccents: !0,
+    trim: !0
+  }, A = M(() => {
+    const e = (h || []).map((i) => ({
+      filter: i.column,
+      label: i.label || `Filter by ${i.column}`,
+      singleSelect: i.singleSelect,
+      clearable: i.clearable,
+      defaultValue: R(i.defaultValue),
+      value: R(i.defaultValue),
+      availableValues: aa(u, i.column).filter((a) => !i.excludeValues?.includes(`${a}`)).map((a) => ({
+        value: a,
+        label: a
+      })),
+      allowSelectAll: i.allowSelectAll,
+      width: i.width
+    }));
+    V(e);
+  }), P = M(() => {
+    if (!u || n.length === 0) O(u);
+    else {
+      const e = u.filter((i) => n.every((a) => a.value && D([a.value]).length > 0 ? I(D([i[a.filter]]), D([a.value]).map((o) => o.value)).length > 0 : !0));
+      O(e);
+    }
+  });
+  y(() => {
+    P();
+  }, [n, u]), y(() => {
+    (async () => {
       try {
-        const n = await (t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? Q(
-          t.dataURL,
-          t.columnsToArray,
-          t.dataTransformation,
-          d
-        ) : t.fileType === "api" ? X(
-          t.dataURL,
-          t.apiHeaders,
-          t.columnsToArray,
-          t.dataTransformation,
-          d
-        ) : Y(
-          t.dataURL,
-          t.dataTransformation,
-          t.columnsToArray,
-          d,
-          t.delimiter,
-          !0
-        ) : _(t.dataURL, t.idColumnTitle) : aa(t.data, t.columnsToArray));
-        z(n);
-        const a = (u || []).map((s) => ({
-          filter: s.column,
-          label: s.label || `Filter by ${s.column}`,
-          singleSelect: s.singleSelect,
-          clearable: s.clearable,
-          defaultValue: $(s.defaultValue),
-          value: $(s.defaultValue),
-          availableValues: ea(n, s.column).filter((l) => !s.excludeValues?.includes(`${l}`)).map((l) => ({ value: l, label: l })),
-          allowSelectAll: s.allowSelectAll,
-          width: s.width
-        }));
-        j(a);
-      } catch (e) {
-        console.error("Data fetching error:", e);
+        const i = t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? await Q(t.dataURL, t.columnsToArray, t.dataTransformation, l) : t.fileType === "api" ? await X(t.dataURL, t.apiHeaders, t.columnsToArray, t.dataTransformation, l) : await Y(t.dataURL, t.dataTransformation, t.columnsToArray, l, t.delimiter, !0) : await Z(t.dataURL, t.idColumnTitle) : await _(t.data, t.columnsToArray);
+        W(i);
+      } catch (i) {
+        console.error("Data fetching error:", i);
       }
-  }, [t, u, d]);
-  A(() => {
-    V();
-  }, [V]);
-  const m = H((e, n) => {
-    j((a) => a.map((s) => s.filter === e ? { ...s, value: n } : s));
-  }, []);
-  return /* @__PURE__ */ r.jsx(
-    "div",
-    {
-      className: `${g || "light"} flex grow`,
-      dir: i.language === "he" || i.language === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ r.jsx(
-        "div",
-        {
-          className: `${i.backgroundColor ? i.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto gap-4 flex flex-col w-full grow h-inherit ${i.language || "en"}`,
-          style: {
-            ...i.backgroundColor && i.backgroundColor !== !0 ? { backgroundColor: i.backgroundColor } : {}
-          },
-          id: w,
-          children: /* @__PURE__ */ r.jsx(
-            "div",
-            {
-              style: {
-                padding: i.backgroundColor ? i.padding || "1rem" : i.padding || 0,
-                flexGrow: 1,
-                display: "flex"
-              },
-              children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                i.title || i.description ? /* @__PURE__ */ r.jsx(
-                  ta,
-                  {
-                    graphTitle: i.title,
-                    graphDescription: i.description,
-                    isDashboard: !0
-                  }
-                ) : null,
-                /* @__PURE__ */ r.jsxs("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap" }, children: [
-                  o.length !== 0 ? /* @__PURE__ */ r.jsx(
-                    "div",
-                    {
-                      style: {
-                        width: F === "side" ? "280px" : "100%",
-                        flexGrow: 1,
-                        flexShrink: 0
-                      },
-                      children: /* @__PURE__ */ r.jsx(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            gap: "1rem",
-                            flexWrap: "wrap",
-                            alignItems: "flex-start",
-                            width: "100%",
-                            position: "sticky",
-                            top: "1rem"
-                          },
-                          children: o?.map((e, n) => /* @__PURE__ */ r.jsxs(
-                            "div",
-                            {
-                              style: {
-                                width: e.width || `calc(${100 / b}% - ${(b - 1) / b}rem)`,
-                                flexGrow: 1,
-                                flexShrink: 0,
-                                minWidth: "240px"
-                              },
-                              children: [
-                                /* @__PURE__ */ r.jsx(q, { className: "mb-2", children: e.label }),
-                                e.singleSelect ? /* @__PURE__ */ r.jsx(
-                                  G,
-                                  {
-                                    options: e.availableValues,
-                                    isClearable: e.clearable === void 0 ? !0 : e.clearable,
-                                    size: "sm",
-                                    variant: c,
-                                    isMulti: !1,
-                                    isSearchable: !0,
-                                    filterOption: N(O),
-                                    onChange: (a) => {
-                                      m(e.filter, a);
-                                    },
-                                    defaultValue: e.defaultValue,
-                                    value: e.value
-                                  }
-                                ) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-                                  /* @__PURE__ */ r.jsx(
-                                    G,
-                                    {
-                                      options: e.availableValues,
-                                      isMulti: !0,
-                                      size: "sm",
-                                      isClearable: e.clearable === void 0 ? !0 : e.clearable,
-                                      variant: c,
-                                      isSearchable: !0,
-                                      controlShouldRenderValue: !0,
-                                      closeMenuOnSelect: !1,
-                                      hideSelectedOptions: !1,
-                                      filterOption: N(O),
-                                      onChange: (a) => {
-                                        m(e.filter, a);
-                                      },
-                                      value: e.value,
-                                      defaultValue: e.defaultValue
-                                    }
-                                  ),
-                                  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: () => {
-                                        m(e.filter, e.availableValues);
-                                      },
-                                      children: "Select all options"
-                                    }
-                                  ) : null
-                                ] })
-                              ]
-                            },
-                            n
-                          ))
-                        }
-                      )
-                    }
-                  ) : null,
-                  /* @__PURE__ */ r.jsx(
-                    "div",
-                    {
-                      style: {
-                        width: F === "side" ? "calc(100% - 280px - 1rem)" : "100%",
-                        minWidth: "280px",
-                        flexGrow: 1,
-                        display: "flex",
-                        gap: "1rem",
-                        flexWrap: "wrap",
-                        flexShrink: "0"
-                      },
-                      children: i.rows.map((e, n) => /* @__PURE__ */ r.jsx(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            gap: "1rem",
-                            alignItems: "stretch",
-                            minHeight: `${e.height || 0}px`,
-                            height: "auto",
-                            width: "100%",
-                            flexWrap: "wrap"
-                          },
-                          children: e.columns.map((a, s) => /* @__PURE__ */ r.jsx(
-                            "div",
-                            {
-                              className: "flex bg-transparent h-inherit grow min-w-60",
-                              style: {
-                                width: `calc(${100 * (a.columnWidth || 1) / D(e.columns)}% - ${(D(e.columns) - (a.columnWidth || 1)) / D(e.columns)}rem)`,
-                                minHeight: "inherit"
-                              },
-                              children: L.includes(a.graphType) ? /* @__PURE__ */ r.jsx(
-                                B,
-                                {
-                                  graphType: a.graphType,
-                                  dataFilters: a.dataFilters,
-                                  uiMode: c,
-                                  graphSettings: {
-                                    ...a.settings || {},
-                                    width: void 0,
-                                    height: void 0,
-                                    resetSelectionOnDoubleClick: a.attachedFilter ? !1 : a.settings?.resetSelectionOnDoubleClick,
-                                    styles: a.settings?.styles || y,
-                                    classNames: a.settings?.classNames || x,
-                                    radius: a.graphType === "donutChart" ? void 0 : a.settings?.radius,
-                                    size: a.graphType === "unitChart" ? a.settings?.size : void 0,
-                                    language: a.settings?.language || i.language,
-                                    theme: a.settings?.theme || g
-                                  },
-                                  dataSettings: {
-                                    data: h ? W(h, T || []) : void 0
-                                  },
-                                  dataTransform: a.dataTransform,
-                                  dataSelectionOptions: a.dataSelectionOptions,
-                                  advancedDataSelectionOptions: a.advancedDataSelectionOptions,
-                                  graphDataConfiguration: a.graphDataConfiguration,
-                                  debugMode: d,
-                                  readableHeader: C || []
-                                }
-                              ) : P.includes(a.graphType) ? /* @__PURE__ */ r.jsx(
-                                K,
-                                {
-                                  graphType: a.graphType,
-                                  uiMode: c,
-                                  graphSettings: {
-                                    ...a.settings || {},
-                                    width: void 0,
-                                    height: void 0,
-                                    resetSelectionOnDoubleClick: a.attachedFilter ? !1 : a.settings?.resetSelectionOnDoubleClick,
-                                    styles: a.settings?.styles || y,
-                                    classNames: a.settings?.classNames || x,
-                                    radius: a.graphType === "donutChart" ? void 0 : a.settings?.radius,
-                                    size: a.graphType === "unitChart" ? a.settings?.size : void 0,
-                                    language: a.settings?.language || i.language,
-                                    theme: a.settings?.theme || g
-                                  },
-                                  debugMode: d
-                                }
-                              ) : /* @__PURE__ */ r.jsx(
-                                J,
-                                {
-                                  graphType: a.graphType,
-                                  dataFilters: a.dataFilters,
-                                  uiMode: c,
-                                  graphSettings: {
-                                    ...a.settings || {},
-                                    width: void 0,
-                                    height: void 0,
-                                    resetSelectionOnDoubleClick: a.attachedFilter ? !1 : a.settings?.resetSelectionOnDoubleClick,
-                                    styles: a.settings?.styles || y,
-                                    classNames: a.settings?.classNames || x,
-                                    radius: a.graphType === "donutChart" ? void 0 : a.settings?.radius,
-                                    size: a.graphType === "unitChart" ? a.settings?.size : void 0,
-                                    language: a.settings?.language || i.language,
-                                    theme: a.settings?.theme || g
-                                  },
-                                  dataSettings: {
-                                    data: h ? W(h, T || []) : void 0
-                                  },
-                                  updateFilters: a.attachedFilter && ra.indexOf(a.graphType) !== -1 && o.findIndex((l) => l.filter === a.attachedFilter) !== -1 ? (l) => {
-                                    const I = o.findIndex(
-                                      (E) => E.filter === a.attachedFilter
-                                    ), U = l ? o[I].singleSelect ? { value: l, label: l } : [{ value: l, label: l }] : void 0;
-                                    m(a.attachedFilter, U);
-                                  } : void 0,
-                                  dataTransform: a.dataTransform,
-                                  dataSelectionOptions: a.dataSelectionOptions,
-                                  advancedDataSelectionOptions: a.advancedDataSelectionOptions,
-                                  graphDataConfiguration: a.graphDataConfiguration,
-                                  debugMode: d,
-                                  readableHeader: C || []
-                                }
-                              )
-                            },
-                            s
-                          ))
-                        },
-                        n
-                      ))
-                    }
-                  )
-                ] })
-              ] })
-            }
-          )
-        }
-      )
-    }
-  );
+    })(), A();
+  }, [t, l]), y(() => {
+    A();
+  }, [h]);
+  const m = (e, i) => {
+    V((a) => a.map((o) => o.filter === e ? {
+      ...o,
+      value: i
+    } : o));
+  };
+  return /* @__PURE__ */ s.jsxs(ta, { id: w, "aria-label": "This is a dashboard", backgroundColor: r.backgroundColor ?? !1, theme: p || "light", language: r.language || "en", padding: r.padding, children: [
+    r.title || r.description ? /* @__PURE__ */ s.jsx(ea, { graphTitle: r.title, graphDescription: r.description, isDashboard: !0 }) : null,
+    /* @__PURE__ */ s.jsxs("div", { className: "flex gap-4 flex-wrap", children: [
+      n.length !== 0 ? /* @__PURE__ */ s.jsx("div", { className: "flex-grow flex-shrink-0", style: {
+        width: j === "side" ? "280px" : "100%"
+      }, children: /* @__PURE__ */ s.jsx("div", { className: "flex flex-wrap items-start gap-4 w-full sticky top-4", children: n?.map((e, i) => /* @__PURE__ */ s.jsxs("div", { style: {
+        width: e.width || `calc(${100 / b}% - ${(b - 1) / b}rem)`,
+        flexGrow: 1,
+        flexShrink: 0,
+        minWidth: "240px"
+      }, children: [
+        /* @__PURE__ */ s.jsx(q, { className: "mb-2", children: e.label }),
+        e.singleSelect ? /* @__PURE__ */ s.jsx(G, { options: e.availableValues, isClearable: e.clearable === void 0 ? !0 : e.clearable, size: "sm", variant: d, isMulti: !1, isSearchable: !0, filterOption: H(N), onChange: (a) => {
+          m(e.filter, a);
+        }, defaultValue: e.defaultValue, value: e.value }) : /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+          /* @__PURE__ */ s.jsx(G, { options: e.availableValues, isMulti: !0, size: "sm", isClearable: e.clearable === void 0 ? !0 : e.clearable, variant: d, isSearchable: !0, controlShouldRenderValue: !0, closeMenuOnSelect: !1, hideSelectedOptions: !1, filterOption: H(N), onChange: (a) => {
+            m(e.filter, a);
+          }, value: e.value, defaultValue: e.defaultValue }),
+          e.allowSelectAll ? /* @__PURE__ */ s.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: () => {
+            m(e.filter, e.availableValues);
+          }, children: "Select all options" }) : null
+        ] })
+      ] }, i)) }) }) : null,
+      /* @__PURE__ */ s.jsx("div", { className: "flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]", style: {
+        width: j === "side" ? "calc(100% - 280px - 1rem)" : "100%"
+      }, children: r.rows.map((e, i) => /* @__PURE__ */ s.jsx("div", { className: "flex flex-wrap items-stretch gap-4 w-full h-auto", style: {
+        minHeight: `${e.height || 0}px`
+      }, children: e.columns.map((a, o) => /* @__PURE__ */ s.jsx("div", { className: "flex bg-transparent h-inherit grow min-w-60", style: {
+        width: `calc(${100 * (a.columnWidth || 1) / T(e.columns)}% - ${(T(e.columns) - (a.columnWidth || 1)) / T(e.columns)}rem)`,
+        minHeight: "inherit"
+      }, children: z.includes(a.graphType) ? /* @__PURE__ */ s.jsx(B, { graphType: a.graphType, dataFilters: a.dataFilters, uiMode: d, graphSettings: {
+        ...a.settings || {},
+        width: void 0,
+        height: void 0,
+        resetSelectionOnDoubleClick: a.attachedFilter ? !1 : a.settings?.resetSelectionOnDoubleClick,
+        styles: a.settings?.styles || v,
+        classNames: a.settings?.classNames || x,
+        radius: a.graphType === "donutChart" ? void 0 : a.settings?.radius,
+        size: a.graphType === "unitChart" ? a.settings?.size : void 0,
+        language: a.settings?.language || r.language,
+        theme: a.settings?.theme || p
+      }, dataSettings: {
+        data: g ? k(g, F || []) : void 0
+      }, dataTransform: a.dataTransform, dataSelectionOptions: a.dataSelectionOptions, advancedDataSelectionOptions: a.advancedDataSelectionOptions, graphDataConfiguration: a.graphDataConfiguration, debugMode: l, readableHeader: C || [] }) : L.includes(a.graphType) ? /* @__PURE__ */ s.jsx(K, { graphType: a.graphType, uiMode: d, graphSettings: {
+        ...a.settings || {},
+        width: void 0,
+        height: void 0,
+        resetSelectionOnDoubleClick: a.attachedFilter ? !1 : a.settings?.resetSelectionOnDoubleClick,
+        styles: a.settings?.styles || v,
+        classNames: a.settings?.classNames || x,
+        radius: a.graphType === "donutChart" ? void 0 : a.settings?.radius,
+        size: a.graphType === "unitChart" ? a.settings?.size : void 0,
+        language: a.settings?.language || r.language,
+        theme: a.settings?.theme || p
+      }, debugMode: l }) : /* @__PURE__ */ s.jsx(J, { graphType: a.graphType, dataFilters: a.dataFilters, uiMode: d, graphSettings: {
+        ...a.settings || {},
+        width: void 0,
+        height: void 0,
+        resetSelectionOnDoubleClick: a.attachedFilter ? !1 : a.settings?.resetSelectionOnDoubleClick,
+        styles: a.settings?.styles || v,
+        classNames: a.settings?.classNames || x,
+        radius: a.graphType === "donutChart" ? void 0 : a.settings?.radius,
+        size: a.graphType === "unitChart" ? a.settings?.size : void 0,
+        language: a.settings?.language || r.language,
+        theme: a.settings?.theme || p
+      }, dataSettings: {
+        data: g ? k(g, F || []) : void 0
+      }, updateFilters: a.attachedFilter && ia.indexOf(a.graphType) !== -1 && n.findIndex((c) => c.filter === a.attachedFilter) !== -1 ? (c) => {
+        const U = n.findIndex((E) => E.filter === a.attachedFilter), $ = c ? n[U].singleSelect ? {
+          value: c,
+          label: c
+        } : [{
+          value: c,
+          label: c
+        }] : void 0;
+        m(a.attachedFilter, $);
+      } : void 0, dataTransform: a.dataTransform, dataSelectionOptions: a.dataSelectionOptions, advancedDataSelectionOptions: a.advancedDataSelectionOptions, graphDataConfiguration: a.graphDataConfiguration, debugMode: l, readableHeader: C || [] }) }, o)) }, i)) })
+    ] })
+  ] });
 }
 export {
-  ya as PerformanceIntensiveMultiGraphDashboard
+  xa as PerformanceIntensiveMultiGraphDashboard
 };
 //# sourceMappingURL=PerformanceIntensiveMultiGraphDashboard.js.map