add 'hovertext' attribute to pie traces

Author: etpinard

src/traces/pie/attributes.js

@@ -79,7 +79,27 @@ module.exports = {
 
     text: {
         valType: 'data_array',
-        description: 'Sets text elements associated with each sector.'
+        description: [
+            'Sets text elements associated with each sector.',
+            'If trace `textinfo` contains a *text* flag, these elements will seen',
+            'on the chart.',
+            'If trace `hoverinfo` contains a *text* flag and *hovertext* is not set,',
+            'these elements will be seen in the hover labels.'
+        ].join(' ')
+    },
+    hovertext: {
+        valType: 'string',
+        role: 'info',
+        dflt: '',
+        arrayOk: true,
+        description: [
+            'Sets hover text elements associated with each sector.',
+            'If a single string, the same string appears for',
+            'all data points.',
+            'If an array of string, the items are mapped in order of',
+            'this trace\'s sectors.',
+            'To be seen, trace `hoverinfo` must contain a *text* flag.'
+        ].join(' ')
     },
 
 // 'see eg:'

src/traces/pie/defaults.js

@@ -45,6 +45,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     var textData = coerce('text');
     var textInfo = coerce('textinfo', Array.isArray(textData) ? 'text+percent' : 'percent');
+    coerce('hovertext');
 
     coerce('hoverinfo', (layout._dataLength === 1) ? 'label+text+value+percent' : undefined);
 

src/traces/pie/plot.js

@@ -110,8 +110,16 @@ module.exports = function plot(gd, cdpie) {
                         thisText = [];
 
                     if(hoverinfo.indexOf('label') !== -1) thisText.push(pt.label);
-                    if(trace2.text && trace2.text[pt.i] && hoverinfo.indexOf('text') !== -1) {
-                        thisText.push(trace2.text[pt.i]);
+                    if(hoverinfo.indexOf('text') !== -1) {
+                        if(trace2.hovertext) {
+                            thisText.push(
+                                Array.isArray(trace2.hovertext) ?
+                                    trace2.hovertext[pt.i] :
+                                    trace2.hovertext
+                            );
+                        } else if(trace2.text && trace2.text[pt.i]) {
+                            thisText.push(trace2.text[pt.i]);
+                        }
                     }
                     if(hoverinfo.indexOf('value') !== -1) thisText.push(helpers.formatPieValue(pt.v, separators));
                     if(hoverinfo.indexOf('percent') !== -1) thisText.push(helpers.formatPiePercent(pt.v / cd0.vTotal, separators));

test/jasmine/tests/hover_pie_test.js

@@ -6,6 +6,7 @@ var customMatchers = require('../assets/custom_matchers');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 
+var d3 = require('d3');
 var click = require('../assets/click');
 var getClientPosition = require('../assets/get_client_position');
 var mouseEvent = require('../assets/mouse_event');
@@ -175,9 +176,7 @@ describe('pie hovering', function() {
     });
 
     describe('labels', function() {
-
-        var gd,
-            mockCopy;
+        var gd, mockCopy;
 
         beforeEach(function() {
             gd = createGraphDiv();
@@ -186,44 +185,60 @@ describe('pie hovering', function() {
 
         afterEach(destroyGraphDiv);
 
-        it('should show the default selected values', function(done) {
-
-            var expected = ['4', '5', '33.3%'];
-
-            Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() {
+        function _hover() {
+            mouseEvent('mouseover', 223, 143);
+        }
 
-                mouseEvent('mouseover', 223, 143);
+        function assertLabel(expected) {
+            var labels = d3.selectAll('.hovertext .nums .line');
 
-                var labels = Plotly.d3.selectAll('.hovertext .nums .line');
+            expect(labels[0].length).toBe(expected.length);
 
-                expect(labels[0].length).toBe(3);
+            labels.each(function(_, i) {
+                expect(d3.select(this).text()).toBe(expected[i]);
+            });
+        }
 
-                labels.each(function(_, i) {
-                    expect(Plotly.d3.select(this).text()).toBe(expected[i]);
-                });
-            }).then(done);
+        it('should show the default selected values', function(done) {
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout)
+            .then(_hover)
+            .then(function() {
+                assertLabel(['4', '5', '33.3%']);
+
+                return Plotly.restyle(gd, 'text', [['A', 'B', 'C', 'D', 'E']]);
+            })
+            .then(_hover)
+            .then(function() {
+                assertLabel(['4', 'E', '5', '33.3%']);
+
+                return Plotly.restyle(gd, 'hovertext', [[
+                    'Apple', 'Banana', 'Clementine', 'Dragon Fruit', 'Eggplant'
+                ]]);
+            })
+            .then(_hover)
+            .then(function() {
+                assertLabel(['4', 'Eggplant', '5', '33.3%']);
+
+                return Plotly.restyle(gd, 'hovertext', 'SUP');
+            })
+            .then(_hover)
+            .then(function() {
+                assertLabel(['4', 'SUP', '5', '33.3%']);
+            })
+            .then(done);
         });
 
         it('should show the correct separators for values', function(done) {
-
-            var expected = ['0', '12|345|678@91', '99@9%'];
-
             mockCopy.layout.separators = '@|';
             mockCopy.data[0].values[0] = 12345678.912;
             mockCopy.data[0].values[1] = 10000;
 
-            Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() {
-
-                mouseEvent('mouseover', 223, 143);
-
-                var labels = Plotly.d3.selectAll('.hovertext .nums .line');
-
-                expect(labels[0].length).toBe(3);
-
-                labels.each(function(_, i) {
-                    expect(Plotly.d3.select(this).text()).toBe(expected[i]);
-                });
-            }).then(done);
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout)
+            .then(_hover)
+            .then(function() {
+                assertLabel(['0', '12|345|678@91', '99@9%']);
+            })
+            .then(done);
         });
     });
 });