@undp/data-viz 2.6.0 → 2.6.1

package/dist/MultiGraphDashboardFromConfig.js

@@ -1,29 +1,36 @@
-import { c as h, j as d } from "./compiler-runtime-qHgugrLy.js";
-import { useState as m, useEffect as g } from "react";
-import { Spinner as u } from "@undp/design-system-react/Spinner";
-import { MultiGraphDashboard as c } from "./MultiGraphDashboard.js";
-import { b as p } from "./fetchAndParseData-CDjQZ1fL.js";
-function P(n) {
-  const t = h.c(18), {
-    config: a
-  } = n, [e, l] = m(void 0);
-  let r, o;
-  if (t[0] !== a ? (r = () => {
-    (async () => {
-      if (typeof a == "string") {
-        const f = await p(a);
-        l(f);
-      } else
-        l(a);
-    })();
-  }, o = [a], t[0] = a, t[1] = r, t[2] = o) : (r = t[1], o = t[2]), g(r, o), !e) {
-    let s;
-    return t[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ d.jsx("div", { className: "w-full flex justify-center p-4", children: /* @__PURE__ */ d.jsx(u, {}) }), t[3] = s) : s = t[3], s;
-  }
-  let i;
-  return t[4] !== e.dashboardID || t[5] !== e.dashboardLayout || t[6] !== e.dataFilters || t[7] !== e.dataSettings || t[8] !== e.debugMode || t[9] !== e.filterPosition || t[10] !== e.filters || t[11] !== e.graphClassNames || t[12] !== e.graphStyles || t[13] !== e.noOfFiltersPerRow || t[14] !== e.readableHeader || t[15] !== e.theme || t[16] !== e.uiMode ? (i = /* @__PURE__ */ d.jsx(c, { dashboardID: e.dashboardID, dashboardLayout: e.dashboardLayout, dataSettings: e.dataSettings, filters: e.filters, debugMode: e.debugMode, theme: e.theme, readableHeader: e.readableHeader, dataFilters: e.dataFilters, noOfFiltersPerRow: e.noOfFiltersPerRow, filterPosition: e.filterPosition, uiMode: e.uiMode, graphStyles: e.graphStyles, graphClassNames: e.graphClassNames }), t[4] = e.dashboardID, t[5] = e.dashboardLayout, t[6] = e.dataFilters, t[7] = e.dataSettings, t[8] = e.debugMode, t[9] = e.filterPosition, t[10] = e.filters, t[11] = e.graphClassNames, t[12] = e.graphStyles, t[13] = e.noOfFiltersPerRow, t[14] = e.readableHeader, t[15] = e.theme, t[16] = e.uiMode, t[17] = i) : i = t[17], i;
+import { t as e } from "./jsx-runtime-C76bEyh7.js";
+import { r as t } from "./fetchAndParseData-C50SqMPu.js";
+import { MultiGraphDashboard as n } from "./MultiGraphDashboard.js";
+import { useEffect as r, useState as i } from "react";
+import { Spinner as a } from "@undp/design-system-react/Spinner";
+//#region src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx
+var o = e();
+function s(e) {
+	let { config: s } = e, [c, l] = i(void 0);
+	return r(() => {
+		(async () => {
+			l(typeof s == "string" ? await t(s) : s);
+		})();
+	}, [s]), c ? /* @__PURE__ */ (0, o.jsx)(n, {
+		dashboardID: c.dashboardID,
+		dashboardLayout: c.dashboardLayout,
+		dataSettings: c.dataSettings,
+		filters: c.filters,
+		debugMode: c.debugMode,
+		theme: c.theme,
+		readableHeader: c.readableHeader,
+		dataFilters: c.dataFilters,
+		noOfFiltersPerRow: c.noOfFiltersPerRow,
+		filterPosition: c.filterPosition,
+		uiMode: c.uiMode,
+		graphStyles: c.graphStyles,
+		graphClassNames: c.graphClassNames
+	}) : /* @__PURE__ */ (0, o.jsx)("div", {
+		className: "w-full flex justify-center p-4",
+		children: /* @__PURE__ */ (0, o.jsx)(a, {})
+	});
 }
-export {
-  P as MultiGraphDashboardFromConfig
-};
-//# sourceMappingURL=MultiGraphDashboardFromConfig.js.map
+//#endregion
+export { s as MultiGraphDashboardFromConfig };
+
+//# sourceMappingURL=MultiGraphDashboardFromConfig.js.map

package/dist/MultiGraphDashboardFromConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGraphDashboardFromConfig.js","sources":["../src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Spinner } from '@undp/design-system-react/Spinner';\r\n\r\nimport { MultiGraphDashboard } from './MultiGraphDashboard';\r\n\r\nimport {\r\n  ClassNameObject,\r\n  DashboardLayoutDataType,\r\n  DataFilterDataType,\r\n  DataSettingsDataType,\r\n  FilterUiSettingsDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\r\n\r\ninterface ConfigObject {\r\n  dashboardID?: string;\r\n  dashboardLayout: DashboardLayoutDataType;\r\n  dataSettings: DataSettingsDataType;\r\n  filters?: FilterUiSettingsDataType[];\r\n  noOfFiltersPerRow?: number;\r\n  filterPosition?: 'top' | 'side';\r\n  debugMode?: boolean;\r\n  theme?: 'dark' | 'light';\r\n  readableHeader?: {\r\n    value: string;\r\n    label: string;\r\n  }[];\r\n  dataFilters?: DataFilterDataType[];\r\n  uiMode?: 'light' | 'normal';\r\n  graphStyles?: StyleObject;\r\n  graphClassNames?: ClassNameObject;\r\n}\r\n\r\ninterface Props {\r\n  config: string | ConfigObject;\r\n}\r\n\r\nexport function MultiGraphDashboardFromConfig(props: Props) {\r\n  const { config } = props;\r\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\r\n  useEffect(() => {\r\n    const fetchData = async () => {\r\n      if (typeof config === 'string') {\r\n        const data = await fetchAndParseJSON(config);\r\n        setConfigSettings(data);\r\n      } else {\r\n        setConfigSettings(config);\r\n      }\r\n    };\r\n    fetchData();\r\n  }, [config]);\r\n  if (!configSettings)\r\n    return (\r\n      <div className='w-full flex justify-center p-4'>\r\n        <Spinner />\r\n      </div>\r\n    );\r\n  return (\r\n    <MultiGraphDashboard\r\n      dashboardID={configSettings.dashboardID}\r\n      dashboardLayout={configSettings.dashboardLayout}\r\n      dataSettings={configSettings.dataSettings}\r\n      filters={configSettings.filters}\r\n      debugMode={configSettings.debugMode}\r\n      theme={configSettings.theme}\r\n      readableHeader={configSettings.readableHeader}\r\n      dataFilters={configSettings.dataFilters}\r\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\r\n      filterPosition={configSettings.filterPosition}\r\n      uiMode={configSettings.uiMode}\r\n      graphStyles={configSettings.graphStyles}\r\n      graphClassNames={configSettings.graphClassNames}\r\n    />\r\n  );\r\n}\r\n"],"names":["MultiGraphDashboardFromConfig","props","$","_c","config","configSettings","setConfigSettings","useState","undefined","t0","t1","fetchData","data","fetchAndParseJSON","useEffect","t2","Symbol","for","jsx","Spinner","dashboardID","dashboardLayout","dataFilters","dataSettings","debugMode","filterPosition","filters","graphClassNames","graphStyles","noOfFiltersPerRow","readableHeader","theme","uiMode","MultiGraphDashboard"],"mappings":";;;;;AAsCO,SAAAA,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAAA,EAAA,EAAA,GACL;AAAA,IAAAC,QAAAA;AAAAA,EAAAA,IAAmBH,GACnB,CAAAI,GAAAC,CAAA,IAA4CC,EAAmCC,MAAS;AAAE,MAAAC,GAAAC;AAY1F,MAZ0FR,SAAAE,KAChFK,IAAAA,MAAA;AASRE,KARkB,YAAA;AAChB,UAAI,OAAOP,KAAW,UAAQ;AAC5B,cAAAQ,IAAa,MAAMC,EAAkBT,CAAM;AAC3CE,QAAAA,EAAkBM,CAAI;AAAA,MAAC;AAEvBN,QAAAA,EAAkBF,CAAM;AAAA,IACzB,GAEHO;AAAAA,EAAW,GACVD,IAAA,CAACN,CAAM,GAACF,OAAAE,GAAAF,OAAAO,GAAAP,OAAAQ,MAAAD,IAAAP,EAAA,CAAA,GAAAQ,IAAAR,EAAA,CAAA,IAVXY,EAAUL,GAUPC,CAAQ,GACP,CAACL,GAAc;AAAA,QAAAU;AAAA,WAAAb,EAAA,CAAA,MAAAc,uBAAAC,IAAA,2BAAA,KAEfF,IAAAG,gBAAAA,EAAAA,IAAA,OAAA,EAAe,WAAA,kCACb,UAAAA,gBAAAA,MAACC,KAAO,GACV,GAAMjB,OAAAa,KAAAA,IAAAb,EAAA,CAAA,GAFNa;AAAAA,EAEM;AACN,MAAAA;AAAA,SAAAb,EAAA,CAAA,MAAAG,EAAAe,eAAAlB,EAAA,CAAA,MAAAG,EAAAgB,mBAAAnB,EAAA,CAAA,MAAAG,EAAAiB,eAAApB,EAAA,CAAA,MAAAG,EAAAkB,gBAAArB,SAAAG,EAAAmB,aAAAtB,EAAA,CAAA,MAAAG,EAAAoB,kBAAAvB,EAAA,EAAA,MAAAG,EAAAqB,WAAAxB,EAAA,EAAA,MAAAG,EAAAsB,mBAAAzB,EAAA,EAAA,MAAAG,EAAAuB,eAAA1B,UAAAG,EAAAwB,qBAAA3B,EAAA,EAAA,MAAAG,EAAAyB,kBAAA5B,EAAA,EAAA,MAAAG,EAAA0B,SAAA7B,EAAA,EAAA,MAAAG,EAAA2B,UAEFjB,0BAACkB,GAAA,EACc,aAAA5B,EAAce,aACV,iBAAAf,EAAcgB,iBACjB,cAAAhB,EAAckB,cACnB,SAAAlB,EAAcqB,SACZ,WAAArB,EAAcmB,WAClB,OAAAnB,EAAc0B,OACL,gBAAA1B,EAAcyB,gBACjB,aAAAzB,EAAciB,aACR,mBAAAjB,EAAcwB,mBACjB,gBAAAxB,EAAcoB,gBACtB,QAAApB,EAAc2B,QACT,aAAA3B,EAAcuB,aACV,iBAAAvB,EAAcsB,iBAAgB,GAC/CzB,EAAA,CAAA,IAAAG,EAAAe,aAAAlB,EAAA,CAAA,IAAAG,EAAAgB,iBAAAnB,EAAA,CAAA,IAAAG,EAAAiB,aAAApB,EAAA,CAAA,IAAAG,EAAAkB,cAAArB,EAAA,CAAA,IAAAG,EAAAmB,WAAAtB,EAAA,CAAA,IAAAG,EAAAoB,gBAAAvB,EAAA,EAAA,IAAAG,EAAAqB,SAAAxB,EAAA,EAAA,IAAAG,EAAAsB,iBAAAzB,EAAA,EAAA,IAAAG,EAAAuB,aAAA1B,EAAA,EAAA,IAAAG,EAAAwB,mBAAA3B,EAAA,EAAA,IAAAG,EAAAyB,gBAAA5B,EAAA,EAAA,IAAAG,EAAA0B,OAAA7B,EAAA,EAAA,IAAAG,EAAA2B,QAAA9B,QAAAa,KAAAA,IAAAb,EAAA,EAAA,GAdFa;AAcE;"}
+{"version":3,"file":"MultiGraphDashboardFromConfig.js","names":[],"sources":["../src/Components/Dashboard/MultiGraphDashboardFromConfig.tsx"],"sourcesContent":["import { Spinner } from '@undp/design-system-react/Spinner';\nimport { useEffect, useState } from 'react';\nimport type {\n  ClassNameObject,\n  DashboardLayoutDataType,\n  DataFilterDataType,\n  DataSettingsDataType,\n  FilterUiSettingsDataType,\n  StyleObject,\n} from '@/Types';\nimport { fetchAndParseJSON } from '@/Utils/fetchAndParseData';\nimport { MultiGraphDashboard } from './MultiGraphDashboard';\n\ninterface ConfigObject {\n  dashboardID?: string;\n  dashboardLayout: DashboardLayoutDataType;\n  dataSettings: DataSettingsDataType;\n  filters?: FilterUiSettingsDataType[];\n  noOfFiltersPerRow?: number;\n  filterPosition?: 'top' | 'side';\n  debugMode?: boolean;\n  theme?: 'dark' | 'light';\n  readableHeader?: {\n    value: string;\n    label: string;\n  }[];\n  dataFilters?: DataFilterDataType[];\n  uiMode?: 'light' | 'normal';\n  graphStyles?: StyleObject;\n  graphClassNames?: ClassNameObject;\n}\n\ninterface Props {\n  config: string | ConfigObject;\n}\n\nexport function MultiGraphDashboardFromConfig(props: Props) {\n  const { config } = props;\n  const [configSettings, setConfigSettings] = useState<ConfigObject | undefined>(undefined);\n  useEffect(() => {\n    const fetchData = async () => {\n      if (typeof config === 'string') {\n        const data = await fetchAndParseJSON(config);\n        setConfigSettings(data);\n      } else {\n        setConfigSettings(config);\n      }\n    };\n    fetchData();\n  }, [config]);\n  if (!configSettings)\n    return (\n      <div className='w-full flex justify-center p-4'>\n        <Spinner />\n      </div>\n    );\n  return (\n    <MultiGraphDashboard\n      dashboardID={configSettings.dashboardID}\n      dashboardLayout={configSettings.dashboardLayout}\n      dataSettings={configSettings.dataSettings}\n      filters={configSettings.filters}\n      debugMode={configSettings.debugMode}\n      theme={configSettings.theme}\n      readableHeader={configSettings.readableHeader}\n      dataFilters={configSettings.dataFilters}\n      noOfFiltersPerRow={configSettings.noOfFiltersPerRow}\n      filterPosition={configSettings.filterPosition}\n      uiMode={configSettings.uiMode}\n      graphStyles={configSettings.graphStyles}\n      graphClassNames={configSettings.graphClassNames}\n    />\n  );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,EAA8B,GAAc;CAC1D,IAAM,EAAE,cAAW,GACb,CAAC,GAAgB,KAAqB,EAAmC,KAAA,CAAS;CAkBxF,OAjBA,QAAgB;EASd,aAR8B;GAC5B,AAEE,EAFE,OAAO,KAAW,WAEF,MADC,EAAkB,CAAM,IAGzB,CAAM;EAE5B,GACU;CACZ,GAAG,CAAC,CAAM,CAAC,GACN,IAOH,iBAAA,GAAA,EAAA,KAAC,GAAD;EACE,aAAa,EAAe;EAC5B,iBAAiB,EAAe;EAChC,cAAc,EAAe;EAC7B,SAAS,EAAe;EACxB,WAAW,EAAe;EAC1B,OAAO,EAAe;EACtB,gBAAgB,EAAe;EAC/B,aAAa,EAAe;EAC5B,mBAAmB,EAAe;EAClC,gBAAgB,EAAe;EAC/B,QAAQ,EAAe;EACvB,aAAa,EAAe;EAC5B,iBAAiB,EAAe;CACjC,CAAA,IAnBC,iBAAA,GAAA,EAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,EAAA,KAAC,GAAD,CAAU,CAAA;CACP,CAAA;AAmBX"}

package/dist/MultiGraphDashboardWideToLongFormat-BPwP5bx2.cjs

@@ -0,0 +1,2 @@
+require(`./chunk-gGpyby2o.cjs`);const e=require(`./jsx-runtime-Cd1vCQjn.cjs`),t=require(`./GraphHeader.cjs`),n=require(`./fetchAndParseData-Dlq4UzdG.cjs`),r=require(`./filterData-B2pPOkwy.cjs`),i=require(`./SingleGraphDashboard.cjs`);let a=require(`react`),o=require(`@undp/design-system-react/DropdownSelect`),s=require(`@undp/design-system-react/Label`),c=require(`@undp/design-system-react/Spinner`);function l(e,t,n,r){let i=[];return e.forEach(e=>{Object.entries(e).forEach(([r,a])=>{if(r!==t){let o={indicator:n.findIndex(e=>e.value===r)===-1?r:n[n.findIndex(e=>e.value===r)].label,value:a};o[t]=e[t],i.push(o)}})}),r&&console.log(i),i}var u=e.t(),d=e=>e.map(e=>e.columnWidth||1).reduce((e,t)=>e+t,0);function f(e){let{dashboardID:f,dashboardLayout:p,dataSettings:m,debugMode:h,theme:g=`light`,readableHeader:_,dataFilters:v,uiMode:y=`normal`,graphStyles:b,graphClassNames:x}=e,S={ignoreCase:!0,ignoreAccents:!0,trim:!0},[C,w]=(0,a.useState)(void 0),[T,E]=(0,a.useState)([]),[D,O]=(0,a.useState)(void 0),[k,A]=(0,a.useState)(void 0),[j,M]=(0,a.useState)(void 0),N=(0,a.useEffectEvent)(()=>{let e=r.t(j,v||[]);E(e.map(e=>e[m.keyColumn])),O(e[0][m.keyColumn]),A(l(e,m.keyColumn,_||[],h))}),P=(0,a.useEffectEvent)(()=>{k&&w(k.filter(e=>e[m.keyColumn]===D))});return(0,a.useEffect)(()=>{P()},[D,m.keyColumn]),(0,a.useEffect)(()=>{(async()=>{try{M(m.dataURL?typeof m.dataURL==`string`?m.fileType===`json`?await n.r(m.dataURL,void 0,m.dataTransformation,h):m.fileType===`api`?await n.a(m.dataURL,m.apiHeaders,void 0,m.dataTransformation,h):await n.t(m.dataURL,m.dataTransformation,void 0,h,m.delimiter,!0):await n.i(m.dataURL,m.idColumnTitle):await n.o(m.data,void 0)),N()}catch(e){console.error(`Data fetching error:`,e)}})()},[m,h]),(0,a.useEffect)(()=>{N()},[v,_]),(0,u.jsx)(`div`,{className:`${g||`light`} flex grow`,dir:p.language===`he`||p.language===`ar`?`rtl`:void 0,children:(0,u.jsx)(`div`,{className:`${p?.backgroundColor?p?.backgroundColor===!0?`bg-primary-gray-200 dark:bg-primary-gray-650 `:``:`bg-transparent `}flex flex-col w-full ml-auto mr-auto grow gap-4 ${p?.language||`en`}`,style:{...p?.backgroundColor&&p?.backgroundColor!==!0?{backgroundColor:p?.backgroundColor}:{}},id:f,children:(0,u.jsx)(`div`,{className:`flex grow`,style:{padding:p.backgroundColor?p.padding||`1rem`:p.padding||0},children:(0,u.jsxs)(`div`,{className:`flex flex-col w-full gap-4 grow justify-between`,children:[p.title||p.description?(0,u.jsx)(t.GraphHeader,{graphTitle:p.title,graphDescription:p.description,isDashboard:!0}):null,C?(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`div`,{style:{display:`flex`,gap:`1rem`,flexWrap:`wrap`,alignItems:`flex-start`,width:`100%`},children:(0,u.jsxs)(`div`,{style:{width:`100%`,flexGrow:1,flexShrink:0,minWidth:`240px`},children:[p.dropdownLabel?(0,u.jsx)(s.Label,{className:`mb-2`,children:p.dropdownLabel}):null,(0,u.jsx)(o.DropdownSelect,{options:T.map(e=>({value:e,label:e})),size:`sm`,variant:y,isClearable:!1,isSearchable:!0,controlShouldRenderValue:!0,filterOption:(0,o.createFilter)(S),onChange:e=>{O(e?.value)},defaultValue:{value:D,label:D}})]})}),p.rows.map((e,t)=>(0,u.jsx)(`div`,{style:{display:`flex`,gap:`1rem`,alignItems:`stretch`,minHeight:`${e.height||0}px`,height:`auto`,width:`100%`,flexWrap:`wrap`},children:e.columns.map((t,n)=>(0,u.jsx)(`div`,{className:`flex bg-transparent grow min-w-60`,style:{width:`calc(${100*(t.columnWidth||1)/d(e.columns)}% - ${(d(e.columns)-(t.columnWidth||1))/d(e.columns)}rem)`,minHeight:`inherit`},children:(0,u.jsx)(i.SingleGraphDashboard,{graphType:t.graphType,dataFilters:t.dataFilters,uiMode:y,graphSettings:{...t.settings||{},width:void 0,height:void 0,minHeight:void 0,relativeHeight:void 0,radius:t.graphType===`donutChart`?void 0:t.settings?.radius,size:t.graphType===`unitChart`?t.settings.size:void 0,language:t.settings?.language||p.language,theme:t.settings?.theme||g,styles:t.settings?.styles||b,classNames:t.settings?.classNames||x},dataSettings:{data:C},graphDataConfiguration:t.graphDataConfiguration?t.graphDataConfiguration:t.graphType===`unitChart`?[{columnId:`indicator`,chartConfigId:`label`},{columnId:`value`,chartConfigId:`value`}]:[{columnId:`indicator`,chartConfigId:`label`},{columnId:`value`,chartConfigId:`size`}],debugMode:h,readableHeader:_||[]})},n))},t))]}):(0,u.jsx)(`div`,{className:`w-full flex justify-center p-4`,children:(0,u.jsx)(c.Spinner,{})})]})})})})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormat-BPwP5bx2.cjs.map

package/dist/MultiGraphDashboardWideToLongFormat-BPwP5bx2.cjs.map

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

package/dist/MultiGraphDashboardWideToLongFormat-Ds7V2gxg.js

@@ -0,0 +1,168 @@
+import { t as e } from "./jsx-runtime-C76bEyh7.js";
+import { GraphHeader as t } from "./GraphHeader.js";
+import { a as n, i as r, o as i, r as a, t as o } from "./fetchAndParseData-C50SqMPu.js";
+import { t as s } from "./filterData-Dp_HZ71j.js";
+import { SingleGraphDashboard as c } from "./SingleGraphDashboard.js";
+import { useEffect as l, useEffectEvent as u, useState as d } from "react";
+import { DropdownSelect as f, createFilter as p } from "@undp/design-system-react/DropdownSelect";
+import { Label as m } from "@undp/design-system-react/Label";
+import { Spinner as h } from "@undp/design-system-react/Spinner";
+//#region src/Utils/wideToLongTranformation.ts
+function g(e, t, n, r) {
+	let i = [];
+	return e.forEach((e) => {
+		Object.entries(e).forEach(([r, a]) => {
+			if (r !== t) {
+				let o = {
+					indicator: n.findIndex((e) => e.value === r) === -1 ? r : n[n.findIndex((e) => e.value === r)].label,
+					value: a
+				};
+				o[t] = e[t], i.push(o);
+			}
+		});
+	}), r && console.log(i), i;
+}
+//#endregion
+//#region src/Components/Dashboard/MultiGraphDashboardWideToLongFormat.tsx
+var _ = e(), v = (e) => e.map((e) => e.columnWidth || 1).reduce((e, t) => e + t, 0);
+function y(e) {
+	let { dashboardID: y, dashboardLayout: b, dataSettings: x, debugMode: S, theme: C = "light", readableHeader: w, dataFilters: T, uiMode: E = "normal", graphStyles: D, graphClassNames: O } = e, k = {
+		ignoreCase: !0,
+		ignoreAccents: !0,
+		trim: !0
+	}, [A, j] = d(void 0), [M, N] = d([]), [P, F] = d(void 0), [I, L] = d(void 0), [R, z] = d(void 0), B = u(() => {
+		let e = s(R, T || []);
+		N(e.map((e) => e[x.keyColumn])), F(e[0][x.keyColumn]), L(g(e, x.keyColumn, w || [], S));
+	}), V = u(() => {
+		I && j(I.filter((e) => e[x.keyColumn] === P));
+	});
+	return l(() => {
+		V();
+	}, [P, x.keyColumn]), l(() => {
+		(async () => {
+			try {
+				z(x.dataURL ? typeof x.dataURL == "string" ? x.fileType === "json" ? await a(x.dataURL, void 0, x.dataTransformation, S) : x.fileType === "api" ? await n(x.dataURL, x.apiHeaders, void 0, x.dataTransformation, S) : await o(x.dataURL, x.dataTransformation, void 0, S, x.delimiter, !0) : await r(x.dataURL, x.idColumnTitle) : await i(x.data, void 0)), B();
+			} catch (e) {
+				console.error("Data fetching error:", e);
+			}
+		})();
+	}, [x, S]), l(() => {
+		B();
+	}, [T, w]), /* @__PURE__ */ (0, _.jsx)("div", {
+		className: `${C || "light"} flex grow`,
+		dir: b.language === "he" || b.language === "ar" ? "rtl" : void 0,
+		children: /* @__PURE__ */ (0, _.jsx)("div", {
+			className: `${b?.backgroundColor ? b?.backgroundColor === !0 ? "bg-primary-gray-200 dark:bg-primary-gray-650 " : "" : "bg-transparent "}flex flex-col w-full ml-auto mr-auto grow gap-4 ${b?.language || "en"}`,
+			style: { ...b?.backgroundColor && b?.backgroundColor !== !0 ? { backgroundColor: b?.backgroundColor } : {} },
+			id: y,
+			children: /* @__PURE__ */ (0, _.jsx)("div", {
+				className: "flex grow",
+				style: { padding: b.backgroundColor ? b.padding || "1rem" : b.padding || 0 },
+				children: /* @__PURE__ */ (0, _.jsxs)("div", {
+					className: "flex flex-col w-full gap-4 grow justify-between",
+					children: [b.title || b.description ? /* @__PURE__ */ (0, _.jsx)(t, {
+						graphTitle: b.title,
+						graphDescription: b.description,
+						isDashboard: !0
+					}) : null, A ? /* @__PURE__ */ (0, _.jsxs)(_.Fragment, { children: [/* @__PURE__ */ (0, _.jsx)("div", {
+						style: {
+							display: "flex",
+							gap: "1rem",
+							flexWrap: "wrap",
+							alignItems: "flex-start",
+							width: "100%"
+						},
+						children: /* @__PURE__ */ (0, _.jsxs)("div", {
+							style: {
+								width: "100%",
+								flexGrow: 1,
+								flexShrink: 0,
+								minWidth: "240px"
+							},
+							children: [b.dropdownLabel ? /* @__PURE__ */ (0, _.jsx)(m, {
+								className: "mb-2",
+								children: b.dropdownLabel
+							}) : null, /* @__PURE__ */ (0, _.jsx)(f, {
+								options: M.map((e) => ({
+									value: e,
+									label: e
+								})),
+								size: "sm",
+								variant: E,
+								isClearable: !1,
+								isSearchable: !0,
+								controlShouldRenderValue: !0,
+								filterOption: p(k),
+								onChange: (e) => {
+									F(e?.value);
+								},
+								defaultValue: {
+									value: P,
+									label: P
+								}
+							})]
+						})
+					}), b.rows.map((e, t) => /* @__PURE__ */ (0, _.jsx)("div", {
+						style: {
+							display: "flex",
+							gap: "1rem",
+							alignItems: "stretch",
+							minHeight: `${e.height || 0}px`,
+							height: "auto",
+							width: "100%",
+							flexWrap: "wrap"
+						},
+						children: e.columns.map((t, n) => /* @__PURE__ */ (0, _.jsx)("div", {
+							className: "flex bg-transparent grow min-w-60",
+							style: {
+								width: `calc(${100 * (t.columnWidth || 1) / v(e.columns)}% - ${(v(e.columns) - (t.columnWidth || 1)) / v(e.columns)}rem)`,
+								minHeight: "inherit"
+							},
+							children: /* @__PURE__ */ (0, _.jsx)(c, {
+								graphType: t.graphType,
+								dataFilters: t.dataFilters,
+								uiMode: E,
+								graphSettings: {
+									...t.settings || {},
+									width: void 0,
+									height: void 0,
+									minHeight: void 0,
+									relativeHeight: void 0,
+									radius: t.graphType === "donutChart" ? void 0 : t.settings?.radius,
+									size: t.graphType === "unitChart" ? t.settings.size : void 0,
+									language: t.settings?.language || b.language,
+									theme: t.settings?.theme || C,
+									styles: t.settings?.styles || D,
+									classNames: t.settings?.classNames || O
+								},
+								dataSettings: { data: A },
+								graphDataConfiguration: t.graphDataConfiguration ? t.graphDataConfiguration : t.graphType === "unitChart" ? [{
+									columnId: "indicator",
+									chartConfigId: "label"
+								}, {
+									columnId: "value",
+									chartConfigId: "value"
+								}] : [{
+									columnId: "indicator",
+									chartConfigId: "label"
+								}, {
+									columnId: "value",
+									chartConfigId: "size"
+								}],
+								debugMode: S,
+								readableHeader: w || []
+							})
+						}, n))
+					}, t))] }) : /* @__PURE__ */ (0, _.jsx)("div", {
+						className: "w-full flex justify-center p-4",
+						children: /* @__PURE__ */ (0, _.jsx)(h, {})
+					})]
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { y as t };
+
+//# sourceMappingURL=MultiGraphDashboardWideToLongFormat-Ds7V2gxg.js.map

package/dist/MultiGraphDashboardWideToLongFormat-Ds7V2gxg.js.map

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

package/dist/MultiGraphDashboardWideToLongFormat.cjs

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

package/dist/MultiGraphDashboardWideToLongFormat.d.ts

@@ -1,131 +1,2 @@
-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;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare interface ColumnConfigurationDataType {
-    column: string;
-    delimiter?: string;
-}
-
-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' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-export declare function MultiGraphDashboardWideToLongFormat(props: Props): JSX.Element;
-
-declare interface Props {
-    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 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;
-    modal?: React.CSSProperties;
-}
-
-export { }
+export * from './Components/Dashboard/MultiGraphDashboardWideToLongFormat'
+export {}