link ax._categories & ax._categoriesMap to same ref for matching axes

- that way, they are appends across matching axes
  and the category-to-position maps just works!

Author: etpinard

src/plots/cartesian/set_convert.js

@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var d3 = require('d3');
@@ -63,7 +62,8 @@ function isValidCategory(v) {
 module.exports = function setConvert(ax, fullLayout) {
     fullLayout = fullLayout || {};
 
-    var axLetter = (ax._id || 'x').charAt(0);
+    var axId = (ax._id || 'x');
+    var axLetter = axId.charAt(0);
 
     function toLog(v, clip) {
         if(v > 0) return Math.log(v) / Math.LN10;
@@ -307,10 +307,25 @@ module.exports = function setConvert(ax, fullLayout) {
             var traceIndices = ax._traceIndices;
             var i, j;
 
+            var matchGroups = fullLayout._axisMatchGroups;
+            if(matchGroups && matchGroups.length && ax._categories.length === 0) {
+                for(i = 0; i < matchGroups.length; i++) {
+                    var group = matchGroups[i];
+                    if(group[axId]) {
+                        for(var axId2 in group) {
+                            if(axId2 !== axId) {
+                                var ax2 = fullLayout[axisIds.id2name(axId2)];
+                                traceIndices = traceIndices.concat(ax2._traceIndices);
+                            }
+                        }
+                    }
+                }
+            }
+
             // [ [cnt, {$cat: index}], for 1,2 ]
-            var seen = ax._multicatSeen = [[0, {}], [0, {}]];
+            var seen = [[0, {}], [0, {}]];
             // [ [arrayIn[0][i], arrayIn[1][i]], for i .. N ]
-            var list = ax._multicatList = [];
+            var list = [];
 
             for(i = 0; i < traceIndices.length; i++) {
                 var trace = fullData[traceIndices[i]];
@@ -558,15 +573,45 @@ module.exports = function setConvert(ax, fullLayout) {
         }
     };
 
+    // should skip if not category nor multicategory
     ax.clearCalc = function() {
-        // initialize the category list, if there is one, so we start over
-        // to be filled in later by ax.d2c
-        ax._categories = (ax._initialCategories || []).slice();
-
-        // Build the lookup map for initialized categories
-        ax._categoriesMap = {};
-        for(var j = 0; j < ax._categories.length; j++) {
-            ax._categoriesMap[ax._categories[j]] = j;
+        var matchGroups = fullLayout._axisMatchGroups;
+
+        if(matchGroups && matchGroups.length) {
+            for(var i = 0; i < matchGroups.length; i++) {
+                var group = matchGroups[i];
+
+                if(group[axId]) {
+                    var categories = null;
+                    var categoriesMap = null;
+
+                    for(var axId2 in group) {
+                        var ax2 = fullLayout[axisIds.id2name(axId2)];
+                        if(ax2._categories) {
+                            categories = ax2._categories;
+                            categoriesMap = ax2._categoriesMap;
+                            break;
+                        }
+                    }
+
+                    if(categories && categoriesMap) {
+                        ax._categories = categories;
+                        ax._categoriesMap = categoriesMap;
+                    } else {
+                        ax._categories = [];
+                        ax._categoriesMap = {};
+                    }
+                }
+            }
+        } else {
+            ax._categories = [];
+            ax._categoriesMap = {};
+        }
+
+        if(ax._initialCategories) {
+            for(var j = 0; j < ax._initialCategories.length; j++) {
+                setCategoryIndex(ax._initialCategories[j]);
+            }
         }
     };
 

test/image/baselines/matching-categories.png

@@ -0,0 +1,92 @@
+{
+  "data": [
+    {
+      "x": [ "a", "b", "c" ],
+      "y": [ 1, 2, 1 ]
+    },
+    {
+      "x": [ "b", "c", "d", "e" ],
+      "y": [ 2, 1, 2, 3 ],
+      "xaxis": "x2",
+      "yaxis": "y2"
+    },
+    {
+      "x": [
+        [ 2018, 2019, 2019 ],
+        [ "q1", "q1", "q2" ]
+      ],
+      "y": [ 1, 2, 1 ],
+      "xaxis": "x3",
+      "yaxis": "y3"
+    },
+    {
+      "x": [
+        [ 2018, 2018, 2019, 2019 ],
+        [ "q1", "q2", "q1", "q2" ]
+      ],
+      "y": [ 2, 1, 2, 3 ],
+      "xaxis": "x4",
+      "yaxis": "y4"
+    }
+  ],
+  "layout": {
+    "xaxis": {
+      "domain": [ 0, 0.2 ]
+    },
+    "yaxis": {
+      "domain": [ 0.65, 1 ]
+    },
+    "xaxis2": {
+      "matches": "x",
+      "anchor": "y2",
+      "domain": [ 0.3, 1 ]
+    },
+    "yaxis2": {
+      "anchor": "x2",
+      "domain": [ 0.65, 1 ]
+    },
+    "xaxis3": {
+      "anchor": "y3",
+      "domain": [ 0, 0.2 ]
+    },
+    "yaxis3": {
+      "anchor": "x3",
+      "domain": [ 0, 0.5 ]
+    },
+    "xaxis4": {
+      "matches": "x3",
+      "anchor": "y4",
+      "domain": [ 0.3, 1 ]
+    },
+    "yaxis4": {
+      "anchor": "x4",
+      "domain": [ 0, 0.5 ]
+    },
+    "showlegend": false,
+    "margin": { "t": 40, "b": 40, "l": 20, "r": 20 },
+    "annotations": [
+      {
+        "text": "matching category x-axes",
+        "showarrow": false,
+        "xref": "paper",
+        "yref": "paper",
+        "x": 0,
+        "xanchor": "left",
+        "y": 1,
+        "yanchor": "bottom",
+        "bgcolor": "#d3d3d3"
+      },
+      {
+        "text": "matching multicategory x-axes",
+        "showarrow": false,
+        "xref": "paper",
+        "yref": "paper",
+        "x": 0,
+        "xanchor": "left",
+        "y": 0.5,
+        "yanchor": "bottom",
+        "bgcolor": "#d3d3d3"
+      }
+    ]
+  }
+}