feat(sankey): decouple node coloring and link coloring (#404)

* Provide properties to easily decouple Sankey Link Coloring from Node Coloring * Fix CI check by removing unused SankeyLinksItem properties
plouc · Jan 24, 2019 · c793ffd · c793ffd
1 parent 33d5508
commit c793ffd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/packages/sankey/src/SankeyLinksItem.js b/packages/sankey/src/SankeyLinksItem.js
@@ -80,8 +80,9 @@ const SankeyLinksItem = ({
                 x1={link.source.x}
                 x2={link.target.x}
             >
-                <stop offset="0%" stopColor={link.source.color} />
-                <stop offset="100%" stopColor={link.target.color} />
+                {/*Use startColor & endColor if want to customize link color gradient*/}
+                <stop offset="0%" stopColor={link.startColor || link.source.color} />
+                <stop offset="100%" stopColor={link.endColor || link.target.color} />
             </linearGradient>
         )}
         <path

diff --git a/packages/sankey/stories/sankey.stories.js b/packages/sankey/stories/sankey.stories.js
@@ -1,14 +1,15 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
-import { generateSankeyData } from '@nivo/generators'
+import { generateSankeyData, randColor } from '@nivo/generators'
 import { Sankey } from '../index'
 
+const sankeyData = generateSankeyData({ nodeCount: 11, maxIterations: 2 })
 const commonProperties = {
     width: 900,
     height: 400,
     margin: { top: 0, right: 80, bottom: 0, left: 80 },
-    data: generateSankeyData({ nodeCount: 11, maxIterations: 2 }),
+    data: sankeyData,
     colors: 'category10',
 }
 
@@ -85,3 +86,36 @@ stories.add(
         />
     ))
 )
+
+const dataWithRandLinkColors = data => {
+    return {
+        nodes: data.nodes.map(node => ({
+            ...node,
+            nodeColor: 'blue',
+        })),
+        links: data.links.map(link => ({
+            ...link,
+            startColor: randColor(),
+            endColor: randColor(),
+        })),
+    }
+}
+
+const randColorProperties = {
+    width: commonProperties.width,
+    height: commonProperties.height,
+    margin: commonProperties.margin,
+    data: dataWithRandLinkColors(sankeyData),
+    colors: commonProperties.colors,
+}
+
+stories.add(
+    'with custom node & link coloring',
+    withInfo()(() => (
+        <Sankey
+            {...randColorProperties}
+            enableLinkGradient={true}
+            colorBy={node => node.nodeColor}
+        />
+    ))
+)