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

The React library to build dashboards faster.

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