Merge pull request #7735 from my-tien/calculate-hidden-minor-ticks

Calculate hidden minor ticks if ticklabelindex is set.

Author: emilykl

draftlogs/7735_fix.md

@@ -0,0 +1 @@
+ - Fix unexpected `ticklabelindex` behavior when minor ticks are not shown. [[#7735](https://github.com/plotly/plotly.js/pull/7735)], with thanks to @my-tien for the contribution!

src/plots/cartesian/axes.js

@@ -603,7 +603,7 @@ function autoShiftMonthBins(binStart, data, dtick, dataMin, calendar) {
 
 // ensure we have minor tick0 and dtick calculated
 axes.prepMinorTicks = function(mockAx, ax, opts) {
-    if(!ax.minor.dtick) {
+    if(!ax.minor?.dtick) {
         delete mockAx.dtick;
         var hasMajor = ax.dtick && isNumeric(ax._tmin);
         var mockMinorRange;
@@ -690,7 +690,7 @@ axes.prepMinorTicks = function(mockAx, ax, opts) {
         // put back the original range, to use to find the full set of minor ticks
         mockAx.range = ax.range;
     }
-    if(ax.minor._tick0Init === undefined) {
+    if(ax.minor?._tick0Init === undefined) {
         // ensure identical tick0
         mockAx.tick0 = ax.tick0;
     }
@@ -973,21 +973,23 @@ axes.calcTicks = function calcTicks(ax, opts) {
     var allTicklabelVals = [];
 
     var hasMinor = ax.minor && (ax.minor.ticks || ax.minor.showgrid);
+    // minor ticks should be calculated if they are visible or if ticklabelindex is set because then
+    // the labels are placed at minor ticks (even if invisible) instead of major ticks.
+    var calcMinor = hasMinor || ticklabelIndex;
 
     // calc major first
-    for(var major = 1; major >= (hasMinor ? 0 : 1); major--) {
+    for(var major = 1; major >= (calcMinor ? 0 : 1); major--) {
         var isMinor = !major;
 
         if(major) {
             ax._dtickInit = ax.dtick;
             ax._tick0Init = ax.tick0;
-        } else {
+        } else if (calcMinor) {
             ax.minor._dtickInit = ax.minor.dtick;
             ax.minor._tick0Init = ax.minor.tick0;
         }
 
-        var mockAx = major ? ax : Lib.extendFlat({}, ax, ax.minor);
-
+        var mockAx = major ? ax : Lib.extendFlat({}, ax, calcMinor ? ax.minor : {"minor": {}});
         if(isMinor) {
             axes.prepMinorTicks(mockAx, ax, opts);
         } else {
@@ -1074,10 +1076,13 @@ axes.calcTicks = function calcTicks(ax, opts) {
             }
         }
 
-        if(major && isPeriod) {
-            // add one item to label period before tick0
+        if((major || ticklabelIndex) && isPeriod) {
+            // if major: add one item to label period before tick0
+            // if minor: add one item for ticklabelindex positioning. positionPeriodTicks requires
+            // at least 2 ticks to calculate the period length, so we add a dummy tick, ensuring
+            // that if a tick is labeled, there are always at least 2 ticks.
             x = axes.tickIncrement(x, dtick, !axrev, calendar);
-            majorId--;
+            if (major) majorId--;
         }
 
         for(;
@@ -1125,13 +1130,17 @@ axes.calcTicks = function calcTicks(ax, opts) {
         }
     }
 
-    // check if ticklabelIndex makes sense, otherwise ignore it
-    if(!minorTickVals || minorTickVals.length < 2) {
+    // check if ticklabelIndex makes sense, otherwise ignore it.
+    // It makes sense if in addition to the always present dummy, there are at least 2 minor ticks 
+    // with the required distance to each other.
+    if(!minorTickVals || minorTickVals.length < 3) {
         ticklabelIndex = false;
     } else {
-        var diff = (minorTickVals[1].value - minorTickVals[0].value) * (isReversed ? -1 : 1);
+        var diff = (minorTickVals[2].value - minorTickVals[1].value) * (isReversed ? -1 : 1);
         if(!periodCompatibleWithTickformat(diff, ax.tickformat)) {
             ticklabelIndex = false;
+            // remove previously added tick before tick0 for handling ticklabelindex positioning
+            minorTickVals = minorTickVals.slice(1);
         }
     }
     // Determine for which ticks to draw labels
@@ -1169,6 +1178,9 @@ axes.calcTicks = function calcTicks(ax, opts) {
                 }
             });
         });
+        tickVals.forEach(function(tick) {
+            tick.skipLabel = allTicklabelVals.indexOf(tick) === -1;
+        });
     }
 
     if(hasMinor) {
@@ -1298,14 +1310,18 @@ axes.calcTicks = function calcTicks(ax, opts) {
         } else {
             lastVisibleHead = ax._prevDateHead;
             t = setTickLabel(ax, tickVals[i]);
-            if(tickVals[i].skipLabel ||
-                ticklabelIndex && allTicklabelVals.indexOf(tickVals[i]) === -1) {
+            if (tickVals[i].skipLabel) {
                 hideLabel(t);
             }
 
             ticksOut.push(t);
         }
     }
+
+    if(isPeriod && ticklabelIndex && minorTicks.length) {
+        // drop very first minor tick that we added to handle ticklabelindex
+        minorTicks[0].noTick = true;
+    }
     ticksOut = ticksOut.concat(minorTicks);
 
     ax._inCalcTicks = false;

src/plots/cartesian/axis_defaults.js

@@ -154,9 +154,10 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
         attributes: layoutAttributes
     });
 
-    // delete minor when no minor ticks or gridlines
+    // delete minor when no minor ticks or gridlines and no hidden minor ticks are needed
     if(
         hasMinor &&
+        containerOut.ticklabelindex == null &&
         !containerOut.minor.ticks &&
         !containerOut.minor.showgrid
     ) {

test/image/baselines/date_axes_period2_ticklabelindex.png

@@ -0,0 +1,94 @@
+{
+  "data": [
+    {
+      "showlegend": false,
+      "x": [
+        "2023-01-01",
+        "2024-01-01",
+        "2025-01-01",
+        "2026-01-01",
+        "2027-01-01"
+      ],
+      "type": "scatter",
+      "xaxis": "x",
+      "yaxis": "y"
+    },
+    {
+      "showlegend": false,
+      "x": [
+        "2023-01-01",
+        "2024-01-01",
+        "2025-01-01",
+        "2026-01-01"
+      ],
+      "type": "scatter",
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "showlegend": false,
+      "x": [
+        "2023-01-01",
+        "2024-01-01",
+        "2025-01-01",
+        "2026-01-01",
+        "2027-01-01"
+      ],
+      "type": "scatter",
+      "xaxis": "x3",
+      "yaxis": "y3"
+    }
+  ],
+  "layout": {
+    "width": 700,
+    "height": 700,
+    "grid": {
+      "rows": 3,
+      "columns": 1,
+      "pattern": "independent"
+    },
+    "xaxis": {
+      "ticklen": 20,
+      "ticklabelindex": -1,
+      "tickformat": "%Y",
+      "ticklabelmode": "period",
+      "dtick": "M24",
+      "minor": {
+        "dtick": "M12",
+        "tick0": "2023-01-01"
+      },
+      "title": {
+        "text": "Should display 2 ticks and labels 2023 and 2025 to the left of them."
+      }
+    },
+    "xaxis2": {
+      "ticklen": 20,
+      "ticklabelindex": -2,
+      "tickformat": "%Y",
+      "ticklabelmode": "period",
+      "dtick": "M24",
+      "minor": {
+        "dtick": "M12",
+        "tick0": "2023-01-01"
+      },
+      "title": {
+        "text": "Should display a label at 2024"
+      }
+    },
+    "xaxis3": {
+      "ticklen": 20,
+      "ticklabelindex": -1,
+      "tickformat": "%Y",
+      "ticklabelmode": "period",
+      "ticklabelstep": 2,
+      "dtick": "M12",
+      "minor": {
+        "dtick": "M12",
+        "tick0": "2023-01-01"
+      },
+      "title": {
+        "text": "Should display yearly ticks with labels at 2023 and 2025"
+      }
+    }
+  }
+}