Skip to content
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

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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

envex
Copy link
Collaborator

@envex envex commented Nov 6, 2024

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.

Storybook link

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

  • Load that story, open devtools and set the device type to Mobile

image

  • The tooltip should always be above the chart
  • The page shouldn't shift around when dragging the touch cursor over the chart

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

@envex envex changed the title Set LineChart Tooltip at static Y when on touche device Set LineChart Tooltip at static Y when on touch device Nov 6, 2024
@envex envex changed the title Set LineChart Tooltip at static Y when on touch device WIP: Set LineChart Tooltip at static Y when on touch device Nov 6, 2024
@envex envex force-pushed the envex/static-mobile-tooltips branch from e65dd72 to c557c3b Compare November 7, 2024 19:02
Copy link
Contributor

@carysmills carysmills left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This generally feels really good to me 🎉 I would like to try the scrolling part in the context of the admin, but I think the tooltip changes work really well. We'd probably want the exact same for area chart and I am not super sure what the behaviour should be for bar charts, probably about the same?

@@ -243,9 +251,11 @@ export function Chart({
max: data[longestSeriesIndex].data.length - 1,
});

const {x, y} = getXYFromEventType(event);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At some point, not necessarily now, I think it would be nice to consolidate some of the tooltip positioning logic. I'm mostly thinking of what's in this function, what's in getAlteredPosition and what's in the actual tooltip component and whether there's a way to simplify it all a bit

packages/polaris-viz/src/components/LineChart/Chart.tsx Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants