Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Box points hover & select #2094

Merged
merged 19 commits into from
Oct 19, 2017
Merged

Box points hover & select #2094

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
cfc8725
lint (mostly var\n , -> var\n var blocks)
etpinard Oct 16, 2017
53c446b
revamp Box.calc and Box.plot handling of boxpoints
etpinard Oct 16, 2017
581f3fa
add lasso/select dragmode support to box traces
etpinard Oct 17, 2017
e59f283
flatten box test suite
etpinard Oct 17, 2017
5c58049
add some box hover tests
etpinard Oct 17, 2017
aef61ae
introduce box 'hoveron'
etpinard Oct 17, 2017
d352fa5
add 'text' attribute to box traces
etpinard Oct 17, 2017
6a878b0
more linting in Box.plot
etpinard Oct 17, 2017
0027b84
Merge branch 'master' into boxpoints-hover-select
etpinard Oct 17, 2017
a1ea1e8
fixup box hoveron description
etpinard Oct 18, 2017
6bfcbe0
make 'boxes+points' the box hoveron dflt
etpinard Oct 18, 2017
9ca410a
improve `boxpoints: false` default logic
etpinard Oct 18, 2017
7e44c9c
add `boxmode: 'overlay'` hover test case
etpinard Oct 18, 2017
f228a5e
aj-proof box hover logic
etpinard Oct 18, 2017
b4d8044
hide modebar select2d & lasso2d buttons for boxes w/o 'all' boxpoints
etpinard Oct 18, 2017
9e69900
rm useless 'c' value in scattercarper point event data
etpinard Oct 19, 2017
8901528
report coords in input-data space in pt event data
etpinard Oct 19, 2017
b66628e
introduce Axes.hoverLabelText
etpinard Oct 19, 2017
a3ec75a
add prefix box stats hover labels
etpinard Oct 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/traces/box/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,16 @@ module.exports = {
'missing and the position axis is categorical'
].join(' ')
},
text: extendFlat({}, scatterAttrs.text, {
Copy link
Contributor Author

@etpinard etpinard Oct 17, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

text is expected to be an array as long as the sample array y (x) for vertical (horizontal) box plots, matching each sample pt one-to-one.

description: [
'Sets the text elements associated with each sample value.',
'If a single string, the same string appears over',
'all the data points.',
'If an array of string, the items are mapped in order to the',
'this trace\'s (x,y) coordinates.',
'To be seen, trace `hoverinfo` must contain a *text* flag.'
].join(' ')
}),
whiskerwidth: {
valType: 'number',
min: 0,
Expand Down
13 changes: 13 additions & 0 deletions src/traces/box/calc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ module.exports = function calc(gd, trace) {
var n = Lib.findBin(pos[i], posBins);
if(n >= 0 && n < pLen) {
var pt = {v: v, i: i};
Copy link
Contributor Author

@etpinard etpinard Oct 17, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This here was the key to make box point hover and selection somewhat clean.

Box calcdata traces have one item per box to be displayed. Box points data-esque array of objects used to be created during Box.plot, now the structure is setup here. Note that it is important to track the original sample pt index (that i above) to convert hovered are selected calcdata items to event data pointNumber corresponding to indices in the input x/y sample arrays

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

... probably best to review this file as a whole:

https://github.com/plotly/plotly.js/blob/6a878b0eef3e52332bd84eca40d024eec1219264/src/traces/box/calc.js

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely nice and clean - I was curious whether this degraded performance for large data sets, but it looks like very little if at all

function r(n) { var v = 0; for(var i = 0; i < n; i++) v += Math.random(); return v; }
function a(n, m) { var out = new Array(n); for(var i = 0; i < n; i++) out[i] = r(m); return out; }
var y = a(1000000, 10)
// I had to patch timeit to support n = 1
timeit(function() { Plotly.newPlot(gd,[{type: 'box', y: y, jitter: 0.5, hoveron: 'points'}]) }, 1)

On my computer 1 million points (of which ~5k are outliers) takes ~3 sec, and difference between this branch and master is within the noise (~10% or less)

Copy link
Contributor Author

@etpinard etpinard Oct 18, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(~10% or less)

Thanks for taking a look at this 🐎

arraysToCalcdata(pt, trace, i);
ptsPerBin[n].push(pt);
}
}
Expand Down Expand Up @@ -176,6 +177,18 @@ function initNestedArray(len) {
return arr;
}

function arraysToCalcdata(pt, trace, i) {
var trace2calc = {
text: 'tx'
};

for(var k in trace2calc) {
if(Array.isArray(trace[k])) {
pt[trace2calc[k]] = trace[k][i];
}
}
}

function sortByVal(a, b) { return a.v - b.v; }

function extractVal(o) { return o.v; }
1 change: 1 addition & 0 deletions src/traces/box/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,5 +72,6 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
}
}

coerce('text');
coerce('hoveron');
};
2 changes: 2 additions & 0 deletions src/traces/box/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ var Axes = require('../../plots/cartesian/axes');
var Lib = require('../../lib');
var Fx = require('../../components/fx');
var Color = require('../../components/color');
var fillHoverText = require('../scatter/fill_hover_text');

module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
var cd = pointData.cd;
Expand Down Expand Up @@ -170,6 +171,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
yLabelVal: pt.y
});

fillHoverText(pt, trace, pointData2);
closeData.push(pointData2);
}
}
Expand Down
27 changes: 27 additions & 0 deletions test/jasmine/tests/box_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,33 @@ describe('Test box hover:', function() {
'', '', '', '', '', '', '', '', '', '', 'radishes'
],
axis: 'day 1'
}, {
desc: 'text items on hover',
patch: function(fig) {
fig.data.forEach(function(trace) {
trace.boxpoints = 'all';
trace.hoveron = 'points';
trace.text = trace.y.map(function(v) { return 'look:' + v; });
});
fig.layout.hovermode = 'closest';
return fig;
},
nums: ['(day 1, 0.7)\nlook:0.7', '(day 1, 0.6)\nlook:0.6', '(day 1, 0.6)\nlook:0.6'],
name: ['radishes', 'radishes', 'radishes']
}, {
desc: 'only text items on hover',
patch: function(fig) {
fig.data.forEach(function(trace) {
trace.boxpoints = 'all';
trace.hoveron = 'points';
trace.text = trace.y.map(function(v) { return 'look:' + v; });
trace.hoverinfo = 'text';
});
fig.layout.hovermode = 'closest';
return fig;
},
nums: ['look:0.7', 'look:0.6', 'look:0.6'],
name: ['', '', '']
}].forEach(function(specs) {
it('should generate correct hover labels ' + specs.desc, function(done) {
run(specs).catch(fail).then(done);
Expand Down