Skip to content

Commit d69d7ba

Browse files
etpinardetpinard
authored
Merge pull request #2045 from plotly/bar-lasso
Bar | histogram lasso / select box dragmode
2 parents f617aef + 3c73301 commit d69d7ba

File tree

5 files changed

+193
-17
lines changed

5 files changed

+193
-17
lines changed

‎src/traces/bar/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Bar.arraysToCalcdata = require('./arrays_to_calcdata');
2222
Bar.plot = require('./plot');
2323
Bar.style = require('./style');
2424
Bar.hoverPoints = require('./hover');
25+
Bar.selectPoints = require('./select');
2526

2627
Bar.moduleType = 'trace';
2728
Bar.name = 'bar';

‎src/traces/bar/plot.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,13 @@ module.exports = function plot(gd, plotinfo, cdbar) {
4545
bartraces.append('g')
4646
.attr('class', 'points')
4747
.each(function(d) {
48-
var t = d[0].t,
49-
trace = d[0].trace,
50-
poffset = t.poffset,
51-
poffsetIsArray = Array.isArray(poffset);
48+
var sel = d[0].node3 = d3.select(this);
49+
var t = d[0].t;
50+
var trace = d[0].trace;
51+
var poffset = t.poffset;
52+
var poffsetIsArray = Array.isArray(poffset);
5253

53-
d3.select(this).selectAll('g.point')
54+
sel.selectAll('g.point')
5455
.data(Lib.identity)
5556
.enter().append('g').classed('point', true)
5657
.each(function(di, i) {
@@ -69,12 +70,18 @@ module.exports = function plot(gd, plotinfo, cdbar) {
6970
y1 = ya.c2p(p1, true);
7071
x0 = xa.c2p(s0, true);
7172
x1 = xa.c2p(s1, true);
73+
74+
// for selections
75+
di.ct = [x1, (y0 + y1) / 2];
7276
}
7377
else {
7478
x0 = xa.c2p(p0, true);
7579
x1 = xa.c2p(p1, true);
7680
y0 = ya.c2p(s0, true);
7781
y1 = ya.c2p(s1, true);
82+
83+
// for selections
84+
di.ct = [(x0 + x1) / 2, y1];
7885
}
7986

8087
if(!isNumeric(x0) || !isNumeric(x1) ||

‎src/traces/bar/select.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Copyright 2012-2017, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
12+
13+
module.exports = function selectPoints(searchInfo, polygon) {
14+
var cd = searchInfo.cd;
15+
var selection = [];
16+
var trace = cd[0].trace;
17+
var node3 = cd[0].node3;
18+
var i;
19+
20+
if(trace.visible !== true) return;
21+
22+
if(polygon === false) {
23+
// clear selection
24+
for(i = 0; i < cd.length; i++) {
25+
cd[i].dim = 0;
26+
}
27+
} else {
28+
for(i = 0; i < cd.length; i++) {
29+
var di = cd[i];
30+
31+
if(polygon.contains(di.ct)) {
32+
selection.push({
33+
pointNumber: i,
34+
x: di.x,
35+
y: di.y
36+
});
37+
di.dim = 0;
38+
} else {
39+
di.dim = 1;
40+
}
41+
}
42+
}
43+
44+
node3.selectAll('.point').style('opacity', function(d) {
45+
return d.dim ? DESELECTDIM : 1;
46+
});
47+
node3.selectAll('text').style('opacity', function(d) {
48+
return d.dim ? DESELECTDIM : 1;
49+
});
50+
51+
return selection;
52+
};

‎src/traces/histogram/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ Histogram.plot = require('../bar/plot');
3535
Histogram.style = require('../bar/style');
3636
Histogram.colorbar = require('../scatter/colorbar');
3737
Histogram.hoverPoints = require('../bar/hover');
38+
Histogram.selectPoints = require('../bar/select');
3839

3940
Histogram.moduleType = 'trace';
4041
Histogram.name = 'histogram';

‎test/jasmine/tests/select_test.js‎

Lines changed: 127 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -414,8 +414,13 @@ describe('Test select box and lasso per trace:', function() {
414414
pts.forEach(function(p, i) {
415415
var e = expected[i] || [];
416416
keys.forEach(function(k, j) {
417-
expect(p[k])
418-
.toBe(e[j], msg + 'selected pt ' + i + ' - ' + k + ' val');
417+
var msgFull = msg + 'selected pt ' + i + ' - ' + k + ' val';
418+
419+
if(typeof e[j] === 'number') {
420+
expect(p[k]).toBeCloseTo(e[j], 1, msgFull);
421+
} else {
422+
expect(p[k]).toBe(e[j], msgFull);
423+
}
419424
});
420425
});
421426

@@ -428,11 +433,18 @@ describe('Test select box and lasso per trace:', function() {
428433
var callNumber = 0;
429434

430435
return function(expected) {
431-
var msg = '(call #' + callNumber + ') ';
432-
var ranges = (selectedData.range || {})[subplot] || [];
433-
434-
expect(ranges)
435-
.toBeCloseTo2DArray(expected, tol, msg + 'select box range for ' + subplot);
436+
var msg = '(call #' + callNumber + ') select box range ';
437+
var ranges = selectedData.range || {};
438+
439+
if(subplot) {
440+
expect(ranges[subplot] || [])
441+
.toBeCloseTo2DArray(expected, tol, msg + 'for ' + subplot);
442+
} else {
443+
expect(ranges.x || [])
444+
.toBeCloseToArray(expected[0], tol, msg + 'x coords');
445+
expect(ranges.y || [])
446+
.toBeCloseToArray(expected[1], tol, msg + 'y coords');
447+
}
436448

437449
callNumber++;
438450
};
@@ -443,11 +455,18 @@ describe('Test select box and lasso per trace:', function() {
443455
var callNumber = 0;
444456

445457
return function(expected) {
446-
var msg = '(call #' + callNumber + ') ';
447-
var lassoPoints = (selectedData.lassoPoints || {})[subplot] || [];
448-
449-
expect(lassoPoints)
450-
.toBeCloseTo2DArray(expected, tol, msg + 'lasso points for ' + subplot);
458+
var msg = '(call #' + callNumber + ') lasso points ';
459+
var lassoPoints = selectedData.lassoPoints || {};
460+
461+
if(subplot) {
462+
expect(lassoPoints[subplot] || [])
463+
.toBeCloseTo2DArray(expected, tol, msg + 'for ' + subplot);
464+
} else {
465+
expect(lassoPoints.x || [])
466+
.toBeCloseToArray(expected[0], tol, msg + 'x coords');
467+
expect(lassoPoints.y || [])
468+
.toBeCloseToArray(expected[1], tol, msg + 'y coords');
469+
}
451470

452471
callNumber++;
453472
};
@@ -708,4 +727,100 @@ describe('Test select box and lasso per trace:', function() {
708727
.catch(fail)
709728
.then(done);
710729
}, LONG_TIMEOUT_INTERVAL);
730+
731+
it('should work for bar traces', function(done) {
732+
var assertPoints = makeAssertPoints(['curveNumber', 'x', 'y']);
733+
var assertRanges = makeAssertRanges();
734+
var assertLassoPoints = makeAssertLassoPoints();
735+
736+
var fig = Lib.extendDeep({}, require('@mocks/0'));
737+
fig.layout.dragmode = 'lasso';
738+
739+
Plotly.plot(gd, fig)
740+
.then(function() {
741+
return _run(
742+
[[350, 200], [400, 200], [400, 250], [350, 250], [350, 200]],
743+
function() {
744+
assertPoints([
745+
[0, 4.9, 0.371], [0, 5, 0.368], [0, 5.1, 0.356], [0, 5.2, 0.336],
746+
[0, 5.3, 0.309], [0, 5.4, 0.275], [0, 5.5, 0.235], [0, 5.6, 0.192],
747+
[0, 5.7, 0.145],
748+
[1, 5.1, 0.485], [1, 5.2, 0.409], [1, 5.3, 0.327],
749+
[1, 5.4, 0.24], [1, 5.5, 0.149], [1, 5.6, 0.059],
750+
[2, 4.9, 0.473], [2, 5, 0.368], [2, 5.1, 0.258],
751+
[2, 5.2, 0.146], [2, 5.3, 0.036]
752+
]);
753+
assertLassoPoints([
754+
[4.87, 5.74, 5.74, 4.87, 4.87],
755+
[0.53, 0.53, -0.02, -0.02, 0.53]
756+
]);
757+
},
758+
null, LASSOEVENTS, 'bar lasso'
759+
);
760+
})
761+
.then(function() {
762+
return Plotly.relayout(gd, 'dragmode', 'select');
763+
})
764+
.then(function() {
765+
return _run(
766+
[[350, 200], [370, 220]],
767+
function() {
768+
assertPoints([
769+
[0, 4.9, 0.371], [0, 5, 0.368], [0, 5.1, 0.356], [0, 5.2, 0.336],
770+
[1, 5.1, 0.485], [1, 5.2, 0.41],
771+
[2, 4.9, 0.473], [2, 5, 0.37]
772+
]);
773+
assertRanges([[4.87, 5.22], [0.31, 0.53]]);
774+
},
775+
null, BOXEVENTS, 'bar select'
776+
);
777+
})
778+
.catch(fail)
779+
.then(done);
780+
});
781+
782+
it('should work for histogram traces', function(done) {
783+
var assertPoints = makeAssertPoints(['curveNumber', 'x', 'y']);
784+
var assertRanges = makeAssertRanges();
785+
var assertLassoPoints = makeAssertLassoPoints();
786+
787+
var fig = Lib.extendDeep({}, require('@mocks/hist_grouped'));
788+
fig.layout.dragmode = 'lasso';
789+
fig.layout.width = 600;
790+
fig.layout.height = 500;
791+
792+
Plotly.plot(gd, fig)
793+
.then(function() {
794+
return _run(
795+
[[200, 200], [400, 200], [400, 350], [200, 350], [200, 200]],
796+
function() {
797+
assertPoints([
798+
[0, 1.8, 2], [1, 2.2, 1], [1, 3.2, 1]
799+
]);
800+
assertLassoPoints([
801+
[1.66, 3.59, 3.59, 1.66, 1.66],
802+
[2.17, 2.17, 0.69, 0.69, 2.17]
803+
]);
804+
},
805+
null, LASSOEVENTS, 'histogram lasso'
806+
);
807+
})
808+
.then(function() {
809+
return Plotly.relayout(gd, 'dragmode', 'select');
810+
})
811+
.then(function() {
812+
return _run(
813+
[[200, 200], [400, 350]],
814+
function() {
815+
assertPoints([
816+
[0, 1.8, 2], [1, 2.2, 1], [1, 3.2, 1]
817+
]);
818+
assertRanges([[1.66, 3.59], [0.69, 2.17]]);
819+
},
820+
null, BOXEVENTS, 'bar select'
821+
);
822+
})
823+
.catch(fail)
824+
.then(done);
825+
});
711826
});

0 commit comments

Comments
 (0)