npm - @undp/data-viz - Versions diffs - 1.4.14 → 1.4.15 - Mend

@undp/data-viz 1.4.14 → 1.4.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/DualAxisLineChart.cjs +1 -1
package/dist/DualAxisLineChart.cjs.map +1 -1
package/dist/DualAxisLineChart.js +2 -2
package/dist/DualAxisLineChart.js.map +1 -1
package/dist/GraphEl-Bz2jatkM.cjs +2 -0
package/dist/GraphEl-Bz2jatkM.cjs.map +1 -0
package/dist/{GraphEl-N6vuMRw_.js → GraphEl-zNOHBYrK.js} +3 -3
package/dist/GraphEl-zNOHBYrK.js.map +1 -0
package/dist/GriddedGraphs.cjs +1 -1
package/dist/GriddedGraphs.js +1 -1
package/dist/ParetoChart.cjs +1 -1
package/dist/ParetoChart.cjs.map +1 -1
package/dist/ParetoChart.js +2 -2
package/dist/ParetoChart.js.map +1 -1
package/dist/SingleGraphDashboard.cjs +1 -1
package/dist/SingleGraphDashboard.js +1 -1
package/package.json +1 -1
package/dist/GraphEl-N6vuMRw_.js.map +0 -1
package/dist/GraphEl-Zl0W-LK9.cjs +0 -2
package/dist/GraphEl-Zl0W-LK9.cjs.map +0 -1

package/dist/GriddedGraphs.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),d=require("react"),ee=require("./index-Ds0uHjK9.cjs"),N=require("./index-B0rbzOoC.cjs"),h=require("./checkIfMultiple-BXbHUCWM.cjs"),ae=require("./Spinner-DA6Z5E4n.cjs"),f=require("./DropdownSelect-DBDM64B5.cjs"),te=require("./GraphEl-Zl0W-LK9.cjs"),v=require("./fetchAndParseData-CQyVGCul.cjs"),le=require("./Colors.cjs"),W=require("./transformDataForAggregation-Du-Hei-W.cjs"),Z=require("./getUniqValue-CHqgSss5.cjs"),re=require("./GraphHeader.cjs"),oe=require("./GraphFooter.cjs"),z=require("./filterData-DN6py7y_.cjs"),ne=require("./ColorLegend.cjs"),ie=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),B=require("./transformDataForSelect-YmStusCI.cjs");function se(J){const{graphSettings:a,dataSettings:n,filters:T,graphType:A,dataTransform:D,graphDataConfiguration:s,noOfColumns:E,columnGridBy:I,dataFilters:$,showCommonColorScale:k,minGraphHeight:K,minGraphWidth:q,debugMode:w,dataSelectionOptions:F,advancedDataSelectionOptions:O,readableHeader:Q,noOfFiltersPerRow:g=4,uiMode:p="normal",theme:H="light"}=J,[C,X]=d.useState(void 0),[S,Y]=d.useState(void 0),[b,_]=d.useState([]),M=d.useRef(null),[m,x]=d.useState(s),[j,L]=d.useState([]),[c,R]=d.useState({}),V=d.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]),U=d.useMemo(()=>!S||j.length===0?S:S.filter(u=>j.every(t=>t.value&&N.flattenDeep([t.value]).length>0?ee.intersection(N.flattenDeep([u[t.filter]]),N.flattenDeep([t.value]).map(l=>l.value)).length>0:!0)),[j,S]);d.useEffect(()=>{X(U)},[U]);const P=d.useCallback(async()=>{if(n)try{const u=await(n.dataURL?typeof n.dataURL=="string"?n.fileType==="json"?v.fetchAndParseJSON(n.dataURL,n.columnsToArray,n.dataTransformation,w):n.fileType==="api"?v.fetchAndTransformDataFromAPI(n.dataURL,n.apiHeaders,n.columnsToArray,n.dataTransformation,w):v.fetchAndParseCSV(n.dataURL,n.dataTransformation,n.columnsToArray,w,n.delimiter,!0):v.fetchAndParseMultipleDataSources(n.dataURL,n.idColumnTitle):v.transformColumnsToArray(n.data,n.columnsToArray));Y(u);const t=Z.getUniqValue(u,I);_(t);const l=(T||[]).map(o=>({filter:o.column,label:o.label||`Filter by ${o.column}`,singleSelect:o.singleSelect,clearable:o.clearable,defaultValue:B.transformDefaultValue(o.defaultValue),value:B.transformDefaultValue(o.defaultValue),availableValues:Z.getUniqValue(u,o.column).filter(i=>!o.excludeValues?.includes(`${i}`)).map(i=>({value:i,label:i})),allowSelectAll:o.allowSelectAll,width:o.width}));L(l)}catch(e){console.error("Data fetching error:",e)}},[n,w,I,T]);d.useEffect(()=>{P()},[P]),d.useEffect(()=>{x(s)},[s]);const G=d.useCallback((e,u)=>{L(t=>t.map(l=>l.filter===e?{...l,value:u}:l))},[]);return r.jsxRuntimeExports.jsx("div",{className:`${H||a?.theme||"light"} flex  ${a?.width?"w-fit grow-0":"w-full grow"}`,dir:a?.language==="he"||a?.language==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:`${a?.backgroundColor?a?.backgroundColor===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${a?.language||"en"}`,style:{...a?.backgroundColor&&a?.backgroundColor!==!0?{backgroundColor:a?.backgroundColor}:{}},id:a?.graphID,ref:M,"aria-label":a?.ariaLabel||`${a?.graphTitle?`The graph shows ${a?.graphTitle}. `:""}This is a gridded chart.${a?.graphDescription?` ${a?.graphDescription}`:""}`,children:r.jsxRuntimeExports.jsx("div",{style:{padding:a?.backgroundColor?a?.padding||"1rem":a?.padding||0,flexGrow:1,display:"flex"},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[c?.graphTitle||c?.graphDescription||a?.graphTitle||a?.graphDescription||a?.graphDownload||a?.dataDownload?r.jsxRuntimeExports.jsx(re.GraphHeader,{styles:{title:c?.styles?.title||a?.styles?.title,description:c?.styles?.description||a?.styles?.description},classNames:{title:c?.classNames?.title||a?.classNames?.title,description:c?.classNames?.description||a?.classNames?.description},graphTitle:c?.graphTitle||a?.graphTitle,graphDescription:c?.graphDescription||a?.graphDescription,width:c?.width||a?.width,graphDownload:a?.graphDownload?M.current:void 0,dataDownload:a?.dataDownload&&C&&C.length>0?C:null}):null,C&&b.length>0?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[j.length!==0||(F||[]).length!==0||(O||[]).length!==0?r.jsxRuntimeExports.jsxs("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap",alignItems:"flex-start",width:"100%"},children:[O?.map((e,u)=>r.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:e.ui!=="radio"?0:1,minWidth:"240px"},children:[r.jsxRuntimeExports.jsx(h.f,{className:"mb-2",children:e.label||"Graph by"}),e.ui!=="radio"?r.jsxRuntimeExports.jsx(f.Za,{options:e.options.map(t=>({...t,value:t.label})),isClearable:!1,isSearchable:!0,variant:p,controlShouldRenderValue:!0,defaultValue:e.defaultValue?{...e.defaultValue,value:e.defaultValue?.label}:{...e.options[0],value:e.options[0].label},onChange:t=>{R(t?.graphSettings||{}),x(t?.dataConfiguration)}}):r.jsxRuntimeExports.jsx(h.fe,{defaultValue:e.defaultValue?.label||e.options[0].label,variant:p,onValueChange:t=>{const l=e.options[e.options.findIndex(o=>o.label===t)];R(l.graphSettings||{}),x(l.dataConfiguration)},children:e.options.map((t,l)=>r.jsxRuntimeExports.jsx(h.ve,{label:t.label,value:t.label},l))})]},u)),F?.map((e,u)=>r.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:e.ui!=="radio"?0:1,minWidth:"240px"},children:[r.jsxRuntimeExports.jsx(h.f,{className:"mb-2",children:e.label||`Visualize ${e.chartConfigId} by`}),h.checkIfMultiple(e.chartConfigId,m||[])?e.ui!=="radio"?r.jsxRuntimeExports.jsx(f.Za,{options:e.allowedColumnIds,isMulti:!0,variant:p,isSearchable:!0,controlShouldRenderValue:!0,defaultValue:s?s[s.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId.map(t=>e.allowedColumnIds[e.allowedColumnIds.findIndex(l=>l.value===t)]):void 0,filterOption:f.Hu(V),onChange:t=>{const l={columnId:t.map(i=>i.value),chartConfigId:e.chartConfigId},o=m?.map(i=>i.chartConfigId===l.chartConfigId?l:i);x(o)},isRtl:a?.language==="ar"||a?.language==="he"}):r.jsxRuntimeExports.jsx(h.w,{variant:p,defaultValue:s?s[s.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId.map(t=>e.allowedColumnIds[e.allowedColumnIds.findIndex(l=>l.value===t)]).map(t=>t.value):[],onValueChange:t=>{const l={columnId:t||[],chartConfigId:e.chartConfigId},o=m?.map(i=>i.chartConfigId===l.chartConfigId?l:i);x(o)},children:e.allowedColumnIds.map((t,l)=>r.jsxRuntimeExports.jsx(h.G,{label:t.label,value:t.label},l))}):e.ui!=="radio"?r.jsxRuntimeExports.jsx(f.Za,{options:e.allowedColumnIds,isClearable:!1,isSearchable:!0,variant:p,defaultValue:s?e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===s[s.findIndex(l=>l.chartConfigId===e.chartConfigId)].columnId)]:void 0,controlShouldRenderValue:!0,onChange:t=>{const l={columnId:t?.value,chartConfigId:e.chartConfigId},o=m?.map(i=>i.chartConfigId===l.chartConfigId?l:i);R(t?.graphSettings||{}),x(o)}}):r.jsxRuntimeExports.jsx(h.fe,{variant:p,defaultValue:s?e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===s[s.findIndex(l=>l.chartConfigId===e.chartConfigId)].columnId)].label:"",onValueChange:t=>{const l=e.allowedColumnIds[e.allowedColumnIds.findIndex(y=>y.label===t)],o={columnId:l.value,chartConfigId:e.chartConfigId},i=m?.map(y=>y.chartConfigId===o.chartConfigId?o:y);R(l.graphSettings||{}),x(i)},children:e.allowedColumnIds.map((t,l)=>r.jsxRuntimeExports.jsx(h.ve,{label:t.label,value:t.label},l))})]},u)),j?.map((e,u)=>r.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:0,flexWrap:"wrap"},children:[r.jsxRuntimeExports.jsx(h.f,{className:"mb-2",children:e.label}),e.singleSelect?r.jsxRuntimeExports.jsx(f.Za,{variant:p,options:e.availableValues,isClearable:e.clearable===void 0?!0:e.clearable,isRtl:a?.language==="ar"||a?.language==="he",isSearchable:!0,controlShouldRenderValue:!0,filterOption:f.Hu(V),onChange:t=>{G(e.filter,t)},defaultValue:e.defaultValue}):r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(f.Za,{variant:p,options:e.availableValues,isMulti:!0,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:f.Hu(V),onChange:t=>{G(e.filter,t)},defaultValue:e.defaultValue,isRtl:a?.language==="ar"||a?.language==="he"}),e.allowSelectAll?r.jsxRuntimeExports.jsx("button",{className:"bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400",type:"button",onClick:()=>{G(e.filter,e.availableValues)},children:"Select all options"}):null]})]},u))]}):null,k!==!1&&a?.showColorScale!==!1?r.jsxRuntimeExports.jsx(ne.ColorLegend,{width:a?.width,colorLegendTitle:a?.colorLegendTitle,colors:a?.colors||a?.lineColors||le.Colors[a?.theme||"light"].categoricalColors.colors,colorDomain:a?.colorDomain||a?.labels||[],showNAColor:a?.showNAColor===void 0||a?.showNAColor===null?!0:a?.showNAColor}):null,r.jsxRuntimeExports.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"1rem",flexDirection:a?.language==="ar"||a?.language==="he"?"row-reverse":"row",justifyContent:"center"},children:b.map((e,u)=>r.jsxRuntimeExports.jsx("div",{style:{width:`calc(${100/(E||Math.min(4,b.length||0))}% - ${((E||Math.min(4,b.length||0))-1)/(E||Math.min(4,b.length||0))}rem)`,minWidth:ie.checkIfNullOrUndefined(q)?"280px":`${q}px`},children:r.jsxRuntimeExports.jsx(te.GraphEl,{graph:A,graphDataConfiguration:m,graphData:W.transformDataForGraph(D?W.transformDataForAggregation(z.filterData(C,$||[]).filter(t=>t[I]===e),D.keyColumn,D.aggregationColumnsSetting):z.filterData(C,$||[]).filter(t=>t[I]===e),A,m)||[],debugMode:w,settings:{...a||{},...c,theme:a?.theme||H,width:void 0,height:void 0,relativeHeight:a?.relativeHeight||.67,minHeight:K,graphTitle:`${e}`,graphDescription:void 0,graphDownload:!1,dataDownload:!1,backgroundColor:void 0,padding:"0",footNote:void 0,sources:void 0,showColorScale:a?.showColorScale===!1?!1:k===!1},readableHeader:Q||[]})},u))})]}):r.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:r.jsxRuntimeExports.jsx(ae.y,{})}),a?.sources||a?.footNote?r.jsxRuntimeExports.jsx(oe.GraphFooter,{styles:{footnote:a?.styles?.footnote,source:a?.styles?.source},classNames:{footnote:a?.classNames?.footnote,source:a?.classNames?.source},sources:a?.sources,footNote:a?.footNote,width:a?.width}):null]})})})})}exports.GriddedGraphs=se;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-DDoeWRVt.cjs"),d=require("react"),ee=require("./index-Ds0uHjK9.cjs"),N=require("./index-B0rbzOoC.cjs"),h=require("./checkIfMultiple-BXbHUCWM.cjs"),ae=require("./Spinner-DA6Z5E4n.cjs"),f=require("./DropdownSelect-DBDM64B5.cjs"),te=require("./GraphEl-Bz2jatkM.cjs"),v=require("./fetchAndParseData-CQyVGCul.cjs"),le=require("./Colors.cjs"),W=require("./transformDataForAggregation-Du-Hei-W.cjs"),Z=require("./getUniqValue-CHqgSss5.cjs"),re=require("./GraphHeader.cjs"),oe=require("./GraphFooter.cjs"),z=require("./filterData-DN6py7y_.cjs"),ne=require("./ColorLegend.cjs"),ie=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),B=require("./transformDataForSelect-YmStusCI.cjs");function se(J){const{graphSettings:a,dataSettings:n,filters:T,graphType:A,dataTransform:D,graphDataConfiguration:s,noOfColumns:E,columnGridBy:I,dataFilters:$,showCommonColorScale:k,minGraphHeight:K,minGraphWidth:q,debugMode:w,dataSelectionOptions:F,advancedDataSelectionOptions:O,readableHeader:Q,noOfFiltersPerRow:g=4,uiMode:p="normal",theme:H="light"}=J,[C,X]=d.useState(void 0),[S,Y]=d.useState(void 0),[b,_]=d.useState([]),M=d.useRef(null),[m,x]=d.useState(s),[j,L]=d.useState([]),[c,R]=d.useState({}),V=d.useMemo(()=>({ignoreCase:!0,ignoreAccents:!0,trim:!0}),[]),U=d.useMemo(()=>!S||j.length===0?S:S.filter(u=>j.every(t=>t.value&&N.flattenDeep([t.value]).length>0?ee.intersection(N.flattenDeep([u[t.filter]]),N.flattenDeep([t.value]).map(l=>l.value)).length>0:!0)),[j,S]);d.useEffect(()=>{X(U)},[U]);const P=d.useCallback(async()=>{if(n)try{const u=await(n.dataURL?typeof n.dataURL=="string"?n.fileType==="json"?v.fetchAndParseJSON(n.dataURL,n.columnsToArray,n.dataTransformation,w):n.fileType==="api"?v.fetchAndTransformDataFromAPI(n.dataURL,n.apiHeaders,n.columnsToArray,n.dataTransformation,w):v.fetchAndParseCSV(n.dataURL,n.dataTransformation,n.columnsToArray,w,n.delimiter,!0):v.fetchAndParseMultipleDataSources(n.dataURL,n.idColumnTitle):v.transformColumnsToArray(n.data,n.columnsToArray));Y(u);const t=Z.getUniqValue(u,I);_(t);const l=(T||[]).map(o=>({filter:o.column,label:o.label||`Filter by ${o.column}`,singleSelect:o.singleSelect,clearable:o.clearable,defaultValue:B.transformDefaultValue(o.defaultValue),value:B.transformDefaultValue(o.defaultValue),availableValues:Z.getUniqValue(u,o.column).filter(i=>!o.excludeValues?.includes(`${i}`)).map(i=>({value:i,label:i})),allowSelectAll:o.allowSelectAll,width:o.width}));L(l)}catch(e){console.error("Data fetching error:",e)}},[n,w,I,T]);d.useEffect(()=>{P()},[P]),d.useEffect(()=>{x(s)},[s]);const G=d.useCallback((e,u)=>{L(t=>t.map(l=>l.filter===e?{...l,value:u}:l))},[]);return r.jsxRuntimeExports.jsx("div",{className:`${H||a?.theme||"light"} flex  ${a?.width?"w-fit grow-0":"w-full grow"}`,dir:a?.language==="he"||a?.language==="ar"?"rtl":void 0,children:r.jsxRuntimeExports.jsx("div",{className:`${a?.backgroundColor?a?.backgroundColor===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${a?.language||"en"}`,style:{...a?.backgroundColor&&a?.backgroundColor!==!0?{backgroundColor:a?.backgroundColor}:{}},id:a?.graphID,ref:M,"aria-label":a?.ariaLabel||`${a?.graphTitle?`The graph shows ${a?.graphTitle}. `:""}This is a gridded chart.${a?.graphDescription?` ${a?.graphDescription}`:""}`,children:r.jsxRuntimeExports.jsx("div",{style:{padding:a?.backgroundColor?a?.padding||"1rem":a?.padding||0,flexGrow:1,display:"flex"},children:r.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[c?.graphTitle||c?.graphDescription||a?.graphTitle||a?.graphDescription||a?.graphDownload||a?.dataDownload?r.jsxRuntimeExports.jsx(re.GraphHeader,{styles:{title:c?.styles?.title||a?.styles?.title,description:c?.styles?.description||a?.styles?.description},classNames:{title:c?.classNames?.title||a?.classNames?.title,description:c?.classNames?.description||a?.classNames?.description},graphTitle:c?.graphTitle||a?.graphTitle,graphDescription:c?.graphDescription||a?.graphDescription,width:c?.width||a?.width,graphDownload:a?.graphDownload?M.current:void 0,dataDownload:a?.dataDownload&&C&&C.length>0?C:null}):null,C&&b.length>0?r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[j.length!==0||(F||[]).length!==0||(O||[]).length!==0?r.jsxRuntimeExports.jsxs("div",{style:{display:"flex",gap:"1rem",flexWrap:"wrap",alignItems:"flex-start",width:"100%"},children:[O?.map((e,u)=>r.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:e.ui!=="radio"?0:1,minWidth:"240px"},children:[r.jsxRuntimeExports.jsx(h.f,{className:"mb-2",children:e.label||"Graph by"}),e.ui!=="radio"?r.jsxRuntimeExports.jsx(f.Za,{options:e.options.map(t=>({...t,value:t.label})),isClearable:!1,isSearchable:!0,variant:p,controlShouldRenderValue:!0,defaultValue:e.defaultValue?{...e.defaultValue,value:e.defaultValue?.label}:{...e.options[0],value:e.options[0].label},onChange:t=>{R(t?.graphSettings||{}),x(t?.dataConfiguration)}}):r.jsxRuntimeExports.jsx(h.fe,{defaultValue:e.defaultValue?.label||e.options[0].label,variant:p,onValueChange:t=>{const l=e.options[e.options.findIndex(o=>o.label===t)];R(l.graphSettings||{}),x(l.dataConfiguration)},children:e.options.map((t,l)=>r.jsxRuntimeExports.jsx(h.ve,{label:t.label,value:t.label},l))})]},u)),F?.map((e,u)=>r.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:e.ui!=="radio"?0:1,minWidth:"240px"},children:[r.jsxRuntimeExports.jsx(h.f,{className:"mb-2",children:e.label||`Visualize ${e.chartConfigId} by`}),h.checkIfMultiple(e.chartConfigId,m||[])?e.ui!=="radio"?r.jsxRuntimeExports.jsx(f.Za,{options:e.allowedColumnIds,isMulti:!0,variant:p,isSearchable:!0,controlShouldRenderValue:!0,defaultValue:s?s[s.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId.map(t=>e.allowedColumnIds[e.allowedColumnIds.findIndex(l=>l.value===t)]):void 0,filterOption:f.Hu(V),onChange:t=>{const l={columnId:t.map(i=>i.value),chartConfigId:e.chartConfigId},o=m?.map(i=>i.chartConfigId===l.chartConfigId?l:i);x(o)},isRtl:a?.language==="ar"||a?.language==="he"}):r.jsxRuntimeExports.jsx(h.w,{variant:p,defaultValue:s?s[s.findIndex(t=>t.chartConfigId===e.chartConfigId)].columnId.map(t=>e.allowedColumnIds[e.allowedColumnIds.findIndex(l=>l.value===t)]).map(t=>t.value):[],onValueChange:t=>{const l={columnId:t||[],chartConfigId:e.chartConfigId},o=m?.map(i=>i.chartConfigId===l.chartConfigId?l:i);x(o)},children:e.allowedColumnIds.map((t,l)=>r.jsxRuntimeExports.jsx(h.G,{label:t.label,value:t.label},l))}):e.ui!=="radio"?r.jsxRuntimeExports.jsx(f.Za,{options:e.allowedColumnIds,isClearable:!1,isSearchable:!0,variant:p,defaultValue:s?e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===s[s.findIndex(l=>l.chartConfigId===e.chartConfigId)].columnId)]:void 0,controlShouldRenderValue:!0,onChange:t=>{const l={columnId:t?.value,chartConfigId:e.chartConfigId},o=m?.map(i=>i.chartConfigId===l.chartConfigId?l:i);R(t?.graphSettings||{}),x(o)}}):r.jsxRuntimeExports.jsx(h.fe,{variant:p,defaultValue:s?e.allowedColumnIds[e.allowedColumnIds.findIndex(t=>t.value===s[s.findIndex(l=>l.chartConfigId===e.chartConfigId)].columnId)].label:"",onValueChange:t=>{const l=e.allowedColumnIds[e.allowedColumnIds.findIndex(y=>y.label===t)],o={columnId:l.value,chartConfigId:e.chartConfigId},i=m?.map(y=>y.chartConfigId===o.chartConfigId?o:y);R(l.graphSettings||{}),x(i)},children:e.allowedColumnIds.map((t,l)=>r.jsxRuntimeExports.jsx(h.ve,{label:t.label,value:t.label},l))})]},u)),j?.map((e,u)=>r.jsxRuntimeExports.jsxs("div",{style:{width:e.width||`calc(${100/g}% - ${(g-1)/g}rem)`,flexGrow:1,flexShrink:0,flexWrap:"wrap"},children:[r.jsxRuntimeExports.jsx(h.f,{className:"mb-2",children:e.label}),e.singleSelect?r.jsxRuntimeExports.jsx(f.Za,{variant:p,options:e.availableValues,isClearable:e.clearable===void 0?!0:e.clearable,isRtl:a?.language==="ar"||a?.language==="he",isSearchable:!0,controlShouldRenderValue:!0,filterOption:f.Hu(V),onChange:t=>{G(e.filter,t)},defaultValue:e.defaultValue}):r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsx(f.Za,{variant:p,options:e.availableValues,isMulti:!0,isClearable:e.clearable===void 0?!0:e.clearable,isSearchable:!0,controlShouldRenderValue:!0,filterOption:f.Hu(V),onChange:t=>{G(e.filter,t)},defaultValue:e.defaultValue,isRtl:a?.language==="ar"||a?.language==="he"}),e.allowSelectAll?r.jsxRuntimeExports.jsx("button",{className:"bg-transparent border-0 p-0 mt-2 cursor-pointer text-primary-blue-600 dark:text-primary-blue-400",type:"button",onClick:()=>{G(e.filter,e.availableValues)},children:"Select all options"}):null]})]},u))]}):null,k!==!1&&a?.showColorScale!==!1?r.jsxRuntimeExports.jsx(ne.ColorLegend,{width:a?.width,colorLegendTitle:a?.colorLegendTitle,colors:a?.colors||a?.lineColors||le.Colors[a?.theme||"light"].categoricalColors.colors,colorDomain:a?.colorDomain||a?.labels||[],showNAColor:a?.showNAColor===void 0||a?.showNAColor===null?!0:a?.showNAColor}):null,r.jsxRuntimeExports.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:"1rem",flexDirection:a?.language==="ar"||a?.language==="he"?"row-reverse":"row",justifyContent:"center"},children:b.map((e,u)=>r.jsxRuntimeExports.jsx("div",{style:{width:`calc(${100/(E||Math.min(4,b.length||0))}% - ${((E||Math.min(4,b.length||0))-1)/(E||Math.min(4,b.length||0))}rem)`,minWidth:ie.checkIfNullOrUndefined(q)?"280px":`${q}px`},children:r.jsxRuntimeExports.jsx(te.GraphEl,{graph:A,graphDataConfiguration:m,graphData:W.transformDataForGraph(D?W.transformDataForAggregation(z.filterData(C,$||[]).filter(t=>t[I]===e),D.keyColumn,D.aggregationColumnsSetting):z.filterData(C,$||[]).filter(t=>t[I]===e),A,m)||[],debugMode:w,settings:{...a||{},...c,theme:a?.theme||H,width:void 0,height:void 0,relativeHeight:a?.relativeHeight||.67,minHeight:K,graphTitle:`${e}`,graphDescription:void 0,graphDownload:!1,dataDownload:!1,backgroundColor:void 0,padding:"0",footNote:void 0,sources:void 0,showColorScale:a?.showColorScale===!1?!1:k===!1},readableHeader:Q||[]})},u))})]}):r.jsxRuntimeExports.jsx("div",{className:"w-full flex justify-center p-4",children:r.jsxRuntimeExports.jsx(ae.y,{})}),a?.sources||a?.footNote?r.jsxRuntimeExports.jsx(oe.GraphFooter,{styles:{footnote:a?.styles?.footnote,source:a?.styles?.source},classNames:{footnote:a?.classNames?.footnote,source:a?.classNames?.source},sources:a?.sources,footNote:a?.footNote,width:a?.width}):null]})})})})}exports.GriddedGraphs=se;
 //# sourceMappingURL=GriddedGraphs.cjs.map

package/dist/GriddedGraphs.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { f as G } from "./index-UV9hjG_S.js";
 import { f as $, a as B, v as J, c as na, w as ia, G as sa } from "./checkIfMultiple-ChTJk2Tk.js";
 import { y as da } from "./Spinner-C85UF28E.js";
 import { Z as x, H as A } from "./DropdownSelect-CtOKZHD0.js";
-import { G as ca } from "./GraphEl-N6vuMRw_.js";
+import { G as ca } from "./GraphEl-zNOHBYrK.js";
 import { f as ua, a as ha, b as ga, c as fa, t as pa } from "./fetchAndParseData-4gsYTy6_.js";
 import { Colors as ma } from "./Colors.js";
 import { a as Ca, t as wa } from "./transformDataForAggregation-CdcwlnNe.js";

package/dist/ParetoChart.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CHPV5EwG-DDoeWRVt.cjs"),j=require("react"),gt=require("./index-BXns0-ng.cjs"),wt=require("./Modal-tXZlLE5s.cjs"),ot=require("./numberFormattingFunction-02t-wJta.cjs"),Et=require("./Tooltip-n8z5bfav.cjs"),Rt=require("./string2HTML-D2Avudmb.cjs"),pt=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),dt=require("./Axis-DE7dSn1_.cjs"),ft=require("./AxisTitle-CK9YeovX.cjs"),At=require("./XAxesLabels-OjBNl_lS.cjs"),Mt=require("./band-CAApY4Pd.cjs"),yt=require("./linear-BVckp9RD.cjs"),jt=require("./line-DHV4JwCR.cjs"),lt=require("./step-BZ3C8QFW.cjs"),Ct=require("./use-in-view-sQJZ_xDO.cjs"),P=require("./proxy-BHRoeZgd.cjs"),Nt=require("./index-BW8iNx7E.cjs"),kt=require("./GraphFooter.cjs"),$t=require("./GraphHeader.cjs"),St=require("./ColorLegend.cjs"),xt=require("./Colors.cjs"),qt=require("./EmptyState-d8_8SxeW.cjs");function It(ct){const{data:q,width:M,height:V,barColor:d,lineColor:u,axisTitles:s,sameAxes:b,rightMargin:U,leftMargin:z,topMargin:_,bottomMargin:ut,tooltip:v,showValues:J,onSeriesMouseOver:D,barPadding:mt,truncateBy:K,showLabels:Q,onSeriesMouseClick:w,resetSelectionOnDoubleClick:Z,detailsOnClick:m,noOfTicks:tt,lineSuffix:et,barSuffix:Y,linePrefix:X,barPrefix:it,curveType:F,styles:o,classNames:l,animate:r,precision:H,customLayers:I,naLabel:C,showAxisLabels:st}=ct,nt=j.useRef(null),N=Ct.useInView(nt,{once:r.once,amount:r.amount}),ht=F==="linear"?jt.curveLinear:F==="step"?lt.curveStep:F==="stepAfter"?lt.stepAfter:F==="stepBefore"?lt.stepBefore:lt.monotoneX,[at,k]=j.useState(void 0),[$,L]=j.useState(void 0),[rt,S]=j.useState(void 0),[E,c]=j.useState(void 0),h={top:_,bottom:ut,left:z+50,right:U+65},p=M-h.left-h.right,g=V-h.top-h.bottom,n=q.map((t,A)=>({...t,id:`${A}`})),x=Mt.band().domain(n.map(t=>`${t.id}`)).range([0,p]).paddingInner(mt),W=Math.min(...n.map(t=>t.bar).filter(t=>t!=null))!==1/0?Math.min(...n.map(t=>t.bar).filter(t=>t!=null))>0?0:Math.min(...n.map(t=>t.bar).filter(t=>t!=null)):0,R=Math.min(...n.map(t=>t.line).filter(t=>t!=null))!==1/0?Math.min(...n.map(t=>t.line).filter(t=>t!=null))>0?0:Math.min(...n.map(t=>t.line).filter(t=>t!=null)):0,T=Math.max(...n.map(t=>t.bar).filter(t=>t!=null))!==1/0?Math.max(...n.map(t=>t.bar).filter(t=>t!=null)):0,O=Math.max(...n.map(t=>t.line).filter(t=>t!=null))!==1/0?Math.max(...n.map(t=>t.line).filter(t=>t!=null)):0,G=W<R?W:R,y=T>O?T:O,a=yt.linear().domain([b?G:W,b?y>0?y:0:T>0?T:0]).range([g,0]).nice(),i=yt.linear().domain([b?G:R,b?y>0?y:0:O>0?O:0]).range([g,0]).nice(),B=jt.line().defined(t=>!pt.checkIfNullOrUndefined(t.line)).x(t=>x(`${t.id}`)+x.bandwidth()/2).y(t=>i(t.line)).curve(ht),bt=a.ticks(tt),vt=i.ticks(tt);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(P.motion.svg,{width:`${M}px`,height:`${V}px`,viewBox:`0 0 ${M} ${V}`,direction:"ltr",ref:nt,children:e.jsxRuntimeExports.jsxs("g",{transform:`translate(${h.left},${h.top})`,children:[e.jsxRuntimeExports.jsxs("g",{children:[bt.map((t,A)=>e.jsxRuntimeExports.jsxs("g",{children:[e.jsxRuntimeExports.jsx("line",{y1:a(t),y2:a(t),x1:-15,x2:-20,style:{stroke:d,strokeWidth:1,...o?.yAxis?.gridLines||{}},className:l?.yAxis?.gridLines}),e.jsxRuntimeExports.jsx("text",{x:-25,y:a(t),dy:"0.33em",className:e.mo("text-xs",l?.yAxis?.labels),style:{textAnchor:"end",fill:d,...o?.yAxis?.labels||{}},children:ot.numberFormattingFunction(t,C,H,it,Y)})]},A)),e.jsxRuntimeExports.jsx(dt.Axis,{y1:0,y2:g,x1:-15,x2:-15,classNames:{axis:l?.xAxis?.axis},styles:{axis:{stroke:d,...o?.xAxis?.axis||{}}}}),st?e.jsxRuntimeExports.jsx(ft.AxisTitle,{x:10-h.left,y:g/2,style:{fill:d,...o?.yAxis?.title||{}},className:l?.yAxis?.title,text:s[0].length>100?`${s[0].substring(0,100)}...`:s[0],rotate90:!0}):null]}),e.jsxRuntimeExports.jsxs("g",{children:[vt.map((t,A)=>e.jsxRuntimeExports.jsxs("g",{children:[e.jsxRuntimeExports.jsx("line",{y1:i(t),y2:i(t),x1:p+15,x2:p+20,style:{stroke:u,strokeWidth:1,...o?.yAxis?.gridLines||{}},className:l?.yAxis?.gridLines}),e.jsxRuntimeExports.jsx("text",{x:p+25,y:i(t),dy:"0.33em",dx:-2,style:{textAnchor:"start",fill:u,...o?.yAxis?.labels||{}},className:e.mo("text-xs",l?.yAxis?.labels),children:ot.numberFormattingFunction(t,C,H,X,et)})]},A)),e.jsxRuntimeExports.jsx(dt.Axis,{y1:0,y2:g,x1:p+15,x2:p+15,classNames:{axis:l?.xAxis?.axis},styles:{axis:{stroke:u,...o?.xAxis?.axis||{}}}}),st?e.jsxRuntimeExports.jsx(ft.AxisTitle,{x:p+h.right-15,y:g/2,style:{fill:u,...o?.yAxis?.title||{}},className:l?.yAxis?.title,text:s[1].length>100?`${s[1].substring(0,100)}...`:s[1],rotate90:!0}):null]}),e.jsxRuntimeExports.jsx(dt.Axis,{y1:b?a(0):g,y2:b?a(0):g,x1:-15,x2:p+15,classNames:{axis:l?.xAxis?.axis},styles:{axis:o?.xAxis?.axis}}),I.filter(t=>t.position==="before").map(t=>t.layer),e.jsxRuntimeExports.jsxs(Nt.AnimatePresence,{children:[n.map((t,A)=>e.jsxRuntimeExports.jsxs(P.motion.g,{className:"undp-viz-g-with-hover",opacity:.85,onMouseEnter:f=>{k(t),c(f.clientY),S(f.clientX),D?.(t)},onClick:()=>{(w||m)&&(gt.isEqual($,t)&&Z?(L(void 0),w?.(void 0)):(L(t),w?.(t)))},onMouseMove:f=>{k(t),c(f.clientY),S(f.clientX)},onMouseLeave:()=>{k(void 0),S(void 0),c(void 0),D?.(void 0)},children:[e.jsxRuntimeExports.jsx(P.motion.rect,{variants:{initial:{attrY:a(0),height:0,opacity:1},whileInView:{attrY:t.bar?t.bar>0?a(t.bar):a(0):0,height:t.bar?Math.abs(a(t.bar)-a(0)):0,opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",exit:{attrY:a(0),height:0,opacity:0,transition:{duration:r.duration}},x:x(`${A}`),width:x.bandwidth(),style:{fill:d}}),J&&!pt.checkIfNullOrUndefined(t.bar)?e.jsxRuntimeExports.jsx(P.motion.text,{x:x(`${t.id}`)+x.bandwidth()/2,exit:{attrY:a(0),opacity:0,transition:{duration:r.duration}},variants:{initial:{attrY:a(0),opacity:0},whileInView:{attrY:a(t.bar||0),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",style:{fill:d,textAnchor:"middle",...o?.graphObjectValues||{}},className:e.mo("graph-value text-sm",l?.graphObjectValues),dy:t.bar?t.bar>=0?"-5px":"1em":"-5px",children:ot.numberFormattingFunction(t.bar,C,H,it,Y)}):null,Q?e.jsxRuntimeExports.jsx(At.XAxesLabels,{value:`${t.label}`.length<K?`${t.label}`:`${`${t.label}`.substring(0,K)}...`,y:g+5,x:x(`${t.id}`),width:x.bandwidth(),height:h.bottom,style:o?.xAxis?.labels,className:l?.xAxis?.labels,alignment:"top",animate:r,isInView:N}):null]},t.label)),e.jsxRuntimeExports.jsx(P.motion.path,{exit:{opacity:0,transition:{duration:r.duration}},variants:{initial:{d:B(n.map(t=>({...t,line:0}))),opacity:0},whileInView:{d:B(n),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",style:{stroke:u,fill:"none",strokeWidth:2}}),n.map((t,A)=>e.jsxRuntimeExports.jsx("g",{children:pt.checkIfNullOrUndefined(t.line)?null:e.jsxRuntimeExports.jsxs("g",{onMouseEnter:f=>{k(t),c(f.clientY),S(f.clientX),D?.(t)},onClick:()=>{(w||m)&&(gt.isEqual($,t)&&Z?(L(void 0),w?.(void 0)):(L(t),w?.(t)))},onMouseMove:f=>{k(t),c(f.clientY),S(f.clientX)},onMouseLeave:()=>{k(void 0),S(void 0),c(void 0),D?.(void 0)},children:[e.jsxRuntimeExports.jsx(P.motion.circle,{exit:{cy:i(0),opacity:0,transition:{duration:r.duration}},variants:{initial:{cy:i(0),opacity:0},whileInView:{cy:i(t.line),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",cx:x(t.id)+x.bandwidth()/2,r:p/n.length<5?0:p/n.length<20?2:4,style:{fill:u}}),J?e.jsxRuntimeExports.jsx(P.motion.text,{x:x(`${t.id}`)+x.bandwidth()/2,exit:{y:i(0),opacity:0,transition:{duration:r.duration}},style:{fill:u,textAnchor:"middle",...o?.graphObjectValues||{}},variants:{initial:{y:i(0),opacity:0},whileInView:{y:i(t.line),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",className:e.mo("graph-value text-sm",l?.graphObjectValues),dy:"-5px",children:ot.numberFormattingFunction(t.line,C,H,X,et)}):null]})},A))]}),I.filter(t=>t.position==="after").map(t=>t.layer)]})}),at&&v&&rt&&E?e.jsxRuntimeExports.jsx(Et.Tooltip,{data:at,body:v,xPos:rt,yPos:E,backgroundStyle:o?.tooltip,className:l?.tooltip}):null,m&&$!==void 0?e.jsxRuntimeExports.jsx(wt.X,{open:$!==void 0,onClose:()=>{L(void 0)},children:e.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof m=="string"?{__html:Rt.string2HTML(m,$)}:void 0,children:typeof m=="function"?m($):null})}):null]})}function Lt(ct){const{data:q,graphTitle:M,sources:V,graphDescription:d,height:u,width:s,footNote:b,padding:U,lineColor:z=xt.Colors.light.categoricalColors.colors[1],barColor:_=xt.Colors.light.categoricalColors.colors[0],sameAxes:ut=!1,backgroundColor:v=!1,leftMargin:J=80,rightMargin:D=80,topMargin:mt=20,bottomMargin:K=25,lineAxisTitle:Q="Line chart",barAxisTitle:w="Bar graph",tooltip:Z,relativeHeight:m,onSeriesMouseOver:tt,graphID:et,graphDownload:Y=!1,dataDownload:X=!1,barPadding:it=.25,truncateBy:F=999,showLabels:o=!0,onSeriesMouseClick:l,language:r="en",colorLegendTitle:H,minHeight:I=0,theme:C="light",ariaLabel:st,resetSelectionOnDoubleClick:nt=!0,detailsOnClick:N,showValues:ht=!0,noOfTicks:at=5,lineSuffix:k="",barSuffix:$="",linePrefix:L="",barPrefix:rt="",curveType:S="curve",styles:E,classNames:c,animate:h=!1,precision:p=2,customLayers:g=[],naLabel:n="NA",showColorScale:x=!0,showAxisLabels:W=!0}=ct,[R,T]=j.useState(0),[O,G]=j.useState(0),y=j.useRef(null),a=j.useRef(null);return j.useEffect(()=>{const i=new ResizeObserver(B=>{T(s||B[0].target.clientWidth||620),G(u||B[0].target.clientHeight||480)});return y.current&&(G(y.current.clientHeight||480),T(y.current.clientWidth||620),s||i.observe(y.current)),()=>i.disconnect()},[s,u]),e.jsxRuntimeExports.jsx("div",{className:`${C||"light"} flex  ${s?"w-fit grow-0":"w-full grow"}`,dir:r==="he"||r==="ar"?"rtl":void 0,children:e.jsxRuntimeExports.jsx("div",{className:e.mo(`${v?v===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${r||"en"}`,s?"w-fit":"w-full",c?.graphContainer),style:{...E?.graphContainer||{},...v&&v!==!0?{backgroundColor:v}:{}},id:et,ref:a,"aria-label":st||`${M?`The graph shows ${M}. `:""}This is a pareto chart that shows a variable as bars and another as line chart.${d?` ${d}`:""}`,children:e.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:v?U||"1rem":U||0},children:e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[M||d||Y||X?e.jsxRuntimeExports.jsx($t.GraphHeader,{styles:{title:E?.title,description:E?.description},classNames:{title:c?.title,description:c?.description},graphTitle:M,graphDescription:d,width:s,graphDownload:Y?a.current:void 0,dataDownload:X?q.map(i=>i.data).filter(i=>i!==void 0).length>0?q.map(i=>i.data).filter(i=>i!==void 0):q.filter(i=>i!==void 0):null}):null,e.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:q.length===0?e.jsxRuntimeExports.jsx(qt.EmptyState,{}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[x?null:e.jsxRuntimeExports.jsx(St.ColorLegend,{colorDomain:[w,Q],colors:[_||xt.Colors[C].categoricalColors.colors[0],z||xt.Colors[C].categoricalColors.colors[1]],colorLegendTitle:H,showNAColor:!1}),e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:y,"aria-label":"Graph area",children:(s||R)&&(u||O)?e.jsxRuntimeExports.jsx(It,{data:q,sameAxes:ut,lineColor:z,barColor:_,width:s||R,height:Math.max(I,u||(m?I?(s||R)*m>I?(s||R)*m:I:(s||R)*m:O)),truncateBy:F,leftMargin:J,rightMargin:D,topMargin:mt,bottomMargin:K,axisTitles:[w,Q],tooltip:Z,onSeriesMouseOver:tt,barPadding:it,showLabels:o,onSeriesMouseClick:l,resetSelectionOnDoubleClick:nt,detailsOnClick:N,noOfTicks:at,lineSuffix:k,barSuffix:$,linePrefix:L,barPrefix:rt,curveType:S,showValues:ht,styles:E,classNames:c,animate:h===!0?{duration:.5,once:!0,amount:.5}:h||{duration:0,once:!0,amount:0},precision:p,customLayers:g,naLabel:n,showAxisLabels:W}):null})]})}),V||b?e.jsxRuntimeExports.jsx(kt.GraphFooter,{styles:{footnote:E?.footnote,source:E?.source},classNames:{footnote:c?.footnote,source:c?.source},sources:V,footNote:b,width:s}):null]})})})})}exports.ParetoChart=Lt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CHPV5EwG-DDoeWRVt.cjs"),j=require("react"),gt=require("./index-BXns0-ng.cjs"),wt=require("./Modal-tXZlLE5s.cjs"),ot=require("./numberFormattingFunction-02t-wJta.cjs"),Et=require("./Tooltip-n8z5bfav.cjs"),Rt=require("./string2HTML-D2Avudmb.cjs"),pt=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),dt=require("./Axis-DE7dSn1_.cjs"),ft=require("./AxisTitle-CK9YeovX.cjs"),At=require("./XAxesLabels-OjBNl_lS.cjs"),Mt=require("./band-CAApY4Pd.cjs"),yt=require("./linear-BVckp9RD.cjs"),jt=require("./line-DHV4JwCR.cjs"),lt=require("./step-BZ3C8QFW.cjs"),Ct=require("./use-in-view-sQJZ_xDO.cjs"),P=require("./proxy-BHRoeZgd.cjs"),Nt=require("./index-BW8iNx7E.cjs"),kt=require("./GraphFooter.cjs"),$t=require("./GraphHeader.cjs"),St=require("./ColorLegend.cjs"),xt=require("./Colors.cjs"),qt=require("./EmptyState-d8_8SxeW.cjs");function It(ct){const{data:q,width:M,height:V,barColor:d,lineColor:u,axisTitles:s,sameAxes:b,rightMargin:U,leftMargin:z,topMargin:_,bottomMargin:ut,tooltip:v,showValues:J,onSeriesMouseOver:D,barPadding:mt,truncateBy:K,showLabels:Q,onSeriesMouseClick:w,resetSelectionOnDoubleClick:Z,detailsOnClick:m,noOfTicks:tt,lineSuffix:et,barSuffix:Y,linePrefix:X,barPrefix:it,curveType:F,styles:o,classNames:l,animate:r,precision:H,customLayers:I,naLabel:C,showAxisLabels:st}=ct,nt=j.useRef(null),N=Ct.useInView(nt,{once:r.once,amount:r.amount}),ht=F==="linear"?jt.curveLinear:F==="step"?lt.curveStep:F==="stepAfter"?lt.stepAfter:F==="stepBefore"?lt.stepBefore:lt.monotoneX,[at,k]=j.useState(void 0),[$,L]=j.useState(void 0),[rt,S]=j.useState(void 0),[E,c]=j.useState(void 0),h={top:_,bottom:ut,left:z+50,right:U+65},p=M-h.left-h.right,g=V-h.top-h.bottom,n=q.map((t,A)=>({...t,id:`${A}`})),x=Mt.band().domain(n.map(t=>`${t.id}`)).range([0,p]).paddingInner(mt),W=Math.min(...n.map(t=>t.bar).filter(t=>t!=null))!==1/0?Math.min(...n.map(t=>t.bar).filter(t=>t!=null))>0?0:Math.min(...n.map(t=>t.bar).filter(t=>t!=null)):0,R=Math.min(...n.map(t=>t.line).filter(t=>t!=null))!==1/0?Math.min(...n.map(t=>t.line).filter(t=>t!=null))>0?0:Math.min(...n.map(t=>t.line).filter(t=>t!=null)):0,T=Math.max(...n.map(t=>t.bar).filter(t=>t!=null))!==1/0?Math.max(...n.map(t=>t.bar).filter(t=>t!=null)):0,O=Math.max(...n.map(t=>t.line).filter(t=>t!=null))!==1/0?Math.max(...n.map(t=>t.line).filter(t=>t!=null)):0,G=W<R?W:R,y=T>O?T:O,a=yt.linear().domain([b?G:W,b?y>0?y:0:T>0?T:0]).range([g,0]).nice(),i=yt.linear().domain([b?G:R,b?y>0?y:0:O>0?O:0]).range([g,0]).nice(),B=jt.line().defined(t=>!pt.checkIfNullOrUndefined(t.line)).x(t=>x(`${t.id}`)+x.bandwidth()/2).y(t=>i(t.line)).curve(ht),bt=a.ticks(tt),vt=i.ticks(tt);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(P.motion.svg,{width:`${M}px`,height:`${V}px`,viewBox:`0 0 ${M} ${V}`,direction:"ltr",ref:nt,children:e.jsxRuntimeExports.jsxs("g",{transform:`translate(${h.left},${h.top})`,children:[e.jsxRuntimeExports.jsxs("g",{children:[bt.map((t,A)=>e.jsxRuntimeExports.jsxs("g",{children:[e.jsxRuntimeExports.jsx("line",{y1:a(t),y2:a(t),x1:-15,x2:-20,style:{stroke:d,strokeWidth:1,...o?.yAxis?.gridLines||{}},className:l?.yAxis?.gridLines}),e.jsxRuntimeExports.jsx("text",{x:-25,y:a(t),dy:"0.33em",className:e.mo("text-xs",l?.yAxis?.labels),style:{textAnchor:"end",fill:d,...o?.yAxis?.labels||{}},children:ot.numberFormattingFunction(t,C,H,it,Y)})]},A)),e.jsxRuntimeExports.jsx(dt.Axis,{y1:0,y2:g,x1:-15,x2:-15,classNames:{axis:l?.xAxis?.axis},styles:{axis:{stroke:d,...o?.xAxis?.axis||{}}}}),st?e.jsxRuntimeExports.jsx(ft.AxisTitle,{x:10-h.left,y:g/2,style:{fill:d,...o?.yAxis?.title||{}},className:l?.yAxis?.title,text:s[0].length>100?`${s[0].substring(0,100)}...`:s[0],rotate90:!0}):null]}),e.jsxRuntimeExports.jsxs("g",{children:[vt.map((t,A)=>e.jsxRuntimeExports.jsxs("g",{children:[e.jsxRuntimeExports.jsx("line",{y1:i(t),y2:i(t),x1:p+15,x2:p+20,style:{stroke:u,strokeWidth:1,...o?.yAxis?.gridLines||{}},className:l?.yAxis?.gridLines}),e.jsxRuntimeExports.jsx("text",{x:p+25,y:i(t),dy:"0.33em",dx:-2,style:{textAnchor:"start",fill:u,...o?.yAxis?.labels||{}},className:e.mo("text-xs",l?.yAxis?.labels),children:ot.numberFormattingFunction(t,C,H,X,et)})]},A)),e.jsxRuntimeExports.jsx(dt.Axis,{y1:0,y2:g,x1:p+15,x2:p+15,classNames:{axis:l?.xAxis?.axis},styles:{axis:{stroke:u,...o?.xAxis?.axis||{}}}}),st?e.jsxRuntimeExports.jsx(ft.AxisTitle,{x:p+h.right-15,y:g/2,style:{fill:u,...o?.yAxis?.title||{}},className:l?.yAxis?.title,text:s[1].length>100?`${s[1].substring(0,100)}...`:s[1],rotate90:!0}):null]}),e.jsxRuntimeExports.jsx(dt.Axis,{y1:b?a(0):g,y2:b?a(0):g,x1:-15,x2:p+15,classNames:{axis:l?.xAxis?.axis},styles:{axis:o?.xAxis?.axis}}),I.filter(t=>t.position==="before").map(t=>t.layer),e.jsxRuntimeExports.jsxs(Nt.AnimatePresence,{children:[n.map((t,A)=>e.jsxRuntimeExports.jsxs(P.motion.g,{className:"undp-viz-g-with-hover",opacity:.85,onMouseEnter:f=>{k(t),c(f.clientY),S(f.clientX),D?.(t)},onClick:()=>{(w||m)&&(gt.isEqual($,t)&&Z?(L(void 0),w?.(void 0)):(L(t),w?.(t)))},onMouseMove:f=>{k(t),c(f.clientY),S(f.clientX)},onMouseLeave:()=>{k(void 0),S(void 0),c(void 0),D?.(void 0)},children:[e.jsxRuntimeExports.jsx(P.motion.rect,{variants:{initial:{attrY:a(0),height:0,opacity:1},whileInView:{attrY:t.bar?t.bar>0?a(t.bar):a(0):0,height:t.bar?Math.abs(a(t.bar)-a(0)):0,opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",exit:{attrY:a(0),height:0,opacity:0,transition:{duration:r.duration}},x:x(`${A}`),width:x.bandwidth(),style:{fill:d}}),J&&!pt.checkIfNullOrUndefined(t.bar)?e.jsxRuntimeExports.jsx(P.motion.text,{x:x(`${t.id}`)+x.bandwidth()/2,exit:{attrY:a(0),opacity:0,transition:{duration:r.duration}},variants:{initial:{attrY:a(0),opacity:0},whileInView:{attrY:a(t.bar||0),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",style:{fill:d,textAnchor:"middle",...o?.graphObjectValues||{}},className:e.mo("graph-value text-sm",l?.graphObjectValues),dy:t.bar?t.bar>=0?"-5px":"1em":"-5px",children:ot.numberFormattingFunction(t.bar,C,H,it,Y)}):null,Q?e.jsxRuntimeExports.jsx(At.XAxesLabels,{value:`${t.label}`.length<K?`${t.label}`:`${`${t.label}`.substring(0,K)}...`,y:g+5,x:x(`${t.id}`),width:x.bandwidth(),height:h.bottom,style:o?.xAxis?.labels,className:l?.xAxis?.labels,alignment:"top",animate:r,isInView:N}):null]},t.label)),e.jsxRuntimeExports.jsx(P.motion.path,{exit:{opacity:0,transition:{duration:r.duration}},variants:{initial:{d:B(n.map(t=>({...t,line:0}))),opacity:0},whileInView:{d:B(n),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",style:{stroke:u,fill:"none",strokeWidth:2}}),n.map((t,A)=>e.jsxRuntimeExports.jsx("g",{children:pt.checkIfNullOrUndefined(t.line)?null:e.jsxRuntimeExports.jsxs("g",{onMouseEnter:f=>{k(t),c(f.clientY),S(f.clientX),D?.(t)},onClick:()=>{(w||m)&&(gt.isEqual($,t)&&Z?(L(void 0),w?.(void 0)):(L(t),w?.(t)))},onMouseMove:f=>{k(t),c(f.clientY),S(f.clientX)},onMouseLeave:()=>{k(void 0),S(void 0),c(void 0),D?.(void 0)},children:[e.jsxRuntimeExports.jsx(P.motion.circle,{exit:{cy:i(0),opacity:0,transition:{duration:r.duration}},variants:{initial:{cy:i(0),opacity:0},whileInView:{cy:i(t.line),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",cx:x(t.id)+x.bandwidth()/2,r:p/n.length<5?0:p/n.length<20?2:4,style:{fill:u}}),J?e.jsxRuntimeExports.jsx(P.motion.text,{x:x(`${t.id}`)+x.bandwidth()/2,exit:{y:i(0),opacity:0,transition:{duration:r.duration}},style:{fill:u,textAnchor:"middle",...o?.graphObjectValues||{}},variants:{initial:{y:i(0),opacity:0},whileInView:{y:i(t.line),opacity:1,transition:{duration:r.duration}}},initial:"initial",animate:N?"whileInView":"initial",className:e.mo("graph-value text-sm",l?.graphObjectValues),dy:"-5px",children:ot.numberFormattingFunction(t.line,C,H,X,et)}):null]})},A))]}),I.filter(t=>t.position==="after").map(t=>t.layer)]})}),at&&v&&rt&&E?e.jsxRuntimeExports.jsx(Et.Tooltip,{data:at,body:v,xPos:rt,yPos:E,backgroundStyle:o?.tooltip,className:l?.tooltip}):null,m&&$!==void 0?e.jsxRuntimeExports.jsx(wt.X,{open:$!==void 0,onClose:()=>{L(void 0)},children:e.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof m=="string"?{__html:Rt.string2HTML(m,$)}:void 0,children:typeof m=="function"?m($):null})}):null]})}function Lt(ct){const{data:q,graphTitle:M,sources:V,graphDescription:d,height:u,width:s,footNote:b,padding:U,lineColor:z=xt.Colors.light.categoricalColors.colors[1],barColor:_=xt.Colors.light.categoricalColors.colors[0],sameAxes:ut=!1,backgroundColor:v=!1,leftMargin:J=80,rightMargin:D=80,topMargin:mt=20,bottomMargin:K=25,lineAxisTitle:Q="Line chart",barAxisTitle:w="Bar graph",tooltip:Z,relativeHeight:m,onSeriesMouseOver:tt,graphID:et,graphDownload:Y=!1,dataDownload:X=!1,barPadding:it=.25,truncateBy:F=999,showLabels:o=!0,onSeriesMouseClick:l,language:r="en",colorLegendTitle:H,minHeight:I=0,theme:C="light",ariaLabel:st,resetSelectionOnDoubleClick:nt=!0,detailsOnClick:N,showValues:ht=!0,noOfTicks:at=5,lineSuffix:k="",barSuffix:$="",linePrefix:L="",barPrefix:rt="",curveType:S="curve",styles:E,classNames:c,animate:h=!1,precision:p=2,customLayers:g=[],naLabel:n="NA",showColorScale:x=!0,showAxisLabels:W=!0}=ct,[R,T]=j.useState(0),[O,G]=j.useState(0),y=j.useRef(null),a=j.useRef(null);return j.useEffect(()=>{const i=new ResizeObserver(B=>{T(s||B[0].target.clientWidth||620),G(u||B[0].target.clientHeight||480)});return y.current&&(G(y.current.clientHeight||480),T(y.current.clientWidth||620),s||i.observe(y.current)),()=>i.disconnect()},[s,u]),e.jsxRuntimeExports.jsx("div",{className:`${C||"light"} flex  ${s?"w-fit grow-0":"w-full grow"}`,dir:r==="he"||r==="ar"?"rtl":void 0,children:e.jsxRuntimeExports.jsx("div",{className:e.mo(`${v?v===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${r||"en"}`,s?"w-fit":"w-full",c?.graphContainer),style:{...E?.graphContainer||{},...v&&v!==!0?{backgroundColor:v}:{}},id:et,ref:a,"aria-label":st||`${M?`The graph shows ${M}. `:""}This is a pareto chart that shows a variable as bars and another as line chart.${d?` ${d}`:""}`,children:e.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:v?U||"1rem":U||0},children:e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[M||d||Y||X?e.jsxRuntimeExports.jsx($t.GraphHeader,{styles:{title:E?.title,description:E?.description},classNames:{title:c?.title,description:c?.description},graphTitle:M,graphDescription:d,width:s,graphDownload:Y?a.current:void 0,dataDownload:X?q.map(i=>i.data).filter(i=>i!==void 0).length>0?q.map(i=>i.data).filter(i=>i!==void 0):q.filter(i=>i!==void 0):null}):null,e.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:q.length===0?e.jsxRuntimeExports.jsx(qt.EmptyState,{}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[x?e.jsxRuntimeExports.jsx(St.ColorLegend,{colorDomain:[w,Q],colors:[_||xt.Colors[C].categoricalColors.colors[0],z||xt.Colors[C].categoricalColors.colors[1]],colorLegendTitle:H,showNAColor:!1}):null,e.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center leading-0",ref:y,"aria-label":"Graph area",children:(s||R)&&(u||O)?e.jsxRuntimeExports.jsx(It,{data:q,sameAxes:ut,lineColor:z,barColor:_,width:s||R,height:Math.max(I,u||(m?I?(s||R)*m>I?(s||R)*m:I:(s||R)*m:O)),truncateBy:F,leftMargin:J,rightMargin:D,topMargin:mt,bottomMargin:K,axisTitles:[w,Q],tooltip:Z,onSeriesMouseOver:tt,barPadding:it,showLabels:o,onSeriesMouseClick:l,resetSelectionOnDoubleClick:nt,detailsOnClick:N,noOfTicks:at,lineSuffix:k,barSuffix:$,linePrefix:L,barPrefix:rt,curveType:S,showValues:ht,styles:E,classNames:c,animate:h===!0?{duration:.5,once:!0,amount:.5}:h||{duration:0,once:!0,amount:0},precision:p,customLayers:g,naLabel:n,showAxisLabels:W}):null})]})}),V||b?e.jsxRuntimeExports.jsx(kt.GraphFooter,{styles:{footnote:E?.footnote,source:E?.source},classNames:{footnote:c?.footnote,source:c?.source},sources:V,footNote:b,width:s}):null]})})})})}exports.ParetoChart=Lt;
 //# sourceMappingURL=ParetoChart.cjs.map

package/dist/ParetoChart.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParetoChart.cjs","sources":["../src/Components/Graphs/ParetoChart/Graph.tsx","../src/Components/Graphs/ParetoChart/index.tsx"],"sourcesContent":["import isEqual from 'fast-deep-equal';\r\nimport { useRef, useState } from 'react';\r\nimport {\r\n line,\r\n curveMonotoneX,\r\n curveLinear,\r\n curveStep,\r\n curveStepAfter,\r\n curveStepBefore,\r\n} from 'd3-shape';\r\nimport { scaleBand, scaleLinear } from 'd3-scale';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport { Modal } from '@undp/design-system-react/Modal';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\n\r\nimport {\r\n AnimateDataType,\r\n ClassNameObject,\r\n CurveTypes,\r\n CustomLayerDataType,\r\n ParetoChartDataType,\r\n StyleObject,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\r\nimport { Axis } from '@/Components/Elements/Axes/Axis';\r\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\r\nimport { XAxesLabels } from '@/Components/Elements/Axes/XAxesLabels';\r\n\r\ninterface Props {\r\n data: ParetoChartDataType[];\r\n barColor: string;\r\n lineColor: string;\r\n axisTitles: [string, string];\r\n width: number;\r\n height: number;\r\n rightMargin: number;\r\n leftMargin: number;\r\n topMargin: number;\r\n bottomMargin: number;\r\n sameAxes: boolean;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n tooltip?: string \| ((_d: any) => React.ReactNode);\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n onSeriesMouseOver?: (_d: any) => void;\r\n barPadding: number;\r\n truncateBy: number;\r\n showLabels: boolean;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n onSeriesMouseClick?: (_d: any) => void;\r\n resetSelectionOnDoubleClick: boolean;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n detailsOnClick?: string \| ((_d: any) => React.ReactNode);\r\n noOfTicks: number;\r\n lineSuffix: string;\r\n barSuffix: string;\r\n linePrefix: string;\r\n showValues: boolean;\r\n barPrefix: string;\r\n curveType: CurveTypes;\r\n styles?: StyleObject;\r\n classNames?: ClassNameObject;\r\n animate: AnimateDataType;\r\n precision: number;\r\n naLabel: string;\r\n customLayers: CustomLayerDataType[];\r\n showAxisLabels: boolean;\r\n}\r\ninterface DataFormattedType {\r\n id: string;\r\n label: number \| string;\r\n line?: number;\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n const {\r\n data,\r\n width,\r\n height,\r\n barColor,\r\n lineColor,\r\n axisTitles,\r\n sameAxes,\r\n rightMargin,\r\n leftMargin,\r\n topMargin,\r\n bottomMargin,\r\n tooltip,\r\n showValues,\r\n onSeriesMouseOver,\r\n barPadding,\r\n truncateBy,\r\n showLabels,\r\n onSeriesMouseClick,\r\n resetSelectionOnDoubleClick,\r\n detailsOnClick,\r\n noOfTicks,\r\n lineSuffix,\r\n barSuffix,\r\n linePrefix,\r\n barPrefix,\r\n curveType,\r\n styles,\r\n classNames,\r\n animate,\r\n precision,\r\n customLayers,\r\n naLabel,\r\n showAxisLabels,\r\n } = props;\r\n const svgRef = useRef(null);\r\n const isInView = useInView(svgRef, {\r\n once: animate.once,\r\n amount: animate.amount,\r\n });\r\n const curve =\r\n curveType === 'linear'\r\n ? curveLinear\r\n : curveType === 'step'\r\n ? curveStep\r\n : curveType === 'stepAfter'\r\n ? curveStepAfter\r\n : curveType === 'stepBefore'\r\n ? curveStepBefore\r\n : curveMonotoneX;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const [mouseOverData, setMouseOverData] = useState<any>(undefined);\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n const [eventX, setEventX] = useState<number \| undefined>(undefined);\r\n const [eventY, setEventY] = useState<number \| undefined>(undefined);\r\n const margin = {\r\n top: topMargin,\r\n bottom: bottomMargin,\r\n left: leftMargin + 50,\r\n right: rightMargin + 65,\r\n };\r\n const graphWidth = width - margin.left - margin.right;\r\n const graphHeight = height - margin.top - margin.bottom;\r\n\r\n const dataWithId = data.map((d, i) => ({ ...d, id: `${i}` }));\r\n const x = scaleBand()\r\n .domain(dataWithId.map(d => `${d.id}`))\r\n .range([0, graphWidth])\r\n .paddingInner(barPadding);\r\n const minParam1 =\r\n Math.min(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null)) !== Infinity\r\n ? Math.min(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null)) > 0\r\n ? 0\r\n : Math.min(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null))\r\n : 0;\r\n const minParam2 =\r\n Math.min(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null)) !== Infinity\r\n ? Math.min(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null)) > 0\r\n ? 0\r\n : Math.min(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null))\r\n : 0;\r\n const maxParam1 =\r\n Math.max(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null)) !== Infinity\r\n ? Math.max(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null))\r\n : 0;\r\n const maxParam2 =\r\n Math.max(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null)) !== Infinity\r\n ? Math.max(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null))\r\n : 0;\r\n\r\n const minParam = minParam1 < minParam2 ? minParam1 : minParam2;\r\n const maxParam = maxParam1 > maxParam2 ? maxParam1 : maxParam2;\r\n\r\n const y1 = scaleLinear()\r\n .domain([\r\n sameAxes ? minParam : minParam1,\r\n sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam1 > 0 ? maxParam1 : 0,\r\n ])\r\n .range([graphHeight, 0])\r\n .nice();\r\n const y2 = scaleLinear()\r\n .domain([\r\n sameAxes ? minParam : minParam2,\r\n sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam2 > 0 ? maxParam2 : 0,\r\n ])\r\n .range([graphHeight, 0])\r\n .nice();\r\n\r\n const lineShape = line<DataFormattedType>()\r\n .defined(d => !checkIfNullOrUndefined(d.line))\r\n .x(d => (x(`${d.id}`) as number) + x.bandwidth() / 2)\r\n .y(d => y2(d.line as number))\r\n .curve(curve);\r\n const y1Ticks = y1.ticks(noOfTicks);\r\n const y2Ticks = y2.ticks(noOfTicks);\r\n return (\r\n <>\r\n <motion.svg\r\n width={`${width}px`}\r\n height={`${height}px`}\r\n viewBox={`0 0 ${width} ${height}`}\r\n direction='ltr'\r\n ref={svgRef}\r\n >\r\n <g transform={`translate(${margin.left},${margin.top})`}>\r\n <g>\r\n {y1Ticks.map((d, i) => (\r\n <g key={i}>\r\n <line\r\n y1={y1(d)}\r\n y2={y1(d)}\r\n x1={-15}\r\n x2={-20}\r\n style={{\r\n stroke: barColor,\r\n strokeWidth: 1,\r\n ...(styles?.yAxis?.gridLines \|\| {}),\r\n }}\r\n className={classNames?.yAxis?.gridLines}\r\n />\r\n <text\r\n x={0 - 25}\r\n y={y1(d)}\r\n dy='0.33em'\r\n className={cn('text-xs', classNames?.yAxis?.labels)}\r\n style={{\r\n textAnchor: 'end',\r\n fill: barColor,\r\n ...(styles?.yAxis?.labels \|\| {}),\r\n }}\r\n >\r\n {numberFormattingFunction(d, naLabel, precision, barPrefix, barSuffix)}\r\n </text>\r\n </g>\r\n ))}\r\n <Axis\r\n y1={0}\r\n y2={graphHeight}\r\n x1={-15}\r\n x2={-15}\r\n classNames={{ axis: classNames?.xAxis?.axis }}\r\n styles={{ axis: { stroke: barColor, ...(styles?.xAxis?.axis \|\| {}) } }}\r\n />\r\n {showAxisLabels ? (\r\n <AxisTitle\r\n x={10 - margin.left}\r\n y={graphHeight / 2}\r\n style={{ fill: barColor, ...(styles?.yAxis?.title \|\| {}) }}\r\n className={classNames?.yAxis?.title}\r\n text={\r\n axisTitles[0].length > 100\r\n ? `${axisTitles[0].substring(0, 100)}...`\r\n : axisTitles[0]\r\n }\r\n rotate90\r\n />\r\n ) : null}\r\n </g>\r\n <g>\r\n {y2Ticks.map((d, i) => (\r\n <g key={i}>\r\n <line\r\n y1={y2(d)}\r\n y2={y2(d)}\r\n x1={graphWidth + 15}\r\n x2={graphWidth + 20}\r\n style={{\r\n stroke: lineColor,\r\n strokeWidth: 1,\r\n ...(styles?.yAxis?.gridLines \|\| {}),\r\n }}\r\n className={classNames?.yAxis?.gridLines}\r\n />\r\n <text\r\n x={graphWidth + 25}\r\n y={y2(d)}\r\n dy='0.33em'\r\n dx={-2}\r\n style={{\r\n textAnchor: 'start',\r\n fill: lineColor,\r\n ...(styles?.yAxis?.labels \|\| {}),\r\n }}\r\n className={cn('text-xs', classNames?.yAxis?.labels)}\r\n >\r\n {numberFormattingFunction(d, naLabel, precision, linePrefix, lineSuffix)}\r\n </text>\r\n </g>\r\n ))}\r\n <Axis\r\n y1={0}\r\n y2={graphHeight}\r\n x1={graphWidth + 15}\r\n x2={graphWidth + 15}\r\n classNames={{ axis: classNames?.xAxis?.axis }}\r\n styles={{ axis: { stroke: lineColor, ...(styles?.xAxis?.axis \|\| {}) } }}\r\n />\r\n {showAxisLabels ? (\r\n <AxisTitle\r\n x={graphWidth + margin.right - 15}\r\n y={graphHeight / 2}\r\n style={{ fill: lineColor, ...(styles?.yAxis?.title \|\| {}) }}\r\n className={classNames?.yAxis?.title}\r\n text={\r\n axisTitles[1].length > 100\r\n ? `${axisTitles[1].substring(0, 100)}...`\r\n : axisTitles[1]\r\n }\r\n rotate90\r\n />\r\n ) : null}\r\n </g>\r\n <Axis\r\n y1={sameAxes ? y1(0) : graphHeight}\r\n y2={sameAxes ? y1(0) : graphHeight}\r\n x1={-15}\r\n x2={graphWidth + 15}\r\n classNames={{ axis: classNames?.xAxis?.axis }}\r\n styles={{ axis: styles?.xAxis?.axis }}\r\n />\r\n {customLayers.filter(d => d.position === 'before').map(d => d.layer)}\r\n <AnimatePresence>\r\n {dataWithId.map((d, i) => {\r\n return (\r\n <motion.g\r\n className='undp-viz-g-with-hover'\r\n key={d.label}\r\n opacity={0.85}\r\n onMouseEnter={event => {\r\n setMouseOverData(d);\r\n setEventY(event.clientY);\r\n setEventX(event.clientX);\r\n onSeriesMouseOver?.(d);\r\n }}\r\n onClick={() => {\r\n if (onSeriesMouseClick \|\| detailsOnClick) {\r\n if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\r\n setMouseClickData(undefined);\r\n onSeriesMouseClick?.(undefined);\r\n } else {\r\n setMouseClickData(d);\r\n onSeriesMouseClick?.(d);\r\n }\r\n }\r\n }}\r\n onMouseMove={event => {\r\n setMouseOverData(d);\r\n setEventY(event.clientY);\r\n setEventX(event.clientX);\r\n }}\r\n onMouseLeave={() => {\r\n setMouseOverData(undefined);\r\n setEventX(undefined);\r\n setEventY(undefined);\r\n onSeriesMouseOver?.(undefined);\r\n }}\r\n >\r\n <motion.rect\r\n variants={{\r\n initial: {\r\n attrY: y1(0),\r\n height: 0,\r\n opacity: 1,\r\n },\r\n whileInView: {\r\n attrY: d.bar ? (d.bar > 0 ? y1(d.bar) : y1(0)) : 0,\r\n height: d.bar ? Math.abs(y1(d.bar) - y1(0)) : 0,\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n exit={{\r\n attrY: y1(0),\r\n height: 0,\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n x={x(`${i}`)}\r\n width={x.bandwidth()}\r\n style={{ fill: barColor }}\r\n />\r\n {showValues && !checkIfNullOrUndefined(d.bar) ? (\r\n <motion.text\r\n x={(x(`${d.id}`) as number) + x.bandwidth() / 2}\r\n exit={{\r\n attrY: y1(0),\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n variants={{\r\n initial: {\r\n attrY: y1(0),\r\n opacity: 0,\r\n },\r\n whileInView: {\r\n attrY: y1(d.bar \|\| 0),\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n style={{\r\n fill: barColor,\r\n textAnchor: 'middle',\r\n ...(styles?.graphObjectValues \|\| {}),\r\n }}\r\n className={cn('graph-value text-sm', classNames?.graphObjectValues)}\r\n dy={d.bar ? (d.bar >= 0 ? '-5px' : '1em') : '-5px'}\r\n >\r\n {numberFormattingFunction(d.bar, naLabel, precision, barPrefix, barSuffix)}\r\n </motion.text>\r\n ) : null}\r\n {showLabels ? (\r\n <XAxesLabels\r\n value={\r\n `${d.label}`.length < truncateBy\r\n ? `${d.label}`\r\n : `${`${d.label}`.substring(0, truncateBy)}...`\r\n }\r\n y={graphHeight + 5}\r\n x={x(`${d.id}`) as number}\r\n width={x.bandwidth()}\r\n height={margin.bottom}\r\n style={styles?.xAxis?.labels}\r\n className={classNames?.xAxis?.labels}\r\n alignment='top'\r\n animate={animate}\r\n isInView={isInView}\r\n />\r\n ) : null}\r\n </motion.g>\r\n );\r\n })}\r\n <motion.path\r\n exit={{\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n variants={{\r\n initial: {\r\n d: lineShape(dataWithId.map(d => ({ ...d, line: 0 }))) as string,\r\n opacity: 0,\r\n },\r\n whileInView: {\r\n d: lineShape(dataWithId) as string,\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n style={{\r\n stroke: lineColor,\r\n fill: 'none',\r\n strokeWidth: 2,\r\n }}\r\n />\r\n {dataWithId.map((d, i) => (\r\n <g key={i}>\r\n {!checkIfNullOrUndefined(d.line) ? (\r\n <g\r\n onMouseEnter={event => {\r\n setMouseOverData(d);\r\n setEventY(event.clientY);\r\n setEventX(event.clientX);\r\n onSeriesMouseOver?.(d);\r\n }}\r\n onClick={() => {\r\n if (onSeriesMouseClick \|\| detailsOnClick) {\r\n if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\r\n setMouseClickData(undefined);\r\n onSeriesMouseClick?.(undefined);\r\n } else {\r\n setMouseClickData(d);\r\n onSeriesMouseClick?.(d);\r\n }\r\n }\r\n }}\r\n onMouseMove={event => {\r\n setMouseOverData(d);\r\n setEventY(event.clientY);\r\n setEventX(event.clientX);\r\n }}\r\n onMouseLeave={() => {\r\n setMouseOverData(undefined);\r\n setEventX(undefined);\r\n setEventY(undefined);\r\n onSeriesMouseOver?.(undefined);\r\n }}\r\n >\r\n <motion.circle\r\n exit={{\r\n cy: y2(0),\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n variants={{\r\n initial: {\r\n cy: y2(0),\r\n opacity: 0,\r\n },\r\n whileInView: {\r\n cy: y2(d.line as number),\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n cx={(x(d.id) as number) + x.bandwidth() / 2}\r\n r={\r\n graphWidth / dataWithId.length < 5\r\n ? 0\r\n : graphWidth / dataWithId.length < 20\r\n ? 2\r\n : 4\r\n }\r\n style={{ fill: lineColor }}\r\n />\r\n {showValues ? (\r\n <motion.text\r\n x={(x(`${d.id}`) as number) + x.bandwidth() / 2}\r\n exit={{\r\n y: y2(0),\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n style={{\r\n fill: lineColor,\r\n textAnchor: 'middle',\r\n ...(styles?.graphObjectValues \|\| {}),\r\n }}\r\n variants={{\r\n initial: {\r\n y: y2(0),\r\n opacity: 0,\r\n },\r\n whileInView: {\r\n y: y2(d.line as number),\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n className={cn('graph-value text-sm', classNames?.graphObjectValues)}\r\n dy='-5px'\r\n >\r\n {numberFormattingFunction(\r\n d.line,\r\n naLabel,\r\n precision,\r\n linePrefix,\r\n lineSuffix,\r\n )}\r\n </motion.text>\r\n ) : null}\r\n </g>\r\n ) : null}\r\n </g>\r\n ))}\r\n </AnimatePresence>\r\n {customLayers.filter(d => d.position === 'after').map(d => d.layer)}\r\n </g>\r\n </motion.svg>\r\n {mouseOverData && tooltip && eventX && eventY ? (\r\n <Tooltip\r\n data={mouseOverData}\r\n body={tooltip}\r\n xPos={eventX}\r\n yPos={eventY}\r\n backgroundStyle={styles?.tooltip}\r\n className={classNames?.tooltip}\r\n />\r\n ) : null}\r\n {detailsOnClick && mouseClickData !== undefined ? (\r\n <Modal\r\n open={mouseClickData !== undefined}\r\n onClose={() => {\r\n setMouseClickData(undefined);\r\n }}\r\n >\r\n <div\r\n className='graph-modal-content m-0'\r\n dangerouslySetInnerHTML={\r\n typeof detailsOnClick === 'string'\r\n ? { __html: string2HTML(detailsOnClick, mouseClickData) }\r\n : undefined\r\n }\r\n >\r\n {typeof detailsOnClick === 'function' ? detailsOnClick(mouseClickData) : null}\r\n </div>\r\n </Modal>\r\n ) : null}\r\n </>\r\n );\r\n}\r\n","import { useState, useRef, useEffect } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { ColorLegend } from '@/Components/Elements/ColorLegend';\r\nimport {\r\n Languages,\r\n ParetoChartDataType,\r\n SourcesDataType,\r\n StyleObject,\r\n ClassNameObject,\r\n CurveTypes,\r\n CustomLayerDataType,\r\n AnimateDataType,\r\n} from '@/Types';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { EmptyState } from '@/Components/Elements/EmptyState';\r\n\r\ninterface Props {\r\n // Data\r\n /** Array of data objects /\r\n data: ParetoChartDataType[];\r\n\r\n // Titles, Labels, and Sources\r\n /* Title of the graph /\r\n graphTitle?: string \| React.ReactNode;\r\n /* Description of the graph /\r\n graphDescription?: string \| React.ReactNode;\r\n /* Footnote for the graph /\r\n footNote?: string \| React.ReactNode;\r\n /* Source data for the graph /\r\n sources?: SourcesDataType[];\r\n /* Accessibility label /\r\n ariaLabel?: string;\r\n\r\n // Colors and Styling\r\n /* Color of the bars /\r\n barColor?: string;\r\n /* Color of the line /\r\n lineColor?: string;\r\n /* Title for the color legend /\r\n colorLegendTitle?: string;\r\n /* Background color of the graph /\r\n backgroundColor?: string \| boolean;\r\n /* Custom styles for the graph. Each object should be a valid React CSS style object. /\r\n styles?: StyleObject;\r\n /* Custom class names /\r\n classNames?: ClassNameObject;\r\n\r\n // Size and Spacing\r\n /* Width of the graph /\r\n width?: number;\r\n /* Height of the graph /\r\n height?: number;\r\n /* Minimum height of the graph /\r\n minHeight?: number;\r\n /* Relative height scaling factor. This overwrites the height props /\r\n relativeHeight?: number;\r\n /* Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem /\r\n padding?: string;\r\n /* Left margin of the graph /\r\n leftMargin?: number;\r\n /* Right margin of the graph /\r\n rightMargin?: number;\r\n /* Top margin of the graph /\r\n topMargin?: number;\r\n /* Bottom margin of the graph /\r\n bottomMargin?: number;\r\n /* Padding between bars /\r\n barPadding?: number;\r\n\r\n // Values and Ticks\r\n /* Suffix for values of the lines /\r\n lineSuffix?: string;\r\n /* Suffix for values of the bars /\r\n barSuffix?: string;\r\n /* Prefix for values of the lines /\r\n linePrefix?: string;\r\n /* Prefix for values of the bars /\r\n barPrefix?: string;\r\n /* Truncate labels by specified length /\r\n truncateBy?: number;\r\n /* Number of ticks on the axis /\r\n noOfTicks?: number;\r\n\r\n // Graph Parameters\r\n /* Toggle visibility of labels /\r\n showLabels?: boolean;\r\n /* Toggle visibility of values /\r\n showValues?: boolean;\r\n /* Curve type for the line /\r\n curveType?: CurveTypes;\r\n /* Enables same axis for bars and line /\r\n sameAxes?: boolean;\r\n /* Toggle visibility of color scale. /\r\n showColorScale?: boolean;\r\n /* Toggle visibility of labels of the axis. /\r\n showAxisLabels?: boolean;\r\n /* Title for the bar axis /\r\n barAxisTitle?: string;\r\n /* Title for the line axis /\r\n lineAxisTitle?: string;\r\n /* Defines how “NA” values should be displayed/labelled in the graph /\r\n naLabel?: string;\r\n /* Toggles if the graph animates in when loaded. /\r\n animate?: boolean \| AnimateDataType;\r\n /* Specifies the number of decimal places to display in the value. /\r\n precision?: number;\r\n /* Optional SVG <g> element or function that renders custom content behind or in front of the graph. /\r\n customLayers?: CustomLayerDataType[];\r\n /* Enable graph download option as png /\r\n graphDownload?: boolean;\r\n /* Enable data download option as a csv /\r\n dataDownload?: boolean;\r\n /* Reset selection on double-click. Only applicable when used in a dashboard context with filters. /\r\n resetSelectionOnDoubleClick?: boolean;\r\n\r\n // Interactions and Callbacks\r\n /* 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 /\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n tooltip?: string \| ((_d: any) => React.ReactNode);\r\n /* Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data /\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n detailsOnClick?: string \| ((_d: any) => React.ReactNode);\r\n /* Callback for mouse over event /\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n onSeriesMouseOver?: (_d: any) => void;\r\n /* Callback for mouse click event /\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n onSeriesMouseClick?: (_d: any) => void;\r\n\r\n // Configuration and Options\r\n /* Language setting /\r\n language?: Languages;\r\n /* Color theme /\r\n theme?: 'light' \| 'dark';\r\n /* Unique ID for the graph /\r\n graphID?: string;\r\n}\r\n\r\nexport function ParetoChart(props: Props) {\r\n const {\r\n data,\r\n graphTitle,\r\n sources,\r\n graphDescription,\r\n height,\r\n width,\r\n footNote,\r\n padding,\r\n lineColor = Colors.light.categoricalColors.colors[1],\r\n barColor = Colors.light.categoricalColors.colors[0],\r\n sameAxes = false,\r\n backgroundColor = false,\r\n leftMargin = 80,\r\n rightMargin = 80,\r\n topMargin = 20,\r\n bottomMargin = 25,\r\n lineAxisTitle = 'Line chart',\r\n barAxisTitle = 'Bar graph',\r\n tooltip,\r\n relativeHeight,\r\n onSeriesMouseOver,\r\n graphID,\r\n graphDownload = false,\r\n dataDownload = false,\r\n barPadding = 0.25,\r\n truncateBy = 999,\r\n showLabels = true,\r\n onSeriesMouseClick,\r\n language = 'en',\r\n colorLegendTitle,\r\n minHeight = 0,\r\n theme = 'light',\r\n ariaLabel,\r\n resetSelectionOnDoubleClick = true,\r\n detailsOnClick,\r\n showValues = true,\r\n noOfTicks = 5,\r\n lineSuffix = '',\r\n barSuffix = '',\r\n linePrefix = '',\r\n barPrefix = '',\r\n curveType = 'curve',\r\n styles,\r\n classNames,\r\n animate = false,\r\n precision = 2,\r\n customLayers = [],\r\n naLabel = 'NA',\r\n showColorScale = true,\r\n showAxisLabels = true,\r\n } = props;\r\n\r\n const [svgWidth, setSvgWidth] = useState(0);\r\n const [svgHeight, setSvgHeight] = useState(0);\r\n\r\n const graphDiv = useRef<HTMLDivElement>(null);\r\n const graphParentDiv = useRef<HTMLDivElement>(null);\r\n useEffect(() => {\r\n const resizeObserver = new ResizeObserver(entries => {\r\n setSvgWidth(width \|\| entries[0].target.clientWidth \|\| 620);\r\n setSvgHeight(height \|\| entries[0].target.clientHeight \|\| 480);\r\n });\r\n if (graphDiv.current) {\r\n setSvgHeight(graphDiv.current.clientHeight \|\| 480);\r\n setSvgWidth(graphDiv.current.clientWidth \|\| 620);\r\n if (!width) resizeObserver.observe(graphDiv.current);\r\n }\r\n return () => resizeObserver.disconnect();\r\n }, [width, height]);\r\n\r\n return (\r\n <div\r\n className={`${theme \|\| 'light'} flex ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n dir={language === 'he' \|\| language === 'ar' ? 'rtl' : undefined}\r\n >\r\n <div\r\n className={cn(\r\n `${\r\n !backgroundColor\r\n ? 'bg-transparent '\r\n : backgroundColor === true\r\n ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n : ''\r\n }ml-auto mr-auto flex flex-col grow h-inherit ${language \|\| 'en'}`,\r\n width ? 'w-fit' : 'w-full',\r\n classNames?.graphContainer,\r\n )}\r\n style={{\r\n ...(styles?.graphContainer \|\| {}),\r\n ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n }}\r\n id={graphID}\r\n ref={graphParentDiv}\r\n aria-label={\r\n ariaLabel \|\|\r\n `${\r\n graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n }This is a pareto chart that shows a variable as bars and another as line chart.${\r\n graphDescription ? ` ${graphDescription}` : ''\r\n }`\r\n }\r\n >\r\n <div\r\n className='flex grow'\r\n style={{ padding: backgroundColor ? padding \|\| '1rem' : padding \|\| 0 }}\r\n >\r\n <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n {graphTitle \|\| graphDescription \|\| graphDownload \|\| dataDownload ? (\r\n <GraphHeader\r\n styles={{\r\n title: styles?.title,\r\n description: styles?.description,\r\n }}\r\n classNames={{\r\n title: classNames?.title,\r\n description: classNames?.description,\r\n }}\r\n graphTitle={graphTitle}\r\n graphDescription={graphDescription}\r\n width={width}\r\n graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n dataDownload={\r\n dataDownload\r\n ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n ? data.map(d => d.data).filter(d => d !== undefined)\r\n : data.filter(d => d !== undefined)\r\n : null\r\n }\r\n />\r\n ) : null}\r\n <div className='grow flex flex-col justify-center gap-3 w-full'>\r\n {data.length === 0 ? (\r\n <EmptyState />\r\n ) : (\r\n <>\r\n {showColorScale ? null : (\r\n <ColorLegend\r\n colorDomain={[barAxisTitle, lineAxisTitle]}\r\n colors={[\r\n barColor \|\| Colors[theme].categoricalColors.colors[0],\r\n lineColor \|\| Colors[theme].categoricalColors.colors[1],\r\n ]}\r\n colorLegendTitle={colorLegendTitle}\r\n showNAColor={false}\r\n />\r\n )}\r\n <div\r\n className='flex flex-col grow justify-center leading-0'\r\n ref={graphDiv}\r\n aria-label='Graph area'\r\n >\r\n {(width \|\| svgWidth) && (height \|\| svgHeight) ? (\r\n <Graph\r\n data={data}\r\n sameAxes={sameAxes}\r\n lineColor={lineColor}\r\n barColor={barColor}\r\n width={width \|\| svgWidth}\r\n height={Math.max(\r\n minHeight,\r\n height \|\|\r\n (relativeHeight\r\n ? minHeight\r\n ? (width \|\| svgWidth) relativeHeight > minHeight\r\n ? (width \|\| svgWidth) * relativeHeight\r\n : minHeight\r\n : (width \|\| svgWidth) * relativeHeight\r\n : svgHeight),\r\n )}\r\n truncateBy={truncateBy}\r\n leftMargin={leftMargin}\r\n rightMargin={rightMargin}\r\n topMargin={topMargin}\r\n bottomMargin={bottomMargin}\r\n axisTitles={[barAxisTitle, lineAxisTitle]}\r\n tooltip={tooltip}\r\n onSeriesMouseOver={onSeriesMouseOver}\r\n barPadding={barPadding}\r\n showLabels={showLabels}\r\n onSeriesMouseClick={onSeriesMouseClick}\r\n resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n detailsOnClick={detailsOnClick}\r\n noOfTicks={noOfTicks}\r\n lineSuffix={lineSuffix}\r\n barSuffix={barSuffix}\r\n linePrefix={linePrefix}\r\n barPrefix={barPrefix}\r\n curveType={curveType}\r\n showValues={showValues}\r\n styles={styles}\r\n classNames={classNames}\r\n animate={\r\n animate === true\r\n ? { duration: 0.5, once: true, amount: 0.5 }\r\n : animate \|\| { duration: 0, once: true, amount: 0 }\r\n }\r\n precision={precision}\r\n customLayers={customLayers}\r\n naLabel={naLabel}\r\n showAxisLabels={showAxisLabels}\r\n />\r\n ) : null}\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n {sources \|\| footNote ? (\r\n <GraphFooter\r\n styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n classNames={{\r\n footnote: classNames?.footnote,\r\n source: classNames?.source,\r\n }}\r\n sources={sources}\r\n footNote={footNote}\r\n width={width}\r\n />\r\n ) : null}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n"],"names":["Graph","props","data","width","height","barColor","lineColor","axisTitles","sameAxes","rightMargin","leftMargin","topMargin","bottomMargin","tooltip","showValues","onSeriesMouseOver","barPadding","truncateBy","showLabels","onSeriesMouseClick","resetSelectionOnDoubleClick","detailsOnClick","noOfTicks","lineSuffix","barSuffix","linePrefix","barPrefix","curveType","styles","classNames","animate","precision","customLayers","naLabel","showAxisLabels","svgRef","useRef","isInView","useInView","curve","curveLinear","curveStep","curveStepAfter","curveStepBefore","curveMonotoneX","mouseOverData","setMouseOverData","useState","mouseClickData","setMouseClickData","eventX","setEventX","eventY","setEventY","margin","graphWidth","graphHeight","dataWithId","d","i","scaleBand","minParam1","minParam2","maxParam1","maxParam2","minParam","maxParam","y1","scaleLinear","y2","lineShape","line","checkIfNullOrUndefined","y1Ticks","y2Ticks","jsxs","Fragment","jsx","motion","cn","numberFormattingFunction","Axis","AxisTitle","AnimatePresence","event","isEqual","XAxesLabels","Tooltip","Modal","string2HTML","ParetoChart","graphTitle","sources","graphDescription","footNote","padding","Colors","backgroundColor","lineAxisTitle","barAxisTitle","relativeHeight","graphID","graphDownload","dataDownload","language","colorLegendTitle","minHeight","theme","ariaLabel","showColorScale","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","graphParentDiv","useEffect","resizeObserver","entries","GraphHeader","EmptyState","ColorLegend","GraphFooter"],"mappings":"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"}
1	+ {"version":3,"file":"ParetoChart.cjs","sources":["../src/Components/Graphs/ParetoChart/Graph.tsx","../src/Components/Graphs/ParetoChart/index.tsx"],"sourcesContent":["import isEqual from 'fast-deep-equal';\r\nimport { useRef, useState } from 'react';\r\nimport {\r\n line,\r\n curveMonotoneX,\r\n curveLinear,\r\n curveStep,\r\n curveStepAfter,\r\n curveStepBefore,\r\n} from 'd3-shape';\r\nimport { scaleBand, scaleLinear } from 'd3-scale';\r\nimport { cn } from '@undp/design-system-react/cn';\r\nimport { Modal } from '@undp/design-system-react/Modal';\r\nimport { AnimatePresence, motion, useInView } from 'motion/react';\r\n\r\nimport {\r\n AnimateDataType,\r\n ClassNameObject,\r\n CurveTypes,\r\n CustomLayerDataType,\r\n ParetoChartDataType,\r\n StyleObject,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { Tooltip } from '@/Components/Elements/Tooltip';\r\nimport { string2HTML } from '@/Utils/string2HTML';\r\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\r\nimport { Axis } from '@/Components/Elements/Axes/Axis';\r\nimport { AxisTitle } from '@/Components/Elements/Axes/AxisTitle';\r\nimport { XAxesLabels } from '@/Components/Elements/Axes/XAxesLabels';\r\n\r\ninterface Props {\r\n data: ParetoChartDataType[];\r\n barColor: string;\r\n lineColor: string;\r\n axisTitles: [string, string];\r\n width: number;\r\n height: number;\r\n rightMargin: number;\r\n leftMargin: number;\r\n topMargin: number;\r\n bottomMargin: number;\r\n sameAxes: boolean;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n tooltip?: string \| ((_d: any) => React.ReactNode);\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n onSeriesMouseOver?: (_d: any) => void;\r\n barPadding: number;\r\n truncateBy: number;\r\n showLabels: boolean;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n onSeriesMouseClick?: (_d: any) => void;\r\n resetSelectionOnDoubleClick: boolean;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n detailsOnClick?: string \| ((_d: any) => React.ReactNode);\r\n noOfTicks: number;\r\n lineSuffix: string;\r\n barSuffix: string;\r\n linePrefix: string;\r\n showValues: boolean;\r\n barPrefix: string;\r\n curveType: CurveTypes;\r\n styles?: StyleObject;\r\n classNames?: ClassNameObject;\r\n animate: AnimateDataType;\r\n precision: number;\r\n naLabel: string;\r\n customLayers: CustomLayerDataType[];\r\n showAxisLabels: boolean;\r\n}\r\ninterface DataFormattedType {\r\n id: string;\r\n label: number \| string;\r\n line?: number;\r\n}\r\n\r\nexport function Graph(props: Props) {\r\n const {\r\n data,\r\n width,\r\n height,\r\n barColor,\r\n lineColor,\r\n axisTitles,\r\n sameAxes,\r\n rightMargin,\r\n leftMargin,\r\n topMargin,\r\n bottomMargin,\r\n tooltip,\r\n showValues,\r\n onSeriesMouseOver,\r\n barPadding,\r\n truncateBy,\r\n showLabels,\r\n onSeriesMouseClick,\r\n resetSelectionOnDoubleClick,\r\n detailsOnClick,\r\n noOfTicks,\r\n lineSuffix,\r\n barSuffix,\r\n linePrefix,\r\n barPrefix,\r\n curveType,\r\n styles,\r\n classNames,\r\n animate,\r\n precision,\r\n customLayers,\r\n naLabel,\r\n showAxisLabels,\r\n } = props;\r\n const svgRef = useRef(null);\r\n const isInView = useInView(svgRef, {\r\n once: animate.once,\r\n amount: animate.amount,\r\n });\r\n const curve =\r\n curveType === 'linear'\r\n ? curveLinear\r\n : curveType === 'step'\r\n ? curveStep\r\n : curveType === 'stepAfter'\r\n ? curveStepAfter\r\n : curveType === 'stepBefore'\r\n ? curveStepBefore\r\n : curveMonotoneX;\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const [mouseOverData, setMouseOverData] = useState<any>(undefined);\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n const [eventX, setEventX] = useState<number \| undefined>(undefined);\r\n const [eventY, setEventY] = useState<number \| undefined>(undefined);\r\n const margin = {\r\n top: topMargin,\r\n bottom: bottomMargin,\r\n left: leftMargin + 50,\r\n right: rightMargin + 65,\r\n };\r\n const graphWidth = width - margin.left - margin.right;\r\n const graphHeight = height - margin.top - margin.bottom;\r\n\r\n const dataWithId = data.map((d, i) => ({ ...d, id: `${i}` }));\r\n const x = scaleBand()\r\n .domain(dataWithId.map(d => `${d.id}`))\r\n .range([0, graphWidth])\r\n .paddingInner(barPadding);\r\n const minParam1 =\r\n Math.min(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null)) !== Infinity\r\n ? Math.min(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null)) > 0\r\n ? 0\r\n : Math.min(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null))\r\n : 0;\r\n const minParam2 =\r\n Math.min(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null)) !== Infinity\r\n ? Math.min(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null)) > 0\r\n ? 0\r\n : Math.min(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null))\r\n : 0;\r\n const maxParam1 =\r\n Math.max(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null)) !== Infinity\r\n ? Math.max(...dataWithId.map(d => d.bar).filter(d => d !== undefined && d !== null))\r\n : 0;\r\n const maxParam2 =\r\n Math.max(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null)) !== Infinity\r\n ? Math.max(...dataWithId.map(d => d.line).filter(d => d !== undefined && d !== null))\r\n : 0;\r\n\r\n const minParam = minParam1 < minParam2 ? minParam1 : minParam2;\r\n const maxParam = maxParam1 > maxParam2 ? maxParam1 : maxParam2;\r\n\r\n const y1 = scaleLinear()\r\n .domain([\r\n sameAxes ? minParam : minParam1,\r\n sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam1 > 0 ? maxParam1 : 0,\r\n ])\r\n .range([graphHeight, 0])\r\n .nice();\r\n const y2 = scaleLinear()\r\n .domain([\r\n sameAxes ? minParam : minParam2,\r\n sameAxes ? (maxParam > 0 ? maxParam : 0) : maxParam2 > 0 ? maxParam2 : 0,\r\n ])\r\n .range([graphHeight, 0])\r\n .nice();\r\n\r\n const lineShape = line<DataFormattedType>()\r\n .defined(d => !checkIfNullOrUndefined(d.line))\r\n .x(d => (x(`${d.id}`) as number) + x.bandwidth() / 2)\r\n .y(d => y2(d.line as number))\r\n .curve(curve);\r\n const y1Ticks = y1.ticks(noOfTicks);\r\n const y2Ticks = y2.ticks(noOfTicks);\r\n return (\r\n <>\r\n <motion.svg\r\n width={`${width}px`}\r\n height={`${height}px`}\r\n viewBox={`0 0 ${width} ${height}`}\r\n direction='ltr'\r\n ref={svgRef}\r\n >\r\n <g transform={`translate(${margin.left},${margin.top})`}>\r\n <g>\r\n {y1Ticks.map((d, i) => (\r\n <g key={i}>\r\n <line\r\n y1={y1(d)}\r\n y2={y1(d)}\r\n x1={-15}\r\n x2={-20}\r\n style={{\r\n stroke: barColor,\r\n strokeWidth: 1,\r\n ...(styles?.yAxis?.gridLines \|\| {}),\r\n }}\r\n className={classNames?.yAxis?.gridLines}\r\n />\r\n <text\r\n x={0 - 25}\r\n y={y1(d)}\r\n dy='0.33em'\r\n className={cn('text-xs', classNames?.yAxis?.labels)}\r\n style={{\r\n textAnchor: 'end',\r\n fill: barColor,\r\n ...(styles?.yAxis?.labels \|\| {}),\r\n }}\r\n >\r\n {numberFormattingFunction(d, naLabel, precision, barPrefix, barSuffix)}\r\n </text>\r\n </g>\r\n ))}\r\n <Axis\r\n y1={0}\r\n y2={graphHeight}\r\n x1={-15}\r\n x2={-15}\r\n classNames={{ axis: classNames?.xAxis?.axis }}\r\n styles={{ axis: { stroke: barColor, ...(styles?.xAxis?.axis \|\| {}) } }}\r\n />\r\n {showAxisLabels ? (\r\n <AxisTitle\r\n x={10 - margin.left}\r\n y={graphHeight / 2}\r\n style={{ fill: barColor, ...(styles?.yAxis?.title \|\| {}) }}\r\n className={classNames?.yAxis?.title}\r\n text={\r\n axisTitles[0].length > 100\r\n ? `${axisTitles[0].substring(0, 100)}...`\r\n : axisTitles[0]\r\n }\r\n rotate90\r\n />\r\n ) : null}\r\n </g>\r\n <g>\r\n {y2Ticks.map((d, i) => (\r\n <g key={i}>\r\n <line\r\n y1={y2(d)}\r\n y2={y2(d)}\r\n x1={graphWidth + 15}\r\n x2={graphWidth + 20}\r\n style={{\r\n stroke: lineColor,\r\n strokeWidth: 1,\r\n ...(styles?.yAxis?.gridLines \|\| {}),\r\n }}\r\n className={classNames?.yAxis?.gridLines}\r\n />\r\n <text\r\n x={graphWidth + 25}\r\n y={y2(d)}\r\n dy='0.33em'\r\n dx={-2}\r\n style={{\r\n textAnchor: 'start',\r\n fill: lineColor,\r\n ...(styles?.yAxis?.labels \|\| {}),\r\n }}\r\n className={cn('text-xs', classNames?.yAxis?.labels)}\r\n >\r\n {numberFormattingFunction(d, naLabel, precision, linePrefix, lineSuffix)}\r\n </text>\r\n </g>\r\n ))}\r\n <Axis\r\n y1={0}\r\n y2={graphHeight}\r\n x1={graphWidth + 15}\r\n x2={graphWidth + 15}\r\n classNames={{ axis: classNames?.xAxis?.axis }}\r\n styles={{ axis: { stroke: lineColor, ...(styles?.xAxis?.axis \|\| {}) } }}\r\n />\r\n {showAxisLabels ? (\r\n <AxisTitle\r\n x={graphWidth + margin.right - 15}\r\n y={graphHeight / 2}\r\n style={{ fill: lineColor, ...(styles?.yAxis?.title \|\| {}) }}\r\n className={classNames?.yAxis?.title}\r\n text={\r\n axisTitles[1].length > 100\r\n ? `${axisTitles[1].substring(0, 100)}...`\r\n : axisTitles[1]\r\n }\r\n rotate90\r\n />\r\n ) : null}\r\n </g>\r\n <Axis\r\n y1={sameAxes ? y1(0) : graphHeight}\r\n y2={sameAxes ? y1(0) : graphHeight}\r\n x1={-15}\r\n x2={graphWidth + 15}\r\n classNames={{ axis: classNames?.xAxis?.axis }}\r\n styles={{ axis: styles?.xAxis?.axis }}\r\n />\r\n {customLayers.filter(d => d.position === 'before').map(d => d.layer)}\r\n <AnimatePresence>\r\n {dataWithId.map((d, i) => {\r\n return (\r\n <motion.g\r\n className='undp-viz-g-with-hover'\r\n key={d.label}\r\n opacity={0.85}\r\n onMouseEnter={event => {\r\n setMouseOverData(d);\r\n setEventY(event.clientY);\r\n setEventX(event.clientX);\r\n onSeriesMouseOver?.(d);\r\n }}\r\n onClick={() => {\r\n if (onSeriesMouseClick \|\| detailsOnClick) {\r\n if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\r\n setMouseClickData(undefined);\r\n onSeriesMouseClick?.(undefined);\r\n } else {\r\n setMouseClickData(d);\r\n onSeriesMouseClick?.(d);\r\n }\r\n }\r\n }}\r\n onMouseMove={event => {\r\n setMouseOverData(d);\r\n setEventY(event.clientY);\r\n setEventX(event.clientX);\r\n }}\r\n onMouseLeave={() => {\r\n setMouseOverData(undefined);\r\n setEventX(undefined);\r\n setEventY(undefined);\r\n onSeriesMouseOver?.(undefined);\r\n }}\r\n >\r\n <motion.rect\r\n variants={{\r\n initial: {\r\n attrY: y1(0),\r\n height: 0,\r\n opacity: 1,\r\n },\r\n whileInView: {\r\n attrY: d.bar ? (d.bar > 0 ? y1(d.bar) : y1(0)) : 0,\r\n height: d.bar ? Math.abs(y1(d.bar) - y1(0)) : 0,\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n exit={{\r\n attrY: y1(0),\r\n height: 0,\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n x={x(`${i}`)}\r\n width={x.bandwidth()}\r\n style={{ fill: barColor }}\r\n />\r\n {showValues && !checkIfNullOrUndefined(d.bar) ? (\r\n <motion.text\r\n x={(x(`${d.id}`) as number) + x.bandwidth() / 2}\r\n exit={{\r\n attrY: y1(0),\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n variants={{\r\n initial: {\r\n attrY: y1(0),\r\n opacity: 0,\r\n },\r\n whileInView: {\r\n attrY: y1(d.bar \|\| 0),\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n style={{\r\n fill: barColor,\r\n textAnchor: 'middle',\r\n ...(styles?.graphObjectValues \|\| {}),\r\n }}\r\n className={cn('graph-value text-sm', classNames?.graphObjectValues)}\r\n dy={d.bar ? (d.bar >= 0 ? '-5px' : '1em') : '-5px'}\r\n >\r\n {numberFormattingFunction(d.bar, naLabel, precision, barPrefix, barSuffix)}\r\n </motion.text>\r\n ) : null}\r\n {showLabels ? (\r\n <XAxesLabels\r\n value={\r\n `${d.label}`.length < truncateBy\r\n ? `${d.label}`\r\n : `${`${d.label}`.substring(0, truncateBy)}...`\r\n }\r\n y={graphHeight + 5}\r\n x={x(`${d.id}`) as number}\r\n width={x.bandwidth()}\r\n height={margin.bottom}\r\n style={styles?.xAxis?.labels}\r\n className={classNames?.xAxis?.labels}\r\n alignment='top'\r\n animate={animate}\r\n isInView={isInView}\r\n />\r\n ) : null}\r\n </motion.g>\r\n );\r\n })}\r\n <motion.path\r\n exit={{\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n variants={{\r\n initial: {\r\n d: lineShape(dataWithId.map(d => ({ ...d, line: 0 }))) as string,\r\n opacity: 0,\r\n },\r\n whileInView: {\r\n d: lineShape(dataWithId) as string,\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n style={{\r\n stroke: lineColor,\r\n fill: 'none',\r\n strokeWidth: 2,\r\n }}\r\n />\r\n {dataWithId.map((d, i) => (\r\n <g key={i}>\r\n {!checkIfNullOrUndefined(d.line) ? (\r\n <g\r\n onMouseEnter={event => {\r\n setMouseOverData(d);\r\n setEventY(event.clientY);\r\n setEventX(event.clientX);\r\n onSeriesMouseOver?.(d);\r\n }}\r\n onClick={() => {\r\n if (onSeriesMouseClick \|\| detailsOnClick) {\r\n if (isEqual(mouseClickData, d) && resetSelectionOnDoubleClick) {\r\n setMouseClickData(undefined);\r\n onSeriesMouseClick?.(undefined);\r\n } else {\r\n setMouseClickData(d);\r\n onSeriesMouseClick?.(d);\r\n }\r\n }\r\n }}\r\n onMouseMove={event => {\r\n setMouseOverData(d);\r\n setEventY(event.clientY);\r\n setEventX(event.clientX);\r\n }}\r\n onMouseLeave={() => {\r\n setMouseOverData(undefined);\r\n setEventX(undefined);\r\n setEventY(undefined);\r\n onSeriesMouseOver?.(undefined);\r\n }}\r\n >\r\n <motion.circle\r\n exit={{\r\n cy: y2(0),\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n variants={{\r\n initial: {\r\n cy: y2(0),\r\n opacity: 0,\r\n },\r\n whileInView: {\r\n cy: y2(d.line as number),\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n cx={(x(d.id) as number) + x.bandwidth() / 2}\r\n r={\r\n graphWidth / dataWithId.length < 5\r\n ? 0\r\n : graphWidth / dataWithId.length < 20\r\n ? 2\r\n : 4\r\n }\r\n style={{ fill: lineColor }}\r\n />\r\n {showValues ? (\r\n <motion.text\r\n x={(x(`${d.id}`) as number) + x.bandwidth() / 2}\r\n exit={{\r\n y: y2(0),\r\n opacity: 0,\r\n transition: { duration: animate.duration },\r\n }}\r\n style={{\r\n fill: lineColor,\r\n textAnchor: 'middle',\r\n ...(styles?.graphObjectValues \|\| {}),\r\n }}\r\n variants={{\r\n initial: {\r\n y: y2(0),\r\n opacity: 0,\r\n },\r\n whileInView: {\r\n y: y2(d.line as number),\r\n opacity: 1,\r\n transition: { duration: animate.duration },\r\n },\r\n }}\r\n initial='initial'\r\n animate={isInView ? 'whileInView' : 'initial'}\r\n className={cn('graph-value text-sm', classNames?.graphObjectValues)}\r\n dy='-5px'\r\n >\r\n {numberFormattingFunction(\r\n d.line,\r\n naLabel,\r\n precision,\r\n linePrefix,\r\n lineSuffix,\r\n )}\r\n </motion.text>\r\n ) : null}\r\n </g>\r\n ) : null}\r\n </g>\r\n ))}\r\n </AnimatePresence>\r\n {customLayers.filter(d => d.position === 'after').map(d => d.layer)}\r\n </g>\r\n </motion.svg>\r\n {mouseOverData && tooltip && eventX && eventY ? (\r\n <Tooltip\r\n data={mouseOverData}\r\n body={tooltip}\r\n xPos={eventX}\r\n yPos={eventY}\r\n backgroundStyle={styles?.tooltip}\r\n className={classNames?.tooltip}\r\n />\r\n ) : null}\r\n {detailsOnClick && mouseClickData !== undefined ? (\r\n <Modal\r\n open={mouseClickData !== undefined}\r\n onClose={() => {\r\n setMouseClickData(undefined);\r\n }}\r\n >\r\n <div\r\n className='graph-modal-content m-0'\r\n dangerouslySetInnerHTML={\r\n typeof detailsOnClick === 'string'\r\n ? { __html: string2HTML(detailsOnClick, mouseClickData) }\r\n : undefined\r\n }\r\n >\r\n {typeof detailsOnClick === 'function' ? detailsOnClick(mouseClickData) : null}\r\n </div>\r\n </Modal>\r\n ) : null}\r\n </>\r\n );\r\n}\r\n","import { useState, useRef, useEffect } from 'react';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { Graph } from './Graph';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { ColorLegend } from '@/Components/Elements/ColorLegend';\r\nimport {\r\n Languages,\r\n ParetoChartDataType,\r\n SourcesDataType,\r\n StyleObject,\r\n ClassNameObject,\r\n CurveTypes,\r\n CustomLayerDataType,\r\n AnimateDataType,\r\n} from '@/Types';\r\nimport { Colors } from '@/Components/ColorPalette';\r\nimport { EmptyState } from '@/Components/Elements/EmptyState';\r\n\r\ninterface Props {\r\n // Data\r\n /** Array of data objects /\r\n data: ParetoChartDataType[];\r\n\r\n // Titles, Labels, and Sources\r\n /* Title of the graph /\r\n graphTitle?: string \| React.ReactNode;\r\n /* Description of the graph /\r\n graphDescription?: string \| React.ReactNode;\r\n /* Footnote for the graph /\r\n footNote?: string \| React.ReactNode;\r\n /* Source data for the graph /\r\n sources?: SourcesDataType[];\r\n /* Accessibility label /\r\n ariaLabel?: string;\r\n\r\n // Colors and Styling\r\n /* Color of the bars /\r\n barColor?: string;\r\n /* Color of the line /\r\n lineColor?: string;\r\n /* Title for the color legend /\r\n colorLegendTitle?: string;\r\n /* Background color of the graph /\r\n backgroundColor?: string \| boolean;\r\n /* Custom styles for the graph. Each object should be a valid React CSS style object. /\r\n styles?: StyleObject;\r\n /* Custom class names /\r\n classNames?: ClassNameObject;\r\n\r\n // Size and Spacing\r\n /* Width of the graph /\r\n width?: number;\r\n /* Height of the graph /\r\n height?: number;\r\n /* Minimum height of the graph /\r\n minHeight?: number;\r\n /* Relative height scaling factor. This overwrites the height props /\r\n relativeHeight?: number;\r\n /* Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem /\r\n padding?: string;\r\n /* Left margin of the graph /\r\n leftMargin?: number;\r\n /* Right margin of the graph /\r\n rightMargin?: number;\r\n /* Top margin of the graph /\r\n topMargin?: number;\r\n /* Bottom margin of the graph /\r\n bottomMargin?: number;\r\n /* Padding between bars /\r\n barPadding?: number;\r\n\r\n // Values and Ticks\r\n /* Suffix for values of the lines /\r\n lineSuffix?: string;\r\n /* Suffix for values of the bars /\r\n barSuffix?: string;\r\n /* Prefix for values of the lines /\r\n linePrefix?: string;\r\n /* Prefix for values of the bars /\r\n barPrefix?: string;\r\n /* Truncate labels by specified length /\r\n truncateBy?: number;\r\n /* Number of ticks on the axis /\r\n noOfTicks?: number;\r\n\r\n // Graph Parameters\r\n /* Toggle visibility of labels /\r\n showLabels?: boolean;\r\n /* Toggle visibility of values /\r\n showValues?: boolean;\r\n /* Curve type for the line /\r\n curveType?: CurveTypes;\r\n /* Enables same axis for bars and line /\r\n sameAxes?: boolean;\r\n /* Toggle visibility of color scale. /\r\n showColorScale?: boolean;\r\n /* Toggle visibility of labels of the axis. /\r\n showAxisLabels?: boolean;\r\n /* Title for the bar axis /\r\n barAxisTitle?: string;\r\n /* Title for the line axis /\r\n lineAxisTitle?: string;\r\n /* Defines how “NA” values should be displayed/labelled in the graph /\r\n naLabel?: string;\r\n /* Toggles if the graph animates in when loaded. /\r\n animate?: boolean \| AnimateDataType;\r\n /* Specifies the number of decimal places to display in the value. /\r\n precision?: number;\r\n /* Optional SVG <g> element or function that renders custom content behind or in front of the graph. /\r\n customLayers?: CustomLayerDataType[];\r\n /* Enable graph download option as png /\r\n graphDownload?: boolean;\r\n /* Enable data download option as a csv /\r\n dataDownload?: boolean;\r\n /* Reset selection on double-click. Only applicable when used in a dashboard context with filters. /\r\n resetSelectionOnDoubleClick?: boolean;\r\n\r\n // Interactions and Callbacks\r\n /* 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 /\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n tooltip?: string \| ((_d: any) => React.ReactNode);\r\n /* Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data /\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n detailsOnClick?: string \| ((_d: any) => React.ReactNode);\r\n /* Callback for mouse over event /\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n onSeriesMouseOver?: (_d: any) => void;\r\n /* Callback for mouse click event /\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n onSeriesMouseClick?: (_d: any) => void;\r\n\r\n // Configuration and Options\r\n /* Language setting /\r\n language?: Languages;\r\n /* Color theme /\r\n theme?: 'light' \| 'dark';\r\n /* Unique ID for the graph /\r\n graphID?: string;\r\n}\r\n\r\nexport function ParetoChart(props: Props) {\r\n const {\r\n data,\r\n graphTitle,\r\n sources,\r\n graphDescription,\r\n height,\r\n width,\r\n footNote,\r\n padding,\r\n lineColor = Colors.light.categoricalColors.colors[1],\r\n barColor = Colors.light.categoricalColors.colors[0],\r\n sameAxes = false,\r\n backgroundColor = false,\r\n leftMargin = 80,\r\n rightMargin = 80,\r\n topMargin = 20,\r\n bottomMargin = 25,\r\n lineAxisTitle = 'Line chart',\r\n barAxisTitle = 'Bar graph',\r\n tooltip,\r\n relativeHeight,\r\n onSeriesMouseOver,\r\n graphID,\r\n graphDownload = false,\r\n dataDownload = false,\r\n barPadding = 0.25,\r\n truncateBy = 999,\r\n showLabels = true,\r\n onSeriesMouseClick,\r\n language = 'en',\r\n colorLegendTitle,\r\n minHeight = 0,\r\n theme = 'light',\r\n ariaLabel,\r\n resetSelectionOnDoubleClick = true,\r\n detailsOnClick,\r\n showValues = true,\r\n noOfTicks = 5,\r\n lineSuffix = '',\r\n barSuffix = '',\r\n linePrefix = '',\r\n barPrefix = '',\r\n curveType = 'curve',\r\n styles,\r\n classNames,\r\n animate = false,\r\n precision = 2,\r\n customLayers = [],\r\n naLabel = 'NA',\r\n showColorScale = true,\r\n showAxisLabels = true,\r\n } = props;\r\n\r\n const [svgWidth, setSvgWidth] = useState(0);\r\n const [svgHeight, setSvgHeight] = useState(0);\r\n\r\n const graphDiv = useRef<HTMLDivElement>(null);\r\n const graphParentDiv = useRef<HTMLDivElement>(null);\r\n useEffect(() => {\r\n const resizeObserver = new ResizeObserver(entries => {\r\n setSvgWidth(width \|\| entries[0].target.clientWidth \|\| 620);\r\n setSvgHeight(height \|\| entries[0].target.clientHeight \|\| 480);\r\n });\r\n if (graphDiv.current) {\r\n setSvgHeight(graphDiv.current.clientHeight \|\| 480);\r\n setSvgWidth(graphDiv.current.clientWidth \|\| 620);\r\n if (!width) resizeObserver.observe(graphDiv.current);\r\n }\r\n return () => resizeObserver.disconnect();\r\n }, [width, height]);\r\n\r\n return (\r\n <div\r\n className={`${theme \|\| 'light'} flex ${width ? 'w-fit grow-0' : 'w-full grow'}`}\r\n dir={language === 'he' \|\| language === 'ar' ? 'rtl' : undefined}\r\n >\r\n <div\r\n className={cn(\r\n `${\r\n !backgroundColor\r\n ? 'bg-transparent '\r\n : backgroundColor === true\r\n ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n : ''\r\n }ml-auto mr-auto flex flex-col grow h-inherit ${language \|\| 'en'}`,\r\n width ? 'w-fit' : 'w-full',\r\n classNames?.graphContainer,\r\n )}\r\n style={{\r\n ...(styles?.graphContainer \|\| {}),\r\n ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n }}\r\n id={graphID}\r\n ref={graphParentDiv}\r\n aria-label={\r\n ariaLabel \|\|\r\n `${\r\n graphTitle ? `The graph shows ${graphTitle}. ` : ''\r\n }This is a pareto chart that shows a variable as bars and another as line chart.${\r\n graphDescription ? ` ${graphDescription}` : ''\r\n }`\r\n }\r\n >\r\n <div\r\n className='flex grow'\r\n style={{ padding: backgroundColor ? padding \|\| '1rem' : padding \|\| 0 }}\r\n >\r\n <div className='flex flex-col w-full gap-4 grow justify-between'>\r\n {graphTitle \|\| graphDescription \|\| graphDownload \|\| dataDownload ? (\r\n <GraphHeader\r\n styles={{\r\n title: styles?.title,\r\n description: styles?.description,\r\n }}\r\n classNames={{\r\n title: classNames?.title,\r\n description: classNames?.description,\r\n }}\r\n graphTitle={graphTitle}\r\n graphDescription={graphDescription}\r\n width={width}\r\n graphDownload={graphDownload ? graphParentDiv.current : undefined}\r\n dataDownload={\r\n dataDownload\r\n ? data.map(d => d.data).filter(d => d !== undefined).length > 0\r\n ? data.map(d => d.data).filter(d => d !== undefined)\r\n : data.filter(d => d !== undefined)\r\n : null\r\n }\r\n />\r\n ) : null}\r\n <div className='grow flex flex-col justify-center gap-3 w-full'>\r\n {data.length === 0 ? (\r\n <EmptyState />\r\n ) : (\r\n <>\r\n {!showColorScale ? null : (\r\n <ColorLegend\r\n colorDomain={[barAxisTitle, lineAxisTitle]}\r\n colors={[\r\n barColor \|\| Colors[theme].categoricalColors.colors[0],\r\n lineColor \|\| Colors[theme].categoricalColors.colors[1],\r\n ]}\r\n colorLegendTitle={colorLegendTitle}\r\n showNAColor={false}\r\n />\r\n )}\r\n <div\r\n className='flex flex-col grow justify-center leading-0'\r\n ref={graphDiv}\r\n aria-label='Graph area'\r\n >\r\n {(width \|\| svgWidth) && (height \|\| svgHeight) ? (\r\n <Graph\r\n data={data}\r\n sameAxes={sameAxes}\r\n lineColor={lineColor}\r\n barColor={barColor}\r\n width={width \|\| svgWidth}\r\n height={Math.max(\r\n minHeight,\r\n height \|\|\r\n (relativeHeight\r\n ? minHeight\r\n ? (width \|\| svgWidth) relativeHeight > minHeight\r\n ? (width \|\| svgWidth) * relativeHeight\r\n : minHeight\r\n : (width \|\| svgWidth) * relativeHeight\r\n : svgHeight),\r\n )}\r\n truncateBy={truncateBy}\r\n leftMargin={leftMargin}\r\n rightMargin={rightMargin}\r\n topMargin={topMargin}\r\n bottomMargin={bottomMargin}\r\n axisTitles={[barAxisTitle, lineAxisTitle]}\r\n tooltip={tooltip}\r\n onSeriesMouseOver={onSeriesMouseOver}\r\n barPadding={barPadding}\r\n showLabels={showLabels}\r\n onSeriesMouseClick={onSeriesMouseClick}\r\n resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}\r\n detailsOnClick={detailsOnClick}\r\n noOfTicks={noOfTicks}\r\n lineSuffix={lineSuffix}\r\n barSuffix={barSuffix}\r\n linePrefix={linePrefix}\r\n barPrefix={barPrefix}\r\n curveType={curveType}\r\n showValues={showValues}\r\n styles={styles}\r\n classNames={classNames}\r\n animate={\r\n animate === true\r\n ? { duration: 0.5, once: true, amount: 0.5 }\r\n : animate \|\| { duration: 0, once: true, amount: 0 }\r\n }\r\n precision={precision}\r\n customLayers={customLayers}\r\n naLabel={naLabel}\r\n showAxisLabels={showAxisLabels}\r\n />\r\n ) : null}\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n {sources \|\| footNote ? (\r\n <GraphFooter\r\n styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n classNames={{\r\n footnote: classNames?.footnote,\r\n source: classNames?.source,\r\n }}\r\n sources={sources}\r\n footNote={footNote}\r\n width={width}\r\n />\r\n ) : null}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n"],"names":["Graph","props","data","width","height","barColor","lineColor","axisTitles","sameAxes","rightMargin","leftMargin","topMargin","bottomMargin","tooltip","showValues","onSeriesMouseOver","barPadding","truncateBy","showLabels","onSeriesMouseClick","resetSelectionOnDoubleClick","detailsOnClick","noOfTicks","lineSuffix","barSuffix","linePrefix","barPrefix","curveType","styles","classNames","animate","precision","customLayers","naLabel","showAxisLabels","svgRef","useRef","isInView","useInView","curve","curveLinear","curveStep","curveStepAfter","curveStepBefore","curveMonotoneX","mouseOverData","setMouseOverData","useState","mouseClickData","setMouseClickData","eventX","setEventX","eventY","setEventY","margin","graphWidth","graphHeight","dataWithId","d","i","scaleBand","minParam1","minParam2","maxParam1","maxParam2","minParam","maxParam","y1","scaleLinear","y2","lineShape","line","checkIfNullOrUndefined","y1Ticks","y2Ticks","jsxs","Fragment","jsx","motion","cn","numberFormattingFunction","Axis","AxisTitle","AnimatePresence","event","isEqual","XAxesLabels","Tooltip","Modal","string2HTML","ParetoChart","graphTitle","sources","graphDescription","footNote","padding","Colors","backgroundColor","lineAxisTitle","barAxisTitle","relativeHeight","graphID","graphDownload","dataDownload","language","colorLegendTitle","minHeight","theme","ariaLabel","showColorScale","svgWidth","setSvgWidth","svgHeight","setSvgHeight","graphDiv","graphParentDiv","useEffect","resizeObserver","entries","GraphHeader","EmptyState","ColorLegend","GraphFooter"],"mappings":"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"}

package/dist/ParetoChart.js CHANGED Viewed

@@ -553,7 +553,7 @@ function mt(mi) {
                   }
                 ) : null,
                 /* @__PURE__ */ t.jsx("div", { className: "grow flex flex-col justify-center gap-3 w-full", children: S.length === 0 ? /* @__PURE__ */ t.jsx(Xi, {}) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                  c ? null : /* @__PURE__ */ t.jsx(
+                  c ? /* @__PURE__ */ t.jsx(
                     Hi,
                     {
                       colorDomain: [w, Z],
@@ -564,7 +564,7 @@ function mt(mi) {
                       colorLegendTitle: E,
                       showNAColor: !1
                     }
-                  ),
+                  ) : null,
                   /* @__PURE__ */ t.jsx(
                     "div",
                     {