new(xychart): refine TooltipContext + Tooltip functionality

[williaster]

TODO

• add tests (separate PR for review test(xychart): add refined Tooltip, TooltipProvider tests #852)

🚀 Enhancements

@visx/tooltip
allow function signatures for useTooltip's updateTooltip + showTooltip

// before
showTooltip({ tooltipData, ... });

//after 
showTooltip(currentState => ({ _logic based on currentState_ }));

why? this mirrors how react setState works, and was needed to implement tooltip data merging properly in xychart/TooltipProvider. when TooltipProvider tries to merge tooltipData when the hook state is updated in quick succession, the hook-provided value may be stale.

---

@visx/xychart
Builds on #825 and adds more fully-featured Tooltip functionality:

• TooltipProvider no longer simply returns the useTooltip hook state, but adds additional functionality so that TooltipContext.tooltipData now includes both the globally closest datum as well as the closest datum per-Series. Functionally this allows
  • for more comprehensive tooltip data to be rendered in the tooltip (i.e., data for all Series, see demo)
  • Tooltip to snap to data values instead of simply following the cursor
• Tooltip now supports the following props
  • snapTooltipToDatumX, snapTooltipToDatumY (tooltip position snaps to data coord instead of mouse coord)
  • showVerticalCrosshair, showHorizontalCrosshair
  • showDatumCircle, showSeriesCircles
  • verticalCrosshairStyle, horizontalCrosshairStyle, circleStyle
• adds a debounce to hideTooltip for better UX

---

@visx/demo

Updates the XYChart demo with all Tooltip controls

Also want to demo how you can do cool things like linked tooltips trivially with a shared EventEmitterContext which is TIGHT 🔥🔥

@kristw @hshoff @techniq

[kristw]

Perhaps name this showDatumMark or showDatumMarker ? In case you want to support other shapes (that is not circle) in the future.

[williaster]

good call. maybe I should make these use @visx/glyph 🤔 maybe I'll do that as a followup PR.

[williaster]

updated to glyph throughout with the future glyph support in mind

[kristw]

how to specify if the nearest XY is what developer want?

[williaster]

these are controlled with the horizontal prop right now. I removed xy because I realized that series should use the same logic for x vs y. Previously if bar used x and line used xy, you might have mismatched x values in the tooltip context (because voronoi don't map cleanly to x, it might not match the same x that the bar finds).

I agree this needs a better hook for dev experience or could be provided by DataContext at some point (you suggested this in the POC, maybe it'd be straightforward to infer from scale types 🤔 ).

[coveralls]

Pull Request Test Coverage Report for Build 130

• 38 of 47 (80.85%) changed or added relevant lines in 6 files are covered.
• 19 unchanged lines in 3 files lost coverage.
• Overall coverage increased (+0.9%) to 57.448%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/visx-xychart/src/components/series/LineSeries.tsx	0	1	0.0%
packages/visx-tooltip/src/hooks/useTooltipInPortal.tsx	0	2	0.0%
packages/visx-tooltip/src/hooks/useTooltip.ts	0	3	0.0%
packages/visx-xychart/src/components/Tooltip.tsx	31	34	91.18%

Files with Coverage Reduction	New Missed Lines	%
packages/visx-tooltip/src/hooks/useTooltipInPortal.tsx	1	0%
packages/visx-responsive/src/enhancers/withParentSize.tsx	5	58.06%
packages/visx-responsive/src/components/ParentSize.tsx	13	0%

Totals
Change from base Build 88:	0.9%
Covered Lines:	1285
Relevant Lines:	2172

---

💛 - Coveralls