adding hovertemplate support to sankey

Author: antoinerg

src/traces/sankey/attributes.js

@@ -13,6 +13,7 @@ var plotAttrs = require('../../plots/attributes');
 var colorAttrs = require('../../components/color/attributes');
 var fxAttrs = require('../../components/fx/attributes');
 var domainAttrs = require('../../plots/domain').attributes;
+var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 
 var extendFlat = require('../../lib/extend').extendFlat;
 var overrideAll = require('../../plot_api/edit_types').overrideAll;
@@ -146,6 +147,9 @@ var attrs = module.exports = overrideAll({
             ].join(' ')
         },
         hoverlabel: fxAttrs.hoverlabel, // needs editType override,
+        hovertemplate: hovertemplateAttrs({}, {
+            keys: []
+        }),
         description: 'The nodes of the Sankey plot.'
     },
 
@@ -216,6 +220,9 @@ var attrs = module.exports = overrideAll({
             ].join(' ')
         },
         hoverlabel: fxAttrs.hoverlabel, // needs editType override,
+        hovertemplate: hovertemplateAttrs({}, {
+            keys: []
+        }),
         description: 'The links of the Sankey plot.'
     }
 }, 'calc', 'nested');

src/traces/sankey/defaults.js

@@ -35,6 +35,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerceNode('line.width');
     coerceNode('hoverinfo', traceIn.hoverinfo);
     handleHoverLabelDefaults(nodeIn, nodeOut, coerceNode, hoverlabelDefault);
+    coerceNode('hovertemplate');
 
     var colors = layout.colorway;
 
@@ -57,6 +58,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerceLink('line.width');
     coerceLink('hoverinfo', traceIn.hoverinfo);
     handleHoverLabelDefaults(linkIn, linkOut, coerceLink, hoverlabelDefault);
+    coerceLink('hovertemplate');
 
     var defaultLinkColor = tinycolor(layout.paper_bgcolor).getLuminance() < 0.333 ?
                 'rgba(255, 255, 255, 0.6)' :

src/traces/sankey/plot.js

@@ -155,10 +155,12 @@ module.exports = function plot(gd, calcData) {
         var hoverCenterX = boundingBox.left + boundingBox.width / 2;
         var hoverCenterY = boundingBox.top + boundingBox.height / 2;
 
+        var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(d.link.value) + d.valueSuffix};
+
         var tooltip = Fx.loneHover({
             x: hoverCenterX - rootBBox.left,
             y: hoverCenterY - rootBBox.top,
-            name: d3.format(d.valueFormat)(d.link.value) + d.valueSuffix,
+            name: hovertemplateLabels.valueLabel,
             text: [
                 d.link.label || '',
                 sourceLabel + d.link.source.label,
@@ -169,7 +171,11 @@ module.exports = function plot(gd, calcData) {
             fontFamily: castHoverOption(obj, 'font.family'),
             fontSize: castHoverOption(obj, 'font.size'),
             fontColor: castHoverOption(obj, 'font.color'),
-            idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left'
+            idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left',
+
+            hovertemplate: obj.hovertemplate,
+            hovertemplateLabels: hovertemplateLabels,
+            eventData: [d.link]
         }, {
             container: fullLayout._hoverlayer.node(),
             outerContainer: fullLayout._paper.node(),
@@ -224,6 +230,8 @@ module.exports = function plot(gd, calcData) {
         var hoverCenterX1 = boundingBox.right + 2 - rootBBox.left;
         var hoverCenterY = boundingBox.top + boundingBox.height / 4 - rootBBox.top;
 
+        var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(d.node.value) + d.valueSuffix};
+
         var tooltip = Fx.loneHover({
             x0: hoverCenterX0,
             x1: hoverCenterX1,
@@ -239,7 +247,11 @@ module.exports = function plot(gd, calcData) {
             fontFamily: castHoverOption(obj, 'font.family'),
             fontSize: castHoverOption(obj, 'font.size'),
             fontColor: castHoverOption(obj, 'font.color'),
-            idealAlign: 'left'
+            idealAlign: 'left',
+
+            hovertemplate: obj.hovertemplate,
+            hovertemplateLabels: hovertemplateLabels,
+            eventData: [d.node]
         }, {
             container: fullLayout._hoverlayer.node(),
             outerContainer: fullLayout._paper.node(),

test/jasmine/tests/sankey_test.js

@@ -744,8 +744,12 @@ describe('sankey tests', function() {
                 _assert(d, {
                     curveNumber: 0,
                     pointNumber: 4,
-                    label: 'Solid'
+                    label: 'Solid',
+                    value: 447.48
                 });
+                var pt = d.points[0];
+                expect(pt.sourceLinks.length).toBe(3);
+                expect(pt.targetLinks.length).toBe(4);
             })
             .then(function() { return _hover('link'); })
             .then(function(d) {
@@ -754,6 +758,9 @@ describe('sankey tests', function() {
                     pointNumber: 61,
                     value: 46.477
                 });
+                var pt = d.points[0];
+                expect(pt.hasOwnProperty('source')).toBeTruthy();
+                expect(pt.hasOwnProperty('target')).toBeTruthy();
             })
             .then(function() { return _unhover('node'); })
             .then(function(d) {