@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.83 kB
JavaScript
;var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@mui/material/styles"),o=require("../../WebCore/Typography/Typography.js");const a=r.styled(t.Box)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(e.custom.margin.xs),width:"100%"})),i=r.styled(t.Box)({display:"flex",gap:1,height:40,width:"100%"}),s=r.styled(t.Box)({alignItems:"center",display:"flex",flex:1,justifyContent:"center",overflow:"hidden",position:"relative",transition:"opacity 0.3s ease"}),l=r.styled(t.Box)({position:"relative",textAlign:"center"}),n=r.styled(t.Box,{shouldForwardProp:e=>!["backgroundColor","color","height"].includes(e)})(({theme:e,height:t})=>({background:e.custom.palette.purple[200],borderRadius:e.spacing(e.custom.radius.xs),bottom:0,height:`${t}%`,position:"absolute",width:"100%"})),c=r.styled(t.Stack)(({theme:e})=>({alignItems:"center",flexDirection:"row",justifyContent:"space-between",width:"100%"})),p=r.styled(o)(({theme:e})=>({color:e.custom.palette.text.secondary,flex:1,textAlign:"center"}));module.exports=({data:t=[]})=>{const d=r.useTheme(),u=t.reduce((e,t)=>e+t,0),x=t.map((e,t)=>({label:t+1,value:e,percentage:e/u*100,color:d.custom.palette.text.primary})),m=100/Math.max(...x.map(e=>e.percentage)),h=x.map(e=>({...e,percentage:Number(e.percentage.toFixed(0)),percentageFactor:Number((e.percentage*m).toFixed(0))}));return e.jsxs(a,{children:[e.jsx(i,{children:h.map((t,r)=>e.jsxs(s,{children:[e.jsx(n,{height:t.percentageFactor}),e.jsxs(l,{children:[e.jsxs(o,{variation:"xs",component:"p",weight:"bold",color:d.custom.palette.purple[1e3],children:[t.percentage,"%"]}),e.jsx(o,{variation:"xxs",component:"p",color:d.custom.palette.purple[800],children:t.value})]})]},r))}),e.jsx(c,{children:h.map(t=>e.jsx(p,{variation:"xs",component:"p",children:t.label},t.label))})]})};