Merge pull request #612 from n-riesco/fix-issue-611-exception-with-shapes-and-two-y-axes

Fix issue #611 (exception thrown if shapes and an overlaid axis)

Author: etpinard

src/components/shapes/index.js

@@ -325,7 +325,7 @@ function updateShape(gd, index, opt, value) {
             plotinfo = plots[subplots[i]];
             clipAxes = subplots[i];
 
-            if(isShapeInSubplot(gd, options, plotinfo.id)) {
+            if(isShapeInSubplot(gd, options, plotinfo)) {
                 drawShape(plotinfo.shapelayer);
             }
         }
@@ -362,10 +362,13 @@ function getShapeLayer(gd, index) {
     return shapeLayer;
 }
 
-function isShapeInSubplot(gd, shape, subplot) {
-    var xa = Plotly.Axes.getFromId(gd, subplot, 'x')._id,
-        ya = Plotly.Axes.getFromId(gd, subplot, 'y')._id;
-    return shape.layer === 'below' && (xa === shape.xref || ya === shape.yref);
+function isShapeInSubplot(gd, shape, plotinfo) {
+    var xa = Plotly.Axes.getFromId(gd, plotinfo.id, 'x')._id,
+        ya = Plotly.Axes.getFromId(gd, plotinfo.id, 'y')._id,
+        isBelow = shape.layer === 'below',
+        inSuplotAxis = (xa === shape.xref || ya === shape.yref),
+        isNotAnOverlaidSubplot = !!plotinfo.shapelayer;
+    return isBelow && inSuplotAxis && isNotAnOverlaidSubplot;
 }
 
 function decodeDate(convertToPx) {

test/jasmine/tests/shapes_test.js

@@ -236,3 +236,49 @@ describe('Test shapes:', function() {
         });
     });
 });
+
+describe('Test shapes: a plot with shapes and an overlaid axis', function() {
+    'use strict';
+
+    var gd, data, layout;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+
+        data = [{
+            'y': [1934.5, 1932.3, 1930.3],
+            'x': ['1947-01-01', '1947-04-01', '1948-07-01'],
+            'type': 'scatter'
+        }];
+
+        layout = {
+            'yaxis': {
+                'type': 'linear'
+            },
+            'xaxis': {
+                'type': 'date'
+            },
+            'yaxis2': {
+                'side': 'right',
+                'overlaying': 'y'
+            },
+            'shapes': [{
+                'fillcolor': '#ccc',
+                'type': 'rect',
+                'x0': '1947-01-01',
+                'x1': '1947-04-01',
+                'xref': 'x',
+                'y0': 0,
+                'y1': 1,
+                'yref': 'paper',
+                'layer': 'below'
+            }]
+        };
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should not throw an exception', function(done) {
+        Plotly.plot(gd, data, layout).then(done);
+    });
+});