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