Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(xychart): PointerEvent fixes #957

Merged
merged 4 commits into from
Dec 3, 2020
Merged

fix(xychart): PointerEvent fixes #957

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f585963
fix(xychart/TooltipProvider): cancel debounced hideTooltip in showToo…
williaster Dec 3, 2020
9fd11f2
fix(xychart/Series): fix pointer event source event key and emitter l…
williaster Dec 3, 2020
7b664c4
fix(xychart/Series): don't emit pointer events unless prop handlers a…
williaster Dec 3, 2020
3769ad7
fix(xychart/TooltipProvider): remove console.log
williaster Dec 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,9 @@ function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
},
[hideTooltip, onPointerOutProps],
);
const ownEventSourceKey = `${AREASERIES_EVENT_SOURCE}-${dataKey}`;
const pointerEventEmitters = usePointerEventEmitters({
source: AREASERIES_EVENT_SOURCE,
source: ownEventSourceKey,
onPointerMove: !!onPointerMoveProps && pointerEvents,
onPointerOut: !!onPointerOutProps && pointerEvents,
onPointerUp: !!onPointerUpProps && pointerEvents,
Expand All @@ -85,7 +86,7 @@ function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
onPointerMove: pointerEvents ? onPointerMove : undefined,
onPointerOut: pointerEvents ? onPointerOut : undefined,
onPointerUp: pointerEvents ? onPointerUpProps : undefined,
sources: [XYCHART_EVENT_SOURCE, `${AREASERIES_EVENT_SOURCE}-${dataKey}`],
sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
});

const numericScaleBaseline = useMemo(() => getScaleBaseline(horizontal ? xScale : yScale), [
Expand Down
5 changes: 3 additions & 2 deletions packages/visx-xychart/src/components/series/private/BaseBarGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,9 @@ export default function BaseBarGroup<
},
[hideTooltip, onPointerOutProps],
);
const ownEventSourceKey = `${BARGROUP_EVENT_SOURCE}-${dataKeys.join('-')}}`;
const pointerEventEmitters = usePointerEventEmitters({
source: BARGROUP_EVENT_SOURCE,
source: ownEventSourceKey,
onPointerMove: !!onPointerMoveProps && pointerEvents,
onPointerOut: !!onPointerOutProps && pointerEvents,
onPointerUp: !!onPointerUpProps && pointerEvents,
Expand All @@ -126,7 +127,7 @@ export default function BaseBarGroup<
onPointerMove: pointerEvents ? onPointerMove : undefined,
onPointerOut: pointerEvents ? onPointerOut : undefined,
onPointerUp: pointerEvents ? onPointerUpProps : undefined,
sources: [XYCHART_EVENT_SOURCE, `${BARGROUP_EVENT_SOURCE}-${dataKeys.join('-')}`],
sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
});

const xZeroPosition = useMemo(() => (xScale ? getScaleBaseline(xScale) : 0), [xScale]);
Expand Down
5 changes: 3 additions & 2 deletions packages/visx-xychart/src/components/series/private/BaseBarSeries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,9 @@ function BaseBarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum
},
[hideTooltip, onPointerOutProps],
);
const ownEventSourceKey = `${BARSERIES_EVENT_SOURCE}-${dataKey}`;
const pointerEventEmitters = usePointerEventEmitters({
source: BARSERIES_EVENT_SOURCE,
source: ownEventSourceKey,
onPointerMove: !!onPointerMoveProps && pointerEvents,
onPointerOut: !!onPointerOutProps && pointerEvents,
onPointerUp: !!onPointerUpProps && pointerEvents,
Expand All @@ -118,7 +119,7 @@ function BaseBarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum
onPointerMove: pointerEvents ? onPointerMove : undefined,
onPointerOut: pointerEvents ? onPointerOut : undefined,
onPointerUp: pointerEvents ? onPointerUpProps : undefined,
sources: [XYCHART_EVENT_SOURCE, `${BARSERIES_EVENT_SOURCE}-${dataKey}`],
sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
});

return (
Expand Down
5 changes: 3 additions & 2 deletions packages/visx-xychart/src/components/series/private/BaseBarStack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,9 @@ function BaseBarStack<
},
[hideTooltip, onPointerOutProps],
);
const ownEventSourceKey = `${BARSTACK_EVENT_SOURCE}-${dataKeys.join('-')}`;
const pointerEventEmitters = usePointerEventEmitters({
source: BARSTACK_EVENT_SOURCE,
source: ownEventSourceKey,
onPointerMove: !!onPointerMoveProps && pointerEvents,
onPointerOut: !!onPointerOutProps && pointerEvents,
onPointerUp: !!onPointerUpProps && pointerEvents,
Expand All @@ -162,7 +163,7 @@ function BaseBarStack<
onPointerMove: pointerEvents ? onPointerMove : undefined,
onPointerOut: pointerEvents ? onPointerOut : undefined,
onPointerUp: pointerEvents ? onPointerUpProps : undefined,
sources: [XYCHART_EVENT_SOURCE, `${BARSTACK_EVENT_SOURCE}-${dataKeys.join('-')}`],
sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
});

// if scales and data are not available in the registry, bail
Expand Down
5 changes: 3 additions & 2 deletions packages/visx-xychart/src/components/series/private/BaseGlyphSeries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,9 @@ function BaseGlyphSeries<XScale extends AxisScale, YScale extends AxisScale, Dat
},
[hideTooltip, onPointerOutProps],
);
const ownEventSourceKey = `${GLYPHSERIES_EVENT_SOURCE}-${dataKey}`;
const pointerEventEmitters = usePointerEventEmitters({
source: GLYPHSERIES_EVENT_SOURCE,
source: ownEventSourceKey,
onPointerMove: !!onPointerMoveProps && pointerEvents,
onPointerOut: !!onPointerOutProps && pointerEvents,
onPointerUp: !!onPointerUpProps && pointerEvents,
Expand All @@ -75,7 +76,7 @@ function BaseGlyphSeries<XScale extends AxisScale, YScale extends AxisScale, Dat
onPointerMove: pointerEvents ? onPointerMove : undefined,
onPointerOut: pointerEvents ? onPointerOut : undefined,
onPointerUp: pointerEvents ? onPointerUpProps : undefined,
sources: [XYCHART_EVENT_SOURCE, `${GLYPHSERIES_EVENT_SOURCE}-${dataKey}`],
sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
});

const glyphs = useMemo(
Expand Down
5 changes: 3 additions & 2 deletions packages/visx-xychart/src/components/series/private/BaseLineSeries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,9 @@ function BaseLineSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
},
[hideTooltip, onPointerOutProps],
);
const ownEventSourceKey = `${LINESERIES_EVENT_SOURCE}-${dataKey}`;
const pointerEventEmitters = usePointerEventEmitters({
source: LINESERIES_EVENT_SOURCE,
source: ownEventSourceKey,
onPointerMove: !!onPointerMoveProps && pointerEvents,
onPointerOut: !!onPointerOutProps && pointerEvents,
onPointerUp: !!onPointerUpProps && pointerEvents,
Expand All @@ -77,7 +78,7 @@ function BaseLineSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
onPointerMove: pointerEvents ? onPointerMove : undefined,
onPointerOut: pointerEvents ? onPointerOut : undefined,
onPointerUp: pointerEvents ? onPointerUpProps : undefined,
sources: [XYCHART_EVENT_SOURCE, `${LINESERIES_EVENT_SOURCE}-${dataKey}`],
sources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
});

return (
Expand Down
16 changes: 13 additions & 3 deletions packages/visx-xychart/src/providers/TooltipProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,17 @@ export default function TooltipProvider<Datum extends object>({
hideTooltip: privateHideTooltip,
} = useTooltip<TooltipData<Datum>>(undefined);

const debouncedHideTooltip = useRef<ReturnType<typeof debounce> | null>(null);

const showTooltip = useRef(
({ svgPoint, index, key, datum, distanceX, distanceY }: PointerEventParams<Datum>) => {
// cancel any hideTooltip calls so it won't hide after invoking the logic below
if (debouncedHideTooltip.current) {
console.log('cancel');
williaster marked this conversation as resolved.
Show resolved Hide resolved
debouncedHideTooltip.current.cancel();
}
debouncedHideTooltip.current = null;

const distance = Math.sqrt((distanceX ?? Infinity ** 2) + (distanceY ?? Infinity ** 2));

updateTooltip(({ tooltipData: currData }) => ({
Expand All @@ -51,9 +60,10 @@ export default function TooltipProvider<Datum extends object>({
},
);

const hideTooltip = useCallback(debounce(privateHideTooltip, hideTooltipDebounceMs), [
privateHideTooltip,
]);
const hideTooltip = useCallback(() => {
debouncedHideTooltip.current = debounce(privateHideTooltip, hideTooltipDebounceMs);
debouncedHideTooltip.current();
}, [privateHideTooltip, hideTooltipDebounceMs]);

return (
<TooltipContext.Provider
Expand Down