Shopify / polaris-viz

A collection of React and React native components that compose Shopify's data visualization system
https://polaris-viz.shopify.com
Other
327 stars 25 forks source link

Calculate inner content value font size based on donut diameter #1710

Closed rita-morozova closed 3 months ago

rita-morozova commented 3 months ago

What does this implement/fix?

The inner value content font size in the donut chart was set to a static value, which led to this value not being scaled with the donut size. Now, we calculate the font size based on the donut diameter.

Does this close any currently open issues?

Related https://github.com/Shopify/core-issues/issues/74510

What do the changes look like?

Before After
Screenshot 2024-07-31 at 6 58 49 PM Screenshot 2024-07-31 at 6 59 05 PM

Storybook link

🎩 Small donut 🎩 Medium donut 🎩 Large donut

Before merging

github-actions[bot] commented 3 months ago

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
polaris-viz-core-cjs 61.15 KB (0%) 1.3 s (0%) 927 ms (-26.85% 🔽) 2.2 s
polaris-viz-cjs 215.23 KB (+0.02% 🔺) 4.4 s (+0.02% 🔺) 2.5 s (+31.93% 🔺) 6.9 s
polaris-viz-esm 176.18 KB (+0.01% 🔺) 3.6 s (+0.01% 🔺) 1.8 s (+9.87% 🔺) 5.3 s
polaris-viz-css 4.73 KB (+0.05% 🔺) 95 ms (+0.05% 🔺) 338 ms (+51.3% 🔺) 433 ms
polaris-viz-esnext 181.83 KB (+0.01% 🔺) 3.7 s (+0.01% 🔺) 1.5 s (+10.9% 🔺) 5.1 s