add 'tickformatstops'

src/components/colorbar/attributes.js

@@ -166,6 +166,7 @@ module.exports = overrideAll({
     }),
     tickangle: axesAttrs.tickangle,
     tickformat: axesAttrs.tickformat,
+    tickformatstops: axesAttrs.tickformatstops,
     tickprefix: axesAttrs.tickprefix,
     showtickprefix: axesAttrs.showtickprefix,
     ticksuffix: axesAttrs.ticksuffix,

src/plots/cartesian/axes.js

@@ -1232,7 +1232,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.
@@ -1288,7 +1288,8 @@ function formatDate(ax, out, hover, extraPrecision) {
 
 function formatLog(ax, out, hover, extraPrecision, hideexp) {
     var dtick = ax.dtick,
-        x = out.x;
+        x = out.x,
+        tickformat = ax.tickformat;
 
     if(hideexp === 'never') {
         // If this is a hover label, then we must *never* hide the exponent
@@ -1302,7 +1303,7 @@ function formatLog(ax, out, hover, extraPrecision, hideexp) {
 
     if(extraPrecision && ((typeof dtick !== 'string') || dtick.charAt(0) !== 'L')) dtick = 'L3';
 
-    if(ax.tickformat || (typeof dtick === 'string' && dtick.charAt(0) === 'L')) {
+    if(tickformat || (typeof dtick === 'string' && dtick.charAt(0) === 'L')) {
         out.text = numFormat(Math.pow(10, x), ax, hideexp, extraPrecision);
     }
     else if(isNumeric(dtick) || ((dtick.charAt(0) === 'D') && (Lib.mod(x + 0.01, 1) < 0.1))) {
@@ -1397,7 +1398,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
@@ -1498,6 +1499,76 @@ function numFormat(v, ax, fmtoverride, hover) {
     return v;
 }
 
+axes.getTickFormat = function(ax) {
+    var i;
+
+    function convertToMs(dtick) {
+        return typeof dtick !== 'string' ? dtick : Number(dtick.replace('M', '')) * ONEAVGMONTH;
+    }
+
+    function compareLogTicks(left, right) {
+        var priority = ['L', 'D'];
+        if(typeof left === typeof right) {
+            if(typeof left === 'number') {
+                return left - right;
+            } else {
+                var leftPriority = priority.indexOf(left.charAt(0));
+                var rightPriority = priority.indexOf(right.charAt(0));
+                if(leftPriority === rightPriority) {
+                    return Number(left.replace(/(L|D)/g, '')) - Number(right.replace(/(L|D)/g, ''));
+                } else {
+                    return leftPriority - rightPriority;
+                }
+            }
+        } else {
+            return typeof left === 'number' ? 1 : -1;
+        }
+    }
+
+    function isProperStop(dtick, range, convert) {
+        var convertFn = convert || function(x) { return x;};
+        var leftDtick = range[0];
+        var rightDtick = range[1];
+        return ((!leftDtick && typeof leftDtick !== 'number') || convertFn(leftDtick) <= convertFn(dtick)) &&
+               ((!rightDtick && typeof rightDtick !== 'number') || convertFn(rightDtick) >= convertFn(dtick));
+    }
+
+    function isProperLogStop(dtick, range) {
+        var isLeftDtickNull = range[0] === null;
+        var isRightDtickNull = range[1] === null;
+        var isDtickInRangeLeft = compareLogTicks(dtick, range[0]) >= 0;
+        var isDtickInRangeRight = compareLogTicks(dtick, range[1]) <= 0;
+        return (isLeftDtickNull || isDtickInRangeLeft) && (isRightDtickNull || isDtickInRangeRight);
+    }
+
+    var tickstop;
+    if(ax.tickformatstops && ax.tickformatstops.length > 0) {
+        switch(ax.type) {
+            case 'date':
+            case 'linear': {
+                for(i = 0; i < ax.tickformatstops.length; i++) {
+                    if(isProperStop(ax.dtick, ax.tickformatstops[i].dtickrange, convertToMs)) {
+                        tickstop = ax.tickformatstops[i];
+                        break;
+                    }
+                }
+                break;
+            }
+            case 'log': {
+                for(i = 0; i < ax.tickformatstops.length; i++) {
+                    if(isProperLogStop(ax.dtick, ax.tickformatstops[i].dtickrange)) {
+                        tickstop = ax.tickformatstops[i];
+                        break;
+                    }
+                }
+                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

@@ -492,6 +492,34 @@ module.exports = {
             '*%H~%M~%S.%2f* would display *09~15~23.46*'
         ].join(' ')
     },
+    tickformatstops: {
+        _isLinkedToArray: 'tickformatstop',
+
+        dtickrange: {
+            valType: 'info_array',
+            role: 'info',
+            items: [
+                {valType: 'any', editType: 'ticks'},
+                {valType: 'any', editType: 'ticks'}
+            ],
+            editType: 'ticks',
+            description: [
+                'range [*min*, *max*], where *min*, *max* - dtick values',
+                'which describe some zoom level, it is possible to omit *min*',
+                'or *max* value by passing *null*'
+            ].join(' ')
+        },
+        value: {
+            valType: 'string',
+            dflt: '',
+            role: 'style',
+            editType: 'ticks',
+            description: [
+                'string - dtickformat for described zoom level, the same as *tickformat*'
+            ].join(' ')
+        },
+        editType: 'ticks'
+    },
     hoverformat: {
         valType: 'string',
         dflt: '',

src/plots/cartesian/tick_label_defaults.js

@@ -10,7 +10,7 @@
 'use strict';
 
 var Lib = require('../../lib');
-
+var layoutAttributes = require('./layout_attributes');
 
 /**
  * options: inherits font, outerTicks, noHover from axes.handleAxisDefaults
@@ -40,6 +40,7 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe
 
         if(axType !== 'category') {
             var tickFormat = coerce('tickformat');
+            tickformatstopsDefaults(containerIn, containerOut);
             if(!tickFormat && axType !== 'date') {
                 coerce('showexponent', showAttrDflt);
                 coerce('exponentformat');
@@ -80,3 +81,26 @@ function getShowAttrDflt(containerIn) {
         return containerIn[showAttrs[0]];
     }
 }
+
+function tickformatstopsDefaults(tickformatIn, tickformatOut) {
+    var valuesIn = tickformatIn.tickformatstops;
+    var valuesOut = tickformatOut.tickformatstops = [];
+
+    if(!Array.isArray(valuesIn)) return;
+
+    var valueIn, valueOut;
+
+    function coerce(attr, dflt) {
+        return Lib.coerce(valueIn, valueOut, layoutAttributes.tickformatstops, attr, dflt);
+    }
+
+    for(var i = 0; i < valuesIn.length; i++) {
+        valueIn = valuesIn[i];
+        valueOut = {};
+
+        coerce('dtickrange');
+        coerce('value');
+
+        valuesOut.push(valueOut);
+    }
+}

src/plots/gl3d/layout/axis_attributes.js

@@ -101,6 +101,7 @@ module.exports = overrideAll({
     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

@@ -10,6 +10,8 @@
 
 var fontAttrs = require('../../plots/font_attributes');
 var colorAttrs = require('../../components/color/attributes');
+var axesAttrs = require('../../plots/cartesian/layout_attributes');
+var overrideAll = require('../../plot_api/edit_types').overrideAll;
 
 module.exports = {
     color: {
@@ -290,6 +292,7 @@ module.exports = {
             '*%H~%M~%S.%2f* would display *09~15~23.46*'
         ].join(' ')
     },
+    tickformatstops: overrideAll(axesAttrs.tickformatstops, 'calc', 'from-root'),
     categoryorder: {
         valType: 'enumerated',
         values: [

tasks/util/strict_d3.js

@@ -6,7 +6,6 @@ var pathToStrictD3Module = path.join(
     constants.pathToImageTest,
     'strict-d3.js'
 );
-
 /**
  * Transform `require('d3')` expressions to `require(/path/to/strict-d3.js)`
  */
@@ -18,6 +17,8 @@ module.exports = transformTools.makeRequireTransform('requireTransform',
         var pathOut;
 
         if(pathIn === 'd3' && opts.file !== pathToStrictD3Module) {
+            // JSON.stringify: fix npm-scripts for windows users, for whom
+            // path has \ in it, without stringify that turns into control chars.
             pathOut = 'require(' + JSON.stringify(pathToStrictD3Module) + ')';
         }
 

test/image/mocks/tickformatstops.json

@@ -0,0 +1,46 @@
+{
+    "data": [
+        {
+            "x": ["2005-01","2005-02","2005-03","2005-04","2005-05","2005-06","2005-07"],
+            "y": [-20,10,-5,0,5,-10,20]
+        }
+    ],
+    "layout": {
+        "xaxis": {
+            "tickformatstops": [
+                {
+                    "dtickrange": [null, 1000],
+                    "value": "%H:%M:%S.%L ms"
+                },
+                {
+                    "dtickrange": [1000, 60000],
+                    "value": "%H:%M:%S s"
+                },
+                {
+                    "dtickrange": [60000, 3600000],
+                    "value": "%H:%M m"
+                },
+                {
+                    "dtickrange": [3600000, 86400000],
+                    "value": "%H:%M h"
+                },
+                {
+                    "dtickrange": [86400000, 604800000],
+                    "value": "%e. %b d"
+                },
+                {
+                    "dtickrange": [604800000, "M1"],
+                    "value": "%e. %b w"
+                },
+                {
+                    "dtickrange": ["M1", "M12"],
+                    "value": "%b '%y M"
+                },
+                {
+                    "dtickrange": ["M12", null],
+                    "value": "%Y Y"
+                }
+            ]
+        }
+    }
+}