@nivo/scatterplot
Version:
3 lines (2 loc) • 15.3 kB
JavaScript
import{useMemo as e,useCallback as o,createElement as n,forwardRef as i,Fragment as t,useRef as r,useState as a,useEffect as d}from"react";import{useValueFormatter as l,usePropertyAccessor as u,useMotionConfig as s,Container as c,useDimensions as f,CartesianMarkers as h,SvgWrapper as v,ResponsiveWrapper as m,getRelativeCursor as g,isCursorInRect as p,mergeRefs as y}from"@nivo/core";import{Grid as M,Axes as x,renderGridLinesToCanvas as b,renderAxesToCanvas as w}from"@nivo/axes";import{BoxLegendSvg as S,renderLegendToCanvas as k}from"@nivo/legends";import{useOrdinalColorScale as z}from"@nivo/colors";import{computeXYScalesForSeries as I}from"@nivo/scales";import{useAnnotations as C,Annotation as D,renderAnnotationsToCanvas as E}from"@nivo/annotations";import R from"lodash/get.js";import W from"lodash/isString.js";import L from"lodash/isNumber.js";import H from"lodash/isPlainObject.js";import{scaleLinear as F}from"d3-scale";import{animated as U,useTransition as X}from"@react-spring/web";import{jsx as Y,Fragment as B}from"react/jsx-runtime";import{BasicTooltip as G,useTooltip as j}from"@nivo/tooltip";import{Mesh as T,useVoronoiMesh as V,renderVoronoiToCanvas as P,renderVoronoiCellToCanvas as N}from"@nivo/voronoi";import{useTheme as O}from"@nivo/theming";function A(){return A=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var n=arguments[o];for(var i in n)({}).hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},A.apply(null,arguments)}function q(e,o){if(null==e)return{};var n={};for(var i in e)if({}.hasOwnProperty.call(e,i)){if(-1!==o.indexOf(i))continue;n[i]=e[i]}return n}var J=function(e){if("function"==typeof e)return e;if(L(e))return function(){return e};if(function(e){return H(e)}(e)){if(!W(e.key))throw new Error("symbolSize is invalid, key should be a string pointing to the property to use to determine node size");if(!Array.isArray(e.values)||2!==e.values.length)throw new Error("symbolSize is invalid, values spec should be an array containing two values, min and max");if(!Array.isArray(e.sizes)||2!==e.sizes.length)throw new Error("symbolSize is invalid, sizes spec should be an array containing two values, min and max");var o=F().domain([e.values[0],e.values[1]]).range([e.sizes[0],e.sizes[1]]);return function(n){return o(R(n,e.key))}}throw new Error("nodeSize is invalid, it should be either a function, a number or an object")},K=function(o){var n,i=o.data,t=o.xScaleSpec,r=o.xFormat,a=o.yScaleSpec,d=o.yFormat,s=o.width,c=o.height,f=o.nodeId,h=o.nodeSize,v=o.colors,m=e((function(){return I(i,t,a,s,c)}),[i,t,a,s,c]),g=m.series,p=m.xScale,y=m.yScale,M=l(r),x=l(d),b=u(f),w=e((function(){return function(e){var o=e.series,n=e.formatX,i=e.formatY,t=e.getNodeId,r=[];return o.forEach((function(e){e.data.forEach((function(o,a){var d={index:r.length,serieIndex:a,serieId:e.id,x:o.position.x,xValue:o.data.x,formattedX:n(o.data.x),y:o.position.y,yValue:o.data.y,formattedY:i(o.data.y),data:o.data};r.push(A({},d,{id:t(d)}))}))})),r}({series:g,formatX:M,formatY:x,getNodeId:b})}),[g,M,x,b]),S=e((function(){return J(n)}),[n=h]),k=z(v,"serieId");return{xScale:p,yScale:y,nodes:e((function(){return w.map((function(e){return A({},e,{size:S(e),color:k({serieId:e.serieId})})}))}),[w,S,k]),legendData:e((function(){return g.map((function(e){return{id:e.id,label:e.id,color:k({serieId:e.id})}}))}),[g,k])}},Q=function(e,o){return C({data:e,annotations:o,getPosition:function(e){return{x:e.x,y:e.y}},getDimensions:function(e){return{size:e.size,width:e.size,height:e.size}}})},Z=function(e){return e/2},$={xScale:{type:"linear",min:0,max:"auto"},yScale:{type:"linear",min:0,max:"auto"},enableGridX:!0,enableGridY:!0,axisTop:null,axisRight:null,axisBottom:{},axisLeft:{},nodeId:function(e){return e.serieId+"."+e.index},nodeSize:9,nodeComponent:function(e){var n=e.node,i=e.style,t=e.blendMode,r=e.isInteractive,a=e.onMouseEnter,d=e.onMouseMove,l=e.onMouseLeave,u=e.onMouseDown,s=e.onMouseUp,c=e.onClick,f=e.onDoubleClick,h=o((function(e){return null==a?void 0:a(n,e)}),[n,a]),v=o((function(e){return null==d?void 0:d(n,e)}),[n,d]),m=o((function(e){return null==l?void 0:l(n,e)}),[n,l]),g=o((function(e){return null==u?void 0:u(n,e)}),[n,u]),p=o((function(e){return null==s?void 0:s(n,e)}),[n,s]),y=o((function(e){return null==c?void 0:c(n,e)}),[n,c]),M=o((function(e){return null==f?void 0:f(n,e)}),[n,f]);return Y(U.circle,{cx:i.x,cy:i.y,r:i.size.to(Z),fill:i.color,style:{mixBlendMode:t},onMouseEnter:r?h:void 0,onMouseMove:r?v:void 0,onMouseLeave:r?m:void 0,onMouseDown:r?g:void 0,onMouseUp:r?p:void 0,onClick:r?y:void 0,onDoubleClick:r?M:void 0})},colors:{scheme:"nivo"},isInteractive:!0,debugMesh:!1,tooltip:function(e){var o=e.node;return Y(G,{id:o.serieId,value:"x: "+o.formattedX+", y: "+o.formattedY,enableChip:!0,color:o.color})},markers:[],legends:[],annotations:[]},_=A({},$,{blendMode:"normal",layers:["grid","axes","nodes","markers","mesh","legends","annotations"],role:"img",useMesh:!0,animate:!0,motionConfig:"default"}),ee=A({},$,{layers:["grid","axes","nodes","mesh","legends","annotations"],pixelRatio:"undefined"!=typeof window&&window.devicePixelRatio||1,renderNode:function(e,o){e.beginPath(),e.arc(o.x,o.y,o.size/2,0,2*Math.PI),e.fillStyle=o.color,e.fill()}}),oe=function(e){var o=e.nodes,n=e.annotations,i=Q(o,n);return Y(B,{children:i.map((function(e,o){return Y(D,A({},e),o)}))})},ne=function(e){return e.id},ie=function(e){return{x:e.x,y:e.y,size:e.size,color:e.color}},te=function(e){return{x:e.x,y:e.y,size:0,color:e.color}},re=function(e){var i=e.nodes,t=e.nodeComponent,r=e.isInteractive,a=e.onMouseEnter,d=e.onMouseMove,l=e.onMouseLeave,u=e.onMouseDown,c=e.onMouseUp,f=e.onClick,h=e.onDoubleClick,v=e.tooltip,m=e.blendMode,g=s(),p=g.animate,y=g.config,M=X(i,{keys:ne,from:ie,enter:ie,update:ie,leave:te,config:y,immediate:!p}),x=j(),b=x.showTooltipFromEvent,w=x.hideTooltip,S=o((function(e,o){b(n(v,{node:e}),o),null==a||a(e,o)}),[v,b,a]),k=o((function(e,o){b(n(v,{node:e}),o),null==d||d(e,o)}),[v,b,d]),z=o((function(e,o){w(),null==l||l(e,o)}),[w,l]),I=o((function(e,o){return null==u?void 0:u(e,o)}),[u]),C=o((function(e,o){return null==c?void 0:c(e,o)}),[c]),D=o((function(e,o){return null==f?void 0:f(e,o)}),[f]),E=o((function(e,o){return null==h?void 0:h(e,o)}),[h]);return Y(B,{children:M((function(e,o){return n(t,{node:o,style:e,blendMode:m,isInteractive:r,onMouseEnter:r?S:void 0,onMouseMove:r?k:void 0,onMouseLeave:r?z:void 0,onMouseDown:r?I:void 0,onMouseUp:r?C:void 0,onClick:r?D:void 0,onDoubleClick:r?E:void 0})}))})},ae=function(e){var i=e.nodes,t=e.width,r=e.height,a=e.onMouseEnter,d=e.onMouseMove,l=e.onMouseLeave,u=e.onMouseDown,s=e.onMouseUp,c=e.onClick,f=e.onDoubleClick,h=e.tooltip,v=e.debug,m=j(),g=m.showTooltipFromEvent,p=m.hideTooltip,y=o((function(e,o){g(n(h,{node:e}),o),null==a||a(e,o)}),[g,h,a]),M=o((function(e,o){g(n(h,{node:e}),o),null==d||d(e,o)}),[g,h,d]),x=o((function(e,o){p(),null==l||l(e,o)}),[p,l]),b=o((function(e,o){null==u||u(e,o)}),[u]),w=o((function(e,o){null==s||s(e,o)}),[s]),S=o((function(e,o){null==c||c(e,o)}),[c]),k=o((function(e,o){null==f||f(e,o)}),[f]);return Y(T,{nodes:i,width:t,height:r,onMouseEnter:y,onMouseMove:M,onMouseLeave:x,onMouseDown:b,onMouseUp:w,onClick:S,onDoubleClick:k,debug:v})},de=["isInteractive","animate","motionConfig","theme","renderWrapper"],le=function(o){var i=o.data,r=o.xScale,a=void 0===r?_.xScale:r,d=o.xFormat,l=o.yScale,u=void 0===l?_.yScale:l,s=o.yFormat,c=o.width,m=o.height,g=o.margin,p=o.layers,y=void 0===p?_.layers:p,b=o.colors,w=void 0===b?_.colors:b,k=o.blendMode,z=void 0===k?_.blendMode:k,I=o.nodeId,C=void 0===I?_.nodeId:I,D=o.nodeSize,E=void 0===D?_.nodeSize:D,R=o.nodeComponent,W=void 0===R?_.nodeComponent:R,L=o.enableGridX,H=void 0===L?_.enableGridX:L,F=o.enableGridY,U=void 0===F?_.enableGridY:F,X=o.gridXValues,B=o.gridYValues,G=o.axisTop,j=o.axisRight,T=o.axisBottom,V=void 0===T?_.axisBottom:T,P=o.axisLeft,N=void 0===P?_.axisLeft:P,O=o.annotations,q=void 0===O?_.annotations:O,J=o.isInteractive,Q=void 0===J?_.isInteractive:J,Z=o.useMesh,$=void 0===Z?_.useMesh:Z,ee=o.debugMesh,ne=void 0===ee?_.debugMesh:ee,ie=o.onMouseEnter,te=o.onMouseMove,de=o.onMouseLeave,le=o.onMouseDown,ue=o.onMouseUp,se=o.onClick,ce=o.onDoubleClick,fe=o.tooltip,he=void 0===fe?_.tooltip:fe,ve=o.markers,me=void 0===ve?_.markers:ve,ge=o.legends,pe=void 0===ge?_.legends:ge,ye=o.role,Me=void 0===ye?_.role:ye,xe=o.ariaLabel,be=o.ariaLabelledBy,we=o.ariaDescribedBy,Se=o.forwardedRef,ke=f(c,m,g),ze=ke.margin,Ie=ke.innerWidth,Ce=ke.innerHeight,De=ke.outerWidth,Ee=ke.outerHeight,Re=K({data:i,xScaleSpec:a,xFormat:d,yScaleSpec:u,yFormat:s,width:Ie,height:Ce,nodeId:C,nodeSize:E,colors:w}),We=Re.xScale,Le=Re.yScale,He=Re.nodes,Fe=Re.legendData,Ue=e((function(){return{xScale:We,yScale:Le,nodes:He,margin:ze,innerWidth:Ie,innerHeight:Ce,outerWidth:De,outerHeight:Ee}}),[We,Le,He,ze,Ie,Ce,De,Ee]),Xe={grid:null,axes:null,nodes:null,markers:null,mesh:null,annotations:null,legends:null};return y.includes("grid")&&(Xe.grid=Y(M,{width:Ie,height:Ce,xScale:H?We:null,yScale:U?Le:null,xValues:X,yValues:B},"grid")),y.includes("axes")&&(Xe.axes=Y(x,{xScale:We,yScale:Le,width:Ie,height:Ce,top:G,right:j,bottom:V,left:N},"axes")),y.includes("nodes")&&(Xe.nodes=Y(re,{nodes:He,nodeComponent:W,isInteractive:Q,tooltip:he,blendMode:z,onMouseEnter:ie,onMouseMove:te,onMouseLeave:de,onMouseDown:le,onMouseUp:ue,onClick:se,onDoubleClick:ce},"nodes")),y.includes("markers")&&(Xe.markers=Y(h,{markers:me,width:Ie,height:Ce,xScale:We,yScale:Le},"markers")),y.includes("mesh")&&Q&&$&&(Xe.mesh=Y(ae,{nodes:He,width:Ie,height:Ce,onMouseEnter:ie,onMouseMove:te,onMouseLeave:de,onMouseDown:le,onMouseUp:ue,onClick:se,onDoubleClick:ce,tooltip:he,debug:ne},"mesh")),y.includes("annotations")&&(Xe.annotations=Y(oe,{nodes:He,annotations:q},"annotations")),y.includes("legends")&&(Xe.legends=pe.map((function(e,o){return Y(S,A({},e,{containerWidth:Ie,containerHeight:Ce,data:Fe}),o)}))),Y(v,{width:De,height:Ee,margin:ze,role:Me,ariaLabel:xe,ariaLabelledBy:be,ariaDescribedBy:we,ref:Se,children:y.map((function(e,o){if("string"==typeof e&&void 0!==Xe[e])return Xe[e];if("function"==typeof e)return Y(t,{children:n(e,Ue)},o);throw new Error("Unknown layer ("+e+")")}))})},ue=i((function(e,o){var n=e.isInteractive,i=void 0===n?_.isInteractive:n,t=e.animate,r=void 0===t?_.animate:t,a=e.motionConfig,d=void 0===a?_.motionConfig:a,l=e.theme,u=e.renderWrapper,s=q(e,de);return Y(c,{animate:r,isInteractive:i,motionConfig:d,renderWrapper:u,theme:l,children:Y(le,A({},s,{isInteractive:i,forwardedRef:o}))})})),se=["defaultWidth","defaultHeight","onResize","debounceResize"],ce=i((function(e,o){var n=e.defaultWidth,i=e.defaultHeight,t=e.onResize,r=e.debounceResize,a=q(e,se);return Y(m,{defaultWidth:n,defaultHeight:i,onResize:t,debounceResize:r,children:function(e){var n=e.width,i=e.height;return Y(ue,A({},a,{width:n,height:i,ref:o}))}})})),fe=["isInteractive","renderWrapper","theme"],he=function(i){var t=i.data,l=i.xScale,u=void 0===l?ee.xScale:l,s=i.xFormat,c=i.yScale,h=void 0===c?ee.yScale:c,v=i.yFormat,m=i.width,M=i.height,x=i.margin,S=i.pixelRatio,z=void 0===S?ee.pixelRatio:S,I=i.layers,C=void 0===I?ee.layers:I,D=i.colors,R=void 0===D?ee.colors:D,W=i.nodeId,L=void 0===W?_.nodeId:W,H=i.nodeSize,F=void 0===H?ee.nodeSize:H,U=i.renderNode,X=void 0===U?ee.renderNode:U,B=i.enableGridX,G=void 0===B?ee.enableGridX:B,T=i.gridXValues,q=i.enableGridY,J=void 0===q?ee.enableGridY:q,Z=i.gridYValues,$=i.axisTop,oe=i.axisRight,ne=i.axisBottom,ie=void 0===ne?ee.axisBottom:ne,te=i.axisLeft,re=void 0===te?ee.axisLeft:te,ae=i.annotations,de=void 0===ae?ee.annotations:ae,le=i.isInteractive,ue=void 0===le?ee.isInteractive:le,se=i.debugMesh,ce=void 0===se?ee.debugMesh:se,fe=i.onMouseEnter,he=i.onMouseMove,ve=i.onMouseLeave,me=i.onMouseDown,ge=i.onMouseUp,pe=i.onClick,ye=i.onDoubleClick,Me=i.tooltip,xe=void 0===Me?ee.tooltip:Me,be=i.legends,we=void 0===be?ee.legends:be,Se=i.role,ke=i.forwardedRef,ze=r(null),Ie=O(),Ce=a(null),De=Ce[0],Ee=Ce[1],Re=f(m,M,x),We=Re.margin,Le=Re.innerWidth,He=Re.innerHeight,Fe=Re.outerWidth,Ue=Re.outerHeight,Xe=K({data:t,xScaleSpec:u,xFormat:s,yScaleSpec:h,yFormat:v,width:Le,height:He,nodeId:L,nodeSize:F,colors:R}),Ye=Xe.xScale,Be=Xe.yScale,Ge=Xe.nodes,je=Xe.legendData,Te=Q(Ge,de),Ve=V({points:Ge,width:Le,height:He,debug:ce}),Pe=Ve.delaunay,Ne=Ve.voronoi,Oe=e((function(){return{xScale:Ye,yScale:Be,nodes:Ge,margin:We,innerWidth:Le,innerHeight:He,outerWidth:Fe,outerHeight:Ue}}),[Ye,Be,Ge,We,Le,He,Fe,Ue]);d((function(){if(ze.current){ze.current.width=Fe*z,ze.current.height=Ue*z;var e=ze.current.getContext("2d");e.scale(z,z),e.fillStyle=Ie.background,e.fillRect(0,0,Fe,Ue),e.translate(We.left,We.top),C.forEach((function(o){if("grid"===o)e.lineWidth=Ie.grid.line.strokeWidth,e.strokeStyle=Ie.grid.line.stroke,G&&b(e,{width:Le,height:He,scale:Ye,axis:"x",values:T}),J&&b(e,{width:Le,height:He,scale:Be,axis:"y",values:Z});else if("annotations"===o)E(e,{annotations:Te,theme:Ie});else if("axes"===o)w(e,{xScale:Ye,yScale:Be,width:Le,height:He,top:$,right:oe,bottom:ie,left:re,theme:Ie});else if("nodes"===o)Ge.forEach((function(o){X(e,o)}));else if("mesh"===o)ce&&(P(e,Ne),De&&N(e,Ne,De.index));else if("legends"===o)we.forEach((function(o){k(e,A({},o,{data:je,containerWidth:Le,containerHeight:He,theme:Ie}))}));else{if("function"!=typeof o)throw new Error("Invalid layer: "+o);o(e,Oe)}}))}}),[ze,Le,He,Fe,Ue,We.top,We.left,z,X,C,Oe,Ie,Ye,Be,Ge,G,T,J,Z,$,oe,ie,re,we,je,ce,Ne,De,Te]);var Ae=j(),qe=Ae.showTooltipFromEvent,Je=Ae.hideTooltip,Ke=o((function(e){var o=g(ze.current,e),n=o[0],i=o[1];if(!p(We.left,We.top,Le,He,n,i))return null;var t=Pe.find(n-We.left,i-We.top);return Ge[t]}),[ze,We,Le,He,Pe,Ge]),Qe=o((function(e){var o=Ke(e);Ee(o),o?(qe(n(xe,{node:o}),e),De&&De.id!==o.id&&(null==ve||ve(De,e),null==fe||fe(o,e)),De||null==fe||fe(o,e),null==he||he(o,e)):(Je(),De&&(null==ve||ve(De,e)))}),[Ke,De,Ee,qe,Je,xe,fe,he,ve]),Ze=o((function(e){Je(),Ee(null),De&&(null==ve||ve(De,e))}),[Je,De,Ee,ve]),$e=o((function(e){if(me){var o=Ke(e);o&&me(o,e)}}),[Ke,me]),_e=o((function(e){if(ge){var o=Ke(e);o&&ge(o,e)}}),[Ke,ge]),eo=o((function(e){if(pe){var o=Ke(e);o&&pe(o,e)}}),[Ke,pe]),oo=o((function(e){if(ye){var o=Ke(e);o&&ye(o,e)}}),[Ke,ye]);return Y("canvas",{ref:y(ze,ke),width:Fe*z,height:Ue*z,style:{width:Fe,height:Ue,cursor:ue?"auto":"normal"},onMouseEnter:ue?Qe:void 0,onMouseMove:ue?Qe:void 0,onMouseLeave:ue?Ze:void 0,onMouseDown:ue?$e:void 0,onMouseUp:ue?_e:void 0,onClick:ue?eo:void 0,onDoubleClick:ue?oo:void 0,role:Se})},ve=i((function(e,o){var n=e.isInteractive,i=e.renderWrapper,t=e.theme,r=q(e,fe);return Y(c,{isInteractive:n,renderWrapper:i,theme:t,animate:!1,children:Y(he,A({},r,{isInteractive:n,forwardedRef:o}))})})),me=["defaultWidth","defaultHeight","onResize","debounceResize"],ge=i((function(e,o){var n=e.defaultWidth,i=e.defaultHeight,t=e.onResize,r=e.debounceResize,a=q(e,me);return Y(m,{defaultWidth:n,defaultHeight:i,onResize:t,debounceResize:r,children:function(e){var n=e.width,i=e.height;return Y(ve,A({},a,{width:n,height:i,ref:o}))}})}));export{ce as ResponsiveScatterPlot,ge as ResponsiveScatterPlotCanvas,ue as ScatterPlot,ve as ScatterPlotCanvas,ee as canvasDefaultProps,$ as commonDefaultProps,_ as svgDefaultProps,K as useScatterPlot,Q as useScatterPlotAnnotations};
//# sourceMappingURL=nivo-scatterplot.mjs.map