@undp/data-viz 2.0.8 → 2.0.9

package/dist/SingleGraphDashboardThreeDGraphs.js

@@ -1,50 +1,50 @@
-import { c as de, j as o } from "./index-CHPV5EwG-Curnpaqc.js";
-import { useState as S, useRef as Z, useEffectEvent as E, useEffect as A } from "react";
-import { i as ce } from "./index-BuwmuDFJ.js";
+import { c as ue, j as o } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as S, useRef as Q, useEffectEvent as E, useEffect as $ } from "react";
+import { i as de } from "./index-BuwmuDFJ.js";
 import { f as z } from "./index-EArKRVKg.js";
-import { i as ue } from "./index-Bwrro8-q.js";
-import { j as $, D as L } from "./DropdownSelect-BbdPQa2k.js";
-import { g as he, b as M, y as J, h as K, c as ge, $ as Q, P as X } from "./checkIfMultiple-Y9iKaV_u.js";
+import { i as ce } from "./index-Bwrro8-q.js";
+import { j as k, D as L } from "./DropdownSelect-BbdPQa2k.js";
+import { g as he, b as M, y as U, h as B, c as ge, $ as X, P as Y } from "./checkIfMultiple-Y9iKaV_u.js";
 import { w as pe } from "./Spinner-D7rnnwnA.js";
-import { j as Y } from "./Typography-PxtFcnJb.js";
-import { ThreeDGlobe as me } from "./ThreeDGlobe.js";
-import { f as fe, a as Ce, b as be, c as ve, t as xe } from "./fetchAndParseData-BpqkBPQL.js";
+import { j as _ } from "./Typography-PxtFcnJb.js";
+import { ThreeDGlobe as fe } from "./ThreeDGlobe.js";
+import { f as me, a as Ce, b as be, c as ve, t as xe } from "./fetchAndParseData-BpqkBPQL.js";
 import { a as Ie, t as we } from "./transformDataForAggregation-DEU__LUl.js";
-import { g as _ } from "./getUniqValue-BKHCm3zE.js";
+import { g as ee } from "./getUniqValue-DsqSii6M.js";
 import { GraphHeader as De } from "./GraphHeader.js";
-import { f as ee } from "./filterData-DsAiFzKY.js";
+import { f as ae } from "./filterData-DsAiFzKY.js";
 import { g as ye } from "./getGraphList-Dxwo9TDb.js";
-import { t as ae } from "./transformDataForSelect-D8AuvYdf.js";
+import { t as te } from "./transformDataForSelect-D8AuvYdf.js";
 import { G as Se } from "./GraphContainer-CRqzdKu2.js";
-function je(D) {
-  const a = de.c(24), {
+function Ve(D) {
+  const a = ue.c(24), {
     settings: t,
     graph: g,
-    graphData: c,
+    graphData: d,
     debugMode: w,
     graphDataConfiguration: r,
-    readableHeader: j,
+    readableHeader: V,
     updateFilters: I
   } = D;
-  if (w && (console.log(`Graph: ${g}`), console.log("Transformed data:", c), console.log("Settings:", t)), typeof c == "string") {
-    const f = `flex my-0 mx-auto grow flex-col justify-center ${t?.width ? "w-fit" : "w-full"}`;
+  if (w && (console.log(`Graph: ${g}`), console.log("Transformed data:", d), console.log("Settings:", t)), typeof d == "string") {
+    const m = `flex my-0 mx-auto grow flex-col justify-center ${t?.width ? "w-fit" : "w-full"}`;
     let p;
     a[0] === Symbol.for("react.memo_cache_sentinel") ? (p = {
       height: "inherit"
     }, a[0] = p) : p = a[0];
-    let d;
-    a[1] !== c ? (d = /* @__PURE__ */ o.jsx(Y, { size: "sm", marginBottom: "none", className: "p-2 text-center text-accent-dark-red dark:text-accent-red", children: c }), a[1] = c, a[2] = d) : d = a[2];
+    let u;
+    a[1] !== d ? (u = /* @__PURE__ */ o.jsx(_, { size: "sm", marginBottom: "none", className: "p-2 text-center text-accent-dark-red dark:text-accent-red", children: d }), a[1] = d, a[2] = u) : u = a[2];
     let x;
-    return a[3] !== f || a[4] !== d ? (x = /* @__PURE__ */ o.jsx("div", { className: f, style: p, children: d }), a[3] = f, a[4] = d, a[5] = x) : x = a[5], x;
+    return a[3] !== m || a[4] !== u ? (x = /* @__PURE__ */ o.jsx("div", { className: m, style: p, children: u }), a[3] = m, a[4] = u, a[5] = x) : x = a[5], x;
   }
   let b;
   a[6] === Symbol.for("react.memo_cache_sentinel") ? (b = {
-    threeDGlobe: me
+    threeDGlobe: fe
   }, a[6] = b) : b = a[6];
-  const H = b;
-  let V;
-  a[7] !== c || a[8] !== r || a[9] !== j || a[10] !== t || a[11] !== I ? (V = (f) => {
-    switch (f) {
+  const P = b;
+  let j;
+  a[7] !== d || a[8] !== r || a[9] !== V || a[10] !== t || a[11] !== I ? (j = (m) => {
+    switch (m) {
       case "threeDGlobe":
         return {
           globeOffset: t?.globeOffset,
@@ -63,9 +63,9 @@ function je(D) {
           sources: t?.sources,
           colorDomain: t?.colorDomain,
           colors: t?.colors,
-          colorLegendTitle: Object.keys(t || {}).indexOf("colorLegendTitle") !== -1 ? t?.colorLegendTitle : he("x", r || [], j || []),
+          colorLegendTitle: Object.keys(t || {}).indexOf("colorLegendTitle") !== -1 ? t?.colorLegendTitle : he("x", r || [], V || []),
           scaleType: t?.scaleType,
-          data: c,
+          data: d,
           centerPoint: t?.centerPoint,
           backgroundColor: t?.backgroundColor,
           mapNoDataColor: t?.mapNoDataColor,
@@ -100,26 +100,26 @@ function je(D) {
       default:
         return {};
     }
-  }, a[7] = c, a[8] = r, a[9] = j, a[10] = t, a[11] = I, a[12] = V) : V = a[12];
-  const u = V, T = H[g];
+  }, a[7] = d, a[8] = r, a[9] = V, a[10] = t, a[11] = I, a[12] = j) : j = a[12];
+  const c = j, T = P[g];
   let h;
-  a[13] !== u || a[14] !== g ? (h = u(g), a[13] = u, a[14] = g, a[15] = h) : h = a[15];
-  const m = h, N = `grow my-0 mx-auto flex flex-col w-full justify-center ${t?.theme || "light"}`;
+  a[13] !== c || a[14] !== g ? (h = c(g), a[13] = c, a[14] = g, a[15] = h) : h = a[15];
+  const f = h, N = `grow my-0 mx-auto flex flex-col w-full justify-center ${t?.theme || "light"}`;
   let y;
   a[16] === Symbol.for("react.memo_cache_sentinel") ? (y = {
     minHeight: "inherit"
   }, a[16] = y) : y = a[16];
   let s;
-  a[17] !== T || a[18] !== g || a[19] !== m ? (s = T ? /* @__PURE__ */ o.jsx(T, { ...m }) : /* @__PURE__ */ o.jsx(Y, { size: "sm", marginBottom: "none", className: "p-2 text-center text-accent-dark-red dark:text-accent-red", children: `Invalid chart type: ${g}` }), a[17] = T, a[18] = g, a[19] = m, a[20] = s) : s = a[20];
+  a[17] !== T || a[18] !== g || a[19] !== f ? (s = T ? /* @__PURE__ */ o.jsx(T, { ...f }) : /* @__PURE__ */ o.jsx(_, { size: "sm", marginBottom: "none", className: "p-2 text-center text-accent-dark-red dark:text-accent-red", children: `Invalid chart type: ${g}` }), a[17] = T, a[18] = g, a[19] = f, a[20] = s) : s = a[20];
   let G;
   return a[21] !== N || a[22] !== s ? (G = /* @__PURE__ */ o.jsx("div", { className: N, style: y, children: s }), a[21] = N, a[22] = s, a[23] = G) : G = a[23], G;
 }
-const U = (D, a) => {
+const W = (D, a) => {
   const t = a?.map((g) => {
-    const c = D?.findIndex((r) => r.chartConfigId === g.chartConfigId);
-    if (c === -1) return {};
-    const w = D[c]?.allowedColumnIds?.findIndex((r) => r.value === g.columnId);
-    return w === -1 ? {} : D[c].allowedColumnIds[w].graphSettings || {};
+    const d = D?.findIndex((r) => r.chartConfigId === g.chartConfigId);
+    if (d === -1) return {};
+    const w = D[d]?.allowedColumnIds?.findIndex((r) => r.value === g.columnId);
+    return w === -1 ? {} : D[d].allowedColumnIds[w].graphSettings || {};
   }) || [];
   return Object.assign({}, ...t);
 };
@@ -128,96 +128,98 @@ function We(D) {
     graphSettings: a,
     dataSettings: t,
     filters: g,
-    graphType: c,
+    graphType: d,
     dataTransform: w,
     graphDataConfiguration: r,
-    dataFilters: j,
+    dataFilters: V,
     debugMode: I,
     dataSelectionOptions: b,
-    advancedDataSelectionOptions: H,
-    readableHeader: V,
-    noOfFiltersPerRow: u = 4,
+    advancedDataSelectionOptions: P,
+    readableHeader: j,
+    noOfFiltersPerRow: c = 4,
     updateFilters: T,
     uiMode: h = "normal",
-    highlightDataPointSettings: m
-  } = D, [N, y] = S(void 0), [s, G] = S(void 0), [f, p] = S(r), [d, x] = S({}), [k, te] = S(void 0), [le, oe] = S([]), B = Z(null), W = Z(r), [O, q] = S([]), P = {
+    highlightDataPointSettings: f
+  } = D, [N, y] = S(void 0), [s, G] = S(void 0), [m, p] = S(r), [u, x] = S({}), [O, le] = S(void 0), [ie, oe] = S([]), q = Q(null), Z = Q(r), [A, J] = S([]), R = {
     ignoreCase: !0,
     ignoreAccents: !0,
     trim: !0
-  }, ie = E(() => {
+  }, K = E(() => {
     const e = (g || []).map((n) => ({
       filter: n.column,
       label: n.label || `Filter by ${n.column}`,
       singleSelect: n.singleSelect,
       clearable: n.clearable,
-      defaultValue: ae(n.defaultValue),
-      value: ae(n.defaultValue),
-      availableValues: _(s, n.column).filter((l) => !n.excludeValues?.includes(`${l}`)).map((l) => ({
+      defaultValue: te(n.defaultValue),
+      value: te(n.defaultValue),
+      availableValues: ee(s, n.column).filter((l) => !n.excludeValues?.includes(`${l}`)).map((l) => ({
         value: l,
         label: l
       })),
       allowSelectAll: n.allowSelectAll,
       width: n.width
     }));
-    q(e);
+    J(e);
   });
-  A(() => {
+  $(() => {
     (async () => {
       try {
-        const n = t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? await fe(t.dataURL, t.columnsToArray, t.dataTransformation, I) : t.fileType === "api" ? await Ce(t.dataURL, t.apiHeaders, t.columnsToArray, t.dataTransformation, I) : await be(t.dataURL, t.dataTransformation, t.columnsToArray, I, t.delimiter, !0) : await ve(t.dataURL, t.idColumnTitle) : await xe(t.data, t.columnsToArray);
+        const n = t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? await me(t.dataURL, t.columnsToArray, t.dataTransformation, I) : t.fileType === "api" ? await Ce(t.dataURL, t.apiHeaders, t.columnsToArray, t.dataTransformation, I) : await be(t.dataURL, t.dataTransformation, t.columnsToArray, I, t.delimiter, !0) : await ve(t.dataURL, t.idColumnTitle) : await xe(t.data, t.columnsToArray);
         G(n);
       } catch (n) {
         console.error("Data fetching error:", n);
       }
-    })(), ie();
-  }, [t, g, I]);
+    })(), K();
+  }, [t, I]), $(() => {
+    K();
+  }, [g, s]);
   const re = E(() => {
-    if (!s || O.length === 0) y(s);
+    if (!s || A.length === 0) y(s);
     else {
-      const e = s.filter((n) => O.every((l) => l.value && z([l.value]).length > 0 ? ce(z([n[l.filter]]), z([l.value]).map((i) => i.value)).length > 0 : !0));
+      const e = s.filter((n) => A.every((l) => l.value && z([l.value]).length > 0 ? de(z([n[l.filter]]), z([l.value]).map((i) => i.value)).length > 0 : !0));
       y(e);
     }
   });
-  A(() => {
+  $(() => {
     re();
-  }, [O, s]), A(() => {
-    b && x(U(b, r));
+  }, [A, s]), $(() => {
+    b && x(W(b, r));
   }, [b, r]);
   const ne = E(() => {
-    m?.column && N && oe(_(N, m.column).filter((e) => !m?.excludeValues?.includes(`${e}`)).map((e) => ({
+    f?.column && N && oe(ee(N, f.column).filter((e) => !f?.excludeValues?.includes(`${e}`)).map((e) => ({
       value: e,
       label: e
     })));
   });
-  A(() => {
+  $(() => {
     ne();
-  }, [m]), A(() => {
-    ue(W.current, r) || (p(r), W.current = r);
+  }, [f]), $(() => {
+    ce(Z.current, r) || (p(r), Z.current = r);
   }, [r]);
-  const R = (e, n) => {
-    q((l) => l.map((i) => i.filter === e ? {
+  const H = (e, n) => {
+    J((l) => l.map((i) => i.filter === e ? {
       ...i,
       value: n
     } : i));
-  }, se = s ? Ie(w ? we(ee(s, j || []), w.keyColumn, w.aggregationColumnsSetting) : ee(s, j || []), c, f) : void 0;
-  return /* @__PURE__ */ o.jsx(Se, { className: a?.classNames?.graphContainer, style: a?.styles?.graphContainer, id: a?.graphID, ref: B, "aria-label": a?.ariaLabel, backgroundColor: a?.backgroundColor ?? !1, theme: a?.theme || "light", language: a?.language || "en", width: a?.width, height: a?.height, padding: a?.padding, minHeight: a?.minHeight, relativeHeight: a?.relativeHeight, children: s || ye.filter((e) => e.geoHubMapPresentation).map((e) => e.graphID).indexOf(c) !== -1 ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-    d?.graphTitle || d?.graphDescription || a?.graphTitle || a?.graphDescription || a?.graphDownload || a?.dataDownload ? /* @__PURE__ */ o.jsx(De, { styles: {
-      title: d?.styles?.title || a?.styles?.title,
-      description: d?.styles?.description || a?.styles?.description
+  }, se = s ? Ie(w ? we(ae(s, V || []), w.keyColumn, w.aggregationColumnsSetting) : ae(s, V || []), d, m) : void 0;
+  return /* @__PURE__ */ o.jsx(Se, { className: a?.classNames?.graphContainer, style: a?.styles?.graphContainer, id: a?.graphID, ref: q, "aria-label": a?.ariaLabel, backgroundColor: a?.backgroundColor ?? !1, theme: a?.theme || "light", language: a?.language || "en", width: a?.width, height: a?.height, padding: a?.padding, minHeight: a?.minHeight, relativeHeight: a?.relativeHeight, children: s || ye.filter((e) => e.geoHubMapPresentation).map((e) => e.graphID).indexOf(d) !== -1 ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    u?.graphTitle || u?.graphDescription || a?.graphTitle || a?.graphDescription || a?.graphDownload || a?.dataDownload ? /* @__PURE__ */ o.jsx(De, { styles: {
+      title: u?.styles?.title || a?.styles?.title,
+      description: u?.styles?.description || a?.styles?.description
     }, classNames: {
-      title: d?.classNames?.title || a?.classNames?.title,
-      description: d?.classNames?.description || a?.classNames?.description
-    }, graphTitle: d?.graphTitle || a?.graphTitle, graphDescription: d?.graphDescription || a?.graphDescription, width: d?.width || a?.width, graphDownload: a?.graphDownload ? B : void 0, dataDownload: a?.dataDownload && s && s.length > 0 ? s : null }) : null,
-    O.length !== 0 || (b || []).length !== 0 || (H || []).length !== 0 || m ? /* @__PURE__ */ o.jsxs("div", { className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full", children: [
-      H?.map((e, n) => /* @__PURE__ */ o.jsxs("div", { style: {
-        width: e.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+      title: u?.classNames?.title || a?.classNames?.title,
+      description: u?.classNames?.description || a?.classNames?.description
+    }, graphTitle: u?.graphTitle || a?.graphTitle, graphDescription: u?.graphDescription || a?.graphDescription, width: u?.width || a?.width, graphDownload: a?.graphDownload ? q : void 0, dataDownload: a?.dataDownload && s && s.length > 0 ? s : null }) : null,
+    A.length !== 0 || (b || []).length !== 0 || (P || []).length !== 0 || f ? /* @__PURE__ */ o.jsxs("div", { className: "flex flex-wrap items-start gap-x-4 gap-y-0 w-full", children: [
+      P?.map((e, n) => /* @__PURE__ */ o.jsxs("div", { style: {
+        width: e.width || `calc(${100 / c}% - ${(c - 1) / c}rem)`,
         flexGrow: 1,
         flexShrink: e.ui !== "radio" ? 0 : 1,
         minWidth: "240px"
       }, className: "pb-4", children: [
         /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: e.label || "Graph by" }),
         e.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-          $,
+          k,
           {
             options: e.options.map((l) => ({
               ...l,
@@ -239,20 +241,20 @@ function We(D) {
               x(l?.graphSettings || {}), p(l?.dataConfiguration);
             }
           }
-        ) : /* @__PURE__ */ o.jsx(J, { defaultValue: e.defaultValue?.label || e.options[0].label, variant: h, onValueChange: (l) => {
+        ) : /* @__PURE__ */ o.jsx(U, { defaultValue: e.defaultValue?.label || e.options[0].label, variant: h, onValueChange: (l) => {
           const i = e.options[e.options.findIndex((v) => v.label === l)];
           x(i.graphSettings || {}), p(i.dataConfiguration);
-        }, children: e.options.map((l, i) => /* @__PURE__ */ o.jsx(K, { label: l.label, value: l.label }, i)) })
+        }, children: e.options.map((l, i) => /* @__PURE__ */ o.jsx(B, { label: l.label, value: l.label }, i)) })
       ] }, n)),
       b?.map((e, n) => /* @__PURE__ */ o.jsxs("div", { style: {
-        width: e.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+        width: e.width || `calc(${100 / c}% - ${(c - 1) / c}rem)`,
         flexGrow: 1,
         flexShrink: e.ui !== "radio" ? 0 : 1,
         minWidth: "240px"
       }, className: "pb-4", children: [
         /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: e.label || `Visualize ${e.chartConfigId} by` }),
-        ge(e.chartConfigId, f || []) ? e.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-          $,
+        ge(e.chartConfigId, m || []) ? e.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+          k,
           {
             options: e.allowedColumnIds,
             size: "sm",
@@ -261,7 +263,7 @@ function We(D) {
             variant: h,
             controlShouldRenderValue: !0,
             defaultValue: r ? r[r.findIndex((l) => l.chartConfigId === e.chartConfigId)].columnId.map((l) => e.allowedColumnIds[e.allowedColumnIds.findIndex((i) => i.value === l)]) : void 0,
-            filterOption: L(P),
+            filterOption: L(R),
             onChange: (l) => {
               const i = {
                 columnId: (l || []).map(
@@ -269,18 +271,18 @@ function We(D) {
                   (C) => C.value
                 ),
                 chartConfigId: e.chartConfigId
-              }, v = f?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
+              }, v = m?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
               p(v);
             }
           }
-        ) : /* @__PURE__ */ o.jsx(Q, { variant: h, defaultValue: r ? r[r.findIndex((l) => l.chartConfigId === e.chartConfigId)].columnId.map((l) => e.allowedColumnIds[e.allowedColumnIds.findIndex((i) => i.value === l)]).map((l) => l.value) : [], onValueChange: (l) => {
+        ) : /* @__PURE__ */ o.jsx(X, { variant: h, defaultValue: r ? r[r.findIndex((l) => l.chartConfigId === e.chartConfigId)].columnId.map((l) => e.allowedColumnIds[e.allowedColumnIds.findIndex((i) => i.value === l)]).map((l) => l.value) : [], onValueChange: (l) => {
           const i = {
             columnId: l || [],
             chartConfigId: e.chartConfigId
-          }, v = f?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
+          }, v = m?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
           p(v);
-        }, children: e.allowedColumnIds.map((l, i) => /* @__PURE__ */ o.jsx(X, { label: l.label, value: l.label }, i)) }) : e.ui !== "radio" ? /* @__PURE__ */ o.jsx(
-          $,
+        }, children: e.allowedColumnIds.map((l, i) => /* @__PURE__ */ o.jsx(Y, { label: l.label, value: l.label }, i)) }) : e.ui !== "radio" ? /* @__PURE__ */ o.jsx(
+          k,
           {
             options: e.allowedColumnIds,
             size: "sm",
@@ -293,64 +295,66 @@ function We(D) {
               const i = {
                 columnId: l?.value,
                 chartConfigId: e.chartConfigId
-              }, v = f?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
-              x(U(b, v)), p(v);
+              }, v = m?.map((C) => C.chartConfigId === i.chartConfigId ? i : C);
+              x(W(b, v)), p(v);
             }
           }
-        ) : /* @__PURE__ */ o.jsx(J, { variant: h, defaultValue: r ? e.allowedColumnIds[e.allowedColumnIds.findIndex((l) => l.value === r[r.findIndex((i) => i.chartConfigId === e.chartConfigId)].columnId)].label : "", onValueChange: (l) => {
+        ) : /* @__PURE__ */ o.jsx(U, { variant: h, defaultValue: r ? e.allowedColumnIds[e.allowedColumnIds.findIndex((l) => l.value === r[r.findIndex((i) => i.chartConfigId === e.chartConfigId)].columnId)].label : "", onValueChange: (l) => {
           const v = {
             columnId: e.allowedColumnIds[e.allowedColumnIds.findIndex((F) => F.label === l)].value,
             chartConfigId: e.chartConfigId
-          }, C = f?.map((F) => F.chartConfigId === v.chartConfigId ? v : F);
-          x(U(b, C)), p(C);
-        }, children: e.allowedColumnIds.map((l, i) => /* @__PURE__ */ o.jsx(K, { label: l.label, value: l.label }, i)) })
+          }, C = m?.map((F) => F.chartConfigId === v.chartConfigId ? v : F);
+          x(W(b, C)), p(C);
+        }, children: e.allowedColumnIds.map((l, i) => /* @__PURE__ */ o.jsx(B, { label: l.label, value: l.label }, i)) })
       ] }, n)),
-      O?.map((e, n) => /* @__PURE__ */ o.jsxs("div", { style: {
-        width: e.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+      A?.map((e, n) => /* @__PURE__ */ o.jsxs("div", { style: {
+        width: e.width || `calc(${100 / c}% - ${(c - 1) / c}rem)`,
         flexGrow: 1,
         flexShrink: 0,
         minWidth: "240px"
       }, className: "pb-4", children: [
         /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: e.label }),
-        e.singleSelect ? /* @__PURE__ */ o.jsx($, { options: e.availableValues, variant: h, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: L(P), onChange: (l) => {
-          R(e.filter, l);
-        }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-          e.ui !== "radio" ? /* @__PURE__ */ o.jsx($, { options: e.availableValues, variant: h, size: "sm", isMulti: !0, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: L(P), onChange: (l) => {
-            R(e.filter, l);
-          }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ o.jsx(Q, { variant: h, defaultValue: e.defaultValue ? e.defaultValue.map((l) => `${l.value}`) : [], value: e.value ? e.value.map((l) => `${l.value}`) : void 0, onValueChange: (l) => {
-            R(e.filter, e.availableValues.filter((i) => l.indexOf(`${i.value}`) !== -1));
-          }, children: e.availableValues.map((l, i) => /* @__PURE__ */ o.jsx(X, { label: `${l.label}`, value: `${l.value}` }, i)) }),
+        e.singleSelect ? e.ui !== "radio" ? /* @__PURE__ */ o.jsx(k, { options: e.availableValues, variant: h, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: L(R), onChange: (l) => {
+          H(e.filter, l);
+        }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ o.jsx(U, { variant: h, defaultValue: e.defaultValue.value, onValueChange: (l) => {
+          H(e.filter, e.availableValues.filter((i) => i.value === l));
+        }, children: e.availableValues.map((l, i) => /* @__PURE__ */ o.jsx(B, { label: `${l.label}`, value: `${l.value}` }, i)) }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          e.ui !== "radio" ? /* @__PURE__ */ o.jsx(k, { options: e.availableValues, variant: h, size: "sm", isMulti: !0, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: L(R), onChange: (l) => {
+            H(e.filter, l);
+          }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ o.jsx(X, { variant: h, defaultValue: e.defaultValue ? e.defaultValue.map((l) => `${l.value}`) : [], value: e.value ? e.value.map((l) => `${l.value}`) : void 0, onValueChange: (l) => {
+            H(e.filter, e.availableValues.filter((i) => l.indexOf(`${i.value}`) !== -1));
+          }, children: e.availableValues.map((l, i) => /* @__PURE__ */ o.jsx(Y, { label: `${l.label}`, value: `${l.value}` }, i)) }),
           e.allowSelectAll ? /* @__PURE__ */ o.jsx("button", { type: "button", className: "bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400", onClick: () => {
-            R(e.filter, e.availableValues);
+            H(e.filter, e.availableValues);
           }, children: "Select all options" }) : null
         ] })
       ] }, n)),
-      m ? /* @__PURE__ */ o.jsxs("div", { style: {
-        width: m.width || `calc(${100 / u}% - ${(u - 1) / u}rem)`,
+      f ? /* @__PURE__ */ o.jsxs("div", { style: {
+        width: f.width || `calc(${100 / c}% - ${(c - 1) / c}rem)`,
         flexGrow: 1,
         flexShrink: 0,
         minWidth: "240px"
       }, className: "pb-4", children: [
-        /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: m.label || "Highlight data" }),
+        /* @__PURE__ */ o.jsx(M, { className: "mb-2", children: f.label || "Highlight data" }),
         /* @__PURE__ */ o.jsx(
-          $,
+          k,
           {
-            options: le,
+            options: ie,
             variant: h,
             size: "sm",
             isMulti: !0,
             isClearable: !0,
             isSearchable: !0,
             controlShouldRenderValue: !0,
-            filterOption: L(P),
+            filterOption: L(R),
             onChange: (e) => {
-              te(e?.map((n) => n.value));
+              le(e?.map((n) => n.value));
             },
-            value: k?.map((e) => ({
+            value: O?.map((e) => ({
               label: e,
               value: e
             })),
-            defaultValue: m.defaultValues?.map((e) => ({
+            defaultValue: f.defaultValues?.map((e) => ({
               label: e,
               value: e
             }))
@@ -358,9 +362,9 @@ function We(D) {
         )
       ] }) : null
     ] }) : null,
-    /* @__PURE__ */ o.jsx(je, { graph: c, graphData: se, graphDataConfiguration: f, debugMode: I, readableHeader: V || [], updateFilters: T, settings: {
+    /* @__PURE__ */ o.jsx(Ve, { graph: d, graphData: se, graphDataConfiguration: m, debugMode: I, readableHeader: j || [], updateFilters: T, settings: {
       ...a || {},
-      ...d,
+      ...u,
       graphTitle: void 0,
       graphDescription: void 0,
       graphDownload: !1,
@@ -372,10 +376,10 @@ function We(D) {
       relativeHeight: void 0,
       minHeight: void 0,
       theme: a?.theme,
-      ...k ? {
-        highlightedDataPoints: k,
-        highlightedIds: k?.map((e) => `${e}`),
-        highlightedLines: k?.map((e) => e)
+      ...O ? {
+        highlightedDataPoints: O,
+        highlightedIds: O?.map((e) => `${e}`),
+        highlightedLines: O?.map((e) => e)
       } : {}
     } })
   ] }) : /* @__PURE__ */ o.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ o.jsx(pe, {}) }) });