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