Add support for custom tooltips in Funnel #1169

packages/funnel/src/Funnel.tsx

@@ -45,6 +45,7 @@ const InnerFunnel = <D extends FunnelDatum>({
     onMouseMove,
     onMouseLeave,
     onClick,
+    tooltip,
     role = svgDefaultProps.role,
     ariaLabel,
     ariaLabelledBy,
@@ -91,6 +92,7 @@ const InnerFunnel = <D extends FunnelDatum>({
         onMouseMove,
         onMouseLeave,
         onClick,
+        tooltip,
     })
 
     const layerById: Record<FunnelLayerId, ReactNode> = {

packages/funnel/src/PartTooltip.tsx

@@ -1,7 +1,7 @@
 import { BasicTooltip } from '@nivo/tooltip'
 import { FunnelDatum, FunnelPartWithHandlers } from './types'
 
-interface PartTooltipProps<D extends FunnelDatum> {
+export interface PartTooltipProps<D extends FunnelDatum> {
     part: FunnelPartWithHandlers<D>
 }
 

packages/funnel/src/hooks.ts

@@ -6,7 +6,7 @@ import { useTheme, useValueFormatter } from '@nivo/core'
 import { useAnnotations } from '@nivo/annotations'
 import { useTooltip, TooltipActionsContextData } from '@nivo/tooltip'
 import { svgDefaultProps as defaults } from './props'
-import { PartTooltip } from './PartTooltip'
+import { PartTooltip, PartTooltipProps } from './PartTooltip'
 import {
     FunnelDatum,
     FunnelCommonProps,
@@ -213,6 +213,7 @@ export const computePartsHandlers = <D extends FunnelDatum>({
     onClick,
     showTooltipFromEvent,
     hideTooltip,
+    tooltip = PartTooltip,
 }: {
     parts: FunnelPart<D>[]
     setCurrentPartId: (id: string | number | null) => void
@@ -223,13 +224,14 @@ export const computePartsHandlers = <D extends FunnelDatum>({
     onClick?: FunnelCommonProps<D>['onClick']
     showTooltipFromEvent: TooltipActionsContextData['showTooltipFromEvent']
     hideTooltip: () => void
+    tooltip?: (props: PartTooltipProps<D>) => JSX.Element
 }) => {
     if (!isInteractive) return parts
 
     return parts.map(part => {
         const boundOnMouseEnter = (event: MouseEvent) => {
             setCurrentPartId(part.data.id)
-            showTooltipFromEvent(createElement(PartTooltip, { part }), event)
+            showTooltipFromEvent(createElement(tooltip, { part }), event)
             onMouseEnter !== undefined && onMouseEnter(part, event)
         }
 
@@ -240,7 +242,7 @@ export const computePartsHandlers = <D extends FunnelDatum>({
         }
 
         const boundOnMouseMove = (event: MouseEvent) => {
-            showTooltipFromEvent(createElement(PartTooltip, { part }), event)
+            showTooltipFromEvent(createElement(tooltip, { part }), event)
             onMouseMove !== undefined && onMouseMove(part, event)
         }
 
@@ -296,6 +298,7 @@ export const useFunnel = <D extends FunnelDatum>({
     onMouseMove,
     onMouseLeave,
     onClick,
+    tooltip,
 }: {
     data: FunnelDataProps<D>['data']
     width: number
@@ -324,6 +327,7 @@ export const useFunnel = <D extends FunnelDatum>({
     onMouseMove?: FunnelCommonProps<D>['onMouseMove']
     onMouseLeave?: FunnelCommonProps<D>['onMouseLeave']
     onClick?: FunnelCommonProps<D>['onClick']
+    tooltip?: (props: PartTooltipProps<D>) => JSX.Element
 }) => {
     const theme = useTheme()
     const getColor = useOrdinalColorScale<D>(colors, 'id')
@@ -573,6 +577,7 @@ export const useFunnel = <D extends FunnelDatum>({
                 onClick,
                 showTooltipFromEvent,
                 hideTooltip,
+                tooltip,
             }),
         [
             parts,
@@ -584,6 +589,7 @@ export const useFunnel = <D extends FunnelDatum>({
             onClick,
             showTooltipFromEvent,
             hideTooltip,
+            tooltip,
         ]
     )
 

packages/funnel/src/types.ts

@@ -3,6 +3,7 @@ import { Area, Line } from 'd3-shape'
 import { Box, Theme, Dimensions, ModernMotionProps, ValueFormat } from '@nivo/core'
 import { InheritedColorConfig, OrdinalColorScaleConfig } from '@nivo/colors'
 import { AnnotationMatcher } from '@nivo/annotations'
+import { PartTooltipProps } from './PartTooltip'
 
 export interface FunnelDatum {
     id: string | number
@@ -116,6 +117,7 @@ export interface FunnelCommonProps<D extends FunnelDatum> {
     onMouseLeave: FunnelPartEventHandler<D>
     onMouseMove: FunnelPartEventHandler<D>
     onClick: FunnelPartEventHandler<D>
+    tooltip: (props: PartTooltipProps<D>) => JSX.Element
 
     renderWrapper: boolean
 

packages/funnel/stories/funnel.stories.tsx

@@ -0,0 +1,65 @@
+import { withKnobs } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+
+import { ResponsiveFunnel } from '../src'
+
+const commonProps = {
+    data: [
+        {
+            id: 'step_sent',
+            value: 85523,
+            label: 'Sent',
+        },
+        {
+            id: 'step_viewed',
+            value: 74844,
+            label: 'Viewed',
+        },
+        {
+            id: 'step_clicked',
+            value: 62617,
+            label: 'Clicked',
+        },
+        {
+            id: 'step_add_to_card',
+            value: 50425,
+            label: 'Add To Card',
+        },
+        {
+            id: 'step_purchased',
+            value: 31139,
+            label: 'Purchased',
+        },
+    ],
+    margin: { top: 20, right: 20, bottom: 20, left: 20 },
+    borderWidth: 20,
+    motionConfig: 'wobbly',
+}
+
+const stories = storiesOf('Funnel', module)
+
+stories.addDecorator(withKnobs)
+
+stories.add('custom tooltip', () => (
+    <div style={{ width: 900, height: 300 }}>
+        <ResponsiveFunnel
+            {...commonProps}
+            direction={'horizontal'}
+            tooltip={({ part }) => (
+                <div
+                    style={{
+                        padding: 12,
+                        color: '#fff',
+                        background: '#222222',
+                    }}
+                >
+                    <span>Look, I'm custom :)</span>
+                    <br />
+                    <strong>
+                        {part.data.id}: {part.formattedValue}
+                    </strong>
+                </div>
+            )}
+        />
+    </div>
+))