fix(xychart): improve positioning with missing data

[williaster]

🐛 Bug Fix

Closes #1054.

Previously when either snapTooltipToDataX/snapTooltipToDataY were set on <Tooltip />, and a hovered datum had a missing value for the corresponding x/y, we rendered the tooltip at 0,0 and also rendered the tooltip glyphs (circles corresponding to the hovered points) incorrectly.

Also fixes the demo to not show NaN values for missing data.

Before

After

@kristw @hshoff
cc @mira-t

[github-actions]

Size Changes

Package	Diff	ESM	Prev ESM	CJS	Prev CJS
visx-xychart	+0.1%	162.88 KB	162.71 KB	227.43 KB	227.18 KB

Compared to master. File sizes are unminified and ungzipped.

View raw build stats

Previous (master)

{
  "visx-annotation": {
    "esm": 27301,
    "lib": 37327
  },
  "visx-axis": {
    "esm": 20727,
    "lib": 25127
  },
  "visx-bounds": {
    "esm": 2842,
    "lib": 3264
  },
  "visx-brush": {
    "esm": 44087,
    "lib": 47832
  },
  "visx-chord": {
    "esm": 3459,
    "lib": 4688
  },
  "visx-clip-path": {
    "esm": 4421,
    "lib": 5978
  },
  "visx-curve": {
    "esm": 323,
    "lib": 1464
  },
  "visx-demo": {
    "esm": 0,
    "lib": 0
  },
  "visx-drag": {
    "esm": 6263,
    "lib": 8300
  },
  "visx-event": {
    "esm": 3797,
    "lib": 5172
  },
  "visx-geo": {
    "esm": 12986,
    "lib": 16246
  },
  "visx-glyph": {
    "esm": 14893,
    "lib": 19789
  },
  "visx-gradient": {
    "esm": 17800,
    "lib": 22517
  },
  "visx-grid": {
    "esm": 18469,
    "lib": 22204
  },
  "visx-group": {
    "esm": 1619,
    "lib": 2246
  },
  "visx-heatmap": {
    "esm": 7286,
    "lib": 8622
  },
  "visx-hierarchy": {
    "esm": 12266,
    "lib": 18076
  },
  "visx-legend": {
    "esm": 26999,
    "lib": 34033
  },
  "visx-marker": {
    "esm": 8962,
    "lib": 11197
  },
  "visx-mock-data": {
    "esm": 326005,
    "lib": 329416
  },
  "visx-network": {
    "esm": 4546,
    "lib": 6706
  },
  "visx-pattern": {
    "esm": 11779,
    "lib": 15910
  },
  "visx-point": {
    "esm": 819,
    "lib": 1094
  },
  "visx-react-spring": {
    "esm": 13450,
    "lib": 17991
  },
  "visx-responsive": {
    "esm": 21872,
    "lib": 26932
  },
  "visx-scale": {
    "esm": 18443,
    "lib": 29701
  },
  "visx-shape": {
    "esm": 83000,
    "lib": 103973
  },
  "visx-stats": {
    "esm": 13911,
    "lib": 15494
  },
  "visx-text": {
    "esm": 8413,
    "lib": 10581
  },
  "visx-threshold": {
    "esm": 2911,
    "lib": 3820
  },
  "visx-tooltip": {
    "esm": 14147,
    "lib": 20413
  },
  "visx-visx": {
    "esm": 970,
    "lib": 8243
  },
  "visx-voronoi": {
    "esm": 2286,
    "lib": 3005
  },
  "visx-xychart": {
    "esm": 166614,
    "lib": 232628
  },
  "visx-zoom": {
    "esm": 15726,
    "lib": 17398
  }
}

Current

{
  "visx-annotation": {
    "esm": 27301,
    "lib": 37327
  },
  "visx-axis": {
    "esm": 20727,
    "lib": 25127
  },
  "visx-bounds": {
    "esm": 2842,
    "lib": 3264
  },
  "visx-brush": {
    "esm": 44087,
    "lib": 47832
  },
  "visx-chord": {
    "esm": 3459,
    "lib": 4688
  },
  "visx-clip-path": {
    "esm": 4421,
    "lib": 5978
  },
  "visx-curve": {
    "esm": 323,
    "lib": 1464
  },
  "visx-demo": {
    "esm": 0,
    "lib": 0
  },
  "visx-drag": {
    "esm": 6263,
    "lib": 8300
  },
  "visx-event": {
    "esm": 3797,
    "lib": 5172
  },
  "visx-geo": {
    "esm": 12986,
    "lib": 16246
  },
  "visx-glyph": {
    "esm": 14893,
    "lib": 19789
  },
  "visx-gradient": {
    "esm": 17800,
    "lib": 22517
  },
  "visx-grid": {
    "esm": 18469,
    "lib": 22204
  },
  "visx-group": {
    "esm": 1619,
    "lib": 2246
  },
  "visx-heatmap": {
    "esm": 7286,
    "lib": 8622
  },
  "visx-hierarchy": {
    "esm": 12266,
    "lib": 18076
  },
  "visx-legend": {
    "esm": 26999,
    "lib": 34033
  },
  "visx-marker": {
    "esm": 8962,
    "lib": 11197
  },
  "visx-mock-data": {
    "esm": 326005,
    "lib": 329416
  },
  "visx-network": {
    "esm": 4546,
    "lib": 6706
  },
  "visx-pattern": {
    "esm": 11779,
    "lib": 15910
  },
  "visx-point": {
    "esm": 819,
    "lib": 1094
  },
  "visx-react-spring": {
    "esm": 13450,
    "lib": 17991
  },
  "visx-responsive": {
    "esm": 21872,
    "lib": 26932
  },
  "visx-scale": {
    "esm": 18443,
    "lib": 29701
  },
  "visx-shape": {
    "esm": 83000,
    "lib": 103973
  },
  "visx-stats": {
    "esm": 13911,
    "lib": 15494
  },
  "visx-text": {
    "esm": 8413,
    "lib": 10581
  },
  "visx-threshold": {
    "esm": 2911,
    "lib": 3820
  },
  "visx-tooltip": {
    "esm": 14147,
    "lib": 20413
  },
  "visx-visx": {
    "esm": 970,
    "lib": 8243
  },
  "visx-voronoi": {
    "esm": 2286,
    "lib": 3005
  },
  "visx-xychart": {
    "esm": 166787,
    "lib": 232886
  },
  "visx-zoom": {
    "esm": 15726,
    "lib": 17398
  }
}

[mira-t]

Thank you very much! Really appreciate this change