{"version":3,"file":"MultiGraphDashboardWideToLongFormat-uXY4uwcU.cjs","names":[],"sources":["../src/Utils/wideToLongTranformation.ts","../src/Components/Dashboard/MultiGraphDashboardWideToLongFormat.tsx"],"sourcesContent":["export function wideToLongTransformation(\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\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  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  const transformedData: any = [];\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  data.forEach((row: any) => {\r\n    Object.entries(row).forEach(([key, value]) => {\r\n      if (key !== keyColumn) {\r\n        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\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    // biome-ignore lint/suspicious/noConsole: This is for debug mode\r\n    console.log(transformedData);\r\n  }\r\n  return transformedData;\r\n}\r\n","import { 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\nimport { useEffect, useEffectEvent, useState } from 'react';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\n\r\nimport type {\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 { filterData } from '@/Utils/transformData/filterData';\r\nimport { transformColumnsToArray } from '@/Utils/transformData/transformColumnsToArray';\r\nimport { wideToLongTransformation } from '@/Utils/wideToLongTranformation';\r\nimport { SingleGraphDashboard } from './SingleGraphDashboard';\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  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\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  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\r\n  const [data, setData] = useState<any>(undefined);\r\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\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      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\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        // biome-ignore lint/suspicious/noExplicitAny: undefined data type\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-surface '\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                      // biome-ignore lint/suspicious/noExplicitAny: undefined data type\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                    // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\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                        // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\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"],"mappings":"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"}