Merge pull request #3228 from plotly/fixup-scattergl-lines-gt-1e5

Fixup scattergl / scatterpolargl with mode: lines & >1e5 pts

Author: etpinard

src/traces/scattergl/index.js

@@ -92,9 +92,12 @@ function calc(gd, trace) {
     // For graphs with very large number of points and array marker.size,
     // use average marker size instead to speed things up.
     setFirstScatter(fullLayout, trace);
-    var ppad = len < TOO_MANY_POINTS ?
-        calcMarkerSize(trace, len) :
-        2 * (opts.marker.sizeAvg || Math.max(opts.marker.size, 3));
+    var ppad;
+    if(len < TOO_MANY_POINTS) {
+        ppad = calcMarkerSize(trace, len);
+    } else if(opts.marker) {
+        ppad = 2 * (opts.marker.sizeAvg || Math.max(opts.marker.size, 3));
+    }
     calcAxisExpansion(gd, trace, xa, ya, x, y, ppad);
     if(opts.errorX) expandForErrorBars(trace, xa, opts.errorX);
     if(opts.errorY) expandForErrorBars(trace, ya, opts.errorY);

src/traces/scatterpolargl/index.js

@@ -46,9 +46,12 @@ function calc(gd, trace) {
 
     // For graphs with very large number of points and array marker.size,
     // use average marker size instead to speed things up.
-    var ppad = len < TOO_MANY_POINTS ?
-        calcMarkerSize(trace, len) :
-        2 * (opts.marker.sizeAvg || Math.max(opts.marker.size, 3));
+    var ppad;
+    if(len < TOO_MANY_POINTS) {
+        ppad = calcMarkerSize(trace, len);
+    } else if(opts.marker) {
+        ppad = 2 * (opts.marker.sizeAvg || Math.max(opts.marker.size, 3));
+    }
     trace._extremes.x = Axes.findExtremes(radialAxis, rArray, {ppad: ppad});
 
     return [{x: false, y: false, t: stash, trace: trace}];

test/jasmine/tests/gl2d_plot_interact_test.js

@@ -1305,10 +1305,14 @@ describe('Test scattergl autorange:', function() {
     });
 
     describe('should return the approximative values for ~big~ data', function() {
+        var gd;
+
         beforeEach(function() {
+            gd = createGraphDiv();
             // to avoid expansive draw calls (which could be problematic on CI)
             spyOn(ScatterGl, 'plot').and.callFake(function(gd) {
                 gd._fullLayout._plots.xy._scene.scatter2d = {draw: function() {}};
+                gd._fullLayout._plots.xy._scene.line2d = {draw: function() {}};
             });
         });
 
@@ -1327,8 +1331,6 @@ describe('Test scattergl autorange:', function() {
         }
 
         it('@gl - case scalar marker.size', function(done) {
-            var gd = createGraphDiv();
-
             Plotly.newPlot(gd, [{
                 type: 'scattergl',
                 mode: 'markers',
@@ -1345,8 +1347,6 @@ describe('Test scattergl autorange:', function() {
         });
 
         it('@gl - case array marker.size', function(done) {
-            var gd = createGraphDiv();
-
             Plotly.newPlot(gd, [{
                 type: 'scattergl',
                 mode: 'markers',
@@ -1361,5 +1361,19 @@ describe('Test scattergl autorange:', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('@gl - case mode:lines', function(done) {
+            Plotly.newPlot(gd, [{
+                type: 'scattergl',
+                mode: 'lines',
+                y: y,
+            }])
+            .then(function() {
+                expect(gd._fullLayout.xaxis.range).toBeCloseToArray([0, N - 1], 2, 'x range');
+                expect(gd._fullLayout.yaxis.range).toBeCloseToArray([-0.0555, 1.0555], 2, 'y range');
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 });

test/jasmine/tests/scatterpolargl_test.js

@@ -1,5 +1,6 @@
 var Plotly = require('@lib');
 var Lib = require('@src/lib');
+var ScatterPolarGl = require('@src/traces/scatterpolargl');
 
 var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
@@ -251,3 +252,120 @@ describe('Test scatterpolargl interactions:', function() {
         .then(done);
     });
 });
+
+describe('Test scatterpolargl autorange:', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+    });
+
+    describe('should return the same value as SVG scatter for ~small~ data', function() {
+        var specs = [
+            {name: 'markers', fig: require('@mocks/polar_scatter.json')},
+            {name: 'lines', fig: require('@mocks/polar_line.json')},
+        ];
+
+        specs.forEach(function(s) {
+            it('@gl - case ' + s.name, function(done) {
+                var svgRange;
+
+                // ensure the mocks have auto-range turned on
+                var svgFig = Lib.extendDeep({}, s.fig);
+                Lib.extendDeep(svgFig.layout.polar, {radialaxis: {autorange: true}});
+
+                var glFig = Lib.extendDeep({}, svgFig);
+                glFig.data.forEach(function(t) { t.type = 'scatterpolargl'; });
+
+                Plotly.newPlot(gd, svgFig).then(function() {
+                    svgRange = gd._fullLayout.polar.radialaxis.range;
+                })
+                .then(function() {
+                    return Plotly.newPlot(gd, glFig);
+                })
+                .then(function() {
+                    expect(gd._fullLayout.polar.radialaxis.range)
+                        .toBeCloseToArray(svgRange, 'gl radial range');
+                })
+                .catch(failTest)
+                .then(done);
+            });
+        });
+    });
+
+    describe('should return the approximative values for ~big~ data', function() {
+        var cnt;
+
+        beforeEach(function() {
+            // to avoid expansive draw calls (which could be problematic on CI)
+            cnt = 0;
+            spyOn(ScatterPolarGl, 'plot').and.callFake(function() {
+                cnt++;
+            });
+        });
+
+        // threshold for 'fast' axis expansion routine
+        var N = 1e5;
+        var r = new Array(N);
+        var ms = new Array(N);
+
+        Lib.seedPseudoRandom();
+
+        for(var i = 0; i < N; i++) {
+            r[i] = Lib.pseudoRandom();
+            ms[i] = 20 * Lib.pseudoRandom() + 20;
+        }
+
+        it('@gl - case scalar marker.size', function(done) {
+            Plotly.newPlot(gd, [{
+                type: 'scatterpolargl',
+                mode: 'markers',
+                r: r,
+                marker: {size: 10}
+            }])
+            .then(function() {
+                expect(gd._fullLayout.polar.radialaxis.range)
+                    .toBeCloseToArray([0, 1.0799], 2, 'radial range');
+                expect(cnt).toBe(1, '# of plot call');
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('@gl - case array marker.size', function(done) {
+            Plotly.newPlot(gd, [{
+                type: 'scatterpolargl',
+                mode: 'markers',
+                r: r,
+                marker: ms
+            }])
+            .then(function() {
+                expect(gd._fullLayout.polar.radialaxis.range)
+                    .toBeCloseToArray([0, 1.0465], 2, 'radial range');
+                expect(cnt).toBe(1, '# of plot call');
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('@gl - case mode:lines', function(done) {
+            Plotly.newPlot(gd, [{
+                type: 'scatterpolargl',
+                mode: 'lines',
+                r: r,
+            }])
+            .then(function() {
+                expect(gd._fullLayout.polar.radialaxis.range)
+                    .toBeCloseToArray([0, 0.9999], 2, 'radial range');
+                expect(cnt).toBe(1, '# of plot call');
+            })
+            .catch(failTest)
+            .then(done);
+        });
+    });
+});