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.

[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