feat(sankey): add ability to sort nodes (#401)

plouc · Mar 22, 2019 · fed5fc4 · fed5fc4
1 parent cc3cb0b
commit fed5fc4
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/packages/sankey/index.d.ts b/packages/sankey/index.d.ts
@@ -76,6 +76,8 @@ declare module '@nivo/sankey' {
         theme: Theme
 
         legends: LegendProps[]
+
+        sort?: (nodeA: SankeyDataNode, nodeB: SankeyDataNode) => number
     }>
 
     interface Dimensions {

diff --git a/packages/sankey/package.json b/packages/sankey/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "@nivo/core": "0.53.0",
     "@nivo/legends": "0.53.0",
-    "d3-sankey": "^0.7.1",
+    "d3-sankey": "0.12.1",
     "lodash": "^4.17.4",
     "react-motion": "^0.5.2",
     "recompose": "^0.30.0"

diff --git a/packages/sankey/src/Sankey.js b/packages/sankey/src/Sankey.js
@@ -74,8 +74,11 @@ const Sankey = ({
     tooltipFormat,
 
     legends,
+
+    sort,
 }) => {
     const sankey = d3Sankey()
+        .nodeSort(sort)
         .nodeAlign(sankeyAlignmentFromProp(align))
         .nodeWidth(nodeWidth)
         .nodePadding(nodePaddingY)

diff --git a/packages/sankey/stories/sankey.stories.js b/packages/sankey/stories/sankey.stories.js
@@ -86,3 +86,13 @@ const randColorProperties = {
 stories.add('with custom node & link coloring', () => (
     <Sankey {...randColorProperties} enableLinkGradient={true} colorBy={node => node.nodeColor} />
 ))
+
+const minNodeValueOnTop = (nodeA, nodeB) => {
+    if (nodeA.value < nodeB.value) return -1
+    if (nodeA.value > nodeB.value) return 1
+    return 0
+}
+
+stories.add('with reverse sort ordering (min node value on top)', () => (
+    <Sankey {...commonProperties} sort={minNodeValueOnTop} />
+))
diff --git a/yarn.lock b/yarn.lock
@@ -4899,6 +4899,11 @@ d3-array@1, d3-array@^1.2.0:
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
   integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
 
+"d3-array@>=1 <=2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.0.3.tgz#9c0531eda701e416f28a030e3d4e6179ba74f19f"
+  integrity sha512-C7g4aCOoJa+/K5hPVqZLG8wjYHsTUROTk7Z1Ep9F4P5l+WVrvV0+6nAZ1wKTRLMhFWpGbozxUpyjIPZYAaLi+g==
+
 d3-chord@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f"
@@ -4946,13 +4951,12 @@ d3-path@1:
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.7.tgz#8de7cd693a75ac0b5480d3abaccd94793e58aae8"
   integrity sha512-q0cW1RpvA5c5ma2rch62mX8AYaiLX0+bdaSM2wxSU9tXjU4DNvkx9qiUvjkuWCj3p22UO/hlPivujqMiR9PDzA==
 
-d3-sankey@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.7.1.tgz#d229832268fc69a7fec84803e96c2256a614c521"
-  integrity sha1-0imDImj8aaf+yEgD6WwiVqYUxSE=
+d3-sankey@0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.1.tgz#f4a655227ee90211befcd32074aeb275e73f92ba"
+  integrity sha512-2DF8aj52Zkghfl06yCsCJUW/p8ChQND0+p1Xx3DiQIvABp4XazvyMAppgGRjJGwK2tkVYtpI1IgFIlMppBZMhg==
   dependencies:
-    d3-array "1"
-    d3-collection "1"
+    d3-array ">=1 <=2"
     d3-shape "^1.2.0"
 
 d3-scale-chromatic@^1.3.3: