@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.79 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 n}from"./_partials/StyledComponents.js";const l=({rounding:l,tickInterval:s=10,data:d,loading:p,disabled:h,onChangeHandler:c,animateBars:m,slotProps:g,hideYAxis:b=!1,hideTopValueSection:u=!1,hideTopAmountValueSection:x=!1,hideTopPercentageValueSection:v=!1,showGraphLines:S=!1,hidePercentageSymbol:P=!1,hideLabels:k=!1,hideCheckboxes:C=!1,disableTooltips:T=!1,maxHeight:f=465,responsive:A=!1})=>{const V=r(()=>Math.ceil(d.reduce((e,{percentage:a})=>a>e?a:e,0)),[d]);return e(o,{...g?.root,maxHeight:f,responsive:A,children:[!b&&a(t,{graphMaxHeight:f,loading:p,yAxisMax:V,rounding:l,tickInterval:s,disabled:h,showGraphLines:S,hideLabel:k,hideCheckbox:C,responsive:A,slotProps:{root:g?.yAxis}}),a(n,{...g?.barsWrapper,maxHeight:f,responsive:A,children:d.map((e,r)=>{if(r>=11)return;const{percentage:t,label:o,value:n,checked:l,id:b,amount:S,hidePercentageSymbol:y,relativePercentage:G,onChange:H,tooltipContent:B}=e,L=y??P;return a(i,{totalBars:d.length,barIndex:r,graphMaxHeight:f,loading:p,label:o,value:n,amount:S,percentage:t,maxDataValue:V,hidePercentageSymbol:L,hideTopPercentageValueSection:v,hideTopAmountValueSection:x,checked:l,tickInterval:s,disabled:h||p,animateBar:m,hideTopValueSection:u,responsive:A,onChange:c?(e,a)=>c(e,a):H?(e,a)=>H({amount:S,percentage:t,name:o,relativePercentage:G},a):void 0,hideLabel:k,hideCheckbox:C,tooltipContent:B,disableTooltip:T,id:b,className:`slider-graph-bar-${r+1}`,slotProps:{barWrapper:{},checkbox:{},value:{},label:{},tooltip:{}},...g?.bar},r)})})]})};export{l as default};