@undp/data-viz 2.0.8 → 2.1.0

package/dist/SingleGraphDashboard.js

@@ -1,136 +1,137 @@
-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 { j as t } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as b, useRef as B, 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 { i as ua } from "./index-Bwrro8-q.js";
+import { j as V, D as M } from "./DropdownSelect-BbdPQa2k.js";
+import { b as A, y as H, h as O, c as da, $ as K, P as Q } from "./checkIfMultiple-CIRtG0KE.js";
 import { w as ha } from "./Spinner-D7rnnwnA.js";
 import { G as ca } from "./GraphContainer-CRqzdKu2.js";
-import { G as fa } from "./GraphEl-CGq1EWRn.js";
+import { G as fa } from "./GraphEl-ebgfxefq.js";
 import { f as ga, a as pa, b as ma, c as Ca, t as va } from "./fetchAndParseData-BpqkBPQL.js";
 import { a as Ia, t as ba } from "./transformDataForAggregation-DEU__LUl.js";
-import { g as X } from "./getUniqValue-BKHCm3zE.js";
+import { g as X } from "./getUniqValue-DsqSii6M.js";
 import { GraphHeader as xa } from "./GraphHeader.js";
 import { f as Y } from "./filterData-DsAiFzKY.js";
 import { g as wa } from "./getGraphList-Dxwo9TDb.js";
 import { t as Z } from "./transformDataForSelect-D8AuvYdf.js";
-const Da = (s) => {
-  if (s.findIndex((l) => l.chartConfigId === "yMin") !== -1 && s.findIndex((l) => l.chartConfigId === "yMax") !== -1) return s;
-  const i = [...s];
-  return s.findIndex((l) => l.chartConfigId === "yMin") === -1 && i.push({
+const Va = (s) => {
+  if (s.findIndex((i) => i.chartConfigId === "yMin") !== -1 && s.findIndex((i) => i.chartConfigId === "yMax") !== -1) return s;
+  const n = [...s];
+  return s.findIndex((i) => i.chartConfigId === "yMin") === -1 && n.push({
     chartConfigId: "yMin",
-    columnId: `${s[s.findIndex((l) => l.chartConfigId === "y")].columnId}Min`
-  }), s.findIndex((l) => l.chartConfigId === "yMax") === -1 && i.push({
+    columnId: `${s[s.findIndex((i) => i.chartConfigId === "y")].columnId}Min`
+  }), s.findIndex((i) => i.chartConfigId === "yMax") === -1 && n.push({
     chartConfigId: "yMax",
-    columnId: `${s[s.findIndex((l) => l.chartConfigId === "y")].columnId}Max`
-  }), i;
-}, H = (s, i) => {
-  const l = i?.map((V) => {
-    const C = s?.findIndex((o) => o.chartConfigId === V.chartConfigId);
+    columnId: `${s[s.findIndex((i) => i.chartConfigId === "y")].columnId}Max`
+  }), n;
+}, P = (s, n) => {
+  const i = n?.map((D) => {
+    const C = s?.findIndex((o) => o.chartConfigId === D.chartConfigId);
     if (C === -1) return {};
-    const x = s[C]?.allowedColumnIds?.findIndex((o) => o.value === V.columnId);
+    const x = s[C]?.allowedColumnIds?.findIndex((o) => o.value === D.columnId);
     return x === -1 ? {} : s[C].allowedColumnIds[x].graphSettings || {};
   }) || [];
-  return Object.assign({}, ...l);
+  return Object.assign({}, ...i);
 };
 function Ea(s) {
   const {
-    graphSettings: i,
-    dataSettings: l,
-    filters: V,
+    graphSettings: n,
+    dataSettings: i,
+    filters: D,
     graphType: C,
     dataTransform: x,
     graphDataConfiguration: o,
-    dataFilters: O,
+    dataFilters: k,
     debugMode: y,
     dataSelectionOptions: v,
-    advancedDataSelectionOptions: P,
+    advancedDataSelectionOptions: L,
     readableHeader: _,
-    noOfFiltersPerRow: u = 4,
+    noOfFiltersPerRow: h = 4,
     updateFilters: aa,
-    uiMode: f = "normal",
-    highlightDataPointSettings: p
-  } = s, [k, L] = b(void 0), [h, ea] = b(void 0), [m, I] = b(o), [g, S] = b({}), [j, ta] = b(void 0), [la, ia] = b([]), E = q(null), U = q(o), [T, z] = b([]), G = {
+    uiMode: c = "normal",
+    highlightDataPointSettings: g
+  } = s, [E, U] = b(void 0), [u, ea] = b(void 0), [m, I] = b(o), [p, S] = b({}), [j, la] = b(void 0), [ta, ia] = b([]), z = B(null), W = B(o), [$, q] = b([]), G = {
     ignoreCase: !0,
     ignoreAccents: !0,
     trim: !0
-  }, W = R(() => {
-    const a = (V || []).map((r) => ({
+  }, J = R(() => {
+    const a = (D || []).map((r) => ({
       filter: r.column,
       label: r.label || `Filter by ${r.column}`,
       singleSelect: r.singleSelect,
       clearable: r.clearable,
+      ui: r.ui,
       defaultValue: Z(r.defaultValue),
       value: Z(r.defaultValue),
-      availableValues: X(h, r.column).filter((e) => !r.excludeValues?.includes(`${e}`)).map((e) => ({
+      availableValues: X(u, r.column).filter((e) => !r.excludeValues?.includes(`${e}`)).map((e) => ({
         value: e,
         label: e
       })),
       allowSelectAll: r.allowSelectAll,
       width: r.width
     }));
-    z(a);
+    q(a);
   });
   w(() => {
     (async () => {
       try {
-        const r = l.dataURL ? typeof l.dataURL == "string" ? l.fileType === "json" ? await ga(l.dataURL, l.columnsToArray, l.dataTransformation, y) : l.fileType === "api" ? await pa(l.dataURL, l.apiHeaders, l.columnsToArray, l.dataTransformation, y) : await ma(l.dataURL, l.dataTransformation, l.columnsToArray, y, l.delimiter, !0) : await Ca(l.dataURL, l.idColumnTitle) : await va(l.data, l.columnsToArray);
+        const r = i.dataURL ? typeof i.dataURL == "string" ? i.fileType === "json" ? await ga(i.dataURL, i.columnsToArray, i.dataTransformation, y) : i.fileType === "api" ? await pa(i.dataURL, i.apiHeaders, i.columnsToArray, i.dataTransformation, y) : await ma(i.dataURL, i.dataTransformation, i.columnsToArray, y, i.delimiter, !0) : await Ca(i.dataURL, i.idColumnTitle) : await va(i.data, i.columnsToArray);
         ea(r);
       } catch (r) {
         console.error("Data fetching error:", r);
       }
-    })(), W();
-  }, [l, y]), w(() => {
-    W();
-  }, [V]);
+    })(), J();
+  }, [i, y]), w(() => {
+    J();
+  }, [D, u]);
   const na = R(() => {
-    if (!h || T.length === 0) L(h);
+    if (!u || $.length === 0) U(u);
     else {
-      const a = h.filter((r) => T.every((e) => e.value && F([e.value]).length > 0 ? sa(F([r[e.filter]]), F([e.value]).map((t) => t.value)).length > 0 : !0));
-      L(a);
+      const a = u.filter((r) => $.every((e) => e.value && F([e.value]).length > 0 ? sa(F([r[e.filter]]), F([e.value]).map((l) => l.value)).length > 0 : !0));
+      U(a);
     }
   });
   w(() => {
     na();
-  }, [T, h]), w(() => {
-    v && S(H(v, o));
+  }, [$, u]), w(() => {
+    v && S(P(v, o));
   }, [v, o]);
   const ra = R(() => {
-    p?.column && k && ia(X(k, p.column).filter((a) => !p?.excludeValues?.includes(`${a}`)).map((a) => ({
+    g?.column && E && ia(X(E, g.column).filter((a) => !g?.excludeValues?.includes(`${a}`)).map((a) => ({
       value: a,
       label: a
     })));
   });
   w(() => {
     ra();
-  }, [p]), w(() => {
-    da(U.current, o) || (I(o), U.current = o);
+  }, [g]), w(() => {
+    ua(W.current, o) || (I(o), W.current = o);
   }, [o]);
-  const $ = (a, r) => {
-    z((e) => e.map((t) => t.filter === a ? {
-      ...t,
+  const T = (a, r) => {
+    q((e) => e.map((l) => l.filter === a ? {
+      ...l,
       value: r
-    } : t));
-  }, oa = h ? Ia(x ? ba(Y(h, O || []), x.keyColumn, x.aggregationColumnsSetting) : Y(h, O || []), C, C === "lineChartWithConfidenceInterval" && m ? Da(m) : m) : void 0;
-  return /* @__PURE__ */ n.jsx(ca, { 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, minHeight: i?.minHeight, relativeHeight: i?.relativeHeight, children: h || wa.filter((a) => a.geoHubMapPresentation).map((a) => a.graphID).indexOf(C) !== -1 ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    g?.graphTitle || g?.graphDescription || i?.graphTitle || i?.graphDescription || i?.graphDownload || i?.dataDownload ? /* @__PURE__ */ n.jsx(xa, { styles: {
-      title: g?.styles?.title || i?.styles?.title,
-      description: g?.styles?.description || i?.styles?.description
+    } : l));
+  }, oa = u ? Ia(x ? ba(Y(u, k || []), x.keyColumn, x.aggregationColumnsSetting) : Y(u, k || []), C, C === "lineChartWithConfidenceInterval" && m ? Va(m) : m) : void 0;
+  return /* @__PURE__ */ t.jsx(ca, { className: n?.classNames?.graphContainer, style: n?.styles?.graphContainer, id: n?.graphID, ref: z, "aria-label": n?.ariaLabel, backgroundColor: n?.backgroundColor ?? !1, theme: n?.theme || "light", language: n?.language || "en", width: n?.width, height: n?.height, padding: n?.padding, minHeight: n?.minHeight, relativeHeight: n?.relativeHeight, children: u || wa.filter((a) => a.geoHubMapPresentation).map((a) => a.graphID).indexOf(C) !== -1 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    p?.graphTitle || p?.graphDescription || n?.graphTitle || n?.graphDescription || n?.graphDownload || n?.dataDownload ? /* @__PURE__ */ t.jsx(xa, { styles: {
+      title: p?.styles?.title || n?.styles?.title,
+      description: p?.styles?.description || n?.styles?.description
     }, classNames: {
-      title: g?.classNames?.title || i?.classNames?.title,
-      description: g?.classNames?.description || i?.classNames?.description
-    }, graphTitle: g?.graphTitle || i?.graphTitle, graphDescription: g?.graphDescription || i?.graphDescription, width: g?.width || i?.width, graphDownload: i?.graphDownload ? E : void 0, dataDownload: i?.dataDownload && h && h.length > 0 ? h : null }) : null,
-    T.length !== 0 || (v || []).length !== 0 || (P || []).length !== 0 || p ? /* @__PURE__ */ n.jsxs("div", { className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full", children: [
-      P?.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,
+      title: p?.classNames?.title || n?.classNames?.title,
+      description: p?.classNames?.description || n?.classNames?.description
+    }, graphTitle: p?.graphTitle || n?.graphTitle, graphDescription: p?.graphDescription || n?.graphDescription, width: p?.width || n?.width, graphDownload: n?.graphDownload ? z : void 0, dataDownload: n?.dataDownload && u && u.length > 0 ? u : null }) : null,
+    $.length !== 0 || (v || []).length !== 0 || (L || []).length !== 0 || g ? /* @__PURE__ */ t.jsxs("div", { className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full", children: [
+      L?.map((a, r) => /* @__PURE__ */ t.jsxs("div", { style: {
+        width: a.width || `calc(${100 / h}% - ${(h - 1) / h}rem)`,
+        flexGrow: a.width ? 0 : 1,
+        flexShrink: a.ui !== "radio" || a.width ? 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,
+        /* @__PURE__ */ t.jsx(A, { className: "mb-2", children: a.label || "Graph by" }),
+        a.ui !== "radio" ? /* @__PURE__ */ t.jsx(
+          V,
           {
             options: a.options.map((e) => ({
               ...e,
@@ -139,7 +140,7 @@ function Ea(s) {
             size: "sm",
             isClearable: !1,
             isSearchable: !0,
-            variant: f,
+            variant: c,
             controlShouldRenderValue: !0,
             defaultValue: a.defaultValue ? {
               ...a.defaultValue,
@@ -152,104 +153,106 @@ function Ea(s) {
               S(e?.graphSettings || {}), I(e?.dataConfiguration);
             }
           }
-        ) : /* @__PURE__ */ n.jsx(J, { defaultValue: a.defaultValue?.label || a.options[0].label, variant: f, onValueChange: (e) => {
-          const t = a.options[a.options.findIndex((c) => c.label === e)];
-          S(t.graphSettings || {}), I(t.dataConfiguration);
-        }, children: a.options.map((e, t) => /* @__PURE__ */ n.jsx(B, { label: e.label, value: e.label }, t)) })
+        ) : /* @__PURE__ */ t.jsx(H, { defaultValue: a.defaultValue?.label || a.options[0].label, variant: c, onValueChange: (e) => {
+          const l = a.options[a.options.findIndex((f) => f.label === e)];
+          S(l.graphSettings || {}), I(l.dataConfiguration);
+        }, children: a.options.map((e, l) => /* @__PURE__ */ t.jsx(O, { label: e.label, value: e.label }, l)) })
       ] }, r)),
-      v?.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,
+      v?.map((a, r) => /* @__PURE__ */ t.jsxs("div", { style: {
+        width: a.width || `calc(${100 / h}% - ${(h - 1) / h}rem)`,
+        flexGrow: a.width ? 0 : 1,
+        flexShrink: a.ui !== "radio" || a.width ? 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,
+        /* @__PURE__ */ t.jsx(A, { className: "mb-2", children: a.label || `Visualize ${a.chartConfigId} by` }),
+        da(a.chartConfigId, m || []) ? a.ui !== "radio" ? /* @__PURE__ */ t.jsx(
+          V,
           {
             options: a.allowedColumnIds,
             size: "sm",
             isMulti: !0,
             isSearchable: !0,
-            variant: f,
+            variant: c,
             controlShouldRenderValue: !0,
-            defaultValue: o ? o[o.findIndex((e) => e.chartConfigId === a.chartConfigId)].columnId.map((e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((t) => t.value === e)]) : void 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 t = {
+              const l = {
                 columnId: (e || []).map(
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
                   (d) => d.value
                 ),
                 chartConfigId: a.chartConfigId
-              }, c = m?.map((d) => d.chartConfigId === t.chartConfigId ? t : d);
-              I(c);
+              }, f = m?.map((d) => d.chartConfigId === l.chartConfigId ? l : d);
+              I(f);
             }
           }
-        ) : /* @__PURE__ */ n.jsx(K, { variant: f, defaultValue: o ? o[o.findIndex((e) => e.chartConfigId === a.chartConfigId)].columnId.map((e) => a.allowedColumnIds[a.allowedColumnIds.findIndex((t) => t.value === e)]).map((e) => e.value) : [], onValueChange: (e) => {
-          const t = {
+        ) : /* @__PURE__ */ t.jsx(K, { variant: c, 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
-          }, c = m?.map((d) => d.chartConfigId === t.chartConfigId ? t : d);
-          I(c);
-        }, children: a.allowedColumnIds.map((e, t) => /* @__PURE__ */ n.jsx(Q, { label: e.label, value: e.label }, t)) }) : a.ui !== "radio" ? /* @__PURE__ */ n.jsx(
-          D,
+          }, f = m?.map((d) => d.chartConfigId === l.chartConfigId ? l : d);
+          I(f);
+        }, children: a.allowedColumnIds.map((e, l) => /* @__PURE__ */ t.jsx(Q, { label: e.label, value: e.label }, l)) }) : a.ui !== "radio" ? /* @__PURE__ */ t.jsx(
+          V,
           {
             options: a.allowedColumnIds,
             size: "sm",
             isClearable: !1,
             isSearchable: !0,
-            variant: f,
+            variant: c,
             controlShouldRenderValue: !0,
-            defaultValue: o ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === o[o.findIndex((t) => t.chartConfigId === a.chartConfigId)].columnId)] : void 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 t = {
+              const l = {
                 columnId: e?.value,
                 chartConfigId: a.chartConfigId
-              }, c = m?.map((d) => d.chartConfigId === t.chartConfigId ? t : d);
-              S(H(v, c)), I(c);
+              }, f = m?.map((d) => d.chartConfigId === l.chartConfigId ? l : d);
+              S(P(v, f)), I(f);
             }
           }
-        ) : /* @__PURE__ */ n.jsx(J, { variant: f, defaultValue: o ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === o[o.findIndex((t) => t.chartConfigId === a.chartConfigId)].columnId)].label : "", onValueChange: (e) => {
-          const c = {
+        ) : /* @__PURE__ */ t.jsx(H, { variant: c, defaultValue: o ? a.allowedColumnIds[a.allowedColumnIds.findIndex((e) => e.value === o[o.findIndex((l) => l.chartConfigId === a.chartConfigId)].columnId)].label : "", onValueChange: (e) => {
+          const f = {
             columnId: a.allowedColumnIds[a.allowedColumnIds.findIndex((N) => N.label === e)].value,
             chartConfigId: a.chartConfigId
-          }, d = m?.map((N) => N.chartConfigId === c.chartConfigId ? c : N);
-          S(H(v, d)), I(d);
-        }, children: a.allowedColumnIds.map((e, t) => /* @__PURE__ */ n.jsx(B, { label: e.label, value: e.label }, t)) })
+          }, d = m?.map((N) => N.chartConfigId === f.chartConfigId ? f : N);
+          S(P(v, d)), I(d);
+        }, children: a.allowedColumnIds.map((e, l) => /* @__PURE__ */ t.jsx(O, { 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,
+      $?.map((a, r) => /* @__PURE__ */ t.jsxs("div", { style: {
+        width: a.width || `calc(${100 / h}% - ${(h - 1) / h}rem)`,
+        flexGrow: a.width ? 0 : 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((t) => e.indexOf(`${t.value}`) !== -1));
-          }, children: a.availableValues.map((e, t) => /* @__PURE__ */ n.jsx(Q, { label: `${e.label}`, value: `${e.value}` }, t)) }),
-          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);
+        /* @__PURE__ */ t.jsx(A, { className: "mb-2", children: a.label }),
+        a.singleSelect ? a.ui !== "radio" ? /* @__PURE__ */ t.jsx(V, { options: a.availableValues, variant: c, isClearable: a.clearable === void 0 ? !0 : a.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: M(G), onChange: (e) => {
+          T(a.filter, e);
+        }, value: a.value, defaultValue: a.defaultValue }) : /* @__PURE__ */ t.jsx(H, { variant: c, defaultValue: a.defaultValue.value, onValueChange: (e) => {
+          T(a.filter, a.availableValues.filter((l) => l.value === e));
+        }, children: a.availableValues.map((e, l) => /* @__PURE__ */ t.jsx(O, { label: `${e.label}`, value: `${e.value}` }, l)) }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          a.ui !== "radio" ? /* @__PURE__ */ t.jsx(V, { options: a.availableValues, variant: c, size: "sm", isMulti: !0, isClearable: a.clearable === void 0 ? !0 : a.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: M(G), onChange: (e) => {
+            T(a.filter, e);
+          }, value: a.value, defaultValue: a.defaultValue }) : /* @__PURE__ */ t.jsx(K, { variant: c, defaultValue: a.defaultValue ? a.defaultValue.map((e) => `${e.value}`) : [], value: a.value ? a.value.map((e) => `${e.value}`) : void 0, onValueChange: (e) => {
+            T(a.filter, a.availableValues.filter((l) => e.indexOf(`${l.value}`) !== -1));
+          }, children: a.availableValues.map((e, l) => /* @__PURE__ */ t.jsx(Q, { label: `${e.label}`, value: `${e.value}` }, l)) }),
+          a.allowSelectAll ? /* @__PURE__ */ t.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: () => {
+            T(a.filter, a.availableValues);
           }, children: "Select all options" }) : null
         ] })
       ] }, r)),
-      p ? /* @__PURE__ */ n.jsxs("div", { style: {
-        width: p.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
-        flexGrow: 1,
+      g ? /* @__PURE__ */ t.jsxs("div", { style: {
+        width: g.width || `calc(${100 / h}% - ${(h - 1) / h}rem)`,
+        flexGrow: g.width ? 0 : 1,
         flexShrink: 0,
         minWidth: "240px"
       }, className: "pb-4", children: [
-        /* @__PURE__ */ n.jsx(A, { className: "mb-2", children: p.label || "Highlight data" }),
-        /* @__PURE__ */ n.jsx(
-          D,
+        /* @__PURE__ */ t.jsx(A, { className: "mb-2", children: g.label || "Highlight data" }),
+        /* @__PURE__ */ t.jsx(
+          V,
           {
-            options: la,
-            variant: f,
+            options: ta,
+            variant: c,
             size: "sm",
             isMulti: !0,
             isClearable: !0,
@@ -257,13 +260,13 @@ function Ea(s) {
             controlShouldRenderValue: !0,
             filterOption: M(G),
             onChange: (a) => {
-              ta(a?.map((r) => r.value));
+              la(a?.map((r) => r.value));
             },
             value: j?.map((a) => ({
               label: a,
               value: a
             })),
-            defaultValue: p.defaultValues?.map((a) => ({
+            defaultValue: g.defaultValues?.map((a) => ({
               label: a,
               value: a
             }))
@@ -271,9 +274,9 @@ function Ea(s) {
         )
       ] }) : null
     ] }) : null,
-    /* @__PURE__ */ n.jsx(fa, { graph: C, graphData: oa, graphDataConfiguration: m, debugMode: y, readableHeader: _ || [], updateFilters: aa, settings: {
-      ...i || {},
-      ...g,
+    /* @__PURE__ */ t.jsx(fa, { graph: C, graphData: oa, graphDataConfiguration: m, debugMode: y, readableHeader: _ || [], updateFilters: aa, settings: {
+      ...n || {},
+      ...p,
       graphTitle: void 0,
       graphDescription: void 0,
       graphDownload: !1,
@@ -284,14 +287,14 @@ function Ea(s) {
       relativeHeight: void 0,
       minHeight: void 0,
       padding: "0",
-      theme: i?.theme,
+      theme: n?.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(ha, {}) }) });
+  ] }) : /* @__PURE__ */ t.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ t.jsx(ha, {}) }) });
 }
 export {
   Ea as SingleGraphDashboard