Merge pull request #4621 from plotly/sankey-customdata

sankey: introducing attributes (node|link).customdata

Author: antoinerg

src/traces/sankey/attributes.js

@@ -84,6 +84,9 @@ var attrs = module.exports = overrideAll({
         description: 'Sets the font for node labels'
     }),
 
+    // Remove top-level customdata
+    customdata: undefined,
+
     node: {
         label: {
             valType: 'data_array',
@@ -128,6 +131,13 @@ var attrs = module.exports = overrideAll({
                 'what is beneath the node.'
             ].join(' ')
         },
+        customdata: {
+            valType: 'data_array',
+            editType: 'calc',
+            description: [
+                'Assigns extra data to each node.'
+            ].join(' ')
+        },
         line: {
             color: {
                 valType: 'color',
@@ -200,6 +210,13 @@ var attrs = module.exports = overrideAll({
                 'If `link.color` is omitted, then by default, a translucent grey link will be used.'
             ].join(' ')
         },
+        customdata: {
+            valType: 'data_array',
+            editType: 'calc',
+            description: [
+                'Assigns extra data to each link.'
+            ].join(' ')
+        },
         line: {
             color: {
                 valType: 'color',

src/traces/sankey/calc.js

@@ -22,6 +22,7 @@ function convertToD3Sankey(trace) {
 
     var links = [];
     var hasLinkColorArray = isArrayOrTypedArray(linkSpec.color);
+    var hasLinkCustomdataArray = isArrayOrTypedArray(linkSpec.customdata);
     var linkedNodes = {};
 
     var components = {};
@@ -103,6 +104,7 @@ function convertToD3Sankey(trace) {
             pointNumber: i,
             label: label,
             color: hasLinkColorArray ? linkSpec.color[i] : linkSpec.color,
+            customdata: hasLinkCustomdataArray ? linkSpec.customdata[i] : linkSpec.customdata,
             concentrationscale: concentrationscale,
             source: source,
             target: target,
@@ -116,6 +118,7 @@ function convertToD3Sankey(trace) {
     // Process nodes
     var totalCount = nodeCount + groups.length;
     var hasNodeColorArray = isArrayOrTypedArray(nodeSpec.color);
+    var hasNodeCustomdataArray = isArrayOrTypedArray(nodeSpec.customdata);
     var nodes = [];
     for(i = 0; i < totalCount; i++) {
         if(!linkedNodes[i]) continue;
@@ -126,7 +129,8 @@ function convertToD3Sankey(trace) {
             childrenNodes: [],
             pointNumber: i,
             label: l,
-            color: hasNodeColorArray ? nodeSpec.color[i] : nodeSpec.color
+            color: hasNodeColorArray ? nodeSpec.color[i] : nodeSpec.color,
+            customdata: hasNodeCustomdataArray ? nodeSpec.customdata[i] : nodeSpec.customdata
         });
     }
 

src/traces/sankey/defaults.js

@@ -50,6 +50,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerceNode('color', nodeOut.label.map(function(d, i) {
         return Color.addOpacity(defaultNodePalette(i), 0.8);
     }));
+    coerceNode('customdata');
 
     // link attributes
     var linkIn = traceIn.link || {};
@@ -73,6 +74,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
                 'rgba(0, 0, 0, 0.2)';
 
     coerceLink('color', Lib.repeat(defaultLinkColor, linkOut.value.length));
+    coerceLink('customdata');
 
     handleArrayContainerDefaults(linkIn, linkOut, {
         name: 'colorscales',

test/jasmine/tests/sankey_test.js

@@ -816,6 +816,10 @@ describe('sankey tests', function() {
         it('should show the correct hover labels when hovertemplate is specified', function(done) {
             var gd = createGraphDiv();
             var mockCopy = Lib.extendDeep({}, mock);
+            mockCopy.data[0].node.customdata = [];
+            mockCopy.data[0].node.customdata[4] = ['nodeCustomdata0', 'nodeCustomdata1'];
+            mockCopy.data[0].link.customdata = [];
+            mockCopy.data[0].link.customdata[61] = ['linkCustomdata0', 'linkCustomdata1'];
 
             Plotly.plot(gd, mockCopy).then(function() {
                 _hover(404, 302);
@@ -836,23 +840,23 @@ describe('sankey tests', function() {
             // Test (node|link).hovertemplate
             .then(function() {
                 return Plotly.restyle(gd, {
-                    'node.hovertemplate': 'hovertemplate<br>%{value}<br>%{value:0.2f}<extra>%{fullData.name}</extra>',
-                    'link.hovertemplate': 'hovertemplate<br>source: %{source.label}<br>target: %{target.label}<br>size: %{value:0.0f}TWh<extra>%{fullData.name}</extra>'
+                    'node.hovertemplate': 'hovertemplate<br>%{value}<br>%{value:0.2f}<br>%{customdata[0]}/%{customdata[1]}<extra>%{fullData.name}</extra>',
+                    'link.hovertemplate': 'hovertemplate<br>source: %{source.label}<br>target: %{target.label}<br>size: %{value:0.0f}TWh<br>%{customdata[1]}<extra>%{fullData.name}</extra>'
                 });
             })
             .then(function() {
                 _hover(404, 302);
 
                 assertLabel(
-                    [ 'hovertemplate', '447TWh', '447.48', 'trace 0'],
+                    [ 'hovertemplate', '447TWh', '447.48', 'nodeCustomdata0/nodeCustomdata1', 'trace 0'],
                     ['rgb(148, 103, 189)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
                 );
             })
             .then(function() {
                 _hover(450, 300);
 
                 assertLabel(
-                    ['hovertemplate', 'source: Solid', 'target: Industry', 'size: 46TWh', 'trace 0'],
+                    ['hovertemplate', 'source: Solid', 'target: Industry', 'size: 46TWh', 'linkCustomdata1', 'trace 0'],
                     ['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
                 );
             })