@nivo/circle-packing
Version:
3 lines (2 loc) • 16.4 kB
JavaScript
import*as e from"react";import{useMemo as o,useCallback as i,createElement as n,forwardRef as t,Fragment as r,useRef as l,useEffect as a}from"react";import{usePropertyAccessor as d,useValueFormatter as u,getRelativeCursor as c,getDistance as s,useMotionConfig as v,Container as f,useDimensions as h,bindDefs as p,SvgWrapper as m,ResponsiveWrapper as b,mergeRefs as C}from"@nivo/core";import{hierarchy as y,pack as g}from"d3-hierarchy";import M from"lodash/cloneDeep.js";import x from"lodash/sortBy.js";import{useTheme as k}from"@nivo/theming";import{useOrdinalColorScale as R,useInheritedColor as w}from"@nivo/colors";import{BasicTooltip as W,useTooltip as I}from"@nivo/tooltip";import{jsx as E,Fragment as F}from"react/jsx-runtime";import{animated as z,to as L,useTransition as O}from"@react-spring/web";function P(){return P=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var i=arguments[o];for(var n in i)({}).hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},P.apply(null,arguments)}function H(e,o){if(null==e)return{};var i={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==o.indexOf(n))continue;i[n]=e[n]}return i}var B,S=function(e){var o,i=e.data,n=e.id,t=e.value,r=e.valueFormat,l=e.width,a=e.height,c=e.padding,s=e.leavesOnly,v=e.colors,f=e.colorBy,h=e.inheritColorFromParent,p=e.childColor,m=d(n),b=d(t),C=u(r),W=R(v,f),I=k(),E=w(p,I),F=M(i),z=y(F).sum(b),L=g().size([l,a]).padding(c)(z),O=s?L.leaves():L.descendants(),P=x(O,"depth"),H=null!=(o=z.value)?o:0;return P.reduce((function(e,o){var i,n=m(o.data),t=o.value,l=100*t/H,a=o.ancestors().map((function(e){return m(e.data)}));o.parent&&(i=e.find((function(e){return e.id===m(o.parent.data)})));var d={id:n,path:a,value:t,percentage:l,formattedValue:r?C(t):l.toFixed(2)+"%",x:o.x,y:o.y,radius:o.r,color:"",data:o.data,depth:o.depth,height:o.height};return h&&i&&d.depth>1?d.color=E(i):d.color=W(d),[].concat(e,[d])}),[])},T=function(e,i,n,t){return o((function(){if(!i)return e;var o=e.find((function(e){return e.id===i}));if(!o)return e;var r=Math.min(n,t)/(2*o.radius),l=n/2-o.x*r,a=t/2-o.y*r;return e.map((function(e){return P({},e,{x:e.x*r+l,y:e.y*r+a,radius:e.radius*r})}))}),[e,i,n,t])},j=function(e){var i=e.nodes,n=e.label,t=e.filter,r=e.skipRadius,l=e.textColor,a=d(n),u=k(),c=w(l,u),s=o((function(){return i.filter((function(e){return e.radius>=r})).map((function(e){return{label:a(e),textColor:c(e),node:e}}))}),[i,r,a,c]);return o((function(){return t?s.filter(t):s}),[s,t])},A=function(e,i){var n=i.onMouseEnter,t=i.onMouseMove,r=i.onMouseLeave,l=i.onClick;return o((function(){return{onMouseEnter:n?function(o){n(e,o)}:void 0,onMouseMove:t?function(o){t(e,o)}:void 0,onMouseLeave:r?function(o){r(e,o)}:void 0,onClick:l?function(o){l(e,o)}:void 0}}),[e,n,t,r,l])},V=function(e){var n=e.nodes,t=e.canvasEl,r=e.margin,l=o((function(){return x(n,"height")}),[n]);return i((function(e){if(!t.current)return null;var o=c(t.current,e),i=o[0],n=o[1];return l.find((function(e){return s(e.x,e.y,i-r.left,n-r.top)<=e.radius}))}),[t,r,l])},D=function(e){var i=e.nodes;return o((function(){return{nodes:i}}),[i])},K=function(e,o){return L([e,o],(function(e,o){return e-o}))},q=function(e){return L([e],(function(e){return 2*e}))},G={id:"id",value:"value",padding:0,leavesOnly:!1,layers:["circles","labels"],colors:{scheme:"nivo"},colorBy:"depth",inheritColorFromParent:!1,childColor:{from:"color",modifiers:[["darker",.3]]},borderWidth:0,borderColor:{from:"color",modifiers:[["darker",.3]]},enableLabels:!1,label:"id",labelTextColor:{theme:"labels.text.fill"},labelsSkipRadius:8,isInteractive:!0,tooltip:function(e){var o=e.id,i=e.formattedValue,n=e.color;return E(W,{id:o,value:i,enableChip:!0,color:n})},animate:!0,motionConfig:"gentle",role:"img",renderWrapper:!0},J=P({},G,{circleComponent:function(e){var o=e.node,i=e.style,n=e.onMouseEnter,t=e.onMouseMove,r=e.onMouseLeave,l=e.onClick,a=A(o,{onMouseEnter:n,onMouseMove:t,onMouseLeave:r,onClick:l});return E(z.circle,{cx:i.x,cy:i.y,r:i.radius,fill:o.fill||i.color,stroke:i.borderColor,strokeWidth:i.borderWidth,opacity:i.opacity,onMouseEnter:a.onMouseEnter,onMouseMove:a.onMouseMove,onMouseLeave:a.onMouseLeave,onClick:a.onClick},o.id)},labelComponent:function(e){var o=e.node,i=e.label,n=e.style,t=k();return E(z.text,{x:n.x,y:n.y,textAnchor:"middle",dominantBaseline:"central",style:P({},t.labels.text,{fill:n.textColor,opacity:n.opacity,pointerEvents:"none"}),children:i},o.id)},defs:[],fill:[]}),N=P({},G,{circleComponent:function(e){var o,i,n=e.node,t=e.style,r=e.onMouseEnter,l=e.onMouseMove,a=e.onMouseLeave,d=e.onClick,u=q(t.radius),c=A(n,{onMouseEnter:r,onMouseMove:l,onMouseLeave:a,onClick:d});return E(z.div,{style:{position:"absolute",top:K(t.y,t.radius),left:K(t.x,t.radius),height:u,width:u,borderRadius:t.radius,backgroundColor:t.color,borderWidth:(o=t.borderWidth,i=t.radius,L([i],(function(e){return Math.min(o,e)}))),borderStyle:"solid",borderColor:t.borderColor,boxSizing:"border-box"},onMouseEnter:c.onMouseEnter,onMouseMove:c.onMouseMove,onMouseLeave:c.onMouseLeave,onClick:c.onClick})},labelComponent:function(e){var o=e.node,i=e.label,n=e.style,t=k(),r=q(n.radius);return E(z.div,{style:P({},t.labels.text,{position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",top:K(n.y,n.radius),left:K(n.x,n.radius),width:r,height:r,color:n.textColor,opacity:n.opacity,pointerEvents:"none"}),children:i},o.id)}}),Q=P({},G,{pixelRatio:"undefined"!=typeof window&&null!=(B=window.devicePixelRatio)?B:1}),U=function(e){return L([e],(function(e){return Math.max(0,e)}))},X=function(i){var t=i.nodes,r=i.borderWidth,l=i.borderColor,a=i.component,d=i.isInteractive,u=i.onMouseEnter,c=i.onMouseMove,s=i.onMouseLeave,f=i.onClick,h=i.tooltip,p=I(),m=p.showTooltipFromEvent,b=p.hideTooltip,C=o((function(){if(d)return function(e,o){m(n(h,e),o),null==u||u(e,o)}}),[d,m,h,u]),y=o((function(){if(d)return function(e,o){m(n(h,e),o),null==c||c(e,o)}}),[d,m,h,c]),g=o((function(){if(d)return function(e,o){b(),null==s||s(e,o)}}),[d,b,s]),M=o((function(){if(d)return function(e,o){null==f||f(e,o)}}),[d,f]),x=v(),R=x.animate,W=x.config,z=k(),L=w(l,z),H=o((function(){return function(e){return{enter:function(o){return{x:o.x,y:o.y,radius:0,color:o.color,borderColor:e(o),opacity:0}},update:function(o){return{x:o.x,y:o.y,radius:o.radius,color:o.color,borderColor:e(o),opacity:1}},leave:function(o){return{x:o.x,y:o.y,radius:0,color:o.color,borderColor:e(o),opacity:0}}}}(L)}),[L]),B=O(t,{keys:function(e){return e.id},initial:H.update,from:H.enter,enter:H.update,update:H.update,leave:H.leave,config:W,immediate:!R});return E(F,{children:B((function(o,i){return e.createElement(a,{key:i.id,node:i,style:P({},o,{radius:U(o.radius),borderWidth:r}),onMouseEnter:C,onMouseMove:y,onMouseLeave:g,onClick:M})}))})},Y=function(e){var i=e.nodes,t=e.label,r=e.filter,l=e.skipRadius,a=e.textColor,d=e.component,u=v(),c=u.animate,s=u.config,f=j({nodes:i,label:t,filter:r,skipRadius:l,textColor:a}),h=o((function(){return{enter:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:0}},update:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:1}},leave:function(e){return{x:e.node.x,y:e.node.y,radius:e.node.radius,textColor:e.textColor,opacity:0}}}}),[]),p=O(f,{keys:function(e){return e.node.id},initial:h.update,from:h.enter,enter:h.update,update:h.update,leave:h.leave,config:s,immediate:!c});return E(F,{children:p((function(e,o){return n(d,{key:o.node.id,label:o.label,style:P({},e,{radius:U(e.radius)}),node:o.node})}))})},Z=["isInteractive","animate","motionConfig","theme","renderWrapper"],$=function(e){var i=e.data,t=e.id,l=void 0===t?J.id:t,a=e.value,d=void 0===a?J.value:a,u=e.valueFormat,c=e.width,s=e.height,v=e.margin,f=e.padding,b=void 0===f?J.padding:f,C=e.leavesOnly,y=void 0===C?J.leavesOnly:C,g=e.colors,M=void 0===g?J.colors:g,x=e.colorBy,k=void 0===x?J.colorBy:x,R=e.inheritColorFromParent,w=void 0===R?J.inheritColorFromParent:R,W=e.childColor,I=void 0===W?J.childColor:W,F=e.borderWidth,z=void 0===F?J.borderWidth:F,L=e.borderColor,O=void 0===L?J.borderColor:L,P=e.circleComponent,H=void 0===P?J.circleComponent:P,B=e.defs,j=void 0===B?J.defs:B,A=e.fill,V=void 0===A?J.fill:A,K=e.enableLabels,q=void 0===K?J.enableLabels:K,G=e.label,N=void 0===G?J.label:G,Q=e.labelsFilter,U=e.labelsSkipRadius,Z=void 0===U?J.labelsSkipRadius:U,$=e.labelTextColor,_=void 0===$?J.labelTextColor:$,ee=e.labelComponent,oe=void 0===ee?J.labelComponent:ee,ie=e.layers,ne=void 0===ie?J.layers:ie,te=e.isInteractive,re=void 0===te?J.isInteractive:te,le=e.onMouseEnter,ae=e.onMouseMove,de=e.onMouseLeave,ue=e.onClick,ce=e.tooltip,se=void 0===ce?J.tooltip:ce,ve=e.zoomedId,fe=e.role,he=void 0===fe?J.role:fe,pe=e.forwardedRef,me=h(c,s,v),be=me.outerWidth,Ce=me.outerHeight,ye=me.margin,ge=me.innerWidth,Me=me.innerHeight,xe=S({data:i,id:l,value:d,valueFormat:u,width:ge,height:Me,padding:b,leavesOnly:y,colors:M,colorBy:k,inheritColorFromParent:w,childColor:I}),ke=T(xe,ve,ge,Me),Re=o((function(){return p(j,ke,V,{targetKey:"fill"})}),[j,ke,V]),we={circles:null,labels:null};ne.includes("circles")&&(we.circles=E(X,{nodes:ke,borderWidth:z,borderColor:O,isInteractive:re,onMouseEnter:le,onMouseMove:ae,onMouseLeave:de,onClick:ue,component:H,tooltip:se},"circles")),q&&ne.includes("labels")&&(we.labels=E(Y,{nodes:ke,label:N,filter:Q,skipRadius:Z,textColor:_,component:oe},"labels"));var We=D({nodes:xe});return E(m,{width:be,height:Ce,margin:ye,defs:Re,role:he,ref:pe,children:ne.map((function(e,o){return void 0!==we[e]?we[e]:"function"==typeof e?E(r,{children:n(e,We)},o):null}))})},_=t((function(e,o){var i=e.isInteractive,n=void 0===i?J.isInteractive:i,t=e.animate,r=void 0===t?J.animate:t,l=e.motionConfig,a=void 0===l?J.motionConfig:l,d=e.theme,u=e.renderWrapper,c=H(e,Z);return E(f,{animate:r,isInteractive:n,motionConfig:a,renderWrapper:u,theme:d,children:E($,P({isInteractive:n},c,{forwardedRef:o}))})})),ee=["defaultWidth","defaultHeight","onResize","debounceResize"],oe=t((function(e,o){var i=e.defaultWidth,n=e.defaultHeight,t=e.onResize,r=e.debounceResize,l=H(e,ee);return E(b,{defaultWidth:i,defaultHeight:n,onResize:t,debounceResize:r,children:function(e){var i=e.width,n=e.height;return E(_,P({width:i,height:n},l,{ref:o}))}})})),ie=["theme","isInteractive","animate","motionConfig"],ne=function(e){var o=e.data,i=e.id,t=void 0===i?N.id:i,l=e.value,a=void 0===l?N.value:l,d=e.valueFormat,u=e.width,c=e.height,s=e.margin,v=e.padding,f=void 0===v?N.padding:v,p=e.leavesOnly,m=void 0===p?N.leavesOnly:p,b=e.colors,C=void 0===b?N.colors:b,y=e.colorBy,g=void 0===y?N.colorBy:y,M=e.inheritColorFromParent,x=void 0===M?N.inheritColorFromParent:M,k=e.childColor,R=void 0===k?N.childColor:k,w=e.borderWidth,W=void 0===w?N.borderWidth:w,I=e.borderColor,F=void 0===I?N.borderColor:I,z=e.circleComponent,L=void 0===z?N.circleComponent:z,O=e.enableLabels,P=void 0===O?N.enableLabels:O,H=e.label,B=void 0===H?N.label:H,j=e.labelsFilter,A=e.labelsSkipRadius,V=void 0===A?N.labelsSkipRadius:A,K=e.labelTextColor,q=void 0===K?N.labelTextColor:K,G=e.labelComponent,J=void 0===G?N.labelComponent:G,Q=e.layers,U=void 0===Q?N.layers:Q,Z=e.isInteractive,$=void 0===Z?N.isInteractive:Z,_=e.onMouseEnter,ee=e.onMouseMove,oe=e.onMouseLeave,ie=e.onClick,ne=e.tooltip,te=void 0===ne?N.tooltip:ne,re=e.zoomedId,le=e.role,ae=void 0===le?N.role:le,de=e.forwardedRef,ue=h(u,c,s),ce=ue.outerWidth,se=ue.outerHeight,ve=ue.margin,fe=ue.innerWidth,he=ue.innerHeight,pe=S({data:o,id:t,value:a,valueFormat:d,width:fe,height:he,padding:f,leavesOnly:m,colors:C,colorBy:g,inheritColorFromParent:x,childColor:R}),me=T(pe,re,fe,he),be={circles:null,labels:null};U.includes("circles")&&(be.circles=E(X,{nodes:me,borderWidth:W,borderColor:F,isInteractive:$,onMouseEnter:_,onMouseMove:ee,onMouseLeave:oe,onClick:ie,component:L,tooltip:te},"circles")),P&&U.includes("labels")&&(be.labels=E(Y,{nodes:me,label:B,filter:j,skipRadius:V,textColor:q,component:J},"labels"));var Ce=D({nodes:pe});return E("div",{role:ae,style:{position:"relative",overflow:"hidden",width:ce,height:se},ref:de,children:E("div",{style:{position:"absolute",top:ve.top,left:ve.left},children:U.map((function(e,o){return void 0!==be[e]?be[e]:"function"==typeof e?E(r,{children:n(e,Ce)},o):null}))})})},te=t((function(e,o){var i=e.theme,n=e.isInteractive,t=void 0===n?N.isInteractive:n,r=e.animate,l=void 0===r?N.animate:r,a=e.motionConfig,d=void 0===a?N.motionConfig:a,u=H(e,ie);return E(f,{isInteractive:t,animate:l,motionConfig:d,theme:i,children:E(ne,P({isInteractive:t},u,{forwardedRef:o}))})})),re=["defaultWidth","defaultHeight","onResize","debounceResize"],le=t((function(e,o){var i=e.defaultWidth,n=e.defaultHeight,t=e.onResize,r=e.debounceResize,l=H(e,re);return E(b,{defaultWidth:i,defaultHeight:n,onResize:t,debounceResize:r,children:function(e){var i=e.width,n=e.height;return E(te,P({width:i,height:n},l,{ref:o}))}})})),ae=["isInteractive","theme"],de=function(e){var o=e.data,t=e.id,r=void 0===t?Q.id:t,d=e.value,u=void 0===d?Q.value:d,c=e.valueFormat,s=e.width,v=e.height,f=e.margin,p=e.padding,m=void 0===p?Q.padding:p,b=e.leavesOnly,y=void 0===b?Q.leavesOnly:b,g=e.colors,M=void 0===g?Q.colors:g,x=e.colorBy,R=void 0===x?Q.colorBy:x,W=e.inheritColorFromParent,F=void 0===W?Q.inheritColorFromParent:W,z=e.childColor,L=void 0===z?Q.childColor:z,O=e.borderWidth,P=void 0===O?Q.borderWidth:O,H=e.borderColor,B=void 0===H?Q.borderColor:H,A=e.enableLabels,D=void 0===A?Q.enableLabels:A,K=e.label,q=void 0===K?Q.label:K,G=e.labelsFilter,J=e.labelsSkipRadius,N=void 0===J?Q.labelsSkipRadius:J,U=e.labelTextColor,X=void 0===U?Q.labelTextColor:U,Y=e.isInteractive,Z=void 0===Y?Q.isInteractive:Y,$=e.onMouseMove,_=e.onClick,ee=e.tooltip,oe=void 0===ee?Q.tooltip:ee,ie=e.zoomedId,ne=e.role,te=void 0===ne?Q.role:ne,re=e.pixelRatio,le=void 0===re?Q.pixelRatio:re,ae=e.forwardedRef,de=l(null),ue=k(),ce=h(s,v,f),se=ce.margin,ve=ce.innerWidth,fe=ce.innerHeight,he=ce.outerWidth,pe=ce.outerHeight,me=S({data:o,id:r,value:u,valueFormat:c,width:ve,height:fe,padding:m,leavesOnly:y,colors:M,colorBy:R,inheritColorFromParent:F,childColor:L}),be=T(me,ie,ve,fe),Ce=j({nodes:be,label:q,filter:G,skipRadius:N,textColor:X}),ye=w(B,ue);a((function(){if(de.current){de.current.width=he*le,de.current.height=pe*le;var e=de.current.getContext("2d");e.scale(le,le),e.fillStyle=ue.background,e.fillRect(0,0,he,pe),e.save(),e.translate(se.left,se.top),be.forEach((function(o){P>0&&(e.strokeStyle=ye(o),e.lineWidth=P),e.beginPath(),e.arc(o.x,o.y,o.radius,0,2*Math.PI),e.fillStyle=o.color,e.fill(),P>0&&e.stroke()})),D&&(e.textAlign="center",e.textBaseline="middle",e.font=ue.labels.text.fontSize+"px "+ue.labels.text.fontFamily,Ce.forEach((function(o){e.fillStyle=o.textColor,e.fillText(""+o.label,o.node.x,o.node.y)})))}}),[de,ve,fe,he,pe,se.top,se.left,ue,le,be,D,Ce,P,ye]);var ge=V({nodes:be,canvasEl:de,margin:se}),Me=I(),xe=Me.showTooltipFromEvent,ke=Me.hideTooltip,Re=i((function(e){var o=ge(e);o?(null==$||$(o,e),xe(n(oe,o),e)):ke()}),[ge,xe,oe,ke,$]),we=i((function(){ke()}),[ke]),We=i((function(e){if(_){var o=ge(e);o&&_(o,e)}}),[ge,_]);return E("canvas",{ref:C(de,ae),width:he*le,height:pe*le,style:{width:he,height:pe,cursor:Z?"auto":"normal"},role:te,onMouseEnter:Z?Re:void 0,onMouseMove:Z?Re:void 0,onMouseLeave:Z?we:void 0,onClick:Z?We:void 0})},ue=t((function(e,o){var i=e.isInteractive,n=void 0===i?Q.isInteractive:i,t=e.theme,r=H(e,ae);return E(f,{isInteractive:n,theme:t,children:E(de,P({isInteractive:n},r,{forwardedRef:o}))})})),ce=["defaultWidth","defaultHeight","onResize","debounceResize"],se=t((function(e,o){var i=e.defaultWidth;e.defaultHeight;var n=e.onResize,t=e.debounceResize,r=H(e,ce);return E(b,{defaultWidth:i,defaultHeight:i,onResize:n,debounceResize:t,children:function(e){var i=e.width,n=e.height;return E(ue,P({width:i,height:n},r,{ref:o}))}})}));export{_ as CirclePacking,ue as CirclePackingCanvas,te as CirclePackingHtml,ne as InnerCirclePackingHtml,oe as ResponsiveCirclePacking,se as ResponsiveCirclePackingCanvas,le as ResponsiveCirclePackingHtml,Q as canvasDefaultProps,G as commonDefaultProps,N as htmlDefaultProps,J as svgDefaultProps,S as useCirclePacking,j as useCirclePackingLabels,D as useCirclePackingLayerContext,T as useCirclePackingZoom,V as useMouseCircleDetection,A as useNodeMouseHandlers};
//# sourceMappingURL=nivo-circle-packing.mjs.map