fix multicategory axes with inside ticks

... where dividers and ticks go in opposite directions

Author: etpinard

src/plots/cartesian/axes.js

@@ -1781,11 +1781,12 @@ axes.drawOne = function(gd, ax, opts) {
     if(ax.type === 'multicategory') {
         var labelLength = 0;
         var pad = {x: 2, y: 10}[axLetter];
+        var sgn = tickSigns[2] * (ax.ticks === 'inside' ? -1 : 1);
 
         seq.push(function() {
             labelLength += getLabelLevelSpan(ax, axId + 'tick') + pad;
             labelLength += ax._tickAngles[axId + 'tick'] ? ax.tickfont.size * LINE_SPACING : 0;
-            var secondaryPosition = mainLinePosition + labelLength * tickSigns[2];
+            var secondaryPosition = mainLinePosition + labelLength * sgn;
             var secondaryLabelFns = axes.makeLabelFns(ax, secondaryPosition);
 
             return axes.drawLabels(gd, ax, {
@@ -1808,7 +1809,7 @@ axes.drawOne = function(gd, ax, opts) {
             return drawDividers(gd, ax, {
                 vals: dividerVals,
                 layer: mainAxLayer,
-                path: axes.makeTickPath(ax, mainLinePosition, tickSigns[2], labelLength),
+                path: axes.makeTickPath(ax, mainLinePosition, sgn, labelLength),
                 transFn: transFn
             });
         });

test/image/baselines/multicategory-inside-ticks.png

@@ -0,0 +1,76 @@
+{
+  "data": [
+    {
+      "type": "bar",
+      "x": [
+        ["2017", "2017", "2017", "2017", "2018", "2018", "2018"],
+        ["q1", "q2", "q3", "q4", "q1", "q2", "q3" ]
+      ],
+      "y": [1, 2, 3, 1, 3, 2, 3, 1]
+    },
+    {
+      "type": "bar",
+      "x": [
+        ["2017", "2017", "2017", "2017", "2018", "2018", "2018"],
+        ["q1", "q2", "q3", "q4", "q1", "q2", "q3"]
+      ],
+      "y": [1.12, 2.15, 3.07, 1.48, 2.78, 1.95, 2.54, 0.64]
+    },
+
+    {
+      "type": "bar",
+      "x": [
+        ["2017", "2017", "2017", "2017", "2018", "2018", "2018"],
+        ["q1", "q2", "q3", "q4", "q1", "q2", "q3"]
+      ],
+      "y": [1.12, 2.15, 3.07, 1.48, 2.78, 1.95, 2.54, 0.64],
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "type": "bar",
+      "x": [
+        ["2017", "2017", "2017", "2017", "2018", "2018", "2018"],
+        ["q1", "q2", "q3", "q4", "q1", "q2", "q3" ]
+      ],
+      "y": [1, 2, 3, 1, 3, 2, 3, 1],
+      "xaxis": "x2",
+      "yaxis": "y2"
+    }
+  ],
+  "layout": {
+    "grid": {"rows": 2, "columns": 1, "pattern": "independent"},
+    "xaxis": {
+      "side": "top",
+      "title": "MULTI-CATEGORY",
+      "range": [-0.5, 7],
+      "showline": true,
+      "tickfont": {"size": 16},
+      "ticks": "inside",
+      "ticklen": 10,
+      "tickcolor": "red",
+      "tickwidth": 2,
+      "dividercolor": "blue",
+      "dividerwidth": 2
+    },
+    "xaxis2": {
+      "title": "MULTI-CATEGORY",
+      "range": [-1, 6.5],
+      "showline": true,
+      "tickfont": {"size": 16},
+      "ticks": "inside",
+      "ticklen": 10,
+      "tickcolor": "red",
+      "tickwidth": 2,
+      "dividercolor": "blue",
+      "dividerwidth": 2
+    },
+    "yaxis": {
+      "zeroline": false
+    },
+    "yaxis2": {
+      "zeroline": false
+    },
+    "showlegend": false
+  }
+}