Skip to content

fixup hoverinfo & hovertemplate initial, delta and final flags for waterfalls #3963

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 5 commits into from
Jun 17, 2019
Merged

fixup hoverinfo & hovertemplate initial, delta and final flags for waterfalls #3963

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2c60ebb
implement hoverinfo & hovertemplate flags i.e. initial, delta & final…
archmoj Jun 14, 2019
8ed6474
revise waterfall hover formats - remove Final
archmoj Jun 14, 2019
8cca543
edit typo in test
archmoj Jun 14, 2019
8432d8f
keep waterfall totals hover as is - dont add delta for totals
archmoj Jun 17, 2019
0a58836
waterfall hover - dont display redundant info when both final and y|x…
archmoj Jun 17, 2019
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
11 changes: 10 additions & 1 deletion src/traces/waterfall/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@

var barAttrs = require('../bar/attributes');
var lineAttrs = require('../scatter/attributes').line;
var plotAttrs = require('../../plots/attributes');
var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
var constants = require('./constants');
var extendFlat = require('../../lib/extend').extendFlat;
var Color = require('../../components/color');

Expand Down Expand Up @@ -74,7 +77,13 @@ module.exports = {
dy: barAttrs.dy,

hovertext: barAttrs.hovertext,
hovertemplate: barAttrs.hovertemplate,
hovertemplate: hovertemplateAttrs({}, {
keys: constants.eventDataKeys
}),

hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
flags: ['name', 'x', 'y', 'text', 'initial', 'delta', 'final']
}),

textinfo: {
valType: 'flaglist',
Expand Down
17 changes: 17 additions & 0 deletions src/traces/waterfall/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* Copyright 2012-2019, Plotly, Inc.
* All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

'use strict';

module.exports = {
eventDataKeys: [
'initial',
'delta',
'final'
]
};
25 changes: 25 additions & 0 deletions src/traces/waterfall/event_data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* Copyright 2012-2019, Plotly, Inc.
* All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

'use strict';

module.exports = function eventData(out, pt /* , trace, cd, pointNumber */) {
// standard cartesian event data
out.x = 'xVal' in pt ? pt.xVal : pt.x;
out.y = 'yVal' in pt ? pt.yVal : pt.y;

// for funnel
if('initial' in pt) out.initial = pt.initial;
if('delta' in pt) out.delta = pt.delta;
if('final' in pt) out.final = pt.final;

if(pt.xa) out.xaxis = pt.xa;
if(pt.ya) out.yaxis = pt.ya;

return out;
};
44 changes: 35 additions & 9 deletions src/traces/waterfall/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,44 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
var size = (di.isSum) ? di.b + di.s : di.rawS;

if(!di.isSum) {
// format delta numbers:
if(size > 0) {
point.extraText = formatNumber(size) + ' ' + DIRSYMBOL.increasing;
} else if(size < 0) {
point.extraText = '(' + (formatNumber(-size)) + ') ' + DIRSYMBOL.decreasing;
} else {
return;
point.initial = di.b + di.s - size;
point.delta = size;
point.final = point.initial + point.delta;
} else {
point.final = size;
point.initial = di.b;
point.delta = point.final - point.initial;
}

point.finalLabel = formatNumber(point.final);
point.deltaLabel = formatNumber(Math.abs(point.delta));
point.initialLabel = formatNumber(point.initial, 1);

var hoverinfo = di.hi || trace.hoverinfo;
var text = [];
if(hoverinfo && hoverinfo !== 'none' && hoverinfo !== 'skip') {
var isAll = (hoverinfo === 'all');
var parts = hoverinfo.split('+');

var hasFlag = function(flag) { return isAll || parts.indexOf(flag) !== -1; };

if(hasFlag('final') && point.finalLabel !== '') {
text.push('Final: ' + point.finalLabel);
}
if(hasFlag('delta') && point.deltaLabel !== '') {
if(size < 0) {
text.push('(' + point.deltaLabel + ') ' + DIRSYMBOL.decreasing);
Copy link
Contributor

Choose a reason for hiding this comment

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

this here should be the deltaLabel value so that

hoverinfo: 'delta'

and

hovertemplate: '%{delta}'

render the same.

Copy link
Contributor

Choose a reason for hiding this comment

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

As for Final: and Initial: prefixes, they should not be part of finalLabel / initalLabel.

See example:

https://codepen.io/etpinard/pen/ewJNVJ

In fact, those prefixes should only be there when there are more than 1 of 'initial', 'delta' and 'final' flags.

Copy link
Contributor

@etpinard etpinard Jun 14, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

In brief, xLabel should have the default-formatted label text for x.

I'd argue that the (v) around negative deltas should be considered formatting, but the DIRSMBOL suffixes should not.

So in brief,

v = formatNumber(Math.abs(point.delta));
point.deltaLabel = size < 0 ? '(' + v + ')' : v;

// ...

    if(size < 0) {
                text.push(point.deltaLabel + DIRSYMBOL.decreasing))
      } else {
                text.push(point.deltaLabel +  DIRSYMBOL.increasing);
      }
``

} else {
text.push(point.deltaLabel + ' ' + DIRSYMBOL.increasing);
}
}
if(hasFlag('initial') && point.initialLabel !== '') {
text.push('Initial: ' + point.initialLabel);
}
// display initial value
point.extraText += '<br>Initial: ' + formatNumber(di.b + di.s - size);
}

if(text.length) point.extraText = text.join('<br>');

point.color = getTraceColor(trace, di);

return [point];
Expand Down
2 changes: 2 additions & 0 deletions src/traces/waterfall/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ module.exports = {
plot: require('./plot'),
style: require('./style').style,
hoverPoints: require('./hover'),
eventData: require('./event_data'),

selectPoints: require('../bar/select'),

moduleType: 'trace',
Expand Down
80 changes: 71 additions & 9 deletions test/jasmine/tests/waterfall_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1379,13 +1379,72 @@ describe('waterfall hover', function() {
.then(done);
});

it('should turn off percentages with hoveinfo none or skip', function(done) {
gd = createGraphDiv();

var mock = Lib.extendDeep({}, require('@mocks/text_chart_arrays'));
mock.data.forEach(function(t, i) {
t.type = 'waterfall';
if(i === 0) {
t.hoverinfo = 'none';
} else {
t.hoverinfo = 'skip';
}
});

function _hover() {
var evt = { xpx: 125, ypx: 150 };
Fx.hover('graph', evt, 'xy');
}

Plotly.plot(gd, mock)
.then(_hover)
.then(function() {
expect(d3.selectAll('g.hovertext').size()).toBe(0);
})
.catch(failTest)
.then(done);
});

it('should turn on percentages with hoveinfo all', function(done) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like a <ctrl-c><ctrl-v> gone bad, there are no percentages here 😏

Copy link
Contributor Author

@archmoj archmoj Jun 14, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Good eye! It was 2/3am.

gd = createGraphDiv();

var mock = Lib.extendDeep({}, require('@mocks/text_chart_arrays'));
mock.data.forEach(function(t) {
t.type = 'waterfall';
t.base = 1000;
t.hoverinfo = 'all';
});

function _hover() {
var evt = { xpx: 125, ypx: 150 };
Fx.hover('graph', evt, 'xy');
}

Plotly.plot(gd, mock)
.then(_hover)
.then(function() {
assertHoverLabelContent({
nums: [
'1001\nHover text A\nFinal: 1001\n1 ▲\nInitial: 1000',
'1002\nHover text G\nFinal: 1002\n2 ▲\nInitial: 1000',
'1,001.5\na (hover)\nFinal: 1,001.5\n1.5 ▲\nInitial: 1000'
],
name: ['Lines, Marke...', 'Lines and Text', 'missing text'],
axis: '0'
});
})
.catch(failTest)
.then(done);
});

it('should use hovertemplate if specified', function(done) {
gd = createGraphDiv();

var mock = Lib.extendDeep({}, require('@mocks/text_chart_arrays'));
mock.data.forEach(function(t) {
t.type = 'waterfall';
t.hovertemplate = '%{y}<extra></extra>';
t.hovertemplate = t.hovertemplate = 'Value: %{y}<br>SUM: %{final}<br>START: %{initial}<br>DIFF: %{delta}<extra></extra>';
});

function _hover() {
Expand All @@ -1397,11 +1456,14 @@ describe('waterfall hover', function() {
.then(_hover)
.then(function() {
assertHoverLabelContent({
nums: ['1', '2', '1.5'],
nums: [
'Value: 1\nSUM: 1\nSTART: 0\nDIFF: 1',
'Value: 2\nSUM: 2\nSTART: 0\nDIFF: 2',
'Value: 1.5\nSUM: 1.5\nSTART: 0\nDIFF: 1.5'
],
name: ['', '', ''],
axis: '0'
});
// return Plotly.restyle(gd, 'text', ['APPLE', 'BANANA', 'ORANGE']);
})
.catch(failTest)
.then(done);
Expand All @@ -1424,7 +1486,7 @@ describe('waterfall hover', function() {
})
.then(function() {
assertHoverLabelContent({
nums: '2.2\n4.4 ▲\nInitial: −2.2',
nums: '2.2\nFinal: 2.2\n4.4 ▲\nInitial: −2.2',
Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm. So wait Final: is new?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes.

Copy link
Contributor

Choose a reason for hiding this comment

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

Was this a requirement anywhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No. And we could possibly drop that.
But that make it clear what the value is pointing to.

name: '',
axis: 'E'
});
Expand Down Expand Up @@ -1460,31 +1522,31 @@ describe('waterfall hover', function() {
.then(function() {
var out = _hover(gd, 0, 1000.5, 'closest');
expect(out.yLabelVal).toEqual(1002.201);
expect(out.extraText).toEqual(undefined);
expect(out.extraText).toEqual('Final: $1,002.201m<br>$2.2m ▲<br>Initial: $1,000.001m');
Copy link
Contributor

@etpinard etpinard Jun 14, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Why did these expectations change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We did not fill any extra text for blue bars (totals). But it is pretty useful to display this info for them for example when there is a base other than zero.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok, but what does initial and final refer to for total bars?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The base and top of the bar.

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think base/top here represent inital and final values.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Could be displayed in codepen after.

Copy link
Contributor

Choose a reason for hiding this comment

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

I agree that initial and final don't make sense in 'total' cases

expect(out.style).toEqual([0, '#4499FF', 0, 1002.201]);
})
.then(function() {
var out = _hover(gd, 1, 1000.5, 'closest');
expect(out.yLabelVal).toEqual(1001.101);
expect(out.extraText).toEqual('($1.1m) ▼<br>Initial: $1,002.201m');
expect(out.extraText).toEqual('Final: $1,001.101m<br>($1.1m) ▼<br>Initial: $1,002.201m');
expect(out.style).toEqual([1, '#FF4136', 1, 1001.101]);
})
.then(function() {
var out = _hover(gd, 2, 1000.5, 'closest');
expect(out.yLabelVal).toEqual(1001.101);
expect(out.extraText).toEqual(undefined);
expect(out.extraText).toEqual('Final: $1,001.101m<br>$1.1m ▲<br>Initial: $1,000.001m');
expect(out.style).toEqual([2, '#4499FF', 2, 1001.101]);
})
.then(function() {
var out = _hover(gd, 3, 1000.5, 'closest');
expect(out.yLabelVal).toEqual(1004.401);
expect(out.extraText).toEqual('$3.3m ▲<br>Initial: $1,001.101m');
expect(out.extraText).toEqual('Final: $1,004.401m<br>$3.3m ▲<br>Initial: $1,001.101m');
expect(out.style).toEqual([3, '#3D9970', 3, 1004.401]);
})
.then(function() {
var out = _hover(gd, 4, 1000.5, 'closest');
expect(out.yLabelVal).toEqual(1004.401);
expect(out.extraText).toEqual(undefined);
expect(out.extraText).toEqual('Final: $1,004.401m<br>$4.4m ▲<br>Initial: $1,000.001m');
expect(out.style).toEqual([4, '#4499FF', 4, 1004.401]);
})
.catch(failTest)
Expand Down