fix(vx-chart-poc): fix legend renderer, use Portal from @vx/tooltip

packages/vx-demo/src/sandboxes/vx-chart-poc/Example.tsx

@@ -19,7 +19,7 @@ import Group from './src/components/series/Group';
 
 type DataKeys = 'austin' | 'sf' | 'ny';
 
-const data = cityTemperature.slice(100, 100 + 32).map(({ date, ...d }) => ({
+const data = cityTemperature.slice(100, 100 + 8).map(({ date, ...d }) => ({
   ...d,
   // current format is like `20200105` which you can't form a valid date from
   // @TODO PR soon!
@@ -129,8 +129,7 @@ export default function Example() {
   const [dataMultiplier, setDataMultiplier] = useState(1);
   const [renderTooltipInPortal, setRenderTooltipInPortal] = useState(true);
   const [visibleSeries, setVisibleSeries] = useState<('line' | 'bar' | 'groupedbar')[]>([
-    'line',
-    'bar',
+    'groupedbar',
   ]);
   const dateScaleConfig: ScaleConfig<string> = useMemo(() => ({ type: 'band', padding: 0.2 }), []);
   const temperatureScaleConfig: ScaleConfig<number> = useMemo(

packages/vx-demo/src/sandboxes/vx-chart-poc/src/components/Legend.tsx

@@ -16,7 +16,7 @@ export type LegendProps = { horizontalAlign?: boolean } & Partial<BaseLegendProp
 export default function Legend({
   alignLeft = true,
   direction = 'row',
-  shape,
+  shape: Shape,
   style,
   ...props
 }: LegendProps) {
@@ -37,24 +37,25 @@ export default function Legend({
     [theme, margin, alignLeft, direction, style],
   );
   const renderShape = useCallback(
-    shape ||
-      (shapeProps => {
-        const legendShape = dataRegistry?.[shapeProps.item]?.legendShape;
-        switch (legendShape) {
-          case 'circle':
-            return <CircleShape {...shapeProps} />;
-          case 'line':
-            return <LineShape {...shapeProps} />;
-          case 'dashed-line':
-            return (
-              <LineShape {...shapeProps} style={{ strokeDasharray: '5,3', ...shapeProps.style }} />
-            );
-          case 'rect':
-          default:
-            return <RectShape {...shapeProps} />;
-        }
-      }),
-    [dataRegistry, shape],
+    shapeProps => {
+      if (Shape && typeof Shape !== 'string') return <Shape {...shapeProps} />;
+
+      const legendShape = Shape || dataRegistry?.[shapeProps.item]?.legendShape;
+      switch (legendShape) {
+        case 'circle':
+          return <CircleShape {...shapeProps} />;
+        case 'line':
+          return <LineShape {...shapeProps} />;
+        case 'dashed-line':
+          return (
+            <LineShape {...shapeProps} style={{ strokeDasharray: '5,3', ...shapeProps.style }} />
+          );
+        case 'rect':
+        default:
+          return <RectShape {...shapeProps} />;
+      }
+    },
+    [dataRegistry, Shape],
   );
 
   return props.scale || colorScale ? (

packages/vx-demo/src/sandboxes/vx-chart-poc/src/components/Tooltip.tsx

@@ -1,11 +1,9 @@
 import React, { useContext } from 'react';
-import TooltipWithBounds from '@vx/tooltip/lib/tooltips/TooltipWithBounds';
-import { defaultStyles } from '@vx/tooltip';
+import { TooltipWithBounds, Portal, defaultStyles } from '@vx/tooltip';
 import { scaleOrdinal } from '@vx/scale';
 
 import TooltipContext from '../context/TooltipContext';
 import ChartContext from '../context/ChartContext';
-import Portal from './Portal';
 import { TooltipData } from '../types';
 
 export type RenderTooltipArgs<Datum, DataKeys extends string> = TooltipData<Datum, DataKeys> & {

packages/vx-demo/src/sandboxes/vx-chart-poc/src/components/XYChart.tsx

@@ -35,6 +35,7 @@ export default function XYChart(props: Props) {
         showTooltip({
           tooltipData: {
             ...nearestData,
+            // @TODO remove this and rely on useTooltipInPortal() instead
             pageX: event.pageX,
             pageY: event.pageY,
             svgOriginX: svgBounds?.x,

packages/vx-demo/src/sandboxes/vx-chart-poc/src/components/providers/ChartProvider.tsx

@@ -188,12 +188,12 @@ export default class ChartProvider<
   // @TODO move to util function, support registry overrides
   findNearestData = (event: React.MouseEvent | React.TouchEvent) => {
     const { width, height, margin, xScale, yScale, dataRegistry } = this.state;
-    const { x: svgMouseX, y: svgMouseY } = localPoint(event) || {};
 
     // for each series find the datums with closest x and y
     const closestData = {};
     let closestDatum: DatumWithKey | null = null;
     let minDistance: number = Number.POSITIVE_INFINITY;
+    const { x: svgMouseX, y: svgMouseY } = localPoint(event) || {};
 
     if (xScale && yScale && svgMouseX != null && svgMouseY != null) {
       Object.values(dataRegistry).forEach(
@@ -205,9 +205,8 @@ export default class ChartProvider<
           mouseEvents,
           findNearestDatum = defaultFindNearestDatum,
         }) => {
-          if (!mouseEvents) {
-            return;
-          }
+          // series has mouse events disabled
+          if (!mouseEvents) return;
 
           const nearestDatum = findNearestDatum({
             event,
@@ -225,7 +224,6 @@ export default class ChartProvider<
 
           if (nearestDatum) {
             const { datum, index, distance } = nearestDatum;
-
             closestData[key] = { key, datum, index };
             closestDatum = distance < minDistance ? closestData[key] : closestDatum;
             minDistance = Math.min(distance, minDistance);

packages/vx-demo/src/sandboxes/vx-chart-poc/src/util/defaultFindNearestDatum.ts

@@ -1,6 +1,7 @@
 import { voronoi } from '@vx/voronoi';
 import { NearestDatumArgs } from '../types';
 
+// default function for finding the datum nearest to svgMouseX/Y, uses voronoi
 export default function defaultFindNearestDatum({
   width,
   height,