Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include link's index in the React Component key when creating the SVG element #2037

Merged
merged 2 commits into from
Jun 17, 2022
Merged

Include link's index in the React Component key when creating the SVG element #2037

merged 2 commits into from
Jun 17, 2022

Conversation

Ellis-808
Copy link
Contributor

Code to support custom color gradients for multiple links between the same two nodes.
Also prevents the duplicate child key error when 2+ links attach to the same two nodes.

image

(Screenshots) ResponsiveSankey: Link Color-Gradient Issue

Initial Sankey Chart w/ Multiple Links Between Nodes

image

Link 1: endColor: "de77ae" // The 1st link's color gradient takes precedence

image

Link 2: endColor: "#92c5de" // this color is ignored

image

Link 3: endColor: "bcbddc" // this color is ignored

image

Link 4: endColor: "97e3d5" // this color is ignored

image

Sankey Chart w/ Proposed Changes: ca335e6

image
Code to Generate Bug

import { ResponsiveSankey } from '@nivo/sankey';
import { BasicTooltip } from '@nivo/tooltip';

<ResponsiveSankey enableLinkGradient
    colors={(node) => node.nodeColor}
    linkTooltip={({ link }) => {
        const value = `(${link.linkLabel}) ${link.source.nodeLabel} > ${link.target.nodeLabel}: ${link.value}`;
        return <BasicTooltip enableChip color={link.endColor} value={value} />; 
    }}
    data={{
        nodes: [
            { id: "node1", nodeColor: "#e0e0e0", nodeLabel: "Node 1" },
            { id: "node2", nodeColor: "#e0e0e0", nodeLabel: "Node 2" }
        ],
        links: [
            {
                source: "node1",
                target: "node2",
                value: 5,
                linkLabel: "Link #1",
                startColor: "#e0e0e0",
                endColor: "#de77ae" // The 1st link's color gradient takes precedence
            },
            {
                source: "node1",
                target: "node2",
                value: 8,
                linkLabel: "Link #2",
                startColor: "#e0e0e0",
                endColor: "#92c5de" // this color is ignored
            },
            {
                source: "node1",
                target: "node2",
                value: 3,
                linkLabel: "Link #3",
                startColor: "#e0e0e0",
                endColor: "#bcbddc" // this color is ignored
            },
            {
                source: "node1",
                target: "node2",
                value: 1,
                linkLabel: "Link #4",
                startColor: "#e0e0e0",
                endColor: "#97e3d5" // this color is ignored
            }
        ]
    }}
/>

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
This is to support custom color gradients for multiple links between the same two nodes. Also prevents the duplicate child key error when 2+ links attach to the same two nodes.
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 9, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b773c62:

Sandbox Source
nivo Configuration

Support custom color gradients for multiple links between the same two nodes.
Copy link
Owner

@plouc plouc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@plouc plouc merged commit 5985ab4 into plouc:master Jun 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants