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

archmoj · 2019-06-14T07:14:24Z

A follow up of #3954, #3958 and to address #3960.
The initial, delta and final displayed in the waterfall hover now could be controlled and turned off using hovertemplate and hoverinfo.

Also to note for consistency the initial values and delta from base is also displayed over the total bars.

Codepen before
Codepen after

@plotly/plotly_js
cc: @nicolaskruchten

… in waterfall similar to PR 3958

nicolaskruchten · 2019-06-14T13:51:26Z

This is cool, but there are some differences between the final text in the on-plot text and the in-hover text:

the triangle is missing in the on-plot text
the negative amounts are in (accounting-format) in the in-hover text

@etpinard what's the right way forward here?

archmoj · 2019-06-14T14:02:25Z

This is cool, but there are some differences between the final text in the on-plot text and the in-hover text:

the triangle is missing in the on-plot text

the negative amounts are in (accounting-format) in the in-hover text

@etpinard what's the right way forward here?

Good call.
Also to note that currently we only display delta values in accounting style.
Should we change anything there feel free to comment here or open a new issue.

etpinard · 2019-06-14T14:29:58Z

This is cool, but there are some differences between the final text in the on-plot text and the in-hover text:

Oh right, we could have done a better job explaining the textinfo behavior to you in #3790 (part of 1.48.0). Our apologies.

That said, (1) nothing guarantees than textinfo flags and hoverinfo flags ended up rendering the same e.g. we should probably always show more precision on-hover than on-graph. (2) Having those Initial: and Final: prefixes on-graph would have made most text items scale down (to fit the bar dimensions) making the number smaller than expected for most users.

Come to think of it, the currently behavior isn't that bad as I doubt that most users will use a textinfo with more than 1 flags. Oh well, texttemplate (ref: #3816) should make everyone happy.

etpinard · 2019-06-14T14:33:49Z

src/traces/waterfall/hover.js

+        }
+        if(hasFlag('delta') && point.deltaLabel !== '') {
+            if(size < 0) {
+                text.push('(' + point.deltaLabel + ') ' + DIRSYMBOL.decreasing);


this here should be the deltaLabel value so that

hoverinfo: 'delta'

and

hovertemplate: '%{delta}'

render the same.

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.

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); } ``

etpinard · 2019-06-14T14:50:08Z

test/jasmine/tests/waterfall_test.js

+            .then(done);
+        });
+
+        it('should turn on percentages with hoveinfo all', function(done) {


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

Good eye! It was 2/3am.

etpinard · 2019-06-14T14:51:12Z

test/jasmine/tests/waterfall_test.js

@@ -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',


Hmm. So wait Final: is new?

Was this a requirement anywhere?

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

etpinard · 2019-06-14T14:51:57Z

test/jasmine/tests/waterfall_test.js

@@ -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');


Why did these expectations change?

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.

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

The base and top of the bar.

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

Could be displayed in codepen after.

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

archmoj · 2019-06-14T18:14:44Z

This is ready for the second review.

etpinard · 2019-06-17T13:26:52Z

src/traces/waterfall/hover.js

+    if(di.isSum) {
+        point.final = undefined;
+        point.initial = undefined;
+        point.delta = size - di.b;


Hmm. I'm not sure we can call this a "delta" . point.y is probably best for the total bars.

In respect to #3963 (comment) displaying delta seems to be useful especially when there is a base; also when hovering using hoverinfo: delta.

To make it similar to current behaviour, this option is dropped in 8432d8f.

etpinard · 2019-06-17T13:28:33Z

test/jasmine/tests/waterfall_test.js

@@ -1424,7 +1486,7 @@ describe('waterfall hover', function() {
            })
            .then(function() {
                assertHoverLabelContent({
-                    nums: '2.2\n4.4 ▲\nInitial: −2.2',
+                    nums: '2.2\n2.2\n4.4 ▲\nInitial: −2.2',


Why do we have an extra 2.2 now?

~~In respect to #3963 (comment) displaying delta seems to be useful especially when there is a base; also when hovering using hoverinfo: delta.~~

The extra 2.2 here is the final value which is the same as y.

Addressed in 0a58836.

… present

etpinard · 2019-06-17T17:26:26Z

Very nice implementation 💃

implement hoverinfo & hovertemplate flags i.e. initial, delta & final…

2c60ebb

… in waterfall similar to PR 3958

archmoj added bug something broken status: reviewable labels Jun 14, 2019

archmoj changed the title ~~implement hoverinfo & hovertemplate initial, delta and final flags for waterfalls~~ fixup hoverinfo & hovertemplate initial, delta and final flags for waterfalls Jun 14, 2019

etpinard reviewed Jun 14, 2019

View reviewed changes

archmoj added 2 commits June 14, 2019 13:59

revise waterfall hover formats - remove Final

8ed6474

edit typo in test

8cca543

etpinard reviewed Jun 17, 2019

View reviewed changes

archmoj added 2 commits June 17, 2019 11:46

keep waterfall totals hover as is - dont add delta for totals

8432d8f

waterfall hover - dont display redundant info when both final and y|x…

0a58836

… present

archmoj merged commit a0021cd into master Jun 17, 2019

archmoj deleted the waterfall-hoverinfo-and-hovertemplate-flags branch June 17, 2019 17:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

archmoj commented Jun 14, 2019 •

edited

Loading

nicolaskruchten commented Jun 14, 2019

archmoj commented Jun 14, 2019

etpinard commented Jun 14, 2019 •

edited

Loading

etpinard Jun 14, 2019

etpinard Jun 14, 2019

etpinard Jun 14, 2019 •

edited

Loading

etpinard Jun 14, 2019

archmoj Jun 14, 2019 •

edited

Loading

etpinard Jun 14, 2019

archmoj Jun 14, 2019

etpinard Jun 14, 2019

archmoj Jun 14, 2019

etpinard Jun 14, 2019 •

edited

Loading

archmoj Jun 14, 2019

etpinard Jun 14, 2019

archmoj Jun 14, 2019

etpinard Jun 14, 2019

archmoj Jun 14, 2019

nicolaskruchten Jun 14, 2019

archmoj commented Jun 14, 2019

etpinard Jun 17, 2019

archmoj Jun 17, 2019

archmoj Jun 17, 2019

etpinard Jun 17, 2019

archmoj Jun 17, 2019 •

edited

Loading

archmoj Jun 17, 2019

archmoj Jun 17, 2019

etpinard commented Jun 17, 2019

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

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

Conversation

archmoj commented Jun 14, 2019 • edited Loading

nicolaskruchten commented Jun 14, 2019

archmoj commented Jun 14, 2019

etpinard commented Jun 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard Jun 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

archmoj Jun 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard Jun 14, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

archmoj commented Jun 14, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

archmoj Jun 17, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard commented Jun 17, 2019

archmoj commented Jun 14, 2019 •

edited

Loading

etpinard commented Jun 14, 2019 •

edited

Loading

etpinard Jun 14, 2019 •

edited

Loading

archmoj Jun 14, 2019 •

edited

Loading

etpinard Jun 14, 2019 •

edited

Loading

archmoj Jun 17, 2019 •

edited

Loading