new(xychart): add PointerEvent handlers to XYChart and *Series

[williaster]

TODO

• add tests in separate PR test(xychart): add PointerEvent tests #952

🚀 Enhancements

This PR

• adds the ability to set PointerEvent handlers on XYChart, or on individual *Series (previously the only mouse events which were handled were to show/hide tooltips)
  • onPointerMove/Out/Up are currently supported
    • hoping this will be compatible with focus/blur (a11y), and brush/zoom/pan in the future
• adds pointerEvents: boolean to all *Series, which enables users to prevent a Series from emitting, or responding to any PointerEvents (including tooltips; see demo below)
• all mousemove/out + touchmove/end references were simplified to pointermove/out
• updates the /xychart example to demonstrate onPointerUp => if you click on the chart, the Annotation will move to the nearest Datum in the nearest Series

Usage examples

// set handler on chart
// invoke for nearest Datum in _nearest_ `Series` to event, or nearest Datum in _all_ `Series`
<XYChart onPointerUp={() => ...} pointerEvents={'all' | 'nearest'}>
  <LineSeries {...} />
  <LineSeries {...} />
</XYChart>

// invoke handler for only a specific `Series`
// `XYChart` will capture and emit events when `captureEvents=true`, else Series DOM elements emit events
// note: Tooltips still work for Series regardless of `PointerEvent` handlers, unless pointerEvents={false}
<XYChart captureEvents={true | false}>
  <LineSeries onPointerMove={() => ...}  {...} />
  <LineSeries {...} />
</XYChart>

Implementation notes

• all events are dispatched through the EventEmitterContext rather than being handled within a given component.
  • In order to scope e.g., BarSeries events to that BarSeries, I added the notion of EventEmitter sources so that a Series can subscribe to only it's own events + events emitted by XYChart
• Series PointerEvent handlers are set on individual bars, glyphs, or paths (rather than a container to capture events on all of them) to prevent one Series blocking events for another series.

Demo of pointerEvents={false} for all Series except SF (therefore tooltip only contains SF, even though mouse is closer to other AreaSeries)

@kristw @hshoff

[williaster]

maybe should be called pointerEventDataKey 🤔

[williaster]

I guess this probably should mirror the implementation and could also support specific dataKey | dataKey[] as well.

EDIT: gonna punt on this until it's a feature request, makes the type-ing more error prone because string | 'all' becomes string.

[williaster]

because we have to always use the same # of hooks, we can't conditionally create this and have to do the check in the handler. we conditionally return the handler below, tho.

[coveralls]

Pull Request Test Coverage Report for Build 393068437

• 117 of 124 (94.35%) changed or added relevant lines in 16 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.007%) to 59.858%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/visx-xychart/src/hooks/usePointerEventEmitters.ts	5	8	62.5%
packages/visx-xychart/src/hooks/usePointerEventHandlers.ts	28	32	87.5%

Totals
Change from base Build 383897138:	-0.007%
Covered Lines:	1677
Relevant Lines:	2621

---

💛 - Coveralls

[williaster]

noting as a TODO that this logic was lost in this refactor