Visx: Shared event delegation

Created on 14 Jul 2020  路  3Comments  路  Source: airbnb/visx

Updating selections between linked graphs isn't trivial-- I've been coordinating x,y brush selection between multiple visualizations with context & reducers and thought it'd be nice to have something abstracted for this.

Victory has the SharedEvents component that offers a nice api.

I'm wondering if this kind of feature is in line with the vx roadmap?

馃憢help wanted 馃挰discussion 馃敭question

Most helpful comment

Maybe we could explore a global event emitter design? share the emitter through context and use hooks for pubsub.

quick sketch of the idea: https://codesandbox.io/s/vibrant-architecture-24kbx?file=/src/App.js

Screen Shot 2020-07-16 at 11 14 40 AM

x tooltip position is shared across charts and y is local the currently hovered chart. probably a lot more we could do here.

All 3 comments

hey @goaaron 馃憢, thanks for checking out vx.

this is an interesting idea. I don't think this is out of line with vx, but we may need to think about the API a bit and what exactly this could be used for. personally I find the Victory api strange, particularly the mutations (I don't think that's super aligned with vx, which is more declarative).

I'm actually doing something similar with event/tooltip state in our POC for a higher-level XYChart package (see here). My initial inclination is that you could do this with React Context. In the XYChart POC it also worked well to be able to have a useTooltip hook, which managed state for one component, and then wrap that in Context provider so it could be used for any child consumer as you're describing here. (this may not make as much sense for event delegation, since that's likely always going to be relevant to multiple components)

Curious if you have any more thoughts on what sorts of things you think this could handle. Maybe it could be built as part of the XYChart POC (as a separate package) for fleshing out the API + testing.

curious if @techniq has any thoughts on this.

Maybe we could explore a global event emitter design? share the emitter through context and use hooks for pubsub.

quick sketch of the idea: https://codesandbox.io/s/vibrant-architecture-24kbx?file=/src/App.js

Screen Shot 2020-07-16 at 11 14 40 AM

x tooltip position is shared across charts and y is local the currently hovered chart. probably a lot more we could do here.

Looks like long-term, concurrent mode safe, react way will be the new useMutableSource() hook:

Was this page helpful?
0 / 5 - 0 ratings

Related issues

elisechant picture elisechant  路  3Comments

ghost picture ghost  路  5Comments

danielprogramic picture danielprogramic  路  3Comments

m0t0r picture m0t0r  路  3Comments

hellosmithy picture hellosmithy  路  3Comments