From 7bcea4a00aec6389d6706b09f856d6ad1a602078 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Mon, 11 Jan 2021 19:06:07 -0800 Subject: [PATCH 1/2] fix(demo/barstack): improve Tooltip positioning logic --- .../src/sandboxes/visx-barstack/Example.tsx | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/visx-demo/src/sandboxes/visx-barstack/Example.tsx b/packages/visx-demo/src/sandboxes/visx-barstack/Example.tsx index 36fa237d5..839a9de6d 100644 --- a/packages/visx-demo/src/sandboxes/visx-barstack/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-barstack/Example.tsx @@ -9,6 +9,7 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale'; import { timeParse, timeFormat } from 'd3-time-format'; import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'; import { LegendOrdinal } from '@visx/legend'; +import { localPoint } from '@visx/event'; type CityName = 'New York' | 'San Francisco' | 'Austin'; @@ -92,7 +93,12 @@ export default function Example({ showTooltip, } = useTooltip(); - const { containerRef, TooltipInPortal } = useTooltipInPortal(); + const { containerRef, TooltipInPortal } = useTooltipInPortal({ + // TooltipInPortal is rendered in a separate child of and positioned + // with page coordinates which should be updated on scroll. consider using + // Tooltip or TooltipWithBounds if you don't need to render inside a Portal + scroll: true, + }); if (width < 10) return null; // bounds @@ -103,7 +109,6 @@ export default function Example({ temperatureScale.range([yMax, 0]); return width < 10 ? null : ( - // relative position is needed for correct tooltip positioning
@@ -147,11 +152,14 @@ export default function Example({ }} onMouseMove={event => { if (tooltipTimeout) clearTimeout(tooltipTimeout); - const top = event.clientY - margin.top - bar.height; + // TooltipInPortal expects coordinates to be relative to containerRef + // localPoint returns coordinates relative to the nearest SVG, which + // is what containerRef is set to in this example. + const eventSvgCoords = localPoint(event); const left = bar.x + bar.width / 2; showTooltip({ tooltipData: bar, - tooltipTop: top, + tooltipTop: eventSvgCoords?.y, tooltipLeft: left, }); }} @@ -188,12 +196,7 @@ export default function Example({
{tooltipOpen && tooltipData && ( - +
{tooltipData.key}
From 7858c1dcb7f85791ff619cbf0873475f6502ce40 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Mon, 11 Jan 2021 19:21:21 -0800 Subject: [PATCH 2/2] deps(demo/barstack): add @visx/event dep --- packages/visx-demo/src/sandboxes/visx-barstack/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/visx-demo/src/sandboxes/visx-barstack/package.json b/packages/visx-demo/src/sandboxes/visx-barstack/package.json index 6fd55a87d..c234baa91 100644 --- a/packages/visx-demo/src/sandboxes/visx-barstack/package.json +++ b/packages/visx-demo/src/sandboxes/visx-barstack/package.json @@ -8,6 +8,7 @@ "@types/react": "^16", "@types/react-dom": "^16", "@visx/axis": "latest", + "@visx/event": "latest", "@visx/grid": "latest", "@visx/group": "latest", "@visx/legend": "latest",