@undp/data-viz 2.4.1 → 2.5.1

package/dist/DataTable.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-D4pAp7u0.cjs"),Ct=require("./index-DQA8q5sC.cjs"),g=require("react"),wt=require("./index-CyZ1lmi_.cjs"),D=require("./Typography-BqmyF1gP.cjs"),kt=require("./index-Cno4Q0YE.cjs"),X=require("./numberFormattingFunction-Cn9R7CM9.cjs"),Nt=require("./GraphFooter.cjs"),St=require("./GraphHeader.cjs"),B=require("./index-BhI7mBJx.cjs"),ct=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),Ot=require("./GraphContainer-Cul9b74X.cjs"),It=c=>c.map(h=>h||1).reduce((h,j)=>h+j,0);function $t(c){const t=r.compilerRuntimeExports.c(78),{width:m,height:h,graphTitle:j,sources:F,graphDescription:q,footNote:T,graphID:Y,data:d,columnData:n,onSeriesMouseClick:b,language:lt,theme:pt,ariaLabel:J,backgroundColor:ut,padding:K,resetSelectionOnDoubleClick:mt,styles:l,classNames:p,minWidth:z,naLabel:dt,precision:xt,locale:ft}=c,Q=lt===void 0?"en":lt,U=pt===void 0?"light":pt,Z=ut===void 0?!1:ut,_=mt===void 0?!0:mt,C=dt===void 0?"NA":dt,I=xt===void 0?2:xt,E=ft===void 0?"en":ft,Et=g.useRef(null),[x,gt]=g.useState(void 0),[W,ht]=g.useState(void 0),[f,yt]=g.useState("asc"),[y,jt]=g.useState(void 0);let G;t[0]===Symbol.for("react.memo_cache_sentinel")?(G={},t[0]=G):G=t[0];const[tt,Rt]=g.useState(G);let P;t[1]!==n?(P=n.filter(qt).map(Ft),t[1]=n,t[2]=P):P=t[2];const[a,bt]=g.useState(P),[et,vt]=g.useState(d);let A;t[3]===Symbol.for("react.memo_cache_sentinel")?(A=o=>{vt(o)},t[3]=A):A=t[3];const H=g.useEffectEvent(A);let L;t[4]!==n||t[5]!==x||t[6]!==d||t[7]!==a||t[8]!==H||t[9]!==f?(L=()=>{const o=[];d.forEach(u=>{let e=!0;a.forEach(i=>{if(typeof u[i.id]!="object"&&typeof u[i.id]!="function"&&typeof u[i.id]!="symbol")if(n[n.findIndex(s=>s.columnId===i.id)].separator){const s=u[i.id].split(n[n.findIndex(nt=>nt.columnId===i.id)].separator);wt.intersection(s,i.option).length===0&&(e=!1)}else i.option.indexOf(u[i.id])===-1&&(e=!1)}),e&&o.push(u)}),H(x&&d?kt.orderBy(o,[x],[f]):o)},t[4]=n,t[5]=x,t[6]=d,t[7]=a,t[8]=H,t[9]=f,t[10]=L):L=t[10];let M;t[11]!==n||t[12]!==x||t[13]!==d||t[14]!==a||t[15]!==f?(M=[x,f,d,a,n],t[11]=n,t[12]=x,t[13]=d,t[14]=a,t[15]=f,t[16]=M):M=t[16],g.useEffect(L,M);const ot=p?.graphContainer,rt=l?.graphContainer;let R;t[17]!==p?.description||t[18]!==p?.title||t[19]!==q||t[20]!==j||t[21]!==l?.description||t[22]!==l?.title||t[23]!==m?(R=j||q?r.jsxRuntimeExports.jsx(St.GraphHeader,{styles:{title:l?.title,description:l?.description},classNames:{title:p?.title,description:p?.description},graphTitle:j,graphDescription:q,width:m}):null,t[17]=p?.description,t[18]=p?.title,t[19]=q,t[20]=j,t[21]=l?.description,t[22]=l?.title,t[23]=m,t[24]=R):R=t[24];const it=m?`${m}px`:"100%",st=h?`${h}px`:"auto";let v;t[25]!==it||t[26]!==st?(v={width:it,height:st},t[25]=it,t[26]=st,t[27]=v):v=t[27];let w;t[28]!==z?(w=z?{minWidth:z}:void 0,t[28]=z,t[29]=w):w=t[29];let k;t[30]!==n||t[31]!==x||t[32]!==d||t[33]!==a||t[34]!==E||t[35]!==W||t[36]!==C||t[37]!==b||t[38]!==y||t[39]!==I||t[40]!==_||t[41]!==f||t[42]!==et?(k=d?r.jsxRuntimeExports.jsxs("table",{className:"w-full",style:{borderCollapse:"collapse"},children:[r.jsxRuntimeExports.jsx("thead",{className:"text-left bg-primary-gray-300 dark:bg-primary-gray-550",children:r.jsxRuntimeExports.jsx("tr",{children:n?.map((o,u)=>r.jsxRuntimeExports.jsx("th",{className:"text-primary-gray-700 dark:text-primary-gray-100 text-sm",style:{width:`calc(${100*(o.columnWidth||1)/It(n.map(Bt))}%`},children:r.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 justify-between items-center p-4",children:[r.jsxRuntimeExports.jsx(D._,{size:"sm",marginBottom:"none",className:`w-fit grow text-${o.align||"left"} font-bold`,children:o.columnTitle||o.columnId}),o.sortable?r.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer p-0 m-0 border-0",onClick:()=>{x===o.columnId?(f==="asc"&&yt("desc"),f==="desc"&&gt(void 0)):(gt(o.columnId),yt("asc"))},children:x===o.columnId?f==="asc"?r.jsxRuntimeExports.jsx(B.SortingIconAscending,{}):r.jsxRuntimeExports.jsx(B.SortingIconDescending,{}):r.jsxRuntimeExports.jsx(B.SortingIcon,{})}):null,o.filterOptions&&o.filterOptions.length?r.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer m-0 p-0 border-0",onClick:e=>{if(y===o.columnId)jt(void 0);else if(e.currentTarget){jt(o.columnId);const i=e.currentTarget.getBoundingClientRect();Rt({top:i.bottom+window.scrollY,left:i.left+window.scrollX-160<0?i.left+window.scrollX:i.left+window.scrollX-160,width:"10rem"})}},children:a[a.findIndex(e=>e.id===o.columnId)].option.length===o.filterOptions?.length?r.jsxRuntimeExports.jsx(B.FilterIcon,{}):r.jsxRuntimeExports.jsx(B.FilterIconApplied,{})}):null]})},u))})}),r.jsxRuntimeExports.jsx("tbody",{children:et?.map((o,u)=>r.jsxRuntimeExports.jsx("tr",{className:`cursor-${b?"pointer":"auto"} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${Ct.isEqual(W,o)?"bg-primary-gray-200 dark:bg-primary-gray-600":"bg-transparent"}`,style:o.rowStyle,onClick:()=>{b&&(Ct.isEqual(W,o)&&_?(ht(void 0),b(void 0)):(ht(o),b(o)))},children:n.map((e,i)=>r.jsxRuntimeExports.jsx("td",{className:`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${e.align||"left"}`,style:{width:`calc(${100*(o.columnWidth||1)/It(n.map(Dt))}%`},children:r.jsxRuntimeExports.jsx("div",{className:`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${e.align==="right"?"justify-end":e.align==="center"?"justify-center":"justify-start"}`,children:typeof o[e.columnId]=="number"?r.jsxRuntimeExports.jsx(D._,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${e.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${e.align||"left"} ${e.chip?e.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...e.chip&&e.chipColors?{backgroundColor:e.chipColors[e.chipColors.findIndex(s=>s.value===o[e.chipColumnId||e.columnId])].color,color:ct.getTextColorBasedOnBgColor(e.chipColors[e.chipColors.findIndex(s=>s.value===o[e.chipColumnId||e.columnId])].color)}:{}},children:X.numberFormattingFunction(o[e.columnId],C,I,e.prefix,e.suffix,E)}):typeof o[e.columnId]=="string"?e.separator?r.jsxRuntimeExports.jsx("div",{className:"text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2",children:o[e.columnId].split(e.separator).map((s,nt)=>r.jsxRuntimeExports.jsx(D._,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${e.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${e.align||"left"} ${e.chip?e.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...e.chip&&e.chipColors?{backgroundColor:e.chipColors[e.chipColors.findIndex(at=>at.value===(e.chipColumnId?o[e.chipColumnId]:s))].color,color:ct.getTextColorBasedOnBgColor(e.chipColors[e.chipColors.findIndex(at=>at.value===(e.chipColumnId?o[e.chipColumnId]:s))].color)}:{}},children:X.numberFormattingFunction(s,C,I,e.prefix,e.suffix,E)},nt))}):r.jsxRuntimeExports.jsx(D._,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${e.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${e.align||"left"} ${e.chip?e.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...e.chip&&e.chipColors?{backgroundColor:e.chipColors[e.chipColors.findIndex(s=>s.value===o[e.chipColumnId||e.columnId])].color,color:ct.getTextColorBasedOnBgColor(e.chipColors[e.chipColors.findIndex(s=>s.value===o[e.chipColumnId||e.columnId])].color)}:{}},children:X.numberFormattingFunction(o[e.columnId],C,I,e.prefix,e.suffix,E)}):r.jsxRuntimeExports.jsx("div",{children:X.numberFormattingFunction(o[e.columnId],C,I,e.prefix,e.suffix,E)})})},i))},u))})]}):null,t[30]=n,t[31]=x,t[32]=d,t[33]=a,t[34]=E,t[35]=W,t[36]=C,t[37]=b,t[38]=y,t[39]=I,t[40]=_,t[41]=f,t[42]=et,t[43]=k):k=t[43];let N;t[44]!==w||t[45]!==k?(N=r.jsxRuntimeExports.jsx("div",{style:w,children:k}),t[44]=w,t[45]=k,t[46]=N):N=t[46];let S;t[47]!==v||t[48]!==N?(S=r.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center",children:r.jsxRuntimeExports.jsx("div",{className:"undp-scrollbar",style:v,children:N})}),t[47]=v,t[48]=N,t[49]=S):S=t[49];let O;t[50]!==p?.footnote||t[51]!==p?.source||t[52]!==T||t[53]!==F||t[54]!==l?.footnote||t[55]!==l?.source||t[56]!==m?(O=F||T?r.jsxRuntimeExports.jsx(Nt.GraphFooter,{styles:{footnote:l?.footnote,source:l?.source},classNames:{footnote:p?.footnote,source:p?.source},sources:F,footNote:T,width:m}):null,t[50]=p?.footnote,t[51]=p?.source,t[52]=T,t[53]=F,t[54]=l?.footnote,t[55]=l?.source,t[56]=m,t[57]=O):O=t[57];let $;t[58]!==n||t[59]!==a||t[60]!==tt||t[61]!==y?($=y&&r.jsxRuntimeExports.jsx("div",{style:tt,className:"absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550",children:r.jsxRuntimeExports.jsxs("div",{className:"max-w-60",children:[r.jsxRuntimeExports.jsx(D._,{size:"sm",marginBottom:"2xs",className:"font-bold",children:"Filter data by"}),r.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-2",children:n[n.findIndex(o=>o.columnId===y)].filterOptions?.map((o,u)=>r.jsxRuntimeExports.jsx("div",{children:r.jsxRuntimeExports.jsxs("label",{className:"undp-viz-label",children:[r.jsxRuntimeExports.jsx("input",{type:"checkbox",className:"undp-viz-checkbox",checked:a[a.findIndex(e=>e.id===y)].option.indexOf(o)!==-1,onChange:()=>{const e=a.findIndex(s=>s.id===y),i=[...a[e].option];if(i.indexOf(o)!==-1){i.splice(i.indexOf(o),1);const s=[...a];s[e].option=i,bt(s)}else{i.push(o);const s=[...a];s[e].option=i,bt(s)}}}),o]},u)},u))})]})}),t[58]=n,t[59]=a,t[60]=tt,t[61]=y,t[62]=$):$=t[62];let V;return t[63]!==J||t[64]!==Z||t[65]!==Y||t[66]!==h||t[67]!==Q||t[68]!==K||t[69]!==ot||t[70]!==rt||t[71]!==R||t[72]!==S||t[73]!==O||t[74]!==$||t[75]!==U||t[76]!==m?(V=r.jsxRuntimeExports.jsxs(Ot.GraphContainer,{className:ot,style:rt,id:Y,ref:Et,"aria-label":J,backgroundColor:Z,theme:U,language:Q,width:m,height:h,padding:K,children:[R,S,O,$]}),t[63]=J,t[64]=Z,t[65]=Y,t[66]=h,t[67]=Q,t[68]=K,t[69]=ot,t[70]=rt,t[71]=R,t[72]=S,t[73]=O,t[74]=$,t[75]=U,t[76]=m,t[77]=V):V=t[77],V}function Dt(c){return c.columnWidth||1}function Bt(c){return c.columnWidth||1}function Ft(c){return{id:c.columnId,option:c.filterOptions}}function qt(c){return c.filterOptions&&c.filterOptions.length>0}exports.DataTable=$t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-D4pAp7u0.cjs"),ht=require("./index-DQA8q5sC.cjs"),g=require("react"),It=require("./index-CyZ1lmi_.cjs"),O=require("./Typography-BqmyF1gP.cjs"),Et=require("./index-Cno4Q0YE.cjs"),L=require("./numberFormattingFunction-u2iNHL_c.cjs"),Rt=require("./GraphFooter.cjs"),vt=require("./GraphHeader.cjs"),$=require("./index-BhI7mBJx.cjs"),nt=require("./getTextColorBasedOnBgColor-nqY-bsM_.cjs"),wt=require("./GraphContainer-Cul9b74X.cjs"),yt=c=>c.map(h=>h||1).reduce((h,j)=>h+j,0);function kt(c){const t=r.compilerRuntimeExports.c(76),{width:d,height:h,graphTitle:j,sources:D,graphDescription:B,footNote:F,graphID:M,data:m,columnData:n,onSeriesMouseClick:b,language:at,theme:ct,ariaLabel:V,backgroundColor:lt,padding:X,resetSelectionOnDoubleClick:pt,styles:l,classNames:p,minWidth:q,naLabel:ut}=c,Y=at===void 0?"en":at,J=ct===void 0?"light":ct,K=lt===void 0?!1:lt,Q=pt===void 0?!0:pt,C=ut===void 0?"NA":ut,jt=g.useRef(null),[x,dt]=g.useState(void 0),[T,mt]=g.useState(void 0),[f,xt]=g.useState("asc"),[y,ft]=g.useState(void 0);let z;t[0]===Symbol.for("react.memo_cache_sentinel")?(z={},t[0]=z):z=t[0];const[U,bt]=g.useState(z);let W;t[1]!==n?(W=n.filter($t).map(Ot),t[1]=n,t[2]=W):W=t[2];const[a,gt]=g.useState(W),[_,Ct]=g.useState(m);let G;t[3]===Symbol.for("react.memo_cache_sentinel")?(G=e=>{Ct(e)},t[3]=G):G=t[3];const P=g.useEffectEvent(G);let Z;t[4]!==n||t[5]!==x||t[6]!==m||t[7]!==a||t[8]!==P||t[9]!==f?(Z=()=>{const e=[];m.forEach(u=>{let o=!0;a.forEach(i=>{if(typeof u[i.id]!="object"&&typeof u[i.id]!="function"&&typeof u[i.id]!="symbol")if(n[n.findIndex(s=>s.columnId===i.id)].separator){const s=u[i.id].split(n[n.findIndex(it=>it.columnId===i.id)].separator);It.intersection(s,i.option).length===0&&(o=!1)}else i.option.indexOf(u[i.id])===-1&&(o=!1)}),o&&e.push(u)}),P(x&&m?Et.orderBy(e,[x],[f]):e)},t[4]=n,t[5]=x,t[6]=m,t[7]=a,t[8]=P,t[9]=f,t[10]=Z):Z=t[10];let A;t[11]!==n||t[12]!==x||t[13]!==m||t[14]!==a||t[15]!==f?(A=[x,f,m,a,n],t[11]=n,t[12]=x,t[13]=m,t[14]=a,t[15]=f,t[16]=A):A=t[16],g.useEffect(Z,A);const tt=p?.graphContainer,ot=l?.graphContainer;let I;t[17]!==p?.description||t[18]!==p?.title||t[19]!==B||t[20]!==j||t[21]!==l?.description||t[22]!==l?.title||t[23]!==d?(I=j||B?r.jsxRuntimeExports.jsx(vt.GraphHeader,{styles:{title:l?.title,description:l?.description},classNames:{title:p?.title,description:p?.description},graphTitle:j,graphDescription:B,width:d}):null,t[17]=p?.description,t[18]=p?.title,t[19]=B,t[20]=j,t[21]=l?.description,t[22]=l?.title,t[23]=d,t[24]=I):I=t[24];const et=d?`${d}px`:"100%",rt=h?`${h}px`:"auto";let E;t[25]!==et||t[26]!==rt?(E={width:et,height:rt},t[25]=et,t[26]=rt,t[27]=E):E=t[27];let R;t[28]!==q?(R=q?{minWidth:q}:void 0,t[28]=q,t[29]=R):R=t[29];let v;t[30]!==n||t[31]!==x||t[32]!==m||t[33]!==a||t[34]!==T||t[35]!==C||t[36]!==b||t[37]!==y||t[38]!==Q||t[39]!==f||t[40]!==_?(v=m?r.jsxRuntimeExports.jsxs("table",{className:"w-full",style:{borderCollapse:"collapse"},children:[r.jsxRuntimeExports.jsx("thead",{className:"text-left bg-primary-gray-300 dark:bg-primary-gray-550",children:r.jsxRuntimeExports.jsx("tr",{children:n?.map((e,u)=>r.jsxRuntimeExports.jsx("th",{className:"text-primary-gray-700 dark:text-primary-gray-100 text-sm",style:{width:`calc(${100*(e.columnWidth||1)/yt(n.map(St))}%`},children:r.jsxRuntimeExports.jsxs("div",{className:"flex gap-2 justify-between items-center p-4",children:[r.jsxRuntimeExports.jsx(O._,{size:"sm",marginBottom:"none",className:`w-fit grow text-${e.align||"left"} font-bold`,children:e.columnTitle||e.columnId}),e.sortable?r.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer p-0 m-0 border-0",onClick:()=>{x===e.columnId?(f==="asc"&&xt("desc"),f==="desc"&&dt(void 0)):(dt(e.columnId),xt("asc"))},children:x===e.columnId?f==="asc"?r.jsxRuntimeExports.jsx($.SortingIconAscending,{}):r.jsxRuntimeExports.jsx($.SortingIconDescending,{}):r.jsxRuntimeExports.jsx($.SortingIcon,{})}):null,e.filterOptions&&e.filterOptions.length?r.jsxRuntimeExports.jsx("button",{type:"button",className:"bg-transparent cursor-pointer m-0 p-0 border-0",onClick:o=>{if(y===e.columnId)ft(void 0);else if(o.currentTarget){ft(e.columnId);const i=o.currentTarget.getBoundingClientRect();bt({top:i.bottom+window.scrollY,left:i.left+window.scrollX-160<0?i.left+window.scrollX:i.left+window.scrollX-160,width:"10rem"})}},children:a[a.findIndex(o=>o.id===e.columnId)].option.length===e.filterOptions?.length?r.jsxRuntimeExports.jsx($.FilterIcon,{}):r.jsxRuntimeExports.jsx($.FilterIconApplied,{})}):null]})},u))})}),r.jsxRuntimeExports.jsx("tbody",{children:_?.map((e,u)=>r.jsxRuntimeExports.jsx("tr",{className:`cursor-${b?"pointer":"auto"} border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${ht.isEqual(T,e)?"bg-primary-gray-200 dark:bg-primary-gray-600":"bg-transparent"}`,style:e.rowStyle,onClick:()=>{b&&(ht.isEqual(T,e)&&Q?(mt(void 0),b(void 0)):(mt(e),b(e)))},children:n.map((o,i)=>r.jsxRuntimeExports.jsx("td",{className:`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${o.align||"left"}`,style:{width:`calc(${100*(e.columnWidth||1)/yt(n.map(Nt))}%`},children:r.jsxRuntimeExports.jsx("div",{className:`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${o.align==="right"?"justify-end":o.align==="center"?"justify-center":"justify-start"}`,children:typeof e[o.columnId]=="number"?r.jsxRuntimeExports.jsx(O._,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${o.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${o.align||"left"} ${o.chip?o.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...o.chip&&o.chipColors?{backgroundColor:o.chipColors[o.chipColors.findIndex(s=>s.value===e[o.chipColumnId||o.columnId])].color,color:nt.getTextColorBasedOnBgColor(o.chipColors[o.chipColors.findIndex(s=>s.value===e[o.chipColumnId||o.columnId])].color)}:{}},children:L.numberFormattingFunction(e[o.columnId],C,o.precision,o.prefix,o.suffix,o.locale,o.padZeros)}):typeof e[o.columnId]=="string"?o.separator?r.jsxRuntimeExports.jsx("div",{className:"text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2",children:e[o.columnId].split(o.separator).map((s,it)=>r.jsxRuntimeExports.jsx(O._,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${o.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${o.align||"left"} ${o.chip?o.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...o.chip&&o.chipColors?{backgroundColor:o.chipColors[o.chipColors.findIndex(st=>st.value===(o.chipColumnId?e[o.chipColumnId]:s))].color,color:nt.getTextColorBasedOnBgColor(o.chipColors[o.chipColors.findIndex(st=>st.value===(o.chipColumnId?e[o.chipColumnId]:s))].color)}:{}},children:L.numberFormattingFunction(s,C,o.precision,o.prefix,o.suffix,o.locale,o.padZeros)},it))}):r.jsxRuntimeExports.jsx(O._,{marginBottom:"none",size:"sm",className:`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${o.chip?"grow-0 rounded-sm p-2":"grow rounded-none p-0"} text-${o.align||"left"} ${o.chip?o.chipColors?"":"bg-primary-gray-300 dark:bg-primary-gray-500":"bg-transparent"}`,style:{...o.chip&&o.chipColors?{backgroundColor:o.chipColors[o.chipColors.findIndex(s=>s.value===e[o.chipColumnId||o.columnId])].color,color:nt.getTextColorBasedOnBgColor(o.chipColors[o.chipColors.findIndex(s=>s.value===e[o.chipColumnId||o.columnId])].color)}:{}},children:L.numberFormattingFunction(e[o.columnId],C,o.precision,o.prefix,o.suffix,o.locale,o.padZeros)}):r.jsxRuntimeExports.jsx("div",{children:L.numberFormattingFunction(e[o.columnId],C,o.precision,o.prefix,o.suffix,o.locale,o.padZeros)})})},i))},u))})]}):null,t[30]=n,t[31]=x,t[32]=m,t[33]=a,t[34]=T,t[35]=C,t[36]=b,t[37]=y,t[38]=Q,t[39]=f,t[40]=_,t[41]=v):v=t[41];let w;t[42]!==R||t[43]!==v?(w=r.jsxRuntimeExports.jsx("div",{style:R,children:v}),t[42]=R,t[43]=v,t[44]=w):w=t[44];let k;t[45]!==E||t[46]!==w?(k=r.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center",children:r.jsxRuntimeExports.jsx("div",{className:"undp-scrollbar",style:E,children:w})}),t[45]=E,t[46]=w,t[47]=k):k=t[47];let N;t[48]!==p?.footnote||t[49]!==p?.source||t[50]!==F||t[51]!==D||t[52]!==l?.footnote||t[53]!==l?.source||t[54]!==d?(N=D||F?r.jsxRuntimeExports.jsx(Rt.GraphFooter,{styles:{footnote:l?.footnote,source:l?.source},classNames:{footnote:p?.footnote,source:p?.source},sources:D,footNote:F,width:d}):null,t[48]=p?.footnote,t[49]=p?.source,t[50]=F,t[51]=D,t[52]=l?.footnote,t[53]=l?.source,t[54]=d,t[55]=N):N=t[55];let S;t[56]!==n||t[57]!==a||t[58]!==U||t[59]!==y?(S=y&&r.jsxRuntimeExports.jsx("div",{style:U,className:"absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550",children:r.jsxRuntimeExports.jsxs("div",{className:"max-w-60",children:[r.jsxRuntimeExports.jsx(O._,{size:"sm",marginBottom:"2xs",className:"font-bold",children:"Filter data by"}),r.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-2",children:n[n.findIndex(e=>e.columnId===y)].filterOptions?.map((e,u)=>r.jsxRuntimeExports.jsx("div",{children:r.jsxRuntimeExports.jsxs("label",{className:"undp-viz-label",children:[r.jsxRuntimeExports.jsx("input",{type:"checkbox",className:"undp-viz-checkbox",checked:a[a.findIndex(o=>o.id===y)].option.indexOf(e)!==-1,onChange:()=>{const o=a.findIndex(s=>s.id===y),i=[...a[o].option];if(i.indexOf(e)!==-1){i.splice(i.indexOf(e),1);const s=[...a];s[o].option=i,gt(s)}else{i.push(e);const s=[...a];s[o].option=i,gt(s)}}}),e]},u)},u))})]})}),t[56]=n,t[57]=a,t[58]=U,t[59]=y,t[60]=S):S=t[60];let H;return t[61]!==V||t[62]!==K||t[63]!==M||t[64]!==h||t[65]!==Y||t[66]!==X||t[67]!==tt||t[68]!==ot||t[69]!==I||t[70]!==k||t[71]!==N||t[72]!==S||t[73]!==J||t[74]!==d?(H=r.jsxRuntimeExports.jsxs(wt.GraphContainer,{className:tt,style:ot,id:M,ref:jt,"aria-label":V,backgroundColor:K,theme:J,language:Y,width:d,height:h,padding:X,children:[I,k,N,S]}),t[61]=V,t[62]=K,t[63]=M,t[64]=h,t[65]=Y,t[66]=X,t[67]=tt,t[68]=ot,t[69]=I,t[70]=k,t[71]=N,t[72]=S,t[73]=J,t[74]=d,t[75]=H):H=t[75],H}function Nt(c){return c.columnWidth||1}function St(c){return c.columnWidth||1}function Ot(c){return{id:c.columnId,option:c.filterOptions}}function $t(c){return c.filterOptions&&c.filterOptions.length>0}exports.DataTable=kt;
 //# sourceMappingURL=DataTable.cjs.map

package/dist/DataTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs","sources":["../src/Components/Graphs/DataTable/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport isEqual from 'fast-deep-equal';\r\nimport { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport intersection from 'lodash.intersection';\r\nimport { P } from '@undp/design-system-react/Typography';\r\nimport orderBy from 'lodash.orderby';\r\n\r\nimport {\r\n  DataTableColumnDataType,\r\n  Languages,\r\n  SourcesDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport {\r\n  FilterIcon,\r\n  FilterIconApplied,\r\n  SortingIcon,\r\n  SortingIconAscending,\r\n  SortingIconDescending,\r\n} from '@/Components/Icons';\r\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\r\nimport { GraphContainer } from '@/Components/Elements/GraphContainer';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */\r\n  data: object[];\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  /** 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  /** Minimum width of the table as string in px */\r\n  minWidth?: string;\r\n  /** Height of the graph */\r\n  height?: 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\r\n  // Graph Parameters\r\n  /** Column settings for each column shown in the table. */\r\n  columnData: DataTableColumnDataType[];\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n  /** Defines how “NA” values should be displayed/labelled in the graph */\r\n  naLabel?: string;\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  /** Callback for mouse click event */\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  /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */\r\n  locale?: string;\r\n}\r\n\r\nconst TotalWidth = (columns: (number | undefined)[]) => {\r\n  const columnWidth = columns.map(d => d || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nexport function DataTable(props: Props) {\r\n  const {\r\n    width,\r\n    height,\r\n    graphTitle,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    graphID,\r\n    data,\r\n    columnData,\r\n    onSeriesMouseClick,\r\n    language = 'en',\r\n    theme = 'light',\r\n    ariaLabel,\r\n    backgroundColor = false,\r\n    padding,\r\n    resetSelectionOnDoubleClick = true,\r\n    styles,\r\n    classNames,\r\n    minWidth,\r\n    naLabel = 'NA',\r\n    precision = 2,\r\n    locale = 'en',\r\n  } = props;\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const [columnSortBy, setColumnSortBy] = useState<string | undefined>(undefined);\r\n\r\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');\r\n  const [popupVisible, setPopupVisible] = useState<string | undefined>(undefined);\r\n  const [popupStyle, setPopupStyle] = useState({});\r\n  const [filterOption, setFilterOption] = useState(\r\n    columnData\r\n      .filter(d => d.filterOptions && d.filterOptions.length > 0)\r\n      .map(d => ({ id: d.columnId, option: d.filterOptions as string[] })),\r\n  );\r\n  const [sortedData, setSortedData] = useState(data);\r\n\r\n  const sortDataEvent = useEffectEvent((data: object[]) => {\r\n    setSortedData(data);\r\n  });\r\n\r\n  useEffect(() => {\r\n    const dataFiltered: any = [];\r\n\r\n    data.forEach((d: any) => {\r\n      let filter = true;\r\n      filterOption.forEach(el => {\r\n        if (\r\n          typeof d[el.id] !== 'object' &&\r\n          typeof d[el.id] !== 'function' &&\r\n          typeof d[el.id] !== 'symbol'\r\n        ) {\r\n          if (columnData[columnData.findIndex(cd => cd.columnId === el.id)].separator) {\r\n            const arr = d[el.id].split(\r\n              columnData[columnData.findIndex(cd => cd.columnId === el.id)].separator,\r\n            );\r\n            if (intersection(arr, el.option).length === 0) filter = false;\r\n          } else if (el.option.indexOf(d[el.id]) === -1) filter = false;\r\n        }\r\n      });\r\n      if (filter) dataFiltered.push(d);\r\n    });\r\n    if (columnSortBy && data) {\r\n      sortDataEvent(orderBy(dataFiltered, [columnSortBy], [sortDirection]));\r\n    } else {\r\n      sortDataEvent(dataFiltered);\r\n    }\r\n  }, [columnSortBy, sortDirection, data, filterOption, columnData]);\r\n\r\n  return (\r\n    <GraphContainer\r\n      className={classNames?.graphContainer}\r\n      style={styles?.graphContainer}\r\n      id={graphID}\r\n      ref={graphParentDiv}\r\n      aria-label={ariaLabel}\r\n      backgroundColor={backgroundColor}\r\n      theme={theme}\r\n      language={language}\r\n      width={width}\r\n      height={height}\r\n      padding={padding}\r\n    >\r\n      {graphTitle || graphDescription ? (\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        />\r\n      ) : null}\r\n      <div className='grow flex flex-col justify-center'>\r\n        <div\r\n          className='undp-scrollbar'\r\n          style={{\r\n            width: width ? `${width}px` : '100%',\r\n            height: height ? `${height}px` : 'auto',\r\n          }}\r\n        >\r\n          <div style={minWidth ? { minWidth } : undefined}>\r\n            {data ? (\r\n              <table className='w-full' style={{ borderCollapse: 'collapse' }}>\r\n                <thead className='text-left bg-primary-gray-300 dark:bg-primary-gray-550'>\r\n                  <tr>\r\n                    {columnData?.map((d, i) => (\r\n                      <th\r\n                        className='text-primary-gray-700 dark:text-primary-gray-100 text-sm'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (d.columnWidth || 1)) /\r\n                            TotalWidth(columnData.map(cd => cd.columnWidth || 1))\r\n                          }%`,\r\n                        }}\r\n                        key={i}\r\n                      >\r\n                        <div className='flex gap-2 justify-between items-center p-4'>\r\n                          <P\r\n                            size='sm'\r\n                            marginBottom='none'\r\n                            className={`w-fit grow text-${d.align || 'left'} font-bold`}\r\n                          >\r\n                            {d.columnTitle || d.columnId}\r\n                          </P>\r\n                          {d.sortable ? (\r\n                            <button\r\n                              type='button'\r\n                              className='bg-transparent cursor-pointer p-0 m-0 border-0'\r\n                              onClick={() => {\r\n                                if (columnSortBy === d.columnId) {\r\n                                  if (sortDirection === 'asc') {\r\n                                    setSortDirection('desc');\r\n                                  }\r\n                                  if (sortDirection === 'desc') {\r\n                                    setColumnSortBy(undefined);\r\n                                  }\r\n                                } else {\r\n                                  setColumnSortBy(d.columnId);\r\n                                  setSortDirection('asc');\r\n                                }\r\n                              }}\r\n                            >\r\n                              {columnSortBy === d.columnId ? (\r\n                                sortDirection === 'asc' ? (\r\n                                  <SortingIconAscending />\r\n                                ) : (\r\n                                  <SortingIconDescending />\r\n                                )\r\n                              ) : (\r\n                                <SortingIcon />\r\n                              )}\r\n                            </button>\r\n                          ) : null}\r\n                          {d.filterOptions && d.filterOptions.length ? (\r\n                            <button\r\n                              type='button'\r\n                              className='bg-transparent cursor-pointer m-0 p-0 border-0'\r\n                              onClick={event => {\r\n                                if (popupVisible === d.columnId) {\r\n                                  setPopupVisible(undefined);\r\n                                } else if (event.currentTarget) {\r\n                                  setPopupVisible(d.columnId);\r\n                                  const rect = event.currentTarget.getBoundingClientRect();\r\n                                  setPopupStyle({\r\n                                    top: rect.bottom + window.scrollY,\r\n                                    left:\r\n                                      rect.left + window.scrollX - 160 < 0\r\n                                        ? rect.left + window.scrollX\r\n                                        : rect.left + window.scrollX - 160,\r\n                                    width: '10rem',\r\n                                  });\r\n                                }\r\n                              }}\r\n                            >\r\n                              {filterOption[filterOption.findIndex(el => el.id === d.columnId)]\r\n                                .option.length === d.filterOptions?.length ? (\r\n                                <FilterIcon />\r\n                              ) : (\r\n                                <FilterIconApplied />\r\n                              )}\r\n                            </button>\r\n                          ) : null}\r\n                        </div>\r\n                      </th>\r\n                    ))}\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  {sortedData?.map((d: any, i: number) => (\r\n                    <tr\r\n                      key={i}\r\n                      className={`cursor-${\r\n                        onSeriesMouseClick ? 'pointer' : 'auto'\r\n                      } border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${\r\n                        isEqual(mouseClickData, d)\r\n                          ? 'bg-primary-gray-200 dark:bg-primary-gray-600'\r\n                          : 'bg-transparent'\r\n                      }`}\r\n                      style={d.rowStyle}\r\n                      onClick={() => {\r\n                        if (onSeriesMouseClick) {\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                    >\r\n                      {columnData.map((el, j) => (\r\n                        <td\r\n                          key={j}\r\n                          className={`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${\r\n                            el.align || 'left'\r\n                          }`}\r\n                          style={{\r\n                            width: `calc(${\r\n                              (100 * (d.columnWidth || 1)) /\r\n                              TotalWidth(columnData.map(cd => cd.columnWidth || 1))\r\n                            }%`,\r\n                          }}\r\n                        >\r\n                          <div\r\n                            className={`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${\r\n                              el.align === 'right'\r\n                                ? 'justify-end'\r\n                                : el.align === 'center'\r\n                                  ? 'justify-center'\r\n                                  : 'justify-start'\r\n                            }`}\r\n                          >\r\n                            {typeof d[el.columnId] === 'number' ? (\r\n                              <P\r\n                                marginBottom='none'\r\n                                size='sm'\r\n                                className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                  el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\r\n                                } text-${el.align || 'left'} ${\r\n                                  el.chip\r\n                                    ? !el.chipColors\r\n                                      ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                      : ''\r\n                                    : 'bg-transparent'\r\n                                }`}\r\n                                style={{\r\n                                  ...(el.chip && el.chipColors\r\n                                    ? {\r\n                                        backgroundColor:\r\n                                          el.chipColors[\r\n                                            el.chipColors.findIndex(\r\n                                              c => c.value === d[el.chipColumnId || el.columnId],\r\n                                            )\r\n                                          ].color,\r\n                                        color: getTextColorBasedOnBgColor(\r\n                                          el.chipColors[\r\n                                            el.chipColors.findIndex(\r\n                                              c => c.value === d[el.chipColumnId || el.columnId],\r\n                                            )\r\n                                          ].color,\r\n                                        ),\r\n                                      }\r\n                                    : {}),\r\n                                }}\r\n                              >\r\n                                {numberFormattingFunction(\r\n                                  d[el.columnId],\r\n                                  naLabel,\r\n                                  precision,\r\n                                  el.prefix,\r\n                                  el.suffix,\r\n                                  locale,\r\n                                )}\r\n                              </P>\r\n                            ) : typeof d[el.columnId] === 'string' ? (\r\n                              el.separator ? (\r\n                                <div className='text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2'>\r\n                                  {d[el.columnId]\r\n                                    .split(el.separator)\r\n                                    .map((element: string, indx: number) => (\r\n                                      <P\r\n                                        key={indx}\r\n                                        marginBottom='none'\r\n                                        size='sm'\r\n                                        className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                          el.chip\r\n                                            ? 'grow-0 rounded-sm p-2'\r\n                                            : 'grow rounded-none p-0'\r\n                                        } text-${el.align || 'left'} ${\r\n                                          el.chip\r\n                                            ? !el.chipColors\r\n                                              ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                              : ''\r\n                                            : 'bg-transparent'\r\n                                        }`}\r\n                                        style={{\r\n                                          ...(el.chip && el.chipColors\r\n                                            ? {\r\n                                                backgroundColor:\r\n                                                  el.chipColors[\r\n                                                    el.chipColors.findIndex(\r\n                                                      c =>\r\n                                                        c.value ===\r\n                                                        (el.chipColumnId\r\n                                                          ? d[el.chipColumnId]\r\n                                                          : element),\r\n                                                    )\r\n                                                  ].color,\r\n                                                color: getTextColorBasedOnBgColor(\r\n                                                  el.chipColors[\r\n                                                    el.chipColors.findIndex(\r\n                                                      c =>\r\n                                                        c.value ===\r\n                                                        (el.chipColumnId\r\n                                                          ? d[el.chipColumnId]\r\n                                                          : element),\r\n                                                    )\r\n                                                  ].color,\r\n                                                ),\r\n                                              }\r\n                                            : {}),\r\n                                        }}\r\n                                      >\r\n                                        {numberFormattingFunction(\r\n                                          element,\r\n                                          naLabel,\r\n                                          precision,\r\n                                          el.prefix,\r\n                                          el.suffix,\r\n                                          locale,\r\n                                        )}\r\n                                      </P>\r\n                                    ))}\r\n                                </div>\r\n                              ) : (\r\n                                <P\r\n                                  marginBottom='none'\r\n                                  size='sm'\r\n                                  className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                    el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\r\n                                  } text-${el.align || 'left'} ${\r\n                                    el.chip\r\n                                      ? !el.chipColors\r\n                                        ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                        : ''\r\n                                      : 'bg-transparent'\r\n                                  }`}\r\n                                  style={{\r\n                                    ...(el.chip && el.chipColors\r\n                                      ? {\r\n                                          backgroundColor:\r\n                                            el.chipColors[\r\n                                              el.chipColors.findIndex(\r\n                                                c => c.value === d[el.chipColumnId || el.columnId],\r\n                                              )\r\n                                            ].color,\r\n                                          color: getTextColorBasedOnBgColor(\r\n                                            el.chipColors[\r\n                                              el.chipColors.findIndex(\r\n                                                c => c.value === d[el.chipColumnId || el.columnId],\r\n                                              )\r\n                                            ].color,\r\n                                          ),\r\n                                        }\r\n                                      : {}),\r\n                                  }}\r\n                                >\r\n                                  {numberFormattingFunction(\r\n                                    d[el.columnId],\r\n                                    naLabel,\r\n                                    precision,\r\n                                    el.prefix,\r\n                                    el.suffix,\r\n                                    locale,\r\n                                  )}\r\n                                </P>\r\n                              )\r\n                            ) : (\r\n                              <div>\r\n                                {numberFormattingFunction(\r\n                                  d[el.columnId],\r\n                                  naLabel,\r\n                                  precision,\r\n                                  el.prefix,\r\n                                  el.suffix,\r\n                                  locale,\r\n                                )}\r\n                              </div>\r\n                            )}\r\n                          </div>\r\n                        </td>\r\n                      ))}\r\n                    </tr>\r\n                  ))}\r\n                </tbody>\r\n              </table>\r\n            ) : null}\r\n          </div>\r\n        </div>\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      {popupVisible && (\r\n        <div\r\n          style={popupStyle}\r\n          className='absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550'\r\n        >\r\n          <div className='max-w-60'>\r\n            <P size='sm' marginBottom='2xs' className='font-bold'>\r\n              Filter data by\r\n            </P>\r\n            <div className='flex flex-col gap-2'>\r\n              {columnData[\r\n                columnData.findIndex(d => d.columnId === popupVisible)\r\n              ].filterOptions?.map((el, i) => (\r\n                <div key={i}>\r\n                  <label key={i} className='undp-viz-label'>\r\n                    <input\r\n                      type='checkbox'\r\n                      className='undp-viz-checkbox'\r\n                      checked={\r\n                        filterOption[\r\n                          filterOption.findIndex(d => d.id === popupVisible)\r\n                        ].option.indexOf(el) !== -1\r\n                      }\r\n                      onChange={() => {\r\n                        const indx = filterOption.findIndex(d => d.id === popupVisible);\r\n                        const opt = [...filterOption[indx].option];\r\n                        if (opt.indexOf(el) !== -1) {\r\n                          opt.splice(opt.indexOf(el), 1);\r\n                          const filterOptionDuplicate = [...filterOption];\r\n                          filterOptionDuplicate[indx].option = opt;\r\n                          setFilterOption(filterOptionDuplicate);\r\n                        } else {\r\n                          opt.push(el);\r\n                          const filterOptionDuplicate = [...filterOption];\r\n                          filterOptionDuplicate[indx].option = opt;\r\n                          setFilterOption(filterOptionDuplicate);\r\n                        }\r\n                      }}\r\n                    />\r\n                    {el}\r\n                  </label>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </GraphContainer>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","map","d","reduce","acc","cur","DataTable","props","$","_c","width","height","graphTitle","sources","graphDescription","footNote","graphID","data","columnData","onSeriesMouseClick","language","t0","theme","t1","ariaLabel","backgroundColor","t2","padding","resetSelectionOnDoubleClick","t3","styles","classNames","minWidth","naLabel","t4","precision","t5","locale","t6","undefined","graphParentDiv","useRef","columnSortBy","setColumnSortBy","useState","mouseClickData","setMouseClickData","sortDirection","setSortDirection","popupVisible","setPopupVisible","t7","Symbol","for","popupStyle","setPopupStyle","t8","filter","_temp","_temp2","filterOption","setFilterOption","sortedData","setSortedData","t9","data_0","sortDataEvent","useEffectEvent","t10","dataFiltered","forEach","d_1","el","id","findIndex","cd_0","cd","columnId","separator","arr","split","intersection","option","length","indexOf","push","orderBy","t11","useEffect","t12","graphContainer","t13","t14","description","title","jsx","GraphHeader","t15","t16","t17","t18","t19","jsxs","borderCollapse","d_2","i","columnWidth","_temp3","P","align","columnTitle","sortable","SortingIconAscending","SortingIconDescending","SortingIcon","filterOptions","event","currentTarget","rect","getBoundingClientRect","top","bottom","window","scrollY","left","scrollX","FilterIcon","FilterIconApplied","d_3","i_0","isEqual","rowStyle","el_1","j","_temp4","chip","chipColors","c","value","chipColumnId","color","getTextColorBasedOnBgColor","c_0","numberFormattingFunction","prefix","suffix","element","indx","c_1","c_2","c_3","c_4","t20","t21","t22","footnote","source","GraphFooter","t23","d_4","el_2","i_1","d_5","indx_0","d_6","opt","splice","filterOptionDuplicate","filterOptionDuplicate_0","t24","GraphContainer","cd_2","cd_1","d_0"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs","sources":["../src/Components/Graphs/DataTable/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport isEqual from 'fast-deep-equal';\r\nimport { useEffect, useEffectEvent, useRef, useState } from 'react';\r\nimport intersection from 'lodash.intersection';\r\nimport { P } from '@undp/design-system-react/Typography';\r\nimport orderBy from 'lodash.orderby';\r\n\r\nimport {\r\n  DataTableColumnDataType,\r\n  Languages,\r\n  SourcesDataType,\r\n  StyleObject,\r\n  ClassNameObject,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport {\r\n  FilterIcon,\r\n  FilterIconApplied,\r\n  SortingIcon,\r\n  SortingIconAscending,\r\n  SortingIconDescending,\r\n} from '@/Components/Icons';\r\nimport { getTextColorBasedOnBgColor } from '@/Utils/getTextColorBasedOnBgColor';\r\nimport { GraphContainer } from '@/Components/Elements/GraphContainer';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */\r\n  data: object[];\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  /** 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  /** Minimum width of the table as string in px */\r\n  minWidth?: string;\r\n  /** Height of the graph */\r\n  height?: 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\r\n  // Graph Parameters\r\n  /** Column settings for each column shown in the table. */\r\n  columnData: DataTableColumnDataType[];\r\n  /** Defines how “NA” values should be displayed/labelled in the graph */\r\n  naLabel?: string;\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  /** Callback for mouse click event */\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\nconst TotalWidth = (columns: (number | undefined)[]) => {\r\n  const columnWidth = columns.map(d => d || 1);\r\n  const sum = columnWidth.reduce((acc, cur) => acc + cur, 0);\r\n  return sum;\r\n};\r\n\r\nexport function DataTable(props: Props) {\r\n  const {\r\n    width,\r\n    height,\r\n    graphTitle,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    graphID,\r\n    data,\r\n    columnData,\r\n    onSeriesMouseClick,\r\n    language = 'en',\r\n    theme = 'light',\r\n    ariaLabel,\r\n    backgroundColor = false,\r\n    padding,\r\n    resetSelectionOnDoubleClick = true,\r\n    styles,\r\n    classNames,\r\n    minWidth,\r\n    naLabel = 'NA',\r\n  } = props;\r\n  const graphParentDiv = useRef<HTMLDivElement>(null);\r\n  const [columnSortBy, setColumnSortBy] = useState<string | undefined>(undefined);\r\n\r\n  const [mouseClickData, setMouseClickData] = useState<any>(undefined);\r\n  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');\r\n  const [popupVisible, setPopupVisible] = useState<string | undefined>(undefined);\r\n  const [popupStyle, setPopupStyle] = useState({});\r\n  const [filterOption, setFilterOption] = useState(\r\n    columnData\r\n      .filter(d => d.filterOptions && d.filterOptions.length > 0)\r\n      .map(d => ({ id: d.columnId, option: d.filterOptions as string[] })),\r\n  );\r\n  const [sortedData, setSortedData] = useState(data);\r\n\r\n  const sortDataEvent = useEffectEvent((data: object[]) => {\r\n    setSortedData(data);\r\n  });\r\n\r\n  useEffect(() => {\r\n    const dataFiltered: any = [];\r\n\r\n    data.forEach((d: any) => {\r\n      let filter = true;\r\n      filterOption.forEach(el => {\r\n        if (\r\n          typeof d[el.id] !== 'object' &&\r\n          typeof d[el.id] !== 'function' &&\r\n          typeof d[el.id] !== 'symbol'\r\n        ) {\r\n          if (columnData[columnData.findIndex(cd => cd.columnId === el.id)].separator) {\r\n            const arr = d[el.id].split(\r\n              columnData[columnData.findIndex(cd => cd.columnId === el.id)].separator,\r\n            );\r\n            if (intersection(arr, el.option).length === 0) filter = false;\r\n          } else if (el.option.indexOf(d[el.id]) === -1) filter = false;\r\n        }\r\n      });\r\n      if (filter) dataFiltered.push(d);\r\n    });\r\n    if (columnSortBy && data) {\r\n      sortDataEvent(orderBy(dataFiltered, [columnSortBy], [sortDirection]));\r\n    } else {\r\n      sortDataEvent(dataFiltered);\r\n    }\r\n  }, [columnSortBy, sortDirection, data, filterOption, columnData]);\r\n\r\n  return (\r\n    <GraphContainer\r\n      className={classNames?.graphContainer}\r\n      style={styles?.graphContainer}\r\n      id={graphID}\r\n      ref={graphParentDiv}\r\n      aria-label={ariaLabel}\r\n      backgroundColor={backgroundColor}\r\n      theme={theme}\r\n      language={language}\r\n      width={width}\r\n      height={height}\r\n      padding={padding}\r\n    >\r\n      {graphTitle || graphDescription ? (\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        />\r\n      ) : null}\r\n      <div className='grow flex flex-col justify-center'>\r\n        <div\r\n          className='undp-scrollbar'\r\n          style={{\r\n            width: width ? `${width}px` : '100%',\r\n            height: height ? `${height}px` : 'auto',\r\n          }}\r\n        >\r\n          <div style={minWidth ? { minWidth } : undefined}>\r\n            {data ? (\r\n              <table className='w-full' style={{ borderCollapse: 'collapse' }}>\r\n                <thead className='text-left bg-primary-gray-300 dark:bg-primary-gray-550'>\r\n                  <tr>\r\n                    {columnData?.map((d, i) => (\r\n                      <th\r\n                        className='text-primary-gray-700 dark:text-primary-gray-100 text-sm'\r\n                        style={{\r\n                          width: `calc(${\r\n                            (100 * (d.columnWidth || 1)) /\r\n                            TotalWidth(columnData.map(cd => cd.columnWidth || 1))\r\n                          }%`,\r\n                        }}\r\n                        key={i}\r\n                      >\r\n                        <div className='flex gap-2 justify-between items-center p-4'>\r\n                          <P\r\n                            size='sm'\r\n                            marginBottom='none'\r\n                            className={`w-fit grow text-${d.align || 'left'} font-bold`}\r\n                          >\r\n                            {d.columnTitle || d.columnId}\r\n                          </P>\r\n                          {d.sortable ? (\r\n                            <button\r\n                              type='button'\r\n                              className='bg-transparent cursor-pointer p-0 m-0 border-0'\r\n                              onClick={() => {\r\n                                if (columnSortBy === d.columnId) {\r\n                                  if (sortDirection === 'asc') {\r\n                                    setSortDirection('desc');\r\n                                  }\r\n                                  if (sortDirection === 'desc') {\r\n                                    setColumnSortBy(undefined);\r\n                                  }\r\n                                } else {\r\n                                  setColumnSortBy(d.columnId);\r\n                                  setSortDirection('asc');\r\n                                }\r\n                              }}\r\n                            >\r\n                              {columnSortBy === d.columnId ? (\r\n                                sortDirection === 'asc' ? (\r\n                                  <SortingIconAscending />\r\n                                ) : (\r\n                                  <SortingIconDescending />\r\n                                )\r\n                              ) : (\r\n                                <SortingIcon />\r\n                              )}\r\n                            </button>\r\n                          ) : null}\r\n                          {d.filterOptions && d.filterOptions.length ? (\r\n                            <button\r\n                              type='button'\r\n                              className='bg-transparent cursor-pointer m-0 p-0 border-0'\r\n                              onClick={event => {\r\n                                if (popupVisible === d.columnId) {\r\n                                  setPopupVisible(undefined);\r\n                                } else if (event.currentTarget) {\r\n                                  setPopupVisible(d.columnId);\r\n                                  const rect = event.currentTarget.getBoundingClientRect();\r\n                                  setPopupStyle({\r\n                                    top: rect.bottom + window.scrollY,\r\n                                    left:\r\n                                      rect.left + window.scrollX - 160 < 0\r\n                                        ? rect.left + window.scrollX\r\n                                        : rect.left + window.scrollX - 160,\r\n                                    width: '10rem',\r\n                                  });\r\n                                }\r\n                              }}\r\n                            >\r\n                              {filterOption[filterOption.findIndex(el => el.id === d.columnId)]\r\n                                .option.length === d.filterOptions?.length ? (\r\n                                <FilterIcon />\r\n                              ) : (\r\n                                <FilterIconApplied />\r\n                              )}\r\n                            </button>\r\n                          ) : null}\r\n                        </div>\r\n                      </th>\r\n                    ))}\r\n                  </tr>\r\n                </thead>\r\n                <tbody>\r\n                  {sortedData?.map((d: any, i: number) => (\r\n                    <tr\r\n                      key={i}\r\n                      className={`cursor-${\r\n                        onSeriesMouseClick ? 'pointer' : 'auto'\r\n                      } border-b border-b-primary-gray-400 dark:border-b-primary-gray-500 ${\r\n                        isEqual(mouseClickData, d)\r\n                          ? 'bg-primary-gray-200 dark:bg-primary-gray-600'\r\n                          : 'bg-transparent'\r\n                      }`}\r\n                      style={d.rowStyle}\r\n                      onClick={() => {\r\n                        if (onSeriesMouseClick) {\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                    >\r\n                      {columnData.map((el, j) => (\r\n                        <td\r\n                          key={j}\r\n                          className={`text-primary-gray-700 dark:text-primary-gray-100 text-sm text-${\r\n                            el.align || 'left'\r\n                          }`}\r\n                          style={{\r\n                            width: `calc(${\r\n                              (100 * (d.columnWidth || 1)) /\r\n                              TotalWidth(columnData.map(cd => cd.columnWidth || 1))\r\n                            }%`,\r\n                          }}\r\n                        >\r\n                          <div\r\n                            className={`text-primary-gray-700 dark:text-primary-gray-100 flex p-4 ${\r\n                              el.align === 'right'\r\n                                ? 'justify-end'\r\n                                : el.align === 'center'\r\n                                  ? 'justify-center'\r\n                                  : 'justify-start'\r\n                            }`}\r\n                          >\r\n                            {typeof d[el.columnId] === 'number' ? (\r\n                              <P\r\n                                marginBottom='none'\r\n                                size='sm'\r\n                                className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                  el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\r\n                                } text-${el.align || 'left'} ${\r\n                                  el.chip\r\n                                    ? !el.chipColors\r\n                                      ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                      : ''\r\n                                    : 'bg-transparent'\r\n                                }`}\r\n                                style={{\r\n                                  ...(el.chip && el.chipColors\r\n                                    ? {\r\n                                        backgroundColor:\r\n                                          el.chipColors[\r\n                                            el.chipColors.findIndex(\r\n                                              c => c.value === d[el.chipColumnId || el.columnId],\r\n                                            )\r\n                                          ].color,\r\n                                        color: getTextColorBasedOnBgColor(\r\n                                          el.chipColors[\r\n                                            el.chipColors.findIndex(\r\n                                              c => c.value === d[el.chipColumnId || el.columnId],\r\n                                            )\r\n                                          ].color,\r\n                                        ),\r\n                                      }\r\n                                    : {}),\r\n                                }}\r\n                              >\r\n                                {numberFormattingFunction(\r\n                                  d[el.columnId],\r\n                                  naLabel,\r\n                                  el.precision,\r\n                                  el.prefix,\r\n                                  el.suffix,\r\n                                  el.locale,\r\n                                  el.padZeros,\r\n                                )}\r\n                              </P>\r\n                            ) : typeof d[el.columnId] === 'string' ? (\r\n                              el.separator ? (\r\n                                <div className='text-primary-gray-700 dark:text-primary-gray-100 flex flex-wrap gap-2'>\r\n                                  {d[el.columnId]\r\n                                    .split(el.separator)\r\n                                    .map((element: string, indx: number) => (\r\n                                      <P\r\n                                        key={indx}\r\n                                        marginBottom='none'\r\n                                        size='sm'\r\n                                        className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                          el.chip\r\n                                            ? 'grow-0 rounded-sm p-2'\r\n                                            : 'grow rounded-none p-0'\r\n                                        } text-${el.align || 'left'} ${\r\n                                          el.chip\r\n                                            ? !el.chipColors\r\n                                              ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                              : ''\r\n                                            : 'bg-transparent'\r\n                                        }`}\r\n                                        style={{\r\n                                          ...(el.chip && el.chipColors\r\n                                            ? {\r\n                                                backgroundColor:\r\n                                                  el.chipColors[\r\n                                                    el.chipColors.findIndex(\r\n                                                      c =>\r\n                                                        c.value ===\r\n                                                        (el.chipColumnId\r\n                                                          ? d[el.chipColumnId]\r\n                                                          : element),\r\n                                                    )\r\n                                                  ].color,\r\n                                                color: getTextColorBasedOnBgColor(\r\n                                                  el.chipColors[\r\n                                                    el.chipColors.findIndex(\r\n                                                      c =>\r\n                                                        c.value ===\r\n                                                        (el.chipColumnId\r\n                                                          ? d[el.chipColumnId]\r\n                                                          : element),\r\n                                                    )\r\n                                                  ].color,\r\n                                                ),\r\n                                              }\r\n                                            : {}),\r\n                                        }}\r\n                                      >\r\n                                        {numberFormattingFunction(\r\n                                          element,\r\n                                          naLabel,\r\n                                          el.precision,\r\n                                          el.prefix,\r\n                                          el.suffix,\r\n                                          el.locale,\r\n                                          el.padZeros,\r\n                                        )}\r\n                                      </P>\r\n                                    ))}\r\n                                </div>\r\n                              ) : (\r\n                                <P\r\n                                  marginBottom='none'\r\n                                  size='sm'\r\n                                  className={`text-primary-gray-700 dark:text-primary-gray-100 w-fit ${\r\n                                    el.chip ? 'grow-0 rounded-sm p-2' : 'grow rounded-none p-0'\r\n                                  } text-${el.align || 'left'} ${\r\n                                    el.chip\r\n                                      ? !el.chipColors\r\n                                        ? 'bg-primary-gray-300 dark:bg-primary-gray-500'\r\n                                        : ''\r\n                                      : 'bg-transparent'\r\n                                  }`}\r\n                                  style={{\r\n                                    ...(el.chip && el.chipColors\r\n                                      ? {\r\n                                          backgroundColor:\r\n                                            el.chipColors[\r\n                                              el.chipColors.findIndex(\r\n                                                c => c.value === d[el.chipColumnId || el.columnId],\r\n                                              )\r\n                                            ].color,\r\n                                          color: getTextColorBasedOnBgColor(\r\n                                            el.chipColors[\r\n                                              el.chipColors.findIndex(\r\n                                                c => c.value === d[el.chipColumnId || el.columnId],\r\n                                              )\r\n                                            ].color,\r\n                                          ),\r\n                                        }\r\n                                      : {}),\r\n                                  }}\r\n                                >\r\n                                  {numberFormattingFunction(\r\n                                    d[el.columnId],\r\n                                    naLabel,\r\n                                    el.precision,\r\n                                    el.prefix,\r\n                                    el.suffix,\r\n                                    el.locale,\r\n                                    el.padZeros,\r\n                                  )}\r\n                                </P>\r\n                              )\r\n                            ) : (\r\n                              <div>\r\n                                {numberFormattingFunction(\r\n                                  d[el.columnId],\r\n                                  naLabel,\r\n                                  el.precision,\r\n                                  el.prefix,\r\n                                  el.suffix,\r\n                                  el.locale,\r\n                                  el.padZeros,\r\n                                )}\r\n                              </div>\r\n                            )}\r\n                          </div>\r\n                        </td>\r\n                      ))}\r\n                    </tr>\r\n                  ))}\r\n                </tbody>\r\n              </table>\r\n            ) : null}\r\n          </div>\r\n        </div>\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      {popupVisible && (\r\n        <div\r\n          style={popupStyle}\r\n          className='absolute p-3 border z-[1000] rounded-sm bg-primary-white dark:bg-primary-gray-700 border-primary-gray-300 dark:border-primary-gray-550'\r\n        >\r\n          <div className='max-w-60'>\r\n            <P size='sm' marginBottom='2xs' className='font-bold'>\r\n              Filter data by\r\n            </P>\r\n            <div className='flex flex-col gap-2'>\r\n              {columnData[\r\n                columnData.findIndex(d => d.columnId === popupVisible)\r\n              ].filterOptions?.map((el, i) => (\r\n                <div key={i}>\r\n                  <label key={i} className='undp-viz-label'>\r\n                    <input\r\n                      type='checkbox'\r\n                      className='undp-viz-checkbox'\r\n                      checked={\r\n                        filterOption[\r\n                          filterOption.findIndex(d => d.id === popupVisible)\r\n                        ].option.indexOf(el) !== -1\r\n                      }\r\n                      onChange={() => {\r\n                        const indx = filterOption.findIndex(d => d.id === popupVisible);\r\n                        const opt = [...filterOption[indx].option];\r\n                        if (opt.indexOf(el) !== -1) {\r\n                          opt.splice(opt.indexOf(el), 1);\r\n                          const filterOptionDuplicate = [...filterOption];\r\n                          filterOptionDuplicate[indx].option = opt;\r\n                          setFilterOption(filterOptionDuplicate);\r\n                        } else {\r\n                          opt.push(el);\r\n                          const filterOptionDuplicate = [...filterOption];\r\n                          filterOptionDuplicate[indx].option = opt;\r\n                          setFilterOption(filterOptionDuplicate);\r\n                        }\r\n                      }}\r\n                    />\r\n                    {el}\r\n                  </label>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </GraphContainer>\r\n  );\r\n}\r\n"],"names":["TotalWidth","columns","map","d","reduce","acc","cur","DataTable","props","$","_c","width","height","graphTitle","sources","graphDescription","footNote","graphID","data","columnData","onSeriesMouseClick","language","t0","theme","t1","ariaLabel","backgroundColor","t2","padding","resetSelectionOnDoubleClick","t3","styles","classNames","minWidth","naLabel","t4","undefined","graphParentDiv","useRef","columnSortBy","setColumnSortBy","useState","mouseClickData","setMouseClickData","sortDirection","setSortDirection","popupVisible","setPopupVisible","t5","Symbol","for","popupStyle","setPopupStyle","t6","filter","_temp","_temp2","filterOption","setFilterOption","sortedData","setSortedData","t7","data_0","sortDataEvent","useEffectEvent","t8","dataFiltered","forEach","d_1","el","id","findIndex","cd_0","cd","columnId","separator","arr","split","intersection","option","length","indexOf","push","orderBy","t9","useEffect","t10","graphContainer","t11","t12","description","title","jsx","GraphHeader","t13","t14","t15","t16","t17","jsxs","borderCollapse","d_2","i","columnWidth","_temp3","P","align","columnTitle","sortable","SortingIconAscending","SortingIconDescending","SortingIcon","filterOptions","event","currentTarget","rect","getBoundingClientRect","top","bottom","window","scrollY","left","scrollX","FilterIcon","FilterIconApplied","d_3","i_0","isEqual","rowStyle","el_1","j","_temp4","chip","chipColors","c","value","chipColumnId","color","getTextColorBasedOnBgColor","c_0","numberFormattingFunction","precision","prefix","suffix","locale","padZeros","element","indx","c_1","c_2","c_3","c_4","t18","t19","t20","footnote","source","GraphFooter","t21","d_4","el_2","i_1","d_5","indx_0","d_6","opt","splice","filterOptionDuplicate","filterOptionDuplicate_0","t22","GraphContainer","cd_2","cd_1","d_0"],"mappings":"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"}

package/dist/DataTable.d.ts

@@ -50,10 +50,13 @@ declare interface DataTableColumnDataType {
     align?: 'left' | 'right' | 'center';
     suffix?: string;
     prefix?: string;
+    locale?: string;
+    precision?: number;
+    padZeros?: boolean;
     columnWidth?: number;
 }
 
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
 
 declare interface Props {
     /** Array of data objects. If the data have a object for ket `rowStyle` then that is use to style the row of the table. */
@@ -84,8 +87,6 @@ declare interface Props {
     padding?: string;
     /** Column settings for each column shown in the table. */
     columnData: DataTableColumnDataType[];
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
@@ -98,8 +99,6 @@ declare interface Props {
     theme?: 'light' | 'dark';
     /** Unique ID for the graph */
     graphID?: string;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
 }
 
 declare interface SourcesDataType {