fix and test errorbar visibility toggling

alexcjohnson · alexcjohnson · commit 68f5dbcc634d · 2017-09-19T15:20:10.000-04:00
diff --git a/src/components/errorbars/plot.js b/src/components/errorbars/plot.js
@@ -43,13 +43,18 @@ module.exports = function plot(traces, plotinfo, transitionOpts) {
             trace.marker.maxdisplayed > 0
         );
 
-        if(!yObj.visible && !xObj.visible) return;
+        if(!yObj.visible && !xObj.visible) d = [];
 
         var errorbars = d3.select(this).selectAll('g.errorbar')
             .data(d, keyFunc);
 
         errorbars.exit().remove();
 
+        if(!d.length) return;
+
+        if(!xObj.visible) errorbars.selectAll('path.xerror').remove();
+        if(!yObj.visible) errorbars.selectAll('path.yerror').remove();
+
         errorbars.style('opacity', 1);
 
         var enter = errorbars.enter().append('g')
diff --git a/test/jasmine/tests/errorbars_test.js b/test/jasmine/tests/errorbars_test.js
@@ -0,0 +1,55 @@
+var Plotly = require('@lib/index');
+
+var d3 = require('d3');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var fail = require('../assets/fail_test');
+var customMatchers = require('../assets/custom_matchers');
+
+
+describe('errorbar plotting', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+        jasmine.addMatchers(customMatchers);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should autorange to the visible bars and remove invisible bars', function(done) {
+        function check(xrange, yrange, xcount, ycount) {
+            var xa = gd._fullLayout.xaxis;
+            var ya = gd._fullLayout.yaxis;
+            expect(xa.range).toBeCloseToArray(xrange, 3);
+            expect(ya.range).toBeCloseToArray(yrange, 3);
+
+            expect(d3.selectAll('.xerror').size()).toBe(xcount);
+            expect(d3.selectAll('.yerror').size()).toBe(ycount);
+        }
+        Plotly.newPlot(gd, [{
+            y: [1, 2, 3],
+            error_x: {type: 'constant', value: 0.5},
+            error_y: {type: 'sqrt'}
+        }], {
+            width: 400, height: 400
+        })
+        .then(function() {
+            check([-0.6667, 2.6667], [-0.2629, 4.9949], 3, 3);
+            return Plotly.restyle(gd, {'error_x.visible': false});
+        })
+        .then(function() {
+            check([-0.1511, 2.1511], [-0.2629, 4.9949], 0, 3);
+            return Plotly.restyle(gd, {'error_y.visible': false});
+        })
+        .then(function() {
+            check([-0.1511, 2.1511], [0.8451, 3.1549], 0, 0);
+            return Plotly.restyle(gd, {'error_x.visible': true, 'error_y.visible': true});
+        })
+        .then(function() {
+            check([-0.6667, 2.6667], [-0.2629, 4.9949], 3, 3);
+        })
+        .catch(fail)
+        .then(done);
+    });
+});
