@while-and-for/tremor-react/dist/components/chart-elements/AreaChart/AreaChart.js

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import t,{useState as o}from"react";import{ResponsiveContainer as a,AreaChart as r,CartesianGrid as l,XAxis as n,YAxis as i,Tooltip as s,Legend as m,Area as c}from"recharts";import{constructCategoryColors as d,getYAxisDomain as u}from"../common/utils.js";import p from"../common/ChartLegend.js";import k from"../common/ChartTooltip.js";import h from"../common/NoData.js";import{BaseColors as f}from"../../../lib/constants.js";import{themeColorRange as y,colorPalette as x}from"../../../lib/theme.js";import{getColorClassNames as v,defaultValueFormatter as g}from"../../../lib/utils.js";import{tremorTwMerge as w}from"../../../lib/tremorTwMerge.js";const E=t.forwardRef(((E,b)=>{const{data:N=[],categories:A=[],index:C,stack:D=!1,colors:G=y,valueFormatter:L=g,startEndOnly:j=!1,showXAxis:T=!0,showYAxis:O=!0,yAxisWidth:V=56,showAnimation:F=!0,animationDuration:W=900,showTooltip:M=!0,showLegend:K=!0,showGridLines:S=!0,showGradient:X=!0,autoMinValue:Y=!1,curveType:z="linear",minValue:I,maxValue:R,connectNulls:$=!1,allowDecimals:q=!0,noDataText:B,className:H}=E,J=e(E,["data","categories","index","stack","colors","valueFormatter","startEndOnly","showXAxis","showYAxis","yAxisWidth","showAnimation","animationDuration","showTooltip","showLegend","showGridLines","showGradient","autoMinValue","curveType","minValue","maxValue","connectNulls","allowDecimals","noDataText","className"]),[P,Q]=o(60),U=d(A,G),Z=u(Y,I,R);return t.createElement("div",Object.assign({ref:b,className:w("w-full h-80",H)},J),t.createElement(a,{className:"h-full w-full"},(null==N?void 0:N.length)?t.createElement(r,{data:N},S?t.createElement(l,{className:w("stroke-1","stroke-tremor-content-subtle","dark:stroke-dark-tremor-content-subtle"),strokeDasharray:"3 3",horizontal:!0,vertical:!1}):null,t.createElement(n,{hide:!T,dataKey:C,tick:{transform:"translate(0, 6)"},ticks:j?[N[0][C],N[N.length-1][C]]:void 0,fill:"",stroke:"",className:w("text-tremor-label","fill-tremor-content","dark:fill-dark-tremor-content"),interval:"preserveStartEnd",tickLine:!1,axisLine:!1,padding:{left:10,right:10},minTickGap:5}),t.createElement(i,{width:V,hide:!O,axisLine:!1,tickLine:!1,type:"number",domain:Z,tick:{transform:"translate(-3, 0)"},fill:"",stroke:"",className:w("text-tremor-label","fill-tremor-content","dark:fill-dark-tremor-content"),tickFormatter:L,allowDecimals:q}),M?t.createElement(s,{wrapperStyle:{outline:"none"},isAnimationActive:!1,cursor:{stroke:"#d1d5db",strokeWidth:1},content:({active:e,payload:o,label:a})=>t.createElement(k,{active:e,payload:o,label:a,valueFormatter:L,categoryColors:U}),position:{y:0}}):null,K?t.createElement(m,{verticalAlign:"top",height:P,content:({payload:e})=>p({payload:e},U,Q)}):null,A.map((e=>{var o,a;return t.createElement("defs",{key:e},X?t.createElement("linearGradient",{className:v(null!==(o=U.get(e))&&void 0!==o?o:f.Gray,x.text).textColor,id:U.get(e),x1:"0",y1:"0",x2:"0",y2:"1"},t.createElement("stop",{offset:"5%",stopColor:"currentColor",stopOpacity:.4}),t.createElement("stop",{offset:"95%",stopColor:"currentColor",stopOpacity:0})):t.createElement("linearGradient",{className:v(null!==(a=U.get(e))&&void 0!==a?a:f.Gray,x.text).textColor,id:U.get(e),x1:"0",y1:"0",x2:"0",y2:"1"},t.createElement("stop",{stopColor:"currentColor",stopOpacity:.3})))})),A.map((e=>{var o,a;return t.createElement(c,{className:v(null!==(o=U.get(e))&&void 0!==o?o:f.Gray,x.text).strokeColor,activeDot:{className:w("stroke-tremor-background dark:stroke-dark-tremor-background",v(null!==(a=U.get(e))&&void 0!==a?a:f.Gray,x.text).fillColor)},dot:!1,key:e,name:e,type:z,dataKey:e,stroke:"",fill:`url(#${U.get(e)})`,strokeWidth:2,strokeLinejoin:"round",strokeLinecap:"round",isAnimationActive:F,animationDuration:W,stackId:D?"a":void 0,connectNulls:$})}))):t.createElement(h,{noDataText:B})))}));E.displayName="AreaChart";export{E as default};