Add option for positioning tooltip for LineCanvas

* Defaults to the existing behavior to be at the cursor, but optionally can be placed at the point that the data in the tooltip is representing
plouc · Jun 5, 2023 · cb42971 · cb42971
1 parent 31ce26a
commit cb42971
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 5 deletions.
diff --git a/packages/line/src/LineCanvas.js b/packages/line/src/LineCanvas.js
@@ -67,6 +67,7 @@ const LineCanvas = ({
     onMouseLeave,
     onClick,
     tooltip,
+    tooltipPosition = LineCanvasDefaultProps.tooltipPosition,
 
     canvasRef,
 }) => {
@@ -276,20 +277,37 @@ const LineCanvas = ({
         [canvasEl, margin, innerWidth, innerHeight, delaunay]
     )
 
-    const { showTooltipFromEvent, hideTooltip } = useTooltip()
+    const { showTooltipAt, showTooltipFromEvent, hideTooltip } = useTooltip()
 
     const handleMouseHover = useCallback(
         event => {
             const point = getPointFromMouseEvent(event)
             setCurrentPoint(point)
 
             if (point) {
-                showTooltipFromEvent(createElement(tooltip, { point }), event)
+                if (tooltipPosition === 'point') {
+                    showTooltipAt(
+                        createElement(tooltip, { point }),
+                        [point.x + margin.left, point.y + margin.top],
+                        'top'
+                    )
+                } else {
+                    showTooltipFromEvent(createElement(tooltip, { point }), event)
+                }
             } else {
                 hideTooltip()
             }
         },
-        [getPointFromMouseEvent, setCurrentPoint, showTooltipFromEvent, hideTooltip, tooltip]
+        [
+            getPointFromMouseEvent,
+            setCurrentPoint,
+            showTooltipAt,
+            showTooltipFromEvent,
+            hideTooltip,
+            tooltip,
+            tooltipPosition,
+            margin,
+        ]
     )
 
     const handleMouseLeave = useCallback(

diff --git a/packages/line/src/props.js b/packages/line/src/props.js
@@ -212,4 +212,5 @@ export const LineDefaultProps = {
 export const LineCanvasDefaultProps = {
     ...commonDefaultProps,
     pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
+    tooltipPostion: 'cursor',
 }
diff --git a/website/src/data/components/line/defaults.ts b/website/src/data/components/line/defaults.ts
@@ -89,4 +89,6 @@ export default {
 
     enableCrosshair: true,
     crosshairType: 'bottom-left',
+
+    tooltipPosition: 'cursor',
 }
diff --git a/website/src/data/components/line/props.ts b/website/src/data/components/line/props.ts
@@ -80,7 +80,7 @@ const props: ChartProperty[] = [
 
             If you use a time scale, you must provide a time format
             as values are converted to Date objects.
-            
+
             Under the hood, nivo uses [d3-format](https://github.com/d3/d3-format),
             please have a look at it for available formats, you can also pass a function
             which will receive the raw value and should return the formatted one.
@@ -163,7 +163,7 @@ const props: ChartProperty[] = [
 
             If you use a time scale, you must provide a time format
             as values are converted to Date objects.
-            
+
             Under the hood, nivo uses [d3-format](https://github.com/d3/d3-format),
             please have a look at it for available formats, you can also pass a function
             which will receive the raw value and should return the formatted one.
@@ -446,6 +446,28 @@ const props: ChartProperty[] = [
         type: 'Function',
         required: false,
     },
+    {
+        key: 'tooltipPosition',
+        flavors: ['canvas'],
+        group: 'Interactivity',
+        help: `Tooltip position when hovering`,
+        type: 'string',
+        required: false,
+        defaultValue: defaults.tooltipPosition,
+        control: {
+            type: 'choices',
+            choices: [
+                {
+                    label: 'cursor',
+                    value: 'cursor',
+                },
+                {
+                    label: 'point',
+                    value: 'point',
+                },
+            ],
+        },
+    },
     {
         key: 'enableSlices',
         group: 'Interactivity',