UNPKG

@nivo/circle-packing

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