@undp/data-viz 1.3.1 → 1.4.0

package/dist/SingleGraphDashboardThreeDGraphs.js

@@ -0,0 +1,610 @@
+import { j as r, m as de } from "./index-CHPV5EwG-BPSP-7Jg.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-C1rRk_50.js";
+import { f as z } from "./index-UV9hjG_S.js";
+import { i as ce } from "./index-27yTRcko.js";
+import { Z as j, H as R } from "./DropdownSelect-CDC9lEqU.js";
+import { g as he, f as F, a as Q, v as X, c as ge, w as Y, G as _ } from "./checkIfMultiple-CYp3vADF.js";
+import { u as W } from "./Typography-Ctgfl1J5.js";
+import { y as pe } from "./Spinner-C85UF28E.js";
+import { ThreeDGlobe as fe } from "./ThreeDGlobe.js";
+import { f as me, a as Ce, b as xe, c as be, t as ve } from "./fetchAndParseData-Bcmr659B.js";
+import { a as we, t as Ie } from "./transformDataForAggregation-CdcwlnNe.js";
+import { g as ee } from "./getUniqValue-BtUENB2H.js";
+import { GraphHeader as De } from "./GraphHeader.js";
+import { f as ae } from "./filterData-B8ocT57s.js";
+import { g as ye } from "./getGraphList-DuColTJM.js";
+import { t as te } from "./transformDataForSelect-D8AuvYdf.js";
+function je(v) {
+  const {
+    settings: a,
+    graph: o,
+    graphData: c,
+    debugMode: h,
+    graphDataConfiguration: f,
+    readableHeader: i,
+    updateFilters: S
+  } = 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(
+          W,
+          {
+            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) {
+      case "threeDGlobe":
+        return {
+          globeOffset: a?.globeOffset,
+          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,
+          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) => {
+            S?.(L.id);
+          },
+          detailsOnClick: a?.detailsOnClick,
+          styles: a?.styles,
+          classNames: a?.classNames,
+          categorical: a?.categorical,
+          autoRotate: a?.autoRotate,
+          globeMaterial: a?.globeMaterial,
+          atmosphereColor: a?.atmosphereColor,
+          enableZoom: a?.enableZoom
+        };
+      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(
+        W,
+        {
+          size: "sm",
+          marginBottom: "none",
+          className: "p-2 text-center text-accent-dark-red dark:text-accent-red",
+          children: `Invalid chart type: ${o}`
+        }
+      )
+    }
+  );
+}
+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 || {};
+  }) || [];
+  return Object.assign({}, ...o);
+};
+function We(v) {
+  const {
+    graphSettings: a,
+    dataSettings: o,
+    filters: c,
+    graphType: h,
+    dataTransform: f,
+    graphDataConfiguration: i,
+    dataFilters: S,
+    debugMode: w,
+    dataSelectionOptions: m,
+    advancedDataSelectionOptions: V,
+    readableHeader: H,
+    noOfFiltersPerRow: d = 4,
+    updateFilters: L,
+    uiMode: g = "normal",
+    highlightDataPointSettings: C
+  } = v, [x, le] = D(void 0), [y, re] = D(void 0), [b, I] = D(
+    i
+  ), [p, k] = D({}), [T, oe] = D(void 0), [ie, ne] = D([]), B = J(null), E = J(
+    i
+  ), [$, Z] = D([]), O = 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
+      ) : xe(
+        o.dataURL,
+        o.dataTransformation,
+        o.columnsToArray,
+        w,
+        o.delimiter,
+        !0
+      ) : be(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);
+    }
+  }, [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 P = K((e, s) => {
+    Z((t) => t.map((l) => l.filter === e ? { ...l, value: s } : l));
+  }, []), se = M(() => {
+    if (!x) return;
+    const e = b;
+    return we(
+      f ? Ie(
+        ae(x, S || []),
+        f.keyColumn,
+        f.aggregationColumnsSetting
+      ) : ae(x, S || []),
+      h,
+      e
+    );
+  }, [h, b, x, S, 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: B,
+          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: x || 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 ? B.current : void 0,
+                    dataDownload: a?.dataDownload && x && x.length > 0 ? x : 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(
+                              j,
+                              {
+                                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, b || []) ? e.ui !== "radio" ? /* @__PURE__ */ r.jsx(
+                              j,
+                              {
+                                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(O),
+                                onChange: (t) => {
+                                  const l = {
+                                    columnId: (t || []).map(
+                                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                      (u) => u.value
+                                    ),
+                                    chartConfigId: e.chartConfigId
+                                  }, n = b?.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 = b?.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(
+                              j,
+                              {
+                                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 = b?.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((A) => A.label === t)].value,
+                                    chartConfigId: e.chartConfigId
+                                  }, u = b?.map(
+                                    (A) => A.chartConfigId === n.chartConfigId ? n : A
+                                  );
+                                  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(
+                              j,
+                              {
+                                options: e.availableValues,
+                                variant: g,
+                                isClearable: e.clearable === void 0 ? !0 : e.clearable,
+                                isSearchable: !0,
+                                controlShouldRenderValue: !0,
+                                filterOption: R(O),
+                                onChange: (t) => {
+                                  P(e.filter, t);
+                                },
+                                value: e.value,
+                                defaultValue: e.defaultValue
+                              }
+                            ) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                              e.ui !== "radio" ? /* @__PURE__ */ r.jsx(
+                                j,
+                                {
+                                  options: e.availableValues,
+                                  variant: g,
+                                  size: "sm",
+                                  isMulti: !0,
+                                  isClearable: e.clearable === void 0 ? !0 : e.clearable,
+                                  isSearchable: !0,
+                                  controlShouldRenderValue: !0,
+                                  filterOption: R(O),
+                                  onChange: (t) => {
+                                    P(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) => {
+                                    P(
+                                      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: () => {
+                                    P(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(
+                              j,
+                              {
+                                options: ie,
+                                variant: g,
+                                size: "sm",
+                                isMulti: !0,
+                                isClearable: !0,
+                                isSearchable: !0,
+                                controlShouldRenderValue: !0,
+                                filterOption: R(O),
+                                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(
+                  je,
+                  {
+                    graph: h,
+                    graphData: se,
+                    graphDataConfiguration: b,
+                    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, {}) }) })
+            }
+          )
+        }
+      )
+    }
+  ) : /* @__PURE__ */ r.jsx(W, { 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." });
+}
+export {
+  We as SingleGraphDashboardThreeDGraphs
+};
+//# sourceMappingURL=SingleGraphDashboardThreeDGraphs.js.map