sankey: introduce link.customdata

Author: antoinerg

src/traces/sankey/attributes.js

@@ -207,6 +207,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 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,

src/traces/sankey/defaults.js

@@ -74,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,7 +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 = [0, 0, 0, 0, '15']
+            mockCopy.data[0].node.customdata = [];
+            mockCopy.data[0].node.customdata[4] = 'nodeCustomdata';
+            mockCopy.data[0].link.customdata = [];
+            mockCopy.data[0].link.customdata[61] = 'linkCustomdata';
 
             Plotly.plot(gd, mockCopy).then(function() {
                 _hover(404, 302);
@@ -838,22 +841,22 @@ describe('sankey tests', function() {
             .then(function() {
                 return Plotly.restyle(gd, {
                     'node.hovertemplate': 'hovertemplate<br>%{value}<br>%{value:0.2f}<br>%{customdata}<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>'
+                    'link.hovertemplate': 'hovertemplate<br>source: %{source.label}<br>target: %{target.label}<br>size: %{value:0.0f}TWh<br>%{customdata}<extra>%{fullData.name}</extra>'
                 });
             })
             .then(function() {
                 _hover(404, 302);
 
                 assertLabel(
-                    [ 'hovertemplate', '447TWh', '447.48', '15', 'trace 0'],
+                    [ 'hovertemplate', '447TWh', '447.48', 'nodeCustomdata', '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', 'linkCustomdata', 'trace 0'],
                     ['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
                 );
             })