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