Merge pull request #3869 from plotly/selection-range-data-on-category-axes

Fix selection range event data on category axes

Author: etpinard

src/plots/cartesian/select.js

@@ -85,9 +85,15 @@ function prepSelect(e, startX, startY, dragOptions, mode) {
     var searchTraces = determineSearchTraces(gd, dragOptions.xaxes,
       dragOptions.yaxes, dragOptions.subplot);
 
+    // in v2 (once log ranges are fixed),
+    // we'll be able to p2r here for all axis types
+    function p2r(ax, v) {
+        return ax.type === 'log' ? ax.p2d(v) : ax.p2r(v);
+    }
+
     function axValue(ax) {
         var index = (ax._id.charAt(0) === 'y') ? 1 : 0;
-        return function(v) { return ax.p2d(v[index]); };
+        return function(v) { return p2r(ax, v[index]); };
     }
 
     function ascending(a, b) { return a - b; }
@@ -107,8 +113,8 @@ function prepSelect(e, startX, startY, dragOptions, mode) {
                     var axLetter = ax._id.charAt(0);
 
                     ranges[ax._id] = [
-                        ax.p2d(poly[axLetter + 'min']),
-                        ax.p2d(poly[axLetter + 'max'])
+                        p2r(ax, poly[axLetter + 'min']),
+                        p2r(ax, poly[axLetter + 'max'])
                     ].sort(ascending);
                 }
             };

test/jasmine/tests/select_test.js

@@ -1228,6 +1228,90 @@ describe('Test select box and lasso in general:', function() {
         .then(done);
     });
 
+    describe('should return correct range data on dragmode *select*', function() {
+        var specs = [{
+            axType: 'linear',
+            rng: [-0.6208, 0.8375]
+        }, {
+            axType: 'log',
+            rng: [0.2394, 6.8785]
+        }, {
+            axType: 'date',
+            rng: ['2000-01-20 19:48', '2000-04-06 01:48']
+        }, {
+            axType: 'category',
+            rng: [-0.6208, 0.8375]
+        }, {
+            axType: 'multicategory',
+            rng: [-0.6208, 0.8375]
+        }];
+
+        specs.forEach(function(s) {
+            it('- @flaky on ' + s.axType + ' axes', function(done) {
+                var gd = createGraphDiv();
+
+                Plotly.plot(gd, [], {
+                    xaxis: {type: s.axType},
+                    dragmode: 'select',
+                    width: 400,
+                    height: 400
+                })
+                .then(function() {
+                    resetEvents(gd);
+                    drag(selectPath);
+                    return selectedPromise;
+                })
+                .then(function() {
+                    expect(selectedData.range.x).toBeCloseToArray(s.rng, 2);
+                })
+                .catch(failTest)
+                .then(done);
+            });
+        });
+    });
+
+    describe('should return correct range data on dragmode *lasso*', function() {
+        var specs = [{
+            axType: 'linear',
+            pts: [5.883, 5.941, 6, 6]
+        }, {
+            axType: 'log',
+            pts: [764422.2742, 874312.4580, 1000000, 1000000]
+        }, {
+            axType: 'date',
+            pts: ['2000-12-25 21:36', '2000-12-28 22:48', '2001-01-01', '2001-01-01']
+        }, {
+            axType: 'category',
+            pts: [5.8833, 5.9416, 6, 6]
+        }, {
+            axType: 'multicategory',
+            pts: [5.8833, 5.9416, 6, 6]
+        }];
+
+        specs.forEach(function(s) {
+            it('- @flaky on ' + s.axType + ' axes', function(done) {
+                var gd = createGraphDiv();
+
+                Plotly.plot(gd, [], {
+                    xaxis: {type: s.axType},
+                    dragmode: 'lasso',
+                    width: 400,
+                    height: 400
+                })
+                .then(function() {
+                    resetEvents(gd);
+                    drag(lassoPath);
+                    return selectedPromise;
+                })
+                .then(function() {
+                    expect(selectedData.lassoPoints.x).toBeCloseToArray(s.pts, 2);
+                })
+                .catch(failTest)
+                .then(done);
+            });
+        });
+    });
+
     it('@flaky should have their selection outlines cleared during *axrange* relayout calls', function(done) {
         var gd = createGraphDiv();
         var fig = Lib.extendDeep({}, mock);