@while-and-for/tremor-react
Version:
The React library to build dashboards faster.
3 lines (2 loc) • 3.73 kB
JavaScript
'use client';
import{__rest as t}from"tslib";import e,{useState as a}from"react";import{BaseColors as r}from"../../../lib/constants.js";import{themeColorRange as o,colorPalette as l}from"../../../lib/theme.js";import{getColorClassNames as i,defaultValueFormatter as n}from"../../../lib/utils.js";import{tremorTwMerge as s}from"../../../lib/tremorTwMerge.js";import{ResponsiveContainer as m,BarChart as c,CartesianGrid as d,XAxis as f,YAxis as h,Tooltip as k,Legend as u,Bar as p}from"recharts";import{constructCategoryColors as v,getYAxisDomain as y}from"../common/utils.js";import w from"../common/ChartLegend.js";import x from"../common/ChartTooltip.js";import g from"../common/NoData.js";const b=e.forwardRef(((b,E)=>{const{data:A=[],categories:L=[],index:D,colors:N=o,valueFormatter:j=n,layout:T="horizontal",stack:C=!1,relative:V=!1,startEndOnly:F=!1,animationDuration:G=900,showAnimation:O=!0,showXAxis:S=!0,showYAxis:z=!0,yAxisWidth:K=56,showTooltip:M=!0,showLegend:B=!0,showGridLines:W=!0,autoMinValue:X=!1,minValue:Y,maxValue:I,allowDecimals:R=!0,noDataText:$,className:q}=b,H=t(b,["data","categories","index","colors","valueFormatter","layout","stack","relative","startEndOnly","animationDuration","showAnimation","showXAxis","showYAxis","yAxisWidth","showTooltip","showLegend","showGridLines","autoMinValue","minValue","maxValue","allowDecimals","noDataText","className"]),[J,P]=a(60),Q=v(L,N),U=y(X,Y,I);return e.createElement("div",Object.assign({ref:E,className:s("w-full h-80",q)},H),e.createElement(m,{className:"h-full w-full"},(null==A?void 0:A.length)?e.createElement(c,{data:A,stackOffset:V?"expand":"none",layout:"vertical"===T?"vertical":"horizontal"},W?e.createElement(d,{className:s("stroke-1","stroke-tremor-content-subtle","dark:stroke-dark-tremor-content-subtle"),strokeDasharray:"3 3",horizontal:"vertical"!==T,vertical:"vertical"===T}):null,"vertical"!==T?e.createElement(f,{hide:!S,dataKey:D,interval:"preserveStartEnd",tick:{transform:"translate(0, 6)"},ticks:F?[A[0][D],A[A.length-1][D]]:void 0,fill:"",stroke:"",className:s("mt-4 text-tremor-label","fill-tremor-content","dark:fill-dark-tremor-content"),tickLine:!1,axisLine:!1}):e.createElement(f,{hide:!S,type:"number",tick:{transform:"translate(-3, 0)"},domain:U,fill:"",stroke:"",className:s("text-tremor-label","fill-tremor-content","dark:fill-dark-tremor-content"),tickLine:!1,axisLine:!1,tickFormatter:j,padding:{left:10,right:10},minTickGap:5,allowDecimals:R}),"vertical"!==T?e.createElement(h,{width:K,hide:!z,axisLine:!1,tickLine:!1,type:"number",domain:U,tick:{transform:"translate(-3, 0)"},fill:"",stroke:"",className:s("text-tremor-label","fill-tremor-content","dark:fill-dark-tremor-content"),tickFormatter:V?t=>`${(100*t).toString()} %`:j,allowDecimals:R}):e.createElement(h,{width:K,hide:!z,dataKey:D,axisLine:!1,tickLine:!1,ticks:F?[A[0][D],A[A.length-1][D]]:void 0,type:"category",interval:"preserveStartEnd",tick:{transform:"translate(0, 6)"},fill:"",stroke:"",className:s("text-tremor-label","fill-tremor-content","dark:fill-dark-tremor-content")}),M?e.createElement(k,{wrapperStyle:{outline:"none"},isAnimationActive:!1,cursor:{fill:"#d1d5db",opacity:"0.15"},content:({active:t,payload:a,label:r})=>e.createElement(x,{active:t,payload:a,label:r,valueFormatter:j,categoryColors:Q}),position:{y:0}}):null,B?e.createElement(u,{verticalAlign:"top",height:J,content:({payload:t})=>w({payload:t},Q,P)}):null,L.map((t=>{var a;return e.createElement(p,{className:i(null!==(a=Q.get(t))&&void 0!==a?a:r.Gray,l.background).fillColor,key:t,name:t,type:"linear",stackId:C||V?"a":void 0,dataKey:t,fill:"",isAnimationActive:O,animationDuration:G})}))):e.createElement(g,{noDataText:$})))}));b.displayName="BarChart";export{b as default};