UNPKG

@while-and-for/tremor-react

Version:

The React library to build dashboards faster.

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