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