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

Doughnut/Pie chart border radius #8682

Merged
merged 10 commits into from
Apr 3, 2021

Conversation

etimberg
Copy link
Member

@etimberg etimberg commented Mar 21, 2021

Enables setting the borderRadius of arc elements (pie/doughnut charts). This can either be set as a single value, or an object specifying the radius for each corner. For the object, the keys are outerStart, outerEnd, innerStart, and innerEnd since I thought that topLeft, topRight, bottomLeft, and bottomRight would get confusing.

radius 30

Resolves #3644
Resolves #5503
Resolves #6653

@etimberg etimberg added this to the Version 3.1 milestone Mar 21, 2021
@etimberg
Copy link
Member Author

I marked this as a draft for now so that we don't merge it until after v3.0.0 ships. It is ready for review

@etimberg
Copy link
Member Author

Size Change: +1.51 kB (+1%)

Total Size: 234 kB

Filename Size Change
dist/chart.esm.js 67.9 kB +574 B (+1%)
dist/chart.js 85.6 kB +571 B (+1%)
dist/chart.min.js 61 kB +355 B (+1%)
dist/chunks/helpers.segment.js 18.9 kB +6 B (0%)
dist/helpers.esm.js 1.08 kB +6 B (+1%)

@etimberg
Copy link
Member Author

Based on the size increase, I'll need to go through and really try and squeeze it down. Now that tests are in, it should be easier.

@etimberg etimberg linked an issue Mar 21, 2021 that may be closed by this pull request
Copy link
Member

@kurkle kurkle left a comment

Choose a reason for hiding this comment

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

I think a test with really small radius, like 4 would be good to have too.

src/elements/element.arc.js Outdated Show resolved Hide resolved
src/elements/element.arc.js Outdated Show resolved Hide resolved
@etimberg
Copy link
Member Author

Now at

Size Change: +1.66 kB (+1%)

Total Size: 235 kB

Filename Size Change
dist/chart.esm.js 67.8 kB +510 B (+1%)
dist/chart.js 85.7 kB +643 B (+1%)
dist/chart.min.js 61 kB +358 B (+1%)
dist/chunks/helpers.segment.js 19 kB +131 B (+1%)
dist/helpers.esm.js 1.1 kB +21 B (+2%)

@kurkle
Copy link
Member

kurkle commented Mar 21, 2021

Compressed size actually grew 🤔

@etimberg
Copy link
Member Author

Getting rid of the repeating strings hurt gzip. If we compromised on the API and used the same border radius as others, then I could reduce a lot by getting rid of the second option parsing implementation.

@kurkle
Copy link
Member

kurkle commented Mar 22, 2021

Size Change: +1.5 kB (+1%)

Total Size: 234 kB

Filename Size Change
dist/chart.esm.js 67.8 kB +585 B (+1%)
dist/chart.js 85.6 kB +573 B (+1%)
dist/chart.min.js 61 kB +323 B (+1%)
dist/chunks/helpers.segment.js 19 kB +11 B (0%)
dist/helpers.esm.js 1.1 kB +13 B (+1%)

@kurkle
Copy link
Member

kurkle commented Mar 24, 2021

[lint-js] /home/runner/work/Chart.js/Chart.js/src/elements/element.arc.js
[lint-js] 25:88 error Missing semicolon semi

@etimberg etimberg marked this pull request as ready for review April 2, 2021 21:50
@etimberg etimberg merged commit 6f6b1b2 into chartjs:master Apr 3, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants