sankey: add fullData to eventData, test (node|link).hovertemplate

Author: antoinerg

src/traces/sankey/plot.js

@@ -133,6 +133,7 @@ module.exports = function plot(gd, calcData) {
         if(gd._fullLayout.hovermode === false) return;
         d3.select(element).call(linkHoveredStyle.bind(0, d, sankey, true));
         if(d.link.trace.link.hoverinfo !== 'skip') {
+            d.link.fullData = d.link.trace;
             gd.emit('plotly_hover', {
                 event: d3.event,
                 points: [d.link]
@@ -156,6 +157,7 @@ module.exports = function plot(gd, calcData) {
         var hoverCenterY = boundingBox.top + boundingBox.height / 2;
 
         var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(d.link.value) + d.valueSuffix};
+        d.link.fullData = d.link.trace;
 
         var tooltip = Fx.loneHover({
             x: hoverCenterX - rootBBox.left,
@@ -190,6 +192,7 @@ module.exports = function plot(gd, calcData) {
         if(gd._fullLayout.hovermode === false) return;
         d3.select(element).call(linkNonHoveredStyle.bind(0, d, sankey, true));
         if(d.link.trace.link.hoverinfo !== 'skip') {
+            d.link.fullData = d.link.trace;
             gd.emit('plotly_unhover', {
                 event: d3.event,
                 points: [d.link]
@@ -211,6 +214,7 @@ module.exports = function plot(gd, calcData) {
         if(gd._fullLayout.hovermode === false) return;
         d3.select(element).call(nodeHoveredStyle, d, sankey);
         if(d.node.trace.node.hoverinfo !== 'skip') {
+            d.node.fullData = d.node.trace;
             gd.emit('plotly_hover', {
                 event: d3.event,
                 points: [d.node]
@@ -231,6 +235,7 @@ module.exports = function plot(gd, calcData) {
         var hoverCenterY = boundingBox.top + boundingBox.height / 4 - rootBBox.top;
 
         var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(d.node.value) + d.valueSuffix};
+        d.node.fullData = d.node.trace;
 
         var tooltip = Fx.loneHover({
             x0: hoverCenterX0,
@@ -266,6 +271,7 @@ module.exports = function plot(gd, calcData) {
         if(gd._fullLayout.hovermode === false) return;
         d3.select(element).call(nodeNonHoveredStyle, d, sankey);
         if(d.node.trace.node.hoverinfo !== 'skip') {
+            d.node.fullData = d.node.trace;
             gd.emit('plotly_unhover', {
                 event: d3.event,
                 points: [d.node]

test/jasmine/tests/sankey_test.js

@@ -497,6 +497,53 @@ describe('sankey tests', function() {
             .then(done);
         });
 
+        it('should show the correct hover labels when hovertemplate is specified', function(done) {
+            var gd = createGraphDiv();
+            var mockCopy = Lib.extendDeep({}, mock);
+
+            Plotly.plot(gd, mockCopy).then(function() {
+                _hover(404, 302);
+
+                assertLabel(
+                    ['Solid', 'incoming flow count: 4', 'outgoing flow count: 3', '447TWh'],
+                    ['rgb(148, 103, 189)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
+                );
+            })
+            .then(function() {
+                _hover(450, 300);
+
+                assertLabel(
+                    ['source: Solid', 'target: Industry', '46TWh'],
+                    ['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
+                );
+            })
+            // 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>'
+                });
+            })
+            .then(function() {
+                _hover(404, 302);
+
+                assertLabel(
+                    [ 'hovertemplate', '447TWh', '447.48', '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'],
+                    ['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
+                );
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
         it('should show the correct hover labels with the style provided in template', function(done) {
             var gd = createGraphDiv();
             var mockCopy = Lib.extendDeep({}, mock);