feat(bullet): add custom tooltip (#1694)

Co-authored-by: Jose Quinto Zamora <jose.quintozamora@concentra.co.uk>

Author: jquintozamora

packages/bullet/src/Bullet.tsx

@@ -42,6 +42,7 @@ export const Bullet = (props: BulletSvgProps) => {
         markerColors,
 
         theme,
+        tooltip = defaultProps.tooltip,
 
         animate,
         motionConfig,
@@ -112,6 +113,7 @@ export const Bullet = (props: BulletSvgProps) => {
                         onRangeClick={onRangeClick}
                         onMeasureClick={onMeasureClick}
                         onMarkerClick={onMarkerClick}
+                        tooltip={tooltip}
                     />
                 ))}
             </SvgWrapper>

packages/bullet/src/BulletItem.tsx

@@ -3,7 +3,7 @@ import { useSpring, animated } from '@react-spring/web'
 import { Axis } from '@nivo/axes'
 // @ts-ignore
 import { getColorScale, useMotionConfig, useTheme } from '@nivo/core'
-import { BasicTooltip, useTooltip } from '@nivo/tooltip'
+import { useTooltip } from '@nivo/tooltip'
 import { stackValues } from './compute'
 import { BulletMarkers } from './BulletMarkers'
 import { BulletRects } from './BulletRects'
@@ -27,6 +27,7 @@ export const BulletItem = ({
     titleOffsetX,
     titleOffsetY,
     titleRotation,
+    tooltip,
 
     rangeBorderColor,
     rangeBorderWidth,
@@ -77,6 +78,8 @@ export const BulletItem = ({
         }))
     }, [markerColors, markers, scale])
 
+    const TooltipComponent = tooltip
+
     const rangeNodes = (
         <BulletRects
             data={computedRanges}
@@ -92,15 +95,7 @@ export const BulletItem = ({
             borderWidth={rangeBorderWidth}
             onMouseEnter={(range, event) => {
                 showTooltipFromEvent(
-                    <BasicTooltip
-                        id={
-                            <span>
-                                <strong>{range.v0}</strong> to <strong>{range.v1}</strong>
-                            </span>
-                        }
-                        enableChip={true}
-                        color={range.color}
-                    />,
+                    <TooltipComponent color={range.color} v0={range.v0} v1={range.v1} />,
                     event
                 )
             }}
@@ -122,11 +117,7 @@ export const BulletItem = ({
             component={markerComponent}
             onMouseEnter={(marker, event) => {
                 showTooltipFromEvent(
-                    <BasicTooltip
-                        id={<strong>{marker.value}</strong>}
-                        enableChip={true}
-                        color={marker.color}
-                    />,
+                    <TooltipComponent color={marker.color} v0={marker.value} />,
                     event
                 )
             }}
@@ -208,11 +199,7 @@ export const BulletItem = ({
                 borderWidth={measureBorderWidth}
                 onMouseEnter={(measure, event) => {
                     showTooltipFromEvent(
-                        <BasicTooltip
-                            id={<strong>{measure.v1}</strong>}
-                            enableChip={true}
-                            color={measure.color}
-                        />,
+                        <TooltipComponent color={measure.color} v0={measure.v1} />,
                         event
                     )
                 }}

packages/bullet/src/BulletTooltip.tsx

@@ -0,0 +1,20 @@
+import { BulletTooltipProps } from './types'
+import { BasicTooltip } from '@nivo/tooltip'
+
+export const BulletTooltip = ({ color, v0, v1 }: BulletTooltipProps) => {
+    return (
+        <BasicTooltip
+            id={
+                v1 ? (
+                    <span>
+                        <strong>{v0}</strong> to <strong>{v1}</strong>
+                    </span>
+                ) : (
+                    <strong>{v0}</strong>
+                )
+            }
+            enableChip={true}
+            color={color}
+        />
+    )
+}

packages/bullet/src/props.ts

@@ -1,6 +1,7 @@
 import { BulletMarkersItem } from './BulletMarkersItem'
 import { BulletRectsItem } from './BulletRectsItem'
 import { motionDefaultProps, defaultMargin } from '@nivo/core'
+import { BulletTooltip } from './BulletTooltip'
 
 export const defaultProps = {
     layout: 'horizontal',
@@ -28,6 +29,7 @@ export const defaultProps = {
     measureBorderColor: { from: 'color' },
     markerSize: 0.6,
     isInteractive: true,
+    tooltip: BulletTooltip,
     animate: motionDefaultProps.animate,
     motionConfig: motionDefaultProps.config,
     margin: defaultMargin,

packages/bullet/src/types.ts

@@ -56,6 +56,7 @@ export type CommonBulletProps = Dimensions & {
     titleOffsetX: number
     titleOffsetY: number
     titleRotation: number
+    tooltip: React.ComponentType<BulletTooltipProps>
 
     rangeBorderColor: InheritedColorConfig<ComputedRangeDatum>
     rangeBorderWidth: number
@@ -201,3 +202,9 @@ export type BulletItemProps = Omit<
         measureHeight: number
         markerHeight: number
     }
+
+export interface BulletTooltipProps {
+    v0: number
+    v1?: number
+    color: string
+}

packages/bullet/stories/bullet.stories.tsx

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/react'
 import { generateBulletData } from '@nivo/generators'
+import { BasicTooltip } from '@nivo/tooltip'
 import { withKnobs, boolean, number } from '@storybook/addon-knobs'
 import { Bullet } from '../src'
 
@@ -181,3 +182,35 @@ stories.add('support min/max value property', () => (
         }
     />
 ))
+
+const CustomTooltip = ({ v0, v1, color }: { color: string; v0: number; v1?: number }) => {
+    return (
+        <BasicTooltip
+            id={
+                v1 ? (
+                    <span style={{ color: 'peachpuff' }}>
+                        <strong>{v0}</strong> to <strong>{v1}</strong>
+                    </span>
+                ) : (
+                    <strong style={{ color: 'rosybrown' }}>{v0}</strong>
+                )
+            }
+            enableChip={true}
+            color={color}
+        />
+    )
+}
+
+stories.add('custom tooltip', () => (
+    <Bullet
+        {...commonProps}
+        tooltip={CustomTooltip}
+        theme={{
+            tooltip: {
+                container: {
+                    background: '#333',
+                },
+            },
+        }}
+    />
+))

packages/bullet/tests/Bullet.test.tsx

@@ -339,6 +339,31 @@ describe('Bullet', () => {
             expect(tooltip.exists()).toBeTruthy()
             expect(tooltip.text()).toEqual('20')
         })
+
+        it('should allow to override the default tooltip', () => {
+            const CustomTooltip = ({
+                color,
+                v0,
+                v1,
+            }: {
+                color: string
+                v0: number
+                v1?: number
+            }) => (
+                <span style={{ backgroundColor: color }}>
+                    {v1 ? `${v0} to ${v1}` : `Custom${v0}`}
+                </span>
+            )
+            const wrapper = mount(
+                <Bullet width={400} height={400} data={sampleData} tooltip={CustomTooltip} />
+            )
+
+            wrapper.find('BulletMarkersItem').at(0).simulate('mouseenter')
+
+            const tooltip = wrapper.find(CustomTooltip)
+            expect(tooltip.exists()).toBeTruthy()
+            expect(tooltip.text()).toEqual('Custom20')
+        })
     })
 
     describe('custom components', () => {