apply latest d3 number format instead of d3 v3 format

 - centralize and wrap require d3 format in lib
 - adjust old and new formats

Author: archmoj

package-lock.json

@@ -72,6 +72,7 @@
     "country-regex": "^1.1.0",
     "d3": "^3.5.17",
     "d3-force": "^1.2.1",
+    "d3-format": "^1.4.5",
     "d3-hierarchy": "^1.1.9",
     "d3-interpolate": "^1.4.0",
     "d3-time-format": "^2.2.3",

package.json

@@ -10,13 +10,14 @@
 'use strict';
 
 var d3 = require('d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var isNumeric = require('fast-isnumeric');
 var tinycolor = require('tinycolor2');
 
 var Registry = require('../../registry');
 var Color = require('../color');
 var Colorscale = require('../colorscale');
-var Lib = require('../../lib');
 var strTranslate = Lib.strTranslate;
 var svgTextUtils = require('../../lib/svg_text_utils');
 
@@ -284,7 +285,7 @@ function makePointPath(symbolNumber, r) {
 
 var HORZGRADIENT = {x1: 1, x2: 0, y1: 0, y2: 0};
 var VERTGRADIENT = {x1: 0, x2: 0, y1: 1, y2: 0};
-var stopFormatter = d3.format('~.1f');
+var stopFormatter = numberFormat('~f');
 var gradientInfo = {
     radial: {node: 'radialGradient'},
     radialreversed: {node: 'radialGradient', reversed: true},

src/components/drawing/index.js

@@ -9,6 +9,6 @@
 'use strict';
 
 module.exports = {
-    FORMAT_LINK: 'https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format',
+    FORMAT_LINK: 'https://github.com/d3/d3-format#format',
     DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format#locale_format'
 };

src/constants/docs.js

@@ -8,7 +8,6 @@
 
 'use strict';
 
-var d3 = require('d3');
 var utcFormat = require('d3-time-format').utcFormat;
 var isNumeric = require('fast-isnumeric');
 
@@ -18,6 +17,31 @@ var BADNUM = numConstants.BADNUM;
 
 var lib = module.exports = {};
 
+lib.adjustFormat = function(a) {
+    if(!a) return a;
+    var b = a;
+    if(b === '0.f') return '~f';
+    if(/^[0123456789].[0123456789]f/.test(b)) return a;
+    if(/.[0123456789]%/.test(b)) return a;
+    if(/^[0123456789]%/.test(b)) return '~%';
+    if(/^[0123456789]s/.test(b)) return '~s';
+    if(!(/^[~,.0$]/.test(b)) && /[&fps]/.test(b)) {
+        // try adding tilde to the start of format in order to trim
+        b = '~' + b;
+    }
+    return b;
+};
+
+var d3Format = require('d3-format').format;
+var numberFormat = function(a) {
+    var b = lib.adjustFormat(a);
+
+    // console.log('"' + a + '" > "' + b + '"');
+
+    return d3Format(b);
+};
+lib.numberFormat = numberFormat;
+
 lib.nestedProperty = require('./nested_property');
 lib.keyedContainer = require('./keyed_container');
 lib.relativeAttr = require('./relative_attr');
@@ -1085,7 +1109,7 @@ function templateFormatString(string, labels, d3locale) {
         if(format) {
             var fmt;
             if(format[0] === ':') {
-                fmt = d3locale ? d3locale.numberFormat : d3.format;
+                fmt = d3locale ? d3locale.numberFormat : numberFormat;
                 value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
             }
 

src/lib/index.js

@@ -9,11 +9,12 @@
 'use strict';
 
 var d3 = require('d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var tinycolor = require('tinycolor2');
 var supportsPassive = require('has-passive-events');
 
 var Registry = require('../../registry');
-var Lib = require('../../lib');
 var strTranslate = Lib.strTranslate;
 var svgTextUtils = require('../../lib/svg_text_utils');
 var Color = require('../../components/color');
@@ -984,11 +985,11 @@ function getEndText(ax, end) {
         return initialVal;
     } else if(ax.type === 'log') {
         dig = Math.ceil(Math.max(0, -Math.log(diff) / Math.LN10)) + 3;
-        return d3.format('.' + dig + 'g')(Math.pow(10, initialVal));
+        return numberFormat('.' + dig + 'g')(Math.pow(10, initialVal));
     } else { // linear numeric (or category... but just show numbers here)
         dig = Math.floor(Math.log(Math.abs(initialVal)) / Math.LN10) -
             Math.floor(Math.log(diff) / Math.LN10) + 4;
-        return d3.format('.' + String(dig) + 'g')(initialVal);
+        return numberFormat('.' + String(dig) + 'g')(initialVal);
     }
 }
 

src/plots/cartesian/dragbox.js

@@ -10,9 +10,10 @@
 
 var d3 = require('d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var cleanNumber = Lib.cleanNumber;
 var ms2DateTime = Lib.ms2DateTime;
 var dateTime2ms = Lib.dateTime2ms;
@@ -965,7 +966,7 @@ module.exports = function setConvert(ax, fullLayout) {
     // occasionally we need _numFormat to pass through
     // even though it won't be needed by this axis
     ax._separators = fullLayout.separators;
-    ax._numFormat = locale ? locale.numberFormat : d3.format;
+    ax._numFormat = locale ? locale.numberFormat : numberFormat;
 
     // and for bar charts and box plots: reset forced minimum tick spacing
     delete ax._minDtick;

src/plots/cartesian/set_convert.js

@@ -10,6 +10,7 @@
 
 var d3 = require('d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -725,7 +726,13 @@ function getFormatter(formatObj, separators) {
     formatObj.thousands = separators.charAt(1);
 
     return {
-        numberFormat: d3.locale(formatObj).numberFormat,
+        numberFormat: function(a) {
+            var b = Lib.adjustFormat(a);
+
+            // console.log('"' + a + '" > "' + b + '"');
+
+            return formatLocale(formatObj).format(b);
+        },
         timeFormat: timeFormatLocale(formatObj).utcFormat
     };
 }

src/plots/plots.js

@@ -9,10 +9,11 @@
 'use strict';
 
 var d3 = require('d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var rgba = require('color-rgba');
 
 var Axes = require('../../plots/cartesian/axes');
-var Lib = require('../../lib');
 var strRotate = Lib.strRotate;
 var strTranslate = Lib.strTranslate;
 var svgTextUtils = require('../../lib/svg_text_utils');
@@ -87,7 +88,7 @@ function domainScale(height, padding, dimension, tickvals, ticktext) {
     var extent = dimensionExtent(dimension);
     if(tickvals) {
         return d3.scale.ordinal()
-            .domain(tickvals.map(toText(d3.format(dimension.tickformat), ticktext)))
+            .domain(tickvals.map(toText(numberFormat(dimension.tickformat), ticktext)))
             .range(tickvals
                 .map(function(d) {
                     var unitVal = (d - extent[0]) / (extent[1] - extent[0]);
@@ -274,7 +275,7 @@ function viewModel(state, callbacks, model) {
 
             // ensure ticktext and tickvals have same length
             if(!Array.isArray(ticktext) || !ticktext.length) {
-                ticktext = tickvals.map(d3.format(dimension.tickformat));
+                ticktext = tickvals.map(numberFormat(dimension.tickformat));
             } else if(ticktext.length > tickvals.length) {
                 ticktext = ticktext.slice(0, tickvals.length);
             } else if(tickvals.length > ticktext.length) {

src/traces/parcoords/parcoords.js

@@ -9,10 +9,11 @@
 'use strict';
 
 var d3 = require('d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var render = require('./render');
 var Fx = require('../../components/fx');
 var Color = require('../../components/color');
-var Lib = require('../../lib');
 var cn = require('./constants').cn;
 
 var _ = Lib._;
@@ -200,7 +201,7 @@ module.exports = function plot(gd, calcData) {
             link.fullData = link.trace;
             obj = d.link.trace.link;
             var hoverCenter = hoverCenterPosition(link);
-            var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(link.value) + d.valueSuffix};
+            var hovertemplateLabels = {valueLabel: numberFormat(d.valueFormat)(link.value) + d.valueSuffix};
 
             hoverItems.push({
                 x: hoverCenter[0],
@@ -210,7 +211,7 @@ module.exports = function plot(gd, calcData) {
                     link.label || '',
                     sourceLabel + link.source.label,
                     targetLabel + link.target.label,
-                    link.concentrationscale ? concentrationLabel + d3.format('%0.2f')(link.flow.labelConcentration) : ''
+                    link.concentrationscale ? concentrationLabel + numberFormat('%0.2f')(link.flow.labelConcentration) : ''
                 ].filter(renderableValuePresent).join('<br>'),
                 color: castHoverOption(obj, 'bgcolor') || Color.addOpacity(link.color, 1),
                 borderColor: castHoverOption(obj, 'bordercolor'),
@@ -289,14 +290,14 @@ 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 hovertemplateLabels = {valueLabel: numberFormat(d.valueFormat)(d.node.value) + d.valueSuffix};
         d.node.fullData = d.node.trace;
 
         var tooltip = Fx.loneHover({
             x0: hoverCenterX0,
             x1: hoverCenterX1,
             y: hoverCenterY,
-            name: d3.format(d.valueFormat)(d.node.value) + d.valueSuffix,
+            name: numberFormat(d.valueFormat)(d.node.value) + d.valueSuffix,
             text: [
                 d.node.label,
                 incomingLabel + d.node.targetLinks.length,