@undp/data-viz 2.5.4 → 2.6.0

package/dist/MultiGraphDashboard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGraphDashboard.cjs","sources":["../src/Components/Dashboard/MultiGraphDashboard.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, 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\nimport { CheckboxGroup, CheckboxGroupItem } from '@undp/design-system-react/CheckboxGroup';\r\nimport { RadioGroup, RadioGroupItem } from '@undp/design-system-react/RadioGroup';\r\n\r\nimport { GraphContainer } from '../Elements/GraphContainer';\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 [filteredData, setFilteredData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  const [filterSettings, setFilterSettings] = useState<FilterSettingsDataType[]>([]);\r\n\r\n  const filterConfig = {\r\n    ignoreCase: true,\r\n    ignoreAccents: true,\r\n    trim: true,\r\n  };\r\n\r\n  const updateFiltersEvent = useEffectEvent(() => {\r\n    const filterSettingsTemp = (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      ui: el.ui,\r\n      defaultValue: transformDefaultValue(el.defaultValue),\r\n      value: transformDefaultValue(el.defaultValue),\r\n      availableValues: getUniqValue(data, 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    setFilterSettings(filterSettingsTemp);\r\n  });\r\n\r\n  const filteredDataEvent = useEffectEvent(() => {\r\n    if (!data || filterSettings.length === 0) setFilteredData(data);\r\n    else {\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      const result = data.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      setFilteredData(result);\r\n    }\r\n  });\r\n  useEffect(() => {\r\n    filteredDataEvent();\r\n  }, [filterSettings, data]);\r\n\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      try {\r\n        const dataFromFile = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? await 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                ? await fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    dataSettings.columnsToArray,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : await 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            : await fetchAndParseMultipleDataSources(\r\n                dataSettings.dataURL,\r\n                dataSettings.idColumnTitle,\r\n              )\r\n          : await transformColumnsToArray(dataSettings.data, dataSettings.columnsToArray);\r\n        setData(dataFromFile);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    };\r\n    fetchData();\r\n    updateFiltersEvent();\r\n  }, [dataSettings, debugMode]);\r\n\r\n  useEffect(() => {\r\n    updateFiltersEvent();\r\n  }, [filters, data]);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const handleFilterChange = (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    <GraphContainer\r\n      id={dashboardID}\r\n      aria-label='This is a dashboard'\r\n      backgroundColor={dashboardLayout.backgroundColor ?? false}\r\n      theme={theme || 'light'}\r\n      language={dashboardLayout.language || 'en'}\r\n      padding={dashboardLayout.padding}\r\n    >\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 className='flex gap-4 flex-wrap'>\r\n        {filterSettings.length !== 0 ? (\r\n          <div\r\n            className='flex-grow flex-shrink-0'\r\n            style={{\r\n              width: filterPosition === 'side' ? '280px' : '100%',\r\n            }}\r\n          >\r\n            <div className='flex flex-wrap items-start gap-4 w-full sticky top-4'>\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: d.width ? 0 : 1,\r\n                    flexShrink: d.ui !== 'radio' || d.width ? 0 : 1,\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                    d.ui !== 'radio' ? (\r\n                      <DropdownSelect\r\n                        options={d.availableValues}\r\n                        variant={uiMode}\r\n                        isClearable={d.clearable === undefined ? true : d.clearable}\r\n                        isSearchable\r\n                        controlShouldRenderValue\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                    ) : (\r\n                      <RadioGroup\r\n                        variant={uiMode}\r\n                        defaultValue={(d.defaultValue as { value: string; label: string }).value}\r\n                        onValueChange={el => {\r\n                          handleFilterChange(\r\n                            d.filter,\r\n                            d.availableValues.filter(v => v.value === el),\r\n                          );\r\n                        }}\r\n                      >\r\n                        {d.availableValues.map((el, j) => (\r\n                          <RadioGroupItem label={`${el.label}`} value={`${el.value}`} key={j} />\r\n                        ))}\r\n                      </RadioGroup>\r\n                    )\r\n                  ) : (\r\n                    <>\r\n                      {d.ui !== 'radio' ? (\r\n                        <DropdownSelect\r\n                          options={d.availableValues}\r\n                          variant={uiMode}\r\n                          size='sm'\r\n                          isMulti\r\n                          isClearable={d.clearable === undefined ? true : d.clearable}\r\n                          isSearchable\r\n                          controlShouldRenderValue\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                      ) : (\r\n                        <CheckboxGroup\r\n                          variant={uiMode}\r\n                          defaultValue={\r\n                            d.defaultValue\r\n                              ? (\r\n                                  d.defaultValue as {\r\n                                    value: string | number;\r\n                                    label: string | number;\r\n                                  }[]\r\n                                ).map(el => `${el.value}`)\r\n                              : []\r\n                          }\r\n                          value={\r\n                            d.value\r\n                              ? (\r\n                                  d.value as {\r\n                                    value: string | number;\r\n                                    label: string | number;\r\n                                  }[]\r\n                                ).map(el => `${el.value}`)\r\n                              : undefined\r\n                          }\r\n                          onValueChange={el => {\r\n                            handleFilterChange(\r\n                              d.filter,\r\n                              d.availableValues.filter(v => el.indexOf(`${v.value}`) !== -1),\r\n                            );\r\n                          }}\r\n                        >\r\n                          {d.availableValues.map((el, j) => (\r\n                            <CheckboxGroupItem\r\n                              label={`${el.label}`}\r\n                              value={`${el.value}`}\r\n                              key={j}\r\n                            />\r\n                          ))}\r\n                        </CheckboxGroup>\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          className='flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]'\r\n          style={{\r\n            width: filterPosition === 'side' ? 'calc(100% - 280px - 1rem)' : '100%',\r\n          }}\r\n        >\r\n          {dashboardLayout.rows.map((d, i) => (\r\n            <div\r\n              key={i}\r\n              className='flex flex-wrap items-stretch gap-4 w-full h-auto'\r\n              style={{\r\n                minHeight: `${d.height || 0}px`,\r\n              }}\r\n            >\r\n              {d.columns.map((el, j) => (\r\n                <div\r\n                  key={j}\r\n                  className='flex bg-transparent grow min-w-60'\r\n                  style={{\r\n                    width: `calc(${(100 * (el.columnWidth || 1)) / TotalWidth(d.columns)}% - ${\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                      minHeight: undefined,\r\n                      relativeHeight: 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: filteredData ? filterData(filteredData, 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    </GraphContainer>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","map","d","columnWidth","reduce","acc","cur","GraphWithAttachedFilter","MultiGraphDashboard","props","dashboardID","dashboardLayout","dataSettings","filters","debugMode","theme","readableHeader","dataFilters","noOfFiltersPerRow","filterPosition","uiMode","graphStyles","graphClassNames","filteredData","setFilteredData","useState","undefined","data","setData","filterSettings","setFilterSettings","filterConfig","ignoreCase","ignoreAccents","trim","updateFiltersEvent","useEffectEvent","filterSettingsTemp","el","filter","column","label","singleSelect","clearable","ui","defaultValue","transformDefaultValue","value","availableValues","getUniqValue","v","excludeValues","includes","allowSelectAll","width","filteredDataEvent","length","result","item","every","flattenDeep","intersection","useEffect","dataFromFile","dataURL","fileType","fetchAndParseJSON","columnsToArray","dataTransformation","fetchAndTransformDataFromAPI","apiHeaders","fetchAndParseCSV","delimiter","fetchAndParseMultipleDataSources","idColumnTitle","transformColumnsToArray","error","console","fetchData","handleFilterChange","values","prev","f","GraphContainer","backgroundColor","language","padding","title","description","jsx","GraphHeader","jsxs","i","flexGrow","flexShrink","minWidth","Label","DropdownSelect","createFilter","RadioGroup","j","RadioGroupItem","Fragment","CheckboxGroup","indexOf","CheckboxGroupItem","rows","minHeight","height","SingleGraphDashboard","graphType","settings","relativeHeight","resetSelectionOnDoubleClick","attachedFilter","styles","classNames","radius","size","filterData","findIndex","dClicked","indx","dataTransform","dataSelectionOptions","advancedDataSelectionOptions","graphDataConfiguration"],"mappings":"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"}
+{"version":3,"file":"MultiGraphDashboard.cjs","sources":["../src/Components/Dashboard/MultiGraphDashboard.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, 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\nimport { CheckboxGroup, CheckboxGroupItem } from '@undp/design-system-react/CheckboxGroup';\r\nimport { RadioGroup, RadioGroupItem } from '@undp/design-system-react/RadioGroup';\r\n\r\nimport { GraphContainer } from '../Elements/GraphContainer';\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 [filteredData, setFilteredData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  const [filterSettings, setFilterSettings] = useState<FilterSettingsDataType[]>([]);\r\n\r\n  const filterConfig = {\r\n    ignoreCase: true,\r\n    ignoreAccents: true,\r\n    trim: true,\r\n  };\r\n\r\n  const updateFiltersEvent = useEffectEvent(() => {\r\n    const filterSettingsTemp = (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      ui: el.ui,\r\n      defaultValue: transformDefaultValue(el.defaultValue),\r\n      value: transformDefaultValue(el.defaultValue),\r\n      availableValues: getUniqValue(data, 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    setFilterSettings(filterSettingsTemp);\r\n  });\r\n\r\n  const filteredDataEvent = useEffectEvent(() => {\r\n    if (!data || filterSettings.length === 0) setFilteredData(data);\r\n    else {\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      const result = data.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      setFilteredData(result);\r\n    }\r\n  });\r\n  useEffect(() => {\r\n    filteredDataEvent();\r\n  }, [filterSettings, data]);\r\n\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      try {\r\n        const dataFromFile = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? await 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                ? await fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    dataSettings.columnsToArray,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : await 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            : await fetchAndParseMultipleDataSources(\r\n                dataSettings.dataURL,\r\n                dataSettings.idColumnTitle,\r\n              )\r\n          : await transformColumnsToArray(dataSettings.data, dataSettings.columnsToArray);\r\n        setData(dataFromFile);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    };\r\n    fetchData();\r\n    updateFiltersEvent();\r\n  }, [dataSettings, debugMode]);\r\n\r\n  useEffect(() => {\r\n    updateFiltersEvent();\r\n  }, [filters, data]);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const handleFilterChange = (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    <GraphContainer\r\n      id={dashboardID}\r\n      aria-label='This is a dashboard'\r\n      backgroundColor={dashboardLayout.backgroundColor ?? false}\r\n      theme={theme || 'light'}\r\n      language={dashboardLayout.language || 'en'}\r\n      padding={dashboardLayout.padding}\r\n    >\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 className='flex gap-4 flex-wrap'>\r\n        {filterSettings.length !== 0 ? (\r\n          <div\r\n            className='flex-grow flex-shrink-0'\r\n            style={{\r\n              width: filterPosition === 'side' ? '280px' : '100%',\r\n            }}\r\n          >\r\n            <div className='flex flex-wrap items-start gap-4 w-full sticky top-4'>\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: d.width ? 0 : 1,\r\n                    flexShrink: d.ui !== 'radio' || d.width ? 0 : 1,\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                    d.ui !== 'radio' ? (\r\n                      <DropdownSelect\r\n                        options={d.availableValues}\r\n                        variant={uiMode}\r\n                        isClearable={d.clearable === undefined ? true : d.clearable}\r\n                        isSearchable\r\n                        controlShouldRenderValue\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                    ) : (\r\n                      <RadioGroup\r\n                        variant={uiMode}\r\n                        defaultValue={(d.defaultValue as { value: string; label: string }).value}\r\n                        onValueChange={el => {\r\n                          handleFilterChange(\r\n                            d.filter,\r\n                            d.availableValues.filter(v => v.value === el),\r\n                          );\r\n                        }}\r\n                      >\r\n                        {d.availableValues.map((el, j) => (\r\n                          <RadioGroupItem label={`${el.label}`} value={`${el.value}`} key={j} />\r\n                        ))}\r\n                      </RadioGroup>\r\n                    )\r\n                  ) : (\r\n                    <>\r\n                      {d.ui !== 'radio' ? (\r\n                        <DropdownSelect\r\n                          options={d.availableValues}\r\n                          variant={uiMode}\r\n                          size='sm'\r\n                          isMulti\r\n                          isClearable={d.clearable === undefined ? true : d.clearable}\r\n                          isSearchable\r\n                          controlShouldRenderValue\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                      ) : (\r\n                        <CheckboxGroup\r\n                          variant={uiMode}\r\n                          defaultValue={\r\n                            d.defaultValue\r\n                              ? (\r\n                                  d.defaultValue as {\r\n                                    value: string | number;\r\n                                    label: string | number;\r\n                                  }[]\r\n                                ).map(el => `${el.value}`)\r\n                              : []\r\n                          }\r\n                          value={\r\n                            d.value\r\n                              ? (\r\n                                  d.value as {\r\n                                    value: string | number;\r\n                                    label: string | number;\r\n                                  }[]\r\n                                ).map(el => `${el.value}`)\r\n                              : undefined\r\n                          }\r\n                          onValueChange={el => {\r\n                            handleFilterChange(\r\n                              d.filter,\r\n                              d.availableValues.filter(v => el.indexOf(`${v.value}`) !== -1),\r\n                            );\r\n                          }}\r\n                        >\r\n                          {d.availableValues.map((el, j) => (\r\n                            <CheckboxGroupItem\r\n                              label={`${el.label}`}\r\n                              value={`${el.value}`}\r\n                              key={j}\r\n                            />\r\n                          ))}\r\n                        </CheckboxGroup>\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          className='flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]'\r\n          style={{\r\n            width: filterPosition === 'side' ? 'calc(100% - 280px - 1rem)' : '100%',\r\n          }}\r\n        >\r\n          {dashboardLayout.rows.map((d, i) => (\r\n            <div\r\n              key={i}\r\n              className='flex flex-wrap items-stretch gap-4 w-full h-auto'\r\n              style={{\r\n                minHeight: `${d.height || 0}px`,\r\n              }}\r\n            >\r\n              {d.columns.map((el, j) => (\r\n                <div\r\n                  key={j}\r\n                  className='flex bg-transparent grow min-w-60'\r\n                  style={{\r\n                    width: `calc(${(100 * (el.columnWidth || 1)) / TotalWidth(d.columns)}% - ${\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                      minHeight: undefined,\r\n                      relativeHeight: 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: filteredData ? filterData(filteredData, 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    </GraphContainer>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","map","d","columnWidth","reduce","acc","cur","GraphWithAttachedFilter","MultiGraphDashboard","props","dashboardID","dashboardLayout","dataSettings","filters","debugMode","theme","readableHeader","dataFilters","noOfFiltersPerRow","filterPosition","uiMode","graphStyles","graphClassNames","filteredData","setFilteredData","useState","undefined","data","setData","filterSettings","setFilterSettings","filterConfig","ignoreCase","ignoreAccents","trim","updateFiltersEvent","useEffectEvent","filterSettingsTemp","el","filter","column","label","singleSelect","clearable","ui","defaultValue","transformDefaultValue","value","availableValues","getUniqValue","v","excludeValues","includes","allowSelectAll","width","filteredDataEvent","length","result","item","every","flattenDeep","intersection","useEffect","dataFromFile","dataURL","fileType","fetchAndParseJSON","columnsToArray","dataTransformation","fetchAndTransformDataFromAPI","apiHeaders","fetchAndParseCSV","delimiter","fetchAndParseMultipleDataSources","idColumnTitle","transformColumnsToArray","error","console","fetchData","handleFilterChange","values","prev","f","GraphContainer","backgroundColor","language","padding","title","description","jsx","GraphHeader","jsxs","i","flexGrow","flexShrink","minWidth","Label","DropdownSelect","createFilter","RadioGroup","j","RadioGroupItem","Fragment","CheckboxGroup","indexOf","CheckboxGroupItem","rows","minHeight","height","SingleGraphDashboard","graphType","settings","relativeHeight","resetSelectionOnDoubleClick","attachedFilter","styles","classNames","radius","size","filterData","findIndex","dClicked","indx","dataTransform","dataSelectionOptions","advancedDataSelectionOptions","graphDataConfiguration"],"mappings":"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"}

package/dist/MultiGraphDashboard.js

@@ -1,37 +1,39 @@
-import { j as i } from "./index-CHPV5EwG-BzibaIRc.js";
+import { j as r } from "./compiler-runtime-qHgugrLy.js";
 import { useState as g, useEffectEvent as F, useEffect as v } from "react";
 import { i as U } from "./index-BuwmuDFJ.js";
 import { f as b } from "./index-EArKRVKg.js";
-import { j as A, D as $ } from "./DropdownSelect-Dz7imdTB.js";
-import { b as E, y as I, h as z, $ as q, P as J } from "./checkIfMultiple-Dpyy6BUP.js";
-import { G as B } from "./GraphContainer-B8ZqOzKI.js";
+import { DropdownSelect as A, createFilter as $ } from "@undp/design-system-react/DropdownSelect";
+import { Label as E } from "@undp/design-system-react/Label";
+import { CheckboxGroup as I, CheckboxGroupItem as z } from "@undp/design-system-react/CheckboxGroup";
+import { RadioGroup as q, RadioGroupItem as J } from "@undp/design-system-react/RadioGroup";
+import { G as B } from "./GraphContainer-DcOM2CI6.js";
 import { SingleGraphDashboard as K } from "./SingleGraphDashboard.js";
-import { f as Q, a as X, b as Y, c as Z, t as _ } from "./fetchAndParseData-BAXhgTDM.js";
+import { b as Q, d as X, f as Y, c as Z, t as _ } from "./fetchAndParseData-CDjQZ1fL.js";
 import { g as aa } from "./getUniqValue-DsqSii6M.js";
 import { GraphHeader as ea } from "./GraphHeader.js";
 import { f as ta } from "./filterData-DsAiFzKY.js";
 import { t as N } from "./transformDataForSelect-D8AuvYdf.js";
-const x = (f) => f.map((t) => t.columnWidth || 1).reduce((t, m) => t + m, 0), la = ["barChart", "choroplethMap", "biVariateChoroplethMap", "circlePacking", "treeMap"];
-function va(f) {
+const x = (p) => p.map((t) => t.columnWidth || 1).reduce((t, m) => t + m, 0), la = ["barChart", "choroplethMap", "biVariateChoroplethMap", "circlePacking", "treeMap"];
+function xa(p) {
   const {
     dashboardID: w,
     dashboardLayout: s,
     dataSettings: t,
     filters: m,
     debugMode: d,
-    theme: y = "light",
+    theme: S = "light",
     readableHeader: O,
     dataFilters: R,
-    noOfFiltersPerRow: p = 4,
-    filterPosition: S,
+    noOfFiltersPerRow: f = 4,
+    filterPosition: y,
     uiMode: h = "normal",
-    graphStyles: H,
-    graphClassNames: M
-  } = f, [V, D] = g(void 0), [u, P] = g(void 0), [n, j] = g([]), T = {
+    graphStyles: G,
+    graphClassNames: k
+  } = p, [V, D] = g(void 0), [u, H] = g(void 0), [o, C] = g([]), T = {
     ignoreCase: !0,
     ignoreAccents: !0,
     trim: !0
-  }, C = F(() => {
+  }, j = F(() => {
     const e = (m || []).map((l) => ({
       filter: l.column,
       label: l.label || `Filter by ${l.column}`,
@@ -47,97 +49,97 @@ function va(f) {
       allowSelectAll: l.allowSelectAll,
       width: l.width
     }));
-    j(e);
-  }), W = F(() => {
-    if (!u || n.length === 0) D(u);
+    C(e);
+  }), L = F(() => {
+    if (!u || o.length === 0) D(u);
     else {
-      const e = u.filter((l) => n.every((a) => a.value && b([a.value]).length > 0 ? U(b([l[a.filter]]), b([a.value]).map((r) => r.value)).length > 0 : !0));
+      const e = u.filter((l) => o.every((a) => a.value && b([a.value]).length > 0 ? U(b([l[a.filter]]), b([a.value]).map((i) => i.value)).length > 0 : !0));
       D(e);
     }
   });
   v(() => {
-    W();
-  }, [n, u]), v(() => {
+    L();
+  }, [o, u]), v(() => {
     (async () => {
       try {
         const l = t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? await Q(t.dataURL, t.columnsToArray, t.dataTransformation, d) : t.fileType === "api" ? await X(t.dataURL, t.apiHeaders, t.columnsToArray, t.dataTransformation, d) : await Y(t.dataURL, t.dataTransformation, t.columnsToArray, d, t.delimiter, !0) : await Z(t.dataURL, t.idColumnTitle) : await _(t.data, t.columnsToArray);
-        P(l);
+        H(l);
       } catch (l) {
         console.error("Data fetching error:", l);
       }
-    })(), C();
+    })(), j();
   }, [t, d]), v(() => {
-    C();
+    j();
   }, [m, u]);
   const c = (e, l) => {
-    j((a) => a.map((r) => r.filter === e ? {
-      ...r,
+    C((a) => a.map((i) => i.filter === e ? {
+      ...i,
       value: l
-    } : r));
+    } : i));
   };
-  return /* @__PURE__ */ i.jsxs(B, { id: w, "aria-label": "This is a dashboard", backgroundColor: s.backgroundColor ?? !1, theme: y || "light", language: s.language || "en", padding: s.padding, children: [
-    s.title || s.description ? /* @__PURE__ */ i.jsx(ea, { graphTitle: s.title, graphDescription: s.description, isDashboard: !0 }) : null,
-    /* @__PURE__ */ i.jsxs("div", { className: "flex gap-4 flex-wrap", children: [
-      n.length !== 0 ? /* @__PURE__ */ i.jsx("div", { className: "flex-grow flex-shrink-0", style: {
-        width: S === "side" ? "280px" : "100%"
-      }, children: /* @__PURE__ */ i.jsx("div", { className: "flex flex-wrap items-start gap-4 w-full sticky top-4", children: n?.map((e, l) => /* @__PURE__ */ i.jsxs("div", { style: {
-        width: e.width || `calc(${100 / p}% - ${(p - 1) / p}rem)`,
+  return /* @__PURE__ */ r.jsxs(B, { id: w, "aria-label": "This is a dashboard", backgroundColor: s.backgroundColor ?? !1, theme: S || "light", language: s.language || "en", padding: s.padding, children: [
+    s.title || s.description ? /* @__PURE__ */ r.jsx(ea, { graphTitle: s.title, graphDescription: s.description, isDashboard: !0 }) : null,
+    /* @__PURE__ */ r.jsxs("div", { className: "flex gap-4 flex-wrap", children: [
+      o.length !== 0 ? /* @__PURE__ */ r.jsx("div", { className: "flex-grow flex-shrink-0", style: {
+        width: y === "side" ? "280px" : "100%"
+      }, children: /* @__PURE__ */ r.jsx("div", { className: "flex flex-wrap items-start gap-4 w-full sticky top-4", children: o?.map((e, l) => /* @__PURE__ */ r.jsxs("div", { style: {
+        width: e.width || `calc(${100 / f}% - ${(f - 1) / f}rem)`,
         flexGrow: e.width ? 0 : 1,
         flexShrink: e.ui !== "radio" || e.width ? 0 : 1,
         minWidth: "240px"
       }, children: [
-        /* @__PURE__ */ i.jsx(E, { className: "mb-2", children: e.label }),
-        e.singleSelect ? e.ui !== "radio" ? /* @__PURE__ */ i.jsx(A, { options: e.availableValues, variant: h, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: $(T), onChange: (a) => {
+        /* @__PURE__ */ r.jsx(E, { className: "mb-2", children: e.label }),
+        e.singleSelect ? e.ui !== "radio" ? /* @__PURE__ */ r.jsx(A, { options: e.availableValues, variant: h, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: $(T), onChange: (a) => {
           c(e.filter, a);
-        }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ i.jsx(I, { variant: h, defaultValue: e.defaultValue.value, onValueChange: (a) => {
-          c(e.filter, e.availableValues.filter((r) => r.value === a));
-        }, children: e.availableValues.map((a, r) => /* @__PURE__ */ i.jsx(z, { label: `${a.label}`, value: `${a.value}` }, r)) }) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-          e.ui !== "radio" ? /* @__PURE__ */ i.jsx(A, { options: e.availableValues, variant: h, size: "sm", isMulti: !0, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: $(T), onChange: (a) => {
+        }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ r.jsx(q, { variant: h, defaultValue: e.defaultValue.value, onValueChange: (a) => {
+          c(e.filter, e.availableValues.filter((i) => i.value === a));
+        }, children: e.availableValues.map((a, i) => /* @__PURE__ */ r.jsx(J, { label: `${a.label}`, value: `${a.value}` }, i)) }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+          e.ui !== "radio" ? /* @__PURE__ */ r.jsx(A, { options: e.availableValues, variant: h, size: "sm", isMulti: !0, isClearable: e.clearable === void 0 ? !0 : e.clearable, isSearchable: !0, controlShouldRenderValue: !0, filterOption: $(T), onChange: (a) => {
             c(e.filter, a);
-          }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ i.jsx(q, { variant: h, defaultValue: e.defaultValue ? e.defaultValue.map((a) => `${a.value}`) : [], value: e.value ? e.value.map((a) => `${a.value}`) : void 0, onValueChange: (a) => {
-            c(e.filter, e.availableValues.filter((r) => a.indexOf(`${r.value}`) !== -1));
-          }, children: e.availableValues.map((a, r) => /* @__PURE__ */ i.jsx(J, { label: `${a.label}`, value: `${a.value}` }, r)) }),
-          e.allowSelectAll ? /* @__PURE__ */ i.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: () => {
+          }, value: e.value, defaultValue: e.defaultValue }) : /* @__PURE__ */ r.jsx(I, { variant: h, defaultValue: e.defaultValue ? e.defaultValue.map((a) => `${a.value}`) : [], value: e.value ? e.value.map((a) => `${a.value}`) : void 0, onValueChange: (a) => {
+            c(e.filter, e.availableValues.filter((i) => a.indexOf(`${i.value}`) !== -1));
+          }, children: e.availableValues.map((a, i) => /* @__PURE__ */ r.jsx(z, { label: `${a.label}`, value: `${a.value}` }, i)) }),
+          e.allowSelectAll ? /* @__PURE__ */ r.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: () => {
             c(e.filter, e.availableValues);
           }, children: "Select all options" }) : null
         ] })
       ] }, l)) }) }) : null,
-      /* @__PURE__ */ i.jsx("div", { className: "flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]", style: {
-        width: S === "side" ? "calc(100% - 280px - 1rem)" : "100%"
-      }, children: s.rows.map((e, l) => /* @__PURE__ */ i.jsx("div", { className: "flex flex-wrap items-stretch gap-4 w-full h-auto", style: {
+      /* @__PURE__ */ r.jsx("div", { className: "flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]", style: {
+        width: y === "side" ? "calc(100% - 280px - 1rem)" : "100%"
+      }, children: s.rows.map((e, l) => /* @__PURE__ */ r.jsx("div", { className: "flex flex-wrap items-stretch gap-4 w-full h-auto", style: {
         minHeight: `${e.height || 0}px`
-      }, children: e.columns.map((a, r) => /* @__PURE__ */ i.jsx("div", { className: "flex bg-transparent grow min-w-60", style: {
+      }, children: e.columns.map((a, i) => /* @__PURE__ */ r.jsx("div", { className: "flex bg-transparent grow min-w-60", style: {
         width: `calc(${100 * (a.columnWidth || 1) / x(e.columns)}% - ${(x(e.columns) - (a.columnWidth || 1)) / x(e.columns)}rem)`,
         minHeight: "inherit"
-      }, children: /* @__PURE__ */ i.jsx(K, { graphType: a.graphType, dataFilters: a.dataFilters, uiMode: h, graphSettings: {
+      }, children: /* @__PURE__ */ r.jsx(K, { graphType: a.graphType, dataFilters: a.dataFilters, uiMode: h, graphSettings: {
         ...a.settings || {},
         width: void 0,
         height: void 0,
         minHeight: void 0,
         relativeHeight: void 0,
         resetSelectionOnDoubleClick: a.attachedFilter ? !1 : a.settings?.resetSelectionOnDoubleClick,
-        styles: a.settings?.styles || H,
-        classNames: a.settings?.classNames || M,
+        styles: a.settings?.styles || G,
+        classNames: a.settings?.classNames || k,
         radius: a.graphType === "donutChart" ? void 0 : a.settings?.radius,
         size: a.graphType === "unitChart" ? a.settings?.size : void 0,
         language: a.settings?.language || s.language,
-        theme: a.settings?.theme || y
+        theme: a.settings?.theme || S
       }, dataSettings: {
         data: V ? ta(V, R || []) : void 0
-      }, updateFilters: a.attachedFilter && la.indexOf(a.graphType) !== -1 && n.findIndex((o) => o.filter === a.attachedFilter) !== -1 ? (o) => {
-        const k = n.findIndex((L) => L.filter === a.attachedFilter), G = o ? n[k].singleSelect ? {
-          value: o,
-          label: o
+      }, updateFilters: a.attachedFilter && la.indexOf(a.graphType) !== -1 && o.findIndex((n) => n.filter === a.attachedFilter) !== -1 ? (n) => {
+        const M = o.findIndex((P) => P.filter === a.attachedFilter), W = n ? o[M].singleSelect ? {
+          value: n,
+          label: n
         } : [{
-          value: o,
-          label: o
+          value: n,
+          label: n
         }] : void 0;
-        c(a.attachedFilter, G);
-      } : void 0, dataTransform: a.dataTransform, dataSelectionOptions: a.dataSelectionOptions, advancedDataSelectionOptions: a.advancedDataSelectionOptions, graphDataConfiguration: a.graphDataConfiguration, debugMode: d, readableHeader: O || [] }) }, r)) }, l)) })
+        c(a.attachedFilter, W);
+      } : void 0, dataTransform: a.dataTransform, dataSelectionOptions: a.dataSelectionOptions, advancedDataSelectionOptions: a.advancedDataSelectionOptions, graphDataConfiguration: a.graphDataConfiguration, debugMode: d, readableHeader: O || [] }) }, i)) }, l)) })
     ] })
   ] });
 }
 export {
-  va as MultiGraphDashboard
+  xa 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 { useEffect, useEffectEvent, 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\nimport { CheckboxGroup, CheckboxGroupItem } from '@undp/design-system-react/CheckboxGroup';\r\nimport { RadioGroup, RadioGroupItem } from '@undp/design-system-react/RadioGroup';\r\n\r\nimport { GraphContainer } from '../Elements/GraphContainer';\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 [filteredData, setFilteredData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  const [filterSettings, setFilterSettings] = useState<FilterSettingsDataType[]>([]);\r\n\r\n  const filterConfig = {\r\n    ignoreCase: true,\r\n    ignoreAccents: true,\r\n    trim: true,\r\n  };\r\n\r\n  const updateFiltersEvent = useEffectEvent(() => {\r\n    const filterSettingsTemp = (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      ui: el.ui,\r\n      defaultValue: transformDefaultValue(el.defaultValue),\r\n      value: transformDefaultValue(el.defaultValue),\r\n      availableValues: getUniqValue(data, 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    setFilterSettings(filterSettingsTemp);\r\n  });\r\n\r\n  const filteredDataEvent = useEffectEvent(() => {\r\n    if (!data || filterSettings.length === 0) setFilteredData(data);\r\n    else {\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      const result = data.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      setFilteredData(result);\r\n    }\r\n  });\r\n  useEffect(() => {\r\n    filteredDataEvent();\r\n  }, [filterSettings, data]);\r\n\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      try {\r\n        const dataFromFile = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? await 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                ? await fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    dataSettings.columnsToArray,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : await 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            : await fetchAndParseMultipleDataSources(\r\n                dataSettings.dataURL,\r\n                dataSettings.idColumnTitle,\r\n              )\r\n          : await transformColumnsToArray(dataSettings.data, dataSettings.columnsToArray);\r\n        setData(dataFromFile);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    };\r\n    fetchData();\r\n    updateFiltersEvent();\r\n  }, [dataSettings, debugMode]);\r\n\r\n  useEffect(() => {\r\n    updateFiltersEvent();\r\n  }, [filters, data]);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const handleFilterChange = (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    <GraphContainer\r\n      id={dashboardID}\r\n      aria-label='This is a dashboard'\r\n      backgroundColor={dashboardLayout.backgroundColor ?? false}\r\n      theme={theme || 'light'}\r\n      language={dashboardLayout.language || 'en'}\r\n      padding={dashboardLayout.padding}\r\n    >\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 className='flex gap-4 flex-wrap'>\r\n        {filterSettings.length !== 0 ? (\r\n          <div\r\n            className='flex-grow flex-shrink-0'\r\n            style={{\r\n              width: filterPosition === 'side' ? '280px' : '100%',\r\n            }}\r\n          >\r\n            <div className='flex flex-wrap items-start gap-4 w-full sticky top-4'>\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: d.width ? 0 : 1,\r\n                    flexShrink: d.ui !== 'radio' || d.width ? 0 : 1,\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                    d.ui !== 'radio' ? (\r\n                      <DropdownSelect\r\n                        options={d.availableValues}\r\n                        variant={uiMode}\r\n                        isClearable={d.clearable === undefined ? true : d.clearable}\r\n                        isSearchable\r\n                        controlShouldRenderValue\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                    ) : (\r\n                      <RadioGroup\r\n                        variant={uiMode}\r\n                        defaultValue={(d.defaultValue as { value: string; label: string }).value}\r\n                        onValueChange={el => {\r\n                          handleFilterChange(\r\n                            d.filter,\r\n                            d.availableValues.filter(v => v.value === el),\r\n                          );\r\n                        }}\r\n                      >\r\n                        {d.availableValues.map((el, j) => (\r\n                          <RadioGroupItem label={`${el.label}`} value={`${el.value}`} key={j} />\r\n                        ))}\r\n                      </RadioGroup>\r\n                    )\r\n                  ) : (\r\n                    <>\r\n                      {d.ui !== 'radio' ? (\r\n                        <DropdownSelect\r\n                          options={d.availableValues}\r\n                          variant={uiMode}\r\n                          size='sm'\r\n                          isMulti\r\n                          isClearable={d.clearable === undefined ? true : d.clearable}\r\n                          isSearchable\r\n                          controlShouldRenderValue\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                      ) : (\r\n                        <CheckboxGroup\r\n                          variant={uiMode}\r\n                          defaultValue={\r\n                            d.defaultValue\r\n                              ? (\r\n                                  d.defaultValue as {\r\n                                    value: string | number;\r\n                                    label: string | number;\r\n                                  }[]\r\n                                ).map(el => `${el.value}`)\r\n                              : []\r\n                          }\r\n                          value={\r\n                            d.value\r\n                              ? (\r\n                                  d.value as {\r\n                                    value: string | number;\r\n                                    label: string | number;\r\n                                  }[]\r\n                                ).map(el => `${el.value}`)\r\n                              : undefined\r\n                          }\r\n                          onValueChange={el => {\r\n                            handleFilterChange(\r\n                              d.filter,\r\n                              d.availableValues.filter(v => el.indexOf(`${v.value}`) !== -1),\r\n                            );\r\n                          }}\r\n                        >\r\n                          {d.availableValues.map((el, j) => (\r\n                            <CheckboxGroupItem\r\n                              label={`${el.label}`}\r\n                              value={`${el.value}`}\r\n                              key={j}\r\n                            />\r\n                          ))}\r\n                        </CheckboxGroup>\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          className='flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]'\r\n          style={{\r\n            width: filterPosition === 'side' ? 'calc(100% - 280px - 1rem)' : '100%',\r\n          }}\r\n        >\r\n          {dashboardLayout.rows.map((d, i) => (\r\n            <div\r\n              key={i}\r\n              className='flex flex-wrap items-stretch gap-4 w-full h-auto'\r\n              style={{\r\n                minHeight: `${d.height || 0}px`,\r\n              }}\r\n            >\r\n              {d.columns.map((el, j) => (\r\n                <div\r\n                  key={j}\r\n                  className='flex bg-transparent grow min-w-60'\r\n                  style={{\r\n                    width: `calc(${(100 * (el.columnWidth || 1)) / TotalWidth(d.columns)}% - ${\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                      minHeight: undefined,\r\n                      relativeHeight: 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: filteredData ? filterData(filteredData, 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    </GraphContainer>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","map","d","columnWidth","reduce","acc","cur","GraphWithAttachedFilter","MultiGraphDashboard","props","dashboardID","dashboardLayout","dataSettings","filters","debugMode","theme","readableHeader","dataFilters","noOfFiltersPerRow","filterPosition","uiMode","graphStyles","graphClassNames","filteredData","setFilteredData","useState","undefined","data","setData","filterSettings","setFilterSettings","filterConfig","ignoreCase","ignoreAccents","trim","updateFiltersEvent","useEffectEvent","filterSettingsTemp","el","filter","column","label","singleSelect","clearable","ui","defaultValue","transformDefaultValue","value","availableValues","getUniqValue","v","excludeValues","includes","allowSelectAll","width","filteredDataEvent","length","result","item","every","flattenDeep","intersection","useEffect","fetchData","dataFromFile","dataURL","fileType","fetchAndParseJSON","columnsToArray","dataTransformation","fetchAndTransformDataFromAPI","apiHeaders","fetchAndParseCSV","delimiter","fetchAndParseMultipleDataSources","idColumnTitle","transformColumnsToArray","error","console","handleFilterChange","values","prev","f","GraphContainer","backgroundColor","language","padding","title","description","jsx","GraphHeader","jsxs","i","flexGrow","flexShrink","minWidth","Label","DropdownSelect","createFilter","RadioGroup","j","RadioGroupItem","Fragment","CheckboxGroup","indexOf","CheckboxGroupItem","rows","minHeight","height","SingleGraphDashboard","graphType","settings","relativeHeight","resetSelectionOnDoubleClick","attachedFilter","styles","classNames","radius","size","filterData","findIndex","dClicked","indx","dataTransform","dataSelectionOptions","advancedDataSelectionOptions","graphDataConfiguration"],"mappings":"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"}
+{"version":3,"file":"MultiGraphDashboard.js","sources":["../src/Components/Dashboard/MultiGraphDashboard.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, 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\nimport { CheckboxGroup, CheckboxGroupItem } from '@undp/design-system-react/CheckboxGroup';\r\nimport { RadioGroup, RadioGroupItem } from '@undp/design-system-react/RadioGroup';\r\n\r\nimport { GraphContainer } from '../Elements/GraphContainer';\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 [filteredData, setFilteredData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  const [filterSettings, setFilterSettings] = useState<FilterSettingsDataType[]>([]);\r\n\r\n  const filterConfig = {\r\n    ignoreCase: true,\r\n    ignoreAccents: true,\r\n    trim: true,\r\n  };\r\n\r\n  const updateFiltersEvent = useEffectEvent(() => {\r\n    const filterSettingsTemp = (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      ui: el.ui,\r\n      defaultValue: transformDefaultValue(el.defaultValue),\r\n      value: transformDefaultValue(el.defaultValue),\r\n      availableValues: getUniqValue(data, 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    setFilterSettings(filterSettingsTemp);\r\n  });\r\n\r\n  const filteredDataEvent = useEffectEvent(() => {\r\n    if (!data || filterSettings.length === 0) setFilteredData(data);\r\n    else {\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      const result = data.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      setFilteredData(result);\r\n    }\r\n  });\r\n  useEffect(() => {\r\n    filteredDataEvent();\r\n  }, [filterSettings, data]);\r\n\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      try {\r\n        const dataFromFile = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? await 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                ? await fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    dataSettings.columnsToArray,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : await 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            : await fetchAndParseMultipleDataSources(\r\n                dataSettings.dataURL,\r\n                dataSettings.idColumnTitle,\r\n              )\r\n          : await transformColumnsToArray(dataSettings.data, dataSettings.columnsToArray);\r\n        setData(dataFromFile);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    };\r\n    fetchData();\r\n    updateFiltersEvent();\r\n  }, [dataSettings, debugMode]);\r\n\r\n  useEffect(() => {\r\n    updateFiltersEvent();\r\n  }, [filters, data]);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const handleFilterChange = (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    <GraphContainer\r\n      id={dashboardID}\r\n      aria-label='This is a dashboard'\r\n      backgroundColor={dashboardLayout.backgroundColor ?? false}\r\n      theme={theme || 'light'}\r\n      language={dashboardLayout.language || 'en'}\r\n      padding={dashboardLayout.padding}\r\n    >\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 className='flex gap-4 flex-wrap'>\r\n        {filterSettings.length !== 0 ? (\r\n          <div\r\n            className='flex-grow flex-shrink-0'\r\n            style={{\r\n              width: filterPosition === 'side' ? '280px' : '100%',\r\n            }}\r\n          >\r\n            <div className='flex flex-wrap items-start gap-4 w-full sticky top-4'>\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: d.width ? 0 : 1,\r\n                    flexShrink: d.ui !== 'radio' || d.width ? 0 : 1,\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                    d.ui !== 'radio' ? (\r\n                      <DropdownSelect\r\n                        options={d.availableValues}\r\n                        variant={uiMode}\r\n                        isClearable={d.clearable === undefined ? true : d.clearable}\r\n                        isSearchable\r\n                        controlShouldRenderValue\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                    ) : (\r\n                      <RadioGroup\r\n                        variant={uiMode}\r\n                        defaultValue={(d.defaultValue as { value: string; label: string }).value}\r\n                        onValueChange={el => {\r\n                          handleFilterChange(\r\n                            d.filter,\r\n                            d.availableValues.filter(v => v.value === el),\r\n                          );\r\n                        }}\r\n                      >\r\n                        {d.availableValues.map((el, j) => (\r\n                          <RadioGroupItem label={`${el.label}`} value={`${el.value}`} key={j} />\r\n                        ))}\r\n                      </RadioGroup>\r\n                    )\r\n                  ) : (\r\n                    <>\r\n                      {d.ui !== 'radio' ? (\r\n                        <DropdownSelect\r\n                          options={d.availableValues}\r\n                          variant={uiMode}\r\n                          size='sm'\r\n                          isMulti\r\n                          isClearable={d.clearable === undefined ? true : d.clearable}\r\n                          isSearchable\r\n                          controlShouldRenderValue\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                      ) : (\r\n                        <CheckboxGroup\r\n                          variant={uiMode}\r\n                          defaultValue={\r\n                            d.defaultValue\r\n                              ? (\r\n                                  d.defaultValue as {\r\n                                    value: string | number;\r\n                                    label: string | number;\r\n                                  }[]\r\n                                ).map(el => `${el.value}`)\r\n                              : []\r\n                          }\r\n                          value={\r\n                            d.value\r\n                              ? (\r\n                                  d.value as {\r\n                                    value: string | number;\r\n                                    label: string | number;\r\n                                  }[]\r\n                                ).map(el => `${el.value}`)\r\n                              : undefined\r\n                          }\r\n                          onValueChange={el => {\r\n                            handleFilterChange(\r\n                              d.filter,\r\n                              d.availableValues.filter(v => el.indexOf(`${v.value}`) !== -1),\r\n                            );\r\n                          }}\r\n                        >\r\n                          {d.availableValues.map((el, j) => (\r\n                            <CheckboxGroupItem\r\n                              label={`${el.label}`}\r\n                              value={`${el.value}`}\r\n                              key={j}\r\n                            />\r\n                          ))}\r\n                        </CheckboxGroup>\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          className='flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]'\r\n          style={{\r\n            width: filterPosition === 'side' ? 'calc(100% - 280px - 1rem)' : '100%',\r\n          }}\r\n        >\r\n          {dashboardLayout.rows.map((d, i) => (\r\n            <div\r\n              key={i}\r\n              className='flex flex-wrap items-stretch gap-4 w-full h-auto'\r\n              style={{\r\n                minHeight: `${d.height || 0}px`,\r\n              }}\r\n            >\r\n              {d.columns.map((el, j) => (\r\n                <div\r\n                  key={j}\r\n                  className='flex bg-transparent grow min-w-60'\r\n                  style={{\r\n                    width: `calc(${(100 * (el.columnWidth || 1)) / TotalWidth(d.columns)}% - ${\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                      minHeight: undefined,\r\n                      relativeHeight: 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: filteredData ? filterData(filteredData, 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    </GraphContainer>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","map","d","columnWidth","reduce","acc","cur","GraphWithAttachedFilter","MultiGraphDashboard","props","dashboardID","dashboardLayout","dataSettings","filters","debugMode","theme","readableHeader","dataFilters","noOfFiltersPerRow","filterPosition","uiMode","graphStyles","graphClassNames","filteredData","setFilteredData","useState","undefined","data","setData","filterSettings","setFilterSettings","filterConfig","ignoreCase","ignoreAccents","trim","updateFiltersEvent","useEffectEvent","filterSettingsTemp","el","filter","column","label","singleSelect","clearable","ui","defaultValue","transformDefaultValue","value","availableValues","getUniqValue","v","excludeValues","includes","allowSelectAll","width","filteredDataEvent","length","result","item","every","flattenDeep","intersection","useEffect","fetchData","dataFromFile","dataURL","fileType","fetchAndParseJSON","columnsToArray","dataTransformation","fetchAndTransformDataFromAPI","apiHeaders","fetchAndParseCSV","delimiter","fetchAndParseMultipleDataSources","idColumnTitle","transformColumnsToArray","error","console","handleFilterChange","values","prev","f","GraphContainer","backgroundColor","language","padding","title","description","jsx","GraphHeader","jsxs","i","flexGrow","flexShrink","minWidth","Label","DropdownSelect","createFilter","RadioGroup","j","RadioGroupItem","Fragment","CheckboxGroup","indexOf","CheckboxGroupItem","rows","minHeight","height","SingleGraphDashboard","graphType","settings","relativeHeight","resetSelectionOnDoubleClick","attachedFilter","styles","classNames","radius","size","filterData","findIndex","dClicked","indx","dataTransform","dataSelectionOptions","advancedDataSelectionOptions","graphDataConfiguration"],"mappings":"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"}

package/dist/MultiGraphDashboardFromConfig.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./index-CHPV5EwG-D4pAp7u0.cjs"),n=require("react"),h=require("./Spinner-WHzzloYQ.cjs"),c=require("./MultiGraphDashboard.cjs"),g=require("./fetchAndParseData-QTF6tjij.cjs");function b(f){const t=d.compilerRuntimeExports.c(18),{config:a}=f,[e,l]=n.useState(void 0);let r,o;if(t[0]!==a?(r=()=>{(async()=>{if(typeof a=="string"){const u=await g.fetchAndParseJSON(a);l(u)}else l(a)})()},o=[a],t[0]=a,t[1]=r,t[2]=o):(r=t[1],o=t[2]),n.useEffect(r,o),!e){let s;return t[3]===Symbol.for("react.memo_cache_sentinel")?(s=d.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:d.jsxRuntimeExports.jsx(h.w,{})}),t[3]=s):s=t[3],s}let i;return t[4]!==e.dashboardID||t[5]!==e.dashboardLayout||t[6]!==e.dataFilters||t[7]!==e.dataSettings||t[8]!==e.debugMode||t[9]!==e.filterPosition||t[10]!==e.filters||t[11]!==e.graphClassNames||t[12]!==e.graphStyles||t[13]!==e.noOfFiltersPerRow||t[14]!==e.readableHeader||t[15]!==e.theme||t[16]!==e.uiMode?(i=d.jsxRuntimeExports.jsx(c.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}),t[4]=e.dashboardID,t[5]=e.dashboardLayout,t[6]=e.dataFilters,t[7]=e.dataSettings,t[8]=e.debugMode,t[9]=e.filterPosition,t[10]=e.filters,t[11]=e.graphClassNames,t[12]=e.graphStyles,t[13]=e.noOfFiltersPerRow,t[14]=e.readableHeader,t[15]=e.theme,t[16]=e.uiMode,t[17]=i):i=t[17],i}exports.MultiGraphDashboardFromConfig=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./compiler-runtime-oPPev21o.cjs"),n=require("react"),h=require("@undp/design-system-react/Spinner"),c=require("./MultiGraphDashboard.cjs"),g=require("./fetchAndParseData-QTF6tjij.cjs");function b(u){const t=d.compilerRuntimeExports.c(18),{config:a}=u,[e,l]=n.useState(void 0);let s,i;if(t[0]!==a?(s=()=>{(async()=>{if(typeof a=="string"){const f=await g.fetchAndParseJSON(a);l(f)}else l(a)})()},i=[a],t[0]=a,t[1]=s,t[2]=i):(s=t[1],i=t[2]),n.useEffect(s,i),!e){let r;return t[3]===Symbol.for("react.memo_cache_sentinel")?(r=d.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:d.jsxRuntimeExports.jsx(h.Spinner,{})}),t[3]=r):r=t[3],r}let o;return t[4]!==e.dashboardID||t[5]!==e.dashboardLayout||t[6]!==e.dataFilters||t[7]!==e.dataSettings||t[8]!==e.debugMode||t[9]!==e.filterPosition||t[10]!==e.filters||t[11]!==e.graphClassNames||t[12]!==e.graphStyles||t[13]!==e.noOfFiltersPerRow||t[14]!==e.readableHeader||t[15]!==e.theme||t[16]!==e.uiMode?(o=d.jsxRuntimeExports.jsx(c.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}),t[4]=e.dashboardID,t[5]=e.dashboardLayout,t[6]=e.dataFilters,t[7]=e.dataSettings,t[8]=e.debugMode,t[9]=e.filterPosition,t[10]=e.filters,t[11]=e.graphClassNames,t[12]=e.graphStyles,t[13]=e.noOfFiltersPerRow,t[14]=e.readableHeader,t[15]=e.theme,t[16]=e.uiMode,t[17]=o):o=t[17],o}exports.MultiGraphDashboardFromConfig=b;
 //# sourceMappingURL=MultiGraphDashboardFromConfig.cjs.map

package/dist/MultiGraphDashboardFromConfig.cjs.map

@@ -1 +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","$","_c","config","configSettings","setConfigSettings","useState","undefined","t0","t1","data","fetchAndParseJSON","fetchData","useEffect","t2","Symbol","for","jsx","Spinner","dashboardID","dashboardLayout","dataFilters","dataSettings","debugMode","filterPosition","filters","graphClassNames","graphStyles","noOfFiltersPerRow","readableHeader","theme","uiMode","MultiGraphDashboard"],"mappings":"6QAsCO,SAAAA,EAAAC,EAAA,CAAA,MAAAC,EAAAC,EAAAA,uBAAAA,EAAA,EAAA,EACL,CAAAC,OAAAA,CAAAA,EAAmBH,EACnB,CAAAI,EAAAC,CAAA,EAA4CC,EAAAA,SAAmCC,MAAS,EAAE,IAAAC,EAAAC,EAY1F,GAZ0FR,OAAAE,GAChFK,EAAAA,IAAA,EACU,SAAA,CAChB,GAAI,OAAOL,GAAW,SAAQ,CAC5B,MAAAO,EAAa,MAAMC,EAAAA,kBAAkBR,CAAM,EAC3CE,EAAkBK,CAAI,CAAC,MAEvBL,EAAkBF,CAAM,CACzB,GAEHS,CAAW,EACVH,EAAA,CAACN,CAAM,EAACF,KAAAE,EAAAF,KAAAO,EAAAP,KAAAQ,IAAAD,EAAAP,EAAA,CAAA,EAAAQ,EAAAR,EAAA,CAAA,GAVXY,EAAAA,UAAUL,EAUPC,CAAQ,EACP,CAACL,EAAc,CAAA,IAAAU,EAAA,OAAAb,EAAA,CAAA,IAAAc,OAAAC,IAAA,2BAAA,GAEfF,EAAAG,EAAAA,kBAAAA,IAAA,MAAA,CAAe,UAAA,iCACb,SAAAA,wBAACC,EAAAA,IAAO,EACV,EAAMjB,KAAAa,GAAAA,EAAAb,EAAA,CAAA,EAFNa,CAEM,CACN,IAAAA,EAAA,OAAAb,EAAA,CAAA,IAAAG,EAAAe,aAAAlB,EAAA,CAAA,IAAAG,EAAAgB,iBAAAnB,EAAA,CAAA,IAAAG,EAAAiB,aAAApB,EAAA,CAAA,IAAAG,EAAAkB,cAAArB,OAAAG,EAAAmB,WAAAtB,EAAA,CAAA,IAAAG,EAAAoB,gBAAAvB,EAAA,EAAA,IAAAG,EAAAqB,SAAAxB,EAAA,EAAA,IAAAG,EAAAsB,iBAAAzB,EAAA,EAAA,IAAAG,EAAAuB,aAAA1B,QAAAG,EAAAwB,mBAAA3B,EAAA,EAAA,IAAAG,EAAAyB,gBAAA5B,EAAA,EAAA,IAAAG,EAAA0B,OAAA7B,EAAA,EAAA,IAAAG,EAAA2B,QAEFjB,0BAACkB,EAAAA,oBAAA,CACc,YAAA5B,EAAce,YACV,gBAAAf,EAAcgB,gBACjB,aAAAhB,EAAckB,aACnB,QAAAlB,EAAcqB,QACZ,UAAArB,EAAcmB,UAClB,MAAAnB,EAAc0B,MACL,eAAA1B,EAAcyB,eACjB,YAAAzB,EAAciB,YACR,kBAAAjB,EAAcwB,kBACjB,eAAAxB,EAAcoB,eACtB,OAAApB,EAAc2B,OACT,YAAA3B,EAAcuB,YACV,gBAAAvB,EAAcsB,gBAAgB,EAC/CzB,EAAA,CAAA,EAAAG,EAAAe,YAAAlB,EAAA,CAAA,EAAAG,EAAAgB,gBAAAnB,EAAA,CAAA,EAAAG,EAAAiB,YAAApB,EAAA,CAAA,EAAAG,EAAAkB,aAAArB,EAAA,CAAA,EAAAG,EAAAmB,UAAAtB,EAAA,CAAA,EAAAG,EAAAoB,eAAAvB,EAAA,EAAA,EAAAG,EAAAqB,QAAAxB,EAAA,EAAA,EAAAG,EAAAsB,gBAAAzB,EAAA,EAAA,EAAAG,EAAAuB,YAAA1B,EAAA,EAAA,EAAAG,EAAAwB,kBAAA3B,EAAA,EAAA,EAAAG,EAAAyB,eAAA5B,EAAA,EAAA,EAAAG,EAAA0B,MAAA7B,EAAA,EAAA,EAAAG,EAAA2B,OAAA9B,MAAAa,GAAAA,EAAAb,EAAA,EAAA,EAdFa,CAcE"}
+{"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","$","_c","config","configSettings","setConfigSettings","useState","undefined","t0","t1","data","fetchAndParseJSON","fetchData","useEffect","t2","Symbol","for","jsx","Spinner","dashboardID","dashboardLayout","dataFilters","dataSettings","debugMode","filterPosition","filters","graphClassNames","graphStyles","noOfFiltersPerRow","readableHeader","theme","uiMode","MultiGraphDashboard"],"mappings":"0RAsCO,SAAAA,EAAAC,EAAA,CAAA,MAAAC,EAAAC,EAAAA,uBAAAA,EAAA,EAAA,EACL,CAAAC,OAAAA,CAAAA,EAAmBH,EACnB,CAAAI,EAAAC,CAAA,EAA4CC,EAAAA,SAAmCC,MAAS,EAAE,IAAAC,EAAAC,EAY1F,GAZ0FR,OAAAE,GAChFK,EAAAA,IAAA,EACU,SAAA,CAChB,GAAI,OAAOL,GAAW,SAAQ,CAC5B,MAAAO,EAAa,MAAMC,EAAAA,kBAAkBR,CAAM,EAC3CE,EAAkBK,CAAI,CAAC,MAEvBL,EAAkBF,CAAM,CACzB,GAEHS,CAAW,EACVH,EAAA,CAACN,CAAM,EAACF,KAAAE,EAAAF,KAAAO,EAAAP,KAAAQ,IAAAD,EAAAP,EAAA,CAAA,EAAAQ,EAAAR,EAAA,CAAA,GAVXY,EAAAA,UAAUL,EAUPC,CAAQ,EACP,CAACL,EAAc,CAAA,IAAAU,EAAA,OAAAb,EAAA,CAAA,IAAAc,OAAAC,IAAA,2BAAA,GAEfF,EAAAG,EAAAA,kBAAAA,IAAA,MAAA,CAAe,UAAA,iCACb,SAAAA,wBAACC,EAAAA,UAAO,EACV,EAAMjB,KAAAa,GAAAA,EAAAb,EAAA,CAAA,EAFNa,CAEM,CACN,IAAAA,EAAA,OAAAb,EAAA,CAAA,IAAAG,EAAAe,aAAAlB,EAAA,CAAA,IAAAG,EAAAgB,iBAAAnB,EAAA,CAAA,IAAAG,EAAAiB,aAAApB,EAAA,CAAA,IAAAG,EAAAkB,cAAArB,OAAAG,EAAAmB,WAAAtB,EAAA,CAAA,IAAAG,EAAAoB,gBAAAvB,EAAA,EAAA,IAAAG,EAAAqB,SAAAxB,EAAA,EAAA,IAAAG,EAAAsB,iBAAAzB,EAAA,EAAA,IAAAG,EAAAuB,aAAA1B,QAAAG,EAAAwB,mBAAA3B,EAAA,EAAA,IAAAG,EAAAyB,gBAAA5B,EAAA,EAAA,IAAAG,EAAA0B,OAAA7B,EAAA,EAAA,IAAAG,EAAA2B,QAEFjB,0BAACkB,EAAAA,oBAAA,CACc,YAAA5B,EAAce,YACV,gBAAAf,EAAcgB,gBACjB,aAAAhB,EAAckB,aACnB,QAAAlB,EAAcqB,QACZ,UAAArB,EAAcmB,UAClB,MAAAnB,EAAc0B,MACL,eAAA1B,EAAcyB,eACjB,YAAAzB,EAAciB,YACR,kBAAAjB,EAAcwB,kBACjB,eAAAxB,EAAcoB,eACtB,OAAApB,EAAc2B,OACT,YAAA3B,EAAcuB,YACV,gBAAAvB,EAAcsB,gBAAgB,EAC/CzB,EAAA,CAAA,EAAAG,EAAAe,YAAAlB,EAAA,CAAA,EAAAG,EAAAgB,gBAAAnB,EAAA,CAAA,EAAAG,EAAAiB,YAAApB,EAAA,CAAA,EAAAG,EAAAkB,aAAArB,EAAA,CAAA,EAAAG,EAAAmB,UAAAtB,EAAA,CAAA,EAAAG,EAAAoB,eAAAvB,EAAA,EAAA,EAAAG,EAAAqB,QAAAxB,EAAA,EAAA,EAAAG,EAAAsB,gBAAAzB,EAAA,EAAA,EAAAG,EAAAuB,YAAA1B,EAAA,EAAA,EAAAG,EAAAwB,kBAAA3B,EAAA,EAAA,EAAAG,EAAAyB,eAAA5B,EAAA,EAAA,EAAAG,EAAA0B,MAAA7B,EAAA,EAAA,EAAAG,EAAA2B,OAAA9B,MAAAa,GAAAA,EAAAb,EAAA,EAAA,EAdFa,CAcE"}

package/dist/MultiGraphDashboardFromConfig.js

@@ -1,18 +1,18 @@
-import { c as h, j as d } from "./index-CHPV5EwG-BzibaIRc.js";
+import { c as h, j as d } from "./compiler-runtime-qHgugrLy.js";
 import { useState as m, useEffect as g } from "react";
-import { w as u } from "./Spinner-B2IIKg9r.js";
+import { Spinner as u } from "@undp/design-system-react/Spinner";
 import { MultiGraphDashboard as c } from "./MultiGraphDashboard.js";
-import { f as p } from "./fetchAndParseData-BAXhgTDM.js";
-function P(f) {
+import { b as p } from "./fetchAndParseData-CDjQZ1fL.js";
+function P(n) {
   const t = h.c(18), {
     config: a
-  } = f, [e, l] = m(void 0);
+  } = n, [e, l] = m(void 0);
   let r, o;
   if (t[0] !== a ? (r = () => {
     (async () => {
       if (typeof a == "string") {
-        const n = await p(a);
-        l(n);
+        const f = await p(a);
+        l(f);
       } else
         l(a);
     })();

package/dist/MultiGraphDashboardWideToLongFormat.cjs

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