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