@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 2.81 kB
JavaScript
;var e=require("react/jsx-runtime"),t=require("@mui/material"),o=require("@mui/material/styles"),l=require("../../WebCore/Typography/Typography.js");const r=o.styled(t.Box)(({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(e.custom.margin.xs),width:"100%"})),a=o.styled(t.Box)(({theme:e})=>({borderRadius:e.spacing(e.custom.radius.md),display:"flex",gap:1,height:40,overflow:"hidden",width:"100%"})),n=o.styled(t.Box,{shouldForwardProp:e=>!["width","backgroundColor","color"].includes(e)})(({width:e,backgroundColor:t,color:o})=>({alignItems:"center",backgroundColor:t,color:o,display:"flex",fontSize:"16px",fontWeight:"bold",justifyContent:"center",overflow:"hidden",position:"relative",transition:"opacity 0.3s ease",width:`${e}%`})),c=o.styled(t.Box)({textAlign:"center"}),s=o.styled(t.Stack)(({theme:e})=>({alignItems:"space-between",flexDirection:"row",flexWrap:"wrap",gap:e.spacing(e.custom.margin.md),justifyContent:"center"})),i=o.styled(l)(({theme:e})=>({display:"flex",alignItems:"flex-start",justifyContent:"center",flex:1,marginBottom:e.spacing(.5),textAlign:"center"}));module.exports=({data:t=[]})=>{const u=o.useTheme(),d={"Strongly Disagree":{backgroundColor:u.custom.palette.data.sentimentVeryNegative,color:u.custom.palette.red[1e3],countColor:u.custom.palette.red[800],label:"",labelColor:u.custom.palette.text.negative,value:0},Disagree:{backgroundColor:u.custom.palette.data.sentimentNegative,color:u.custom.palette.red[1e3],countColor:u.custom.palette.red[800],label:"",labelColor:u.custom.palette.text.negative,value:0},Neutral:{backgroundColor:u.custom.palette.data.sentimentNeutral,color:u.custom.palette.neutral[1e3],countColor:u.custom.palette.neutral[800],label:"",labelColor:u.custom.palette.text.secondary,value:0},Agree:{backgroundColor:u.custom.palette.data.sentimentPositive,color:u.custom.palette.green[1e3],countColor:u.custom.palette.green[800],label:"",labelColor:u.custom.palette.text.positive,value:0},"Strongly Agree":{backgroundColor:u.custom.palette.data.sentimentVeryPositive,color:u.custom.palette.green[1e3],countColor:u.custom.palette.green[800],label:"",labelColor:u.custom.palette.text.positive,value:0}},p=t.reduce((e,t)=>e+t,0),m=t.map((e,t)=>({...Object.values(d)[t],label:Object.values(d)[t].label,value:e,percentage:Number((e/p*100).toFixed(0))}));return e.jsxs(r,{children:[e.jsx(a,{children:m.map((t,o)=>e.jsx(n,{backgroundColor:t.backgroundColor,color:t.color,width:t.percentage,children:e.jsxs(c,{children:[e.jsxs(l,{variation:"xxs",component:"p",weight:"bold",color:t.color,children:[t.percentage,"%"]}),e.jsx(l,{variation:"xxs",component:"p",color:t.countColor,children:t.value})]})},o))}),e.jsx(s,{children:m.map((t,o)=>e.jsx(i,{variation:"xxs",component:"p",color:t.labelColor,children:t.label},`label-${o}`))})]})};