@while-and-for/tremor-react
Version:
The React library to build dashboards faster.
2 lines (1 loc) • 2.5 kB
JavaScript
import{__rest as e}from"tslib";import t from"react";import{sizing as r}from"../../../lib/sizing.js";import{spacing as a}from"../../../lib/spacing.js";import{colorPalette as m}from"../../../lib/theme.js";import{getColorClassNames as n,makeClassName as o,defaultValueFormatter as l}from"../../../lib/utils.js";import{tremorTwMerge as s}from"../../../lib/tremorTwMerge.js";const i=o("BarList"),c=t.forwardRef(((o,c)=>{const{data:d=[],color:h,valueFormatter:p=l,showAnimation:u=!0,className:f}=o,g=e(o,["data","color","valueFormatter","showAnimation","className"]),x=(e=>{let t=-1/0;return e.forEach((e=>{t=Math.max(t,e)})),e.map((e=>0===e?0:Math.max(e/t*100,1)))})(d.map((e=>e.value))),b=r.threeXl.height;return t.createElement("div",Object.assign({ref:c,className:s(i("root"),"flex justify-between",a.threeXl.spaceX,f)},g),t.createElement("div",{className:s(i("bars"),"relative w-full")},d.map(((e,o)=>{var l,c,p;const f=e.icon;return t.createElement("div",{key:null!==(l=e.key)&&void 0!==l?l:e.name,className:s(i("bar"),"flex items-center rounded-tremor-small",b,e.color||h?n(null!==(c=e.color)&&void 0!==c?c:h,m.lightBackground).bgColor:"bg-tremor-brand-muted dark:bg-dark-tremor-brand-muted",o===d.length-1?a.none.marginBottom:a.sm.marginBottom),style:{width:`${x[o]}%`,transition:u?"all 1s":""}},t.createElement("div",{className:s("absolute max-w-full flex",a.sm.left)},f?t.createElement(f,{className:s(i("barIcon"),"flex-none","text-tremor-content","dark:text-dark-tremor-content",r.lg.height,r.lg.width,a.md.marginRight)}):null,e.href?t.createElement("a",{href:e.href,target:null!==(p=e.target)&&void 0!==p?p:"_blank",rel:"noreferrer",className:s(i("barLink"),"whitespace-nowrap hover:underline truncate text-tremor-default","text-tremor-content-emphasis","dark:text-dark-tremor-content-emphasis")},e.name):t.createElement("p",{className:s(i("barText"),"whitespace-nowrap truncate text-tremor-default","text-tremor-content-emphasis","dark:text-dark-tremor-content-emphasis")},e.name)))}))),t.createElement("div",{className:"text-right min-w-min"},d.map(((e,r)=>{var m;return t.createElement("div",{key:null!==(m=e.key)&&void 0!==m?m:e.name,className:s(i("labelWrapper"),"flex justify-end items-center",b,r===d.length-1?a.none.marginBottom:a.sm.marginBottom)},t.createElement("p",{className:s(i("labelText"),"whitespace-nowrap truncate text-tremor-default","text-tremor-content-emphasis","dark:text-dark-tremor-content-emphasis")},p(e.value)))}))))}));c.displayName="BarList";export{c as default};