@undp/data-viz 1.2.8 → 1.3.0

package/dist/MultiGraphDashboardWideToLongFormat.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-BHm2KTjD-D8FylaKc.cjs"),n=require("react"),D=require("./DropdownSelect-CuzV7gdj.cjs"),L=require("./checkIfMultiple-D3h8to1T.cjs"),k=require("./Spinner-UmN-KPe9.cjs"),q=require("./SingleGraphDashboard.js"),f=require("./fetchAndParseData.js"),N=require("./GraphHeader.js"),W=require("./filterData-DN6py7y_.cjs"),A=require("./transformColumnsToArray.js");function M(d,l,t,e){const i=[];return d.forEach(u=>{Object.entries(u).forEach(([o,g])=>{if(o!==l){const c={indicator:t.findIndex(h=>h.value===o)!==-1?t[t.findIndex(h=>h.value===o)].label:o,value:g};c[l]=u[l],i.push(c)}})}),e&&console.log(i),i}const b=d=>d.map(e=>e.columnWidth||1).reduce((e,i)=>e+i,0);function $(d){const{dashboardID:l,dashboardLayout:t,dataSettings:e,debugMode:i,theme:u="light",readableHeader:o,dataFilters:g,uiMode:c="normal",graphStyles:h,graphClassNames:w}=d,S=n.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]),[y,E]=n.useState(void 0),[R,T]=n.useState([]),[m,v]=n.useState(void 0),[x,F]=n.useState(void 0);n.useEffect(()=>{if(x){const s=x.filter(p=>p[e.keyColumn]===m);E(s)}},[x,m,e.keyColumn]);const C=n.useCallback(async()=>{if(e)try{const p=await(e.dataURL?typeof e.dataURL=="string"?e.fileType==="json"?f.fetchAndParseJSON(e.dataURL,void 0,e.dataTransformation,i):e.fileType==="api"?f.fetchAndTransformDataFromAPI(e.dataURL,e.apiHeaders,void 0,e.dataTransformation,i):f.fetchAndParseCSV(e.dataURL,e.dataTransformation,void 0,i,e.delimiter,!0):f.fetchAndParseMultipleDataSources(e.dataURL,e.idColumnTitle):A.transformColumnsToArray(e.data,void 0)),a=W.filterData(p,g||[]);T(a.map(I=>I[e.keyColumn])),v(a[0][e.keyColumn]);const j=M(a,e.keyColumn,o||[],i);F(j)}catch(s){console.error("Data fetching error:",s)}},[e,i,g,o]);return n.useEffect(()=>{C()},[C]),r.jsxRuntimeExports.jsx("div",{className:`${u||"light"} flex grow`,dir:t.language==="he"||t.language==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:`${t?.backgroundColor?t?.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 ${t?.language||"en"}`,style:{...t?.backgroundColor&&t?.backgroundColor!==!0?{backgroundColor:t?.backgroundColor}:{}},id:l,children:r.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:t.backgroundColor?t.padding||"1rem":t.padding||0},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[t.title||t.description?r.jsxRuntimeExports.jsx(N.GraphHeader,{graphTitle:t.title,graphDescription:t.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:[t.dropdownLabel?r.jsxRuntimeExports.jsx(L.LabelExports.Label,{className:"mb-2",children:t.dropdownLabel}):null,r.jsxRuntimeExports.jsx(D.DropdownSelectExports.DropdownSelect,{options:R.map(s=>({value:s,label:s})),size:"sm",variant:c,isClearable:!1,isSearchable:!0,controlShouldRenderValue:!0,filterOption:D.DropdownSelectExports.createFilter(S),onChange:s=>{v(s?.value)},defaultValue:{value:m,label:m}})]})}),t.rows.map((s,p)=>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(q.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||t.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:o||[]})},j))},p))]}):r.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:r.jsxRuntimeExports.jsx(k.SpinnerExports.Spinner,{})})]})})})})}exports.MultiGraphDashboardWideToLongFormat=$;
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormat.js.map

package/dist/MultiGraphDashboardWideToLongFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGraphDashboardWideToLongFormat.js","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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"}

package/dist/MultiGraphDashboardWideToLongFormatFromConfig.d.ts

@@ -0,0 +1,133 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare interface ColumnConfigurationDataType {
+    column: string;
+    delimiter?: string;
+}
+
+declare interface ConfigObject {
+    validateDataAndSettings?: boolean;
+    dashboardID?: string;
+    dashboardLayout: DashboardFromWideToLongFormatLayoutDataType;
+    dataSettings: DataSettingsWideToLongDataType;
+    debugMode?: boolean;
+    theme?: 'dark' | 'light';
+    readableHeader?: {
+        value: string;
+        label: string;
+    }[];
+    dataFilters?: DataFilterDataType[];
+    uiMode?: 'light' | 'normal';
+    graphStyles?: StyleObject;
+    graphClassNames?: ClassNameObject;
+}
+
+declare type DashboardFromWideToLongFormatColumnDataType = {
+    graphType: 'donutChart' | 'barChart' | 'unitChart' | 'treeMap' | 'circlePacking';
+    columnWidth?: number;
+    dataFilters?: DataFilterDataType[];
+    settings?: any;
+    graphDataConfiguration?: GraphConfigurationDataType[];
+};
+
+declare type DashboardFromWideToLongFormatLayoutDataType = {
+    title?: string;
+    description?: string;
+    dropdownLabel?: string;
+    padding?: string;
+    backgroundColor?: string | boolean;
+    language?: Languages;
+    rows: {
+        columns: DashboardFromWideToLongFormatColumnDataType[];
+        height?: number;
+    }[];
+};
+
+declare interface DataFilterDataType {
+    column: string;
+    includeValues?: (string | number | boolean | null | undefined)[];
+    excludeValues?: (string | number | boolean | null | undefined)[];
+}
+
+declare interface DataSettingsWideToLongDataType {
+    dataURL?: string | FileSettingsDataType[];
+    fileType?: 'csv' | 'json' | 'api';
+    delimiter?: string;
+    data?: any;
+    keyColumn: string;
+    idColumnTitle?: string;
+    dataTransformation?: string;
+    apiHeaders?: any;
+}
+
+declare interface FileSettingsDataType {
+    dataURL: string;
+    idColumnName: string;
+    fileType?: 'csv' | 'json' | 'api';
+    delimiter?: string;
+    columnsToArray?: ColumnConfigurationDataType[];
+    apiHeaders?: any;
+    dataTransformation?: string;
+}
+
+declare interface GraphConfigurationDataType {
+    columnId: string | string[];
+    chartConfigId: string;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+export declare function MultiGraphDashboardWideToLongFormatFromConfig(props: Props): JSX.Element;
+
+declare interface Props {
+    config: string | ConfigObject;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+export { }

package/dist/MultiGraphDashboardWideToLongFormatFromConfig.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-BHm2KTjD-D8FylaKc.cjs"),o=require("react"),n=require("./Spinner-UmN-KPe9.cjs"),d=require("./MultiGraphDashboardWideToLongFormat.js"),u=require("./fetchAndParseData.js");function h(s){const{config:t}=s,[e,r]=o.useState(void 0);return o.useEffect(()=>{typeof t=="string"?u.fetchAndParseJSON(t).then(i=>{r(i)}):r(t)},[t]),e?a.jsxRuntimeExports.jsx(d.MultiGraphDashboardWideToLongFormat,{dashboardID:e.dashboardID,dashboardLayout:e.dashboardLayout,dataSettings:e.dataSettings,debugMode:e.debugMode,theme:e.theme,readableHeader:e.readableHeader,dataFilters:e.dataFilters,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.SpinnerExports.Spinner,{})})}exports.MultiGraphDashboardWideToLongFormatFromConfig=h;
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormatFromConfig.js.map

package/dist/MultiGraphDashboardWideToLongFormatFromConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiGraphDashboardWideToLongFormatFromConfig.js","sources":["../src/Components/Dashboard/MultiGraphDashboardWideToLongFormatFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboardWideToLongFormat } from './MultiGraphDashboardWideToLongFormat';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardFromWideToLongFormatLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsWideToLongDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  validateDataAndSettings?: boolean;\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\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardWideToLongFormatFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n\r\n  useEffect(() => {\r\n    if (typeof config === 'string') {\r\n      const fetchData = fetchAndParseJSON(config);\r\n      fetchData.then(d => {\r\n        setConfigSettings(d);\r\n      });\r\n    } else {\r\n      setConfigSettings(config);\r\n    }\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    <MultiGraphDashboardWideToLongFormat\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardWideToLongFormatFromConfig","props","config","configSettings","setConfigSettings","useState","useEffect","fetchAndParseJSON","d","jsx","MultiGraphDashboardWideToLongFormat","Spinner"],"mappings":"kRAmCO,SAASA,EAA8CC,EAAc,CAC1E,KAAM,CAAE,OAAAC,GAAWD,EACb,CAACE,EAAgBC,CAAiB,EAAIC,EAAAA,SAAmC,MAAS,EAYxF,OAVAC,EAAAA,UAAU,IAAM,CACV,OAAOJ,GAAW,SACFK,EAAAA,kBAAkBL,CAAM,EAChC,KAAKM,GAAK,CAClBJ,EAAkBI,CAAC,CACrB,CAAC,EAEDJ,EAAkBF,CAAM,CAE5B,EAAG,CAACA,CAAM,CAAC,EACNC,EAOHM,EAAAA,kBAAAA,IAACC,EAAAA,oCAAA,CACC,YAAaP,EAAe,YAC5B,gBAAiBA,EAAe,gBAChC,aAAcA,EAAe,aAC7B,UAAWA,EAAe,UAC1B,MAAOA,EAAe,MACtB,eAAgBA,EAAe,eAC/B,YAAaA,EAAe,YAC5B,OAAQA,EAAe,OACvB,YAAaA,EAAe,YAC5B,gBAAiBA,EAAe,eAAA,CAAA,0BAf/B,MAAA,CAAI,UAAU,iCACb,SAAAM,wBAACE,EAAAA,eAAAA,UAAQ,EACX,CAgBN"}

package/dist/MultiLineAltChart.d.ts

@@ -0,0 +1,244 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AnimateDataType {
+    duration: number;
+    once: boolean;
+    amount: 'some' | 'all' | number;
+}
+
+declare interface AnnotationSettingsDataType {
+    text: string;
+    maxWidth?: number;
+    xCoordinate?: number | string;
+    yCoordinate?: number | string;
+    xOffset?: number;
+    yOffset?: number;
+    align?: 'center' | 'left' | 'right';
+    color?: string;
+    fontWeight?: 'regular' | 'bold' | 'medium';
+    showConnector?: boolean | number;
+    connectorRadius?: number;
+    classNames?: {
+        connector?: string;
+        text?: string;
+    };
+    styles?: {
+        connector?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
+}
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
+
+declare interface CustomHighlightAreaSettingsDataType {
+    coordinates: (number | string)[];
+    closePath?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    color?: string;
+    strokeWidth?: number;
+}
+
+declare interface CustomLayerDataType {
+    position: 'before' | 'after';
+    layer: React.ReactNode;
+}
+
+declare interface HighlightAreaSettingsDataType {
+    coordinates: [number | string | null, number | string | null];
+    style?: React.CSSProperties;
+    className?: string;
+    color?: string;
+    strokeWidth?: number;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+export declare function MultiLineAltChart(props: Props): JSX.Element;
+
+declare interface MultiLineAltChartDataType {
+    label: number | string;
+    y: number | null;
+    color?: string | number;
+    date: string | number;
+    data?: object;
+}
+
+declare interface Props {
+    /** Array of data objects */
+    data: MultiLineAltChartDataType[];
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Color or array of colors for lines */
+    colors?: string | string[];
+    /** Domain of colors for the graph */
+    colorDomain?: (string | number)[];
+    /** Toggle the visibility of labels of the lines when highlighted or mouse hovered */
+    showLabels?: boolean;
+    /** Title for the color legend */
+    colorLegendTitle?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Left margin of the graph */
+    leftMargin?: number;
+    /** Right margin of the graph */
+    rightMargin?: number;
+    /** Top margin of the graph */
+    topMargin?: number;
+    /** Bottom margin of the graph */
+    bottomMargin?: number;
+    /** Prefix for values */
+    prefix?: string;
+    /** Suffix for values */
+    suffix?: string;
+    /** Maximum value for the chart */
+    maxValue?: number;
+    /** Minimum value for the chart */
+    minValue?: number;
+    /** Reference values for comparison */
+    refValues?: ReferenceDataType[];
+    /** Maximum value of the date for the chart */
+    maxDate?: string | number;
+    /** Minimum value of the date for the chart */
+    minDate?: string | number;
+    /** No. of ticks on the x-axis  */
+    noOfXTicks?: number;
+    /** No. of ticks on the y-axis  */
+    noOfYTicks?: number;
+    /** Toggle visibility of dots on the line */
+    showDots?: boolean;
+    /** Stroke width of the line */
+    strokeWidth?: number;
+    /** Toggle the initial animation of the line. If the type is number then it uses the number as the time in seconds for animation. */
+    animate?: boolean | AnimateDataType;
+    /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */
+    dateFormat?: string;
+    /** Title for the Y-axis */
+    yAxisTitle?: string;
+    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
+    showColorScale?: boolean;
+    /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */
+    showNAColor?: boolean;
+    /** Defines how “NA” values should be displayed/labelled in the graph */
+    naLabel?: string;
+    /** Data points to highlight. Use the label value from data to highlight the data point */
+    highlightedLines?: (string | number)[];
+    /** Defines the opacity of the non-highlighted data */
+    dimmedOpacity?: number;
+    /** Annotations on the chart */
+    annotations?: AnnotationSettingsDataType[];
+    /** Highlighted area(square) on the chart  */
+    highlightAreaSettings?: HighlightAreaSettingsDataType[];
+    /** Highlighted area(custom shape) on the chart  */
+    customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
+    /** Curve type for the line */
+    curveType?: CurveTypes;
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
+    customLayers?: CustomLayerDataType[];
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    /** Callback for mouse over event */
+    onSeriesMouseOver?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface ReferenceDataType {
+    value: number | null;
+    text: string;
+    color?: string;
+    styles?: {
+        line?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
+    classNames?: {
+        line?: string;
+        text?: string;
+    };
+}
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+export { }

package/dist/MultiLineAltChart.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-BHm2KTjD-D8FylaKc.cjs"),p=require("react"),de=require("./index-CZbIGs8q.cjs"),fe=require("./Typography-CDR-DAHH.cjs"),d=require("./parse-hMnG_lRV.cjs"),Ne=require("./index-BzeLQvXk.cjs"),Le=require("./numberFormattingFunction.js"),Se=require("./Tooltip-BM18N_3l.cjs"),m=require("./checkIfNullOrUndefined.js"),ke=require("./customArea-B47Ew5cT.cjs"),Me=require("./AxisTitle-BY8MI9jC.cjs"),Te=require("./Axis-BlyBRMNw.cjs"),Ue=require("./XTicksAndGridLines-DuK35ROS.cjs"),Ve=require("./ReferenceLine-Bsb5jeE4.cjs"),Fe=require("./YTicksAndGridLines-CtLvzExe.cjs"),He=require("./index-BYroABPm.cjs"),L=require("./Colors.js"),T=require("./use-in-view-Dl1CsAIo.cjs"),We=require("./time-Byw_jYQ7.cjs"),Ye=require("./linear-BVckp9RD.cjs"),Ge=require("./delaunay-rcy0HhZi.cjs"),Ie=require("./line-DHV4JwCR.cjs"),he=require("./step-BZ3C8QFW.cjs"),Be=require("./select-Bnfk0lJx.cjs"),Xe=require("./init-DU0ybBc_.cjs"),Pe=require("./pointer-Dkq5NV1q.cjs"),ze=require("./GraphFooter.js"),Ke=require("./GraphHeader.js"),Je=require("./EmptyState-BQguKAp5.cjs"),Qe=require("./ColorLegendWithMouseOver.js");function Ze(pe){const{data:s,width:I,height:J,lineColors:a,dateFormat:u,noOfXTicks:ge,rightMargin:_,topMargin:ye,bottomMargin:B,suffix:A,prefix:h,leftMargin:C,tooltip:ee,onSeriesMouseOver:U,refValues:Q,highlightAreaSettings:$,minValue:X,maxValue:te,highlightedLines:N,animate:n,rtl:ie,strokeWidth:k,showDots:P,annotations:je,customHighlightAreaSettings:be,yAxisTitle:oe,noOfYTicks:we,minDate:ne,maxDate:re,curveType:z,styles:w,colorDomain:v,selectedColor:V,classNames:g,showLabels:F,dimmedOpacity:R,precision:D,naLabel:ve,customLayers:se}=pe,ae=p.useRef(null),y=T.useInView(ae,{once:n.once,amount:n.amount}),[E,Oe]=p.useState(!1);p.useEffect(()=>{if(y&&!E){const e=setTimeout(()=>{Oe(!0)},(n.duration+.5)*1e3);return()=>clearTimeout(e)}},[y,E,n.duration]);const Ce=z==="linear"?Ie.curveLinear:z==="step"?he.curveStep:z==="stepAfter"?he.stepAfter:z==="stepBefore"?he.stepBefore:he.monotoneX,l=Ne.sortBy(s.map(e=>({...e,date:d.parse(`${e.date}`,u,new Date)})),"date").filter(e=>!m.checkIfNullOrUndefined(e.y)),Re=de.uniqBy(l,e=>e.label).map(e=>e.label),Z=de.uniqBy(Ne.sortBy(s.map(e=>({...e,date:d.parse(`${e.date}`,u,new Date)})),"date"),e=>e.date).map(e=>e.date),[f,j]=p.useState(void 0),[q,H]=p.useState(void 0),[le,W]=p.useState(void 0),O={top:ye,bottom:B,left:oe?C+30:C,right:_},Y=p.useRef(null),ce=Re.map(e=>Ne.sortBy(l.filter(o=>o.label==e),"date")),xe=$.map(e=>({...e,coordinates:[e.coordinates[0]===null?null:d.parse(`${e.coordinates[0]}`,u,new Date),e.coordinates[1]===null?null:d.parse(`${e.coordinates[1]}`,u,new Date)]})),ue=be.map(e=>({...e,coordinates:e.coordinates.map((o,x)=>x%2===0?d.parse(`${o}`,u,new Date):o)})),b=I-O.left-O.right,S=J-O.top-O.bottom,G=ne?d.parse(`${ne}`,u,new Date):Z[0],me=re?d.parse(`${re}`,u,new Date):Z[Z.length-1],i=m.checkIfNullOrUndefined(X)?Math.min(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e)))?Math.min(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e)))>0?0:Math.min(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e))):0:X,K=Math.max(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e)))?Math.max(...l.map(e=>e.y).filter(e=>!m.checkIfNullOrUndefined(e))):0,r=We.time().domain([G,me]).range([0,b]),c=Ye.linear().domain([m.checkIfNullOrUndefined(X)?i:X,m.checkIfNullOrUndefined(te)?K>0?K:0:te]).range([S,0]).nice(),$e=Ge.Delaunay.from(l.filter(e=>!m.checkIfNullOrUndefined(e.date)&&!m.checkIfNullOrUndefined(e.y)),e=>r(e.date),e=>c(e.y)).voronoi([0,0,b<0?0:b,S<0?0:S]),Ee=Ie.line().x(e=>r(e.date)).y(e=>c(e.y)).curve(Ce),De=c.ticks(we),qe=r.ticks(ge);return p.useEffect(()=>{const e=x=>{const M=l[Xe.bisectCenter(l.map(Ae=>Ae.date),r.invert(Pe.pointer(x)[0]),1)];j(M||l[l.length-1]),W(x.clientY),H(x.clientX),U?.(M||l[l.length-1])},o=()=>{j(void 0),H(void 0),W(void 0)};Be.select(Y.current).on("mousemove",e).on("mouseout",o),U?.(void 0)},[r,l,U]),t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(T.motion.svg,{width:`${I}px`,height:`${J}px`,viewBox:`0 0 ${I} ${J}`,direction:"ltr",ref:ae,children:t.jsxRuntimeExports.jsxs("g",{transform:`translate(${O.left},${O.top})`,children:[t.jsxRuntimeExports.jsx(He.HighlightArea,{areaSettings:xe,width:b,height:S,scale:r,animate:n,isInView:y}),t.jsxRuntimeExports.jsx(ke.CustomArea,{areaSettings:ue,scaleX:r,scaleY:c,animate:n,isInView:y}),t.jsxRuntimeExports.jsxs("g",{children:[t.jsxRuntimeExports.jsx(Fe.YTicksAndGridLines,{values:De.filter(e=>e!==0),y:De.filter(e=>e!==0).map(e=>c(e)),x1:0-C,x2:b+O.right,styles:{gridLines:w?.yAxis?.gridLines,labels:w?.yAxis?.labels},classNames:{gridLines:g?.yAxis?.gridLines,labels:g?.yAxis?.labels},suffix:A,prefix:h,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:D}),t.jsxRuntimeExports.jsx(Te.Axis,{y1:c(i<0?0:i),y2:c(i<0?0:i),x1:0-C,x2:b+O.right,label:Le.numberFormattingFunction(i<0?0:i,"NA",D,h,A),labelPos:{x:0-C,y:c(i<0?0:i),dx:0,dy:K<0?"1em":-5},classNames:{axis:g?.xAxis?.axis,label:g?.yAxis?.labels},styles:{axis:w?.xAxis?.axis,label:w?.yAxis?.labels}}),t.jsxRuntimeExports.jsx(Me.AxisTitle,{x:0-C-15,y:S/2,style:w?.yAxis?.title,className:g?.yAxis?.title,text:oe,rotate90:!0})]}),t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx(Ue.XTicksAndGridLines,{values:qe.map(e=>d.format(e,u)),x:qe.map(e=>r(e)),y1:0,y2:S,styles:{gridLines:w?.xAxis?.gridLines,labels:w?.xAxis?.labels},classNames:{gridLines:fe.cnExports.cn("opacity-0",g?.xAxis?.gridLines),labels:fe.cnExports.cn("fill-primary-gray-700 dark:fill-primary-gray-300 xs:max-[360px]:hidden text-[9px] md:text-[10px] lg:text-xs",g?.xAxis?.labels)},suffix:A,prefix:h,labelType:"primary",showGridLines:!0,precision:D})}),se.filter(e=>e.position==="before").map(e=>e.layer),t.jsxRuntimeExports.jsxs(T.motion.g,{children:[ce.map(e=>t.jsxRuntimeExports.jsxs(T.motion.g,{exit:{opacity:0,transition:{duration:n.duration}},variants:{initial:{opacity:f?e[0].label===f.label?1:R:V?e[0].color&&a[v.indexOf(e[0].color)]===V?1:R:N.length!==0?N.indexOf(e[0].label)!==-1?1:R:1},whileInView:{opacity:f?e[0].label===f.label?1:R:V?e[0].color&&a[v.indexOf(e[0].color)]===V?1:R:N.length!==0?N.indexOf(e[0].label)!==-1?1:R:1,transition:{duration:n.duration}}},initial:"initial",animate:y?"whileInView":"initial",children:[t.jsxRuntimeExports.jsx(T.motion.path,{d:Ee(e.filter(o=>!m.checkIfNullOrUndefined(o.y)))||"",style:{fill:"none",strokeWidth:f?e[0].label===f.label?k+Math.max(2,.5*k):k:N.length!==0&&N.indexOf(e[0].label)!==-1?k+Math.max(2,.5*k):k},exit:{opacity:0,transition:{duration:n.duration}},variants:{initial:{pathLength:0,d:Ee(e.filter(o=>!m.checkIfNullOrUndefined(o.y)))||"",opacity:1,stroke:s.filter(o=>o.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:L.Colors.gray},whileInView:{pathLength:1,d:Ee(e.filter(o=>!m.checkIfNullOrUndefined(o.y)))||"",opacity:1,stroke:s.filter(o=>o.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:L.Colors.gray,transition:{duration:n.duration}}},initial:"initial",animate:y?"whileInView":"initial"}),e.map((o,x)=>t.jsxRuntimeExports.jsx(T.motion.g,{children:m.checkIfNullOrUndefined(o.y)?null:t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:P?t.jsxRuntimeExports.jsx(T.motion.circle,{r:b/e.length<5?0:b/e.length<20?2:4,exit:{opacity:0,transition:{duration:n.duration}},variants:{initial:{opacity:0,fill:s.filter(M=>M.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:L.Colors.gray,cx:r(o.date),cy:c(o.y)},whileInView:{opacity:1,fill:s.filter(M=>M.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:L.Colors.gray,transition:{duration:E?n.duration:.5,delay:E?0:n.duration},cx:r(o.date),cy:c(o.y)}},initial:"initial",animate:y?"whileInView":"initial"}):null})},x)),(N.indexOf(e[0].label)!==-1||f?.label===e[0].label)&&F?t.jsxRuntimeExports.jsx(T.motion.text,{style:{fill:s.filter(o=>o.color).length===0?a[0]:e[0].color?a[v.indexOf(e[0].color)]:L.Colors.gray},className:"text-sm font-bold",dx:5,dy:4,exit:{opacity:0,transition:{duration:n.duration}},variants:{initial:{opacity:0,x:r(e[e.length-1].date),y:c(e[e.length-1].y)},whileInView:{opacity:1,x:r(e[e.length-1].date),y:c(e[e.length-1].y),transition:{duration:E?n.duration:.5,delay:E?0:n.duration}}},initial:"initial",animate:y?"whileInView":"initial",children:e[0].label}):null]},e[0].label)),f?t.jsxRuntimeExports.jsx("text",{y:c(f.y)-8,x:r(f.date),className:fe.cnExports.cn("graph-value text-sm font-bold",g?.graphObjectValues),style:{fill:s.filter(e=>e.color).length===0?a[0]:f.color?a[v.indexOf(f.color)]:L.Colors.gray,textAnchor:"middle",...w?.graphObjectValues||{}},children:Le.numberFormattingFunction(f.y,ve,D,h,A)}):null]}),l.filter(e=>!m.checkIfNullOrUndefined(e.y)).map((e,o)=>t.jsxRuntimeExports.jsx("g",{children:t.jsxRuntimeExports.jsx("path",{d:$e.renderCell(l.findIndex(x=>x.label===e.label&&x.date===e.date)),opacity:0,onMouseEnter:x=>{j(e),W(x.clientY),H(x.clientX),U?.(e)},onMouseMove:x=>{j(e),W(x.clientY),H(x.clientX)},onMouseLeave:()=>{j(void 0),H(void 0),W(void 0),U?.(void 0)}})},o)),Q?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:Q.map((e,o)=>t.jsxRuntimeExports.jsx(Ve.RefLineY,{text:e.text,color:e.color,y:c(e.value),x1:0-C,x2:b+O.right,classNames:e.classNames,styles:e.styles,animate:n,isInView:y},o))}):null,t.jsxRuntimeExports.jsx("g",{children:je.map((e,o)=>{const x=ke.getLineEndPoint({x:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0),y:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8},{x:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date)):0,y:e.yCoordinate?c(e.yCoordinate):0},m.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius),M=e.showConnector?{y1:x.y,x1:x.x,y2:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0):0+(e.yOffset||0),x2:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0),cy:e.yCoordinate?c(e.yCoordinate):0,cx:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date)):0,circleRadius:m.checkIfNullOrUndefined(e.connectorRadius)?3.5:e.connectorRadius,strokeWidth:e.showConnector===!0?2:Math.min(e.showConnector||0,1)}:void 0,Ae={y:e.yCoordinate?c(e.yCoordinate)+(e.yOffset||0)-8:0+(e.yOffset||0)-8,x:ie?0:e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0),width:ie?e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0):b-(e.xCoordinate?r(d.parse(`${e.xCoordinate}`,u,new Date))+(e.xOffset||0):0+(e.xOffset||0)),maxWidth:e.maxWidth,fontWeight:e.fontWeight,align:e.align};return t.jsxRuntimeExports.jsx(ke.Annotation,{color:e.color,connectorsSettings:M,labelSettings:Ae,text:e.text,classNames:e.classNames,styles:e.styles,animate:n,isInView:y},o)})}),se.filter(e=>e.position==="after").map(e=>e.layer)]})}),f&&ee&&q&&le?t.jsxRuntimeExports.jsx(Se.Tooltip,{data:f,body:ee,xPos:q,yPos:le,backgroundStyle:w?.tooltip,className:g?.tooltip}):null]})}function _e(pe){const{data:s,graphTitle:I,showNAColor:J=!0,colors:a,colorDomain:u,suffix:ge="",sources:_,prefix:ye="",graphDescription:B,height:A,width:h,footNote:C,noOfXTicks:ee=10,dateFormat:U="yyyy",padding:Q,backgroundColor:$=!1,leftMargin:X=30,rightMargin:te=50,topMargin:N=20,bottomMargin:n=25,showColorScale:ie=!0,tooltip:k,relativeHeight:P,onSeriesMouseOver:je,showLabels:be=!0,refValues:oe=[],highlightAreaSettings:we=[],graphID:ne,minValue:re,maxValue:z,highlightedLines:w=[],graphDownload:v=!1,dataDownload:V=!1,animate:g=!1,language:F="en",colorLegendTitle:R,minHeight:D=0,strokeWidth:ve=2,showDots:se=!0,annotations:ae=[],customHighlightAreaSettings:y=[],theme:E="light",ariaLabel:Oe,yAxisTitle:Ce,noOfYTicks:l=5,minDate:Re,maxDate:Z,curveType:f="curve",styles:j,classNames:q,dimmedOpacity:H=.3,precision:le=2,customLayers:W=[],naLabel:O="NA"}=pe,[Y,ce]=p.useState(0),[xe,ue]=p.useState(0),[b,S]=p.useState(void 0),G=p.useRef(null),me=p.useRef(null);return p.useEffect(()=>{const i=new ResizeObserver(K=>{ce(h||K[0].target.clientWidth||620),ue(A||K[0].target.clientHeight||480)});return G.current&&(ue(G.current.clientHeight||480),ce(G.current.clientWidth||620),h||i.observe(G.current)),()=>i.disconnect()},[h,A]),t.jsxRuntimeExports.jsx("div",{className:`${E||"light"} flex  ${h?"w-fit grow-0":"w-full grow"}`,dir:F==="he"||F==="ar"?"rtl":void 0,children:t.jsxRuntimeExports.jsx("div",{className:fe.cnExports.cn(`${$?$===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${F||"en"}`,q?.graphContainer),style:{...j?.graphContainer||{},...$&&$!==!0?{backgroundColor:$}:{}},id:ne,ref:me,"aria-label":Oe||`${I?`The graph shows ${I}. `:""}This is a multi-line chart that shows trends over time.${B?` ${B}`:""}`,children:t.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:$?Q||"1rem":Q||0},children:t.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[I||B||v||V?t.jsxRuntimeExports.jsx(Ke.GraphHeader,{styles:{title:j?.title,description:j?.description},classNames:{title:q?.title,description:q?.description},graphTitle:I,graphDescription:B,width:h,graphDownload:v?me.current:void 0,dataDownload:V?s.map(i=>i.data).filter(i=>i!==void 0).length>0?s.map(i=>i.data).filter(i=>i!==void 0):s.filter(i=>i!==void 0):null}):null,t.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:s.length===0?t.jsxRuntimeExports.jsx(Je.EmptyState,{}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[ie&&s.filter(i=>i.color).length!==0?t.jsxRuntimeExports.jsx(Qe.ColorLegendWithMouseOver,{width:h,colorLegendTitle:R,colors:a||L.Colors[E].categoricalColors.colors,colorDomain:u||de.uniqBy(s.filter(i=>i.color),"color").map(i=>i.color).filter(i=>i!==void 0),setSelectedColor:S,showNAColor:J}):null,t.jsxRuntimeExports.jsx("div",{className:"w-full grow leading-0",ref:G,"aria-label":"Graph area",children:(h||Y)&&(A||xe)?t.jsxRuntimeExports.jsx(Ze,{data:s,lineColors:s.filter(i=>i.color).length===0?a?[a]:[L.Colors.primaryColors["blue-600"]]:a||L.Colors[E].categoricalColors.colors,width:h||Y,height:Math.max(D,A||(P?D?(h||Y)*P>D?(h||Y)*P:D:(h||Y)*P:xe)),dateFormat:U,noOfXTicks:ee,leftMargin:X,rightMargin:te,topMargin:N,bottomMargin:n,tooltip:k,onSeriesMouseOver:je,suffix:ge,prefix:ye,highlightAreaSettings:we,refValues:oe,minValue:re,maxValue:z,highlightedLines:w,animate:g===!0?{duration:.5,once:!0,amount:.5}:g||{duration:0,once:!0,amount:0},rtl:F==="he"||F==="ar",strokeWidth:ve,showDots:se,annotations:ae,customHighlightAreaSettings:y,yAxisTitle:Ce,noOfYTicks:l,minDate:Re,maxDate:Z,curveType:f,styles:j,classNames:q,selectedColor:b,showLabels:be,colorDomain:s.filter(i=>i.color).length===0?[]:u||de.uniqBy(s.filter(i=>i.color),"color").map(i=>i.color),dimmedOpacity:H,precision:le,customLayers:W,naLabel:O}):null})]})}),_||C?t.jsxRuntimeExports.jsx(ze.GraphFooter,{styles:{footnote:j?.footnote,source:j?.source},classNames:{footnote:q?.footnote,source:q?.source},sources:_,footNote:C,width:h}):null]})})})})}exports.MultiLineAltChart=_e;
+//# sourceMappingURL=MultiLineAltChart.js.map