add 'tickformatstops'

Author: yauhen-kavaliou

src/components/colorbar/attributes.js

@@ -163,6 +163,7 @@ module.exports = {
     tickfont: axesAttrs.tickfont,
     tickangle: axesAttrs.tickangle,
     tickformat: axesAttrs.tickformat,
+    tickformatstops: axesAttrs.tickformatstops,
     tickprefix: axesAttrs.tickprefix,
     showtickprefix: axesAttrs.showtickprefix,
     ticksuffix: axesAttrs.ticksuffix,

src/plots/cartesian/axes.js

@@ -1241,7 +1241,7 @@ function tickTextObj(ax, x, text) {
 
 function formatDate(ax, out, hover, extraPrecision) {
     var tr = ax._tickround,
-        fmt = (hover && ax.hoverformat) || ax.tickformat;
+        fmt = (hover && ax.hoverformat) || axes.getTickFormat(ax);
 
     if(extraPrecision) {
         // second or sub-second precision: extra always shows max digits.
@@ -1406,7 +1406,7 @@ function numFormat(v, ax, fmtoverride, hover) {
         tickRound = ax._tickround,
         exponentFormat = fmtoverride || ax.exponentformat || 'B',
         exponent = ax._tickexponent,
-        tickformat = ax.tickformat,
+        tickformat = axes.getTickFormat(ax),
         separatethousands = ax.separatethousands;
 
     // special case for hover: set exponent just for this value, and
@@ -1507,6 +1507,59 @@ function numFormat(v, ax, fmtoverride, hover) {
     return v;
 }
 
+axes.getTickFormat = function(ax) {
+    function convertToMs(dtick) {
+        return typeof dtick !== 'string' ? dtick : Number(dtick.replace('M', '') * ONEAVGMONTH);
+    }
+    function isProperStop(dtick, range, convert) {
+        var convertFn = convert || function(x) { return x;};
+        var leftDtick = range[0];
+        var rightDtick = range[1];
+        return (!leftDtick || convertFn(leftDtick) <= convertFn(dtick)) &&
+               (!rightDtick || convertFn(rightDtick) >= convertFn(dtick));
+    }
+    function getRangeWidth(range, convert) {
+        var convertFn = convert || function(x) { return x;};
+        var left = range[0] || 0;
+        var right = range[1] || 0;
+        return Math.abs(convertFn(right) - convertFn(left));
+    }
+
+    var tickstop;
+    if(ax.tickformatstops && ax.tickformatstops.length > 0) {
+        switch(ax.type) {
+            case 'date': {
+                tickstop = ax.tickformatstops.reduce(function(acc, stop) {
+                    if(!isProperStop(ax.dtick, stop.dtickrange, convertToMs)) {
+                        return acc;
+                    }
+                    if(!acc) {
+                        return stop;
+                    } else {
+                        return getRangeWidth(stop.dtickrange, convertToMs) > getRangeWidth(acc.dtickrange, convertToMs) ? stop : acc;
+                    }
+                }, null);
+                break;
+            }
+            case 'linear': {
+                tickstop = ax.tickformatstops.reduce(function(acc, stop) {
+                    if(!isProperStop(ax.dtick, stop.dtickrange)) {
+                        return acc;
+                    }
+                    if(!acc) {
+                        return stop;
+                    } else {
+                        return getRangeWidth(stop.dtickrange) > getRangeWidth(acc.dtickrange) ? stop : acc;
+                    }
+                }, null);
+                break;
+            }
+            default:
+        }
+    }
+    return tickstop ? tickstop.value : ax.tickformat;
+};
+
 axes.subplotMatch = /^x([0-9]*)y([0-9]*)$/;
 
 // getSubplots - extract all combinations of axes we need to make plots for

src/plots/cartesian/layout_attributes.js

@@ -448,6 +448,18 @@ module.exports = {
             '*%H~%M~%S.%2f* would display *09~15~23.46*'
         ].join(' ')
     },
+    tickformatstops: {
+        valType: 'any',
+        arrayOk: true,
+        role: 'style',
+        description: [
+            'Set rules for customizing tickformat on different zoom levels for *date* and',
+            '*linear axis types. You can specify these rules in following way',
+            '[{dtickrange: [*min*, *max*], value: *format*}]. Where *min*, *max* - dtick values',
+            'which describe some zoom level, it is possible to omit *min* or *max* value by passing',
+            '*null*. *format* - string, exactly as *tickformat*'
+        ].join(' ')
+    },
     hoverformat: {
         valType: 'string',
         dflt: '',

src/plots/cartesian/tick_label_defaults.js

@@ -40,6 +40,7 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe
 
         if(axType !== 'category') {
             var tickFormat = coerce('tickformat');
+            coerce('tickformatstops');
             if(!tickFormat && axType !== 'date') {
                 coerce('showexponent', showAttrDflt);
                 coerce('exponentformat');

src/plots/gl3d/layout/axis_attributes.js

@@ -100,6 +100,7 @@ module.exports = {
     exponentformat: axesAttrs.exponentformat,
     separatethousands: axesAttrs.separatethousands,
     tickformat: axesAttrs.tickformat,
+    tickformatstops: axesAttrs.tickformatstops,
     hoverformat: axesAttrs.hoverformat,
     // lines and grids
     showline: axesAttrs.showline,

src/plots/ternary/layout/axis_attributes.js

@@ -39,6 +39,7 @@ module.exports = {
     tickfont: axesAttrs.tickfont,
     tickangle: axesAttrs.tickangle,
     tickformat: axesAttrs.tickformat,
+    tickformatstops: axesAttrs.tickformatstops,
     hoverformat: axesAttrs.hoverformat,
     // lines and grids
     showline: extendFlat({}, axesAttrs.showline, {dflt: true}),

src/traces/carpet/axis_attributes.js

@@ -265,6 +265,18 @@ module.exports = {
             '*%H~%M~%S.%2f* would display *09~15~23.46*'
         ].join(' ')
     },
+    tickformatstops: {
+        valType: 'any',
+        arrayOk: true,
+        role: 'style',
+        description: [
+            'Set rules for customizing tickformat on different zoom levels for *date* and',
+            '*linear axis types. You can specify these rules in following way',
+            '[{dtickrange: [*min*, *max*], value: *format*}]. Where *min*, *max* - dtick values',
+            'which describe some zoom level, it is possible to omit *min* or *max* value by passing',
+            '*null*. *format* - string, exactly as *tickformat*'
+        ].join(' ')
+    },
     categoryorder: {
         valType: 'enumerated',
         values: [

tasks/util/strict_d3.js

@@ -18,7 +18,7 @@ module.exports = transformTools.makeRequireTransform('requireTransform',
         var pathOut;
 
         if(pathIn === 'd3' && opts.file !== pathToStrictD3Module) {
-            pathOut = 'require(\'' + pathToStrictD3Module + '\')';
+            pathOut = 'require(\'' + pathToStrictD3Module.replace(/\\/g, '/') + '\')';
         }
 
         if(pathOut) return cb(null, pathOut);