@undp/data-viz 1.5.9 → 2.0.0

package/dist/MultiGraphDashboard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGraphDashboard.cjs","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.cjs","sources":["../src/Components/Dashboard/MultiGraphDashboard.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useState } from 'react';\r\nimport intersection from 'lodash.intersection';\r\nimport flattenDeep from 'lodash.flattendeep';\r\nimport { createFilter, DropdownSelect } from '@undp/design-system-react/DropdownSelect';\r\nimport { Label } from '@undp/design-system-react/Label';\r\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 h-inherit 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                      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","dataFromFile","dataURL","fileType","fetchAndParseJSON","columnsToArray","dataTransformation","fetchAndTransformDataFromAPI","apiHeaders","fetchAndParseCSV","delimiter","fetchAndParseMultipleDataSources","idColumnTitle","transformColumnsToArray","error","console","fetchData","handleFilterChange","values","prev","f","GraphContainer","backgroundColor","language","padding","title","description","jsx","GraphHeader","jsxs","i","flexGrow","flexShrink","minWidth","Label","DropdownSelect","createFilter","Fragment","rows","minHeight","height","j","SingleGraphDashboard","graphType","settings","resetSelectionOnDoubleClick","attachedFilter","styles","classNames","radius","size","filterData","indexOf","findIndex","dClicked","indx","dataTransform","dataSelectionOptions","advancedDataSelectionOptions","graphDataConfiguration"],"mappings":"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"}

package/dist/MultiGraphDashboard.d.ts

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

package/dist/MultiGraphDashboard.js

@@ -1,304 +1,136 @@
-import { j as l } from "./index-CHPV5EwG-DBWUSD9b.js";
-import { useState as g, useMemo as T, useEffect as V, useCallback as A } from "react";
-import { i as I } from "./index-V_JXij1_.js";
+import { j as l } from "./index-CHPV5EwG-Curnpaqc.js";
+import { useState as g, useEffectEvent as V, useEffect as b } from "react";
+import { i as E } from "./index-BuwmuDFJ.js";
 import { f as x } from "./index-EArKRVKg.js";
-import { Z as k, H as O } from "./DropdownSelect-6kjXM6oW.js";
-import { f as z } from "./checkIfMultiple-u2SmbiCf.js";
-import { SingleGraphDashboard as E } from "./SingleGraphDashboard.js";
-import { f as Z, a as q, b as J, c as B, t as K } from "./fetchAndParseData-sapWbnYk.js";
-import { g as Q } from "./getUniqValue-DiCh_MOD.js";
-import { GraphHeader as X } from "./GraphHeader.js";
-import { f as Y } from "./filterData-9nEcQ-Jp.js";
-import { t as W } from "./transformDataForSelect-D8AuvYdf.js";
-const b = (p) => p.map((t) => t.columnWidth || 1).reduce((t, d) => t + d, 0), _ = [
-  "barChart",
-  "choroplethMap",
-  "biVariateChoroplethMap",
-  "circlePacking",
-  "treeMap"
-];
-function he(p) {
+import { j as A, D as O } from "./DropdownSelect-BbdPQa2k.js";
+import { b as H } from "./checkIfMultiple-Y9iKaV_u.js";
+import { G as z } from "./GraphContainer-CRqzdKu2.js";
+import { SingleGraphDashboard as I } from "./SingleGraphDashboard.js";
+import { f as q, a as J, b as B, c as K, t as Q } from "./fetchAndParseData-BpqkBPQL.js";
+import { g as X } from "./getUniqValue-BKHCm3zE.js";
+import { GraphHeader as Y } from "./GraphHeader.js";
+import { f as Z } from "./filterData-DsAiFzKY.js";
+import { t as N } from "./transformDataForSelect-D8AuvYdf.js";
+const v = (m) => m.map((t) => t.columnWidth || 1).reduce((t, d) => t + d, 0), _ = ["barChart", "choroplethMap", "biVariateChoroplethMap", "circlePacking", "treeMap"];
+function ma(m) {
   const {
-    dashboardID: v,
+    dashboardID: S,
     dashboardLayout: i,
     dataSettings: t,
     filters: d,
     debugMode: c,
-    theme: y = "light",
+    theme: w = "light",
     readableHeader: M,
-    dataFilters: N,
-    noOfFiltersPerRow: m = 4,
-    filterPosition: S,
+    dataFilters: R,
+    noOfFiltersPerRow: p = 4,
+    filterPosition: y,
     uiMode: f = "normal",
-    graphStyles: $,
-    graphClassNames: H
-  } = p, [w, R] = g(void 0), [u, G] = g(void 0), [o, C] = g([]), D = T(
-    () => ({
-      ignoreCase: !0,
-      ignoreAccents: !0,
-      trim: !0
-    }),
-    []
-  ), j = T(() => !u || o.length === 0 ? u : u.filter(
-    (n) => o.every(
-      (e) => e.value && x([e.value]).length > 0 ? I(
-        x([n[e.filter]]),
-        x([e.value]).map((r) => r.value)
-      ).length > 0 : !0
-    )
-  ), [o, u]);
-  V(() => {
-    R(j);
-  }, [j]);
-  const F = A(async () => {
-    if (t)
+    graphStyles: W,
+    graphClassNames: k
+  } = m, [D, T] = g(void 0), [u, G] = g(void 0), [s, j] = g([]), F = {
+    ignoreCase: !0,
+    ignoreAccents: !0,
+    trim: !0
+  }, C = V(() => {
+    const e = (d || []).map((r) => ({
+      filter: r.column,
+      label: r.label || `Filter by ${r.column}`,
+      singleSelect: r.singleSelect,
+      clearable: r.clearable,
+      defaultValue: N(r.defaultValue),
+      value: N(r.defaultValue),
+      availableValues: X(u, r.column).filter((a) => !r.excludeValues?.includes(`${a}`)).map((a) => ({
+        value: a,
+        label: a
+      })),
+      allowSelectAll: r.allowSelectAll,
+      width: r.width
+    }));
+    j(e);
+  }), L = V(() => {
+    if (!u || s.length === 0) T(u);
+    else {
+      const e = u.filter((r) => s.every((a) => a.value && x([a.value]).length > 0 ? E(x([r[a.filter]]), x([a.value]).map((n) => n.value)).length > 0 : !0));
+      T(e);
+    }
+  });
+  b(() => {
+    L();
+  }, [s, u]), b(() => {
+    (async () => {
       try {
-        const n = await (t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? Z(
-          t.dataURL,
-          t.columnsToArray,
-          t.dataTransformation,
-          c
-        ) : t.fileType === "api" ? q(
-          t.dataURL,
-          t.apiHeaders,
-          t.columnsToArray,
-          t.dataTransformation,
-          c
-        ) : J(
-          t.dataURL,
-          t.dataTransformation,
-          t.columnsToArray,
-          c,
-          t.delimiter,
-          !0
-        ) : B(t.dataURL, t.idColumnTitle) : K(t.data, t.columnsToArray));
-        G(n);
-        const e = (d || []).map((r) => ({
-          filter: r.column,
-          label: r.label || `Filter by ${r.column}`,
-          singleSelect: r.singleSelect,
-          clearable: r.clearable,
-          defaultValue: W(r.defaultValue),
-          value: W(r.defaultValue),
-          availableValues: Q(n, r.column).filter((s) => !r.excludeValues?.includes(`${s}`)).map((s) => ({ value: s, label: s })),
-          allowSelectAll: r.allowSelectAll,
-          width: r.width
-        }));
-        C(e);
-      } catch (a) {
-        console.error("Data fetching error:", a);
+        const r = t.dataURL ? typeof t.dataURL == "string" ? t.fileType === "json" ? await q(t.dataURL, t.columnsToArray, t.dataTransformation, c) : t.fileType === "api" ? await J(t.dataURL, t.apiHeaders, t.columnsToArray, t.dataTransformation, c) : await B(t.dataURL, t.dataTransformation, t.columnsToArray, c, t.delimiter, !0) : await K(t.dataURL, t.idColumnTitle) : await Q(t.data, t.columnsToArray);
+        G(r);
+      } catch (r) {
+        console.error("Data fetching error:", r);
       }
-  }, [t, d, c]);
-  V(() => {
-    F();
-  }, [F]);
-  const h = A((a, n) => {
-    C((e) => e.map((r) => r.filter === a ? { ...r, value: n } : r));
-  }, []);
-  return /* @__PURE__ */ l.jsx(
-    "div",
-    {
-      className: `${y || "light"} flex grow`,
-      dir: i.language === "he" || i.language === "ar" ? "rtl" : void 0,
-      children: /* @__PURE__ */ l.jsx(
-        "div",
-        {
-          className: `${i.backgroundColor ? i.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}ml-auto mr-auto gap-4 flex flex-col w-full grow h-inherit ${i.language || "en"}`,
-          style: {
-            ...i.backgroundColor && i.backgroundColor !== !0 ? { backgroundColor: i.backgroundColor } : {}
-          },
-          id: v,
-          children: /* @__PURE__ */ l.jsx(
-            "div",
-            {
-              style: {
-                padding: i.backgroundColor ? i.padding || "1rem" : i.padding || 0,
-                flexGrow: 1,
-                display: "flex"
-              },
-              children: /* @__PURE__ */ l.jsxs("div", { className: "flex flex-col w-full gap-4 grow justify-between", children: [
-                i.title || i.description ? /* @__PURE__ */ l.jsx(
-                  X,
-                  {
-                    graphTitle: i.title,
-                    graphDescription: i.description,
-                    isDashboard: !0
-                  }
-                ) : null,
-                /* @__PURE__ */ l.jsxs("div", { style: { display: "flex", gap: "1rem", flexWrap: "wrap" }, children: [
-                  o.length !== 0 ? /* @__PURE__ */ l.jsx(
-                    "div",
-                    {
-                      style: {
-                        width: S === "side" ? "280px" : "100%",
-                        flexGrow: 1,
-                        flexShrink: 0
-                      },
-                      children: /* @__PURE__ */ l.jsx(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            gap: "1rem",
-                            flexWrap: "wrap",
-                            alignItems: "flex-start",
-                            width: "100%",
-                            position: "sticky",
-                            top: "1rem"
-                          },
-                          children: o?.map((a, n) => /* @__PURE__ */ l.jsxs(
-                            "div",
-                            {
-                              style: {
-                                width: a.width || `calc(${100 / m}% - ${(m - 1) / m}rem)`,
-                                flexGrow: 1,
-                                flexShrink: 0,
-                                minWidth: "240px"
-                              },
-                              children: [
-                                /* @__PURE__ */ l.jsx(z, { className: "mb-2", children: a.label }),
-                                a.singleSelect ? /* @__PURE__ */ l.jsx(
-                                  k,
-                                  {
-                                    options: a.availableValues,
-                                    isClearable: a.clearable === void 0 ? !0 : a.clearable,
-                                    size: "sm",
-                                    variant: f,
-                                    isMulti: !1,
-                                    isSearchable: !0,
-                                    filterOption: O(D),
-                                    onChange: (e) => {
-                                      h(a.filter, e);
-                                    },
-                                    defaultValue: a.defaultValue,
-                                    value: a.value
-                                  }
-                                ) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
-                                  /* @__PURE__ */ l.jsx(
-                                    k,
-                                    {
-                                      options: a.availableValues,
-                                      isMulti: !0,
-                                      size: "sm",
-                                      isClearable: a.clearable === void 0 ? !0 : a.clearable,
-                                      variant: f,
-                                      isSearchable: !0,
-                                      controlShouldRenderValue: !0,
-                                      closeMenuOnSelect: !1,
-                                      hideSelectedOptions: !1,
-                                      filterOption: O(D),
-                                      onChange: (e) => {
-                                        h(a.filter, e);
-                                      },
-                                      value: a.value,
-                                      defaultValue: a.defaultValue
-                                    }
-                                  ),
-                                  a.allowSelectAll ? /* @__PURE__ */ l.jsx(
-                                    "button",
-                                    {
-                                      type: "button",
-                                      className: "bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400",
-                                      onClick: () => {
-                                        h(a.filter, a.availableValues);
-                                      },
-                                      children: "Select all options"
-                                    }
-                                  ) : null
-                                ] })
-                              ]
-                            },
-                            n
-                          ))
-                        }
-                      )
-                    }
-                  ) : null,
-                  /* @__PURE__ */ l.jsx(
-                    "div",
-                    {
-                      style: {
-                        width: S === "side" ? "calc(100% - 280px - 1rem)" : "100%",
-                        minWidth: "280px",
-                        flexGrow: 1,
-                        display: "flex",
-                        gap: "1rem",
-                        flexWrap: "wrap",
-                        flexShrink: "0"
-                      },
-                      children: i.rows.map((a, n) => /* @__PURE__ */ l.jsx(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            gap: "1rem",
-                            alignItems: "stretch",
-                            minHeight: `${a.height || 0}px`,
-                            height: "auto",
-                            width: "100%",
-                            flexWrap: "wrap"
-                          },
-                          children: a.columns.map((e, r) => /* @__PURE__ */ l.jsx(
-                            "div",
-                            {
-                              className: "flex bg-transparent h-inherit grow min-w-60",
-                              style: {
-                                width: `calc(${100 * (e.columnWidth || 1) / b(a.columns)}% - ${(b(a.columns) - (e.columnWidth || 1)) / b(a.columns)}rem)`,
-                                minHeight: "inherit"
-                              },
-                              children: /* @__PURE__ */ l.jsx(
-                                E,
-                                {
-                                  graphType: e.graphType,
-                                  dataFilters: e.dataFilters,
-                                  uiMode: f,
-                                  graphSettings: {
-                                    ...e.settings || {},
-                                    width: void 0,
-                                    height: void 0,
-                                    resetSelectionOnDoubleClick: e.attachedFilter ? !1 : e.settings?.resetSelectionOnDoubleClick,
-                                    styles: e.settings?.styles || $,
-                                    classNames: e.settings?.classNames || H,
-                                    radius: e.graphType === "donutChart" ? void 0 : e.settings?.radius,
-                                    size: e.graphType === "unitChart" ? e.settings?.size : void 0,
-                                    language: e.settings?.language || i.language,
-                                    theme: e.settings?.theme || y
-                                  },
-                                  dataSettings: {
-                                    data: w ? Y(w, N || []) : void 0
-                                  },
-                                  updateFilters: e.attachedFilter && _.indexOf(e.graphType) !== -1 && o.findIndex((s) => s.filter === e.attachedFilter) !== -1 ? (s) => {
-                                    const L = o.findIndex(
-                                      (U) => U.filter === e.attachedFilter
-                                    ), P = s ? o[L].singleSelect ? { value: s, label: s } : [{ value: s, label: s }] : void 0;
-                                    h(e.attachedFilter, P);
-                                  } : void 0,
-                                  dataTransform: e.dataTransform,
-                                  dataSelectionOptions: e.dataSelectionOptions,
-                                  advancedDataSelectionOptions: e.advancedDataSelectionOptions,
-                                  graphDataConfiguration: e.graphDataConfiguration,
-                                  debugMode: c,
-                                  readableHeader: M || []
-                                }
-                              )
-                            },
-                            r
-                          ))
-                        },
-                        n
-                      ))
-                    }
-                  )
-                ] })
-              ] })
-            }
-          )
-        }
-      )
-    }
-  );
+    })(), C();
+  }, [t, c]), b(() => {
+    C();
+  }, [d]);
+  const h = (e, r) => {
+    j((a) => a.map((n) => n.filter === e ? {
+      ...n,
+      value: r
+    } : n));
+  };
+  return /* @__PURE__ */ l.jsxs(z, { id: S, "aria-label": "This is a dashboard", backgroundColor: i.backgroundColor ?? !1, theme: w || "light", language: i.language || "en", padding: i.padding, children: [
+    i.title || i.description ? /* @__PURE__ */ l.jsx(Y, { graphTitle: i.title, graphDescription: i.description, isDashboard: !0 }) : null,
+    /* @__PURE__ */ l.jsxs("div", { className: "flex gap-4 flex-wrap", children: [
+      s.length !== 0 ? /* @__PURE__ */ l.jsx("div", { className: "flex-grow flex-shrink-0", style: {
+        width: y === "side" ? "280px" : "100%"
+      }, children: /* @__PURE__ */ l.jsx("div", { className: "flex flex-wrap items-start gap-4 w-full sticky top-4", children: s?.map((e, r) => /* @__PURE__ */ l.jsxs("div", { style: {
+        width: e.width || `calc(${100 / p}% - ${(p - 1) / p}rem)`,
+        flexGrow: 1,
+        flexShrink: 0,
+        minWidth: "240px"
+      }, children: [
+        /* @__PURE__ */ l.jsx(H, { className: "mb-2", children: e.label }),
+        e.singleSelect ? /* @__PURE__ */ l.jsx(A, { options: e.availableValues, isClearable: e.clearable === void 0 ? !0 : e.clearable, size: "sm", variant: f, isMulti: !1, isSearchable: !0, filterOption: O(F), onChange: (a) => {
+          h(e.filter, a);
+        }, defaultValue: e.defaultValue, value: e.value }) : /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+          /* @__PURE__ */ l.jsx(A, { options: e.availableValues, isMulti: !0, size: "sm", isClearable: e.clearable === void 0 ? !0 : e.clearable, variant: f, isSearchable: !0, controlShouldRenderValue: !0, closeMenuOnSelect: !1, hideSelectedOptions: !1, filterOption: O(F), onChange: (a) => {
+            h(e.filter, a);
+          }, value: e.value, defaultValue: e.defaultValue }),
+          e.allowSelectAll ? /* @__PURE__ */ l.jsx("button", { type: "button", className: "bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400", onClick: () => {
+            h(e.filter, e.availableValues);
+          }, children: "Select all options" }) : null
+        ] })
+      ] }, r)) }) }) : null,
+      /* @__PURE__ */ l.jsx("div", { className: "flex flex-wrap gap-4 flex-grow flex-shrink-0 min-w-[280px]", style: {
+        width: y === "side" ? "calc(100% - 280px - 1rem)" : "100%"
+      }, children: i.rows.map((e, r) => /* @__PURE__ */ l.jsx("div", { className: "flex flex-wrap items-stretch gap-4 w-full h-auto", style: {
+        minHeight: `${e.height || 0}px`
+      }, children: e.columns.map((a, n) => /* @__PURE__ */ l.jsx("div", { className: "flex bg-transparent h-inherit grow min-w-60", style: {
+        width: `calc(${100 * (a.columnWidth || 1) / v(e.columns)}% - ${(v(e.columns) - (a.columnWidth || 1)) / v(e.columns)}rem)`,
+        minHeight: "inherit"
+      }, children: /* @__PURE__ */ l.jsx(I, { graphType: a.graphType, dataFilters: a.dataFilters, uiMode: f, graphSettings: {
+        ...a.settings || {},
+        width: void 0,
+        height: void 0,
+        resetSelectionOnDoubleClick: a.attachedFilter ? !1 : a.settings?.resetSelectionOnDoubleClick,
+        styles: a.settings?.styles || W,
+        classNames: a.settings?.classNames || k,
+        radius: a.graphType === "donutChart" ? void 0 : a.settings?.radius,
+        size: a.graphType === "unitChart" ? a.settings?.size : void 0,
+        language: a.settings?.language || i.language,
+        theme: a.settings?.theme || w
+      }, dataSettings: {
+        data: D ? Z(D, R || []) : void 0
+      }, updateFilters: a.attachedFilter && _.indexOf(a.graphType) !== -1 && s.findIndex((o) => o.filter === a.attachedFilter) !== -1 ? (o) => {
+        const P = s.findIndex(($) => $.filter === a.attachedFilter), U = o ? s[P].singleSelect ? {
+          value: o,
+          label: o
+        } : [{
+          value: o,
+          label: o
+        }] : void 0;
+        h(a.attachedFilter, U);
+      } : void 0, dataTransform: a.dataTransform, dataSelectionOptions: a.dataSelectionOptions, advancedDataSelectionOptions: a.advancedDataSelectionOptions, graphDataConfiguration: a.graphDataConfiguration, debugMode: c, readableHeader: M || [] }) }, n)) }, r)) })
+    ] })
+  ] });
 }
 export {
-  he as MultiGraphDashboard
+  ma as MultiGraphDashboard
 };
 //# sourceMappingURL=MultiGraphDashboard.js.map