@while-and-for/tremor-react/dist/components/vis-elements/CategoryBar/CategoryBar.js

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import t from"react";import{sizing as r}from"../../../lib/sizing.js";import{spacing as l}from"../../../lib/spacing.js";import{colorPalette as a,themeColorRange as o}from"../../../lib/theme.js";import{getColorClassNames as s,makeClassName as n,sumNumericArray as i}from"../../../lib/utils.js";import{tremorTwMerge as m}from"../../../lib/tremorTwMerge.js";import c,{useTooltip as d}from"../../util-elements/Tooltip/Tooltip.js";const f=n("CategoryBar"),u=({values:e})=>{const a=i(e);let o=0,s=0;return t.createElement("div",{className:m(f("labels"),"relative flex w-full text-tremor-default","text-tremor-content","dark:text-dark-tremor-content",l.sm.marginBottom,r.lg.height)},e.slice(0,e.length).map(((e,r)=>{o+=e;const l=(e>=.1*a||s>=.09*a)&&a-o>=.15*a&&o>=.1*a;return s=l?0:s+=e,t.createElement("div",{key:`item-${r}`,className:"flex items-center justify-end",style:{width:`${e}%`}},t.createElement("span",{className:m(l?"block":"hidden","left-1/2 translate-x-1/2")},o))})),t.createElement("div",{className:m("absolute bottom-0 flex items-center",l.none.left)},"0"),t.createElement("div",{className:m("absolute bottom-0 flex items-center",l.none.right)},a))},g=t.forwardRef(((l,n)=>{const{values:i=[],colors:g=o,markerValue:b,showLabels:p=!0,tooltip:h,showAnimation:v=!0,className:x}=l,w=e(l,["values","colors","markerValue","showLabels","tooltip","showAnimation","className"]),E=((e,t,r)=>{if(void 0===e)return"";let l=0;for(let o=0;o<t.length;o++){const n=t[o],i=s(r[o],a.background).bgColor;if(l+=n,l>=e)return i}return""})(b,i,g),{tooltipProps:N,getReferenceProps:k}=d();return t.createElement(t.Fragment,null,t.createElement(c,Object.assign({text:h},N)),t.createElement("div",Object.assign({ref:n,className:m(f("root"),x)},w),p?t.createElement(u,{values:i}):null,t.createElement("div",{className:m(f("barWrapper"),"relative w-full flex items-center",r.xs.height)},t.createElement("div",{className:m("flex-1 flex items-center h-full overflow-hidden rounded-tremor-full")},i.map(((e,r)=>{var l;const o=null!==(l=g[r])&&void 0!==l?l:"gray";return t.createElement("div",{key:`item-${r}`,className:m(f("categoryBar"),"h-full",s(o,a.background).bgColor),style:{width:`${e}%`}})}))),void 0!==b?t.createElement("div",Object.assign({ref:N.refs.setReference,className:m(f("markerWrapper"),"absolute right-1/2 -translate-x-1/2",r.lg.width),style:{left:`${b}%`,transition:v?"all 1s":""}},k),t.createElement("div",{className:m(f("marker"),"ring-2 mx-auto rounded-tremor-full","ring-tremor-brand-inverted","dark:ring-dark-tremor-brand-inverted",E,r.md.height,r.twoXs.width)})):null)))}));g.displayName="CategoryBar";export{g as default};