@undp/data-viz 1.3.0 → 1.4.0

package/dist/MultiGraphDashboard.js

@@ -1,2 +1,304 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./index-BHm2KTjD-D8FylaKc.cjs"),o=require("react"),N=require("./index-Ds0uHjK9.cjs"),y=require("./index-B0rbzOoC.cjs"),m=require("./DropdownSelect-CuzV7gdj.cjs"),H=require("./checkIfMultiple-D3h8to1T.cjs"),L=require("./SingleGraphDashboard.js"),g=require("./fetchAndParseData.js"),P=require("./getUniqValue.js"),U=require("./GraphHeader.js"),I=require("./transformColumnsToArray.js"),z=require("./filterData-DN6py7y_.cjs"),F=require("./index-BGMGC-HN.cjs"),v=x=>x.map(a=>a.columnWidth||1).reduce((a,d)=>a+d,0),B=["barChart","choroplethMap","biVariateChoroplethMap","circlePacking","treeMap"];function J(x){const{dashboardID:S,dashboardLayout:i,dataSettings:a,filters:d,debugMode:c,theme:j="light",readableHeader:V,dataFilters:A,noOfFiltersPerRow:f=4,filterPosition:w,uiMode:b="normal",graphStyles:k,graphClassNames:q}=x,[D,M]=o.useState(void 0),[p,O]=o.useState(void 0),[u,C]=o.useState([]),R=o.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]),E=o.useMemo(()=>!p||u.length===0?p:p.filter(n=>u.every(e=>e.value&&y.flattenDeep([e.value]).length>0?N.intersection(y.flattenDeep([n[e.filter]]),y.flattenDeep([e.value]).map(r=>r.value)).length>0:!0)),[u,p]);o.useEffect(()=>{M(E)},[E]);const T=o.useCallback(async()=>{if(a)try{const n=await(a.dataURL?typeof a.dataURL=="string"?a.fileType==="json"?g.fetchAndParseJSON(a.dataURL,a.columnsToArray,a.dataTransformation,c):a.fileType==="api"?g.fetchAndTransformDataFromAPI(a.dataURL,a.apiHeaders,a.columnsToArray,a.dataTransformation,c):g.fetchAndParseCSV(a.dataURL,a.dataTransformation,a.columnsToArray,c,a.delimiter,!0):g.fetchAndParseMultipleDataSources(a.dataURL,a.idColumnTitle):I.transformColumnsToArray(a.data,a.columnsToArray));O(n);const e=(d||[]).map(r=>({filter:r.column,label:r.label||`Filter by ${r.column}`,singleSelect:r.singleSelect,clearable:r.clearable,defaultValue:F.transformDefaultValue(r.defaultValue),value:F.transformDefaultValue(r.defaultValue),availableValues:P.getUniqValue(n,r.column).filter(s=>!r.excludeValues?.includes(`${s}`)).map(s=>({value:s,label:s})),allowSelectAll:r.allowSelectAll,width:r.width}));C(e)}catch(t){console.error("Data fetching error:",t)}},[a,d,c]);o.useEffect(()=>{T()},[T]);const h=o.useCallback((t,n)=>{C(e=>e.map(r=>r.filter===t?{...r,value:n}:r))},[]);return l.jsxRuntimeExports.jsx("div",{className:`${j||"light"} flex grow`,dir:i.language==="he"||i.language==="ar"?"rtl":void 0,children:l.jsxRuntimeExports.jsx("div",{className:`${i.backgroundColor?i.backgroundColor===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto gap-4 flex flex-col w-full grow h-inherit ${i.language||"en"}`,style:{...i.backgroundColor&&i.backgroundColor!==!0?{backgroundColor:i.backgroundColor}:{}},id:S,children:l.jsxRuntimeExports.jsx("div",{style:{padding:i.backgroundColor?i.padding||"1rem":i.padding||0,flexGrow:1,display:"flex"},children:l.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[i.title||i.description?l.jsxRuntimeExports.jsx(U.GraphHeader,{graphTitle:i.title,graphDescription:i.description,isDashboard:!0}):null,l.jsxRuntimeExports.jsxs("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap"},children:[u.length!==0?l.jsxRuntimeExports.jsx("div",{style:{width:w==="side"?"280px":"100%",flexGrow:1,flexShrink:0},children:l.jsxRuntimeExports.jsx("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap",alignItems:"flex-start",width:"100%",position:"sticky",top:"1rem"},children:u?.map((t,n)=>l.jsxRuntimeExports.jsxs("div",{style:{width:t.width||`calc(${100/f}% - ${(f-1)/f}rem)`,flexGrow:1,flexShrink:0,minWidth:"240px"},children:[l.jsxRuntimeExports.jsx(H.LabelExports.Label,{className:"mb-2",children:t.label}),t.singleSelect?l.jsxRuntimeExports.jsx(m.DropdownSelectExports.DropdownSelect,{options:t.availableValues,isClearable:t.clearable===void 0?!0:t.clearable,size:"sm",variant:b,isMulti:!1,isSearchable:!0,filterOption:m.DropdownSelectExports.createFilter(R),onChange:e=>{h(t.filter,e)},defaultValue:t.defaultValue,value:t.value}):l.jsxRuntimeExports.jsxs(l.jsxRuntimeExports.Fragment,{children:[l.jsxRuntimeExports.jsx(m.DropdownSelectExports.DropdownSelect,{options:t.availableValues,isMulti:!0,size:"sm",isClearable:t.clearable===void 0?!0:t.clearable,variant:b,isSearchable:!0,controlShouldRenderValue:!0,closeMenuOnSelect:!1,hideSelectedOptions:!1,filterOption:m.DropdownSelectExports.createFilter(R),onChange:e=>{h(t.filter,e)},value:t.value,defaultValue:t.defaultValue}),t.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:()=>{h(t.filter,t.availableValues)},children:"Select all options"}):null]})]},n))})}):null,l.jsxRuntimeExports.jsx("div",{style:{width:w==="side"?"calc(100% - 280px - 1rem)":"100%",minWidth:"280px",flexGrow:1,display:"flex",gap:"1rem",flexWrap:"wrap",flexShrink:"0"},children:i.rows.map((t,n)=>l.jsxRuntimeExports.jsx("div",{style:{display:"flex",gap:"1rem",alignItems:"stretch",minHeight:`${t.height||0}px`,height:"auto",width:"100%",flexWrap:"wrap"},children:t.columns.map((e,r)=>l.jsxRuntimeExports.jsx("div",{className:"flex bg-transparent h-inherit grow min-w-60",style:{width:`calc(${100*(e.columnWidth||1)/v(t.columns)}% - ${(v(t.columns)-(e.columnWidth||1))/v(t.columns)}rem)`,minHeight:"inherit"},children:l.jsxRuntimeExports.jsx(L.SingleGraphDashboard,{graphType:e.graphType,dataFilters:e.dataFilters,uiMode:b,graphSettings:{...e.settings||{},width:void 0,height:void 0,resetSelectionOnDoubleClick:e.attachedFilter?!1:e.settings?.resetSelectionOnDoubleClick,styles:e.settings?.styles||k,classNames:e.settings?.classNames||q,radius:e.graphType==="donutChart"?void 0:e.settings?.radius,size:e.graphType==="unitChart"?e.settings?.size:void 0,language:e.settings?.language||i.language,theme:e.settings?.theme||j},dataSettings:{data:D?z.filterData(D,A||[]):void 0},updateFilters:e.attachedFilter&&B.indexOf(e.graphType)!==-1&&u.findIndex(s=>s.filter===e.attachedFilter)!==-1?s=>{const W=u.findIndex(G=>G.filter===e.attachedFilter),$=s?u[W].singleSelect?{value:s,label:s}:[{value:s,label:s}]:void 0;h(e.attachedFilter,$)}:void 0,dataTransform:e.dataTransform,dataSelectionOptions:e.dataSelectionOptions,advancedDataSelectionOptions:e.advancedDataSelectionOptions,graphDataConfiguration:e.graphDataConfiguration,debugMode:c,readableHeader:V||[]})},r))},n))})]})]})})})})}exports.MultiGraphDashboard=J;
+import { j as l } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useState as g, useMemo as T, useEffect as V, useCallback as A } from "react";
+import { i as I } from "./index-C1rRk_50.js";
+import { f as x } from "./index-UV9hjG_S.js";
+import { Z as k, H as O } from "./DropdownSelect-CDC9lEqU.js";
+import { f as z } from "./checkIfMultiple-CYp3vADF.js";
+import { SingleGraphDashboard as E } from "./SingleGraphDashboard.js";
+import { f as Z, a as q, b as J, c as B, t as K } from "./fetchAndParseData-Bcmr659B.js";
+import { g as Q } from "./getUniqValue-BtUENB2H.js";
+import { GraphHeader as X } from "./GraphHeader.js";
+import { f as Y } from "./filterData-B8ocT57s.js";
+import { t as W } from "./transformDataForSelect-D8AuvYdf.js";
+const b = (p) => p.map((t) => t.columnWidth || 1).reduce((t, d) => t + d, 0), _ = [
+  "barChart",
+  "choroplethMap",
+  "biVariateChoroplethMap",
+  "circlePacking",
+  "treeMap"
+];
+function he(p) {
+  const {
+    dashboardID: v,
+    dashboardLayout: i,
+    dataSettings: t,
+    filters: d,
+    debugMode: c,
+    theme: y = "light",
+    readableHeader: M,
+    dataFilters: N,
+    noOfFiltersPerRow: m = 4,
+    filterPosition: S,
+    uiMode: f = "normal",
+    graphStyles: $,
+    graphClassNames: H
+  } = p, [w, R] = g(void 0), [u, G] = g(void 0), [o, C] = g([]), D = T(
+    () => ({
+      ignoreCase: !0,
+      ignoreAccents: !0,
+      trim: !0
+    }),
+    []
+  ), j = T(() => !u || o.length === 0 ? u : u.filter(
+    (n) => o.every(
+      (e) => e.value && x([e.value]).length > 0 ? I(
+        x([n[e.filter]]),
+        x([e.value]).map((r) => r.value)
+      ).length > 0 : !0
+    )
+  ), [o, u]);
+  V(() => {
+    R(j);
+  }, [j]);
+  const F = A(async () => {
+    if (t)
+      try {
+        const n = await (t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? Z(
+          t.dataURL,
+          t.columnsToArray,
+          t.dataTransformation,
+          c
+        ) : t.fileType === "api" ? q(
+          t.dataURL,
+          t.apiHeaders,
+          t.columnsToArray,
+          t.dataTransformation,
+          c
+        ) : J(
+          t.dataURL,
+          t.dataTransformation,
+          t.columnsToArray,
+          c,
+          t.delimiter,
+          !0
+        ) : B(t.dataURL, t.idColumnTitle) : K(t.data, t.columnsToArray));
+        G(n);
+        const e = (d || []).map((r) => ({
+          filter: r.column,
+          label: r.label || `Filter by ${r.column}`,
+          singleSelect: r.singleSelect,
+          clearable: r.clearable,
+          defaultValue: W(r.defaultValue),
+          value: W(r.defaultValue),
+          availableValues: Q(n, r.column).filter((s) => !r.excludeValues?.includes(`${s}`)).map((s) => ({ value: s, label: s })),
+          allowSelectAll: r.allowSelectAll,
+          width: r.width
+        }));
+        C(e);
+      } catch (a) {
+        console.error("Data fetching error:", a);
+      }
+  }, [t, d, c]);
+  V(() => {
+    F();
+  }, [F]);
+  const h = A((a, n) => {
+    C((e) => e.map((r) => r.filter === a ? { ...r, value: n } : r));
+  }, []);
+  return /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: `${y || "light"} flex grow`,
+      dir: i.language === "he" || i.language === "ar" ? "rtl" : void 0,
+      children: /* @__PURE__ */ l.jsx(
+        "div",
+        {
+          className: `${i.backgroundColor ? i.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto gap-4 flex flex-col w-full grow h-inherit ${i.language || "en"}`,
+          style: {
+            ...i.backgroundColor && i.backgroundColor !== !0 ? { backgroundColor: i.backgroundColor } : {}
+          },
+          id: v,
+          children: /* @__PURE__ */ l.jsx(
+            "div",
+            {
+              style: {
+                padding: i.backgroundColor ? i.padding || "1rem" : i.padding || 0,
+                flexGrow: 1,
+                display: "flex"
+              },
+              children: /* @__PURE__ */ l.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
+                i.title || i.description ? /* @__PURE__ */ l.jsx(
+                  X,
+                  {
+                    graphTitle: i.title,
+                    graphDescription: i.description,
+                    isDashboard: !0
+                  }
+                ) : null,
+                /* @__PURE__ */ l.jsxs("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap" }, children: [
+                  o.length !== 0 ? /* @__PURE__ */ l.jsx(
+                    "div",
+                    {
+                      style: {
+                        width: S === "side" ? "280px" : "100%",
+                        flexGrow: 1,
+                        flexShrink: 0
+                      },
+                      children: /* @__PURE__ */ l.jsx(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            gap: "1rem",
+                            flexWrap: "wrap",
+                            alignItems: "flex-start",
+                            width: "100%",
+                            position: "sticky",
+                            top: "1rem"
+                          },
+                          children: o?.map((a, n) => /* @__PURE__ */ l.jsxs(
+                            "div",
+                            {
+                              style: {
+                                width: a.width || `calc(${100 / m}% - ${(m - 1) / m}rem)`,
+                                flexGrow: 1,
+                                flexShrink: 0,
+                                minWidth: "240px"
+                              },
+                              children: [
+                                /* @__PURE__ */ l.jsx(z, { className: "mb-2", children: a.label }),
+                                a.singleSelect ? /* @__PURE__ */ l.jsx(
+                                  k,
+                                  {
+                                    options: a.availableValues,
+                                    isClearable: a.clearable === void 0 ? !0 : a.clearable,
+                                    size: "sm",
+                                    variant: f,
+                                    isMulti: !1,
+                                    isSearchable: !0,
+                                    filterOption: O(D),
+                                    onChange: (e) => {
+                                      h(a.filter, e);
+                                    },
+                                    defaultValue: a.defaultValue,
+                                    value: a.value
+                                  }
+                                ) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+                                  /* @__PURE__ */ l.jsx(
+                                    k,
+                                    {
+                                      options: a.availableValues,
+                                      isMulti: !0,
+                                      size: "sm",
+                                      isClearable: a.clearable === void 0 ? !0 : a.clearable,
+                                      variant: f,
+                                      isSearchable: !0,
+                                      controlShouldRenderValue: !0,
+                                      closeMenuOnSelect: !1,
+                                      hideSelectedOptions: !1,
+                                      filterOption: O(D),
+                                      onChange: (e) => {
+                                        h(a.filter, e);
+                                      },
+                                      value: a.value,
+                                      defaultValue: a.defaultValue
+                                    }
+                                  ),
+                                  a.allowSelectAll ? /* @__PURE__ */ l.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: () => {
+                                        h(a.filter, a.availableValues);
+                                      },
+                                      children: "Select all options"
+                                    }
+                                  ) : null
+                                ] })
+                              ]
+                            },
+                            n
+                          ))
+                        }
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ l.jsx(
+                    "div",
+                    {
+                      style: {
+                        width: S === "side" ? "calc(100% - 280px - 1rem)" : "100%",
+                        minWidth: "280px",
+                        flexGrow: 1,
+                        display: "flex",
+                        gap: "1rem",
+                        flexWrap: "wrap",
+                        flexShrink: "0"
+                      },
+                      children: i.rows.map((a, n) => /* @__PURE__ */ l.jsx(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            gap: "1rem",
+                            alignItems: "stretch",
+                            minHeight: `${a.height || 0}px`,
+                            height: "auto",
+                            width: "100%",
+                            flexWrap: "wrap"
+                          },
+                          children: a.columns.map((e, r) => /* @__PURE__ */ l.jsx(
+                            "div",
+                            {
+                              className: "flex bg-transparent h-inherit grow min-w-60",
+                              style: {
+                                width: `calc(${100 * (e.columnWidth || 1) / b(a.columns)}% - ${(b(a.columns) - (e.columnWidth || 1)) / b(a.columns)}rem)`,
+                                minHeight: "inherit"
+                              },
+                              children: /* @__PURE__ */ l.jsx(
+                                E,
+                                {
+                                  graphType: e.graphType,
+                                  dataFilters: e.dataFilters,
+                                  uiMode: f,
+                                  graphSettings: {
+                                    ...e.settings || {},
+                                    width: void 0,
+                                    height: void 0,
+                                    resetSelectionOnDoubleClick: e.attachedFilter ? !1 : e.settings?.resetSelectionOnDoubleClick,
+                                    styles: e.settings?.styles || $,
+                                    classNames: e.settings?.classNames || H,
+                                    radius: e.graphType === "donutChart" ? void 0 : e.settings?.radius,
+                                    size: e.graphType === "unitChart" ? e.settings?.size : void 0,
+                                    language: e.settings?.language || i.language,
+                                    theme: e.settings?.theme || y
+                                  },
+                                  dataSettings: {
+                                    data: w ? Y(w, N || []) : void 0
+                                  },
+                                  updateFilters: e.attachedFilter && _.indexOf(e.graphType) !== -1 && o.findIndex((s) => s.filter === e.attachedFilter) !== -1 ? (s) => {
+                                    const L = o.findIndex(
+                                      (U) => U.filter === e.attachedFilter
+                                    ), P = s ? o[L].singleSelect ? { value: s, label: s } : [{ value: s, label: s }] : void 0;
+                                    h(e.attachedFilter, P);
+                                  } : void 0,
+                                  dataTransform: e.dataTransform,
+                                  dataSelectionOptions: e.dataSelectionOptions,
+                                  advancedDataSelectionOptions: e.advancedDataSelectionOptions,
+                                  graphDataConfiguration: e.graphDataConfiguration,
+                                  debugMode: c,
+                                  readableHeader: M || []
+                                }
+                              )
+                            },
+                            r
+                          ))
+                        },
+                        n
+                      ))
+                    }
+                  )
+                ] })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  he as MultiGraphDashboard
+};
 //# sourceMappingURL=MultiGraphDashboard.js.map

package/dist/MultiGraphDashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGraphDashboard.js","sources":["../src/Components/Dashboard/MultiGraphDashboard.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport intersection from 'lodash.intersection';\r\nimport flattenDeep from 'lodash.flattendeep';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { Label } from '@undp/design-system-react/Label';\r\n\r\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardColumnDataType,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  GraphType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport {\r\n  fetchAndParseCSV,\r\n  fetchAndParseJSON,\r\n  fetchAndParseMultipleDataSources,\r\n  fetchAndTransformDataFromAPI,\r\n} from '@/Utils/fetchAndParseData';\r\nimport { getUniqValue } from '@/Utils/getUniqValue';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { transformDefaultValue } from '@/Utils/transformDataForSelect';\r\n\r\ninterface Props {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  dataFilters?: DataFilterDataType[];\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  filterPosition?: 'top' | 'side';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\nconst TotalWidth = (columns: DashboardColumnDataType[]) => {\r\n  const columnWidth = columns.map(d => d.columnWidth || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nconst GraphWithAttachedFilter: GraphType[] = [\r\n  'barChart',\r\n  'choroplethMap',\r\n  'biVariateChoroplethMap',\r\n  'circlePacking',\r\n  'treeMap',\r\n];\r\n\r\nexport function MultiGraphDashboard(props: Props) {\r\n  const {\r\n    dashboardID,\r\n    dashboardLayout,\r\n    dataSettings,\r\n    filters,\r\n    debugMode,\r\n    theme = 'light',\r\n    readableHeader,\r\n    dataFilters,\r\n    noOfFiltersPerRow = 4,\r\n    filterPosition,\r\n    uiMode = 'normal',\r\n    graphStyles,\r\n    graphClassNames,\r\n  } = props;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [dataFromFile, setDataFromFile] = useState<any>(undefined);\r\n  const [filterSettings, setFilterSettings] = useState<FilterSettingsDataType[]>([]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n\r\n  const filteredData = useMemo(() => {\r\n    if (!dataFromFile || filterSettings.length === 0) return dataFromFile;\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    const result = dataFromFile.filter((item: any) =>\r\n      filterSettings.every(filter =>\r\n        filter.value && flattenDeep([filter.value]).length > 0\r\n          ? intersection(\r\n              flattenDeep([item[filter.filter]]),\r\n              flattenDeep([filter.value]).map(el => el.value),\r\n            ).length > 0\r\n          : true,\r\n      ),\r\n    );\r\n    return result;\r\n  }, [filterSettings, dataFromFile]);\r\n  useEffect(() => {\r\n    setData(filteredData);\r\n  }, [filteredData]);\r\n\r\n  const fetchDataHandler = useCallback(async () => {\r\n    if (dataSettings) {\r\n      try {\r\n        const fetchData = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? fetchAndParseJSON(\r\n                  dataSettings.dataURL,\r\n                  dataSettings.columnsToArray,\r\n                  dataSettings.dataTransformation,\r\n                  debugMode,\r\n                )\r\n              : dataSettings.fileType === 'api'\r\n                ? fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    dataSettings.columnsToArray,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : fetchAndParseCSV(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.dataTransformation,\r\n                    dataSettings.columnsToArray,\r\n                    debugMode,\r\n                    dataSettings.delimiter,\r\n                    true,\r\n                  )\r\n            : fetchAndParseMultipleDataSources(dataSettings.dataURL, dataSettings.idColumnTitle)\r\n          : transformColumnsToArray(dataSettings.data, dataSettings.columnsToArray);\r\n\r\n        const d = await fetchData;\r\n        setDataFromFile(d);\r\n\r\n        // Optimize filter settings generation\r\n        const newFilterSettings = (filters || []).map(el => ({\r\n          filter: el.column,\r\n          label: el.label || `Filter by ${el.column}`,\r\n          singleSelect: el.singleSelect,\r\n          clearable: el.clearable,\r\n          defaultValue: transformDefaultValue(el.defaultValue),\r\n          value: transformDefaultValue(el.defaultValue),\r\n          availableValues: getUniqValue(d, el.column)\r\n            .filter(v => !el.excludeValues?.includes(`${v}`))\r\n            .map(v => ({ value: v, label: v })),\r\n          allowSelectAll: el.allowSelectAll,\r\n          width: el.width,\r\n        }));\r\n\r\n        setFilterSettings(newFilterSettings);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    }\r\n  }, [dataSettings, filters, debugMode]);\r\n  useEffect(() => {\r\n    fetchDataHandler();\r\n  }, [fetchDataHandler]);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const handleFilterChange = useCallback((filter: string, values: any) => {\r\n    setFilterSettings(prev => prev.map(f => (f.filter === filter ? { ...f, value: values } : f)));\r\n  }, []);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex grow`}\r\n      dir={\r\n        dashboardLayout.language === 'he' || dashboardLayout.language === 'ar' ? 'rtl' : undefined\r\n      }\r\n    >\r\n      <div\r\n        className={`${\r\n          !dashboardLayout.backgroundColor\r\n            ? 'bg-transparent '\r\n            : dashboardLayout.backgroundColor === true\r\n              ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n              : ''\r\n        }ml-auto mr-auto gap-4 flex flex-col w-full grow h-inherit ${\r\n          dashboardLayout.language || 'en'\r\n        }`}\r\n        style={{\r\n          ...(dashboardLayout.backgroundColor && dashboardLayout.backgroundColor !== true\r\n            ? { backgroundColor: dashboardLayout.backgroundColor }\r\n            : {}),\r\n        }}\r\n        id={dashboardID}\r\n      >\r\n        <div\r\n          style={{\r\n            padding: dashboardLayout.backgroundColor\r\n              ? dashboardLayout.padding || '1rem'\r\n              : dashboardLayout.padding || 0,\r\n            flexGrow: 1,\r\n            display: 'flex',\r\n          }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {dashboardLayout.title || dashboardLayout.description ? (\r\n              <GraphHeader\r\n                graphTitle={dashboardLayout.title}\r\n                graphDescription={dashboardLayout.description}\r\n                isDashboard\r\n              />\r\n            ) : null}\r\n            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>\r\n              {filterSettings.length !== 0 ? (\r\n                <div\r\n                  style={{\r\n                    width: filterPosition === 'side' ? '280px' : '100%',\r\n                    flexGrow: 1,\r\n                    flexShrink: 0,\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      flexWrap: 'wrap',\r\n                      alignItems: 'flex-start',\r\n                      width: '100%',\r\n                      position: 'sticky',\r\n                      top: '1rem',\r\n                    }}\r\n                  >\r\n                    {filterSettings?.map((d, i) => (\r\n                      <div\r\n                        style={{\r\n                          width:\r\n                            d.width ||\r\n                            `calc(${100 / noOfFiltersPerRow}% - ${\r\n                              (noOfFiltersPerRow - 1) / noOfFiltersPerRow\r\n                            }rem)`,\r\n                          flexGrow: 1,\r\n                          flexShrink: 0,\r\n                          minWidth: '240px',\r\n                        }}\r\n                        key={i}\r\n                      >\r\n                        <Label className='mb-2'>{d.label}</Label>\r\n                        {d.singleSelect ? (\r\n                          <DropdownSelect\r\n                            options={d.availableValues}\r\n                            isClearable={d.clearable === undefined ? true : d.clearable}\r\n                            size='sm'\r\n                            variant={uiMode}\r\n                            isMulti={false}\r\n                            isSearchable\r\n                            filterOption={createFilter(filterConfig)}\r\n                            onChange={el => {\r\n                              handleFilterChange(d.filter, el);\r\n                            }}\r\n                            defaultValue={d.defaultValue}\r\n                            value={d.value}\r\n                          />\r\n                        ) : (\r\n                          <>\r\n                            <DropdownSelect\r\n                              options={d.availableValues}\r\n                              isMulti\r\n                              size='sm'\r\n                              isClearable={d.clearable === undefined ? true : d.clearable}\r\n                              variant={uiMode}\r\n                              isSearchable\r\n                              controlShouldRenderValue\r\n                              closeMenuOnSelect={false}\r\n                              hideSelectedOptions={false}\r\n                              filterOption={createFilter(filterConfig)}\r\n                              onChange={el => {\r\n                                handleFilterChange(d.filter, el);\r\n                              }}\r\n                              value={d.value}\r\n                              defaultValue={d.defaultValue}\r\n                            />\r\n                            {d.allowSelectAll ? (\r\n                              <button\r\n                                type='button'\r\n                                className='bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400'\r\n                                onClick={() => {\r\n                                  handleFilterChange(d.filter, d.availableValues);\r\n                                }}\r\n                              >\r\n                                Select all options\r\n                              </button>\r\n                            ) : null}\r\n                          </>\r\n                        )}\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                </div>\r\n              ) : null}\r\n              <div\r\n                style={{\r\n                  width: filterPosition === 'side' ? 'calc(100% - 280px - 1rem)' : '100%',\r\n                  minWidth: '280px',\r\n                  flexGrow: 1,\r\n                  display: 'flex',\r\n                  gap: '1rem',\r\n                  flexWrap: 'wrap',\r\n                  flexShrink: '0',\r\n                }}\r\n              >\r\n                {dashboardLayout.rows.map((d, i) => (\r\n                  <div\r\n                    key={i}\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      alignItems: 'stretch',\r\n                      minHeight: `${d.height || 0}px`,\r\n                      height: 'auto',\r\n                      width: '100%',\r\n                      flexWrap: 'wrap',\r\n                    }}\r\n                  >\r\n                    {d.columns.map((el, j) => (\r\n                      <div\r\n                        key={j}\r\n                        className='flex bg-transparent h-inherit grow min-w-60'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }% - ${\r\n                            (TotalWidth(d.columns) - (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }rem)`,\r\n                          minHeight: 'inherit',\r\n                        }}\r\n                      >\r\n                        <SingleGraphDashboard\r\n                          graphType={el.graphType}\r\n                          dataFilters={el.dataFilters}\r\n                          uiMode={uiMode}\r\n                          graphSettings={{\r\n                            ...(el.settings || {}),\r\n                            width: undefined,\r\n                            height: undefined,\r\n                            resetSelectionOnDoubleClick: el.attachedFilter\r\n                              ? false\r\n                              : el.settings?.resetSelectionOnDoubleClick,\r\n                            styles: el.settings?.styles || graphStyles,\r\n                            classNames: el.settings?.classNames || graphClassNames,\r\n                            radius: el.graphType === 'donutChart' ? undefined : el.settings?.radius,\r\n                            size: el.graphType === 'unitChart' ? el.settings?.size : undefined,\r\n                            language: el.settings?.language || dashboardLayout.language,\r\n                            theme: el.settings?.theme || theme,\r\n                          }}\r\n                          dataSettings={{\r\n                            data: data ? filterData(data, dataFilters || []) : undefined,\r\n                          }}\r\n                          updateFilters={\r\n                            el.attachedFilter &&\r\n                            GraphWithAttachedFilter.indexOf(el.graphType) !== -1 &&\r\n                            filterSettings.findIndex(f => f.filter === el.attachedFilter) !== -1\r\n                              ? dClicked => {\r\n                                  const indx = filterSettings.findIndex(\r\n                                    f => f.filter === el.attachedFilter,\r\n                                  );\r\n                                  const value = dClicked\r\n                                    ? filterSettings[indx].singleSelect\r\n                                      ? { value: dClicked, label: dClicked }\r\n                                      : [{ value: dClicked, label: dClicked }]\r\n                                    : undefined;\r\n                                  handleFilterChange(el.attachedFilter as string, value);\r\n                                }\r\n                              : undefined\r\n                          }\r\n                          dataTransform={el.dataTransform}\r\n                          dataSelectionOptions={el.dataSelectionOptions}\r\n                          advancedDataSelectionOptions={el.advancedDataSelectionOptions}\r\n                          graphDataConfiguration={el.graphDataConfiguration}\r\n                          debugMode={debugMode}\r\n                          readableHeader={readableHeader || []}\r\n                        />\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","d","acc","cur","GraphWithAttachedFilter","MultiGraphDashboard","props","dashboardID","dashboardLayout","dataSettings","filters","debugMode","theme","readableHeader","dataFilters","noOfFiltersPerRow","filterPosition","uiMode","graphStyles","graphClassNames","data","setData","useState","dataFromFile","setDataFromFile","filterSettings","setFilterSettings","filterConfig","useMemo","filteredData","item","filter","flattenDeep","intersection","el","useEffect","fetchDataHandler","useCallback","fetchAndParseJSON","fetchAndTransformDataFromAPI","fetchAndParseCSV","fetchAndParseMultipleDataSources","transformColumnsToArray","newFilterSettings","transformDefaultValue","getUniqValue","v","error","handleFilterChange","values","prev","f","jsx","jsxs","GraphHeader","i","Label","DropdownSelect","createFilter","Fragment","j","SingleGraphDashboard","filterData","dClicked","indx","value"],"mappings":"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"}
+{"version":3,"file":"MultiGraphDashboard.js","sources":["../src/Components/Dashboard/MultiGraphDashboard.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport intersection from 'lodash.intersection';\r\nimport flattenDeep from 'lodash.flattendeep';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { Label } from '@undp/design-system-react/Label';\r\n\r\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardColumnDataType,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  GraphType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport {\r\n  fetchAndParseCSV,\r\n  fetchAndParseJSON,\r\n  fetchAndParseMultipleDataSources,\r\n  fetchAndTransformDataFromAPI,\r\n} from '@/Utils/fetchAndParseData';\r\nimport { getUniqValue } from '@/Utils/getUniqValue';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { transformDefaultValue } from '@/Utils/transformDataForSelect';\r\n\r\ninterface Props {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  dataFilters?: DataFilterDataType[];\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  filterPosition?: 'top' | 'side';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\nconst TotalWidth = (columns: DashboardColumnDataType[]) => {\r\n  const columnWidth = columns.map(d => d.columnWidth || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nconst GraphWithAttachedFilter: GraphType[] = [\r\n  'barChart',\r\n  'choroplethMap',\r\n  'biVariateChoroplethMap',\r\n  'circlePacking',\r\n  'treeMap',\r\n];\r\n\r\nexport function MultiGraphDashboard(props: Props) {\r\n  const {\r\n    dashboardID,\r\n    dashboardLayout,\r\n    dataSettings,\r\n    filters,\r\n    debugMode,\r\n    theme = 'light',\r\n    readableHeader,\r\n    dataFilters,\r\n    noOfFiltersPerRow = 4,\r\n    filterPosition,\r\n    uiMode = 'normal',\r\n    graphStyles,\r\n    graphClassNames,\r\n  } = props;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [dataFromFile, setDataFromFile] = useState<any>(undefined);\r\n  const [filterSettings, setFilterSettings] = useState<FilterSettingsDataType[]>([]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n\r\n  const filteredData = useMemo(() => {\r\n    if (!dataFromFile || filterSettings.length === 0) return dataFromFile;\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    const result = dataFromFile.filter((item: any) =>\r\n      filterSettings.every(filter =>\r\n        filter.value && flattenDeep([filter.value]).length > 0\r\n          ? intersection(\r\n              flattenDeep([item[filter.filter]]),\r\n              flattenDeep([filter.value]).map(el => el.value),\r\n            ).length > 0\r\n          : true,\r\n      ),\r\n    );\r\n    return result;\r\n  }, [filterSettings, dataFromFile]);\r\n  useEffect(() => {\r\n    setData(filteredData);\r\n  }, [filteredData]);\r\n\r\n  const fetchDataHandler = useCallback(async () => {\r\n    if (dataSettings) {\r\n      try {\r\n        const fetchData = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? fetchAndParseJSON(\r\n                  dataSettings.dataURL,\r\n                  dataSettings.columnsToArray,\r\n                  dataSettings.dataTransformation,\r\n                  debugMode,\r\n                )\r\n              : dataSettings.fileType === 'api'\r\n                ? fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    dataSettings.columnsToArray,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : fetchAndParseCSV(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.dataTransformation,\r\n                    dataSettings.columnsToArray,\r\n                    debugMode,\r\n                    dataSettings.delimiter,\r\n                    true,\r\n                  )\r\n            : fetchAndParseMultipleDataSources(dataSettings.dataURL, dataSettings.idColumnTitle)\r\n          : transformColumnsToArray(dataSettings.data, dataSettings.columnsToArray);\r\n\r\n        const d = await fetchData;\r\n        setDataFromFile(d);\r\n\r\n        // Optimize filter settings generation\r\n        const newFilterSettings = (filters || []).map(el => ({\r\n          filter: el.column,\r\n          label: el.label || `Filter by ${el.column}`,\r\n          singleSelect: el.singleSelect,\r\n          clearable: el.clearable,\r\n          defaultValue: transformDefaultValue(el.defaultValue),\r\n          value: transformDefaultValue(el.defaultValue),\r\n          availableValues: getUniqValue(d, el.column)\r\n            .filter(v => !el.excludeValues?.includes(`${v}`))\r\n            .map(v => ({ value: v, label: v })),\r\n          allowSelectAll: el.allowSelectAll,\r\n          width: el.width,\r\n        }));\r\n\r\n        setFilterSettings(newFilterSettings);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    }\r\n  }, [dataSettings, filters, debugMode]);\r\n  useEffect(() => {\r\n    fetchDataHandler();\r\n  }, [fetchDataHandler]);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const handleFilterChange = useCallback((filter: string, values: any) => {\r\n    setFilterSettings(prev => prev.map(f => (f.filter === filter ? { ...f, value: values } : f)));\r\n  }, []);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex grow`}\r\n      dir={\r\n        dashboardLayout.language === 'he' || dashboardLayout.language === 'ar' ? 'rtl' : undefined\r\n      }\r\n    >\r\n      <div\r\n        className={`${\r\n          !dashboardLayout.backgroundColor\r\n            ? 'bg-transparent '\r\n            : dashboardLayout.backgroundColor === true\r\n              ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n              : ''\r\n        }ml-auto mr-auto gap-4 flex flex-col w-full grow h-inherit ${\r\n          dashboardLayout.language || 'en'\r\n        }`}\r\n        style={{\r\n          ...(dashboardLayout.backgroundColor && dashboardLayout.backgroundColor !== true\r\n            ? { backgroundColor: dashboardLayout.backgroundColor }\r\n            : {}),\r\n        }}\r\n        id={dashboardID}\r\n      >\r\n        <div\r\n          style={{\r\n            padding: dashboardLayout.backgroundColor\r\n              ? dashboardLayout.padding || '1rem'\r\n              : dashboardLayout.padding || 0,\r\n            flexGrow: 1,\r\n            display: 'flex',\r\n          }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {dashboardLayout.title || dashboardLayout.description ? (\r\n              <GraphHeader\r\n                graphTitle={dashboardLayout.title}\r\n                graphDescription={dashboardLayout.description}\r\n                isDashboard\r\n              />\r\n            ) : null}\r\n            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>\r\n              {filterSettings.length !== 0 ? (\r\n                <div\r\n                  style={{\r\n                    width: filterPosition === 'side' ? '280px' : '100%',\r\n                    flexGrow: 1,\r\n                    flexShrink: 0,\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      flexWrap: 'wrap',\r\n                      alignItems: 'flex-start',\r\n                      width: '100%',\r\n                      position: 'sticky',\r\n                      top: '1rem',\r\n                    }}\r\n                  >\r\n                    {filterSettings?.map((d, i) => (\r\n                      <div\r\n                        style={{\r\n                          width:\r\n                            d.width ||\r\n                            `calc(${100 / noOfFiltersPerRow}% - ${\r\n                              (noOfFiltersPerRow - 1) / noOfFiltersPerRow\r\n                            }rem)`,\r\n                          flexGrow: 1,\r\n                          flexShrink: 0,\r\n                          minWidth: '240px',\r\n                        }}\r\n                        key={i}\r\n                      >\r\n                        <Label className='mb-2'>{d.label}</Label>\r\n                        {d.singleSelect ? (\r\n                          <DropdownSelect\r\n                            options={d.availableValues}\r\n                            isClearable={d.clearable === undefined ? true : d.clearable}\r\n                            size='sm'\r\n                            variant={uiMode}\r\n                            isMulti={false}\r\n                            isSearchable\r\n                            filterOption={createFilter(filterConfig)}\r\n                            onChange={el => {\r\n                              handleFilterChange(d.filter, el);\r\n                            }}\r\n                            defaultValue={d.defaultValue}\r\n                            value={d.value}\r\n                          />\r\n                        ) : (\r\n                          <>\r\n                            <DropdownSelect\r\n                              options={d.availableValues}\r\n                              isMulti\r\n                              size='sm'\r\n                              isClearable={d.clearable === undefined ? true : d.clearable}\r\n                              variant={uiMode}\r\n                              isSearchable\r\n                              controlShouldRenderValue\r\n                              closeMenuOnSelect={false}\r\n                              hideSelectedOptions={false}\r\n                              filterOption={createFilter(filterConfig)}\r\n                              onChange={el => {\r\n                                handleFilterChange(d.filter, el);\r\n                              }}\r\n                              value={d.value}\r\n                              defaultValue={d.defaultValue}\r\n                            />\r\n                            {d.allowSelectAll ? (\r\n                              <button\r\n                                type='button'\r\n                                className='bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400'\r\n                                onClick={() => {\r\n                                  handleFilterChange(d.filter, d.availableValues);\r\n                                }}\r\n                              >\r\n                                Select all options\r\n                              </button>\r\n                            ) : null}\r\n                          </>\r\n                        )}\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                </div>\r\n              ) : null}\r\n              <div\r\n                style={{\r\n                  width: filterPosition === 'side' ? 'calc(100% - 280px - 1rem)' : '100%',\r\n                  minWidth: '280px',\r\n                  flexGrow: 1,\r\n                  display: 'flex',\r\n                  gap: '1rem',\r\n                  flexWrap: 'wrap',\r\n                  flexShrink: '0',\r\n                }}\r\n              >\r\n                {dashboardLayout.rows.map((d, i) => (\r\n                  <div\r\n                    key={i}\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      alignItems: 'stretch',\r\n                      minHeight: `${d.height || 0}px`,\r\n                      height: 'auto',\r\n                      width: '100%',\r\n                      flexWrap: 'wrap',\r\n                    }}\r\n                  >\r\n                    {d.columns.map((el, j) => (\r\n                      <div\r\n                        key={j}\r\n                        className='flex bg-transparent h-inherit grow min-w-60'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }% - ${\r\n                            (TotalWidth(d.columns) - (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }rem)`,\r\n                          minHeight: 'inherit',\r\n                        }}\r\n                      >\r\n                        <SingleGraphDashboard\r\n                          graphType={el.graphType}\r\n                          dataFilters={el.dataFilters}\r\n                          uiMode={uiMode}\r\n                          graphSettings={{\r\n                            ...(el.settings || {}),\r\n                            width: undefined,\r\n                            height: undefined,\r\n                            resetSelectionOnDoubleClick: el.attachedFilter\r\n                              ? false\r\n                              : el.settings?.resetSelectionOnDoubleClick,\r\n                            styles: el.settings?.styles || graphStyles,\r\n                            classNames: el.settings?.classNames || graphClassNames,\r\n                            radius: el.graphType === 'donutChart' ? undefined : el.settings?.radius,\r\n                            size: el.graphType === 'unitChart' ? el.settings?.size : undefined,\r\n                            language: el.settings?.language || dashboardLayout.language,\r\n                            theme: el.settings?.theme || theme,\r\n                          }}\r\n                          dataSettings={{\r\n                            data: data ? filterData(data, dataFilters || []) : undefined,\r\n                          }}\r\n                          updateFilters={\r\n                            el.attachedFilter &&\r\n                            GraphWithAttachedFilter.indexOf(el.graphType) !== -1 &&\r\n                            filterSettings.findIndex(f => f.filter === el.attachedFilter) !== -1\r\n                              ? dClicked => {\r\n                                  const indx = filterSettings.findIndex(\r\n                                    f => f.filter === el.attachedFilter,\r\n                                  );\r\n                                  const value = dClicked\r\n                                    ? filterSettings[indx].singleSelect\r\n                                      ? { value: dClicked, label: dClicked }\r\n                                      : [{ value: dClicked, label: dClicked }]\r\n                                    : undefined;\r\n                                  handleFilterChange(el.attachedFilter as string, value);\r\n                                }\r\n                              : undefined\r\n                          }\r\n                          dataTransform={el.dataTransform}\r\n                          dataSelectionOptions={el.dataSelectionOptions}\r\n                          advancedDataSelectionOptions={el.advancedDataSelectionOptions}\r\n                          graphDataConfiguration={el.graphDataConfiguration}\r\n                          debugMode={debugMode}\r\n                          readableHeader={readableHeader || []}\r\n                        />\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","d","acc","cur","GraphWithAttachedFilter","MultiGraphDashboard","props","dashboardID","dashboardLayout","dataSettings","filters","debugMode","theme","readableHeader","dataFilters","noOfFiltersPerRow","filterPosition","uiMode","graphStyles","graphClassNames","data","setData","useState","dataFromFile","setDataFromFile","filterSettings","setFilterSettings","filterConfig","useMemo","filteredData","item","filter","flattenDeep","intersection","el","useEffect","fetchDataHandler","useCallback","fetchAndParseJSON","fetchAndTransformDataFromAPI","fetchAndParseCSV","fetchAndParseMultipleDataSources","transformColumnsToArray","newFilterSettings","transformDefaultValue","getUniqValue","v","error","handleFilterChange","values","prev","f","jsx","jsxs","GraphHeader","i","Label","DropdownSelect","createFilter","Fragment","j","SingleGraphDashboard","filterData","dClicked","indx","value"],"mappings":"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"}

package/dist/MultiGraphDashboardFromConfig.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-CHPV5EwG-DDoeWRVt.cjs"),s=require("react"),n=require("./Spinner-DA6Z5E4n.cjs"),d=require("./MultiGraphDashboard.cjs"),u=require("./fetchAndParseData-DmgQtB9n.cjs");function l(i){const{config:t}=i,[e,r]=s.useState(void 0);return s.useEffect(()=>{(async()=>{if(typeof t=="string"){const o=await u.fetchAndParseJSON(t);r(o)}else r(t)})()},[t]),e?a.jsxRuntimeExports.jsx(d.MultiGraphDashboard,{dashboardID:e.dashboardID,dashboardLayout:e.dashboardLayout,dataSettings:e.dataSettings,filters:e.filters,debugMode:e.debugMode,theme:e.theme,readableHeader:e.readableHeader,dataFilters:e.dataFilters,noOfFiltersPerRow:e.noOfFiltersPerRow,filterPosition:e.filterPosition,uiMode:e.uiMode,graphStyles:e.graphStyles,graphClassNames:e.graphClassNames}):a.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:a.jsxRuntimeExports.jsx(n.y,{})})}exports.MultiGraphDashboardFromConfig=l;
+//# sourceMappingURL=MultiGraphDashboardFromConfig.cjs.map

package/dist/MultiGraphDashboardFromConfig.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGraphDashboardFromConfig.cjs","sources":["../src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  filterPosition?: 'top' | 'side';\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <MultiGraphDashboard\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      filterPosition={configSettings.filterPosition}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","data","fetchAndParseJSON","jsx","MultiGraphDashboard","Spinner"],"mappings":"6QAsCO,SAASA,EAA8BC,EAAc,CAC1D,KAAM,CAAE,OAAAC,GAAWD,EACb,CAACE,EAAgBC,CAAiB,EAAIC,EAAAA,SAAmC,MAAS,EAYxF,OAXAC,EAAAA,UAAU,IAAM,EACI,SAAY,CAC5B,GAAI,OAAOJ,GAAW,SAAU,CAC9B,MAAMK,EAAO,MAAMC,EAAAA,kBAAkBN,CAAM,EAC3CE,EAAkBG,CAAI,CACxB,MACEH,EAAkBF,CAAM,CAE5B,GACA,CACF,EAAG,CAACA,CAAM,CAAC,EACNC,EAOHM,EAAAA,kBAAAA,IAACC,EAAAA,oBAAA,CACC,YAAaP,EAAe,YAC5B,gBAAiBA,EAAe,gBAChC,aAAcA,EAAe,aAC7B,QAASA,EAAe,QACxB,UAAWA,EAAe,UAC1B,MAAOA,EAAe,MACtB,eAAgBA,EAAe,eAC/B,YAAaA,EAAe,YAC5B,kBAAmBA,EAAe,kBAClC,eAAgBA,EAAe,eAC/B,OAAQA,EAAe,OACvB,YAAaA,EAAe,YAC5B,gBAAiBA,EAAe,eAAA,CAAA,0BAlB/B,MAAA,CAAI,UAAU,iCACb,SAAAM,wBAACE,EAAAA,IAAQ,EACX,CAmBN"}

package/dist/MultiGraphDashboardFromConfig.d.ts

@@ -126,8 +126,11 @@ declare interface CustomLayerDataType {
     layer: React.ReactNode;
 }
 
-declare type DashboardColumnDataType = {
+declare interface DashboardColumnDataType extends DashboardColumnDataWithoutGraphType {
     graphType: GraphType;
+}
+
+declare interface DashboardColumnDataWithoutGraphType {
     attachedFilter?: string;
     columnWidth?: number;
     dataTransform?: {
@@ -139,19 +142,22 @@ declare type DashboardColumnDataType = {
     dataSelectionOptions?: DataSelectionDataType[];
     advancedDataSelectionOptions?: AdvancedDataSelectionDataType[];
     settings?: GraphSettingsDataType;
-};
+}
 
-declare type DashboardLayoutDataType = {
+declare interface DashboardLayoutDataType extends DashboardLayoutDataWithoutRowsType {
+    rows: {
+        columns: DashboardColumnDataType[];
+        height?: number;
+    }[];
+}
+
+declare interface DashboardLayoutDataWithoutRowsType {
     title?: string;
     description?: string;
     padding?: string;
     backgroundColor?: string | boolean;
     language?: Languages;
-    rows: {
-        columns: DashboardColumnDataType[];
-        height?: number;
-    }[];
-};
+}
 
 declare interface DataFilterDataType {
     column: string;
@@ -221,8 +227,6 @@ declare type FilterUiSettingsDataType = {
     width?: string;
 };
 
-declare type GeoHubGraphType = 'geoHubCompareMap' | 'geoHubMap' | 'geoHubMapWithLayerSelection';
-
 declare interface GraphConfigurationDataType {
     columnId: string | string[];
     chartConfigId: string;
@@ -471,9 +475,9 @@ declare interface GraphSettingsDataType {
     polygonAltitude?: number;
 }
 
-declare type GraphType = GraphTypeForGriddedGraph | GeoHubGraphType;
+declare type GraphType = GraphTypeForGriddedGraph;
 
-declare type GraphTypeForGriddedGraph = 'barChart' | 'stackedBarChart' | 'groupedBarChart' | 'lineChart' | 'dualAxisLineChart' | 'multiLineChart' | 'multiLineAltChart' | 'differenceLineChart' | 'stackedAreaChart' | 'choroplethMap' | 'biVariateChoroplethMap' | 'dotDensityMap' | 'donutChart' | 'slopeChart' | 'scatterPlot' | 'dumbbellChart' | 'treeMap' | 'circlePacking' | 'heatMap' | 'stripChart' | 'beeSwarmChart' | 'butterflyChart' | 'histogram' | 'sparkLine' | 'paretoChart' | 'dataTable' | 'statCard' | 'unitChart' | 'sankeyChart' | 'lineChartWithConfidenceInterval' | 'dataCards' | 'radarChart' | 'bulletChart' | 'threeDGlobe';
+declare type GraphTypeForGriddedGraph = 'barChart' | 'stackedBarChart' | 'groupedBarChart' | 'lineChart' | 'dualAxisLineChart' | 'multiLineChart' | 'multiLineAltChart' | 'differenceLineChart' | 'stackedAreaChart' | 'choroplethMap' | 'biVariateChoroplethMap' | 'dotDensityMap' | 'donutChart' | 'slopeChart' | 'scatterPlot' | 'dumbbellChart' | 'treeMap' | 'circlePacking' | 'heatMap' | 'stripChart' | 'beeSwarmChart' | 'butterflyChart' | 'histogram' | 'sparkLine' | 'paretoChart' | 'dataTable' | 'statCard' | 'unitChart' | 'sankeyChart' | 'lineChartWithConfidenceInterval' | 'dataCards' | 'radarChart' | 'bulletChart';
 
 declare interface HighlightAreaSettingsDataType {
     coordinates: [number | string | null, number | string | null];

package/dist/MultiGraphDashboardFromConfig.js

@@ -1,2 +1,38 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-BHm2KTjD-D8FylaKc.cjs"),s=require("react"),n=require("./Spinner-UmN-KPe9.cjs"),d=require("./MultiGraphDashboard.js"),u=require("./fetchAndParseData.js");function l(i){const{config:t}=i,[e,a]=s.useState(void 0);return s.useEffect(()=>{(async()=>{if(typeof t=="string"){const o=await u.fetchAndParseJSON(t);a(o)}else a(t)})()},[t]),e?r.jsxRuntimeExports.jsx(d.MultiGraphDashboard,{dashboardID:e.dashboardID,dashboardLayout:e.dashboardLayout,dataSettings:e.dataSettings,filters:e.filters,debugMode:e.debugMode,theme:e.theme,readableHeader:e.readableHeader,dataFilters:e.dataFilters,noOfFiltersPerRow:e.noOfFiltersPerRow,filterPosition:e.filterPosition,uiMode:e.uiMode,graphStyles:e.graphStyles,graphClassNames:e.graphClassNames}):r.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:r.jsxRuntimeExports.jsx(n.SpinnerExports.Spinner,{})})}exports.MultiGraphDashboardFromConfig=l;
+import { j as a } from "./index-CHPV5EwG-BPSP-7Jg.js";
+import { useState as i, useEffect as d } from "react";
+import { y as f } from "./Spinner-C85UF28E.js";
+import { MultiGraphDashboard as n } from "./MultiGraphDashboard.js";
+import { f as l } from "./fetchAndParseData-Bcmr659B.js";
+function b(s) {
+  const { config: e } = s, [t, r] = i(void 0);
+  return d(() => {
+    (async () => {
+      if (typeof e == "string") {
+        const o = await l(e);
+        r(o);
+      } else
+        r(e);
+    })();
+  }, [e]), t ? /* @__PURE__ */ a.jsx(
+    n,
+    {
+      dashboardID: t.dashboardID,
+      dashboardLayout: t.dashboardLayout,
+      dataSettings: t.dataSettings,
+      filters: t.filters,
+      debugMode: t.debugMode,
+      theme: t.theme,
+      readableHeader: t.readableHeader,
+      dataFilters: t.dataFilters,
+      noOfFiltersPerRow: t.noOfFiltersPerRow,
+      filterPosition: t.filterPosition,
+      uiMode: t.uiMode,
+      graphStyles: t.graphStyles,
+      graphClassNames: t.graphClassNames
+    }
+  ) : /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ a.jsx(f, {}) });
+}
+export {
+  b as MultiGraphDashboardFromConfig
+};
 //# sourceMappingURL=MultiGraphDashboardFromConfig.js.map

package/dist/MultiGraphDashboardFromConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGraphDashboardFromConfig.js","sources":["../src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  filterPosition?: 'top' | 'side';\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <MultiGraphDashboard\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      filterPosition={configSettings.filterPosition}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","data","fetchAndParseJSON","jsx","MultiGraphDashboard","Spinner"],"mappings":"kQAsCO,SAASA,EAA8BC,EAAc,CAC1D,KAAM,CAAE,OAAAC,GAAWD,EACb,CAACE,EAAgBC,CAAiB,EAAIC,EAAAA,SAAmC,MAAS,EAYxF,OAXAC,EAAAA,UAAU,IAAM,EACI,SAAY,CAC5B,GAAI,OAAOJ,GAAW,SAAU,CAC9B,MAAMK,EAAO,MAAMC,EAAAA,kBAAkBN,CAAM,EAC3CE,EAAkBG,CAAI,CACxB,MACEH,EAAkBF,CAAM,CAE5B,GACA,CACF,EAAG,CAACA,CAAM,CAAC,EACNC,EAOHM,EAAAA,kBAAAA,IAACC,EAAAA,oBAAA,CACC,YAAaP,EAAe,YAC5B,gBAAiBA,EAAe,gBAChC,aAAcA,EAAe,aAC7B,QAASA,EAAe,QACxB,UAAWA,EAAe,UAC1B,MAAOA,EAAe,MACtB,eAAgBA,EAAe,eAC/B,YAAaA,EAAe,YAC5B,kBAAmBA,EAAe,kBAClC,eAAgBA,EAAe,eAC/B,OAAQA,EAAe,OACvB,YAAaA,EAAe,YAC5B,gBAAiBA,EAAe,eAAA,CAAA,0BAlB/B,MAAA,CAAI,UAAU,iCACb,SAAAM,wBAACE,EAAAA,eAAAA,UAAQ,EACX,CAmBN"}
+{"version":3,"file":"MultiGraphDashboardFromConfig.js","sources":["../src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  filterPosition?: 'top' | 'side';\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <MultiGraphDashboard\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      filterPosition={configSettings.filterPosition}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","data","fetchAndParseJSON","jsx","MultiGraphDashboard","Spinner"],"mappings":";;;;;AAsCO,SAASA,EAA8BC,GAAc;AAC1D,QAAM,EAAE,QAAAC,MAAWD,GACb,CAACE,GAAgBC,CAAiB,IAAIC,EAAmC,MAAS;AAYxF,SAXAC,EAAU,MAAM;AASd,KARkB,YAAY;AAC5B,UAAI,OAAOJ,KAAW,UAAU;AAC9B,cAAMK,IAAO,MAAMC,EAAkBN,CAAM;AAC3C,QAAAE,EAAkBG,CAAI;AAAA,MACxB;AACE,QAAAH,EAAkBF,CAAM;AAAA,IAE5B,GACA;AAAA,EACF,GAAG,CAACA,CAAM,CAAC,GACNC,IAOHM,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAaP,EAAe;AAAA,MAC5B,iBAAiBA,EAAe;AAAA,MAChC,cAAcA,EAAe;AAAA,MAC7B,SAASA,EAAe;AAAA,MACxB,WAAWA,EAAe;AAAA,MAC1B,OAAOA,EAAe;AAAA,MACtB,gBAAgBA,EAAe;AAAA,MAC/B,aAAaA,EAAe;AAAA,MAC5B,mBAAmBA,EAAe;AAAA,MAClC,gBAAgBA,EAAe;AAAA,MAC/B,QAAQA,EAAe;AAAA,MACvB,aAAaA,EAAe;AAAA,MAC5B,iBAAiBA,EAAe;AAAA,IAAA;AAAA,EAAA,0BAlB/B,OAAA,EAAI,WAAU,kCACb,UAAAM,gBAAAA,MAACE,KAAQ,GACX;AAmBN;"}

package/dist/MultiGraphDashboardWideToLongFormat.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),o=require("react"),D=require("./DropdownSelect-0I2QxaVy.cjs"),L=require("./checkIfMultiple-Do4kADNr.cjs"),k=require("./Spinner-DA6Z5E4n.cjs"),N=require("./SingleGraphDashboard.cjs"),m=require("./fetchAndParseData-DmgQtB9n.cjs"),W=require("./GraphHeader.cjs"),q=require("./filterData-DN6py7y_.cjs");function A(d,l,e,t){const i=[];return d.forEach(u=>{Object.entries(u).forEach(([n,p])=>{if(n!==l){const c={indicator:e.findIndex(h=>h.value===n)!==-1?e[e.findIndex(h=>h.value===n)].label:n,value:p};c[l]=u[l],i.push(c)}})}),t&&console.log(i),i}const b=d=>d.map(t=>t.columnWidth||1).reduce((t,i)=>t+i,0);function G(d){const{dashboardID:l,dashboardLayout:e,dataSettings:t,debugMode:i,theme:u="light",readableHeader:n,dataFilters:p,uiMode:c="normal",graphStyles:h,graphClassNames:w}=d,R=o.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]),[y,E]=o.useState(void 0),[S,T]=o.useState([]),[f,v]=o.useState(void 0),[x,I]=o.useState(void 0);o.useEffect(()=>{if(x){const s=x.filter(g=>g[t.keyColumn]===f);E(s)}},[x,f,t.keyColumn]);const C=o.useCallback(async()=>{if(t)try{const g=await(t.dataURL?typeof t.dataURL=="string"?t.fileType==="json"?m.fetchAndParseJSON(t.dataURL,void 0,t.dataTransformation,i):t.fileType==="api"?m.fetchAndTransformDataFromAPI(t.dataURL,t.apiHeaders,void 0,t.dataTransformation,i):m.fetchAndParseCSV(t.dataURL,t.dataTransformation,void 0,i,t.delimiter,!0):m.fetchAndParseMultipleDataSources(t.dataURL,t.idColumnTitle):m.transformColumnsToArray(t.data,void 0)),a=q.filterData(g,p||[]);T(a.map(F=>F[t.keyColumn])),v(a[0][t.keyColumn]);const j=A(a,t.keyColumn,n||[],i);I(j)}catch(s){console.error("Data fetching error:",s)}},[t,i,p,n]);return o.useEffect(()=>{C()},[C]),r.jsxRuntimeExports.jsx("div",{className:`${u||"light"} flex grow`,dir:e.language==="he"||e.language==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:`${e?.backgroundColor?e?.backgroundColor===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}flex flex-col h-inherit w-full ml-auto mr-auto grow gap-4 ${e?.language||"en"}`,style:{...e?.backgroundColor&&e?.backgroundColor!==!0?{backgroundColor:e?.backgroundColor}:{}},id:l,children:r.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:e.backgroundColor?e.padding||"1rem":e.padding||0},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[e.title||e.description?r.jsxRuntimeExports.jsx(W.GraphHeader,{graphTitle:e.title,graphDescription:e.description,isDashboard:!0}):null,y?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap",alignItems:"flex-start",width:"100%"},children:r.jsxRuntimeExports.jsxs("div",{style:{width:"100%",flexGrow:1,flexShrink:0,minWidth:"240px"},children:[e.dropdownLabel?r.jsxRuntimeExports.jsx(L.f,{className:"mb-2",children:e.dropdownLabel}):null,r.jsxRuntimeExports.jsx(D.Za,{options:S.map(s=>({value:s,label:s})),size:"sm",variant:c,isClearable:!1,isSearchable:!0,controlShouldRenderValue:!0,filterOption:D.Hu(R),onChange:s=>{v(s?.value)},defaultValue:{value:f,label:f}})]})}),e.rows.map((s,g)=>r.jsxRuntimeExports.jsx("div",{style:{display:"flex",gap:"1rem",alignItems:"stretch",minHeight:`${s.height||0}px`,height:"auto",width:"100%",flexWrap:"wrap"},children:s.columns.map((a,j)=>r.jsxRuntimeExports.jsx("div",{className:"flex bg-transparent h-inherit grow min-w-60",style:{width:`calc(${100*(a.columnWidth||1)/b(s.columns)}% - ${(b(s.columns)-(a.columnWidth||1))/b(s.columns)}rem)`,minHeight:"inherit"},children:r.jsxRuntimeExports.jsx(N.SingleGraphDashboard,{graphType:a.graphType,dataFilters:a.dataFilters,uiMode:c,graphSettings:{...a.settings||{},width:void 0,height:void 0,radius:a.graphType==="donutChart"?void 0:a.settings?.radius,size:a.graphType==="unitChart"?a.settings.size:void 0,language:a.settings?.language||e.language,theme:a.settings?.theme||u,styles:a.settings?.styles||h,classNames:a.settings?.classNames||w},dataSettings:{data:y},graphDataConfiguration:a.graphDataConfiguration?a.graphDataConfiguration:a.graphType==="unitChart"?[{columnId:"indicator",chartConfigId:"label"},{columnId:"value",chartConfigId:"value"}]:[{columnId:"indicator",chartConfigId:"label"},{columnId:"value",chartConfigId:"size"}],debugMode:i,readableHeader:n||[]})},j))},g))]}):r.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:r.jsxRuntimeExports.jsx(k.y,{})})]})})})})}exports.MultiGraphDashboardWideToLongFormat=G;
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormat.cjs.map