Merge pull request #6088 from plotly/ticklabeljump

archmoj · web-flow · commit 74a8f9c79516 · 2022-02-04T12:02:01.000-05:00
Implement `ticklabelstep` on 2D axes &amp; colorbars
diff --git a/draftlogs/6088_add.md b/draftlogs/6088_add.md
@@ -0,0 +1 @@
+ - Implement `ticklabelstep` on 2D axes & colorbars [[#6088](https://github.com/plotly/plotly.js/pull/6088)]
diff --git a/src/components/colorbar/attributes.js b/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'
diff --git a/src/components/colorbar/draw.js b/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,
diff --git a/src/plots/cartesian/axes.js b/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;
diff --git a/src/plots/cartesian/layout_attributes.js b/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',
diff --git a/src/plots/cartesian/tick_label_defaults.js b/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') {
diff --git a/src/plots/gl3d/layout/axis_defaults.js b/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,
diff --git a/src/plots/polar/layout_attributes.js b/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,
diff --git a/src/plots/smith/layout_defaults.js b/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: {
diff --git a/src/plots/ternary/layout_attributes.js b/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,
diff --git a/src/traces/carpet/ab_defaults.js b/src/traces/carpet/ab_defaults.js
@@ -30,6 +30,7 @@ function mimickAxisDefaults(traceIn, traceOut, fullLayout, dfltColor) {
         var axOut = Template.newContainer(traceOut, axName);
 
         var defaultOptions = {
+            noTicklabelstep: true,
             tickfont: 'x',
             id: axLetter + 'axis',
             letter: axLetter,
diff --git a/src/traces/indicator/attributes.js b/src/traces/indicator/attributes.js
@@ -301,6 +301,7 @@ module.exports = {
             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'
diff --git a/test/image/baselines/h-colorbar05.png b/test/image/baselines/h-colorbar05.png
diff --git a/test/image/baselines/indicator_attrs.png b/test/image/baselines/indicator_attrs.png
diff --git a/test/image/baselines/period_positioning7.png b/test/image/baselines/period_positioning7.png
diff --git a/test/image/baselines/polar_ticks.png b/test/image/baselines/polar_ticks.png
diff --git a/test/image/baselines/ternary_array_styles.png b/test/image/baselines/ternary_array_styles.png
diff --git a/test/image/baselines/z-date_axes-ticklabelstep.png b/test/image/baselines/z-date_axes-ticklabelstep.png
diff --git a/test/image/mocks/h-colorbar05.json b/test/image/mocks/h-colorbar05.json
@@ -19,6 +19,7 @@
           "len": 0.5,
           "ticks": "inside",
           "dtick": 20,
+          "ticklabelstep": 2,
           "ticklabelposition": "inside right",
           "ticklen": 5,
           "bgcolor": "rgba(255,255,0,0.5)",
@@ -46,6 +47,7 @@
       }
     },
     "xaxis": {
+        "ticklabelstep": 2,
         "side": "top"
     }
   }
diff --git a/test/image/mocks/indicator_attrs.json b/test/image/mocks/indicator_attrs.json
@@ -108,6 +108,7 @@
                     "tickwidth": 5,
                     "tickcolor": "blue",
                     "showticklabels": true,
+                    "ticklabelstep": 2,
                     "tickfont": {
                         "family": "Arial",
                         "size": 16,
diff --git a/test/image/mocks/period_positioning7.json b/test/image/mocks/period_positioning7.json
@@ -381,6 +381,7 @@
             "dtick": 604800000,
             "tickformat": "%W",
             "ticklabelmode": "period",
+            "ticklabelstep": 4,
             "tickcolor": "black"
         }
     }
diff --git a/test/image/mocks/polar_ticks.json b/test/image/mocks/polar_ticks.json
@@ -1854,6 +1854,7 @@
       },
       "radialaxis": {},
       "angularaxis": {
+        "ticklabelstep": 3,
         "dtick": 10,
         "tickfont": {
           "size": 10,
diff --git a/test/image/mocks/ternary_array_styles.json b/test/image/mocks/ternary_array_styles.json
@@ -111,12 +111,16 @@
     "layout": {
         "ternary": {
             "aaxis": {
+                "ticklabelstep": 4,
+                "dtick": 0.05,
                 "showline": true,
                 "ticks": "inside",
                 "showgrid": true,
                 "color": "#ccc"
             },
             "baxis": {
+                "ticklabelstep": 2,
+                "dtick": 0.1,
                 "showline": true,
                 "ticks": "inside",
                 "showgrid": true,
@@ -132,6 +136,9 @@
         },
         "height": 450,
         "width": 700,
+        "legend": {
+            "orientation": "h"
+        },
         "autosize": false
     }
 }
diff --git a/test/image/mocks/z-date_axes-ticklabelstep.json b/test/image/mocks/z-date_axes-ticklabelstep.json
@@ -0,0 +1,91 @@
+{
+  "data": [
+    {
+      "x": [
+        "1900-01-01",
+        "2000-01-01",
+        "2100-01-01"
+      ],
+      "y": [1, 3, 2]
+    },
+    {
+      "x": [
+        "2013-05-01",
+        "2013-09-01",
+        "2014-01-01"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "x": [
+        "2013-11-17",
+        "2013-12-15",
+        "2014-01-12"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x3",
+      "yaxis": "y3"
+    },
+    {
+      "x": [
+        "2013-01-01",
+        "2013-01-02",
+        "2013-01-03"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x4",
+      "yaxis": "y4"
+    },
+    {
+      "x": [
+        "2013-07-01 18:00",
+        "2013-07-02 00:00",
+        "2013-07-02 06:00"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x5",
+      "yaxis": "y5"
+    },
+    {
+      "x": [
+        "2013-01-01 23:59",
+        "2013-01-02 00:00",
+        "2013-01-02 00:01"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x6",
+      "yaxis": "y6"
+    },
+    {
+      "x": [
+        "2013-07-01 23:59:59",
+        "2013-07-02 00:00:00",
+        "2013-07-02 00:00:01"
+      ],
+      "y": [1, 3, 2],
+      "xaxis": "x7",
+      "yaxis": "y7"
+    }
+  ],
+  "layout": {
+    "showlegend": false,
+    "width": 600,
+    "height": 500,
+    "yaxis": {"ticklabelstep": 2, "domain": [0, 0.04]},
+    "yaxis2": {"ticklabelstep": 2, "domain": [0.16, 0.2]},
+    "yaxis3": {"ticklabelstep": 2, "domain": [0.32, 0.36]},
+    "yaxis4": {"ticklabelstep": 2, "domain": [0.48, 0.52]},
+    "yaxis5": {"ticklabelstep": 2, "domain": [0.64, 0.68]},
+    "yaxis6": {"ticklabelstep": 2, "domain": [0.80, 0.84]},
+    "yaxis7": {"ticklabelstep": 2, "domain": [0.96, 1]},
+    "xaxis": {"ticklabelstep": 2, "tickcolor": "black", "anchor": "y"},
+    "xaxis2": {"ticklabelstep": 2, "tickcolor": "black", "anchor": "y2"},
+    "xaxis3": {"ticklabelstep": 2, "tickcolor": "black", "anchor": "y3"},
+    "xaxis4": {"ticklabelstep": 2, "tickcolor": "black", "anchor": "y4"},
+    "xaxis5": {"ticklabelstep": 2, "tickcolor": "black", "anchor": "y5"},
+    "xaxis6": {"ticklabelstep": 2, "tickcolor": "black", "anchor": "y6"},
+    "xaxis7": {"ticklabelstep": 2, "tickcolor": "black", "anchor": "y7"}
+  }
+}
diff --git a/test/plot-schema.json b/test/plot-schema.json

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+ - Implement `ticklabelstep` on 2D axes & colorbars [[#6088](https://github.com/plotly/plotly.js/pull/6088)]
Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,7 @@ function handleDefaults(contIn, contOut, coerce, opts) {`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`handleTickLabelDefaults(axIn, axOut, coerceAxis, axOut.type, {`
	`86`	`+ noTicklabelstep: true,`
`86`	`87`	`noAng: !isRealAxis,`
`87`	`88`	`noExp: true,`
`88`	`89`	`font: {`