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.

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

Implement percentage flags to control funnel hoverinfo and hovertemplete #3958

Merged
merged 3 commits into from
Jun 13, 2019

Conversation

archmoj
Copy link
Contributor

@archmoj archmoj commented Jun 13, 2019

fix #3954
Control percentages via hoverinfo and hovertemplate.
Note: the hovertemplate keys are in camelCase format.

codepen

@plotly/plotly_js
cc: @nicolaskruchten

@nicolaskruchten
Copy link
Member

I'm not sure how I feel about camel-casing in hoverinfo and spaces in textinfo. It makes sense for hovertemplate access though.

out.y = 'yVal' in pt ? pt.yVal : pt.y;

// for funnel
if('percentInitial' in pt) out.percentInitial = pt.percentInitial;
Copy link
Contributor

Choose a reason for hiding this comment

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

here out.percentInitial should be the raw number (i.e. unformatted).

Copy link
Member

Choose a reason for hiding this comment

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

is percentInitial between 0-100 or between 0-1?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Right now with formatting it is between 0-100. The raw ratios are between 0-1.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

FYI - in case of pie the pt.percent contains the fraction not the percent.

Copy link
Contributor

Choose a reason for hiding this comment

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

This is what pie does:

pt.percent = pt.v / cd0.vTotal;
pt.percentLabel = helpers.formatPiePercent(pt.percent, separators);
if(hoverinfo && hoverinfo.indexOf('percent') !== -1) text.push(pt.percentLabel);

that is:

  • percent is in fact a fraction
  • percentLabel is a percentage and it is how hoverinfo flag 'percent' shows up in the hover label. It is also how hovertemplate: '%{percent}' shows up by default.

For example,

Plotly.newPlot(gd, [{
  type: 'pie',
  labels: ['a', 'b', 'c'],
  values: [1, 2, 3]
}])

shows 16.7%, 33.3% and 50% in the hover labels when 'percent' is part of the hoverinfo OR when hovertemplate: '%{percent}' (i.e. it uses percentLabel behind the scenes).

But if hovertemplate: '%{y:.3f}' we get 0.167, 0.333 and 0.500 in the hover labels (i.e. we format the fraction behind the scenes).

@archmoj
Copy link
Contributor Author

archmoj commented Jun 13, 2019

@etpinard thanks for your help,
this is now ready for second review.

@etpinard
Copy link
Contributor

💃

@archmoj archmoj merged commit db854f7 into master Jun 13, 2019
@archmoj archmoj deleted the fix3954-funnel-hoverinfo branch June 13, 2019 20:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Funnel hoverinfo incomplete
3 participants