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

Limit Donut legend to 50% of chart width #1646

Merged
merged 1 commit into from
Apr 2, 2024
Merged

Limit Donut legend to 50% of chart width #1646

merged 1 commit into from
Apr 2, 2024

Conversation

envex
Copy link
Collaborator

@envex envex commented Apr 2, 2024

What does this implement/fix?

Limit the DonutChart legends from taking up more than 50% of the chart space.

Does this close any currently open issues?

https://github.com/Shopify/core-issues/issues/68612

What do the changes look like?

image

Storybook link

https://6062ad4a2d14cd0021539c1b-xydvmesepk.chromatic.com/?path=/story/polaris-viz-charts-donutchart--truncated-legends

Before merging

  • Check your changes on a variety of browsers and devices.

  • Update the Changelog's Unreleased section with your changes.

  • Update relevant documentation, tests, and Storybook.

  • Make sure you're exporting any new shared Components, Types and Utilities from the top level index file of the package

Copy link

github-actions bot commented Apr 2, 2024

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
polaris-viz-core-cjs 61.36 KB (0%) 1.3 s (0%) 944 ms (-5.5% 🔽) 2.2 s
polaris-viz-cjs 215.8 KB (-0.04% 🔽) 4.4 s (-0.04% 🔽) 1.9 s (-7.07% 🔽) 6.2 s
polaris-viz-esm 176.22 KB (-0.03% 🔽) 3.6 s (-0.03% 🔽) 1.6 s (+9.95% 🔺) 5.1 s
polaris-viz-css 4.79 KB (+0.03% 🔺) 96 ms (+0.03% 🔺) 363 ms (+84.05% 🔺) 458 ms
polaris-viz-esnext 182.15 KB (-0.03% 🔽) 3.7 s (-0.03% 🔽) 1.4 s (-8.45% 🔽) 5 s

@envex envex force-pushed the envex/donut-legends branch 2 times, most recently from d60e7b6 to 8dff0e1 Compare April 2, 2024 15:26
@envex envex changed the title AG Limit Donut legend to 50% of chart width Apr 2, 2024
@envex envex force-pushed the envex/donut-legends branch 2 times, most recently from f0a4b1b to efc72ef Compare April 2, 2024 15:42
@envex
Copy link
Collaborator Author

envex commented Apr 2, 2024

@michaelnesen Can you look over this when you have some time, you have the most context around DonutChart.

@envex envex requested a review from michaelnesen April 2, 2024 15:46
@envex envex marked this pull request as ready for review April 2, 2024 15:46
Copy link
Collaborator

@michaelnesen michaelnesen left a comment

Choose a reason for hiding this comment

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

Looks great! 👍

donut.mp4

One comment about the table spacing 👇

@@ -2,4 +2,5 @@
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
table-layout: fixed;
Copy link
Collaborator

Choose a reason for hiding this comment

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

With table-layout: fixed i'm seeing some extra spacing in the table. It's only really visible with the legend positioned to the left as it pushes the viz to the right

Screenshot 2024-04-02 at 12 11 34 PM

Perhaps adding a width to the trend indictor table cell could fix this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yeah, fixed makes all the cells fill the space unless they have an explicit width. I'll add it!

@envex envex force-pushed the envex/donut-legends branch from efc72ef to c3a5eac Compare April 2, 2024 18:20
@envex envex force-pushed the envex/donut-legends branch from c3a5eac to e371426 Compare April 2, 2024 18:27
@envex envex merged commit c42445a into main Apr 2, 2024
6 checks passed
@envex envex deleted the envex/donut-legends branch September 12, 2024 18:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants