Add new formatting options by replacing d3.format method with more recent d3-format module

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

package.json

@@ -66,7 +66,7 @@
  ]
  },
  "dependencies": {
- "@plotly/d3": "3.7.0",
+ "@plotly/d3": "3.8.0",
  "@plotly/d3-sankey": "0.7.2",
  "@plotly/d3-sankey-circular": "0.33.1",
  "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
  "convex-hull": "^1.0.3",
  "country-regex": "^1.1.0",
  "d3-force": "^1.2.1",
+ "d3-format": "^1.4.5",
  "d3-geo": "^1.12.1",
  "d3-geo-projection": "^2.9.0",
  "d3-hierarchy": "^1.1.9",
  "d3-interpolate": "^1.4.0",
+ "d3-time": "^1.1.0",
  "d3-time-format": "^2.2.3",
  "delaunay-triangulate": "^1.1.6",
  "fast-isnumeric": "^1.1.4",

src/components/drawing/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/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');
 
@@ -275,7 +276,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/rangeselector/get_update_object.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
  var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
  var currentRange = axisLayout.range;
  var base = new Date(axisLayout.r2l(currentRange[1]));
  var step = buttonLayout.step;
+
+ var utcStep = d3Time['utc' + titleCase(step)];
+
  var count = buttonLayout.count;
  var range0;
 
  switch(buttonLayout.stepmode) {
  case 'backward':
- range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+ range0 = axisLayout.l2r(+utcStep.offset(base, -count));
  break;
 
  case 'todate':
- var base2 = d3.time[step].utc.offset(base, -count);
+ var base2 = utcStep.offset(base, -count);
 
- range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+ range0 = axisLayout.l2r(+utcStep.ceil(base2));
  break;
  }
 

src/constants/docs.js

@@ -1,6 +1,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/tree/v1.4.5#d3-format',
  DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/lib/index.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
- _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+ if(
+ !formatStr ||
+ /^\d[.]\df/.test(formatStr) ||
+ /[.]\d%/.test(formatStr)
+ ) return formatStr;
+
+ if(formatStr === '0.f') return '~f';
+ if(/^\d%/.test(formatStr)) return '~%';
+ if(/^\ds/.test(formatStr)) return '~s';
+
+ // try adding tilde to the start of format in order to trim
+ if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+ return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+ var key = String(f);
+ if(!seenBadFormats[key]) {
+ seenBadFormats[key] = 1;
+ lib.warn('encountered bad format: "' + key + '"');
+ }
+};
+
+lib.noFormat = function(value) {
+ return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+ var fn;
+ try {
+ fn = d3Format(lib.adjustFormat(formatStr));
+ } catch(e) {
+ lib.warnBadFormat(formatStr);
+ return lib.noFormat;
+ }
+
+ return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -1122,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
  if(format) {
  var fmt;
  if(format[0] === ':') {
- fmt = d3locale ? d3locale.numberFormat : d3.format;
+ fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
  value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
  }
 

src/plots/cartesian/dragbox.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -1029,11 +1030,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/set_convert.js

@@ -2,9 +2,10 @@
 
 var d3 = require('@plotly/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;
@@ -953,7 +954,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/geo/geo.js

@@ -643,7 +643,7 @@ function getProjection(geoLayout) {
 
  var projName = constants.projNames[projType];
  // uppercase the first letter and add geo to the start of method name
- projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+ projName = 'geo' + Lib.titleCase(projName);
  var projFn = geo[projName] || geoProjection[projName];
  var projection = projFn();
 

src/plots/plots.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -702,7 +703,18 @@ function getFormatter(formatObj, separators) {
  formatObj.thousands = separators.charAt(1);
 
  return {
- numberFormat: d3.locale(formatObj).numberFormat,
+ numberFormat: function(formatStr) {
+ try {
+ formatStr = formatLocale(formatObj).format(
+ Lib.adjustFormat(formatStr)
+ );
+ } catch(e) {
+ Lib.warnBadFormat(formatStr);
+ return Lib.noFormat;
+ }
+
+ return formatStr;
+ },
  timeFormat: timeFormatLocale(formatObj).utcFormat
  };
 }

src/traces/parcoords/parcoords.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -79,7 +80,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]);
@@ -266,7 +267,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/sankey/plot.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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._;
@@ -192,7 +193,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],
@@ -202,7 +203,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'),
@@ -281,7 +282,7 @@ 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;
 
  gd._fullLayout._calcInverseTransform(gd);
@@ -292,7 +293,7 @@ module.exports = function plot(gd, calcData) {
  x0: scaleX * hoverCenterX0,
  x1: scaleX * hoverCenterX1,
  y: scaleY * 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,

src/traces/table/plot.js

@@ -2,6 +2,8 @@
 
 var c = require('./constants');
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var gup = require('../../lib/gup');
 var Drawing = require('../../components/drawing');
 var svgUtil = require('../../lib/svg_text_utils');
@@ -528,7 +530,7 @@ function populateCellText(cellText, tableControlView, allColumnBlock, gd) {
  var suffix = latex ? '' : gridPick(d.calcdata.cells.suffix, col, row) || '';
  var format = latex ? null : gridPick(d.calcdata.cells.format, col, row) || null;
 
- var prefixSuffixedText = prefix + (format ? d3.format(format)(d.value) : d.value) + suffix;
+ var prefixSuffixedText = prefix + (format ? numberFormat(format)(d.value) : d.value) + suffix;
 
  var hasWrapSplitCharacter;
  d.wrappingNeeded = !d.wrapped && !userBrokenText && !latex && (hasWrapSplitCharacter = hasWrapCharacter(prefixSuffixedText));

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

package.json

@@ -66,7 +66,7 @@
  ]
  },
  "dependencies": {
- "@plotly/d3": "3.7.0",
+ "@plotly/d3": "3.8.0",
  "@plotly/d3-sankey": "0.7.2",
  "@plotly/d3-sankey-circular": "0.33.1",
  "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
  "convex-hull": "^1.0.3",
  "country-regex": "^1.1.0",
  "d3-force": "^1.2.1",
+ "d3-format": "^1.4.5",
  "d3-geo": "^1.12.1",
  "d3-geo-projection": "^2.9.0",
  "d3-hierarchy": "^1.1.9",
  "d3-interpolate": "^1.4.0",
+ "d3-time": "^1.1.0",
  "d3-time-format": "^2.2.3",
  "delaunay-triangulate": "^1.1.6",
  "fast-isnumeric": "^1.1.4",

src/components/drawing/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/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');
 
@@ -275,7 +276,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/rangeselector/get_update_object.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
  var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
  var currentRange = axisLayout.range;
  var base = new Date(axisLayout.r2l(currentRange[1]));
  var step = buttonLayout.step;
+
+ var utcStep = d3Time['utc' + titleCase(step)];
+
  var count = buttonLayout.count;
  var range0;
 
  switch(buttonLayout.stepmode) {
  case 'backward':
- range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+ range0 = axisLayout.l2r(+utcStep.offset(base, -count));
  break;
 
  case 'todate':
- var base2 = d3.time[step].utc.offset(base, -count);
+ var base2 = utcStep.offset(base, -count);
 
- range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+ range0 = axisLayout.l2r(+utcStep.ceil(base2));
  break;
  }
 

src/constants/docs.js

@@ -1,6 +1,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/tree/v1.4.5#d3-format',
  DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/lib/index.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
- _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+ if(
+ !formatStr ||
+ /^\d[.]\df/.test(formatStr) ||
+ /[.]\d%/.test(formatStr)
+ ) return formatStr;
+
+ if(formatStr === '0.f') return '~f';
+ if(/^\d%/.test(formatStr)) return '~%';
+ if(/^\ds/.test(formatStr)) return '~s';
+
+ // try adding tilde to the start of format in order to trim
+ if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+ return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+ var key = String(f);
+ if(!seenBadFormats[key]) {
+ seenBadFormats[key] = 1;
+ lib.warn('encountered bad format: "' + key + '"');
+ }
+};
+
+lib.noFormat = function(value) {
+ return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+ var fn;
+ try {
+ fn = d3Format(lib.adjustFormat(formatStr));
+ } catch(e) {
+ lib.warnBadFormat(formatStr);
+ return lib.noFormat;
+ }
+
+ return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -1122,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
  if(format) {
  var fmt;
  if(format[0] === ':') {
- fmt = d3locale ? d3locale.numberFormat : d3.format;
+ fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
  value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
  }
 

src/plots/cartesian/dragbox.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -1029,11 +1030,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/set_convert.js

@@ -2,9 +2,10 @@
 
 var d3 = require('@plotly/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;
@@ -953,7 +954,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/geo/geo.js

@@ -643,7 +643,7 @@ function getProjection(geoLayout) {
 
  var projName = constants.projNames[projType];
  // uppercase the first letter and add geo to the start of method name
- projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+ projName = 'geo' + Lib.titleCase(projName);
  var projFn = geo[projName] || geoProjection[projName];
  var projection = projFn();
 

src/plots/plots.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -702,7 +703,18 @@ function getFormatter(formatObj, separators) {
  formatObj.thousands = separators.charAt(1);
 
  return {
- numberFormat: d3.locale(formatObj).numberFormat,
+ numberFormat: function(formatStr) {
+ try {
+ formatStr = formatLocale(formatObj).format(
+ Lib.adjustFormat(formatStr)
+ );
+ } catch(e) {
+ Lib.warnBadFormat(formatStr);
+ return Lib.noFormat;
+ }
+
+ return formatStr;
+ },
  timeFormat: timeFormatLocale(formatObj).utcFormat
  };
 }

src/traces/parcoords/parcoords.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -79,7 +80,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]);
@@ -266,7 +267,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/sankey/plot.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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._;
@@ -192,7 +193,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],
@@ -202,7 +203,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'),
@@ -281,7 +282,7 @@ 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;
 
  gd._fullLayout._calcInverseTransform(gd);
@@ -292,7 +293,7 @@ module.exports = function plot(gd, calcData) {
  x0: scaleX * hoverCenterX0,
  x1: scaleX * hoverCenterX1,
  y: scaleY * 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,

src/traces/table/plot.js

@@ -2,6 +2,8 @@
 
 var c = require('./constants');
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var gup = require('../../lib/gup');
 var Drawing = require('../../components/drawing');
 var svgUtil = require('../../lib/svg_text_utils');
@@ -528,7 +530,7 @@ function populateCellText(cellText, tableControlView, allColumnBlock, gd) {
  var suffix = latex ? '' : gridPick(d.calcdata.cells.suffix, col, row) || '';
  var format = latex ? null : gridPick(d.calcdata.cells.format, col, row) || null;
 
- var prefixSuffixedText = prefix + (format ? d3.format(format)(d.value) : d.value) + suffix;
+ var prefixSuffixedText = prefix + (format ? numberFormat(format)(d.value) : d.value) + suffix;
 
  var hasWrapSplitCharacter;
  d.wrappingNeeded = !d.wrapped && !userBrokenText && !latex && (hasWrapSplitCharacter = hasWrapCharacter(prefixSuffixedText));

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

package.json

@@ -66,7 +66,7 @@
  ]
  },
  "dependencies": {
- "@plotly/d3": "3.7.0",
+ "@plotly/d3": "3.8.0",
  "@plotly/d3-sankey": "0.7.2",
  "@plotly/d3-sankey-circular": "0.33.1",
  "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
  "convex-hull": "^1.0.3",
  "country-regex": "^1.1.0",
  "d3-force": "^1.2.1",
+ "d3-format": "^1.4.5",
  "d3-geo": "^1.12.1",
  "d3-geo-projection": "^2.9.0",
  "d3-hierarchy": "^1.1.9",
  "d3-interpolate": "^1.4.0",
+ "d3-time": "^1.1.0",
  "d3-time-format": "^2.2.3",
  "delaunay-triangulate": "^1.1.6",
  "fast-isnumeric": "^1.1.4",

src/components/drawing/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/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');
 
@@ -275,7 +276,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/rangeselector/get_update_object.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
  var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
  var currentRange = axisLayout.range;
  var base = new Date(axisLayout.r2l(currentRange[1]));
  var step = buttonLayout.step;
+
+ var utcStep = d3Time['utc' + titleCase(step)];
+
  var count = buttonLayout.count;
  var range0;
 
  switch(buttonLayout.stepmode) {
  case 'backward':
- range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+ range0 = axisLayout.l2r(+utcStep.offset(base, -count));
  break;
 
  case 'todate':
- var base2 = d3.time[step].utc.offset(base, -count);
+ var base2 = utcStep.offset(base, -count);
 
- range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+ range0 = axisLayout.l2r(+utcStep.ceil(base2));
  break;
  }
 

src/constants/docs.js

@@ -1,6 +1,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/tree/v1.4.5#d3-format',
  DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/lib/index.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
- _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+ if(
+ !formatStr ||
+ /^\d[.]\df/.test(formatStr) ||
+ /[.]\d%/.test(formatStr)
+ ) return formatStr;
+
+ if(formatStr === '0.f') return '~f';
+ if(/^\d%/.test(formatStr)) return '~%';
+ if(/^\ds/.test(formatStr)) return '~s';
+
+ // try adding tilde to the start of format in order to trim
+ if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+ return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+ var key = String(f);
+ if(!seenBadFormats[key]) {
+ seenBadFormats[key] = 1;
+ lib.warn('encountered bad format: "' + key + '"');
+ }
+};
+
+lib.noFormat = function(value) {
+ return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+ var fn;
+ try {
+ fn = d3Format(lib.adjustFormat(formatStr));
+ } catch(e) {
+ lib.warnBadFormat(formatStr);
+ return lib.noFormat;
+ }
+
+ return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -1122,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
  if(format) {
  var fmt;
  if(format[0] === ':') {
- fmt = d3locale ? d3locale.numberFormat : d3.format;
+ fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
  value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
  }
 

src/plots/cartesian/dragbox.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -1029,11 +1030,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/set_convert.js

@@ -2,9 +2,10 @@
 
 var d3 = require('@plotly/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;
@@ -953,7 +954,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/geo/geo.js

@@ -643,7 +643,7 @@ function getProjection(geoLayout) {
 
  var projName = constants.projNames[projType];
  // uppercase the first letter and add geo to the start of method name
- projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+ projName = 'geo' + Lib.titleCase(projName);
  var projFn = geo[projName] || geoProjection[projName];
  var projection = projFn();
 

src/plots/plots.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -702,7 +703,18 @@ function getFormatter(formatObj, separators) {
  formatObj.thousands = separators.charAt(1);
 
  return {
- numberFormat: d3.locale(formatObj).numberFormat,
+ numberFormat: function(formatStr) {
+ try {
+ formatStr = formatLocale(formatObj).format(
+ Lib.adjustFormat(formatStr)
+ );
+ } catch(e) {
+ Lib.warnBadFormat(formatStr);
+ return Lib.noFormat;
+ }
+
+ return formatStr;
+ },
  timeFormat: timeFormatLocale(formatObj).utcFormat
  };
 }

src/traces/parcoords/parcoords.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -79,7 +80,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]);
@@ -266,7 +267,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/sankey/plot.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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._;
@@ -192,7 +193,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],
@@ -202,7 +203,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'),
@@ -281,7 +282,7 @@ 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;
 
  gd._fullLayout._calcInverseTransform(gd);
@@ -292,7 +293,7 @@ module.exports = function plot(gd, calcData) {
  x0: scaleX * hoverCenterX0,
  x1: scaleX * hoverCenterX1,
  y: scaleY * 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,

src/traces/table/plot.js

@@ -2,6 +2,8 @@
 
 var c = require('./constants');
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var gup = require('../../lib/gup');
 var Drawing = require('../../components/drawing');
 var svgUtil = require('../../lib/svg_text_utils');
@@ -528,7 +530,7 @@ function populateCellText(cellText, tableControlView, allColumnBlock, gd) {
  var suffix = latex ? '' : gridPick(d.calcdata.cells.suffix, col, row) || '';
  var format = latex ? null : gridPick(d.calcdata.cells.format, col, row) || null;
 
- var prefixSuffixedText = prefix + (format ? d3.format(format)(d.value) : d.value) + suffix;
+ var prefixSuffixedText = prefix + (format ? numberFormat(format)(d.value) : d.value) + suffix;
 
  var hasWrapSplitCharacter;
  d.wrappingNeeded = !d.wrapped && !userBrokenText && !latex && (hasWrapSplitCharacter = hasWrapCharacter(prefixSuffixedText));

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

package.json

@@ -66,7 +66,7 @@
  ]
  },
  "dependencies": {
- "@plotly/d3": "3.7.0",
+ "@plotly/d3": "3.8.0",
  "@plotly/d3-sankey": "0.7.2",
  "@plotly/d3-sankey-circular": "0.33.1",
  "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
  "convex-hull": "^1.0.3",
  "country-regex": "^1.1.0",
  "d3-force": "^1.2.1",
+ "d3-format": "^1.4.5",
  "d3-geo": "^1.12.1",
  "d3-geo-projection": "^2.9.0",
  "d3-hierarchy": "^1.1.9",
  "d3-interpolate": "^1.4.0",
+ "d3-time": "^1.1.0",
  "d3-time-format": "^2.2.3",
  "delaunay-triangulate": "^1.1.6",
  "fast-isnumeric": "^1.1.4",

src/components/drawing/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/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');
 
@@ -275,7 +276,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/rangeselector/get_update_object.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
  var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
  var currentRange = axisLayout.range;
  var base = new Date(axisLayout.r2l(currentRange[1]));
  var step = buttonLayout.step;
+
+ var utcStep = d3Time['utc' + titleCase(step)];
+
  var count = buttonLayout.count;
  var range0;
 
  switch(buttonLayout.stepmode) {
  case 'backward':
- range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+ range0 = axisLayout.l2r(+utcStep.offset(base, -count));
  break;
 
  case 'todate':
- var base2 = d3.time[step].utc.offset(base, -count);
+ var base2 = utcStep.offset(base, -count);
 
- range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+ range0 = axisLayout.l2r(+utcStep.ceil(base2));
  break;
  }
 

src/constants/docs.js

@@ -1,6 +1,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/tree/v1.4.5#d3-format',
  DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/lib/index.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
- _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+ if(
+ !formatStr ||
+ /^\d[.]\df/.test(formatStr) ||
+ /[.]\d%/.test(formatStr)
+ ) return formatStr;
+
+ if(formatStr === '0.f') return '~f';
+ if(/^\d%/.test(formatStr)) return '~%';
+ if(/^\ds/.test(formatStr)) return '~s';
+
+ // try adding tilde to the start of format in order to trim
+ if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+ return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+ var key = String(f);
+ if(!seenBadFormats[key]) {
+ seenBadFormats[key] = 1;
+ lib.warn('encountered bad format: "' + key + '"');
+ }
+};
+
+lib.noFormat = function(value) {
+ return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+ var fn;
+ try {
+ fn = d3Format(lib.adjustFormat(formatStr));
+ } catch(e) {
+ lib.warnBadFormat(formatStr);
+ return lib.noFormat;
+ }
+
+ return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -1122,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
  if(format) {
  var fmt;
  if(format[0] === ':') {
- fmt = d3locale ? d3locale.numberFormat : d3.format;
+ fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
  value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
  }
 

src/plots/cartesian/dragbox.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -1029,11 +1030,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/set_convert.js

@@ -2,9 +2,10 @@
 
 var d3 = require('@plotly/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;
@@ -953,7 +954,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/geo/geo.js

@@ -643,7 +643,7 @@ function getProjection(geoLayout) {
 
  var projName = constants.projNames[projType];
  // uppercase the first letter and add geo to the start of method name
- projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+ projName = 'geo' + Lib.titleCase(projName);
  var projFn = geo[projName] || geoProjection[projName];
  var projection = projFn();
 

src/plots/plots.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -702,7 +703,18 @@ function getFormatter(formatObj, separators) {
  formatObj.thousands = separators.charAt(1);
 
  return {
- numberFormat: d3.locale(formatObj).numberFormat,
+ numberFormat: function(formatStr) {
+ try {
+ formatStr = formatLocale(formatObj).format(
+ Lib.adjustFormat(formatStr)
+ );
+ } catch(e) {
+ Lib.warnBadFormat(formatStr);
+ return Lib.noFormat;
+ }
+
+ return formatStr;
+ },
  timeFormat: timeFormatLocale(formatObj).utcFormat
  };
 }

src/traces/parcoords/parcoords.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -79,7 +80,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]);
@@ -266,7 +267,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/sankey/plot.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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._;
@@ -192,7 +193,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],
@@ -202,7 +203,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'),
@@ -281,7 +282,7 @@ 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;
 
  gd._fullLayout._calcInverseTransform(gd);
@@ -292,7 +293,7 @@ module.exports = function plot(gd, calcData) {
  x0: scaleX * hoverCenterX0,
  x1: scaleX * hoverCenterX1,
  y: scaleY * 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,

src/traces/table/plot.js

@@ -2,6 +2,8 @@
 
 var c = require('./constants');
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var gup = require('../../lib/gup');
 var Drawing = require('../../components/drawing');
 var svgUtil = require('../../lib/svg_text_utils');
@@ -528,7 +530,7 @@ function populateCellText(cellText, tableControlView, allColumnBlock, gd) {
  var suffix = latex ? '' : gridPick(d.calcdata.cells.suffix, col, row) || '';
  var format = latex ? null : gridPick(d.calcdata.cells.format, col, row) || null;
 
- var prefixSuffixedText = prefix + (format ? d3.format(format)(d.value) : d.value) + suffix;
+ var prefixSuffixedText = prefix + (format ? numberFormat(format)(d.value) : d.value) + suffix;
 
  var hasWrapSplitCharacter;
  d.wrappingNeeded = !d.wrapped && !userBrokenText && !latex && (hasWrapSplitCharacter = hasWrapCharacter(prefixSuffixedText));

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

package.json

@@ -66,7 +66,7 @@
  ]
  },
  "dependencies": {
- "@plotly/d3": "3.7.0",
+ "@plotly/d3": "3.8.0",
  "@plotly/d3-sankey": "0.7.2",
  "@plotly/d3-sankey-circular": "0.33.1",
  "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
  "convex-hull": "^1.0.3",
  "country-regex": "^1.1.0",
  "d3-force": "^1.2.1",
+ "d3-format": "^1.4.5",
  "d3-geo": "^1.12.1",
  "d3-geo-projection": "^2.9.0",
  "d3-hierarchy": "^1.1.9",
  "d3-interpolate": "^1.4.0",
+ "d3-time": "^1.1.0",
  "d3-time-format": "^2.2.3",
  "delaunay-triangulate": "^1.1.6",
  "fast-isnumeric": "^1.1.4",

src/components/drawing/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/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');
 
@@ -275,7 +276,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/rangeselector/get_update_object.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
  var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
  var currentRange = axisLayout.range;
  var base = new Date(axisLayout.r2l(currentRange[1]));
  var step = buttonLayout.step;
+
+ var utcStep = d3Time['utc' + titleCase(step)];
+
  var count = buttonLayout.count;
  var range0;
 
  switch(buttonLayout.stepmode) {
  case 'backward':
- range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+ range0 = axisLayout.l2r(+utcStep.offset(base, -count));
  break;
 
  case 'todate':
- var base2 = d3.time[step].utc.offset(base, -count);
+ var base2 = utcStep.offset(base, -count);
 
- range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+ range0 = axisLayout.l2r(+utcStep.ceil(base2));
  break;
  }
 

src/constants/docs.js

@@ -1,6 +1,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/tree/v1.4.5#d3-format',
  DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/lib/index.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
- _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+ if(
+ !formatStr ||
+ /^\d[.]\df/.test(formatStr) ||
+ /[.]\d%/.test(formatStr)
+ ) return formatStr;
+
+ if(formatStr === '0.f') return '~f';
+ if(/^\d%/.test(formatStr)) return '~%';
+ if(/^\ds/.test(formatStr)) return '~s';
+
+ // try adding tilde to the start of format in order to trim
+ if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+ return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+ var key = String(f);
+ if(!seenBadFormats[key]) {
+ seenBadFormats[key] = 1;
+ lib.warn('encountered bad format: "' + key + '"');
+ }
+};
+
+lib.noFormat = function(value) {
+ return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+ var fn;
+ try {
+ fn = d3Format(lib.adjustFormat(formatStr));
+ } catch(e) {
+ lib.warnBadFormat(formatStr);
+ return lib.noFormat;
+ }
+
+ return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -1122,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
  if(format) {
  var fmt;
  if(format[0] === ':') {
- fmt = d3locale ? d3locale.numberFormat : d3.format;
+ fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
  value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
  }
 

src/plots/cartesian/dragbox.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -1029,11 +1030,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/set_convert.js

@@ -2,9 +2,10 @@
 
 var d3 = require('@plotly/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;
@@ -953,7 +954,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/geo/geo.js

@@ -643,7 +643,7 @@ function getProjection(geoLayout) {
 
  var projName = constants.projNames[projType];
  // uppercase the first letter and add geo to the start of method name
- projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+ projName = 'geo' + Lib.titleCase(projName);
  var projFn = geo[projName] || geoProjection[projName];
  var projection = projFn();
 

src/plots/plots.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -702,7 +703,18 @@ function getFormatter(formatObj, separators) {
  formatObj.thousands = separators.charAt(1);
 
  return {
- numberFormat: d3.locale(formatObj).numberFormat,
+ numberFormat: function(formatStr) {
+ try {
+ formatStr = formatLocale(formatObj).format(
+ Lib.adjustFormat(formatStr)
+ );
+ } catch(e) {
+ Lib.warnBadFormat(formatStr);
+ return Lib.noFormat;
+ }
+
+ return formatStr;
+ },
  timeFormat: timeFormatLocale(formatObj).utcFormat
  };
 }

src/traces/parcoords/parcoords.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -79,7 +80,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]);
@@ -266,7 +267,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/sankey/plot.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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._;
@@ -192,7 +193,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],
@@ -202,7 +203,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'),
@@ -281,7 +282,7 @@ 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;
 
  gd._fullLayout._calcInverseTransform(gd);
@@ -292,7 +293,7 @@ module.exports = function plot(gd, calcData) {
  x0: scaleX * hoverCenterX0,
  x1: scaleX * hoverCenterX1,
  y: scaleY * 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,

src/traces/table/plot.js

@@ -2,6 +2,8 @@
 
 var c = require('./constants');
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var gup = require('../../lib/gup');
 var Drawing = require('../../components/drawing');
 var svgUtil = require('../../lib/svg_text_utils');
@@ -528,7 +530,7 @@ function populateCellText(cellText, tableControlView, allColumnBlock, gd) {
  var suffix = latex ? '' : gridPick(d.calcdata.cells.suffix, col, row) || '';
  var format = latex ? null : gridPick(d.calcdata.cells.format, col, row) || null;
 
- var prefixSuffixedText = prefix + (format ? d3.format(format)(d.value) : d.value) + suffix;
+ var prefixSuffixedText = prefix + (format ? numberFormat(format)(d.value) : d.value) + suffix;
 
  var hasWrapSplitCharacter;
  d.wrappingNeeded = !d.wrapped && !userBrokenText && !latex && (hasWrapSplitCharacter = hasWrapCharacter(prefixSuffixedText));

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

package.json

@@ -66,7 +66,7 @@
  ]
  },
  "dependencies": {
- "@plotly/d3": "3.7.0",
+ "@plotly/d3": "3.8.0",
  "@plotly/d3-sankey": "0.7.2",
  "@plotly/d3-sankey-circular": "0.33.1",
  "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
  "convex-hull": "^1.0.3",
  "country-regex": "^1.1.0",
  "d3-force": "^1.2.1",
+ "d3-format": "^1.4.5",
  "d3-geo": "^1.12.1",
  "d3-geo-projection": "^2.9.0",
  "d3-hierarchy": "^1.1.9",
  "d3-interpolate": "^1.4.0",
+ "d3-time": "^1.1.0",
  "d3-time-format": "^2.2.3",
  "delaunay-triangulate": "^1.1.6",
  "fast-isnumeric": "^1.1.4",

src/components/drawing/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/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');
 
@@ -275,7 +276,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/rangeselector/get_update_object.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
  var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
  var currentRange = axisLayout.range;
  var base = new Date(axisLayout.r2l(currentRange[1]));
  var step = buttonLayout.step;
+
+ var utcStep = d3Time['utc' + titleCase(step)];
+
  var count = buttonLayout.count;
  var range0;
 
  switch(buttonLayout.stepmode) {
  case 'backward':
- range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+ range0 = axisLayout.l2r(+utcStep.offset(base, -count));
  break;
 
  case 'todate':
- var base2 = d3.time[step].utc.offset(base, -count);
+ var base2 = utcStep.offset(base, -count);
 
- range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+ range0 = axisLayout.l2r(+utcStep.ceil(base2));
  break;
  }
 

src/constants/docs.js

@@ -1,6 +1,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/tree/v1.4.5#d3-format',
  DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/lib/index.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
- _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+ if(
+ !formatStr ||
+ /^\d[.]\df/.test(formatStr) ||
+ /[.]\d%/.test(formatStr)
+ ) return formatStr;
+
+ if(formatStr === '0.f') return '~f';
+ if(/^\d%/.test(formatStr)) return '~%';
+ if(/^\ds/.test(formatStr)) return '~s';
+
+ // try adding tilde to the start of format in order to trim
+ if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+ return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+ var key = String(f);
+ if(!seenBadFormats[key]) {
+ seenBadFormats[key] = 1;
+ lib.warn('encountered bad format: "' + key + '"');
+ }
+};
+
+lib.noFormat = function(value) {
+ return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+ var fn;
+ try {
+ fn = d3Format(lib.adjustFormat(formatStr));
+ } catch(e) {
+ lib.warnBadFormat(formatStr);
+ return lib.noFormat;
+ }
+
+ return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -1122,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
  if(format) {
  var fmt;
  if(format[0] === ':') {
- fmt = d3locale ? d3locale.numberFormat : d3.format;
+ fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
  value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
  }
 

src/plots/cartesian/dragbox.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -1029,11 +1030,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/set_convert.js

@@ -2,9 +2,10 @@
 
 var d3 = require('@plotly/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;
@@ -953,7 +954,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/geo/geo.js

@@ -643,7 +643,7 @@ function getProjection(geoLayout) {
 
  var projName = constants.projNames[projType];
  // uppercase the first letter and add geo to the start of method name
- projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+ projName = 'geo' + Lib.titleCase(projName);
  var projFn = geo[projName] || geoProjection[projName];
  var projection = projFn();
 

src/plots/plots.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -702,7 +703,18 @@ function getFormatter(formatObj, separators) {
  formatObj.thousands = separators.charAt(1);
 
  return {
- numberFormat: d3.locale(formatObj).numberFormat,
+ numberFormat: function(formatStr) {
+ try {
+ formatStr = formatLocale(formatObj).format(
+ Lib.adjustFormat(formatStr)
+ );
+ } catch(e) {
+ Lib.warnBadFormat(formatStr);
+ return Lib.noFormat;
+ }
+
+ return formatStr;
+ },
  timeFormat: timeFormatLocale(formatObj).utcFormat
  };
 }

src/traces/parcoords/parcoords.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -79,7 +80,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]);
@@ -266,7 +267,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/sankey/plot.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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._;
@@ -192,7 +193,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],
@@ -202,7 +203,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'),
@@ -281,7 +282,7 @@ 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;
 
  gd._fullLayout._calcInverseTransform(gd);
@@ -292,7 +293,7 @@ module.exports = function plot(gd, calcData) {
  x0: scaleX * hoverCenterX0,
  x1: scaleX * hoverCenterX1,
  y: scaleY * 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,

src/traces/table/plot.js

@@ -2,6 +2,8 @@
 
 var c = require('./constants');
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var gup = require('../../lib/gup');
 var Drawing = require('../../components/drawing');
 var svgUtil = require('../../lib/svg_text_utils');
@@ -528,7 +530,7 @@ function populateCellText(cellText, tableControlView, allColumnBlock, gd) {
  var suffix = latex ? '' : gridPick(d.calcdata.cells.suffix, col, row) || '';
  var format = latex ? null : gridPick(d.calcdata.cells.format, col, row) || null;
 
- var prefixSuffixedText = prefix + (format ? d3.format(format)(d.value) : d.value) + suffix;
+ var prefixSuffixedText = prefix + (format ? numberFormat(format)(d.value) : d.value) + suffix;
 
  var hasWrapSplitCharacter;
  d.wrappingNeeded = !d.wrapped && !userBrokenText && !latex && (hasWrapSplitCharacter = hasWrapCharacter(prefixSuffixedText));

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

package.json

@@ -66,7 +66,7 @@
  ]
  },
  "dependencies": {
- "@plotly/d3": "3.7.0",
+ "@plotly/d3": "3.8.0",
  "@plotly/d3-sankey": "0.7.2",
  "@plotly/d3-sankey-circular": "0.33.1",
  "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
  "convex-hull": "^1.0.3",
  "country-regex": "^1.1.0",
  "d3-force": "^1.2.1",
+ "d3-format": "^1.4.5",
  "d3-geo": "^1.12.1",
  "d3-geo-projection": "^2.9.0",
  "d3-hierarchy": "^1.1.9",
  "d3-interpolate": "^1.4.0",
+ "d3-time": "^1.1.0",
  "d3-time-format": "^2.2.3",
  "delaunay-triangulate": "^1.1.6",
  "fast-isnumeric": "^1.1.4",

src/components/drawing/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/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');
 
@@ -275,7 +276,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/rangeselector/get_update_object.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
  var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
  var currentRange = axisLayout.range;
  var base = new Date(axisLayout.r2l(currentRange[1]));
  var step = buttonLayout.step;
+
+ var utcStep = d3Time['utc' + titleCase(step)];
+
  var count = buttonLayout.count;
  var range0;
 
  switch(buttonLayout.stepmode) {
  case 'backward':
- range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+ range0 = axisLayout.l2r(+utcStep.offset(base, -count));
  break;
 
  case 'todate':
- var base2 = d3.time[step].utc.offset(base, -count);
+ var base2 = utcStep.offset(base, -count);
 
- range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+ range0 = axisLayout.l2r(+utcStep.ceil(base2));
  break;
  }
 

src/constants/docs.js

@@ -1,6 +1,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/tree/v1.4.5#d3-format',
  DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/lib/index.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
- _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+ if(
+ !formatStr ||
+ /^\d[.]\df/.test(formatStr) ||
+ /[.]\d%/.test(formatStr)
+ ) return formatStr;
+
+ if(formatStr === '0.f') return '~f';
+ if(/^\d%/.test(formatStr)) return '~%';
+ if(/^\ds/.test(formatStr)) return '~s';
+
+ // try adding tilde to the start of format in order to trim
+ if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+ return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+ var key = String(f);
+ if(!seenBadFormats[key]) {
+ seenBadFormats[key] = 1;
+ lib.warn('encountered bad format: "' + key + '"');
+ }
+};
+
+lib.noFormat = function(value) {
+ return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+ var fn;
+ try {
+ fn = d3Format(lib.adjustFormat(formatStr));
+ } catch(e) {
+ lib.warnBadFormat(formatStr);
+ return lib.noFormat;
+ }
+
+ return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -1122,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
  if(format) {
  var fmt;
  if(format[0] === ':') {
- fmt = d3locale ? d3locale.numberFormat : d3.format;
+ fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
  value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
  }
 

src/plots/cartesian/dragbox.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -1029,11 +1030,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/set_convert.js

@@ -2,9 +2,10 @@
 
 var d3 = require('@plotly/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;
@@ -953,7 +954,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/geo/geo.js

@@ -643,7 +643,7 @@ function getProjection(geoLayout) {
 
  var projName = constants.projNames[projType];
  // uppercase the first letter and add geo to the start of method name
- projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+ projName = 'geo' + Lib.titleCase(projName);
  var projFn = geo[projName] || geoProjection[projName];
  var projection = projFn();
 

src/plots/plots.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -702,7 +703,18 @@ function getFormatter(formatObj, separators) {
  formatObj.thousands = separators.charAt(1);
 
  return {
- numberFormat: d3.locale(formatObj).numberFormat,
+ numberFormat: function(formatStr) {
+ try {
+ formatStr = formatLocale(formatObj).format(
+ Lib.adjustFormat(formatStr)
+ );
+ } catch(e) {
+ Lib.warnBadFormat(formatStr);
+ return Lib.noFormat;
+ }
+
+ return formatStr;
+ },
  timeFormat: timeFormatLocale(formatObj).utcFormat
  };
 }

src/traces/parcoords/parcoords.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -79,7 +80,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]);
@@ -266,7 +267,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/sankey/plot.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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._;
@@ -192,7 +193,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],
@@ -202,7 +203,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'),
@@ -281,7 +282,7 @@ 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;
 
  gd._fullLayout._calcInverseTransform(gd);
@@ -292,7 +293,7 @@ module.exports = function plot(gd, calcData) {
  x0: scaleX * hoverCenterX0,
  x1: scaleX * hoverCenterX1,
  y: scaleY * 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,

src/traces/table/plot.js

@@ -2,6 +2,8 @@
 
 var c = require('./constants');
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var gup = require('../../lib/gup');
 var Drawing = require('../../components/drawing');
 var svgUtil = require('../../lib/svg_text_utils');
@@ -528,7 +530,7 @@ function populateCellText(cellText, tableControlView, allColumnBlock, gd) {
  var suffix = latex ? '' : gridPick(d.calcdata.cells.suffix, col, row) || '';
  var format = latex ? null : gridPick(d.calcdata.cells.format, col, row) || null;
 
- var prefixSuffixedText = prefix + (format ? d3.format(format)(d.value) : d.value) + suffix;
+ var prefixSuffixedText = prefix + (format ? numberFormat(format)(d.value) : d.value) + suffix;
 
  var hasWrapSplitCharacter;
  d.wrappingNeeded = !d.wrapped && !userBrokenText && !latex && (hasWrapSplitCharacter = hasWrapCharacter(prefixSuffixedText));

draftlogs/5615_add.md

@@ -0,0 +1 @@
+ - Add new formatting options by replacing `d3.format` method with more recent `d3-format` module [[#5615](https://github.com/plotly/plotly.js/pull/5615)]

package.json

@@ -66,7 +66,7 @@
  ]
  },
  "dependencies": {
- "@plotly/d3": "3.7.0",
+ "@plotly/d3": "3.8.0",
  "@plotly/d3-sankey": "0.7.2",
  "@plotly/d3-sankey-circular": "0.33.1",
  "@plotly/point-cluster": "^3.1.9",
@@ -82,10 +82,12 @@
  "convex-hull": "^1.0.3",
  "country-regex": "^1.1.0",
  "d3-force": "^1.2.1",
+ "d3-format": "^1.4.5",
  "d3-geo": "^1.12.1",
  "d3-geo-projection": "^2.9.0",
  "d3-hierarchy": "^1.1.9",
  "d3-interpolate": "^1.4.0",
+ "d3-time": "^1.1.0",
  "d3-time-format": "^2.2.3",
  "delaunay-triangulate": "^1.1.6",
  "fast-isnumeric": "^1.1.4",

src/components/drawing/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
 var d3 = require('@plotly/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');
 
@@ -275,7 +276,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/rangeselector/get_update_object.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3Time = require('d3-time');
+var titleCase = require('../../lib').titleCase;
 
 module.exports = function getUpdateObject(axisLayout, buttonLayout) {
  var axName = axisLayout._name;
@@ -22,18 +23,21 @@ function getXRange(axisLayout, buttonLayout) {
  var currentRange = axisLayout.range;
  var base = new Date(axisLayout.r2l(currentRange[1]));
  var step = buttonLayout.step;
+
+ var utcStep = d3Time['utc' + titleCase(step)];
+
  var count = buttonLayout.count;
  var range0;
 
  switch(buttonLayout.stepmode) {
  case 'backward':
- range0 = axisLayout.l2r(+d3.time[step].utc.offset(base, -count));
+ range0 = axisLayout.l2r(+utcStep.offset(base, -count));
  break;
 
  case 'todate':
- var base2 = d3.time[step].utc.offset(base, -count);
+ var base2 = utcStep.offset(base, -count);
 
- range0 = axisLayout.l2r(+d3.time[step].utc.ceil(base2));
+ range0 = axisLayout.l2r(+utcStep.ceil(base2));
  break;
  }
 

src/constants/docs.js

@@ -1,6 +1,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/tree/v1.4.5#d3-format',
  DATE_FORMAT_LINK: 'https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format'
 };

src/lib/index.js

@@ -2,15 +2,56 @@
 
 var d3 = require('@plotly/d3');
 var utcFormat = require('d3-time-format').utcFormat;
+var d3Format = require('d3-format').format;
 var isNumeric = require('fast-isnumeric');
 
 var numConstants = require('../constants/numerical');
 var MAX_SAFE = numConstants.FP_SAFE;
 var MIN_SAFE = -MAX_SAFE;
 var BADNUM = numConstants.BADNUM;
 
-var lib = module.exports = {
- _numberFormat: d3.format // simply to test d3.format before switching to d3-format
+var lib = module.exports = {};
+
+lib.adjustFormat = function adjustFormat(formatStr) {
+ if(
+ !formatStr ||
+ /^\d[.]\df/.test(formatStr) ||
+ /[.]\d%/.test(formatStr)
+ ) return formatStr;
+
+ if(formatStr === '0.f') return '~f';
+ if(/^\d%/.test(formatStr)) return '~%';
+ if(/^\ds/.test(formatStr)) return '~s';
+
+ // try adding tilde to the start of format in order to trim
+ if(!(/^[~,.0$]/.test(formatStr)) && /[&fps]/.test(formatStr)) return '~' + formatStr;
+
+ return formatStr;
+};
+
+var seenBadFormats = {};
+lib.warnBadFormat = function(f) {
+ var key = String(f);
+ if(!seenBadFormats[key]) {
+ seenBadFormats[key] = 1;
+ lib.warn('encountered bad format: "' + key + '"');
+ }
+};
+
+lib.noFormat = function(value) {
+ return String(value);
+};
+
+lib.numberFormat = function(formatStr) {
+ var fn;
+ try {
+ fn = d3Format(lib.adjustFormat(formatStr));
+ } catch(e) {
+ lib.warnBadFormat(formatStr);
+ return lib.noFormat;
+ }
+
+ return fn;
 };
 
 lib.nestedProperty = require('./nested_property');
@@ -1122,7 +1163,7 @@ function templateFormatString(string, labels, d3locale) {
  if(format) {
  var fmt;
  if(format[0] === ':') {
- fmt = d3locale ? d3locale.numberFormat : d3.format;
+ fmt = d3locale ? d3locale.numberFormat : lib.numberFormat;
  value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
  }
 

src/plots/cartesian/dragbox.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -1029,11 +1030,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/set_convert.js

@@ -2,9 +2,10 @@
 
 var d3 = require('@plotly/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;
@@ -953,7 +954,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/geo/geo.js

@@ -643,7 +643,7 @@ function getProjection(geoLayout) {
 
  var projName = constants.projNames[projType];
  // uppercase the first letter and add geo to the start of method name
- projName = 'geo' + projName.charAt(0).toUpperCase() + projName.slice(1);
+ projName = 'geo' + Lib.titleCase(projName);
  var projFn = geo[projName] || geoProjection[projName];
  var projection = projFn();
 

src/plots/plots.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var timeFormatLocale = require('d3-time-format').timeFormatLocale;
+var formatLocale = require('d3-format').formatLocale;
 var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../registry');
@@ -702,7 +703,18 @@ function getFormatter(formatObj, separators) {
  formatObj.thousands = separators.charAt(1);
 
  return {
- numberFormat: d3.locale(formatObj).numberFormat,
+ numberFormat: function(formatStr) {
+ try {
+ formatStr = formatLocale(formatObj).format(
+ Lib.adjustFormat(formatStr)
+ );
+ } catch(e) {
+ Lib.warnBadFormat(formatStr);
+ return Lib.noFormat;
+ }
+
+ return formatStr;
+ },
  timeFormat: timeFormatLocale(formatObj).utcFormat
  };
 }

src/traces/parcoords/parcoords.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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');
@@ -79,7 +80,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]);
@@ -266,7 +267,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/sankey/plot.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var d3 = require('@plotly/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._;
@@ -192,7 +193,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],
@@ -202,7 +203,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'),
@@ -281,7 +282,7 @@ 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;
 
  gd._fullLayout._calcInverseTransform(gd);
@@ -292,7 +293,7 @@ module.exports = function plot(gd, calcData) {
  x0: scaleX * hoverCenterX0,
  x1: scaleX * hoverCenterX1,
  y: scaleY * 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,

src/traces/table/plot.js

@@ -2,6 +2,8 @@
 
 var c = require('./constants');
 var d3 = require('@plotly/d3');
+var Lib = require('../../lib');
+var numberFormat = Lib.numberFormat;
 var gup = require('../../lib/gup');
 var Drawing = require('../../components/drawing');
 var svgUtil = require('../../lib/svg_text_utils');
@@ -528,7 +530,7 @@ function populateCellText(cellText, tableControlView, allColumnBlock, gd) {
  var suffix = latex ? '' : gridPick(d.calcdata.cells.suffix, col, row) || '';
  var format = latex ? null : gridPick(d.calcdata.cells.format, col, row) || null;
 
- var prefixSuffixedText = prefix + (format ? d3.format(format)(d.value) : d.value) + suffix;
+ var prefixSuffixedText = prefix + (format ? numberFormat(format)(d.value) : d.value) + suffix;
 
  var hasWrapSplitCharacter;
  d.wrappingNeeded = !d.wrapped && !userBrokenText && !latex && (hasWrapSplitCharacter = hasWrapCharacter(prefixSuffixedText));