@undp/data-viz 1.5.9 → 2.0.1

package/dist/MultiGraphDashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGraphDashboard.js","sources":["../src/Components/Dashboard/MultiGraphDashboard.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport intersection from 'lodash.intersection';\r\nimport flattenDeep from 'lodash.flattendeep';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { Label } from '@undp/design-system-react/Label';\r\n\r\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardColumnDataType,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  GraphType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport {\r\n  fetchAndParseCSV,\r\n  fetchAndParseJSON,\r\n  fetchAndParseMultipleDataSources,\r\n  fetchAndTransformDataFromAPI,\r\n} from '@/Utils/fetchAndParseData';\r\nimport { getUniqValue } from '@/Utils/getUniqValue';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { transformDefaultValue } from '@/Utils/transformDataForSelect';\r\n\r\ninterface Props {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  dataFilters?: DataFilterDataType[];\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  filterPosition?: 'top' | 'side';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\nconst TotalWidth = (columns: DashboardColumnDataType[]) => {\r\n  const columnWidth = columns.map(d => d.columnWidth || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nconst GraphWithAttachedFilter: GraphType[] = [\r\n  'barChart',\r\n  'choroplethMap',\r\n  'biVariateChoroplethMap',\r\n  'circlePacking',\r\n  'treeMap',\r\n];\r\n\r\nexport function MultiGraphDashboard(props: Props) {\r\n  const {\r\n    dashboardID,\r\n    dashboardLayout,\r\n    dataSettings,\r\n    filters,\r\n    debugMode,\r\n    theme = 'light',\r\n    readableHeader,\r\n    dataFilters,\r\n    noOfFiltersPerRow = 4,\r\n    filterPosition,\r\n    uiMode = 'normal',\r\n    graphStyles,\r\n    graphClassNames,\r\n  } = props;\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [dataFromFile, setDataFromFile] = useState<any>(undefined);\r\n  const [filterSettings, setFilterSettings] = useState<FilterSettingsDataType[]>([]);\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n\r\n  const filteredData = useMemo(() => {\r\n    if (!dataFromFile || filterSettings.length === 0) return dataFromFile;\r\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n    const result = dataFromFile.filter((item: any) =>\r\n      filterSettings.every(filter =>\r\n        filter.value && flattenDeep([filter.value]).length > 0\r\n          ? intersection(\r\n              flattenDeep([item[filter.filter]]),\r\n              flattenDeep([filter.value]).map(el => el.value),\r\n            ).length > 0\r\n          : true,\r\n      ),\r\n    );\r\n    return result;\r\n  }, [filterSettings, dataFromFile]);\r\n  useEffect(() => {\r\n    setData(filteredData);\r\n  }, [filteredData]);\r\n\r\n  const fetchDataHandler = useCallback(async () => {\r\n    if (dataSettings) {\r\n      try {\r\n        const fetchData = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? fetchAndParseJSON(\r\n                  dataSettings.dataURL,\r\n                  dataSettings.columnsToArray,\r\n                  dataSettings.dataTransformation,\r\n                  debugMode,\r\n                )\r\n              : dataSettings.fileType === 'api'\r\n                ? fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    dataSettings.columnsToArray,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : fetchAndParseCSV(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.dataTransformation,\r\n                    dataSettings.columnsToArray,\r\n                    debugMode,\r\n                    dataSettings.delimiter,\r\n                    true,\r\n                  )\r\n            : fetchAndParseMultipleDataSources(dataSettings.dataURL, dataSettings.idColumnTitle)\r\n          : transformColumnsToArray(dataSettings.data, dataSettings.columnsToArray);\r\n\r\n        const d = await fetchData;\r\n        setDataFromFile(d);\r\n\r\n        // Optimize filter settings generation\r\n        const newFilterSettings = (filters || []).map(el => ({\r\n          filter: el.column,\r\n          label: el.label || `Filter by ${el.column}`,\r\n          singleSelect: el.singleSelect,\r\n          clearable: el.clearable,\r\n          defaultValue: transformDefaultValue(el.defaultValue),\r\n          value: transformDefaultValue(el.defaultValue),\r\n          availableValues: getUniqValue(d, el.column)\r\n            .filter(v => !el.excludeValues?.includes(`${v}`))\r\n            .map(v => ({ value: v, label: v })),\r\n          allowSelectAll: el.allowSelectAll,\r\n          width: el.width,\r\n        }));\r\n\r\n        setFilterSettings(newFilterSettings);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    }\r\n  }, [dataSettings, filters, debugMode]);\r\n  useEffect(() => {\r\n    fetchDataHandler();\r\n  }, [fetchDataHandler]);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const handleFilterChange = useCallback((filter: string, values: any) => {\r\n    setFilterSettings(prev => prev.map(f => (f.filter === filter ? { ...f, value: values } : f)));\r\n  }, []);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex grow`}\r\n      dir={\r\n        dashboardLayout.language === 'he' || dashboardLayout.language === 'ar' ? 'rtl' : undefined\r\n      }\r\n    >\r\n      <div\r\n        className={`${\r\n          !dashboardLayout.backgroundColor\r\n            ? 'bg-transparent '\r\n            : dashboardLayout.backgroundColor === true\r\n              ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n              : ''\r\n        }ml-auto mr-auto gap-4 flex flex-col w-full grow h-inherit ${\r\n          dashboardLayout.language || 'en'\r\n        }`}\r\n        style={{\r\n          ...(dashboardLayout.backgroundColor && dashboardLayout.backgroundColor !== true\r\n            ? { backgroundColor: dashboardLayout.backgroundColor }\r\n            : {}),\r\n        }}\r\n        id={dashboardID}\r\n      >\r\n        <div\r\n          style={{\r\n            padding: dashboardLayout.backgroundColor\r\n              ? dashboardLayout.padding || '1rem'\r\n              : dashboardLayout.padding || 0,\r\n            flexGrow: 1,\r\n            display: 'flex',\r\n          }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {dashboardLayout.title || dashboardLayout.description ? (\r\n              <GraphHeader\r\n                graphTitle={dashboardLayout.title}\r\n                graphDescription={dashboardLayout.description}\r\n                isDashboard\r\n              />\r\n            ) : null}\r\n            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>\r\n              {filterSettings.length !== 0 ? (\r\n                <div\r\n                  style={{\r\n                    width: filterPosition === 'side' ? '280px' : '100%',\r\n                    flexGrow: 1,\r\n                    flexShrink: 0,\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      flexWrap: 'wrap',\r\n                      alignItems: 'flex-start',\r\n                      width: '100%',\r\n                      position: 'sticky',\r\n                      top: '1rem',\r\n                    }}\r\n                  >\r\n                    {filterSettings?.map((d, i) => (\r\n                      <div\r\n                        style={{\r\n                          width:\r\n                            d.width ||\r\n                            `calc(${100 / noOfFiltersPerRow}% - ${\r\n                              (noOfFiltersPerRow - 1) / noOfFiltersPerRow\r\n                            }rem)`,\r\n                          flexGrow: 1,\r\n                          flexShrink: 0,\r\n                          minWidth: '240px',\r\n                        }}\r\n                        key={i}\r\n                      >\r\n                        <Label className='mb-2'>{d.label}</Label>\r\n                        {d.singleSelect ? (\r\n                          <DropdownSelect\r\n                            options={d.availableValues}\r\n                            isClearable={d.clearable === undefined ? true : d.clearable}\r\n                            size='sm'\r\n                            variant={uiMode}\r\n                            isMulti={false}\r\n                            isSearchable\r\n                            filterOption={createFilter(filterConfig)}\r\n                            onChange={el => {\r\n                              handleFilterChange(d.filter, el);\r\n                            }}\r\n                            defaultValue={d.defaultValue}\r\n                            value={d.value}\r\n                          />\r\n                        ) : (\r\n                          <>\r\n                            <DropdownSelect\r\n                              options={d.availableValues}\r\n                              isMulti\r\n                              size='sm'\r\n                              isClearable={d.clearable === undefined ? true : d.clearable}\r\n                              variant={uiMode}\r\n                              isSearchable\r\n                              controlShouldRenderValue\r\n                              closeMenuOnSelect={false}\r\n                              hideSelectedOptions={false}\r\n                              filterOption={createFilter(filterConfig)}\r\n                              onChange={el => {\r\n                                handleFilterChange(d.filter, el);\r\n                              }}\r\n                              value={d.value}\r\n                              defaultValue={d.defaultValue}\r\n                            />\r\n                            {d.allowSelectAll ? (\r\n                              <button\r\n                                type='button'\r\n                                className='bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400'\r\n                                onClick={() => {\r\n                                  handleFilterChange(d.filter, d.availableValues);\r\n                                }}\r\n                              >\r\n                                Select all options\r\n                              </button>\r\n                            ) : null}\r\n                          </>\r\n                        )}\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                </div>\r\n              ) : null}\r\n              <div\r\n                style={{\r\n                  width: filterPosition === 'side' ? 'calc(100% - 280px - 1rem)' : '100%',\r\n                  minWidth: '280px',\r\n                  flexGrow: 1,\r\n                  display: 'flex',\r\n                  gap: '1rem',\r\n                  flexWrap: 'wrap',\r\n                  flexShrink: '0',\r\n                }}\r\n              >\r\n                {dashboardLayout.rows.map((d, i) => (\r\n                  <div\r\n                    key={i}\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      alignItems: 'stretch',\r\n                      minHeight: `${d.height || 0}px`,\r\n                      height: 'auto',\r\n                      width: '100%',\r\n                      flexWrap: 'wrap',\r\n                    }}\r\n                  >\r\n                    {d.columns.map((el, j) => (\r\n                      <div\r\n                        key={j}\r\n                        className='flex bg-transparent h-inherit grow min-w-60'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }% - ${\r\n                            (TotalWidth(d.columns) - (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }rem)`,\r\n                          minHeight: 'inherit',\r\n                        }}\r\n                      >\r\n                        <SingleGraphDashboard\r\n                          graphType={el.graphType}\r\n                          dataFilters={el.dataFilters}\r\n                          uiMode={uiMode}\r\n                          graphSettings={{\r\n                            ...(el.settings || {}),\r\n                            width: undefined,\r\n                            height: undefined,\r\n                            resetSelectionOnDoubleClick: el.attachedFilter\r\n                              ? false\r\n                              : el.settings?.resetSelectionOnDoubleClick,\r\n                            styles: el.settings?.styles || graphStyles,\r\n                            classNames: el.settings?.classNames || graphClassNames,\r\n                            radius: el.graphType === 'donutChart' ? undefined : el.settings?.radius,\r\n                            size: el.graphType === 'unitChart' ? el.settings?.size : undefined,\r\n                            language: el.settings?.language || dashboardLayout.language,\r\n                            theme: el.settings?.theme || theme,\r\n                          }}\r\n                          dataSettings={{\r\n                            data: data ? filterData(data, dataFilters || []) : undefined,\r\n                          }}\r\n                          updateFilters={\r\n                            el.attachedFilter &&\r\n                            GraphWithAttachedFilter.indexOf(el.graphType) !== -1 &&\r\n                            filterSettings.findIndex(f => f.filter === el.attachedFilter) !== -1\r\n                              ? dClicked => {\r\n                                  const indx = filterSettings.findIndex(\r\n                                    f => f.filter === el.attachedFilter,\r\n                                  );\r\n                                  const value = dClicked\r\n                                    ? filterSettings[indx].singleSelect\r\n                                      ? { value: dClicked, label: dClicked }\r\n                                      : [{ value: dClicked, label: dClicked }]\r\n                                    : undefined;\r\n                                  handleFilterChange(el.attachedFilter as string, value);\r\n                                }\r\n                              : undefined\r\n                          }\r\n                          dataTransform={el.dataTransform}\r\n                          dataSelectionOptions={el.dataSelectionOptions}\r\n                          advancedDataSelectionOptions={el.advancedDataSelectionOptions}\r\n                          graphDataConfiguration={el.graphDataConfiguration}\r\n                          debugMode={debugMode}\r\n                          readableHeader={readableHeader || []}\r\n                        />\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","d","acc","cur","GraphWithAttachedFilter","MultiGraphDashboard","props","dashboardID","dashboardLayout","dataSettings","filters","debugMode","theme","readableHeader","dataFilters","noOfFiltersPerRow","filterPosition","uiMode","graphStyles","graphClassNames","data","setData","useState","dataFromFile","setDataFromFile","filterSettings","setFilterSettings","filterConfig","useMemo","filteredData","item","filter","flattenDeep","intersection","el","useEffect","fetchDataHandler","useCallback","fetchAndParseJSON","fetchAndTransformDataFromAPI","fetchAndParseCSV","fetchAndParseMultipleDataSources","transformColumnsToArray","newFilterSettings","transformDefaultValue","getUniqValue","v","error","handleFilterChange","values","prev","f","jsx","jsxs","GraphHeader","i","Label","DropdownSelect","createFilter","Fragment","j","SingleGraphDashboard","filterData","dClicked","indx","value"],"mappings":"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"}
+{"version":3,"file":"MultiGraphDashboard.js","sources":["../src/Components/Dashboard/MultiGraphDashboard.tsx"],"sourcesContent":["import { 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\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      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]);\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: 1,\r\n                    flexShrink: 0,\r\n                    minWidth: '240px',\r\n                  }}\r\n                  key={i}\r\n                >\r\n                  <Label className='mb-2'>{d.label}</Label>\r\n                  {d.singleSelect ? (\r\n                    <DropdownSelect\r\n                      options={d.availableValues}\r\n                      isClearable={d.clearable === undefined ? true : d.clearable}\r\n                      size='sm'\r\n                      variant={uiMode}\r\n                      isMulti={false}\r\n                      isSearchable\r\n                      filterOption={createFilter(filterConfig)}\r\n                      onChange={el => {\r\n                        handleFilterChange(d.filter, el);\r\n                      }}\r\n                      defaultValue={d.defaultValue}\r\n                      value={d.value}\r\n                    />\r\n                  ) : (\r\n                    <>\r\n                      <DropdownSelect\r\n                        options={d.availableValues}\r\n                        isMulti\r\n                        size='sm'\r\n                        isClearable={d.clearable === undefined ? true : d.clearable}\r\n                        variant={uiMode}\r\n                        isSearchable\r\n                        controlShouldRenderValue\r\n                        closeMenuOnSelect={false}\r\n                        hideSelectedOptions={false}\r\n                        filterOption={createFilter(filterConfig)}\r\n                        onChange={el => {\r\n                          handleFilterChange(d.filter, el);\r\n                        }}\r\n                        value={d.value}\r\n                        defaultValue={d.defaultValue}\r\n                      />\r\n                      {d.allowSelectAll ? (\r\n                        <button\r\n                          type='button'\r\n                          className='bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400'\r\n                          onClick={() => {\r\n                            handleFilterChange(d.filter, d.availableValues);\r\n                          }}\r\n                        >\r\n                          Select all options\r\n                        </button>\r\n                      ) : null}\r\n                    </>\r\n                  )}\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        ) : null}\r\n        <div\r\n          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","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","Fragment","rows","minHeight","height","j","SingleGraphDashboard","graphType","settings","relativeHeight","resetSelectionOnDoubleClick","attachedFilter","styles","classNames","radius","size","filterData","indexOf","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 a=require("./index-CHPV5EwG-DjM48pIC.cjs"),s=require("react"),n=require("./Spinner-C6wLp85s.cjs"),d=require("./MultiGraphDashboard.cjs"),u=require("./fetchAndParseData-Ba-_CgxS.cjs");function l(i){const{config:t}=i,[e,r]=s.useState(void 0);return s.useEffect(()=>{(async()=>{if(typeof t=="string"){const o=await u.fetchAndParseJSON(t);r(o)}else r(t)})()},[t]),e?a.jsxRuntimeExports.jsx(d.MultiGraphDashboard,{dashboardID:e.dashboardID,dashboardLayout:e.dashboardLayout,dataSettings:e.dataSettings,filters:e.filters,debugMode:e.debugMode,theme:e.theme,readableHeader:e.readableHeader,dataFilters:e.dataFilters,noOfFiltersPerRow:e.noOfFiltersPerRow,filterPosition:e.filterPosition,uiMode:e.uiMode,graphStyles:e.graphStyles,graphClassNames:e.graphClassNames}):a.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:a.jsxRuntimeExports.jsx(n.y,{})})}exports.MultiGraphDashboardFromConfig=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./index-CHPV5EwG-CTPQjnHt.cjs"),n=require("react"),h=require("./Spinner-DRMBUsX7.cjs"),c=require("./MultiGraphDashboard.cjs"),g=require("./fetchAndParseData-l5HGMAEs.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;
 //# 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","config","configSettings","setConfigSettings","useState","useEffect","data","fetchAndParseJSON","jsx","MultiGraphDashboard","Spinner"],"mappings":"6QAsCO,SAASA,EAA8BC,EAAc,CAC1D,KAAM,CAAE,OAAAC,GAAWD,EACb,CAACE,EAAgBC,CAAiB,EAAIC,EAAAA,SAAmC,MAAS,EAYxF,OAXAC,EAAAA,UAAU,IAAM,EACI,SAAY,CAC5B,GAAI,OAAOJ,GAAW,SAAU,CAC9B,MAAMK,EAAO,MAAMC,EAAAA,kBAAkBN,CAAM,EAC3CE,EAAkBG,CAAI,CACxB,MACEH,EAAkBF,CAAM,CAE5B,GACA,CACF,EAAG,CAACA,CAAM,CAAC,EACNC,EAOHM,EAAAA,kBAAAA,IAACC,EAAAA,oBAAA,CACC,YAAaP,EAAe,YAC5B,gBAAiBA,EAAe,gBAChC,aAAcA,EAAe,aAC7B,QAASA,EAAe,QACxB,UAAWA,EAAe,UAC1B,MAAOA,EAAe,MACtB,eAAgBA,EAAe,eAC/B,YAAaA,EAAe,YAC5B,kBAAmBA,EAAe,kBAClC,eAAgBA,EAAe,eAC/B,OAAQA,EAAe,OACvB,YAAaA,EAAe,YAC5B,gBAAiBA,EAAe,eAAA,CAAA,0BAlB/B,MAAA,CAAI,UAAU,iCACb,SAAAM,wBAACE,EAAAA,IAAQ,EACX,CAmBN"}
+{"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"}

package/dist/MultiGraphDashboardFromConfig.d.ts

@@ -94,6 +94,7 @@ declare interface ClassNameObject {
     mouseOverLine?: string;
     regLine?: string;
     dataCards?: string;
+    colorLegend?: string;
 }
 
 declare interface ColumnConfigurationDataType {

package/dist/MultiGraphDashboardFromConfig.js

@@ -1,38 +1,29 @@
-import { j as a } from "./index-CHPV5EwG-DBWUSD9b.js";
-import { useState as i, useEffect as d } from "react";
-import { y as f } from "./Spinner-Bpz70q_g.js";
-import { MultiGraphDashboard as n } from "./MultiGraphDashboard.js";
-import { f as l } from "./fetchAndParseData-sapWbnYk.js";
-function b(s) {
-  const { config: e } = s, [t, r] = i(void 0);
-  return d(() => {
+import { c as h, j as d } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as m, useEffect as g } from "react";
+import { w as u } from "./Spinner-D7rnnwnA.js";
+import { MultiGraphDashboard as c } from "./MultiGraphDashboard.js";
+import { f as p } from "./fetchAndParseData-BpqkBPQL.js";
+function P(f) {
+  const t = h.c(18), {
+    config: a
+  } = f, [e, l] = m(void 0);
+  let r, o;
+  if (t[0] !== a ? (r = () => {
     (async () => {
-      if (typeof e == "string") {
-        const o = await l(e);
-        r(o);
+      if (typeof a == "string") {
+        const n = await p(a);
+        l(n);
       } else
-        r(e);
+        l(a);
     })();
-  }, [e]), t ? /* @__PURE__ */ a.jsx(
-    n,
-    {
-      dashboardID: t.dashboardID,
-      dashboardLayout: t.dashboardLayout,
-      dataSettings: t.dataSettings,
-      filters: t.filters,
-      debugMode: t.debugMode,
-      theme: t.theme,
-      readableHeader: t.readableHeader,
-      dataFilters: t.dataFilters,
-      noOfFiltersPerRow: t.noOfFiltersPerRow,
-      filterPosition: t.filterPosition,
-      uiMode: t.uiMode,
-      graphStyles: t.graphStyles,
-      graphClassNames: t.graphClassNames
-    }
-  ) : /* @__PURE__ */ a.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ a.jsx(f, {}) });
+  }, o = [a], t[0] = a, t[1] = r, t[2] = o) : (r = t[1], o = t[2]), g(r, o), !e) {
+    let s;
+    return t[3] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ d.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ d.jsx(u, {}) }), 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 = /* @__PURE__ */ d.jsx(c, { 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;
 }
 export {
-  b as MultiGraphDashboardFromConfig
+  P as MultiGraphDashboardFromConfig
 };
 //# sourceMappingURL=MultiGraphDashboardFromConfig.js.map

package/dist/MultiGraphDashboardFromConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGraphDashboardFromConfig.js","sources":["../src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  filterPosition?: 'top' | 'side';\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <MultiGraphDashboard\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      filterPosition={configSettings.filterPosition}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","data","fetchAndParseJSON","jsx","MultiGraphDashboard","Spinner"],"mappings":";;;;;AAsCO,SAASA,EAA8BC,GAAc;AAC1D,QAAM,EAAE,QAAAC,MAAWD,GACb,CAACE,GAAgBC,CAAiB,IAAIC,EAAmC,MAAS;AAYxF,SAXAC,EAAU,MAAM;AASd,KARkB,YAAY;AAC5B,UAAI,OAAOJ,KAAW,UAAU;AAC9B,cAAMK,IAAO,MAAMC,EAAkBN,CAAM;AAC3C,QAAAE,EAAkBG,CAAI;AAAA,MACxB;AACE,QAAAH,EAAkBF,CAAM;AAAA,IAE5B,GACA;AAAA,EACF,GAAG,CAACA,CAAM,CAAC,GACNC,IAOHM,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,aAAaP,EAAe;AAAA,MAC5B,iBAAiBA,EAAe;AAAA,MAChC,cAAcA,EAAe;AAAA,MAC7B,SAASA,EAAe;AAAA,MACxB,WAAWA,EAAe;AAAA,MAC1B,OAAOA,EAAe;AAAA,MACtB,gBAAgBA,EAAe;AAAA,MAC/B,aAAaA,EAAe;AAAA,MAC5B,mBAAmBA,EAAe;AAAA,MAClC,gBAAgBA,EAAe;AAAA,MAC/B,QAAQA,EAAe;AAAA,MACvB,aAAaA,EAAe;AAAA,MAC5B,iBAAiBA,EAAe;AAAA,IAAA;AAAA,EAAA,0BAlB/B,OAAA,EAAI,WAAU,kCACb,UAAAM,gBAAAA,MAACE,KAAQ,GACX;AAmBN;"}
+{"version":3,"file":"MultiGraphDashboardFromConfig.js","sources":["../src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  filterPosition?: 'top' | 'side';\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <MultiGraphDashboard\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      filterPosition={configSettings.filterPosition}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardFromConfig","props","$","_c","config","configSettings","setConfigSettings","useState","undefined","t0","t1","fetchData","data","fetchAndParseJSON","useEffect","t2","Symbol","for","jsx","Spinner","dashboardID","dashboardLayout","dataFilters","dataSettings","debugMode","filterPosition","filters","graphClassNames","graphStyles","noOfFiltersPerRow","readableHeader","theme","uiMode","MultiGraphDashboard"],"mappings":";;;;;AAsCO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAAA,EAAA,EAAA,GACL;AAAA,IAAAC,QAAAA;AAAAA,EAAAA,IAAmBH,GACnB,CAAAI,GAAAC,CAAA,IAA4CC,EAAmCC,MAAS;AAAE,MAAAC,GAAAC;AAY1F,MAZ0FR,SAAAE,KAChFK,IAAAA,MAAA;AASRE,KARkB,YAAA;AAChB,UAAI,OAAOP,KAAW,UAAQ;AAC5B,cAAAQ,IAAa,MAAMC,EAAkBT,CAAM;AAC3CE,QAAAA,EAAkBM,CAAI;AAAA,MAAC;AAEvBN,QAAAA,EAAkBF,CAAM;AAAA,IACzB,GAEHO;AAAAA,EAAW,GACVD,IAAA,CAACN,CAAM,GAACF,OAAAE,GAAAF,OAAAO,GAAAP,OAAAQ,MAAAD,IAAAP,EAAA,CAAA,GAAAQ,IAAAR,EAAA,CAAA,IAVXY,EAAUL,GAUPC,CAAQ,GACP,CAACL,GAAc;AAAA,QAAAU;AAAA,WAAAb,EAAA,CAAA,MAAAc,OAAAC,IAAA,2BAAA,KAEfF,IAAAG,gBAAAA,EAAAA,IAAA,OAAA,EAAe,WAAA,kCACb,UAAAA,gBAAAA,MAACC,KAAO,GACV,GAAMjB,OAAAa,KAAAA,IAAAb,EAAA,CAAA,GAFNa;AAAAA,EAEM;AACN,MAAAA;AAAA,SAAAb,EAAA,CAAA,MAAAG,EAAAe,eAAAlB,EAAA,CAAA,MAAAG,EAAAgB,mBAAAnB,EAAA,CAAA,MAAAG,EAAAiB,eAAApB,EAAA,CAAA,MAAAG,EAAAkB,gBAAArB,SAAAG,EAAAmB,aAAAtB,EAAA,CAAA,MAAAG,EAAAoB,kBAAAvB,EAAA,EAAA,MAAAG,EAAAqB,WAAAxB,EAAA,EAAA,MAAAG,EAAAsB,mBAAAzB,EAAA,EAAA,MAAAG,EAAAuB,eAAA1B,UAAAG,EAAAwB,qBAAA3B,EAAA,EAAA,MAAAG,EAAAyB,kBAAA5B,EAAA,EAAA,MAAAG,EAAA0B,SAAA7B,EAAA,EAAA,MAAAG,EAAA2B,UAEFjB,0BAACkB,GAAA,EACc,aAAA5B,EAAce,aACV,iBAAAf,EAAcgB,iBACjB,cAAAhB,EAAckB,cACnB,SAAAlB,EAAcqB,SACZ,WAAArB,EAAcmB,WAClB,OAAAnB,EAAc0B,OACL,gBAAA1B,EAAcyB,gBACjB,aAAAzB,EAAciB,aACR,mBAAAjB,EAAcwB,mBACjB,gBAAAxB,EAAcoB,gBACtB,QAAApB,EAAc2B,QACT,aAAA3B,EAAcuB,aACV,iBAAAvB,EAAcsB,iBAAgB,GAC/CzB,EAAA,CAAA,IAAAG,EAAAe,aAAAlB,EAAA,CAAA,IAAAG,EAAAgB,iBAAAnB,EAAA,CAAA,IAAAG,EAAAiB,aAAApB,EAAA,CAAA,IAAAG,EAAAkB,cAAArB,EAAA,CAAA,IAAAG,EAAAmB,WAAAtB,EAAA,CAAA,IAAAG,EAAAoB,gBAAAvB,EAAA,EAAA,IAAAG,EAAAqB,SAAAxB,EAAA,EAAA,IAAAG,EAAAsB,iBAAAzB,EAAA,EAAA,IAAAG,EAAAuB,aAAA1B,EAAA,EAAA,IAAAG,EAAAwB,mBAAA3B,EAAA,EAAA,IAAAG,EAAAyB,gBAAA5B,EAAA,EAAA,IAAAG,EAAA0B,OAAA7B,EAAA,EAAA,IAAAG,EAAA2B,QAAA9B,QAAAa,KAAAA,IAAAb,EAAA,EAAA,GAdFa;AAcE;"}

package/dist/MultiGraphDashboardWideToLongFormat.cjs

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

package/dist/MultiGraphDashboardWideToLongFormat.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGraphDashboardWideToLongFormat.cjs","sources":["../src/Utils/wideToLongTranformation.ts","../src/Components/Dashboard/MultiGraphDashboardWideToLongFormat.tsx"],"sourcesContent":["export function wideToLongTransformation(\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  data: any,\r\n  keyColumn: string,\r\n  readableHeader: {\r\n    value: string;\r\n    label: string;\r\n  }[],\r\n  debugMode?: boolean,\r\n) {\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const transformedData: any = [];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  data.forEach((row: any) => {\r\n    Object.entries(row).forEach(([key, value]) => {\r\n      if (key !== keyColumn) {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const obj: any = {\r\n          indicator:\r\n            readableHeader.findIndex(d => d.value === key) !== -1\r\n              ? readableHeader[readableHeader.findIndex(d => d.value === key)].label\r\n              : key,\r\n          value,\r\n        };\r\n        obj[keyColumn] = row[keyColumn];\r\n        transformedData.push(obj);\r\n      }\r\n    });\r\n  });\r\n  if (debugMode) {\r\n    // eslint-disable-next-line no-console\r\n    console.log(transformedData);\r\n  }\r\n  return transformedData;\r\n}\r\n","import { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { Label } from '@undp/design-system-react/Label';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardFromWideToLongFormatColumnDataType,\r\n  DashboardFromWideToLongFormatLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsWideToLongDataType,\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 { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { wideToLongTransformation } from '@/Utils/wideToLongTranformation';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\r\n\r\ninterface Props {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;\r\n  dataSettings: DataSettingsWideToLongDataType;\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\nconst TotalWidth = (columns: DashboardFromWideToLongFormatColumnDataType[]) => {\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\nexport function MultiGraphDashboardWideToLongFormat(props: Props) {\r\n  const {\r\n    dashboardID,\r\n    dashboardLayout,\r\n    dataSettings,\r\n    debugMode,\r\n    theme = 'light',\r\n    readableHeader,\r\n    dataFilters,\r\n    uiMode = 'normal',\r\n    graphStyles,\r\n    graphClassNames,\r\n  } = props;\r\n\r\n  const filterConfig = useMemo(\r\n    () => ({\r\n      ignoreCase: true,\r\n      ignoreAccents: true,\r\n      trim: true,\r\n    }),\r\n    [],\r\n  );\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  const [filterValues, setFilterValues] = useState<string[]>([]);\r\n  const [selectedFilterValues, setSelectedFilterValues] = useState<string | undefined>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [dataFromFile, setDataFromFile] = useState<any>(undefined);\r\n\r\n  useEffect(() => {\r\n    if (dataFromFile) {\r\n      const filteredData = dataFromFile.filter(\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        (item: any) => item[dataSettings.keyColumn] === selectedFilterValues,\r\n      );\r\n      setData(filteredData);\r\n    }\r\n  }, [dataFromFile, selectedFilterValues, dataSettings.keyColumn]);\r\n  const fetchDataHandler = useCallback(async () => {\r\n    if (dataSettings) {\r\n      try {\r\n        const fetchData = dataSettings.dataURL\r\n          ? typeof dataSettings.dataURL === 'string'\r\n            ? dataSettings.fileType === 'json'\r\n              ? fetchAndParseJSON(\r\n                  dataSettings.dataURL,\r\n                  undefined,\r\n                  dataSettings.dataTransformation,\r\n                  debugMode,\r\n                )\r\n              : dataSettings.fileType === 'api'\r\n                ? fetchAndTransformDataFromAPI(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.apiHeaders,\r\n                    undefined,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : fetchAndParseCSV(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.dataTransformation,\r\n                    undefined,\r\n                    debugMode,\r\n                    dataSettings.delimiter,\r\n                    true,\r\n                  )\r\n            : fetchAndParseMultipleDataSources(dataSettings.dataURL, dataSettings.idColumnTitle)\r\n          : transformColumnsToArray(dataSettings.data, undefined);\r\n\r\n        const d = await fetchData;\r\n        const filteredData = filterData(d, dataFilters || []);\r\n        setFilterValues(\r\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n          filteredData.map((el: any) => el[dataSettings.keyColumn]),\r\n        );\r\n        setSelectedFilterValues(filteredData[0][dataSettings.keyColumn]);\r\n        const tempData = wideToLongTransformation(\r\n          filteredData,\r\n          dataSettings.keyColumn,\r\n          readableHeader || [],\r\n          debugMode,\r\n        );\r\n        setDataFromFile(tempData);\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    }\r\n  }, [dataSettings, debugMode, dataFilters, readableHeader]);\r\n  useEffect(() => {\r\n    fetchDataHandler();\r\n  }, [fetchDataHandler]);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex grow`}\r\n      dir={\r\n        dashboardLayout.language === 'he' || dashboardLayout.language === 'ar' ? 'rtl' : undefined\r\n      }\r\n    >\r\n      <div\r\n        className={`${\r\n          !dashboardLayout?.backgroundColor\r\n            ? 'bg-transparent '\r\n            : dashboardLayout?.backgroundColor === true\r\n              ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n              : ''\r\n        }flex flex-col h-inherit w-full ml-auto mr-auto grow gap-4 ${\r\n          dashboardLayout?.language || 'en'\r\n        }`}\r\n        style={{\r\n          ...(dashboardLayout?.backgroundColor && dashboardLayout?.backgroundColor !== true\r\n            ? { backgroundColor: dashboardLayout?.backgroundColor }\r\n            : {}),\r\n        }}\r\n        id={dashboardID}\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{\r\n            padding: dashboardLayout.backgroundColor\r\n              ? dashboardLayout.padding || '1rem'\r\n              : dashboardLayout.padding || 0,\r\n          }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {dashboardLayout.title || dashboardLayout.description ? (\r\n              <GraphHeader\r\n                graphTitle={dashboardLayout.title}\r\n                graphDescription={dashboardLayout.description}\r\n                isDashboard\r\n              />\r\n            ) : null}\r\n            {data ? (\r\n              <>\r\n                <div\r\n                  style={{\r\n                    display: 'flex',\r\n                    gap: '1rem',\r\n                    flexWrap: 'wrap',\r\n                    alignItems: 'flex-start',\r\n                    width: '100%',\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      width: '100%',\r\n                      flexGrow: 1,\r\n                      flexShrink: 0,\r\n                      minWidth: '240px',\r\n                    }}\r\n                  >\r\n                    {dashboardLayout.dropdownLabel ? (\r\n                      <Label className='mb-2'>{dashboardLayout.dropdownLabel}</Label>\r\n                    ) : null}\r\n                    <DropdownSelect\r\n                      options={filterValues.map(d => ({\r\n                        value: d,\r\n                        label: d,\r\n                      }))}\r\n                      size='sm'\r\n                      variant={uiMode}\r\n                      isClearable={false}\r\n                      isSearchable\r\n                      controlShouldRenderValue\r\n                      filterOption={createFilter(filterConfig)}\r\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                      onChange={(el: any) => {\r\n                        setSelectedFilterValues(el?.value);\r\n                      }}\r\n                      defaultValue={{\r\n                        value: selectedFilterValues as string,\r\n                        label: selectedFilterValues as string,\r\n                      }}\r\n                    />\r\n                  </div>\r\n                </div>\r\n                {dashboardLayout.rows.map((d, i) => (\r\n                  <div\r\n                    key={i}\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      alignItems: 'stretch',\r\n                      minHeight: `${d.height || 0}px`,\r\n                      height: 'auto',\r\n                      width: '100%',\r\n                      flexWrap: 'wrap',\r\n                    }}\r\n                  >\r\n                    {d.columns.map((el, j) => (\r\n                      <div\r\n                        key={j}\r\n                        className='flex bg-transparent h-inherit grow min-w-60'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }% - ${\r\n                            (TotalWidth(d.columns) - (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }rem)`,\r\n                          minHeight: 'inherit',\r\n                        }}\r\n                      >\r\n                        <SingleGraphDashboard\r\n                          graphType={el.graphType}\r\n                          dataFilters={el.dataFilters}\r\n                          uiMode={uiMode}\r\n                          graphSettings={{\r\n                            ...(el.settings || {}),\r\n                            width: undefined,\r\n                            height: undefined,\r\n                            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                            styles: el.settings?.styles || graphStyles,\r\n                            classNames: el.settings?.classNames || graphClassNames,\r\n                          }}\r\n                          dataSettings={{ data }}\r\n                          graphDataConfiguration={\r\n                            el.graphDataConfiguration\r\n                              ? el.graphDataConfiguration\r\n                              : el.graphType === 'unitChart'\r\n                                ? [\r\n                                    {\r\n                                      columnId: 'indicator',\r\n                                      chartConfigId: 'label',\r\n                                    },\r\n                                    { columnId: 'value', chartConfigId: 'value' },\r\n                                  ]\r\n                                : [\r\n                                    {\r\n                                      columnId: 'indicator',\r\n                                      chartConfigId: 'label',\r\n                                    },\r\n                                    { columnId: 'value', chartConfigId: 'size' },\r\n                                  ]\r\n                          }\r\n                          debugMode={debugMode}\r\n                          readableHeader={readableHeader || []}\r\n                        />\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                ))}\r\n              </>\r\n            ) : (\r\n              <div className='w-full flex justify-center p-4'>\r\n                <Spinner />\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["wideToLongTransformation","data","keyColumn","readableHeader","debugMode","transformedData","row","key","value","obj","d","TotalWidth","columns","acc","cur","MultiGraphDashboardWideToLongFormat","props","dashboardID","dashboardLayout","dataSettings","theme","dataFilters","uiMode","graphStyles","graphClassNames","filterConfig","useMemo","setData","useState","filterValues","setFilterValues","selectedFilterValues","setSelectedFilterValues","dataFromFile","setDataFromFile","useEffect","filteredData","item","fetchDataHandler","useCallback","fetchAndParseJSON","fetchAndTransformDataFromAPI","fetchAndParseCSV","fetchAndParseMultipleDataSources","transformColumnsToArray","filterData","el","tempData","error","jsx","jsxs","GraphHeader","Fragment","Label","DropdownSelect","createFilter","i","SingleGraphDashboard","Spinner"],"mappings":"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"}
+{"version":3,"file":"MultiGraphDashboardWideToLongFormat.cjs","sources":["../src/Utils/wideToLongTranformation.ts","../src/Components/Dashboard/MultiGraphDashboardWideToLongFormat.tsx"],"sourcesContent":["export function wideToLongTransformation(\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  data: any,\r\n  keyColumn: string,\r\n  readableHeader: {\r\n    value: string;\r\n    label: string;\r\n  }[],\r\n  debugMode?: boolean,\r\n) {\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const transformedData: any = [];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  data.forEach((row: any) => {\r\n    Object.entries(row).forEach(([key, value]) => {\r\n      if (key !== keyColumn) {\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        const obj: any = {\r\n          indicator:\r\n            readableHeader.findIndex(d => d.value === key) !== -1\r\n              ? readableHeader[readableHeader.findIndex(d => d.value === key)].label\r\n              : key,\r\n          value,\r\n        };\r\n        obj[keyColumn] = row[keyColumn];\r\n        transformedData.push(obj);\r\n      }\r\n    });\r\n  });\r\n  if (debugMode) {\r\n    // eslint-disable-next-line no-console\r\n    console.log(transformedData);\r\n  }\r\n  return transformedData;\r\n}\r\n","import { useEffect, useEffectEvent, useState } from 'react';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { Label } from '@undp/design-system-react/Label';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardFromWideToLongFormatColumnDataType,\r\n  DashboardFromWideToLongFormatLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsWideToLongDataType,\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 { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { wideToLongTransformation } from '@/Utils/wideToLongTranformation';\r\nimport { filterData } from '@/Utils/transformData/filterData';\r\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\r\n\r\ninterface Props {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;\r\n  dataSettings: DataSettingsWideToLongDataType;\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\nconst TotalWidth = (columns: DashboardFromWideToLongFormatColumnDataType[]) => {\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\nexport function MultiGraphDashboardWideToLongFormat(props: Props) {\r\n  const {\r\n    dashboardID,\r\n    dashboardLayout,\r\n    dataSettings,\r\n    debugMode,\r\n    theme = 'light',\r\n    readableHeader,\r\n    dataFilters,\r\n    uiMode = 'normal',\r\n    graphStyles,\r\n    graphClassNames,\r\n  } = props;\r\n\r\n  const filterConfig = {\r\n    ignoreCase: true,\r\n    ignoreAccents: true,\r\n    trim: true,\r\n  };\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [filteredData, setFilteredData] = useState<any>(undefined);\r\n  const [filterValues, setFilterValues] = useState<string[]>([]);\r\n  const [selectedFilterValues, setSelectedFilterValues] = useState<string | undefined>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [data, setData] = useState<any>(undefined);\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  const [unformattedData, setUnformattedData] = useState<any>(undefined);\r\n\r\n  const updateDataAndFilterValueEvent = useEffectEvent(() => {\r\n    const filteredData = filterData(unformattedData, dataFilters || []);\r\n    setFilterValues(\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      filteredData.map((el: any) => el[dataSettings.keyColumn]),\r\n    );\r\n    setSelectedFilterValues(filteredData[0][dataSettings.keyColumn]);\r\n    const tempData = wideToLongTransformation(\r\n      filteredData,\r\n      dataSettings.keyColumn,\r\n      readableHeader || [],\r\n      debugMode,\r\n    );\r\n    setData(tempData);\r\n  });\r\n\r\n  const updateFilteredDataEvent = useEffectEvent(() => {\r\n    if (data) {\r\n      const filteredDataTemp = data.filter(\r\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n        (item: any) => item[dataSettings.keyColumn] === selectedFilterValues,\r\n      );\r\n      setFilteredData(filteredDataTemp);\r\n    }\r\n  });\r\n\r\n  useEffect(() => {\r\n    updateFilteredDataEvent();\r\n  }, [selectedFilterValues, dataSettings.keyColumn]);\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                  undefined,\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                    undefined,\r\n                    dataSettings.dataTransformation,\r\n                    debugMode,\r\n                  )\r\n                : await fetchAndParseCSV(\r\n                    dataSettings.dataURL,\r\n                    dataSettings.dataTransformation,\r\n                    undefined,\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, undefined);\r\n        setUnformattedData(dataFromFile);\r\n        updateDataAndFilterValueEvent();\r\n      } catch (error) {\r\n        console.error('Data fetching error:', error);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [dataSettings, debugMode]);\r\n\r\n  useEffect(() => {\r\n    updateDataAndFilterValueEvent();\r\n  }, [dataFilters, readableHeader]);\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex grow`}\r\n      dir={\r\n        dashboardLayout.language === 'he' || dashboardLayout.language === 'ar' ? 'rtl' : undefined\r\n      }\r\n    >\r\n      <div\r\n        className={`${\r\n          !dashboardLayout?.backgroundColor\r\n            ? 'bg-transparent '\r\n            : dashboardLayout?.backgroundColor === true\r\n              ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n              : ''\r\n        }flex flex-col w-full ml-auto mr-auto grow gap-4 ${dashboardLayout?.language || 'en'}`}\r\n        style={{\r\n          ...(dashboardLayout?.backgroundColor && dashboardLayout?.backgroundColor !== true\r\n            ? { backgroundColor: dashboardLayout?.backgroundColor }\r\n            : {}),\r\n        }}\r\n        id={dashboardID}\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{\r\n            padding: dashboardLayout.backgroundColor\r\n              ? dashboardLayout.padding || '1rem'\r\n              : dashboardLayout.padding || 0,\r\n          }}\r\n        >\r\n          <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n            {dashboardLayout.title || dashboardLayout.description ? (\r\n              <GraphHeader\r\n                graphTitle={dashboardLayout.title}\r\n                graphDescription={dashboardLayout.description}\r\n                isDashboard\r\n              />\r\n            ) : null}\r\n            {filteredData ? (\r\n              <>\r\n                <div\r\n                  style={{\r\n                    display: 'flex',\r\n                    gap: '1rem',\r\n                    flexWrap: 'wrap',\r\n                    alignItems: 'flex-start',\r\n                    width: '100%',\r\n                  }}\r\n                >\r\n                  <div\r\n                    style={{\r\n                      width: '100%',\r\n                      flexGrow: 1,\r\n                      flexShrink: 0,\r\n                      minWidth: '240px',\r\n                    }}\r\n                  >\r\n                    {dashboardLayout.dropdownLabel ? (\r\n                      <Label className='mb-2'>{dashboardLayout.dropdownLabel}</Label>\r\n                    ) : null}\r\n                    <DropdownSelect\r\n                      options={filterValues.map(d => ({\r\n                        value: d,\r\n                        label: d,\r\n                      }))}\r\n                      size='sm'\r\n                      variant={uiMode}\r\n                      isClearable={false}\r\n                      isSearchable\r\n                      controlShouldRenderValue\r\n                      filterOption={createFilter(filterConfig)}\r\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n                      onChange={(el: any) => {\r\n                        setSelectedFilterValues(el?.value);\r\n                      }}\r\n                      defaultValue={{\r\n                        value: selectedFilterValues as string,\r\n                        label: selectedFilterValues as string,\r\n                      }}\r\n                    />\r\n                  </div>\r\n                </div>\r\n                {dashboardLayout.rows.map((d, i) => (\r\n                  <div\r\n                    key={i}\r\n                    style={{\r\n                      display: 'flex',\r\n                      gap: '1rem',\r\n                      alignItems: 'stretch',\r\n                      minHeight: `${d.height || 0}px`,\r\n                      height: 'auto',\r\n                      width: '100%',\r\n                      flexWrap: 'wrap',\r\n                    }}\r\n                  >\r\n                    {d.columns.map((el, j) => (\r\n                      <div\r\n                        key={j}\r\n                        className='flex bg-transparent grow min-w-60'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }% - ${\r\n                            (TotalWidth(d.columns) - (el.columnWidth || 1)) / TotalWidth(d.columns)\r\n                          }rem)`,\r\n                          minHeight: 'inherit',\r\n                        }}\r\n                      >\r\n                        <SingleGraphDashboard\r\n                          graphType={el.graphType}\r\n                          dataFilters={el.dataFilters}\r\n                          uiMode={uiMode}\r\n                          graphSettings={{\r\n                            ...(el.settings || {}),\r\n                            width: undefined,\r\n                            height: undefined,\r\n                            minHeight: undefined,\r\n                            relativeHeight: undefined,\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                            styles: el.settings?.styles || graphStyles,\r\n                            classNames: el.settings?.classNames || graphClassNames,\r\n                          }}\r\n                          dataSettings={{ data: filteredData }}\r\n                          graphDataConfiguration={\r\n                            el.graphDataConfiguration\r\n                              ? el.graphDataConfiguration\r\n                              : el.graphType === 'unitChart'\r\n                                ? [\r\n                                    {\r\n                                      columnId: 'indicator',\r\n                                      chartConfigId: 'label',\r\n                                    },\r\n                                    { columnId: 'value', chartConfigId: 'value' },\r\n                                  ]\r\n                                : [\r\n                                    {\r\n                                      columnId: 'indicator',\r\n                                      chartConfigId: 'label',\r\n                                    },\r\n                                    { columnId: 'value', chartConfigId: 'size' },\r\n                                  ]\r\n                          }\r\n                          debugMode={debugMode}\r\n                          readableHeader={readableHeader || []}\r\n                        />\r\n                      </div>\r\n                    ))}\r\n                  </div>\r\n                ))}\r\n              </>\r\n            ) : (\r\n              <div className='w-full flex justify-center p-4'>\r\n                <Spinner />\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["wideToLongTransformation","data","keyColumn","readableHeader","debugMode","transformedData","forEach","row","Object","entries","key","value","obj","indicator","findIndex","d","label","push","console","log","TotalWidth","columns","map","columnWidth","reduce","acc","cur","MultiGraphDashboardWideToLongFormat","props","dashboardID","dashboardLayout","dataSettings","theme","dataFilters","uiMode","graphStyles","graphClassNames","filterConfig","ignoreCase","ignoreAccents","trim","filteredData","setFilteredData","useState","undefined","filterValues","setFilterValues","selectedFilterValues","setSelectedFilterValues","setData","unformattedData","setUnformattedData","updateDataAndFilterValueEvent","useEffectEvent","filterData","el","tempData","updateFilteredDataEvent","filteredDataTemp","filter","item","useEffect","dataFromFile","dataURL","fileType","fetchAndParseJSON","dataTransformation","fetchAndTransformDataFromAPI","apiHeaders","fetchAndParseCSV","delimiter","fetchAndParseMultipleDataSources","idColumnTitle","transformColumnsToArray","error","fetchData","jsx","language","backgroundColor","padding","jsxs","title","description","GraphHeader","Fragment","display","gap","flexWrap","alignItems","width","flexGrow","flexShrink","minWidth","dropdownLabel","Label","DropdownSelect","createFilter","rows","i","minHeight","height","j","SingleGraphDashboard","graphType","settings","relativeHeight","radius","size","styles","classNames","graphDataConfiguration","columnId","chartConfigId","Spinner"],"mappings":"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"}

package/dist/MultiGraphDashboardWideToLongFormat.d.ts

@@ -29,6 +29,7 @@ declare interface ClassNameObject {
     mouseOverLine?: string;
     regLine?: string;
     dataCards?: string;
+    colorLegend?: string;
 }
 
 declare interface ColumnConfigurationDataType {