Shopify / polaris-viz

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

Fix crosshair position for a single data point in line chart #1726

Closed rita-morozova closed 2 months ago

rita-morozova commented 2 months ago

What does this implement/fix?

When rendering a line chart with single data points per series, the crosshair was not aligned with the actual data points. This misalignment was caused by the animation logic. I am adding a condition to bypass the animation logic if all series have only one data point. Animating a single point or very sparse data does not provide any additional visual benefit to the user.

Does this close any currently open issues?

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

What do the changes look like?

Before After
Screenshot 2024-09-18 at 2 46 26 PM Screenshot 2024-09-18 at 2 46 54 PM
Screenshot 2024-09-18 at 2 46 05 PM Screenshot 2024-09-18 at 2 47 35 PM

Storybook link

Storybook

Before merging

github-actions[bot] commented 2 months ago

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
polaris-viz-core-cjs 61.41 KB (0%) 1.3 s (0%) 864 ms (+7.81% 🔺) 2.1 s
polaris-viz-cjs 215.79 KB (+0.01% 🔺) 4.4 s (+0.01% 🔺) 1.8 s (+8.04% 🔺) 6.1 s
polaris-viz-esm 176.63 KB (+0.01% 🔺) 3.6 s (+0.01% 🔺) 1.5 s (+10.63% 🔺) 5 s
polaris-viz-css 4.72 KB (0%) 95 ms (0%) 439 ms (+78.71% 🔺) 534 ms
polaris-viz-esnext 182.28 KB (+0.01% 🔺) 3.7 s (+0.01% 🔺) 1.3 s (+6.74% 🔺) 5 s