feat(line): add support for onSliceClick

packages/line/index.d.ts

@@ -101,23 +101,27 @@ declare module '@nivo/line' {
 
     export type PointMouseHandler = (point: Point, event: React.MouseEvent) => void
 
+    export type SliceMouseHandler = (slice: Slice, event: React.MouseEvent) => void
+
     export interface PointTooltipProps {
         point: Point
     }
     export type PointTooltip = React.FunctionComponent<PointTooltipProps>
 
+    export type Slice = {
+        id: DatumValue
+        height: number
+        width: number
+        x0: number
+        x: number
+        y0: number
+        y: number
+        points: Point[]
+    }
+
     export interface SliceTooltipProps {
         axis: 'x' | 'y'
-        slice: {
-            id: DatumValue
-            height: number
-            width: number
-            x0: number
-            x: number
-            y0: number
-            y: number
-            points: Point[]
-        }
+        slice: Slice
     }
     export type SliceTooltip = React.FunctionComponent<SliceTooltipProps>
 
@@ -186,6 +190,7 @@ declare module '@nivo/line' {
         onMouseMove?: PointMouseHandler
         onMouseLeave?: PointMouseHandler
         onClick?: PointMouseHandler
+        onSliceClick?: SliceMouseHandler
 
         debugMesh?: boolean
 

packages/line/src/Line.js

@@ -84,6 +84,7 @@ const Line = props => {
         onMouseMove,
         onMouseLeave,
         onClick,
+        onSliceClick,
 
         tooltip,
 
@@ -220,6 +221,7 @@ const Line = props => {
                 tooltip={sliceTooltip}
                 current={currentSlice}
                 setCurrent={setCurrentSlice}
+                onSliceClick={onSliceClick}
             />
         )
     }

packages/line/src/Slices.js

@@ -10,7 +10,7 @@ import { memo } from 'react'
 import PropTypes from 'prop-types'
 import SlicesItem from './SlicesItem'
 
-const Slices = ({ slices, axis, debug, height, tooltip, current, setCurrent }) => {
+const Slices = ({ slices, axis, debug, height, tooltip, current, setCurrent, onSliceClick }) => {
     return slices.map(slice => (
         <SlicesItem
             key={slice.id}
@@ -21,6 +21,7 @@ const Slices = ({ slices, axis, debug, height, tooltip, current, setCurrent }) =
             tooltip={tooltip}
             setCurrent={setCurrent}
             isCurrent={current !== null && current.id === slice.id}
+            onSliceClick={onSliceClick}
         />
     ))
 }
@@ -44,6 +45,7 @@ Slices.propTypes = {
     tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
     current: PropTypes.object,
     setCurrent: PropTypes.func.isRequired,
+    onSliceClick: PropTypes.func,
 }
 
 export default memo(Slices)

packages/line/src/SlicesItem.js

@@ -10,7 +10,7 @@ import { createElement, memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { useTooltip } from '@nivo/tooltip'
 
-const SlicesItem = ({ slice, axis, debug, tooltip, isCurrent, setCurrent }) => {
+const SlicesItem = ({ slice, axis, debug, tooltip, isCurrent, setCurrent, onSliceClick }) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     const handleMouseEnter = useCallback(
@@ -33,6 +33,12 @@ const SlicesItem = ({ slice, axis, debug, tooltip, isCurrent, setCurrent }) => {
         setCurrent(null)
     }, [hideTooltip])
 
+    const handleClick = useCallback(() => {
+        if (onSliceClick) {
+            onSliceClick(slice)
+        }
+    }, [onSliceClick, slice])
+
     return (
         <rect
             x={slice.x0}
@@ -47,6 +53,7 @@ const SlicesItem = ({ slice, axis, debug, tooltip, isCurrent, setCurrent }) => {
             onMouseEnter={handleMouseEnter}
             onMouseMove={handleMouseMove}
             onMouseLeave={handleMouseLeave}
+            onClick={handleClick}
         />
     )
 }
@@ -59,6 +66,7 @@ SlicesItem.propTypes = {
     tooltip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     isCurrent: PropTypes.bool.isRequired,
     setCurrent: PropTypes.func.isRequired,
+    onSliceClick: PropTypes.func,
 }
 
 export default memo(SlicesItem)