diff --git a/packages/bar/src/Bar.js b/packages/bar/src/Bar.js index 25180842f..1040dadf8 100644 --- a/packages/bar/src/Bar.js +++ b/packages/bar/src/Bar.js @@ -105,6 +105,8 @@ const Bar = ({ tooltipFormat, tooltip, onClick, + onMouseEnter, + onMouseLeave, legends, }) => { @@ -183,6 +185,8 @@ const Bar = ({ showTooltip, hideTooltip, onClick, + onMouseEnter, + onMouseLeave, theme, tooltipFormat, tooltip, diff --git a/packages/bar/src/BarItem.js b/packages/bar/src/BarItem.js index ff6bed6d5..aaac2ffc5 100644 --- a/packages/bar/src/BarItem.js +++ b/packages/bar/src/BarItem.js @@ -32,11 +32,21 @@ const BarItem = ({ showTooltip, hideTooltip, onClick, + onMouseEnter, + onMouseLeave, tooltip, theme, }) => { const handleTooltip = e => showTooltip(tooltip, e) + const handleMouseEnter = e => { + onMouseEnter(data, e) + showTooltip(tooltip, e) + } + const handleMouseLeave = e => { + onMouseLeave(data, e) + hideTooltip(e) + } return ( @@ -48,9 +58,9 @@ const BarItem = ({ fill={data.fill ? data.fill : color} strokeWidth={borderWidth} stroke={borderColor} - onMouseEnter={handleTooltip} + onMouseEnter={handleMouseEnter} onMouseMove={handleTooltip} - onMouseLeave={hideTooltip} + onMouseLeave={handleMouseLeave} onClick={onClick} /> {shouldRenderLabel && ( @@ -96,6 +106,8 @@ BarItem.propTypes = { showTooltip: PropTypes.func.isRequired, hideTooltip: PropTypes.func.isRequired, onClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, tooltip: PropTypes.element.isRequired, theme: PropTypes.shape({ diff --git a/packages/bar/src/props.js b/packages/bar/src/props.js index 924fef0c2..944828141 100644 --- a/packages/bar/src/props.js +++ b/packages/bar/src/props.js @@ -58,6 +58,8 @@ export const BarPropTypes = { isInteractive: PropTypes.bool, onClick: PropTypes.func.isRequired, + onMouseEnter: PropTypes.func.isRequired, + onMouseLeave: PropTypes.func.isRequired, tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), tooltip: PropTypes.func, @@ -107,6 +109,8 @@ export const BarDefaultProps = { isInteractive: true, onClick: noop, + onMouseEnter: noop, + onMouseLeave: noop, legends: [], diff --git a/packages/bar/stories/bar.stories.js b/packages/bar/stories/bar.stories.js index 28bb5df49..b0b5c3930 100644 --- a/packages/bar/stories/bar.stories.js +++ b/packages/bar/stories/bar.stories.js @@ -273,3 +273,18 @@ stories.add( /> )) ) + +stories.add( + 'enter/leave (check console)', + withInfo()(() => ( + { + console.log({ is: 'mouseenter', data, event: e }) // eslint-disable-line + }} + onMouseLeave={(data, e) => { + console.log({ is: 'mouseleave', data, event: e }) // eslint-disable-line + }} + /> + )) +) diff --git a/packages/pie/src/Pie.js b/packages/pie/src/Pie.js index 37f18fc49..88c160077 100644 --- a/packages/pie/src/Pie.js +++ b/packages/pie/src/Pie.js @@ -84,6 +84,8 @@ class Pie extends Component { // interactivity isInteractive, onClick, + onMouseEnter, + onMouseLeave, tooltipFormat, tooltip, @@ -137,6 +139,8 @@ class Pie extends Component { tooltipFormat={tooltipFormat} tooltip={tooltip} onClick={onClick} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} theme={theme} /> ))} diff --git a/packages/pie/src/PieSlice.js b/packages/pie/src/PieSlice.js index 56dbec503..a40096b94 100644 --- a/packages/pie/src/PieSlice.js +++ b/packages/pie/src/PieSlice.js @@ -25,6 +25,8 @@ const PieSlice = ({ showTooltip, hideTooltip, onClick, + onMouseEnter, + onMouseLeave, tooltipFormat, tooltip, @@ -45,6 +47,14 @@ const PieSlice = ({ />, e ) + const handleMouseEnter = e => { + onMouseEnter(data, e) + handleTooltip(e) + } + const handleMouseLeave = e => { + onMouseLeave(data, e) + hideTooltip(e) + } return ( ) @@ -78,6 +88,8 @@ PieSlice.propTypes = { showTooltip: PropTypes.func.isRequired, hideTooltip: PropTypes.func.isRequired, onClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, theme: PropTypes.shape({ tooltip: PropTypes.shape({}).isRequired, diff --git a/packages/pie/src/props.js b/packages/pie/src/props.js index 8301f918e..b83ee4d65 100644 --- a/packages/pie/src/props.js +++ b/packages/pie/src/props.js @@ -79,6 +79,8 @@ export const PiePropTypes = { // interactivity isInteractive: PropTypes.bool, onClick: PropTypes.func.isRequired, + onMouseEnter: PropTypes.func.isRequired, + onMouseLeave: PropTypes.func.isRequired, // tooltip lockTooltip: PropTypes.bool.isRequired, @@ -130,6 +132,8 @@ export const PieDefaultProps = { // interactivity isInteractive: true, onClick: noop, + onMouseEnter: noop, + onMouseLeave: noop, // tooltip lockTooltip: true, diff --git a/packages/pie/stories/pie.stories.js b/packages/pie/stories/pie.stories.js index 0e2a5b6d1..ad61de744 100644 --- a/packages/pie/stories/pie.stories.js +++ b/packages/pie/stories/pie.stories.js @@ -90,3 +90,18 @@ stories.add( /> )) ) + +stories.add( + 'enter/leave (check console)', + withInfo()(() => ( + { + console.log({ is: 'mouseenter', data, event: e }) // eslint-disable-line + }} + onMouseLeave={(data, e) => { + console.log({ is: 'mouseleave', data, event: e }) // eslint-disable-line + }} + /> + )) +) diff --git a/packages/scatterplot/src/ScatterPlot.js b/packages/scatterplot/src/ScatterPlot.js index 88fbf34bc..5197f09a8 100644 --- a/packages/scatterplot/src/ScatterPlot.js +++ b/packages/scatterplot/src/ScatterPlot.js @@ -53,6 +53,8 @@ const ScatterPlot = ({ tooltipFormat, tooltip, onClick, + onMouseEnter, + onMouseLeave, legends, }) => { @@ -125,6 +127,8 @@ const ScatterPlot = ({ tooltipFormat={tooltipFormat} tooltip={tooltip} onClick={onClick} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} theme={theme} /> ))} @@ -154,6 +158,8 @@ const ScatterPlot = ({ tooltipFormat={tooltipFormat} tooltip={tooltip} onClick={onClick} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} theme={theme} /> ))} diff --git a/packages/scatterplot/src/ScatterPlotItem.js b/packages/scatterplot/src/ScatterPlotItem.js index cafd48b32..fcd1d2fb1 100644 --- a/packages/scatterplot/src/ScatterPlotItem.js +++ b/packages/scatterplot/src/ScatterPlotItem.js @@ -24,9 +24,19 @@ const ScatterPlotItem = ({ showTooltip, hideTooltip, onClick, + onMouseEnter, + onMouseLeave, tooltip, }) => { const handleTooltip = e => showTooltip(tooltip, e) + const handleMouseEnter = e => { + onMouseEnter(data, e) + showTooltip(tooltip, e) + } + const handleMouseLeave = e => { + onMouseLeave(data, e) + hideTooltip(e) + } return ( ) @@ -59,6 +69,8 @@ ScatterPlotItem.propTypes = { showTooltip: PropTypes.func.isRequired, hideTooltip: PropTypes.func.isRequired, onClick: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, tooltip: PropTypes.element.isRequired, theme: PropTypes.shape({ diff --git a/packages/scatterplot/src/props.js b/packages/scatterplot/src/props.js index d109172b3..31fdb2444 100644 --- a/packages/scatterplot/src/props.js +++ b/packages/scatterplot/src/props.js @@ -7,6 +7,7 @@ * file that was distributed with this source code. */ import PropTypes from 'prop-types' +import { noop } from '@nivo/core' import { LegendPropShape } from '@nivo/legends' export const ScatterPlotPropTypes = { @@ -53,7 +54,11 @@ export const ScatterPlotPropTypes = { // interactivity isInteractive: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, + onMouseEnter: PropTypes.func.isRequired, + onMouseLeave: PropTypes.func.isRequired, tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), + tooltip: PropTypes.func, legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired, @@ -84,6 +89,9 @@ export const ScatterPlotDefaultProps = { // interactivity isInteractive: true, enableStackTooltip: true, + onClick: noop, + onMouseEnter: noop, + onMouseLeave: noop, legends: [], diff --git a/packages/scatterplot/stories/scatterplot.stories.js b/packages/scatterplot/stories/scatterplot.stories.js index 3877a4ad8..9578c94b1 100644 --- a/packages/scatterplot/stories/scatterplot.stories.js +++ b/packages/scatterplot/stories/scatterplot.stories.js @@ -199,3 +199,18 @@ stories.add( /> )) ) + +stories.add( + 'enter/leave (check console)', + withInfo(importStatement)(() => ( + { + console.log({ is: 'mouseenter', data, event: e }) // eslint-disable-line + }} + onMouseLeave={(data, e) => { + console.log({ is: 'mouseleave', data, event: e }) // eslint-disable-line + }} + /> + )) +)