FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix(Donut Chart): Add fixed point notation into percentage donut charts by amirfefer · Pull Request #2375 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

fix(Donut Chart): Add fixed point notation into percentage donut charts - #2375

Merged
tlabaj merged 1 commit into
patternfly:masterfrom
amirfefer:add-fixed-point-notation
Jul 24, 2019
ConversationCommits (1)ChecksFiles changed
Merged

fix(Donut Chart): Add fixed point notation into percentage donut charts#2375
tlabaj merged 1 commit into
patternfly:masterfrom
amirfefer:add-fixed-point-notation

Conversation

amirfefer commented Jun 27, 2019

Copy link
Copy Markdown
Contributor

donut chart rounds up the title which might lead to a falsy 100%

patternfly-build commented Jun 27, 2019

Copy link
Copy Markdown
Collaborator

PatternFly-React preview: https://patternfly-react-pr-2375.surge.sh

ares mentioned this pull request Jun 27, 2019
Closed
dlabaj self-assigned this Jun 27, 2019
dlabaj added the PF4 label Jun 27, 2019
TheRealJon reviewed Jun 27, 2019
View reviewed changes
Comment thread packages/patternfly-3/patternfly-react/src/components/Chart/DonutChart.js Outdated

const { props } = obj;
const { data, title = {} } = props;
const { type, percision = 0 } = title;

TheRealJon Jun 27, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality
Suggested change
const { type, percision = 0 } = title;
const { type, precision = 0 } = title;

dlabaj requested a review from dlabrecq June 27, 2019 17:41
tlabaj reviewed Jun 27, 2019
View reviewed changes

tlabaj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

is there related issue for this PR if so can you please add it to the description

TheRealJon reviewed Jun 27, 2019
View reviewed changes
Comment thread packages/patternfly-3/patternfly-react/src/components/Chart/DonutChart.js Outdated
switch (type) {
case 'percent':
primary = `${Math.round((100 * columns[iMax][1]) / sum).toString()}%`;
primary = `${((100 * columns[iMax][1]) / sum).toFixed(percision).toString()}%`;

TheRealJon Jun 27, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Check out Intl.NumberFormat

Suggested change
primary = `${((100 * columns[iMax][1]) / sum).toFixed(percision).toString()}%`;
primary = `${Intl.NumberFormat(null, {style: 'percent', maximumFractionDigits: precision}).format(columns[iMax][1]) / sum)}%`;

dlabrecq Jun 28, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Wouldn't this change the output for existing applications? Perhaps we can leave the existing code as is, unless the precision property is added?

TheRealJon reviewed Jun 27, 2019
View reviewed changes
Comment thread packages/patternfly-3/patternfly-react/src/components/Chart/Stories/DonutChartStory.js Outdated
}}
data={donutPercentageData}
tooltip={donutConfigTooltip}
title={{ type: 'percent', percision: 1 }}

TheRealJon Jun 27, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality
Suggested change
title={{ type: 'percent', percision: 1 }}
title={{ type: 'percent', precision: 1 }}

TheRealJon reviewed Jun 27, 2019
View reviewed changes

TheRealJon left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

@dlabaj I think using fixed-point notation would lead to decimal places being displayed, regardless of whether the value is fractional. (e.g. If percentage is 100, precision =1 gives you 100.0%, precision = 2 gives you 100.00%, and so on).

tlabaj added PF3 and removed PF4 labels Jun 27, 2019

TheRealJon commented Jun 27, 2019

Copy link
Copy Markdown
Contributor

@dlabaj I think using fixed-point notation would lead to decimal places being displayed, regardless of whether the value is fractional. (e.g. If percentage is 100, precision =1 gives you 100.0%, precision = 2 gives you 100.00%, and so on).

ping @amirfefer

ares reviewed Jun 28, 2019
View reviewed changes
Comment thread packages/patternfly-3/patternfly-react/src/components/Chart/DonutChart.js Outdated
switch (type) {
case 'percent':
primary = `${Math.round((100 * columns[iMax][1]) / sum).toString()}%`;
primary = `${((100 * columns[iMax][1]) / sum).toFixed(percision).toString()}%`;

ares Jun 28, 2019

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

actually this may still be a problem - (100 * 99.99999999 / 100).toFixed(2) # => 100.00
I'm not sure if the other suggestion solves it, maybe it does

dlabrecq suggested changes Jun 28, 2019
View reviewed changes
Comment thread packages/patternfly-3/patternfly-react/src/components/Chart/DonutChart.js Outdated
switch (type) {
case 'percent':
primary = `${Math.round((100 * columns[iMax][1]) / sum).toString()}%`;
primary = `${((100 * columns[iMax][1]) / sum).toFixed(percision).toString()}%`;

dlabrecq Jun 28, 2019

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Wouldn't this change the output for existing applications? Perhaps we can leave the existing code as is, unless the precision property is added?

dlabaj requested changes Jul 1, 2019
View reviewed changes

dlabaj left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Agree with @dlabrecq can we require the user to use the precision property if they want this... also is there an issue related to this fix. If not can we create one and reference it.

ares commented Jul 3, 2019

Copy link
Copy Markdown

I'm not sure if this is ever wanted behavior (in fact it may be seen as a bug), @amirfefer, what do you think? I'm fine with configuring through a property.

amirfefer force-pushed the add-fixed-point-notation branch from c2972a2 to 677fe97 Compare July 9, 2019 20:59

amirfefer commented Jul 9, 2019 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@ares, toFixed apparently rounds up, so I use the known slice function.
@dlabaj - there is an issue for this already - #2356
@TheRealJon - Intl.NumberFormat doesn't work here - getting Cannot convert undefined or null to object, slicing is simpler in this case IMO.
plus, if precision prop doesn't exist, the previous functionality remains

fix(Donut Chart): Add fixed point notation into percentage donut charts
563d481 
donut chart rounds up the title which might lead to a falsy 100%
amirfefer force-pushed the add-fixed-point-notation branch from 677fe97 to 563d481 Compare July 9, 2019 21:24

ares commented Jul 23, 2019

Copy link
Copy Markdown

ping, is there something we can do to get this merged?

dlabrecq requested review from TheRealJon and dlabrecq July 23, 2019 13:20

dlabrecq commented Jul 23, 2019 •
edited
Loading

Copy link
Copy Markdown
Member

I see that the precision prop was added, so I'm good with that. I'd like to give @TheRealJon another chance to comment before merging.

ares commented Jul 23, 2019

Copy link
Copy Markdown

Awesome I see 2 acks now :-)

tlabaj approved these changes Jul 24, 2019
View reviewed changes

tlabaj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

LGTM

tlabaj merged commit 937d2d7 into patternfly:master Jul 24, 2019

patternfly-build commented Jul 24, 2019

Copy link
Copy Markdown
Collaborator

Your changes have been released in:

  • patternfly-react-extensions@2.19.7
  • patternfly-react@2.36.7
  • @patternfly/react-console@1.11.7

Thanks for your contribution! 🎉

ares commented Jul 25, 2019

Copy link
Copy Markdown

Thanks all!

adamruzicka mentioned this pull request Nov 12, 2019
Merged
tlabaj mentioned this pull request Nov 19, 2019
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

dlabaj dlabaj approved these changes
+4 more reviewers
ares ares left review comments
dlabrecq dlabrecq approved these changes
TheRealJon TheRealJon approved these changes
tlabaj tlabaj approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

dlabaj

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

Back | FazBrowse Home | New Git URL