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

Histogram events & bin hover label improvements #2113

Merged
merged 18 commits into from
Oct 24, 2017
Merged

Histogram events & bin hover label improvements #2113

Show file tree
Hide file tree
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
25 changes: 21 additions & 4 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1063,14 +1063,13 @@ function cleanPoint(d, hovermode) {
d.y0 = Lib.constrain(d.y0, 0, d.ya._length);
d.y1 = Lib.constrain(d.y1, 0, d.ya._length);

// and convert the x and y label values into objects
// formatted as text, with font info
// and convert the x and y label values into formatted text
if(d.xLabelVal !== undefined) {
d.xLabel = ('xLabel' in d) ? d.xLabel : Axes.hoverLabelText(d.xa, d.xLabelVal);
d.xLabel = ('xLabel' in d) ? d.xLabel : getDimText(d, 'x');
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@etpinard I made getDimText in parallel with you adding d.(x|y)Label and Axes.hoverLabelText - I suppose in principle we could use d.(x|y)Label for this too instead of adding d.(x|y)LabelVal(0|1), maybe that would actually be simpler... let me take a look.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

yeah, better to use d.(x|x)Label -> 51ad8c2

Copy link
Contributor

Choose a reason for hiding this comment

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

Much better in 51ad8c2

Thanks!

d.xVal = d.xa.c2d(d.xLabelVal);
}
if(d.yLabelVal !== undefined) {
d.yLabel = ('yLabel' in d) ? d.yLabel : Axes.hoverLabelText(d.ya, d.yLabelVal);
d.yLabel = ('yLabel' in d) ? d.yLabel : getDimText(d, 'y');
d.yVal = d.ya.c2d(d.yLabelVal);
}
if(d.zLabelVal !== undefined) d.zLabel = String(d.zLabelVal);
Expand Down Expand Up @@ -1113,6 +1112,24 @@ function cleanPoint(d, hovermode) {
return d;
}

// get text for either a value range (val0 .. val1) if it exists,
// or single value (val) if the range does not exist
function getDimText(d, axLetter) {
var val = d[axLetter + 'LabelVal'];
var val0 = d[axLetter + 'LabelVal0'];
var val1 = d[axLetter + 'LabelVal1'];
var ax = d[axLetter + 'a'];

if(val0 !== undefined && val1 !== undefined) {
var text0 = Axes.hoverLabelText(ax, val0);
var text1 = Axes.hoverLabelText(ax, val1);

if(text0 === text1) return text0;
return text0 + ' - ' + text1;
}
return Axes.hoverLabelText(ax, val);
}

function createSpikelines(hoverData, opts) {
var hovermode = opts.hovermode;
var container = opts.container;
Expand Down
102 changes: 54 additions & 48 deletions src/traces/bar/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,13 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
var cd = pointData.cd;
var trace = cd[0].trace;
var t = cd[0].t;
var xa = pointData.xa;
var ya = pointData.ya;

var posVal, thisBarMinPos, thisBarMaxPos, minPos, maxPos, dx, dy;
var posVal, sizeVal, posLetter, sizeLetter, dx, dy;

var positionFn = function(di) {
return Fx.inbox(minPos(di) - posVal, maxPos(di) - posVal);
};

if(trace.orientation === 'h') {
posVal = yval;
thisBarMinPos = function(di) { return di.y - di.w / 2; };
thisBarMaxPos = function(di) { return di.y + di.w / 2; };
dx = function(di) {
// add a gradient so hovering near the end of a
// bar makes it a little closer match
return Fx.inbox(di.b - xval, di.x - xval) + (di.x - xval) / (di.x - di.b);
};
dy = positionFn;
}
else {
posVal = xval;
thisBarMinPos = function(di) { return di.x - di.w / 2; };
thisBarMaxPos = function(di) { return di.x + di.w / 2; };
dy = function(di) {
return Fx.inbox(di.b - yval, di.y - yval) + (di.y - yval) / (di.y - di.b);
};
dx = positionFn;
}
function thisBarMinPos(di) { return di[posLetter] - di.w / 2; }
function thisBarMaxPos(di) { return di[posLetter] + di.w / 2; }

minPos = (hovermode === 'closest') ?
var minPos = (hovermode === 'closest') ?
thisBarMinPos :
function(di) {
/*
Expand All @@ -60,44 +36,74 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
return Math.min(thisBarMinPos(di), di.p - t.bargroupwidth / 2);
};

maxPos = (hovermode === 'closest') ?
var maxPos = (hovermode === 'closest') ?
thisBarMaxPos :
function(di) {
return Math.max(thisBarMaxPos(di), di.p + t.bargroupwidth / 2);
};

function positionFn(di) {
return Fx.inbox(minPos(di) - posVal, maxPos(di) - posVal);
}

function sizeFn(di) {
// add a gradient so hovering near the end of a
// bar makes it a little closer match
return Fx.inbox(di.b - sizeVal, di[sizeLetter] - sizeVal) +
(di[sizeLetter] - sizeVal) / (di[sizeLetter] - di.b);
}

if(trace.orientation === 'h') {
posVal = yval;
sizeVal = xval;
posLetter = 'y';
sizeLetter = 'x';
dx = sizeFn;
dy = positionFn;
}
else {
posVal = xval;
sizeVal = yval;
posLetter = 'x';
sizeLetter = 'y';
dy = sizeFn;
dx = positionFn;
}

var pa = pointData[posLetter + 'a'];
var sa = pointData[sizeLetter + 'a'];

var distfn = Fx.getDistanceFunction(hovermode, dx, dy);
Fx.getClosest(cd, distfn, pointData);

// skip the rest (for this trace) if we didn't find a close point
if(pointData.index === false) return;

// the closest data point
var index = pointData.index,
di = cd[index],
mc = di.mcc || trace.marker.color,
mlc = di.mlcc || trace.marker.line.color,
mlw = di.mlw || trace.marker.line.width;
var index = pointData.index;
var di = cd[index];
var mc = di.mcc || trace.marker.color;
var mlc = di.mlcc || trace.marker.line.color;
var mlw = di.mlw || trace.marker.line.width;

if(Color.opacity(mc)) pointData.color = mc;
else if(Color.opacity(mlc) && mlw) pointData.color = mlc;

var size = (trace.base) ? di.b + di.s : di.s;
if(trace.orientation === 'h') {
pointData.x0 = pointData.x1 = xa.c2p(di.x, true);
pointData.xLabelVal = size;

pointData.y0 = ya.c2p(minPos(di), true);
pointData.y1 = ya.c2p(maxPos(di), true);
pointData.yLabelVal = di.p;
pointData[sizeLetter + '0'] = pointData[sizeLetter + '1'] = sa.c2p(di[sizeLetter], true);
pointData[sizeLetter + 'LabelVal'] = size;

pointData[posLetter + '0'] = pa.c2p(minPos(di), true);
pointData[posLetter + '1'] = pa.c2p(maxPos(di), true);
pointData[posLetter + 'LabelVal'] = di.p;
// for histograms
if(di.p0 !== undefined && di.p1 !== undefined) {
pointData[posLetter + 'LabelVal0'] = di.p0;
pointData[posLetter + 'LabelVal1'] = di.p1;
}
else {
pointData.y0 = pointData.y1 = ya.c2p(di.y, true);
pointData.yLabelVal = size;

pointData.x0 = xa.c2p(minPos(di), true);
pointData.x1 = xa.c2p(maxPos(di), true);
pointData.xLabelVal = di.p;
}
// for histograms
if(di.pts) pointData.pts = di.pts;

fillHoverText(di, trace, pointData);
ErrorBars.hoverInfo(di, trace, pointData);
Expand Down
Loading