feat(interactions): add support for mouseenter/leave on bar, pie & sc…

…atterplot svg (#280) * feat(bar): add support for mouseenter/mouseleave * feat(pie): add support for mouseenter/mouseleave * bar/pie re-wording * feat(scatterplot): add support for mouseenter/mouseleave
plouc · Oct 16, 2018 · 76c8722 · 76c8722
1 parent 9307773
commit 76c8722
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 6 deletions.
diff --git 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
@@ -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 (
         <g transform={`translate(${x}, ${y})`}>
@@ -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
@@ -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
@@ -273,3 +273,18 @@ stories.add(
         />
     ))
 )
+
+stories.add(
+    'enter/leave (check console)',
+    withInfo()(() => (
+        <Bar
+            {...commonProps}
+            onMouseEnter={(data, e) => {
+                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
@@ -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
@@ -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 (
         <path
@@ -53,9 +63,9 @@ const PieSlice = ({
             fill={fill}
             strokeWidth={borderWidth}
             stroke={borderColor}
-            onMouseEnter={handleTooltip}
+            onMouseEnter={handleMouseEnter}
             onMouseMove={handleTooltip}
-            onMouseLeave={hideTooltip}
+            onMouseLeave={handleMouseLeave}
             onClick={onClick}
         />
     )
@@ -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
@@ -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
@@ -90,3 +90,18 @@ stories.add(
         />
     ))
 )
+
+stories.add(
+    'enter/leave (check console)',
+    withInfo()(() => (
+        <Pie
+            {...commonProperties}
+            onMouseEnter={(data, e) => {
+                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
@@ -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
@@ -24,19 +24,29 @@ 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 (
         <circle
             cx={x}
             cy={y}
             r={size / 2}
             fill={color}
-            onMouseEnter={handleTooltip}
+            onMouseEnter={handleMouseEnter}
             onMouseMove={handleTooltip}
-            onMouseLeave={hideTooltip}
+            onMouseLeave={handleMouseLeave}
             onClick={onClick}
         />
     )
@@ -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
@@ -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
@@ -199,3 +199,18 @@ stories.add(
         />
     ))
 )
+
+stories.add(
+    'enter/leave (check console)',
+    withInfo(importStatement)(() => (
+        <ScatterPlot
+            {...commonProps}
+            onMouseEnter={(data, e) => {
+                console.log({ is: 'mouseenter', data, event: e }) // eslint-disable-line
+            }}
+            onMouseLeave={(data, e) => {
+                console.log({ is: 'mouseleave', data, event: e }) // eslint-disable-line
+            }}
+        />
+    ))
+)