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

Set LineChart Tooltip at static Y when on touch device #1750

Closed envex closed 1 week ago

envex commented 3 weeks ago

What does this implement/fix?

When on a touch device we want the LineChart tooltip to always display above the chart instead of under the users finger.

[!NOTE]
Most of the changes related to the comment below are moving code around to move all the chart specific logic into the TooltipWrapper. If you think it should be split into another PR, I'm good with that.

Also as part of this PR is a the removal of the getAlteredPosition and getPosition props from the TooltipWrapper component.

We're now passing a chartType to the TooltipWrapper that will determine what special positioning needs to be done for each chart type.

This should keep all the tooltip logic in one central place instead of each chart handling the positioning in itself.

Storybook link

https://6062ad4a2d14cd0021539c1b-bgueplbuui.chromatic.com/iframe.html?args=&id=polaris-viz-charts-linechart-playground--external-tooltip&viewMode=story

image

Before merging

github-actions[bot] commented 2 weeks ago

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
polaris-viz-core-cjs 61.64 KB (+0.03% 🔺) 1.3 s (+0.03% 🔺) 1.2 s (+2.96% 🔺) 2.5 s
polaris-viz-cjs 223.17 KB (+0.27% 🔺) 4.5 s (+0.27% 🔺) 1.8 s (-13.04% 🔽) 6.3 s
polaris-viz-esm 180.6 KB (+0.08% 🔺) 3.7 s (+0.08% 🔺) 1.4 s (-11.11% 🔽) 5.1 s
polaris-viz-css 5.51 KB (+0.65% 🔺) 111 ms (+0.65% 🔺) 680 ms (+67.7% 🔺) 790 ms
polaris-viz-esnext 187.28 KB (+0.09% 🔺) 3.8 s (+0.09% 🔺) 1.3 s (-12.36% 🔽) 5.1 s