@undp/data-viz 1.5.8 → 2.0.0

package/dist/SingleGraphDashboard.js

@@ -1,523 +1,295 @@
-import { j as n, m as sa } from "./index-CHPV5EwG-BPSP-7Jg.js";
-import { useState as b, useRef as q, useMemo as O, useCallback as Z, useEffect as G } from "react";
-import { i as da } from "./index-V_JXij1_.js";
-import { f as P } from "./index-EArKRVKg.js";
-import { i as ua } from "./index-Bwrro8-q.js";
-import { Z as y, H as N } from "./DropdownSelect-CtOKZHD0.js";
-import { f as F, a as J, v as B, c as ca, w as K, G as Q } from "./checkIfMultiple-ChTJk2Tk.js";
-import { u as ha } from "./Typography-Ctgfl1J5.js";
-import { y as fa } from "./Spinner-C85UF28E.js";
-import { G as ga } from "./GraphEl-CqWzvOyr.js";
-import { f as pa, a as ma, b as Ca, c as xa, t as Ia } from "./fetchAndParseData-sapWbnYk.js";
-import { a as va, t as ba } from "./transformDataForAggregation-sBpdlX8n.js";
-import { g as X } from "./getUniqValue-DiCh_MOD.js";
-import { GraphHeader as wa } from "./GraphHeader.js";
-import { f as Y } from "./filterData-9nEcQ-Jp.js";
-import { g as ya } from "./getGraphList-DuColTJM.js";
-import { t as _ } from "./transformDataForSelect-D8AuvYdf.js";
-const Va = (o) => {
-  if (o.findIndex((r) => r.chartConfigId === "yMin") !== -1 && o.findIndex((r) => r.chartConfigId === "yMax") !== -1)
-    return o;
-  const t = [...o];
-  return o.findIndex((r) => r.chartConfigId === "yMin") === -1 && t.push({
+import { j as n } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as b, useRef as q, useEffectEvent as R, useEffect as w } from "react";
+import { i as sa } from "./index-BuwmuDFJ.js";
+import { f as F } from "./index-EArKRVKg.js";
+import { i as da } from "./index-Bwrro8-q.js";
+import { j as D, D as M } from "./DropdownSelect-BbdPQa2k.js";
+import { b as A, y as J, h as B, c as ua, $ as K, P as Q } from "./checkIfMultiple-Y9iKaV_u.js";
+import { w as ca } from "./Spinner-D7rnnwnA.js";
+import { G as ha } from "./GraphContainer-CRqzdKu2.js";
+import { G as fa } from "./GraphEl-DzRon4cb.js";
+import { f as pa, a as ga, b as ma, c as Ca, t as Ia } from "./fetchAndParseData-BpqkBPQL.js";
+import { a as va, t as ba } from "./transformDataForAggregation-CE3bAlHU.js";
+import { g as X } from "./getUniqValue-BKHCm3zE.js";
+import { GraphHeader as xa } from "./GraphHeader.js";
+import { f as Y } from "./filterData-DsAiFzKY.js";
+import { g as wa } from "./getGraphList-BpEWn1Tk.js";
+import { t as Z } from "./transformDataForSelect-D8AuvYdf.js";
+const Da = (s) => {
+  if (s.findIndex((t) => t.chartConfigId === "yMin") !== -1 && s.findIndex((t) => t.chartConfigId === "yMax") !== -1) return s;
+  const i = [...s];
+  return s.findIndex((t) => t.chartConfigId === "yMin") === -1 && i.push({
     chartConfigId: "yMin",
-    columnId: `${o[o.findIndex((r) => r.chartConfigId === "y")].columnId}Min`
-  }), o.findIndex((r) => r.chartConfigId === "yMax") === -1 && t.push({
+    columnId: `${s[s.findIndex((t) => t.chartConfigId === "y")].columnId}Min`
+  }), s.findIndex((t) => t.chartConfigId === "yMax") === -1 && i.push({
     chartConfigId: "yMax",
-    columnId: `${o[o.findIndex((r) => r.chartConfigId === "y")].columnId}Max`
-  }), t;
-}, H = (o, t) => {
-  const r = t?.map((V) => {
-    const h = o?.findIndex((i) => i.chartConfigId === V.chartConfigId);
-    if (h === -1) return {};
-    const x = o[h]?.allowedColumnIds?.findIndex(
-      (i) => i.value === V.columnId
-    );
-    return x === -1 ? {} : o[h].allowedColumnIds[x].graphSettings || {};
+    columnId: `${s[s.findIndex((t) => t.chartConfigId === "y")].columnId}Max`
+  }), i;
+}, O = (s, i) => {
+  const t = i?.map((V) => {
+    const C = s?.findIndex((o) => o.chartConfigId === V.chartConfigId);
+    if (C === -1) return {};
+    const x = s[C]?.allowedColumnIds?.findIndex((o) => o.value === V.columnId);
+    return x === -1 ? {} : s[C].allowedColumnIds[x].graphSettings || {};
   }) || [];
-  return Object.assign({}, ...r);
+  return Object.assign({}, ...t);
 };
-function Ua(o) {
+function Ea(s) {
   const {
-    graphSettings: t,
-    dataSettings: r,
+    graphSettings: i,
+    dataSettings: t,
     filters: V,
-    graphType: h,
+    graphType: C,
     dataTransform: x,
-    graphDataConfiguration: i,
-    dataFilters: R,
-    debugMode: D,
+    graphDataConfiguration: o,
+    dataFilters: P,
+    debugMode: y,
     dataSelectionOptions: I,
-    advancedDataSelectionOptions: L,
-    readableHeader: aa,
-    noOfFiltersPerRow: c = 4,
-    updateFilters: ea,
+    advancedDataSelectionOptions: k,
+    readableHeader: _,
+    noOfFiltersPerRow: u = 4,
+    updateFilters: aa,
     uiMode: f = "normal",
-    highlightDataPointSettings: m
-  } = o, [C, la] = b(void 0), [w, ta] = b(void 0), [g, v] = b(
-    i
-  ), [p, S] = b({}), [j, na] = b(void 0), [ra, ia] = b([]), z = q(null), U = q(
-    i
-  ), [$, W] = b([]), T = O(
-    () => ({
-      ignoreCase: !0,
-      ignoreAccents: !0,
-      trim: !0
-    }),
-    []
-  ), E = Z(async () => {
-    if (r)
+    highlightDataPointSettings: g
+  } = s, [L, H] = b(void 0), [c, ea] = b(void 0), [m, v] = b(o), [p, S] = b({}), [j, la] = b(void 0), [ta, na] = b([]), E = q(null), U = q(o), [T, z] = b([]), G = {
+    ignoreCase: !0,
+    ignoreAccents: !0,
+    trim: !0
+  }, W = R(() => {
+    const a = (V || []).map((r) => ({
+      filter: r.column,
+      label: r.label || `Filter by ${r.column}`,
+      singleSelect: r.singleSelect,
+      clearable: r.clearable,
+      defaultValue: Z(r.defaultValue),
+      value: Z(r.defaultValue),
+      availableValues: X(c, r.column).filter((e) => !r.excludeValues?.includes(`${e}`)).map((e) => ({
+        value: e,
+        label: e
+      })),
+      allowSelectAll: r.allowSelectAll,
+      width: r.width
+    }));
+    z(a);
+  });
+  w(() => {
+    (async () => {
       try {
-        const d = await (r.dataURL ? typeof r.dataURL == "string" ? r.fileType === "json" ? pa(
-          r.dataURL,
-          r.columnsToArray,
-          r.dataTransformation,
-          D
-        ) : r.fileType === "api" ? ma(
-          r.dataURL,
-          r.apiHeaders,
-          r.columnsToArray,
-          r.dataTransformation,
-          D
-        ) : Ca(
-          r.dataURL,
-          r.dataTransformation,
-          r.columnsToArray,
-          D,
-          r.delimiter,
-          !0
-        ) : xa(r.dataURL, r.idColumnTitle) : Ia(r.data, r.columnsToArray));
-        ta(d);
-        const e = (V || []).map((l) => ({
-          filter: l.column,
-          label: l.label || `Filter by ${l.column}`,
-          singleSelect: l.singleSelect,
-          clearable: l.clearable,
-          defaultValue: _(l.defaultValue),
-          value: _(l.defaultValue),
-          availableValues: X(d, l.column).filter((s) => !l.excludeValues?.includes(`${s}`)).map((s) => ({ value: s, label: s })),
-          allowSelectAll: l.allowSelectAll,
-          width: l.width
-        }));
-        W(e);
-      } catch (a) {
-        console.error("Data fetching error:", a);
+        const r = t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? await pa(t.dataURL, t.columnsToArray, t.dataTransformation, y) : t.fileType === "api" ? await ga(t.dataURL, t.apiHeaders, t.columnsToArray, t.dataTransformation, y) : await ma(t.dataURL, t.dataTransformation, t.columnsToArray, y, t.delimiter, !0) : await Ca(t.dataURL, t.idColumnTitle) : await Ia(t.data, t.columnsToArray);
+        ea(r);
+      } catch (r) {
+        console.error("Data fetching error:", r);
       }
-  }, [r, V, D]);
-  G(() => {
-    E();
-  }, [E]);
-  const k = O(() => !w || $.length === 0 ? w : w.filter(
-    (d) => $.every(
-      (e) => e.value && P([e.value]).length > 0 ? da(
-        P([d[e.filter]]),
-        P([e.value]).map((l) => l.value)
-      ).length > 0 : !0
-    )
-  ), [$, w]);
-  G(() => {
-    I && S(H(I, i));
-  }, [I, i]), G(() => {
-    w && la(k);
-  }, [k, h, w]), G(() => {
-    m?.column && k && ia(
-      X(k, m.column).filter((a) => !m?.excludeValues?.includes(`${a}`)).map((a) => ({ value: a, label: a }))
-    );
-  }, [k, m]), G(() => {
-    ua(U.current, i) || (v(i), U.current = i);
-  }, [i]);
-  const M = Z((a, d) => {
-    W((e) => e.map((l) => l.filter === a ? { ...l, value: d } : l));
-  }, []), oa = O(() => {
-    if (!C) return;
-    const a = h === "lineChartWithConfidenceInterval" && g ? Va(g) : g;
-    return va(
-      x ? ba(
-        Y(C, R || []),
-        x.keyColumn,
-        x.aggregationColumnsSetting
-      ) : Y(C, R || []),
-      h,
-      a
-    );
-  }, [h, g, C, R, x]);
-  return r ? /* @__PURE__ */ n.jsx(
-    "div",
-    {
-      className: `${t?.theme || "light"} flex ${t?.width ? "w-fit grow-0" : "w-full grow"}${t?.height ? "" : " h-full"}`,
-      dir: t?.language === "he" || t?.language === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ n.jsx(
-        "div",
-        {
-          className: sa(
-            `${t?.backgroundColor ? t?.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${t?.language || "en"}`,
-            t?.classNames?.graphContainer
-          ),
-          style: {
-            ...t?.styles?.graphContainer || {},
-            ...t?.backgroundColor && t?.backgroundColor !== !0 ? { backgroundColor: t?.backgroundColor } : {}
-          },
-          id: t?.graphID,
-          ref: z,
-          children: /* @__PURE__ */ n.jsx(
-            "div",
-            {
-              style: {
-                padding: t?.backgroundColor ? t?.padding || "1rem" : t?.padding || 0,
-                flexGrow: 1,
-                display: "flex"
-              },
-              children: /* @__PURE__ */ n.jsx("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: C || ya.filter((a) => a.geoHubMapPresentation).map((a) => a.graphID).indexOf(h) !== -1 ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-                p?.graphTitle || p?.graphDescription || t?.graphTitle || t?.graphDescription || t?.graphDownload || t?.dataDownload ? /* @__PURE__ */ n.jsx(
-                  wa,
-                  {
-                    styles: {
-                      title: p?.styles?.title || t?.styles?.title,
-                      description: p?.styles?.description || t?.styles?.description
-                    },
-                    classNames: {
-                      title: p?.classNames?.title || t?.classNames?.title,
-                      description: p?.classNames?.description || t?.classNames?.description
-                    },
-                    graphTitle: p?.graphTitle || t?.graphTitle,
-                    graphDescription: p?.graphDescription || t?.graphDescription,
-                    width: p?.width || t?.width,
-                    graphDownload: t?.graphDownload ? z.current : void 0,
-                    dataDownload: t?.dataDownload && C && C.length > 0 ? C : null
-                  }
-                ) : null,
-                $.length !== 0 || (I || []).length !== 0 || (L || []).length !== 0 || m ? /* @__PURE__ */ n.jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      gap: "1rem",
-                      flexWrap: "wrap",
-                      alignItems: "flex-start",
-                      width: "100%"
-                    },
-                    children: [
-                      L?.map((a, d) => /* @__PURE__ */ n.jsxs(
-                        "div",
-                        {
-                          style: {
-                            width: a.width || `calc(${100 / c}% - ${(c - 1) / c}rem)`,
-                            flexGrow: 1,
-                            flexShrink: a.ui !== "radio" ? 0 : 1,
-                            minWidth: "240px"
-                          },
-                          children: [
-                            /* @__PURE__ */ n.jsx(F, { className: "mb-2", children: a.label || "Graph by" }),
-                            a.ui !== "radio" ? /* @__PURE__ */ n.jsx(
-                              y,
-                              {
-                                options: a.options.map((e) => ({
-                                  ...e,
-                                  value: e.label
-                                })),
-                                size: "sm",
-                                isClearable: !1,
-                                isSearchable: !0,
-                                variant: f,
-                                controlShouldRenderValue: !0,
-                                defaultValue: a.defaultValue ? {
-                                  ...a.defaultValue,
-                                  value: a.defaultValue?.label
-                                } : {
-                                  ...a.options[0],
-                                  value: a.options[0].label
-                                },
-                                onChange: (e) => {
-                                  S(e?.graphSettings || {}), v(e?.dataConfiguration);
-                                }
-                              }
-                            ) : /* @__PURE__ */ n.jsx(
-                              J,
-                              {
-                                defaultValue: a.defaultValue?.label || a.options[0].label,
-                                variant: f,
-                                onValueChange: (e) => {
-                                  const l = a.options[a.options.findIndex((s) => s.label === e)];
-                                  S(l.graphSettings || {}), v(l.dataConfiguration);
-                                },
-                                children: a.options.map((e, l) => /* @__PURE__ */ n.jsx(B, { label: e.label, value: e.label }, l))
-                              }
-                            )
-                          ]
-                        },
-                        d
-                      )),
-                      I?.map((a, d) => /* @__PURE__ */ n.jsxs(
-                        "div",
-                        {
-                          style: {
-                            width: a.width || `calc(${100 / c}% - ${(c - 1) / c}rem)`,
-                            flexGrow: 1,
-                            flexShrink: a.ui !== "radio" ? 0 : 1,
-                            minWidth: "240px"
-                          },
-                          children: [
-                            /* @__PURE__ */ n.jsx(F, { className: "mb-2", children: a.label || `Visualize ${a.chartConfigId} by` }),
-                            ca(a.chartConfigId, g || []) ? a.ui !== "radio" ? /* @__PURE__ */ n.jsx(
-                              y,
-                              {
-                                options: a.allowedColumnIds,
-                                size: "sm",
-                                isMulti: !0,
-                                isSearchable: !0,
-                                variant: f,
-                                controlShouldRenderValue: !0,
-                                defaultValue: i ? i[i.findIndex(
-                                  (e) => e.chartConfigId === a.chartConfigId
-                                )].columnId.map(
-                                  (e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((l) => l.value === e)]
-                                ) : void 0,
-                                filterOption: N(T),
-                                onChange: (e) => {
-                                  const l = {
-                                    columnId: (e || []).map(
-                                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                      (u) => u.value
-                                    ),
-                                    chartConfigId: a.chartConfigId
-                                  }, s = g?.map(
-                                    (u) => u.chartConfigId === l.chartConfigId ? l : u
-                                  );
-                                  v(s);
-                                }
-                              }
-                            ) : /* @__PURE__ */ n.jsx(
-                              K,
-                              {
-                                variant: f,
-                                defaultValue: i ? i[i.findIndex(
-                                  (e) => e.chartConfigId === a.chartConfigId
-                                )].columnId.map(
-                                  (e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((l) => l.value === e)]
-                                ).map((e) => e.value) : [],
-                                onValueChange: (e) => {
-                                  const l = {
-                                    columnId: e || [],
-                                    chartConfigId: a.chartConfigId
-                                  }, s = g?.map(
-                                    (u) => u.chartConfigId === l.chartConfigId ? l : u
-                                  );
-                                  v(s);
-                                },
-                                children: a.allowedColumnIds.map((e, l) => /* @__PURE__ */ n.jsx(Q, { label: e.label, value: e.label }, l))
-                              }
-                            ) : a.ui !== "radio" ? /* @__PURE__ */ n.jsx(
-                              y,
-                              {
-                                options: a.allowedColumnIds,
-                                size: "sm",
-                                isClearable: !1,
-                                isSearchable: !0,
-                                variant: f,
-                                controlShouldRenderValue: !0,
-                                defaultValue: i ? a.allowedColumnIds[a.allowedColumnIds.findIndex(
-                                  (e) => e.value === i[i.findIndex(
-                                    (l) => l.chartConfigId === a.chartConfigId
-                                  )].columnId
-                                )] : void 0,
-                                onChange: (e) => {
-                                  const l = {
-                                    columnId: e?.value,
-                                    chartConfigId: a.chartConfigId
-                                  }, s = g?.map(
-                                    (u) => u.chartConfigId === l.chartConfigId ? l : u
-                                  );
-                                  S(
-                                    H(I, s)
-                                  ), v(s);
-                                }
-                              }
-                            ) : /* @__PURE__ */ n.jsx(
-                              J,
-                              {
-                                variant: f,
-                                defaultValue: i ? a.allowedColumnIds[a.allowedColumnIds.findIndex(
-                                  (e) => e.value === i[i.findIndex(
-                                    (l) => l.chartConfigId === a.chartConfigId
-                                  )].columnId
-                                )].label : "",
-                                onValueChange: (e) => {
-                                  const s = {
-                                    columnId: a.allowedColumnIds[a.allowedColumnIds.findIndex((A) => A.label === e)].value,
-                                    chartConfigId: a.chartConfigId
-                                  }, u = g?.map(
-                                    (A) => A.chartConfigId === s.chartConfigId ? s : A
-                                  );
-                                  S(
-                                    H(I, u)
-                                  ), v(u);
-                                },
-                                children: a.allowedColumnIds.map((e, l) => /* @__PURE__ */ n.jsx(B, { label: e.label, value: e.label }, l))
-                              }
-                            )
-                          ]
-                        },
-                        d
-                      )),
-                      $?.map((a, d) => /* @__PURE__ */ n.jsxs(
-                        "div",
-                        {
-                          style: {
-                            width: a.width || `calc(${100 / c}% - ${(c - 1) / c}rem)`,
-                            flexGrow: 1,
-                            flexShrink: 0,
-                            minWidth: "240px"
-                          },
-                          children: [
-                            /* @__PURE__ */ n.jsx(F, { className: "mb-2", children: a.label }),
-                            a.singleSelect ? /* @__PURE__ */ n.jsx(
-                              y,
-                              {
-                                options: a.availableValues,
-                                variant: f,
-                                isClearable: a.clearable === void 0 ? !0 : a.clearable,
-                                isSearchable: !0,
-                                controlShouldRenderValue: !0,
-                                filterOption: N(T),
-                                onChange: (e) => {
-                                  M(a.filter, e);
-                                },
-                                value: a.value,
-                                defaultValue: a.defaultValue
-                              }
-                            ) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-                              a.ui !== "radio" ? /* @__PURE__ */ n.jsx(
-                                y,
-                                {
-                                  options: a.availableValues,
-                                  variant: f,
-                                  size: "sm",
-                                  isMulti: !0,
-                                  isClearable: a.clearable === void 0 ? !0 : a.clearable,
-                                  isSearchable: !0,
-                                  controlShouldRenderValue: !0,
-                                  filterOption: N(T),
-                                  onChange: (e) => {
-                                    M(a.filter, e);
-                                  },
-                                  value: a.value,
-                                  defaultValue: a.defaultValue
-                                }
-                              ) : /* @__PURE__ */ n.jsx(
-                                K,
-                                {
-                                  variant: f,
-                                  defaultValue: a.defaultValue ? a.defaultValue.map((e) => `${e.value}`) : [],
-                                  value: a.value ? a.value.map((e) => `${e.value}`) : void 0,
-                                  onValueChange: (e) => {
-                                    M(
-                                      a.filter,
-                                      a.availableValues.filter((l) => e.indexOf(`${l.value}`) !== -1)
-                                    );
-                                  },
-                                  children: a.availableValues.map((e, l) => /* @__PURE__ */ n.jsx(
-                                    Q,
-                                    {
-                                      label: `${e.label}`,
-                                      value: `${e.value}`
-                                    },
-                                    l
-                                  ))
-                                }
-                              ),
-                              a.allowSelectAll ? /* @__PURE__ */ n.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(a.filter, a.availableValues);
-                                  },
-                                  children: "Select all options"
-                                }
-                              ) : null
-                            ] })
-                          ]
-                        },
-                        d
-                      )),
-                      m ? /* @__PURE__ */ n.jsxs(
-                        "div",
-                        {
-                          style: {
-                            width: m.width || `calc(${100 / c}% - ${(c - 1) / c}rem)`,
-                            flexGrow: 1,
-                            flexShrink: 0,
-                            minWidth: "240px"
-                          },
-                          children: [
-                            /* @__PURE__ */ n.jsx(F, { className: "mb-2", children: m.label || "Highlight data" }),
-                            /* @__PURE__ */ n.jsx(
-                              y,
-                              {
-                                options: ra,
-                                variant: f,
-                                size: "sm",
-                                isMulti: !0,
-                                isClearable: !0,
-                                isSearchable: !0,
-                                controlShouldRenderValue: !0,
-                                filterOption: N(T),
-                                onChange: (a) => {
-                                  na(a?.map((d) => d.value));
-                                },
-                                value: j?.map((a) => ({
-                                  label: a,
-                                  value: a
-                                })),
-                                defaultValue: m.defaultValues?.map((a) => ({
-                                  label: a,
-                                  value: a
-                                }))
-                              }
-                            )
-                          ]
-                        }
-                      ) : null
-                    ]
-                  }
-                ) : null,
-                /* @__PURE__ */ n.jsx(
-                  ga,
-                  {
-                    graph: h,
-                    graphData: oa,
-                    graphDataConfiguration: g,
-                    debugMode: D,
-                    readableHeader: aa || [],
-                    updateFilters: ea,
-                    settings: {
-                      ...t || {},
-                      ...p,
-                      graphTitle: void 0,
-                      graphDescription: void 0,
-                      graphDownload: !1,
-                      dataDownload: !1,
-                      backgroundColor: void 0,
-                      padding: "0",
-                      theme: t?.theme,
-                      ...j ? {
-                        highlightedDataPoints: j,
-                        highlightedIds: j?.map((a) => `${a}`),
-                        highlightedLines: j?.map((a) => a)
-                      } : {}
-                    }
-                  }
-                )
-              ] }) : /* @__PURE__ */ n.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ n.jsx(fa, {}) }) })
-            }
-          )
-        }
-      )
+    })(), W();
+  }, [t, y]), w(() => {
+    W();
+  }, [V]);
+  const ia = R(() => {
+    if (!c || T.length === 0) H(c);
+    else {
+      const a = c.filter((r) => T.every((e) => e.value && F([e.value]).length > 0 ? sa(F([r[e.filter]]), F([e.value]).map((l) => l.value)).length > 0 : !0));
+      H(a);
     }
-  ) : /* @__PURE__ */ n.jsx(ha, { 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." });
+  });
+  w(() => {
+    ia();
+  }, [T, c]), w(() => {
+    I && S(O(I, o));
+  }, [I, o]);
+  const ra = R(() => {
+    g?.column && L && na(X(L, g.column).filter((a) => !g?.excludeValues?.includes(`${a}`)).map((a) => ({
+      value: a,
+      label: a
+    })));
+  });
+  w(() => {
+    ra();
+  }, [g]), w(() => {
+    da(U.current, o) || (v(o), U.current = o);
+  }, [o]);
+  const $ = (a, r) => {
+    z((e) => e.map((l) => l.filter === a ? {
+      ...l,
+      value: r
+    } : l));
+  }, oa = c ? va(x ? ba(Y(c, P || []), x.keyColumn, x.aggregationColumnsSetting) : Y(c, P || []), C, C === "lineChartWithConfidenceInterval" && m ? Da(m) : m) : void 0;
+  return /* @__PURE__ */ n.jsx(ha, { className: i?.classNames?.graphContainer, style: i?.styles?.graphContainer, id: i?.graphID, ref: E, "aria-label": i?.ariaLabel, backgroundColor: i?.backgroundColor ?? !1, theme: i?.theme || "light", language: i?.language || "en", width: i?.width, height: i?.height, padding: i?.padding, children: c || wa.filter((a) => a.geoHubMapPresentation).map((a) => a.graphID).indexOf(C) !== -1 ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    p?.graphTitle || p?.graphDescription || i?.graphTitle || i?.graphDescription || i?.graphDownload || i?.dataDownload ? /* @__PURE__ */ n.jsx(xa, { styles: {
+      title: p?.styles?.title || i?.styles?.title,
+      description: p?.styles?.description || i?.styles?.description
+    }, classNames: {
+      title: p?.classNames?.title || i?.classNames?.title,
+      description: p?.classNames?.description || i?.classNames?.description
+    }, graphTitle: p?.graphTitle || i?.graphTitle, graphDescription: p?.graphDescription || i?.graphDescription, width: p?.width || i?.width, graphDownload: i?.graphDownload ? E : void 0, dataDownload: i?.dataDownload && c && c.length > 0 ? c : null }) : null,
+    T.length !== 0 || (I || []).length !== 0 || (k || []).length !== 0 || g ? /* @__PURE__ */ n.jsxs("div", { className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full", children: [
+      k?.map((a, r) => /* @__PURE__ */ n.jsxs("div", { style: {
+        width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        flexGrow: 1,
+        flexShrink: a.ui !== "radio" ? 0 : 1,
+        minWidth: "240px"
+      }, className: "pb-4", children: [
+        /* @__PURE__ */ n.jsx(A, { className: "mb-2", children: a.label || "Graph by" }),
+        a.ui !== "radio" ? /* @__PURE__ */ n.jsx(
+          D,
+          {
+            options: a.options.map((e) => ({
+              ...e,
+              value: e.label
+            })),
+            size: "sm",
+            isClearable: !1,
+            isSearchable: !0,
+            variant: f,
+            controlShouldRenderValue: !0,
+            defaultValue: a.defaultValue ? {
+              ...a.defaultValue,
+              value: a.defaultValue?.label
+            } : {
+              ...a.options[0],
+              value: a.options[0].label
+            },
+            onChange: (e) => {
+              S(e?.graphSettings || {}), v(e?.dataConfiguration);
+            }
+          }
+        ) : /* @__PURE__ */ n.jsx(J, { defaultValue: a.defaultValue?.label || a.options[0].label, variant: f, onValueChange: (e) => {
+          const l = a.options[a.options.findIndex((h) => h.label === e)];
+          S(l.graphSettings || {}), v(l.dataConfiguration);
+        }, children: a.options.map((e, l) => /* @__PURE__ */ n.jsx(B, { label: e.label, value: e.label }, l)) })
+      ] }, r)),
+      I?.map((a, r) => /* @__PURE__ */ n.jsxs("div", { style: {
+        width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        flexGrow: 1,
+        flexShrink: a.ui !== "radio" ? 0 : 1,
+        minWidth: "240px"
+      }, className: "pb-4", children: [
+        /* @__PURE__ */ n.jsx(A, { className: "mb-2", children: a.label || `Visualize ${a.chartConfigId} by` }),
+        ua(a.chartConfigId, m || []) ? a.ui !== "radio" ? /* @__PURE__ */ n.jsx(
+          D,
+          {
+            options: a.allowedColumnIds,
+            size: "sm",
+            isMulti: !0,
+            isSearchable: !0,
+            variant: f,
+            controlShouldRenderValue: !0,
+            defaultValue: o ? o[o.findIndex((e) => e.chartConfigId === a.chartConfigId)].columnId.map((e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((l) => l.value === e)]) : void 0,
+            filterOption: M(G),
+            onChange: (e) => {
+              const l = {
+                columnId: (e || []).map(
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (d) => d.value
+                ),
+                chartConfigId: a.chartConfigId
+              }, h = m?.map((d) => d.chartConfigId === l.chartConfigId ? l : d);
+              v(h);
+            }
+          }
+        ) : /* @__PURE__ */ n.jsx(K, { variant: f, defaultValue: o ? o[o.findIndex((e) => e.chartConfigId === a.chartConfigId)].columnId.map((e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((l) => l.value === e)]).map((e) => e.value) : [], onValueChange: (e) => {
+          const l = {
+            columnId: e || [],
+            chartConfigId: a.chartConfigId
+          }, h = m?.map((d) => d.chartConfigId === l.chartConfigId ? l : d);
+          v(h);
+        }, children: a.allowedColumnIds.map((e, l) => /* @__PURE__ */ n.jsx(Q, { label: e.label, value: e.label }, l)) }) : a.ui !== "radio" ? /* @__PURE__ */ n.jsx(
+          D,
+          {
+            options: a.allowedColumnIds,
+            size: "sm",
+            isClearable: !1,
+            isSearchable: !0,
+            variant: f,
+            controlShouldRenderValue: !0,
+            defaultValue: o ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === o[o.findIndex((l) => l.chartConfigId === a.chartConfigId)].columnId)] : void 0,
+            onChange: (e) => {
+              const l = {
+                columnId: e?.value,
+                chartConfigId: a.chartConfigId
+              }, h = m?.map((d) => d.chartConfigId === l.chartConfigId ? l : d);
+              S(O(I, h)), v(h);
+            }
+          }
+        ) : /* @__PURE__ */ n.jsx(J, { variant: f, defaultValue: o ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === o[o.findIndex((l) => l.chartConfigId === a.chartConfigId)].columnId)].label : "", onValueChange: (e) => {
+          const h = {
+            columnId: a.allowedColumnIds[a.allowedColumnIds.findIndex((N) => N.label === e)].value,
+            chartConfigId: a.chartConfigId
+          }, d = m?.map((N) => N.chartConfigId === h.chartConfigId ? h : N);
+          S(O(I, d)), v(d);
+        }, children: a.allowedColumnIds.map((e, l) => /* @__PURE__ */ n.jsx(B, { label: e.label, value: e.label }, l)) })
+      ] }, r)),
+      T?.map((a, r) => /* @__PURE__ */ n.jsxs("div", { style: {
+        width: a.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        flexGrow: 1,
+        flexShrink: 0,
+        minWidth: "240px"
+      }, className: "pb-4", children: [
+        /* @__PURE__ */ n.jsx(A, { className: "mb-2", children: a.label }),
+        a.singleSelect ? /* @__PURE__ */ n.jsx(D, { options: a.availableValues, variant: f, isClearable: a.clearable === void 0 ? !0 : a.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: M(G), onChange: (e) => {
+          $(a.filter, e);
+        }, value: a.value, defaultValue: a.defaultValue }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+          a.ui !== "radio" ? /* @__PURE__ */ n.jsx(D, { options: a.availableValues, variant: f, size: "sm", isMulti: !0, isClearable: a.clearable === void 0 ? !0 : a.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: M(G), onChange: (e) => {
+            $(a.filter, e);
+          }, value: a.value, defaultValue: a.defaultValue }) : /* @__PURE__ */ n.jsx(K, { variant: f, defaultValue: a.defaultValue ? a.defaultValue.map((e) => `${e.value}`) : [], value: a.value ? a.value.map((e) => `${e.value}`) : void 0, onValueChange: (e) => {
+            $(a.filter, a.availableValues.filter((l) => e.indexOf(`${l.value}`) !== -1));
+          }, children: a.availableValues.map((e, l) => /* @__PURE__ */ n.jsx(Q, { label: `${e.label}`, value: `${e.value}` }, l)) }),
+          a.allowSelectAll ? /* @__PURE__ */ n.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: () => {
+            $(a.filter, a.availableValues);
+          }, children: "Select all options" }) : null
+        ] })
+      ] }, r)),
+      g ? /* @__PURE__ */ n.jsxs("div", { style: {
+        width: g.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        flexGrow: 1,
+        flexShrink: 0,
+        minWidth: "240px"
+      }, className: "pb-4", children: [
+        /* @__PURE__ */ n.jsx(A, { className: "mb-2", children: g.label || "Highlight data" }),
+        /* @__PURE__ */ n.jsx(
+          D,
+          {
+            options: ta,
+            variant: f,
+            size: "sm",
+            isMulti: !0,
+            isClearable: !0,
+            isSearchable: !0,
+            controlShouldRenderValue: !0,
+            filterOption: M(G),
+            onChange: (a) => {
+              la(a?.map((r) => r.value));
+            },
+            value: j?.map((a) => ({
+              label: a,
+              value: a
+            })),
+            defaultValue: g.defaultValues?.map((a) => ({
+              label: a,
+              value: a
+            }))
+          }
+        )
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ n.jsx(fa, { graph: C, graphData: oa, graphDataConfiguration: m, debugMode: y, readableHeader: _ || [], updateFilters: aa, settings: {
+      ...i || {},
+      ...p,
+      graphTitle: void 0,
+      graphDescription: void 0,
+      graphDownload: !1,
+      dataDownload: !1,
+      backgroundColor: void 0,
+      padding: "0",
+      theme: i?.theme,
+      ...j ? {
+        highlightedDataPoints: j,
+        highlightedIds: j?.map((a) => `${a}`),
+        highlightedLines: j?.map((a) => a)
+      } : {}
+    } })
+  ] }) : /* @__PURE__ */ n.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ n.jsx(ca, {}) }) });
 }
 export {
-  Ua as SingleGraphDashboard
+  Ea as SingleGraphDashboard
 };
 //# sourceMappingURL=SingleGraphDashboard.js.map