Skip to content

Array support for trace hoverinfo #1761

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 10 commits into from
Jun 6, 2017
Merged

Array support for trace hoverinfo #1761

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
aab3366
implement arrayOk hoverinfo in Fx.hover
etpinard Jun 5, 2017
2acf548
rm obsolete gd.data.length -> pointData.name logic in Fx.hover
etpinard Jun 5, 2017
b649b11
fix scattercarpet hoverinfo flags declaration
etpinard Jun 6, 2017
7ed8681
add Lib.coerceHoverinfo shortcut
etpinard Jun 6, 2017
371d31e
use Fx.castHoverOption to setup pie loneHover args
etpinard Jun 6, 2017
e8a9ddd
add arrayOk support for hoverinfo for gl3d, gl2d and pie traces
etpinard Jun 6, 2017
3c693a0
make findArrayAttributes track arrayOk attrs in base trace attrs
etpinard Jun 6, 2017
d7999e2
'fill' fx calcdata items instead of 'merging' them
etpinard Jun 6, 2017
3c3fda4
:dolls: for Lib.mergeArray vs Lib.fillArray
etpinard Jun 6, 2017
d1f03c0
fix typo in :dolls:
etpinard Jun 6, 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
31 changes: 29 additions & 2 deletions src/components/fx/calc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,33 @@

var Lib = require('../../lib');
var Registry = require('../../registry');
var baseAttrs = require('../../plots/attributes');

module.exports = function calc(gd) {
var calcdata = gd.calcdata;
var fullLayout = gd._fullLayout;

function makeCoerceHoverInfo(fullTrace) {
var moduleAttrs = fullTrace._module.attributes;
var attrs = moduleAttrs.hoverinfo ?
{hoverinfo: moduleAttrs.hoverinfo} :
baseAttrs;
var valObj = attrs.hoverinfo;
var dflt;

if(fullLayout._dataLength === 1) {
var flags = valObj.dflt === 'all' ?
valObj.flags.slice() :
valObj.dflt.split('+');

flags.splice(flags.indexOf('name'), 1);
dflt = flags.join('+');
}

return function(val) {
return Lib.coerce({hoverinfo: val}, {}, attrs, 'hoverinfo', dflt);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This here coerces hoverinfo items with no valid flags to 'all' if gd.data.length > 1 or all flags but 'name' on single-trace graphs. For example,

hoveinfo: ['sda', null, 'hello+sup']

// assuming more than one trace,
// => gets coerced to
hoverinfo: ['all', 'all', 'all']

This is debatable I feel. Perhaps, hoverinfo items with no valid flags should get coerced to 'none' instead? This would be more in line with e.g. marker.color where

marker.color: ['red', null, 'blue']

// gets coerced to
marker.color: ['red', '#444' /* i.e. Color.defaultLine */, 'blue']

I'm currently leaning toward the second option, but I have no strong opinion.

Copy link
Collaborator

Choose a reason for hiding this comment

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

I think as you have it is probably correct - an invalid entry gets the default behavior, which is 'all' or all but name. This could come in handy, in as far as the default is really what you want most of the time, for tweaking hoverinfo of just a few points by providing those in the array and leaving the rest of the array undefined or null.

};
}

for(var i = 0; i < calcdata.length; i++) {
var cd = calcdata[i];
Expand All @@ -22,6 +46,7 @@ module.exports = function calc(gd) {

var mergeFn = Registry.traceIs(trace, '2dMap') ? paste : Lib.mergeArray;

mergeFn(trace.hoverinfo, cd, 'hi', makeCoerceHoverInfo(trace));
mergeFn(trace.hoverlabel.bgcolor, cd, 'hbg');
mergeFn(trace.hoverlabel.bordercolor, cd, 'hbc');
mergeFn(trace.hoverlabel.font.size, cd, 'hts');
Expand All @@ -30,8 +55,10 @@ module.exports = function calc(gd) {
}
};

function paste(traceAttr, cd, cdAttr) {
function paste(traceAttr, cd, cdAttr, fn) {
fn = fn || Lib.identity;

if(Array.isArray(traceAttr)) {
cd[0][cdAttr] = traceAttr;
cd[0][cdAttr] = fn(traceAttr);
}
}
57 changes: 30 additions & 27 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,11 +354,11 @@ function _hover(gd, evt, subplot) {
trace: trace,
xa: xaArray[subploti],
ya: yaArray[subploti],
name: (gd.data.length > 1 || trace.hoverinfo.indexOf('name') !== -1) ? trace.name : undefined,
// point properties - override all of these
index: false, // point index in trace - only used by plotly.js hoverdata consumers
distance: Math.min(distance, constants.MAXDIST), // pixel distance or pseudo-distance
color: Color.defaultLine, // trace color
name: trace.name,
x0: undefined,
x1: undefined,
y0: undefined,
Expand Down Expand Up @@ -558,7 +558,7 @@ function createHoverText(hoverData, opts) {
// to have common labels
var i, traceHoverinfo;
for(i = 0; i < hoverData.length; i++) {
traceHoverinfo = hoverData[i].trace.hoverinfo;
traceHoverinfo = hoverData[i].hoverinfo || hoverData[i].trace.hoverinfo;
var parts = traceHoverinfo.split('+');
if(parts.indexOf('all') === -1 &&
parts.indexOf(hovermode) === -1) {
Expand Down Expand Up @@ -724,7 +724,9 @@ function createHoverText(hoverData, opts) {
else if(d.yLabel === undefined) text = d.xLabel;
else text = '(' + d.xLabel + ', ' + d.yLabel + ')';

if(d.text && !Array.isArray(d.text)) text += (text ? '<br>' : '') + d.text;
if(d.text && !Array.isArray(d.text)) {
text += (text ? '<br>' : '') + d.text;
}

// if 'text' is empty at this point,
// put 'name' in main label and don't show secondary label
Expand Down Expand Up @@ -1056,6 +1058,30 @@ function cleanPoint(d, hovermode) {
var cd0 = d.cd[0];
var cd = d.cd[d.index] || {};

function fill(key, calcKey, traceKey) {
var val;

if(cd[calcKey]) {
val = cd[calcKey];
} else if(cd0[calcKey]) {
var arr = cd0[calcKey];
if(Array.isArray(arr) && Array.isArray(arr[d.index[0]])) {
val = arr[d.index[0]][d.index[1]];
}
} else {
val = Lib.nestedProperty(trace, traceKey).get();
}

if(val) d[key] = val;
}

fill('hoverinfo', 'hi', 'hoverinfo');
fill('color', 'hbg', 'hoverlabel.bgcolor');
fill('borderColor', 'hbc', 'hoverlabel.bordercolor');
fill('fontFamily', 'htf', 'hoverlabel.font.family');
fill('fontSize', 'hts', 'hoverlabel.font.size');
fill('fontColor', 'htc', 'hoverlabel.font.color');

d.posref = hovermode === 'y' ? (d.x0 + d.x1) / 2 : (d.y0 + d.y1) / 2;

// then constrain all the positions to be on the plot
Expand Down Expand Up @@ -1123,7 +1149,7 @@ function cleanPoint(d, hovermode) {
if(hovermode === 'y') d.distance += 1;
}

var infomode = d.trace.hoverinfo;
var infomode = d.hoverinfo || d.trace.hoverinfo;
if(infomode !== 'all') {
infomode = infomode.split('+');
if(infomode.indexOf('x') === -1) d.xLabel = undefined;
Expand All @@ -1133,29 +1159,6 @@ function cleanPoint(d, hovermode) {
if(infomode.indexOf('name') === -1) d.name = undefined;
}

function fill(key, calcKey, traceKey) {
var val;

if(cd[calcKey]) {
val = cd[calcKey];
} else if(cd0[calcKey]) {
var arr = cd0[calcKey];
if(Array.isArray(arr) && Array.isArray(arr[d.index[0]])) {
val = arr[d.index[0]][d.index[1]];
}
} else {
val = Lib.nestedProperty(trace, traceKey).get();
}

if(val) d[key] = val;
}

fill('color', 'hbg', 'hoverlabel.bgcolor');
fill('borderColor', 'hbc', 'hoverlabel.bordercolor');
fill('fontFamily', 'htf', 'hoverlabel.font.family');
fill('fontSize', 'hts', 'hoverlabel.font.size');
fill('fontColor', 'htc', 'hoverlabel.font.color');

return d;
}

Expand Down
2 changes: 1 addition & 1 deletion src/lib/coerce.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ exports.valObjects = {
'Values in `extras` cannot be combined.'
].join(' '),
requiredOpts: ['flags'],
otherOpts: ['dflt', 'extras'],
otherOpts: ['dflt', 'extras', 'arrayOk'],
coerceFunction: function(v, propOut, dflt, opts) {
if(typeof v !== 'string') {
propOut.set(dflt);
Expand Down
16 changes: 14 additions & 2 deletions src/lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,10 +349,22 @@ lib.noneOrAll = function(containerIn, containerOut, attrList) {
}
};

lib.mergeArray = function(traceAttr, cd, cdAttr) {
/** merge data array into calcdata items
*
* @param {array} traceAttr : trace attribute
* @param {object} cd : calcdata trace
* @param {string} cdAttr : calcdata key
* @param {function} [fn] : optional function to apply to each array item
*
*/
lib.mergeArray = function(traceAttr, cd, cdAttr, fn) {
fn = fn || lib.identity;
Copy link
Collaborator

Choose a reason for hiding this comment

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

🐎 I wonder whether it would be worth avoiding fn entirely if it's not provided? Either
cd[i][cdAttr] = fn ? fn(traceAttr[i]) : traceAttr[i];
or even

if(fn) {
    for(i = 0; i < cd.length; i++) cd[i][cdAttr] = fn(traceAttr[i]);
}
else {
    for(i = 0; i < cd.length; i++) cd[i][cdAttr] = traceAttr[i];
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That won't make that much of a difference (at least in Chrome 58)

image

https://gist.github.com/etpinard/4a5c7983a619efb4c98cb927529b9af6

Copy link
Collaborator

Choose a reason for hiding this comment

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

awesome, thanks for checking.


if(Array.isArray(traceAttr)) {
var imax = Math.min(traceAttr.length, cd.length);
for(var i = 0; i < imax; i++) cd[i][cdAttr] = traceAttr[i];
for(var i = 0; i < imax; i++) {
cd[i][cdAttr] = fn(traceAttr[i]);
}
}
};

Expand Down
2 changes: 1 addition & 1 deletion src/plot_api/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,7 @@ exports.swapXYData = function(trace) {
Lib.swapAttrs(trace, ['error_?.color', 'error_?.thickness', 'error_?.width']);
}
}
if(trace.hoverinfo) {
if(typeof trace.hoverinfo === 'string') {
var hoverInfoParts = trace.hoverinfo.split('+');
for(i = 0; i < hoverInfoParts.length; i++) {
if(hoverInfoParts[i] === 'x') hoverInfoParts[i] = 'y';
Expand Down
1 change: 1 addition & 0 deletions src/plots/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ module.exports = {
role: 'info',
flags: ['x', 'y', 'z', 'text', 'name'],
extras: ['all', 'none', 'skip'],
arrayOk: true,
dflt: 'all',
description: [
'Determines which trace information appear on hover.',
Expand Down
56 changes: 46 additions & 10 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 @@ -154,7 +154,7 @@ describe('hover info', function() {
expect(d3.selectAll('g.axistext').size()).toEqual(1);
expect(d3.selectAll('g.hovertext').size()).toEqual(1);
expect(d3.selectAll('g.axistext').select('text').html()).toEqual('0.388');
expect(d3.selectAll('g.hovertext').select('text').selectAll('tspan').size()).toEqual(2);
expect(d3.selectAll('g.hovertext').select('text.nums').selectAll('tspan').size()).toEqual(2);
expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][0].innerHTML).toEqual('1');
expect(d3.selectAll('g.hovertext').selectAll('tspan')[0][1].innerHTML).toEqual('hover text');
});
Expand Down Expand Up @@ -1034,14 +1034,18 @@ describe('Test hover label custom styling:', function() {
function assertLabel(className, expectation) {
var g = d3.select('g.' + className);

var path = g.select('path');
expect(path.style('fill')).toEqual(expectation.path[0], 'bgcolor');
expect(path.style('stroke')).toEqual(expectation.path[1], 'bordercolor');

var text = g.select({hovertext: 'text.nums', axistext: 'text'}[className]);
expect(parseInt(text.style('font-size'))).toEqual(expectation.text[0], 'font.size');
expect(text.style('font-family').split(',')[0]).toEqual(expectation.text[1], 'font.family');
expect(text.style('fill')).toEqual(expectation.text[2], 'font.color');
if(expectation === null) {
expect(g.size()).toBe(0);
} else {
var path = g.select('path');
expect(path.style('fill')).toEqual(expectation.path[0], 'bgcolor');
expect(path.style('stroke')).toEqual(expectation.path[1], 'bordercolor');

var text = g.select({hovertext: 'text.nums', axistext: 'text'}[className]);
expect(parseInt(text.style('font-size'))).toEqual(expectation.text[0], 'font.size');
expect(text.style('font-family').split(',')[0]).toEqual(expectation.text[1], 'font.family');
expect(text.style('fill')).toEqual(expectation.text[2], 'font.color');
}
}

function assertPtLabel(expectation) {
Expand Down Expand Up @@ -1112,8 +1116,40 @@ describe('Test hover label custom styling:', function() {
text: [13, 'Arial', 'rgb(255, 255, 255)']
});

// test arrayOk case
return Plotly.restyle(gd, 'hoverinfo', [['skip', 'name', 'x']]);
})
.then(function() {
_hover(gd, { xval: gd._fullData[0].x[0] });

assertPtLabel(null);
assertCommonLabel(null);
})
.then(function() {
_hover(gd, { xval: gd._fullData[0].x[1] });

assertPtLabel({
path: ['rgb(255, 255, 255)', 'rgb(68, 68, 68)'],
text: [20, 'Arial', 'rgb(0, 128, 0)']
});
assertCommonLabel(null);
})
.then(function() {
_hover(gd, { xval: gd._fullData[0].x[2] });

assertPtLabel(null);
assertCommonLabel({
path: ['rgb(255, 255, 255)', 'rgb(255, 255, 255)'],
text: [13, 'Arial', 'rgb(255, 255, 255)']
});

// test base case
return Plotly.update(gd, { hoverlabel: null }, { hoverlabel: null });
return Plotly.update(gd, {
hoverlabel: null,
hoverinfo: null
}, {
hoverlabel: null
});
})
.then(function() {
_hover(gd, { xval: gd._fullData[0].x[0] });
Expand Down