Merge pull request #6088 from plotly/ticklabeljump

Implement `ticklabelstep` on 2D axes & colorbars

Author: archmoj

draftlogs/6088_add.md

@@ -0,0 +1 @@
+ - Implement `ticklabelstep` on 2D axes & colorbars [[#6088](https://github.com/plotly/plotly.js/pull/6088)]

src/components/colorbar/attributes.js

@@ -166,6 +166,7 @@ module.exports = overrideAll({
     ticklen: axesAttrs.ticklen,
     tickwidth: axesAttrs.tickwidth,
     tickcolor: axesAttrs.tickcolor,
+    ticklabelstep: axesAttrs.ticklabelstep,
     showticklabels: axesAttrs.showticklabels,
     tickfont: fontAttrs({
         description: 'Sets the color bar\'s tick label font'

src/components/colorbar/draw.js

@@ -933,6 +933,7 @@ function mockColorBarAxis(gd, opts, zrange) {
         showticklabels: opts.showticklabels,
         ticklabelposition: opts.ticklabelposition,
         ticklabeloverflow: opts.ticklabeloverflow,
+        ticklabelstep: opts.ticklabelstep,
         tickfont: opts.tickfont,
         tickangle: opts.tickangle,
         tickformat: opts.tickformat,

src/plots/cartesian/axes.js

@@ -803,7 +803,8 @@ axes.calcTicks = function calcTicks(ax, opts) {
     var minRange = Math.min(rng[0], rng[1]);
     var maxRange = Math.max(rng[0], rng[1]);
 
-    var isDLog = (ax.type === 'log') && !(isNumeric(ax.dtick) || ax.dtick.charAt(0) === 'L');
+    var numDtick = isNumeric(ax.dtick);
+    var isDLog = (ax.type === 'log') && !(numDtick || ax.dtick.charAt(0) === 'L');
     var isPeriod = ax.ticklabelmode === 'period';
 
     // find the first tick
@@ -834,13 +835,36 @@ axes.calcTicks = function calcTicks(ax, opts) {
         x = axes.tickIncrement(x, ax.dtick, !axrev, ax.calendar);
     }
 
+    var ticklabelstep = ax.ticklabelstep;
+
     var maxTicks = Math.max(1000, ax._length || 0);
     var tickVals = [];
     var xPrevious = null;
+
+    var dTick;
+    if(numDtick) {
+        dTick = ax.dtick;
+    } else {
+        if(ax.type === 'date') {
+            if(typeof ax.dtick === 'string' && ax.dtick.charAt(0) === 'M') {
+                dTick = ONEAVGMONTH * ax.dtick.substring(1);
+            }
+        } else {
+            dTick = ax._roughDTick;
+        }
+    }
+
+    var id = Math.round((
+        ax.r2l(x) -
+        ax.r2l(ax.tick0)
+    ) / dTick) - 1;
+
     for(;
         (axrev) ? (x >= endTick) : (x <= endTick);
         x = axes.tickIncrement(x, ax.dtick, axrev, ax.calendar)
     ) {
+        id++;
+
         if(ax.rangebreaks) {
             if(!axrev) {
                 if(x < startTick) continue;
@@ -858,10 +882,16 @@ axes.calcTicks = function calcTicks(ax, opts) {
             minor = true;
         }
 
-        tickVals.push({
+        var obj = {
             minor: minor,
             value: x
-        });
+        };
+
+        if(ticklabelstep > 1 && id % ticklabelstep) {
+            obj.skipLabel = true;
+        }
+
+        tickVals.push(obj);
     }
 
     if(isPeriod) positionPeriodTicks(tickVals, ax, ax._definedDelta);
@@ -914,12 +944,20 @@ axes.calcTicks = function calcTicks(ax, opts) {
     ax._prevDateHead = '';
     ax._inCalcTicks = true;
 
+    var lastVisibleHead;
+    var hideLabel = function(tick) {
+        tick.text = ' '; // don't use an empty string here which can confuse automargin (issue 5132)
+        ax._prevDateHead = lastVisibleHead;
+    };
+
     var ticksOut = [];
     var t, p;
     for(i = 0; i < tickVals.length; i++) {
         var _minor = tickVals[i].minor;
         var _value = tickVals[i].value;
 
+        lastVisibleHead = ax._prevDateHead;
+
         t = axes.tickText(
             ax,
             _value,
@@ -934,11 +972,14 @@ axes.calcTicks = function calcTicks(ax, opts) {
                 if(p > maxRange) t.periodX = maxRange;
                 if(p < minRange) t.periodX = minRange;
 
-                t.text = ' '; // don't use an empty string here which can confuse automargin (issue 5132)
-                ax._prevDateHead = '';
+                hideLabel(t);
             }
         }
 
+        if(tickVals[i].skipLabel) {
+            hideLabel(t);
+        }
+
         ticksOut.push(t);
     }
 
@@ -2966,6 +3007,7 @@ axes.drawLabels = function(gd, ax, opts) {
     var axId = ax._id;
     var axLetter = axId.charAt(0);
     var cls = opts.cls || axId + 'tick';
+
     var vals = opts.vals;
 
     var labelFns = opts.labelFns;

src/plots/cartesian/layout_attributes.js

@@ -412,6 +412,20 @@ module.exports = {
             'To set ticks every 4 years, set `dtick` to *M48*'
         ].join(' ')
     },
+    ticklabelstep: {
+        valType: 'integer',
+        min: 1,
+        dflt: 1,
+        editType: 'ticks',
+        description: [
+            'Sets the spacing between tick labels as compared to the spacing between ticks.',
+            'A value of 1 (default) means each tick gets a label.',
+            'A value of 2 means shows every 2nd label.',
+            'A larger value n means only every nth tick is labeled.',
+            '`tick0` determines which labels are shown.',
+            'Not implemented for axes with `type` *log* or *multicategory*, or when `tickmode` is *array*.'
+        ].join(' ')
+    },
     tickvals: {
         valType: 'data_array',
         editType: 'ticks',

src/plots/cartesian/tick_label_defaults.js

@@ -28,6 +28,14 @@ module.exports = function handleTickLabelDefaults(containerIn, containerOut, coe
             color: dfltFontColor
         });
 
+        if(
+            !options.noTicklabelstep &&
+            axType !== 'multicategory' &&
+            axType !== 'log'
+        ) {
+            coerce('ticklabelstep');
+        }
+
         if(!options.noAng) coerce('tickangle');
 
         if(axType !== 'category') {

src/plots/gl3d/layout/axis_defaults.js

@@ -43,6 +43,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, options) {
                 showGrid: true,
                 noTickson: true,
                 noTicklabelmode: true,
+                noTicklabelstep: true,
                 noTicklabelposition: true,
                 noTicklabeloverflow: true,
                 bgColor: options.bgColor,

src/plots/polar/layout_attributes.js

@@ -32,6 +32,7 @@ var axisTickAttrs = overrideAll({
     ticklen: axesAttrs.ticklen,
     tickwidth: axesAttrs.tickwidth,
     tickcolor: axesAttrs.tickcolor,
+    ticklabelstep: axesAttrs.ticklabelstep,
     showticklabels: axesAttrs.showticklabels,
     showtickprefix: axesAttrs.showtickprefix,
     tickprefix: axesAttrs.tickprefix,

src/plots/smith/layout_defaults.js

@@ -83,6 +83,7 @@ function handleDefaults(contIn, contOut, coerce, opts) {
             }
 
             handleTickLabelDefaults(axIn, axOut, coerceAxis, axOut.type, {
+                noTicklabelstep: true,
                 noAng: !isRealAxis,
                 noExp: true,
                 font: {

src/plots/ternary/layout_attributes.js

@@ -25,6 +25,7 @@ var ternaryAxesAttrs = {
     ticklen: axesAttrs.ticklen,
     tickwidth: axesAttrs.tickwidth,
     tickcolor: axesAttrs.tickcolor,
+    ticklabelstep: axesAttrs.ticklabelstep,
     showticklabels: axesAttrs.showticklabels,
     showtickprefix: axesAttrs.showtickprefix,
     tickprefix: axesAttrs.tickprefix,