UNPKG

@nivo/sankey

Version:
3 lines (2 loc) 14.7 kB
import{useState as e,useMemo as o,useCallback as n,createElement as t,forwardRef as i,Fragment as r}from"react";import l from"lodash/uniq.js";import{usePropertyAccessor as a,useValueFormatter as d,useMotionConfig as c,useAnimatedPath as s,Container as u,useDimensions as h,SvgWrapper as v,ResponsiveWrapper as p}from"@nivo/core";import{BoxLegendSvg as f}from"@nivo/legends";import{sankeyCenter as g,sankeyJustify as y,sankeyLeft as m,sankeyRight as k,sankey as b}from"d3-sankey";import{Text as C}from"@nivo/text";import{BasicTooltip as x,Chip as O,useTooltip as L}from"@nivo/tooltip";import{jsx as w,jsxs as H,Fragment as I}from"react/jsx-runtime";import M from"lodash/cloneDeep.js";import{useTheme as T}from"@nivo/theming";import{useOrdinalColorScale as B,useInheritedColor as P}from"@nivo/colors";import{useSpring as N,animated as W,useSprings as R}from"@react-spring/web";import{line as z,curveMonotoneX as F,curveMonotoneY as S}from"d3-shape";function E(){return E=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var n=arguments[o];for(var t in n)({}).hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},E.apply(null,arguments)}function G(e,o){if(null==e)return{};var n={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(-1!==o.indexOf(t))continue;n[t]=e[t]}return n}var j={container:{display:"flex",alignItems:"center"},sourceChip:{marginRight:7},targetChip:{marginLeft:7,marginRight:7}},D={center:g,justify:y,start:m,end:k},V=Object.keys(D),A=function(e){return D[e]},Z={layout:"horizontal",align:"center",sort:"auto",colors:{scheme:"nivo"},nodeOpacity:.75,nodeHoverOpacity:1,nodeHoverOthersOpacity:.15,nodeThickness:12,nodeSpacing:12,nodeInnerPadding:0,nodeBorderWidth:1,nodeBorderColor:{from:"color",modifiers:[["darker",.5]]},nodeBorderRadius:0,linkOpacity:.25,linkHoverOpacity:.6,linkHoverOthersOpacity:.15,linkContract:0,linkBlendMode:"multiply",enableLinkGradient:!1,enableLabels:!0,label:"id",labelPosition:"inside",labelPadding:9,labelOrientation:"horizontal",labelTextColor:{from:"color",modifiers:[["darker",.8]]},labelComponent:C,isInteractive:!0,nodeTooltip:function(e){var o=e.node;return w(x,{id:o.label,enableChip:!0,color:o.color})},linkTooltip:function(e){var o=e.link;return w(x,{id:H("span",{style:j.container,children:[w(O,{color:o.source.color,style:j.sourceChip}),w("strong",{children:o.source.label})," > ",w("strong",{children:o.target.label}),w(O,{color:o.target.color,style:j.targetChip}),w("strong",{children:o.formattedValue})]})})},legends:[],layers:["links","nodes","labels","legends"],role:"img",animate:!0,motionConfig:"gentle"},q=function(e){return e.id},U=function(n){var t=n.data,i=n.valueFormat,r=n.layout,l=n.width,c=n.height,s=n.sort,u=n.align,h=n.colors,v=n.nodeThickness,p=n.nodeSpacing,f=n.nodeInnerPadding,g=n.nodeBorderColor,y=n.label,m=n.labelTextColor,k=e(null),C=k[0],x=k[1],O=e(null),L=O[0],w=O[1],H=o((function(){if("auto"!==s)return"input"===s?null:"ascending"===s?function(e,o){return e.value-o.value}:"descending"===s?function(e,o){return o.value-e.value}:s}),[s]),I="input"===s?null:void 0,N=o((function(){return"function"==typeof u?u:A(u)}),[u]),W=T(),R=B(h,"id"),z=P(g,W),F=a(y),S=P(m,W),E=d(i),G=o((function(){return function(e){var o=e.data,n=e.formatValue,t=e.layout,i=e.alignFunction,r=e.sortFunction,l=e.linkSortMode,a=e.nodeThickness,d=e.nodeSpacing,c=e.nodeInnerPadding,s=e.width,u=e.height,h=e.getColor,v=e.getLabel,p=b().nodeAlign(i).nodeSort(r).linkSort(l).nodeWidth(a).nodePadding(d).size("horizontal"===t?[s,u]:[u,s]).nodeId(q),f=M(o);return p(f),f.nodes.forEach((function(e){if(e.color=h(e),e.label=v(e),e.formattedValue=n(e.value),"horizontal"===t)e.x=e.x0+c,e.y=e.y0,e.width=Math.max(e.x1-e.x0-2*c,0),e.height=Math.max(e.y1-e.y0,0);else{e.x=e.y0,e.y=e.x0+c,e.width=Math.max(e.y1-e.y0,0),e.height=Math.max(e.x1-e.x0-2*c,0);var o=e.x0,i=e.x1;e.x0=e.y0,e.x1=e.y1,e.y0=o,e.y1=i}})),f.links.forEach((function(e){e.formattedValue=n(e.value),e.color=e.source.color,e.pos0=e.y0,e.pos1=e.y1,e.thickness=e.width,delete e.y0,delete e.y1,delete e.width})),f}({data:t,formatValue:E,layout:r,alignFunction:N,sortFunction:H,linkSortMode:I,nodeThickness:v,nodeSpacing:p,nodeInnerPadding:f,width:l,height:c,getColor:R,getLabel:F})}),[t,E,r,N,H,I,v,p,f,l,c,R,F]),j=G.nodes,D=G.links,V=o((function(){return j.map((function(e){return{id:e.id,label:e.label,color:e.color}}))}),[j]);return{nodes:j,links:D,legendData:V,getNodeBorderColor:z,currentNode:C,setCurrentNode:x,currentLink:L,setCurrentLink:w,getLabelTextColor:S}},J=function(e){var o=e.node,i=e.x,r=e.y,l=e.width,a=e.height,d=e.color,s=e.opacity,u=e.borderWidth,h=e.borderColor,v=e.borderRadius,p=e.setCurrent,f=e.isInteractive,g=e.onClick,y=e.tooltip,m=c(),k=m.animate,b=m.config,C=N({x:i,y:r,width:l,height:a,opacity:s,color:d,config:b,immediate:!k}),x=L(),O=x.showTooltipFromEvent,H=x.hideTooltip,I=n((function(e){p(o),O(t(y,{node:o}),e,"left")}),[p,o,O,y]),M=n((function(e){O(t(y,{node:o}),e,"left")}),[O,o,y]),T=n((function(){p(null),H()}),[p,H]),B=n((function(e){null==g||g(o,e)}),[g,o]);return w(W.rect,{x:C.x,y:C.y,rx:v,ry:v,width:C.width.to((function(e){return Math.max(e,0)})),height:C.height.to((function(e){return Math.max(e,0)})),fill:C.color,fillOpacity:C.opacity,strokeWidth:u,stroke:h,strokeOpacity:s,onMouseEnter:f?I:void 0,onMouseMove:f?M:void 0,onMouseLeave:f?T:void 0,onClick:f?B:void 0})},K=function(e){var o=e.nodes,n=e.nodeOpacity,t=e.nodeHoverOpacity,i=e.nodeHoverOthersOpacity,r=e.borderWidth,l=e.getBorderColor,a=e.borderRadius,d=e.setCurrentNode,c=e.currentNode,s=e.currentLink,u=e.isCurrentNode,h=e.isInteractive,v=e.onClick,p=e.tooltip,f=function(e){return c||s?u(e)?t:i:n};return w(I,{children:o.map((function(e){return w(J,{node:e,x:e.x,y:e.y,width:e.width,height:e.height,color:e.color,opacity:f(e),borderWidth:r,borderColor:l(e),borderRadius:a,setCurrent:d,isInteractive:h,onClick:v,tooltip:p},e.id)}))})},Q=function(e){var o=e.id,n=e.layout,t=e.startColor,i=e.endColor;return H("linearGradient",E({id:o,spreadMethod:"pad"},"horizontal"===n?{x1:"0%",x2:"100%",y1:"0%",y2:"0%"}:{x1:"0%",x2:"0%",y1:"0%",y2:"100%"},{children:[w("stop",{offset:"0%",stopColor:t}),w("stop",{offset:"100%",stopColor:i})]}))},X=function(e){var o=e.link,i=e.layout,r=e.path,l=e.color,a=e.opacity,d=e.blendMode,u=e.enableGradient,h=e.setCurrent,v=e.tooltip,p=e.isInteractive,f=e.onClick,g=o.source.id+"."+o.target.id+"."+o.index,y=c(),m=y.animate,k=y.config,b=s(r),C=N({color:l,opacity:a,config:k,immediate:!m}),x=L(),O=x.showTooltipFromEvent,M=x.hideTooltip,T=n((function(e){h(o),O(t(v,{link:o}),e,"left")}),[h,o,O,v]),B=n((function(e){O(t(v,{link:o}),e,"left")}),[O,o,v]),P=n((function(){h(null),M()}),[h,M]),R=n((function(e){null==f||f(o,e)}),[f,o]);return H(I,{children:[u&&w(Q,{id:g,layout:i,startColor:o.startColor||o.source.color,endColor:o.endColor||o.target.color}),w(W.path,{fill:u?'url("#'+encodeURI(g)+'")':C.color,d:b,fillOpacity:C.opacity,onMouseEnter:p?T:void 0,onMouseMove:p?B:void 0,onMouseLeave:p?P:void 0,onClick:p?R:void 0,style:{mixBlendMode:d}})]})},Y=function(e){var n=e.links,t=e.layout,i=e.linkOpacity,r=e.linkHoverOpacity,l=e.linkHoverOthersOpacity,a=e.linkContract,d=e.linkBlendMode,c=e.enableLinkGradient,s=e.setCurrentLink,u=e.currentLink,h=e.currentNode,v=e.isCurrentLink,p=e.isInteractive,f=e.onClick,g=e.tooltip,y=function(e){return h||u?v(e)?r:l:i},m=o((function(){return"horizontal"===t?(e=z().curve(F),function(o,n){var t=Math.max(1,o.thickness-2*n)/2,i=.12*(o.target.x0-o.source.x1),r=[[o.source.x1,o.pos0-t],[o.source.x1+i,o.pos0-t],[o.target.x0-i,o.pos1-t],[o.target.x0,o.pos1-t],[o.target.x0,o.pos1+t],[o.target.x0-i,o.pos1+t],[o.source.x1+i,o.pos0+t],[o.source.x1,o.pos0+t],[o.source.x1,o.pos0-t]];return e(r)+"Z"}):function(){var e=z().curve(S);return function(o,n){var t=Math.max(1,o.thickness-2*n)/2,i=.12*(o.target.y0-o.source.y1),r=[[o.pos0+t,o.source.y1],[o.pos0+t,o.source.y1+i],[o.pos1+t,o.target.y0-i],[o.pos1+t,o.target.y0],[o.pos1-t,o.target.y0],[o.pos1-t,o.target.y0-i],[o.pos0-t,o.source.y1+i],[o.pos0-t,o.source.y1],[o.pos0+t,o.source.y1]];return e(r)+"Z"}}();var e}),[t]);return w(I,{children:n.map((function(e){return w(X,{link:e,layout:t,path:m(e,a),color:e.color,opacity:y(e),blendMode:d,enableGradient:c,setCurrent:s,isInteractive:p,onClick:f,tooltip:g},e.source.id+"."+e.target.id+"."+e.index)}))})},$=function(e){var o=e.nodes,n=e.layout,t=e.width,i=e.height,r=e.labelPosition,l=e.labelPadding,a=e.labelOrientation,d=e.getLabelTextColor,s=e.labelComponent,u=T(),h="vertical"===a?-90:0,v=o.map((function(e){var o,c,s;return"horizontal"===n?(c=e.y+e.height/2,e.x<t/2?"inside"===r?(o=e.x1+l,s="vertical"===a?"middle":"start"):(o=e.x-l,s="vertical"===a?"middle":"end"):"inside"===r?(o=e.x-l,s="vertical"===a?"middle":"end"):(o=e.x1+l,s="vertical"===a?"middle":"start")):"vertical"===n&&(o=e.x+e.width/2,e.y<i/2?"inside"===r?(c=e.y1+l,s="vertical"===a?"end":"middle"):(c=e.y-l,s="vertical"===a?"start":"middle"):"inside"===r?(c=e.y-l,s="vertical"===a?"start":"middle"):(c=e.y1+l,s="vertical"===a?"end":"middle")),{id:e.id,label:e.label,x:o,y:c,textAnchor:s,color:d(e)}})),p=c(),f=p.animate,g=p.config,y=R(v.length,v.map((function(e){return{transform:"translate("+e.x+", "+e.y+") rotate("+h+")",color:e.color,config:g,immediate:!f}})));return w(I,{children:y.map((function(e,n){var t=v[n];return w(s,{dominantBaseline:"central",textAnchor:t.textAnchor,transform:e.transform,style:E({},u.labels.text,{fill:e.color,pointerEvents:"none"}),node:o[n],children:t.label},t.id)}))})},_=["isInteractive","animate","motionConfig","theme","renderWrapper"],ee=function(e){var n=e.data,i=e.valueFormat,a=e.layout,d=void 0===a?Z.layout:a,c=e.sort,s=void 0===c?Z.sort:c,u=e.align,p=void 0===u?Z.align:u,g=e.width,y=e.height,m=e.margin,k=e.colors,b=void 0===k?Z.colors:k,C=e.nodeThickness,x=void 0===C?Z.nodeThickness:C,O=e.nodeSpacing,L=void 0===O?Z.nodeThickness:O,H=e.nodeInnerPadding,I=void 0===H?Z.nodeInnerPadding:H,M=e.nodeBorderColor,T=void 0===M?Z.nodeBorderColor:M,B=e.nodeOpacity,P=void 0===B?Z.nodeOpacity:B,N=e.nodeHoverOpacity,W=void 0===N?Z.nodeHoverOpacity:N,R=e.nodeHoverOthersOpacity,z=void 0===R?Z.nodeHoverOthersOpacity:R,F=e.nodeBorderWidth,S=void 0===F?Z.nodeBorderWidth:F,G=e.nodeBorderRadius,j=void 0===G?Z.nodeBorderRadius:G,D=e.linkOpacity,V=void 0===D?Z.linkOpacity:D,A=e.linkHoverOpacity,q=void 0===A?Z.linkHoverOpacity:A,J=e.linkHoverOthersOpacity,Q=void 0===J?Z.linkHoverOthersOpacity:J,X=e.linkContract,_=void 0===X?Z.linkContract:X,ee=e.linkBlendMode,oe=void 0===ee?Z.linkBlendMode:ee,ne=e.enableLinkGradient,te=void 0===ne?Z.enableLinkGradient:ne,ie=e.enableLabels,re=void 0===ie?Z.enableLabels:ie,le=e.labelComponent,ae=void 0===le?Z.labelComponent:le,de=e.labelPosition,ce=void 0===de?Z.labelPosition:de,se=e.labelPadding,ue=void 0===se?Z.labelPadding:se,he=e.labelOrientation,ve=void 0===he?Z.labelOrientation:he,pe=e.label,fe=void 0===pe?Z.label:pe,ge=e.labelTextColor,ye=void 0===ge?Z.labelTextColor:ge,me=e.nodeTooltip,ke=void 0===me?Z.nodeTooltip:me,be=e.linkTooltip,Ce=void 0===be?Z.linkTooltip:be,xe=e.isInteractive,Oe=void 0===xe?Z.isInteractive:xe,Le=e.onClick,we=e.legends,He=void 0===we?Z.legends:we,Ie=e.layers,Me=void 0===Ie?Z.layers:Ie,Te=e.role,Be=void 0===Te?Z.role:Te,Pe=e.ariaLabel,Ne=e.ariaLabelledBy,We=e.ariaDescribedBy,Re=e.forwardedRef,ze=h(g,y,m),Fe=ze.margin,Se=ze.innerWidth,Ee=ze.innerHeight,Ge=ze.outerWidth,je=ze.outerHeight,De=U({data:n,valueFormat:i,layout:d,width:Se,height:Ee,sort:s,align:p,colors:b,nodeThickness:x,nodeSpacing:L,nodeInnerPadding:I,nodeBorderColor:T,label:fe,labelTextColor:ye}),Ve=De.nodes,Ae=De.links,Ze=De.legendData,qe=De.getNodeBorderColor,Ue=De.currentNode,Je=De.setCurrentNode,Ke=De.currentLink,Qe=De.setCurrentLink,Xe=De.getLabelTextColor,Ye=o((function(){var e=function(){return!1},o=function(){return!1};if(Ke&&(e=function(e){var o=e.id;return o===Ke.source.id||o===Ke.target.id},o=function(e){var o=e.source,n=e.target;return o.id===Ke.source.id&&n.id===Ke.target.id}),Ue){var n=[Ue.id];Ae.filter((function(e){var o=e.source,n=e.target;return o.id===Ue.id||n.id===Ue.id})).forEach((function(e){var o=e.source,t=e.target;n.push(o.id),n.push(t.id)})),n=l(n),e=function(e){var o=e.id;return n.includes(o)},o=function(e){var o=e.source,n=e.target;return o.id===Ue.id||n.id===Ue.id}}return{isCurrentNode:e,isCurrentLink:o}}),[Ke,Ue,Ae]),$e=Ye.isCurrentNode,_e=Ye.isCurrentLink,eo=o((function(){return{links:Ae,nodes:Ve,margin:Fe,width:g,height:y,outerWidth:Ge,outerHeight:je,currentNode:Ue,isCurrentNode:$e,setCurrentNode:Je,currentLink:Ke,isCurrentLink:_e,setCurrentLink:Qe,isInteractive:Oe}}),[Ae,Ve,Fe,g,y,Ge,je,Ue,$e,Je,Ke,_e,Qe,Oe]),oo={links:null,nodes:null,labels:null,legends:null};return Me.includes("links")&&(oo.links=w(Y,{links:Ae,layout:d,linkContract:_,linkOpacity:V,linkHoverOpacity:q,linkHoverOthersOpacity:Q,linkBlendMode:oe,enableLinkGradient:te,setCurrentLink:Qe,currentNode:Ue,currentLink:Ke,isCurrentLink:_e,isInteractive:Oe,onClick:Le,tooltip:Ce},"links")),Me.includes("nodes")&&(oo.nodes=w(K,{nodes:Ve,nodeOpacity:P,nodeHoverOpacity:W,nodeHoverOthersOpacity:z,borderWidth:S,borderRadius:j,getBorderColor:qe,setCurrentNode:Je,currentNode:Ue,currentLink:Ke,isCurrentNode:$e,isInteractive:Oe,onClick:Le,tooltip:ke},"nodes")),Me.includes("labels")&&re&&(oo.labels=w($,{nodes:Ve,layout:d,width:Se,height:Ee,labelPosition:ce,labelPadding:ue,labelOrientation:ve,getLabelTextColor:Xe,labelComponent:ae},"labels")),Me.includes("legends")&&(oo.legends=w(r,{children:He.map((function(e,o){return w(f,E({},e,{containerWidth:Se,containerHeight:Ee,data:Ze}),"legend"+o)}))},"legends")),w(v,{width:Ge,height:je,margin:Fe,role:Be,ariaLabel:Pe,ariaLabelledBy:Ne,ariaDescribedBy:We,ref:Re,children:Me.map((function(e,o){var n;return"function"==typeof e?w(r,{children:t(e,eo)},o):null!=(n=null==oo?void 0:oo[e])?n:null}))})},oe=i((function(e,o){var n=e.isInteractive,t=void 0===n?Z.isInteractive:n,i=e.animate,r=void 0===i?Z.animate:i,l=e.motionConfig,a=void 0===l?Z.motionConfig:l,d=e.theme,c=e.renderWrapper,s=G(e,_);return w(u,{animate:r,isInteractive:t,motionConfig:a,renderWrapper:c,theme:d,children:w(ee,E({isInteractive:t},s,{forwardedRef:o}))})})),ne=["defaultWidth","defaultHeight","onResize","debounceResize"],te=i((function(e,o){var n=e.defaultWidth,t=e.defaultHeight,i=e.onResize,r=e.debounceResize,l=G(e,ne);return w(p,{defaultWidth:n,defaultHeight:t,onResize:i,debounceResize:r,children:function(e){var n=e.width,t=e.height;return w(oe,E({width:n,height:t},l,{ref:o}))}})}));export{te as ResponsiveSankey,oe as Sankey,A as sankeyAlignmentFromProp,V as sankeyAlignmentPropKeys,D as sankeyAlignmentPropMapping,Z as svgDefaultProps}; //# sourceMappingURL=nivo-sankey.mjs.map