Sankey: More customisation features

[zaneho]

Is your feature request related to a problem? Please describe.
I hope to have more customisation for Sankey.
Or do let me know how I can achieve the following features.

Feature 1) Align text in node
Feature 2) Wrap text of label
Feature 3) Add icons (eg SVG) infront/behind the text label.
Feature 4) Add badge on node
Feature 5) Mouse events (hover, right click)

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Feature 1) I adjusted node width and label padding, but text are not aligned. eg Center.
Feature 3) Currently only support text, such as unicode for icons

Additional context
What I hope to achieve

What I manage to do so far

[plouc]

Hi @zaneho,

While the doc doesn't explicitly mention it, you can already use mouse events on nodes/links, however events like right click aren't supported, if you go to https://nivo.rocks/sankey/, you can try clicking on the nodes/links and you'll see your actions logged.

Regarding text wrap/alignment, it's SVG so it's a bit constraining, nivo being a high level lib, it's a bit difficult to cover every use case, the doc also doesn't mention it, but you can use an extra layer in this chart and render whatever you want.

I'll see if I find some time to actually demonstrate this feature with a concrete example.

[plouc]

Please have a look at https://codesandbox.io/s/sankey-custom-b4iyi

[Ironem]

Please have a look at https://codesandbox.io/s/sankey-custom-b4iyi

Hi @plouc,

Firstly thank you for this awesome project.

What you did in your sandbox is actually a very cool way to customize the node, however, I noticed that we loose some functionalities of the default node, like when we have the mouse over the node, it should put all linked node and links with a higher opacity and reduce others opacity.

How can we reimplement this part in your sandbox? I didn't find any code about this part on the github.

Thanks again

[zaneho]

Hi @plouc

Qn: May I know how I can make the links 'overlap'/'converge' for multiple outgoing/incoming links?

I tried changing this in hooks.ts but the alignment is still off.
// link.pos0 = link.y0
link.pos0 = link.source.y0
// link.pos1 = link.y1
link.pos1 = link.target.y1

https://codesandbox.io/s/sankey-nivo-0-78-forked-author-suggestion-zg17t?file=/src/App.js

Thanks.

[plouc]

No you cannot, the thickness of each link is tied to the value it corresponds to, doing this would somehow defeat the purpose of using a sankey diagram I think.

[rohitushur]

Is there any chance we can increase the minimum width b/w two nodes ( means the link thickness ) ? I want to do this dynamically because I can get sometimes less data or more data based and the api and what i want to do is i want to increase the width of the responsive sankey based on the recieved data

[Bilal1122]

@plouc your above suggestion for customLayer does not seem to work as layer has type SankeyLayerId[] and export type SankeyLayerId = 'links' | 'nodes' | 'labels' | 'legends';

It does not allow to pass a anything else beside the mentioned

[plouc]

@Bilal1122, you're right, it is implemented and works, but the typing is wrong.

[frankli-dev]

Could you fix the type of SankeyLayerId, please? @plouc

Also, can we have a labelTooltip? Like linkTooltip or nodeTooltip

[mayank-permiso]

Hi @plouc , why can not properties like -

nodeOpacity: number;
nodeHoverOpacity: number;
nodeHoverOthersOpacity: number;
nodeThickness: number;
nodeSpacing: number;
nodeInnerPadding: number;
nodeBorderWidth: number;
linkOpacity: number;
linkHoverOpacity: number;
linkHoverOthersOpacity: number;
linkContract: number;

etc, accept a function similar to colors prop? If that would be possible, then we can easily customise each node and link's opacity, width,hover opacity etc according to our needs.
I realised this when my task was to mark a red path along the sankey. I wanted to give a flag which if true, will fade all other links and would highlight only red links from start to end nodes. I am yet to discover a way to do that without manipulating the original data.

[plouc]

@mayank-permiso, accepting functions for everything makes the codebase much more complex, also it can be an issue for memoization, and sometimes confuse people. It could be useful though, but unless someone wants to help with this, that's not a feature I'm planning to implement right now.

[mayank-permiso]

Sure, will start looking into the library and might start the implementation in future.

While we at it, have you ever noticed a glitch where sankey starts shimmering? I used mui dialog and had like 30 nodes in total, 6 level depth and quite a few links. Sankey shimmers when a state gets updated or when we render sankey in mui dialog. Fixed it by removing state and making my own dialog with pure divs. But the issue was quite bizarre, I tried a lot of config changes like turning off interactivity, animation, useMemo and useCallback for any objects or functions, but no effect.
I can open an issue but I am not sure what to do exactly to replicate the issue. If you already have any idea, that would be helpful, else will try to open an issue. Thanks in advance.@plouc

[plouc]

It's hard to tell without a reproducible example.