From 75eafa185d1d1cceeaacad589288f82d5d724842 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Quinto?= Date: Tue, 27 Jul 2021 13:38:21 +0100 Subject: [PATCH] feat(bullet): add custom tooltip (#1694) Co-authored-by: Jose Quinto Zamora --- packages/bullet/src/Bullet.tsx | 2 ++ packages/bullet/src/BulletItem.tsx | 27 +++++------------- packages/bullet/src/BulletTooltip.tsx | 20 +++++++++++++ packages/bullet/src/props.ts | 2 ++ packages/bullet/src/types.ts | 7 +++++ packages/bullet/stories/bullet.stories.tsx | 33 ++++++++++++++++++++++ packages/bullet/tests/Bullet.test.tsx | 25 ++++++++++++++++ 7 files changed, 96 insertions(+), 20 deletions(-) create mode 100644 packages/bullet/src/BulletTooltip.tsx diff --git a/packages/bullet/src/Bullet.tsx b/packages/bullet/src/Bullet.tsx index 5e2fc5ec1c..b8206301ca 100644 --- a/packages/bullet/src/Bullet.tsx +++ b/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} /> ))} diff --git a/packages/bullet/src/BulletItem.tsx b/packages/bullet/src/BulletItem.tsx index 3ef51ab0b8..c0a4abcc4e 100644 --- a/packages/bullet/src/BulletItem.tsx +++ b/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 = ( { showTooltipFromEvent( - - {range.v0} to {range.v1} - - } - enableChip={true} - color={range.color} - />, + , event ) }} @@ -122,11 +117,7 @@ export const BulletItem = ({ component={markerComponent} onMouseEnter={(marker, event) => { showTooltipFromEvent( - {marker.value}} - enableChip={true} - color={marker.color} - />, + , event ) }} @@ -208,11 +199,7 @@ export const BulletItem = ({ borderWidth={measureBorderWidth} onMouseEnter={(measure, event) => { showTooltipFromEvent( - {measure.v1}} - enableChip={true} - color={measure.color} - />, + , event ) }} diff --git a/packages/bullet/src/BulletTooltip.tsx b/packages/bullet/src/BulletTooltip.tsx new file mode 100644 index 0000000000..e5f2a6c237 --- /dev/null +++ b/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 ( + + {v0} to {v1} + + ) : ( + {v0} + ) + } + enableChip={true} + color={color} + /> + ) +} diff --git a/packages/bullet/src/props.ts b/packages/bullet/src/props.ts index f5f5a7fd2b..136c857705 100644 --- a/packages/bullet/src/props.ts +++ b/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, diff --git a/packages/bullet/src/types.ts b/packages/bullet/src/types.ts index 98f959adde..2541847d1e 100644 --- a/packages/bullet/src/types.ts +++ b/packages/bullet/src/types.ts @@ -56,6 +56,7 @@ export type CommonBulletProps = Dimensions & { titleOffsetX: number titleOffsetY: number titleRotation: number + tooltip: React.ComponentType rangeBorderColor: InheritedColorConfig rangeBorderWidth: number @@ -201,3 +202,9 @@ export type BulletItemProps = Omit< measureHeight: number markerHeight: number } + +export interface BulletTooltipProps { + v0: number + v1?: number + color: string +} diff --git a/packages/bullet/stories/bullet.stories.tsx b/packages/bullet/stories/bullet.stories.tsx index e1cf7b6a43..729184e0d4 100644 --- a/packages/bullet/stories/bullet.stories.tsx +++ b/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 ( + + {v0} to {v1} + + ) : ( + {v0} + ) + } + enableChip={true} + color={color} + /> + ) +} + +stories.add('custom tooltip', () => ( + +)) diff --git a/packages/bullet/tests/Bullet.test.tsx b/packages/bullet/tests/Bullet.test.tsx index 2bea26cd3f..e52d83b7b2 100644 --- a/packages/bullet/tests/Bullet.test.tsx +++ b/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 + }) => ( + + {v1 ? `${v0} to ${v1}` : `Custom${v0}`} + + ) + const wrapper = mount( + + ) + + wrapper.find('BulletMarkersItem').at(0).simulate('mouseenter') + + const tooltip = wrapper.find(CustomTooltip) + expect(tooltip.exists()).toBeTruthy() + expect(tooltip.text()).toEqual('Custom20') + }) }) describe('custom components', () => {