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

Add tooltips to Funnel Chart Next #1791

Merged
merged 2 commits into from
Jan 16, 2025
Merged

Conversation

michaelnesen
Copy link
Collaborator

@michaelnesen michaelnesen commented Jan 14, 2025

What does this implement/fix?

This PR adds back the funnel chart tooltips removed in #1785, and makes some changes to when we show the dropped off labels. The first segment will now only show a Reached this step label, with subsequent tooltips containing the dropped off data related to the previous segment.

Does this close any currently open issues?

What do the changes look like?

Screenshot 2025-01-14 at 5 20 56 PM

Storybook link

https://6062ad4a2d14cd0021539c1b-gqxlmulfcd.chromatic.com/?path=/story/polaris-viz-charts-funnelchartnext--default

  • Test out showTooltip prop and ensure it works
  • Ensure tabbing through chart works well

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

@michaelnesen michaelnesen force-pushed the add-funnel-chart-next-tooltips branch from b363a3a to 29a6655 Compare January 14, 2025 22:20
Copy link

github-actions bot commented Jan 14, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
polaris-viz-core-cjs 61.73 KB (0%) 1.3 s (0%) 959 ms (+1.82% 🔺) 2.2 s
polaris-viz-cjs 229.56 KB (+0.36% 🔺) 4.6 s (+0.36% 🔺) 2.2 s (+2.72% 🔺) 6.8 s
polaris-viz-esm 185.84 KB (+0.34% 🔺) 3.8 s (+0.34% 🔺) 1.3 s (-17.73% 🔽) 5.1 s
polaris-viz-css 5.82 KB (+1.76% 🔺) 117 ms (+1.76% 🔺) 284 ms (-9.38% 🔽) 400 ms
polaris-viz-esnext 193.04 KB (+0.4% 🔺) 3.9 s (+0.4% 🔺) 1.6 s (+20.6% 🔺) 5.5 s

@michaelnesen michaelnesen force-pushed the add-funnel-chart-next-tooltips branch from 29a6655 to 0bfb45e Compare January 14, 2025 22:24
maxWidth={TOOLTIP_WIDTH}
theme={DEFAULT_THEME_NAME}
>
{() => (
Copy link
Collaborator

Choose a reason for hiding this comment

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

Is this function needed here? 🤔

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is because the TooltipContentContainer accepts the children prop as a function to pass the activeColorVisionIndex to it's child components, however in the funnel chart tooltips we don't need the color vision functionality as the tooltip uses fixed colors.

Copy link
Collaborator

@mollerjorge mollerjorge left a comment

Choose a reason for hiding this comment

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

Left some minor comments but overall looks great.

I think for open funnels we won't be showing any tooltips, so maybe its worth adding a prop to toggle between showing/hiding tooltips.

@michaelnesen michaelnesen force-pushed the add-funnel-chart-next-tooltips branch from 2fb7241 to 8bac9ac Compare January 15, 2025 15:25
@michaelnesen michaelnesen force-pushed the add-funnel-chart-next-tooltips branch from 8bac9ac to 7ae7777 Compare January 15, 2025 15:30
@michaelnesen michaelnesen merged commit a53dd3f into main Jan 16, 2025
6 checks passed
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