Add tooltip support for Donut Chart#1587
Conversation
|
Chromatic Storybook: https://6062ad4a2d14cd0021539c1b-vkktuqqdiw.chromatic.com/ |
size-limit report 📦
|
| legendPosition={legendPosition} | ||
| renderInnerValueContent={renderInnerValueContent} | ||
| renderLegendContent={renderLegendContent} | ||
| renderTooltipContent={tooltipOptions ? renderTooltip : undefined} |
There was a problem hiding this comment.
Currently, tooltipOptions is what enables the tooltip and defines its options in the donut chart. I believe we want the tooltip to be an opt-in experience cc @rachelng. But perhaps another prop like showTooltip would make more sense? Interested to see what others think
There was a problem hiding this comment.
I like the showTooltip prop. If we decide to go that route, we should add it to all the other components that can render tooltips.
michaelnesen
requested review from
Tom-F-an,
envex,
maryamkaka and
susiekims
|
@michaelnesen Tooltips don't show when tabbing through the chart, is that intended? |
@envex Hmm good question, It looks like for all other charts tabbing through data points shows the tooltip. However with the donut chart it's a little different as tabbing through already selects/highlights the legend. I can check with UX to see if they have an opinion. However I'm currently not sure why the tooltip isn't showing up when the active index changes by focus 🤔 But if all other charts have this tooltip behaviour perhaps it makes sense to also have it in the donut chart for consistency donut-chart-tabbing.mp4 |
envex
force-pushed
the
add-tooltip-support-donut-chart
branch
from
a9fbbdc to
c94fe32
Compare
envex
force-pushed
the
add-tooltip-support-donut-chart
branch
from
c94fe32 to
8808f40
Compare
| width={diameter} | ||
| ref={setSvgRef} | ||
| > | ||
| {isLegendMounted && ( |
There was a problem hiding this comment.
I don't think the isLegendMounted check is used anymore and it was causing issues with attaching focus events to the arcs.
2 participants
What does this implement/fix?
Adds tooltip support for
DonutChartWhat do the changes look like?
Storybook link
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