Merge pull request #5152 from plotly/fix5122-pie-format

Fix rounding big numbers in pie & sunburst traces

Author: archmoj

src/traces/pie/helpers.js

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

test/jasmine/tests/pie_test.js

@@ -2064,3 +2064,117 @@ describe('pie uniformtext', function() {
         .then(done);
     });
 });
+
+describe('pie value format', function() {
+    'use strict';
+
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should handle rounding big & small values', function(done) {
+        Plotly.newPlot(gd, [{
+            type: 'pie',
+            textinfo: 'value',
+            values: [
+                123456789012,
+                12345678901.2,
+                1234567890.12,
+                123456789.012,
+                12345678.9012,
+                1234567.89012,
+                123456.789012,
+                12345.6789012,
+                1234.56789012,
+                123.456789012,
+                12.3456789012,
+                1.23456789012,
+                0.123456789012,
+                0.0123456789012,
+                0.00123456789012,
+                0.000123456789012,
+                0.0000123456789012,
+                0.00000123456789012,
+                0.000000123456789012,
+                0.0000000123456789012
+            ]
+        }])
+        .then(function() {
+            var exp = [
+                '1.23456789e+11',
+                '1.23456789e+10',
+                '1,234,567,890',
+                '123,456,789',
+                '12,345,678.9',
+                '1,234,567.89',
+                '123,456.789',
+                '12,345.6789',
+                '1,234.56789',
+                '123.456789',
+                '12.3456789',
+                '1.23456789',
+                '0.123456789',
+                '0.0123456789',
+                '0.00123456789',
+                '0.000123456789',
+                '0.0000123456789',
+                '0.00000123456789',
+                '1.23456789e-7',
+                '1.23456789e-8'
+            ];
+
+            var selection = d3.selectAll(SLICES_TEXT_SELECTOR);
+            for(var i = 0; i < selection[0].length; i++) {
+                var text = selection[0][i].getAttribute('data-unformatted');
+                expect(text).toBe(exp[i]);
+            }
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('should handle rounding big & small percents', function(done) {
+        Plotly.newPlot(gd, [{
+            type: 'pie',
+            textinfo: 'percent',
+            values: [
+                0.9,
+                0.09,
+                0.009,
+                0.0009,
+                0.00009,
+                0.000009,
+                0.0000009,
+                0.00000009,
+                0.000000009,
+                0.0000000009
+            ]
+        }])
+        .then(function() {
+            var exp = [
+                '90%',
+                '9%',
+                '0.9%',
+                '0.09%',
+                '0.009%',
+                '0.0009%',
+                '0.00009%',
+                '0.000009%',
+                '9e-7%',
+                '9e-8%'
+            ];
+
+            var selection = d3.selectAll(SLICES_TEXT_SELECTOR);
+            for(var i = 0; i < selection[0].length; i++) {
+                var text = selection[0][i].innerHTML;
+                expect(text).toBe(exp[i]);
+            }
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});