Use texttemplatefallback for derived variables on multi-axis shapes

Author: alexshoe

src/components/shapes/display_labels.js

@@ -27,7 +27,18 @@ module.exports = function drawLabel(gd, index, options, shapeGroup) {
         if (options.type !== 'path') {
             var _xa = Axes.getFromId(gd, options.xref);
             var _ya = Axes.getFromId(gd, options.yref);
+            var isMultiAxisX = Array.isArray(options.xref);
+            var isMultiAxisY = Array.isArray(options.yref);
+
+            // For multi-axis shapes, derived variables are meaningless
+            // Skip them and let texttemplatefallback handle those cases.
+            var derivedX = ['dx', 'width', 'xcenter', 'slope', 'length'];
+            var derivedY = ['dy', 'height', 'ycenter', 'slope', 'length'];
+
             for (var key in shapeLabelTexttemplateVars) {
+                if (isMultiAxisX && derivedX.includes(key)) continue;
+                if (isMultiAxisY && derivedY.includes(key)) continue;
+
                 var val = shapeLabelTexttemplateVars[key](options, _xa, _ya);
                 if (val !== undefined) templateValues[key] = val;
             }

test/image/baselines/multi_axis_shapes.png

@@ -1671,12 +1671,12 @@ describe('Test multi-axis shapes', function() {
     beforeEach(function() { gd = createGraphDiv(); });
     afterEach(destroyGraphDiv);
 
-    function getShape(index) {
+    function getShapesWithIndex(index) {
         return d3SelectAll('.shapelayer path[data-index="' + index + '"]');
     }
 
     function getBoundingBox(index) {
-        var node = getShape(index).node();
+        var node = getShapesWithIndex(index).node();
         return node ? node.getBoundingClientRect() : null;
     }
 
@@ -1696,10 +1696,10 @@ describe('Test multi-axis shapes', function() {
                 {type: 'path', xref: ['x', 'x2'], yref: ['y', 'y2'], path: 'M1,1L2,2'}
             ]
         }).then(function() {
-            expect(getShape(0).size()).toBe(1);
-            expect(getShape(1).size()).toBe(1);
-            expect(getShape(2).size()).toBe(1);
-            expect(getShape(3).size()).toBe(1);
+            expect(getShapesWithIndex(0).size()).toBe(1);
+            expect(getShapesWithIndex(1).size()).toBe(1);
+            expect(getShapesWithIndex(2).size()).toBe(1);
+            expect(getShapesWithIndex(3).size()).toBe(1);
         })
         .then(done, done.fail);
     });