@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.52 kB
JavaScript
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useMemo as r}from"react";import i from"./_partials/SliderGraphBar/SliderGraphBar.js";import t from"./_partials/SliderGraphYAxis/SliderGraphYAxis.js";import{SliderGraphWrapper as o,SliderGraphBarWrapper as l}from"./_partials/StyledComponents.js";const s=({rounding:s,tickInterval:n=10,data:p,loading:d,disabled:h,onChangeHandler:c,animateBars:m,slotProps:g,hideYAxis:b=!1,hideValues:x=!1,showGraphLines:u=!1,hideLabels:v=!1,hideCheckboxes:k=!1,disableTooltips:C=!1,maxHeight:f=465,responsive:G=!1})=>{const H=r(()=>Math.ceil(p.reduce((e,{percentage:a})=>a>e?a:e,0)),[p]);return e(o,{...g?.root,maxHeight:f,responsive:G,children:[!b&&a(t,{graphMaxHeight:f,loading:d,yAxisMax:H,rounding:s,tickInterval:n,disabled:h,showGraphLines:u,hideLabel:v,hideCheckbox:k,responsive:G,slotProps:{root:g?.yAxis}}),a(l,{...g?.barsWrapper,maxHeight:f,responsive:G,children:p.map((e,r)=>{const{percentage:t,label:o,value:l,checked:s,id:p,amount:b,relativePercentage:u,onChange:A}=e;return a(i,{graphMaxHeight:f,loading:d,label:o,value:l,percentage:t,maxDataValue:H,checked:s,tickInterval:n,disabled:h||d,animateBar:m,hideValue:x,responsive:G,onChange:c?(e,a)=>c(e,a):A?(e,a)=>A({amount:b,percentage:t,name:o,relativePercentage:u},a):void 0,hideLabel:v,hideCheckbox:k,toolTipContent:null==t?null:`${t}%`,disableTooltip:C,id:p,className:`slider-graph-bar-${r+1}`,slotProps:{barWrapper:{},checkbox:{},value:{},label:{},tooltip:{},bar:{}},...g?.bar},r)})})]})};export{s as default};