@while-and-for/tremor-react
Version:
The React library to build dashboards faster.
3 lines (2 loc) • 3.64 kB
JavaScript
'use client';
import{__rest as e}from"tslib";import t,{useState as a}from"react";import{ResponsiveContainer as l,ScatterChart as o,CartesianGrid as r,XAxis as i,YAxis as n,Tooltip as s,ZAxis as m,Scatter as c,Legend as u}from"recharts";import{constructCategories as d,constructCategoryColors as h,getYAxisDomain as p}from"../common/utils.js";import y from"../common/NoData.js";import f from"../common/ChartLegend.js";import w from"./ScatterChartTooltip.js";import{BaseColors as x}from"../../../lib/constants.js";import{themeColorRange as v,colorPalette as k}from"../../../lib/theme.js";import{getColorClassNames as g,defaultValueFormatter as b}from"../../../lib/utils.js";import{tremorTwMerge as E}from"../../../lib/tremorTwMerge.js";const A=t.forwardRef(((A,D)=>{const{data:V=[],x:N,y:j,size:L,category:O,colors:T=v,showOpacity:X=!1,sizeRange:Y=[1,1e3],valueFormatter:z={x:b,y:b,size:b},startEndOnly:C=!1,showXAxis:F=!0,showYAxis:G=!0,yAxisWidth:M=56,animationDuration:S=900,showAnimation:K=!0,showTooltip:R=!0,showLegend:W=!0,showGridLines:$=!0,autoMinXValue:q=!1,minXValue:B,maxXValue:H,autoMinYValue:I=!1,minYValue:J,maxYValue:P,allowDecimals:Q=!0,noDataText:U,className:Z}=A,_=e(A,["data","x","y","size","category","colors","showOpacity","sizeRange","valueFormatter","startEndOnly","showXAxis","showYAxis","yAxisWidth","animationDuration","showAnimation","showTooltip","showLegend","showGridLines","autoMinXValue","minXValue","maxXValue","autoMinYValue","minYValue","maxYValue","allowDecimals","noDataText","className"]),[ee,te]=a(60),ae=d(V,O),le=h(ae,T),oe=p(q,B,H),re=p(I,J,P);return t.createElement("div",Object.assign({ref:D,className:E("w-full h-80",Z)},_),t.createElement(l,{className:"h-full w-full"},(null==V?void 0:V.length)?t.createElement(o,null,$?t.createElement(r,{className:E("stroke-1","stroke-tremor-content-subtle","dark:stroke-dark-tremor-content-subtle"),strokeDasharray:"3 3",horizontal:!0,vertical:!0}):null,N?t.createElement(i,{hide:!F,dataKey:N,interval:"preserveStartEnd",tick:{transform:"translate(0, 6)"},ticks:C?[V[0][N],V[V.length-1][N]]:void 0,type:"number",name:N,className:E("text-tremor-label","fill-tremor-content","dark:fill-dark-tremor-content"),tickLine:!1,tickFormatter:z.x,axisLine:!1,padding:{left:0,right:0},minTickGap:5,domain:oe,allowDataOverflow:!0}):null,j?t.createElement(n,{width:M,hide:!G,axisLine:!1,tickLine:!1,dataKey:j,type:"number",name:j,domain:re,tick:{transform:"translate(-3, 0)"},tickFormatter:z.y,fill:"",stroke:"",className:E("text-tremor-label","fill-tremor-content","dark:fill-dark-tremor-content"),allowDecimals:Q,allowDataOverflow:!0}):null,R?t.createElement(s,{wrapperStyle:{outline:"none"},isAnimationActive:!1,cursor:{stroke:"#d1d5db",strokeWidth:1},content:({active:e,payload:a,label:l})=>{var o,r;return t.createElement(w,{active:e,payload:a,label:O?null===(r=null===(o=null==a?void 0:a[0])||void 0===o?void 0:o.payload)||void 0===r?void 0:r[O]:l,valueFormatter:z,axis:{x:N,y:j,size:L},category:O,categoryColors:le})}}):null,L?t.createElement(m,{dataKey:L,type:"number",range:Y,name:L}):null,ae.map((e=>{var a,l;return t.createElement(c,{className:`\n ${g(null!==(a=le.get(e))&&void 0!==a?a:x.Gray,k.text).fillColor} \n ${X?g(null!==(l=le.get(e))&&void 0!==l?l:x.Gray,k.text).strokeColor:""}\n `,fill:`url(#${le.get(e)})`,fillOpacity:X?.7:1,key:e,name:e,data:O?V.filter((t=>t[O]===e)):V,isAnimationActive:K,animationDuration:S})})),W?t.createElement(u,{verticalAlign:"top",height:ee,content:({payload:e})=>f({payload:e},le,te)}):null):t.createElement(y,{noDataText:U})))}));A.displayName="ScatterChart";export{A as default};