Pie: Use numSeparate on hover and text labels for values

Author: mdtusz

src/traces/pie/calc.js

@@ -107,14 +107,15 @@ module.exports = function calc(gd, trace) {
             hasText = trace.textinfo.indexOf('text') !== -1,
             hasValue = trace.textinfo.indexOf('value') !== -1,
             hasPercent = trace.textinfo.indexOf('percent') !== -1,
+            separators = fullLayout.separators,
             thisText;
 
         for(i = 0; i < cd.length; i++) {
             pt = cd[i];
             thisText = hasLabel ? [pt.label] : [];
             if(hasText && trace.text[pt.i]) thisText.push(trace.text[pt.i]);
-            if(hasValue) thisText.push(helpers.formatPieValue(pt.v));
-            if(hasPercent) thisText.push(helpers.formatPiePercent(pt.v / vTotal));
+            if(hasValue) thisText.push(helpers.formatPieValue(pt.v, separators));
+            if(hasPercent) thisText.push(helpers.formatPiePercent(pt.v / vTotal, separators));
             pt.text = thisText.join('<br>');
         }
     }

src/traces/pie/helpers.js

@@ -8,14 +8,20 @@
 
 'use strict';
 
-exports.formatPiePercent = function formatPiePercent(v) {
+var Lib = require('../../lib');
+
+exports.formatPiePercent = function formatPiePercent(v, separators) {
     var vRounded = (v * 100).toPrecision(3);
-    if(vRounded.indexOf('.') !== -1) return vRounded.replace(/[.]?0+$/,'') + '%';
-    return vRounded + '%';
+    if(vRounded.lastIndexOf('.') !== -1) {
+        vRounded = vRounded.replace(/[.]?0+$/, '');
+    }
+    return Lib.numSeparate(vRounded, separators) + '%';
 };
 
-exports.formatPieValue = function formatPieValue(v) {
+exports.formatPieValue = function formatPieValue(v, separators) {
     var vRounded = v.toPrecision(10);
-    if(vRounded.indexOf('.') !== -1) return vRounded.replace(/[.]?0+$/,'');
-    return vRounded;
+    if(vRounded.lastIndexOf('.') !== -1) {
+        vRounded = vRounded.replace(/[.]?0+$/, '');
+    }
+    return Lib.numSeparate(vRounded, separators);
 };

src/traces/pie/plot.js

@@ -103,13 +103,15 @@ module.exports = function plot(gd, cdpie) {
                     var rInscribed = getInscribedRadiusFraction(pt, cd0),
                         hoverCenterX = cx + pt.pxmid[0] * (1 - rInscribed),
                         hoverCenterY = cy + pt.pxmid[1] * (1 - rInscribed),
+                        separators = fullLayout.separators,
                         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('value') !== -1) thisText.push(helpers.formatPieValue(pt.v));
-                    if(hoverinfo.indexOf('percent') !== -1) thisText.push(helpers.formatPiePercent(pt.v / cd0.vTotal));
+                    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));
 
                     Fx.loneHover({
                         x0: hoverCenterX - rInscribed * cd0.r,

test/jasmine/tests/hover_pie_test.js

@@ -111,4 +111,57 @@ describe('pie hovering', function() {
             }, 100);
         });
     });
+
+    describe('labels', function() {
+
+        var gd,
+            mockCopy;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+            mockCopy = Lib.extendDeep({}, mock);
+        });
+
+        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() {
+
+                mouseEvent('mouseover', 230, 150);
+
+                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);
+        });
+
+        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', 230, 150);
+
+                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);
+        });
+    });
 });