-
Notifications
You must be signed in to change notification settings - Fork 28
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
[UA][Polaris-Viz]: Fixed Tooltip Positioning When There Are Many Bars #1620
Conversation
size-limit report 📦
|
@precillieo can you describe the steps needed to tophat this? Thanks! |
I updated the PR description! Thank you for pointing it out🙏 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks good!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we pull the tooltip above the chart so we're not covering the data?
@@ -79,7 +79,7 @@ export function getAlteredVerticalBarPosition( | |||
} | |||
} | |||
} else { | |||
y = 0; | |||
y = props.dimensions?.y ?? 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we also clamp this value so if it's at the top of the page it "sticks" in place?
What does this implement/fix?
I fixed the tooltip issue in Vertical BarChart. It incorrectly jumps to the top of the page when there are many bars. Why?
getAlteredVerticalBarPosition
function function sets itsy
value to0
, whenprops.isPerformanceImpacted
istrue
(true
when there are more than60
bars).I solved this by passing down the
dimensions
prop inChart
ofVerticalBarChart
(it determines the position of the container on a page, with scrollY applied), through theTooltipWrapper
component togetAlteredVerticalBarPosition
, then using itsy
value when performance is impacted.Does this close any currently open issues?
Fix https://github.com/Shopify/core-issues/issues/64419
What do the changes look like?
Storybook link
Storybook link
Chromatic Link
Tophat Instructions
Series Colors Up To Sixteen
.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