search

FormidableLabs / victory

A collection of composable React components for building interactive data visualizations
http://commerce.nearform.com/open-source/victory/
Other
10.98k stars 526 forks source link

Supporting keyboard interactivity with VictoryVoronoiContainer #2801

Open sparklerfish opened 7 months ago

sparklerfish commented 7 months ago

Is there an existing issue for this?

Code of Conduct

Question

I am using VictoryVoronoiContainer to display tooltips for a stacked area chart. The labels are defined on the container component, using a VictoryTooltip as the labelComponent. I'd also like to be able to activate the tooltips via the keyboard, so I've added a transparent stacked VictoryScatter with a tabindex={0} on each of the points.

I can reliably capture onFocus/onBlur events on the scatter to know which data point was focused via the keyboard, but I can't figure out how to activate the labels on the container. I'm storing the focused point in the component's local state, which I've tried passing as a prop to to the tooltip, but the tooltip never seems aware of it, and I can't find a way to programmatically activate it with the event. I've tried setting the event both on the scatters themselves and on the chart parent.

How can I activate a voronoi tooltip from a keyboard event? Is this possible?

carbonrobot commented 7 months ago

Hi @sparklerfish, I can't think of any documented feature that would help you here. Is it possible to create a small demo using our codesandbox of what you are trying to achieve?

https://codesandbox.io/p/sandbox/victory-starter-dj4f7t?file=%2Fsrc%2FApp.tsx%3A8%2C5

github-actions[bot] commented 4 months ago

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

sparklerfish commented 4 months ago

@carbonrobot sorry for the delay, I've set up a sort-of simplified version of what I'm working on here: https://codesandbox.io/p/sandbox/victory-starter-forked-ztfqq9?file=%2Fsrc%2FApp.tsx%3A36%2C60

In order to make it keyboard-accessible, there's an invisible scatter chart with tabbable tooltips. However, rather than having separate tooltips for the scatter points, I'd like to find a way to instead have the keyboard focus activate the area chart's "grouped" voronoi tooltip that displays on mouseover.