feature, Improves Grid chart labels and values responsivenes

[Passanelli]

What does this implement/fix?

Improves Grid chart labels and values to truncate when overflow containers through the truncateText utility function.
Update css to remove outline on Grid groups.
Increase Y_LABEL_OFFSET to put yLabel closer to the left edge of the chart container

Tophat 🎩 link

What do the changes look like?

Not sure why is not visible but there is a resizable container which you can play around:

Screen.Recording.2024-11-08.at.3.59.20.PM.mov

Storybook link

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

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
polaris-viz-core-cjs	61.6 KB (0%)	1.3 s (0%)	1.4 s (+23.25% 🔺)	2.6 s
polaris-viz-cjs	222.36 KB (+0.16% 🔺)	4.5 s (+0.16% 🔺)	1.7 s (+5.47% 🔺)	6.2 s
polaris-viz-esm	180.28 KB (+0.08% 🔺)	3.7 s (+0.08% 🔺)	1.5 s (+20.92% 🔺)	5.1 s
polaris-viz-css	5.47 KB (+0.06% 🔺)	110 ms (+0.06% 🔺)	224 ms (+17.96% 🔺)	333 ms
polaris-viz-esnext	186.93 KB (+0.07% 🔺)	3.8 s (+0.07% 🔺)	1.6 s (+15.6% 🔺)	5.3 s

[carysmills]

🎩 looks good

A couple nits and I wonder if you could use the existing truncation functions, but I think they are buried in the Labels component right now, so could be a future improvement

Also wonder if you should return nothing if the only string that would be returned would be the ellipsis like you can see in some of the boxes here

[carysmills]

We do have some truncation utilities already, but they live in Label, so I guess you can't easily use them within this component right now 😢

[Passanelli]

oh i see the complexity to re use them 😢 .. but definitely something that we can tackle in a future improvement 💪🏼

[Passanelli]

🎩 looks good

A couple nits and I wonder if you could use the existing truncation functions, but I think they are buried in the Labels component right now, so could be a future improvement

Also wonder if you should return nothing if the only string that would be returned would be the ellipsis like you can see in some of the boxes here

that's a good question, as far as i know, grid should not shrink too much since we are restricting the Card size to be 4x8 at minimum, so it should look like this at minimum size:

[carysmills]

@Passanelli I think it could be small on mobile? Or if someone else uses this component on another surface

[Passanelli]

just validated on mobile and it looks good, but i think you are right about another surfaces, i will update it to return nothing in those scenarios, thanks again @carysmills 🙌🏼