@undp/data-viz 1.3.0 → 1.4.0

package/dist/SingleGraphDashboard.js

@@ -1,2 +1,523 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./index-BHm2KTjD-D8FylaKc.cjs"),s=require("react"),te=require("./index-Ds0uHjK9.cjs"),H=require("./index-B0rbzOoC.cjs"),re=require("./index-BXns0-ng.cjs"),C=require("./DropdownSelect-CuzV7gdj.cjs"),U=require("./Typography-CDR-DAHH.cjs"),p=require("./checkIfMultiple-D3h8to1T.cjs"),le=require("./Spinner-UmN-KPe9.cjs"),T=require("./fetchAndParseData.js"),oe=require("./transformDataForGraph.js"),z=require("./getUniqValue.js"),ne=require("./transformDataForAggregation.js"),ie=require("./GraphHeader.js"),B=require("./filterData-DN6py7y_.cjs"),se=require("./transformColumnsToArray.js"),ue=require("./graphList.js"),J=require("./index-BGMGC-HN.cjs"),de=u=>{if(u.findIndex(o=>o.chartConfigId==="yMin")!==-1&&u.findIndex(o=>o.chartConfigId==="yMax")!==-1)return u;const r=[...u];return u.findIndex(o=>o.chartConfigId==="yMin")===-1&&r.push({chartConfigId:"yMin",columnId:`${u[u.findIndex(o=>o.chartConfigId==="y")].columnId}Min`}),u.findIndex(o=>o.chartConfigId==="yMax")===-1&&r.push({chartConfigId:"yMax",columnId:`${u[u.findIndex(o=>o.chartConfigId==="y")].columnId}Max`}),r},L=(u,r)=>{const o=r?.map(D=>{const i=u?.findIndex(n=>n.chartConfigId===D.chartConfigId);if(i===-1)return{};const v=u[i]?.allowedColumnIds?.findIndex(n=>n.value===D.columnId);return v===-1?{}:u[i].allowedColumnIds[v].graphSettings||{}})||[];return Object.assign({},...o)};function ce(u){const{graphSettings:r,dataSettings:o,filters:D,graphType:i,dataTransform:v,graphDataConfiguration:n,dataFilters:q,debugMode:E,dataSelectionOptions:w,advancedDataSelectionOptions:F,readableHeader:K,noOfFiltersPerRow:g=4,updateFilters:Q,uiMode:x="normal",theme:A="light",highlightDataPointSettings:b}=u,[I,X]=s.useState(void 0),[S,Y]=s.useState(void 0),[f,j]=s.useState(n),[m,R]=s.useState({}),[y,Z]=s.useState(void 0),[_,ee]=s.useState([]),N=s.useRef(null),P=s.useRef(n),[V,O]=s.useState([]),M=s.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]),W=s.useCallback(async()=>{if(i!=="geoHubMap"&&i!=="geoHubCompareMap"&&i!=="geoHubMapWithLayerSelection"&&o)try{const c=await(o.dataURL?typeof o.dataURL=="string"?o.fileType==="json"?T.fetchAndParseJSON(o.dataURL,o.columnsToArray,o.dataTransformation,E):o.fileType==="api"?T.fetchAndTransformDataFromAPI(o.dataURL,o.apiHeaders,o.columnsToArray,o.dataTransformation,E):T.fetchAndParseCSV(o.dataURL,o.dataTransformation,o.columnsToArray,E,o.delimiter,!0):T.fetchAndParseMultipleDataSources(o.dataURL,o.idColumnTitle):se.transformColumnsToArray(o.data,o.columnsToArray));Y(c);const a=(D||[]).map(t=>({filter:t.column,label:t.label||`Filter by ${t.column}`,singleSelect:t.singleSelect,clearable:t.clearable,defaultValue:J.transformDefaultValue(t.defaultValue),value:J.transformDefaultValue(t.defaultValue),availableValues:z.getUniqValue(c,t.column).filter(d=>!t.excludeValues?.includes(`${d}`)).map(d=>({value:d,label:d})),allowSelectAll:t.allowSelectAll,width:t.width}));O(a)}catch(e){console.error("Data fetching error:",e)}},[o,i,D,E]);s.useEffect(()=>{W()},[W]);const G=s.useMemo(()=>!S||V.length===0?S:S.filter(c=>V.every(a=>a.value&&H.flattenDeep([a.value]).length>0?te.intersection(H.flattenDeep([c[a.filter]]),H.flattenDeep([a.value]).map(t=>t.value)).length>0:!0)),[V,S]);s.useEffect(()=>{w&&R(L(w,n))},[w,n]),s.useEffect(()=>{i!=="geoHubMap"&&i!=="geoHubCompareMap"&&i!=="geoHubMapWithLayerSelection"&&S&&X(G)},[G,i,S]),s.useEffect(()=>{b?.column&&G&&ee(z.getUniqValue(G,b.column).filter(e=>!b?.excludeValues?.includes(`${e}`)).map(e=>({value:e,label:e})))},[G,b]),s.useEffect(()=>{re.isEqual(P.current,n)||(j(n),P.current=n)},[n]);const k=s.useCallback((e,c)=>{O(a=>a.map(t=>t.filter===e?{...t,value:c}:t))},[]),ae=s.useMemo(()=>{if(!I)return;const e=i==="lineChartWithConfidenceInterval"&&f?de(f):f;return i!=="geoHubMap"&&i!=="geoHubCompareMap"&&i!=="geoHubMapWithLayerSelection"?oe.transformDataForGraph(v?ne.transformDataForAggregation(B.filterData(I,q||[]),v.keyColumn,v.aggregationColumnsSetting):B.filterData(I,q||[]),i,e):void 0},[i,f,I,q,v]);return!o&&i!=="geoHubMap"&&i!=="geoHubCompareMap"&&i!=="geoHubMapWithLayerSelection"?l.jsxRuntimeExports.jsx(U.TypographyExports.P,{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."}):l.jsxRuntimeExports.jsx("div",{className:`${A||r?.theme||"light"} flex ${r?.width?"w-fit grow-0":"w-full grow"}${r?.height?"":" h-full"}`,dir:r?.language==="he"||r?.language==="ar"?"rtl":void 0,children:l.jsxRuntimeExports.jsx("div",{className:U.cnExports.cn(`${r?.backgroundColor?r?.backgroundColor===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${r?.language||"en"}`,r?.classNames?.graphContainer),style:{...r?.styles?.graphContainer||{},...r?.backgroundColor&&r?.backgroundColor!==!0?{backgroundColor:r?.backgroundColor}:{}},id:r?.graphID,ref:N,children:l.jsxRuntimeExports.jsx("div",{style:{padding:r?.backgroundColor?r?.padding||"1rem":r?.padding||0,flexGrow:1,display:"flex"},children:l.jsxRuntimeExports.jsx("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:I||ue.GraphList.filter(e=>e.geoHubMapPresentation).map(e=>e.graphID).indexOf(i)!==-1?l.jsxRuntimeExports.jsxs(l.jsxRuntimeExports.Fragment,{children:[m?.graphTitle||m?.graphDescription||r?.graphTitle||r?.graphDescription||r?.graphDownload||r?.dataDownload?l.jsxRuntimeExports.jsx(ie.GraphHeader,{styles:{title:m?.styles?.title||r?.styles?.title,description:m?.styles?.description||r?.styles?.description},classNames:{title:m?.classNames?.title||r?.classNames?.title,description:m?.classNames?.description||r?.classNames?.description},graphTitle:m?.graphTitle||r?.graphTitle,graphDescription:m?.graphDescription||r?.graphDescription,width:m?.width||r?.width,graphDownload:r?.graphDownload?N.current:void 0,dataDownload:r?.dataDownload&&I&&I.length>0?I:null}):null,V.length!==0||(w||[]).length!==0||(F||[]).length!==0||b?l.jsxRuntimeExports.jsxs("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap",alignItems:"flex-start",width:"100%"},children:[F?.map((e,c)=>l.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:e.ui!=="radio"?0:1,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(p.LabelExports.Label,{className:"mb-2",children:e.label||"Graph by"}),e.ui!=="radio"?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.options.map(a=>({...a,value:a.label})),size:"sm",isClearable:!1,isSearchable:!0,variant:x,controlShouldRenderValue:!0,defaultValue:e.defaultValue?{...e.defaultValue,value:e.defaultValue?.label}:{...e.options[0],value:e.options[0].label},onChange:a=>{R(a?.graphSettings||{}),j(a?.dataConfiguration)}}):l.jsxRuntimeExports.jsx(p.RadioGroupExports.RadioGroup,{defaultValue:e.defaultValue?.label||e.options[0].label,variant:x,onValueChange:a=>{const t=e.options[e.options.findIndex(d=>d.label===a)];R(t.graphSettings||{}),j(t.dataConfiguration)},children:e.options.map((a,t)=>l.jsxRuntimeExports.jsx(p.RadioGroupExports.RadioGroupItem,{label:a.label,value:a.label},t))})]},c)),w?.map((e,c)=>l.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:e.ui!=="radio"?0:1,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(p.LabelExports.Label,{className:"mb-2",children:e.label||`Visualize ${e.chartConfigId} by`}),p.checkIfMultiple(e.chartConfigId,f||[])?e.ui!=="radio"?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.allowedColumnIds,size:"sm",isMulti:!0,isSearchable:!0,variant:x,controlShouldRenderValue:!0,defaultValue:n?n[n.findIndex(a=>a.chartConfigId===e.chartConfigId)].columnId.map(a=>e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===a)]):void 0,filterOption:C.DropdownSelectExports.createFilter(M),onChange:a=>{const t={columnId:(a||[]).map(h=>h.value),chartConfigId:e.chartConfigId},d=f?.map(h=>h.chartConfigId===t.chartConfigId?t:h);j(d)}}):l.jsxRuntimeExports.jsx(p.CheckboxGroupExports.CheckboxGroup,{variant:x,defaultValue:n?n[n.findIndex(a=>a.chartConfigId===e.chartConfigId)].columnId.map(a=>e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===a)]).map(a=>a.value):[],onValueChange:a=>{const t={columnId:a||[],chartConfigId:e.chartConfigId},d=f?.map(h=>h.chartConfigId===t.chartConfigId?t:h);j(d)},children:e.allowedColumnIds.map((a,t)=>l.jsxRuntimeExports.jsx(p.CheckboxGroupExports.CheckboxGroupItem,{label:a.label,value:a.label},t))}):e.ui!=="radio"?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.allowedColumnIds,size:"sm",isClearable:!1,isSearchable:!0,variant:x,controlShouldRenderValue:!0,defaultValue:n?e.allowedColumnIds[e.allowedColumnIds.findIndex(a=>a.value===n[n.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId)]:void 0,onChange:a=>{const t={columnId:a?.value,chartConfigId:e.chartConfigId},d=f?.map(h=>h.chartConfigId===t.chartConfigId?t:h);R(L(w,d)),j(d)}}):l.jsxRuntimeExports.jsx(p.RadioGroupExports.RadioGroup,{variant:x,defaultValue:n?e.allowedColumnIds[e.allowedColumnIds.findIndex(a=>a.value===n[n.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId)].label:"",onValueChange:a=>{const d={columnId:e.allowedColumnIds[e.allowedColumnIds.findIndex($=>$.label===a)].value,chartConfigId:e.chartConfigId},h=f?.map($=>$.chartConfigId===d.chartConfigId?d:$);R(L(w,h)),j(h)},children:e.allowedColumnIds.map((a,t)=>l.jsxRuntimeExports.jsx(p.RadioGroupExports.RadioGroupItem,{label:a.label,value:a.label},t))})]},c)),V?.map((e,c)=>l.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:0,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(p.LabelExports.Label,{className:"mb-2",children:e.label}),e.singleSelect?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.availableValues,variant:x,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:C.DropdownSelectExports.createFilter(M),onChange:a=>{k(e.filter,a)},value:e.value,defaultValue:e.defaultValue}):l.jsxRuntimeExports.jsxs(l.jsxRuntimeExports.Fragment,{children:[e.ui!=="radio"?l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:e.availableValues,variant:x,size:"sm",isMulti:!0,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:C.DropdownSelectExports.createFilter(M),onChange:a=>{k(e.filter,a)},value:e.value,defaultValue:e.defaultValue}):l.jsxRuntimeExports.jsx(p.CheckboxGroupExports.CheckboxGroup,{variant:x,defaultValue:e.defaultValue?e.defaultValue.map(a=>`${a.value}`):[],value:e.value?e.value.map(a=>`${a.value}`):void 0,onValueChange:a=>{k(e.filter,e.availableValues.filter(t=>a.indexOf(`${t.value}`)!==-1))},children:e.availableValues.map((a,t)=>l.jsxRuntimeExports.jsx(p.CheckboxGroupExports.CheckboxGroupItem,{label:`${a.label}`,value:`${a.value}`},t))}),e.allowSelectAll?l.jsxRuntimeExports.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:()=>{k(e.filter,e.availableValues)},children:"Select all options"}):null]})]},c)),b?l.jsxRuntimeExports.jsxs("div",{style:{width:b.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:0,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(p.LabelExports.Label,{className:"mb-2",children:b.label||"Highlight data"}),l.jsxRuntimeExports.jsx(C.DropdownSelectExports.DropdownSelect,{options:_,variant:x,size:"sm",isMulti:!0,isClearable:!0,isSearchable:!0,controlShouldRenderValue:!0,filterOption:C.DropdownSelectExports.createFilter(M),onChange:e=>{Z(e?.map(c=>c.value))},value:y?.map(e=>({label:e,value:e})),defaultValue:b.defaultValues?.map(e=>({label:e,value:e}))})]}):null]}):null,l.jsxRuntimeExports.jsx(p.GraphEl,{graph:i,graphData:ae,graphDataConfiguration:f,debugMode:E,readableHeader:K||[],updateFilters:Q,settings:{...r||{},...m,graphTitle:void 0,graphDescription:void 0,graphDownload:!1,dataDownload:!1,backgroundColor:void 0,padding:"0",theme:r?.theme||A,...y?{highlightedDataPoints:y,highlightedIds:y?.map(e=>`${e}`),highlightedLines:y?.map(e=>e)}:{}}})]}):l.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:l.jsxRuntimeExports.jsx(le.SpinnerExports.Spinner,{})})})})})})}exports.SingleGraphDashboard=ce;
+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-C1rRk_50.js";
+import { f as P } from "./index-UV9hjG_S.js";
+import { i as ua } from "./index-27yTRcko.js";
+import { Z as y, H as N } from "./DropdownSelect-CDC9lEqU.js";
+import { f as F, a as J, v as B, c as ca, w as K, G as Q } from "./checkIfMultiple-CYp3vADF.js";
+import { u as ha } from "./Typography-Ctgfl1J5.js";
+import { y as fa } from "./Spinner-C85UF28E.js";
+import { G as ga } from "./GraphEl-Cw2tDUb3.js";
+import { f as pa, a as ma, b as Ca, c as xa, t as Ia } from "./fetchAndParseData-Bcmr659B.js";
+import { a as va, t as ba } from "./transformDataForAggregation-CdcwlnNe.js";
+import { g as X } from "./getUniqValue-BtUENB2H.js";
+import { GraphHeader as wa } from "./GraphHeader.js";
+import { f as Y } from "./filterData-B8ocT57s.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({
+    chartConfigId: "yMin",
+    columnId: `${o[o.findIndex((r) => r.chartConfigId === "y")].columnId}Min`
+  }), o.findIndex((r) => r.chartConfigId === "yMax") === -1 && t.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 || {};
+  }) || [];
+  return Object.assign({}, ...r);
+};
+function Ua(o) {
+  const {
+    graphSettings: t,
+    dataSettings: r,
+    filters: V,
+    graphType: h,
+    dataTransform: x,
+    graphDataConfiguration: i,
+    dataFilters: R,
+    debugMode: D,
+    dataSelectionOptions: I,
+    advancedDataSelectionOptions: L,
+    readableHeader: aa,
+    noOfFiltersPerRow: c = 4,
+    updateFilters: ea,
+    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)
+      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);
+      }
+  }, [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, {}) }) })
+            }
+          )
+        }
+      )
+    }
+  ) : /* @__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." });
+}
+export {
+  Ua as SingleGraphDashboard
+};
 //# sourceMappingURL=SingleGraphDashboard.js.map