feat(interactivity): add onClick support for Bar & Bubble

plouc · Sep 6, 2017 · a73af16 · a73af16
1 parent 917c14d
commit a73af16
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 49 deletions.
diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js
@@ -91,6 +91,7 @@ const Bar = ({
 
     // interactivity
     isInteractive,
+    onClick,
 }) => {
     const options = {
         layout,
@@ -133,18 +134,16 @@ const Bar = ({
                         <TransitionMotion
                             willEnter={willEnter}
                             willLeave={willLeave}
-                            styles={result.bars.map(bar => {
-                                return {
-                                    key: bar.key,
-                                    data: bar,
-                                    style: {
-                                        x: spring(bar.x, motionProps),
-                                        y: spring(bar.y, motionProps),
-                                        width: spring(bar.width, motionProps),
-                                        height: spring(bar.height, motionProps),
-                                    },
-                                }
-                            })}
+                            styles={result.bars.map(bar => ({
+                                key: bar.key,
+                                data: bar,
+                                style: {
+                                    x: spring(bar.x, motionProps),
+                                    y: spring(bar.y, motionProps),
+                                    width: spring(bar.width, motionProps),
+                                    height: spring(bar.height, motionProps),
+                                },
+                            }))}
                         >
                             {interpolatedStyles => (
                                 <g>
@@ -157,6 +156,7 @@ const Bar = ({
                                             height={Math.max(style.height, 0)}
                                             showTooltip={showTooltip}
                                             hideTooltip={hideTooltip}
+                                            onClick={onClick}
                                             theme={theme}
                                         />
                                     ))}
@@ -171,6 +171,7 @@ const Bar = ({
                             {...d}
                             showTooltip={showTooltip}
                             hideTooltip={hideTooltip}
+                            onClick={onClick}
                             theme={theme}
                         />
                     ))

diff --git a/src/components/charts/bar/BarItem.js b/src/components/charts/bar/BarItem.js
@@ -8,10 +8,23 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
+import compose from 'recompose/compose'
+import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
 import BasicTooltip from '../../tooltip/BasicTooltip'
 
-const BarItem = ({ data, x, y, width, height, color, showTooltip, hideTooltip, theme }) => {
+const BarItem = ({
+    data,
+    x,
+    y,
+    width,
+    height,
+    color,
+    showTooltip,
+    hideTooltip,
+    onClick,
+    theme,
+}) => {
     const handleTooltip = e =>
         showTooltip(
             <BasicTooltip
@@ -26,33 +39,32 @@ const BarItem = ({ data, x, y, width, height, color, showTooltip, hideTooltip, t
 
     return (
         <rect
-            className="nivo_bar_rect"
             x={x}
             y={y}
             width={width}
             height={height}
-            style={{
-                fill: color,
-            }}
+            fill={color}
             onMouseEnter={handleTooltip}
             onMouseMove={handleTooltip}
             onMouseLeave={hideTooltip}
+            onClick={onClick}
         />
     )
 }
 
 BarItem.propTypes = {
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    color: PropTypes.string.isRequired,
     data: PropTypes.shape({
         id: PropTypes.string.isRequired,
         value: PropTypes.number.isRequired,
         indexValue: PropTypes.string.isRequired,
     }).isRequired,
 
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
 
@@ -61,4 +73,11 @@ BarItem.propTypes = {
     }).isRequired,
 }
 
-export default pure(BarItem)
+const enhance = compose(
+    withPropsOnChange(['data', 'onClick'], ({ data, onClick }) => ({
+        onClick: () => onClick(data),
+    })),
+    pure
+)
+
+export default enhance(BarItem)
diff --git a/src/components/charts/bar/props.js b/src/components/charts/bar/props.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
+import noop from '../../../lib/noop'
 
 export const BarPropTypes = {
     // data
@@ -37,14 +38,12 @@ export const BarPropTypes = {
     labelsLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getLabelsLinkColor: PropTypes.func.isRequired, // computed
 
-    // interactions
-    onClick: PropTypes.func,
-
     // theming
     getColor: PropTypes.func.isRequired,
 
     // interactivity
     isInteractive: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
 
     // canvas specific
     pixelRatio: PropTypes.number.isRequired,
@@ -74,6 +73,7 @@ export const BarDefaultProps = {
 
     // interactivity
     isInteractive: true,
+    onClick: noop,
 
     // canvas specific
     pixelRatio: window && window.devicePixelRatio ? window.devicePixelRatio : 1,

diff --git a/src/components/charts/bubble/Bubble.js b/src/components/charts/bubble/Bubble.js
@@ -14,7 +14,7 @@ import defaultProps from 'recompose/defaultProps'
 import pure from 'recompose/pure'
 import { getLabelGenerator } from '../../../lib/propertiesConverters'
 import { getInheritedColorGenerator } from '../../../lib/colors'
-import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps'
+import { bubblePropTypes, bubbleDefaultProps } from './props'
 import BubblePlaceholders from './BubblePlaceholders'
 import BasicTooltip from '../../tooltip/BasicTooltip'
 
@@ -51,12 +51,10 @@ const createNodes = ({
                 onMouseEnter={handleTooltip}
                 onMouseMove={handleTooltip}
                 onMouseLeave={hideTooltip}
-                onClick={node.zoom}
-                style={{
-                    fill: node.style.color,
-                    stroke: getBorderColor(node.style),
-                    strokeWidth: borderWidth,
-                }}
+                onClick={node.onClick}
+                fill={node.style.color}
+                stroke={getBorderColor(node.style)}
+                strokeWidth={borderWidth}
             />
         )
     })

diff --git a/src/components/charts/bubble/BubblePlaceholders.js b/src/components/charts/bubble/BubblePlaceholders.js
@@ -11,6 +11,7 @@ import { merge } from 'lodash'
 import { TransitionMotion, spring } from 'react-motion'
 import _ from 'lodash'
 import compose from 'recompose/compose'
+import defaultProps from 'recompose/defaultProps'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import withStateHandlers from 'recompose/withStateHandlers'
 import pure from 'recompose/pure'
@@ -21,7 +22,7 @@ import noop from '../../../lib/noop'
 import { computeNodePath } from '../../../lib/hierarchy'
 import Container from '../Container'
 import { getAccessorFor } from '../../../lib/propertiesConverters'
-import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps'
+import { bubblePropTypes, bubbleDefaultProps } from './props'
 
 const ignoreProps = [
     'borderWidth',
@@ -93,6 +94,7 @@ const BubblePlaceholders = ({
 
     // interactivity
     isInteractive,
+    onClick,
 
     children,
 
@@ -146,6 +148,18 @@ const BubblePlaceholders = ({
         })
     }
 
+    let nodeOnClick = noop
+    if (isInteractive) {
+        if (isZoomable) {
+            nodeOnClick = node => () => {
+                onClick(node)
+                zoomToNode(node.path)
+            }
+        } else {
+            nodeOnClick = node => () => onClick(node)
+        }
+    }
+
     if (!animate) {
         return (
             <Container isInteractive={isInteractive} theme={theme}>
@@ -161,10 +175,7 @@ const BubblePlaceholders = ({
                                     key: node.path,
                                     data: node,
                                     style: _.pick(node, ['scale', 'r', 'x', 'y', 'color']),
-                                    zoom:
-                                        isInteractive && isZoomable
-                                            ? () => zoomToNode(node.path)
-                                            : noop,
+                                    onClick: nodeOnClick(node),
                                 })),
                                 { showTooltip, hideTooltip, theme }
                             )
@@ -210,13 +221,9 @@ const BubblePlaceholders = ({
                                         interpolatedStyle.style.color = getInterpolatedColor(
                                             interpolatedStyle.style
                                         )
-
-                                        if (isInteractive && isZoomable) {
-                                            interpolatedStyle.zoom = () =>
-                                                zoomToNode(interpolatedStyle.data.path)
-                                        } else {
-                                            interpolatedStyle.zoom = noop
-                                        }
+                                        interpolatedStyle.onClick = nodeOnClick(
+                                            interpolatedStyle.data
+                                        )
 
                                         return interpolatedStyle
                                     }),
@@ -231,11 +238,8 @@ const BubblePlaceholders = ({
 
 BubblePlaceholders.propTypes = _.omit(bubblePropTypes, ignoreProps)
 
-export const BubblePlaceholdersDefaultProps = _.omit(bubbleDefaultProps, ignoreProps)
-
-BubblePlaceholders.defaultProps = BubblePlaceholdersDefaultProps
-
 const enhance = compose(
+    defaultProps(_.omit(bubbleDefaultProps, ignoreProps)),
     withHierarchy(),
     withDimensions(),
     withTheme(),

diff --git a/src/components/charts/bubble/BubbleProps.js → src/components/charts/bubble/props.js b/src/components/charts/bubble/BubbleProps.js → src/components/charts/bubble/props.js
@@ -7,6 +7,7 @@
  * file that was distributed with this source code.
  */
 import PropTypes from 'prop-types'
+import noop from '../../../lib/noop'
 
 export const bubblePropTypes = {
     // data
@@ -43,6 +44,7 @@ export const bubblePropTypes = {
 
     // interactivity
     isInteractive: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
 
     // zooming
     isZoomable: PropTypes.bool.isRequired,
@@ -70,6 +72,7 @@ export const bubbleDefaultProps = {
 
     // interactivity
     isInteractive: true,
+    onClick: noop,
 
     // zooming
     isZoomable: true,