Skip to content

Histogram events & bin hover label improvements #2113

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

Merged
merged 18 commits into from
Oct 24, 2017
Merged

Histogram events & bin hover label improvements #2113

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
59b6463
let timeit work with n=1
alexcjohnson Oct 18, 2017
6dc9904
give Lib.findBin a tiny buffer for on-the-line points
alexcjohnson Oct 19, 2017
ccf1a76
update histograms to include input point numbers in events and smart …
alexcjohnson Oct 19, 2017
1b356d2
lint histogram2d calc
alexcjohnson Oct 20, 2017
8f8add1
:palm_tree: histogram2d calc
alexcjohnson Oct 20, 2017
7686096
refactor bar/hist hover
alexcjohnson Oct 20, 2017
8d36d81
factor out bin_label_vals so histogram2d can use it too
alexcjohnson Oct 20, 2017
a7e2f32
extend event data and bin label improvements to histogram2d
alexcjohnson Oct 20, 2017
6b74fbe
:hocho: TODOs we've done
alexcjohnson Oct 20, 2017
b91d1cb
exclude CDFs from new histogram event & label features
alexcjohnson Oct 20, 2017
ad0e08f
limit the number of extra digits we give to histogram bin labels
alexcjohnson Oct 23, 2017
6cb4e71
test bin_label_vals
alexcjohnson Oct 23, 2017
7581567
use unicode minus in `Axes.hoverLabelText`
alexcjohnson Oct 23, 2017
51ad8c2
get rid of (x|y)LabelVal(0|1), in favor of (x|y)Label
alexcjohnson Oct 23, 2017
3aa03f7
tests of histogram hover label range format, and log-negative format
alexcjohnson Oct 23, 2017
cc454dc
TODO -> comment
alexcjohnson Oct 24, 2017
2696c1c
test event data for histogram
alexcjohnson Oct 24, 2017
0331a16
test case for category range histogram hover labels
alexcjohnson Oct 24, 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
132 changes: 127 additions & 5 deletions test/jasmine/tests/hover_label_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,12 +458,12 @@ describe('hover info', function() {
});
});

describe('\'hover info for x/y/z traces', function() {
function _hover(gd, xpx, ypx) {
Fx.hover(gd, { xpx: xpx, ypx: ypx }, 'xy');
Lib.clearThrottle();
}
function _hover(gd, xpx, ypx) {
Fx.hover(gd, { xpx: xpx, ypx: ypx }, 'xy');
Lib.clearThrottle();
}

describe('\'hover info for x/y/z traces', function() {
it('should display correct label content', function(done) {
var gd = createGraphDiv();

Expand Down Expand Up @@ -501,6 +501,128 @@ describe('hover info', function() {
});
});

describe('hover info for negative data on a log axis', function() {
it('shows negative data even though it is infinitely off-screen', function(done) {
var gd = createGraphDiv();

Plotly.plot(gd, [{x: [1, 2, 3], y: [1, -5, 10]}], {
yaxis: {type: 'log'},
width: 500,
height: 400,
margin: {l: 0, t: 0, r: 0, b: 0}
})
.then(function() {
_hover(gd, 250, 200);
assertHoverLabelContent({
nums: '\u22125', // unicode minus
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for 🔒 ing this down!

axis: '2'
});
})
.catch(fail)
.then(done);
});
});

describe('histogram hover info', function() {
it('shows the data range when bins have multiple values', function(done) {
var gd = createGraphDiv();

Plotly.plot(gd, [{
x: [0, 2, 3, 4, 5, 6, 7],
xbins: {start: -0.5, end: 8.5, size: 3},
type: 'histogram'
}], {
width: 500,
height: 400,
margin: {l: 0, t: 0, r: 0, b: 0}
})
.then(function() {
_hover(gd, 250, 200);
assertHoverLabelContent({
Copy link
Contributor

Choose a reason for hiding this comment

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

Would mind checking that plotly_hover does emit the correct event data?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Good catch -> tested in 2696c1c

nums: '3',
axis: '3 - 5'
});
})
.catch(fail)
.then(done);
});

it('shows the exact data when bins have single values', function(done) {
var gd = createGraphDiv();

Plotly.plot(gd, [{
// even though the data aren't regularly spaced, each bin only has
// one data value in it so we see exactly that value
x: [0, 0, 3.3, 3.3, 3.3, 7, 7],
xbins: {start: -0.5, end: 8.5, size: 3},
type: 'histogram'
}], {
width: 500,
height: 400,
margin: {l: 0, t: 0, r: 0, b: 0}
})
.then(function() {
_hover(gd, 250, 200);
assertHoverLabelContent({
nums: '3',
axis: '3.3'
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

⚠️ another potentially controversial decision: whenever every bin contains a single unique value, label exactly that value, not a range, even if those single values are not at the same places within the bins. But as soon as you have any bin with two distinct values in it, we use the range logic.

Note: for histogram2d I applied this independently to each axis, not to each brick. So if one x brick has only the point (2, 3) and one above it has only the point (2.1, 4), this will make the x bins show ranges, because that one x bin has multiple values, even though each brick has unique values in it.

Copy link
Contributor

Choose a reason for hiding this comment

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

Nice touch here. I was worried that category histograms would get e.g, apples - lemons bin hover labels. 👌

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

That can happen - but only if the bins actually contain apples and lemons.

Plotly.newPlot(gd, [{
  x: ['apples','apples','apples','lemons','lemons','peaches','peaches','pears'],
  type: 'histogram',
  xbins: {start: -0.5, end: 3.5, size: 2}
}],{
  width: 400,
  height: 400
})

screen shot 2017-10-24 at 11 43 19 am

It's possible to put as many categories as you want into one bin, and as with numbers we'll only show the first and last ones in the label. Never happens automatically since it's in general confusing, but if you want to do it we won't stop you!

Copy link
Contributor

Choose a reason for hiding this comment

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

but if you want to do it we won't stop you!

Cool. Would you mind adding a test case for this situation?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Cool. Would you mind adding a test case for this situation?

0331a16

});
})
.catch(fail)
.then(done);
});
});

describe('histogram2d hover info', function() {
it('shows the data range when bins have multiple values', function(done) {
var gd = createGraphDiv();

Plotly.plot(gd, [{
x: [0, 2, 3, 4, 5, 6, 7],
y: [1, 3, 4, 5, 6, 7, 8],
xbins: {start: -0.5, end: 8.5, size: 3},
ybins: {start: 0.5, end: 9.5, size: 3},
type: 'histogram2d'
}], {
width: 500,
height: 400,
margin: {l: 0, t: 0, r: 0, b: 0}
})
.then(function() {
_hover(gd, 250, 200);
assertHoverLabelContent({
nums: 'x: 3 - 5\ny: 4 - 6\nz: 3'
});
})
.catch(fail)
.then(done);
});

it('shows the exact data when bins have single values', function(done) {
var gd = createGraphDiv();

Plotly.plot(gd, [{
x: [0, 0, 3.3, 3.3, 3.3, 7, 7],
y: [2, 2, 4.2, 4.2, 4.2, 8.8, 8.8],
xbins: {start: -0.5, end: 8.5, size: 3},
ybins: {start: 0.5, end: 9.5, size: 3},
type: 'histogram2d'
}], {
width: 500,
height: 400,
margin: {l: 0, t: 0, r: 0, b: 0}
})
.then(function() {
_hover(gd, 250, 200);
assertHoverLabelContent({
nums: 'x: 3.3\ny: 4.2\nz: 3'
});
})
.catch(fail)
.then(done);
});
});

describe('hoverformat', function() {
var data = [{
x: [1, 2, 3],
Expand Down