feat(stream): add support for custom tooltip and stack tooltip

Author: plouc

packages/stream/src/LayerTooltip.tsx

@@ -0,0 +1,6 @@
+import { BasicTooltip } from '@nivo/tooltip'
+import { TooltipProps } from './types'
+
+export const LayerTooltip = ({ layer }: TooltipProps) => (
+    <BasicTooltip id={layer.label} enableChip={true} color={layer.color} />
+)

packages/stream/src/StackTooltip.tsx

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import { TableTooltip, Chip } from '@nivo/tooltip'
+import { StackTooltipProps } from './types'
+
+export const StackTooltip = ({ slice }: StackTooltipProps) => {
+    const rows = useMemo(
+        () =>
+            slice.stack.map(p => [
+                <Chip key={p.layerId} color={p.color} />,
+                p.layerLabel,
+                p.formattedValue,
+            ]),
+        [slice]
+    )
+
+    return <TableTooltip rows={rows} />
+}

packages/stream/src/Stream.tsx

@@ -59,7 +59,9 @@ const InnerStream = <RawDatum extends StreamDatum>({
     dotBorderColor,
 
     isInteractive = svgDefaultProps.isInteractive,
+    tooltip = svgDefaultProps.tooltip,
     enableStackTooltip = svgDefaultProps.enableStackTooltip,
+    stackTooltip = svgDefaultProps.stackTooltip,
 
     legends = svgDefaultProps.legends,
 
@@ -144,13 +146,14 @@ const InnerStream = <RawDatum extends StreamDatum>({
 
     if (chartLayers.includes('layers')) {
         layerById.layers = (
-            <StreamLayers
+            <StreamLayers<RawDatum>
                 key="layers"
                 layers={layers}
                 fillOpacity={fillOpacity}
                 borderWidth={borderWidth}
                 getBorderColor={getBorderColor}
                 isInteractive={isInteractive}
+                tooltip={tooltip}
             />
         )
     }
@@ -177,7 +180,14 @@ const InnerStream = <RawDatum extends StreamDatum>({
     }
 
     if (chartLayers.includes('slices') && isInteractive && enableStackTooltip) {
-        layerById.slices = <StreamSlices key="slices" slices={slices} height={innerHeight} />
+        layerById.slices = (
+            <StreamSlices<RawDatum>
+                key="slices"
+                slices={slices}
+                height={innerHeight}
+                tooltip={stackTooltip}
+            />
+        )
     }
 
     if (chartLayers.includes('legends')) {

packages/stream/src/StreamLayer.tsx

@@ -1,33 +1,31 @@
-import { useCallback } from 'react'
+import { useCallback, createElement } from 'react'
 import { useSpring, animated } from '@react-spring/web'
 import { useAnimatedPath, useMotionConfig } from '@nivo/core'
 import { InheritedColorConfigCustomFunction } from '@nivo/colors'
-import { BasicTooltip, useTooltip } from '@nivo/tooltip'
-import { StreamLayerData } from './types'
+import { useTooltip } from '@nivo/tooltip'
+import { StreamCommonProps, StreamDatum, StreamLayerData } from './types'
 
-interface StreamLayerProps {
+interface StreamLayerProps<RawDatum extends StreamDatum> {
     layer: StreamLayerData
     fillOpacity: number
     borderWidth: number
     getBorderColor: InheritedColorConfigCustomFunction<StreamLayerData>
     isInteractive: boolean
+    tooltip: StreamCommonProps<RawDatum>['tooltip']
 }
 
-export const StreamLayer = ({
+export const StreamLayer = <RawDatum extends StreamDatum>({
     layer,
     fillOpacity,
     borderWidth,
     getBorderColor,
     isInteractive,
-}: StreamLayerProps) => {
+    tooltip,
+}: StreamLayerProps<RawDatum>) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
     const handleMouseHover = useCallback(
         event => {
-            showTooltipFromEvent(
-                <BasicTooltip id={layer.label} enableChip={true} color={layer.color} />,
-                event,
-                'left'
-            )
+            showTooltipFromEvent(createElement(tooltip, { layer }), event, 'left')
         },
         [showTooltipFromEvent, layer]
     )

packages/stream/src/StreamLayers.tsx

@@ -1,31 +1,34 @@
 import { InheritedColorConfigCustomFunction } from '@nivo/colors'
 import { StreamLayer } from './StreamLayer'
-import { StreamLayerData } from './types'
+import { StreamCommonProps, StreamLayerData, StreamDatum } from './types'
 
-interface StreamLayersProps {
+interface StreamLayersProps<RawDatum extends StreamDatum> {
     layers: StreamLayerData[]
     fillOpacity: number
     borderWidth: number
     getBorderColor: InheritedColorConfigCustomFunction<StreamLayerData>
     isInteractive: boolean
+    tooltip: StreamCommonProps<RawDatum>['tooltip']
 }
 
-export const StreamLayers = ({
+export const StreamLayers = <RawDatum extends StreamDatum>({
     layers,
     fillOpacity,
     borderWidth,
     getBorderColor,
     isInteractive,
-}: StreamLayersProps) => (
+    tooltip,
+}: StreamLayersProps<RawDatum>) => (
     <g>
         {layers.map((layer, i) => (
-            <StreamLayer
+            <StreamLayer<RawDatum>
                 key={i}
                 layer={layer}
                 getBorderColor={getBorderColor}
                 borderWidth={borderWidth}
                 fillOpacity={fillOpacity}
                 isInteractive={isInteractive}
+                tooltip={tooltip}
             />
         ))}
     </g>

packages/stream/src/StreamSlices.tsx

@@ -1,15 +1,25 @@
-import { StreamSliceData } from './types'
+import { StreamSliceData, StreamDatum, StreamCommonProps } from './types'
 import { StreamSlicesItem } from './StreamSlicesItem'
 
-interface StreamSlicesProps {
+interface StreamSlicesProps<RawDatum extends StreamDatum> {
     slices: StreamSliceData[]
     height: number
+    tooltip: StreamCommonProps<RawDatum>['stackTooltip']
 }
 
-export const StreamSlices = ({ slices, height }: StreamSlicesProps) => (
+export const StreamSlices = <RawDatum extends StreamDatum>({
+    slices,
+    height,
+    tooltip,
+}: StreamSlicesProps<RawDatum>) => (
     <g>
         {slices.map(slice => (
-            <StreamSlicesItem key={slice.index} slice={slice} height={height} />
+            <StreamSlicesItem<RawDatum>
+                key={slice.index}
+                slice={slice}
+                height={height}
+                tooltip={tooltip}
+            />
         ))}
     </g>
 )

packages/stream/src/StreamSlicesItem.tsx

@@ -1,33 +1,27 @@
-import { useCallback, useMemo, useState } from 'react'
-import { TableTooltip, Chip } from '@nivo/tooltip'
+import { createElement, useCallback, useState } from 'react'
 import { useTooltip } from '@nivo/tooltip'
-import { StreamSliceData } from './types'
+import { StreamCommonProps, StreamDatum, StreamSliceData } from './types'
 
-interface StreamSlicesItemProps {
+interface StreamSlicesItemProps<RawDatum extends StreamDatum> {
     slice: StreamSliceData
     height: number
+    tooltip: StreamCommonProps<RawDatum>['stackTooltip']
 }
 
-export const StreamSlicesItem = ({ slice, height }: StreamSlicesItemProps) => {
+export const StreamSlicesItem = <RawDatum extends StreamDatum>({
+    slice,
+    height,
+    tooltip,
+}: StreamSlicesItemProps<RawDatum>) => {
     const [isHover, setIsHover] = useState(false)
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
-    const rows = useMemo(
-        () =>
-            slice.stack.map(p => [
-                <Chip key={p.layerId} color={p.color} />,
-                p.layerLabel,
-                p.formattedValue,
-            ]),
-        [slice]
-    )
-
     const handleMouseHover = useCallback(
         event => {
             setIsHover(true)
-            showTooltipFromEvent(<TableTooltip rows={rows} />, event, 'left')
+            showTooltipFromEvent(createElement(tooltip, { slice }), event, 'left')
         },
-        [setIsHover, showTooltipFromEvent, rows]
+        [setIsHover, showTooltipFromEvent, tooltip, slice]
     )
 
     const handleMouseLeave = useCallback(() => {

packages/stream/src/props.ts

@@ -1,6 +1,8 @@
 import { StackOrder, StackOffset, AreaCurve } from '@nivo/core'
 import { StreamCommonProps, StreamLayerId } from './types'
 import { StreamDotsItem } from './StreamDotsItem'
+import { LayerTooltip } from './LayerTooltip'
+import { StackTooltip } from './StackTooltip'
 
 export const defaultProps = {
     label: 'id',
@@ -30,8 +32,9 @@ export const defaultProps = {
     dotBorderColor: { from: 'color' },
 
     isInteractive: true,
-    tooltipLabel: 'id',
+    tooltip: LayerTooltip,
     enableStackTooltip: true,
+    stackTooltip: StackTooltip,
 
     legends: [],
     legendLabel: 'id',

packages/stream/src/types.ts

@@ -60,7 +60,17 @@ export interface StreamLayerDatum {
     y2: number
 }
 
-export type DotComponent = React.FC<{
+export interface TooltipProps {
+    layer: StreamLayerData
+}
+export type Tooltip = FunctionComponent<TooltipProps>
+
+export interface StackTooltipProps {
+    slice: StreamSliceData
+}
+export type StackTooltip = FunctionComponent<StackTooltipProps>
+
+export type DotComponent = FunctionComponent<{
     datum: StreamLayerDatum
     x: number
     y: number
@@ -103,10 +113,6 @@ export type StreamCommonProps<RawDatum extends StreamDatum> = {
     enableGridY: boolean
     gridYValues: GridValues<number>
 
-    isInteractive: boolean
-    tooltipLabel: PropertyAccessor<StreamLayerData, string>
-    enableStackTooltip: boolean
-
     theme: Theme
     colors: OrdinalColorScaleConfig<Omit<StreamLayerData, 'label' | 'color' | 'data'>>
     fillOpacity: number
@@ -121,6 +127,11 @@ export type StreamCommonProps<RawDatum extends StreamDatum> = {
     dotBorderWidth: ((datum: StreamLayerDatum) => number) | number
     dotBorderColor: InheritedColorConfig<StreamLayerDatum>
 
+    isInteractive: boolean
+    tooltip: Tooltip
+    enableStackTooltip: boolean
+    stackTooltip: StackTooltip
+
     legends: LegendProps[]
 
     renderWrapper: boolean

packages/stream/tests/Stream.test.tsx

@@ -1,5 +1,5 @@
 import { mount } from 'enzyme'
-import { Stream, StreamLayerDatum, StreamSvgProps } from '../src'
+import { Stream, StreamLayerData, StreamLayerDatum, StreamSliceData, StreamSvgProps } from '../src'
 
 type TestDatum = {
     A: number
@@ -31,10 +31,7 @@ describe('layers', () => {
 
     it('should support custom layers', () => {
         const wrapper = mount(
-            <Stream<TestDatum>
-                {...commonProps}
-                layers={['grid', 'axes', 'layers', CustomLayer]}
-            />
+            <Stream<TestDatum> {...commonProps} layers={['grid', 'axes', 'layers', CustomLayer]} />
         )
 
         const customLayer = wrapper.find(CustomLayer)
@@ -92,6 +89,64 @@ describe('dots', () => {
     })
 })
 
+describe('tooltip', () => {
+    it('should show a tooltip when hovering a layer', () => {
+        const wrapper = mount(<Stream<TestDatum> {...commonProps} />)
+
+        expect(wrapper.find('LayerTooltip').exists()).toBe(false)
+
+        wrapper.find('StreamLayer').at(0).find('path').simulate('mouseEnter')
+        const tooltip = wrapper.find('LayerTooltip')
+        expect(tooltip.exists()).toBe(true)
+
+        const layerData = tooltip.prop<StreamLayerData>('layer')
+        expect(layerData.id).toBe(commonProps.keys[0])
+    })
+
+    it('should have stack tooltip enabled by default', () => {
+        const wrapper = mount(<Stream<TestDatum> {...commonProps} />)
+
+        const slices = wrapper.find('StreamSlices')
+        expect(slices.exists()).toBe(true)
+
+        const sliceRect = slices.find('StreamSlicesItem').at(0).find('rect')
+        expect(sliceRect.exists()).toBe(true)
+
+        sliceRect.simulate('mouseEnter')
+        const tooltip = wrapper.find('StackTooltip')
+        expect(tooltip.exists()).toBe(true)
+
+        const sliceData = tooltip.prop<StreamSliceData>('slice')
+        expect(sliceData.index).toBe(0)
+        expect(sliceData.x).toBe(0)
+
+        const expectedData = [
+            { layerId: 'C', value: 30 },
+            { layerId: 'B', value: 20 },
+            { layerId: 'A', value: 10 },
+        ]
+        expectedData.forEach((expectedDatum, index) => {
+            expect(sliceData.stack[index].layerId).toBe(expectedDatum.layerId)
+            expect(sliceData.stack[index].value).toBe(expectedDatum.value)
+        })
+    })
+
+    it('should allow to disable stack tooltip', () => {
+        const wrapper = mount(<Stream<TestDatum> {...commonProps} enableStackTooltip={false} />)
+
+        expect(wrapper.find('StreamSlices').exists()).toBe(false)
+    })
+
+    it('should disable tooltip and stack tooltip when `isInteractive` is false', () => {
+        const wrapper = mount(<Stream<TestDatum> {...commonProps} isInteractive={false} />)
+
+        wrapper.find('StreamLayer').at(0).find('path').simulate('mouseEnter')
+        expect(wrapper.find('LayerTooltip').exists()).toBe(false)
+
+        expect(wrapper.find('StreamSlices').exists()).toBe(false)
+    })
+})
+
 describe('accessibility', () => {
     it('should forward root aria properties to the SVG element', () => {
         const wrapper = mount(

website/src/data/components/stream/props.js

@@ -315,6 +315,37 @@ const props = [
         controlType: 'switch',
         group: 'Interactivity',
     },
+    {
+        key: 'tooltip',
+        flavors: ['svg'],
+        help: `Tooltip custom component.`,
+        type: 'FunctionComponent',
+        required: false,
+        group: 'Interactivity',
+        description: `
+            Allows complete tooltip customisation, it must return
+            a valid HTML element and will receive the following data:
+            
+            \`\`\`
+            {
+                layer: {
+                    id: string | number
+                    label: string | number
+                    color: string
+                    // populated when using patterns/gradients
+                    fill?: string
+                    path: string
+                    // computed data for each data point for this
+                    // specific layer
+                    data: StreamLayerDatum[]
+                }
+            }
+            \`\`\`
+            
+            You can also customize the style of the tooltip
+            using the \`theme.tooltip\` object.
+        `,
+    },
     {
         key: 'enableStackTooltip',
         flavors: ['svg'],
@@ -325,6 +356,14 @@ const props = [
         controlType: 'switch',
         group: 'Interactivity',
     },
+    {
+        key: 'stackTooltip',
+        flavors: ['svg'],
+        help: `Stack tooltip custom component.`,
+        type: 'FunctionComponent',
+        required: false,
+        group: 'Interactivity',
+    },
     ...motionProperties(['svg'], defaultProps, 'react-spring'),
     {
         key: 'ariaLabel',