feat(interactivity): add onClick support for Sankey (#75)

plouc · Oct 20, 2017 · a547917 · a547917
1 parent 5b6f5c8
commit a547917
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 0 deletions.
diff --git a/src/components/charts/sankey/Sankey.js b/src/components/charts/sankey/Sankey.js
@@ -71,6 +71,7 @@ const Sankey = ({
 
     // interactivity
     isInteractive,
+    onClick,
 }) => {
     const sankey = d3Sankey()
         .nodeAlign(sankeyAlignmentFromProp(align))
@@ -143,6 +144,7 @@ const Sankey = ({
                         currentNode={currentNode}
                         currentLink={currentLink}
                         isCurrentLink={isCurrentLink}
+                        onClick={onClick}
                         theme={theme}
                         {...motionProps}
                     />
@@ -160,6 +162,7 @@ const Sankey = ({
                         currentNode={currentNode}
                         currentLink={currentLink}
                         isCurrentNode={isCurrentNode}
+                        onClick={onClick}
                         theme={theme}
                         {...motionProps}
                     />

diff --git a/src/components/charts/sankey/SankeyLinks.js b/src/components/charts/sankey/SankeyLinks.js
@@ -37,6 +37,7 @@ const SankeyLinks = ({
     currentNode,
     currentLink,
     isCurrentLink,
+    onClick,
 
     theme,
 }) => {
@@ -61,6 +62,7 @@ const SankeyLinks = ({
                         showTooltip={showTooltip}
                         hideTooltip={hideTooltip}
                         setCurrent={setCurrentLink}
+                        onClick={onClick}
                         theme={theme}
                     />
                 ))}
@@ -93,6 +95,7 @@ const SankeyLinks = ({
                             showTooltip={showTooltip}
                             hideTooltip={hideTooltip}
                             setCurrent={setCurrentLink}
+                            onClick={onClick}
                             theme={theme}
                         />
                     )}
@@ -132,6 +135,7 @@ SankeyLinks.propTypes = {
     setCurrentLink: PropTypes.func.isRequired,
     currentLink: PropTypes.object,
     isCurrentLink: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
 }
 
 export default pure(SankeyLinks)
diff --git a/src/components/charts/sankey/SankeyLinksItem.js b/src/components/charts/sankey/SankeyLinksItem.js
@@ -54,6 +54,7 @@ const SankeyLinksItem = ({
     handleMouseEnter,
     handleMouseMove,
     handleMouseLeave,
+    onClick,
 }) => (
     <path
         fill="none"
@@ -64,6 +65,7 @@ const SankeyLinksItem = ({
         onMouseEnter={handleMouseEnter}
         onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
+        onClick={onClick}
     />
 )
 
@@ -91,12 +93,16 @@ SankeyLinksItem.propTypes = {
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
     setCurrent: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
 }
 
 const enhance = compose(
     withPropsOnChange(['link', 'theme'], ({ link, theme }) => ({
         tooltip: <BasicTooltip id={<TooltipContent link={link} />} theme={theme} />,
     })),
+    withPropsOnChange(['onClick', 'link'], ({ onClick, link }) => ({
+        onClick: event => onClick(link, event),
+    })),
     withHandlers({
         handleMouseEnter: ({ showTooltip, setCurrent, link, tooltip }) => e => {
             setCurrent(link)

diff --git a/src/components/charts/sankey/SankeyNodes.js b/src/components/charts/sankey/SankeyNodes.js
@@ -36,6 +36,7 @@ const SankeyNodes = ({
     currentNode,
     currentLink,
     isCurrentNode,
+    onClick,
 
     theme,
 }) => {
@@ -63,6 +64,7 @@ const SankeyNodes = ({
                         showTooltip={showTooltip}
                         hideTooltip={hideTooltip}
                         setCurrent={setCurrentNode}
+                        onClick={onClick}
                         theme={theme}
                     />
                 ))}
@@ -112,6 +114,7 @@ const SankeyNodes = ({
                                 showTooltip={showTooltip}
                                 hideTooltip={hideTooltip}
                                 setCurrent={setCurrentNode}
+                                onClick={onClick}
                                 theme={theme}
                             />
                         )
@@ -152,6 +155,7 @@ SankeyNodes.propTypes = {
     currentNode: PropTypes.object,
     currentLink: PropTypes.object,
     isCurrentNode: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
 }
 
 export default pure(SankeyNodes)
diff --git a/src/components/charts/sankey/SankeyNodesItem.js b/src/components/charts/sankey/SankeyNodesItem.js
@@ -32,6 +32,7 @@ const SankeyNodesItem = ({
     handleMouseEnter,
     handleMouseMove,
     handleMouseLeave,
+    onClick,
 }) => (
     <rect
         x={x}
@@ -46,6 +47,7 @@ const SankeyNodesItem = ({
         onMouseEnter={handleMouseEnter}
         onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
+        onClick={onClick}
     />
 )
 
@@ -69,6 +71,7 @@ SankeyNodesItem.propTypes = {
     showTooltip: PropTypes.func.isRequired,
     hideTooltip: PropTypes.func.isRequired,
     setCurrent: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
 
     theme: PropTypes.object.isRequired,
 }
@@ -77,6 +80,9 @@ const enhance = compose(
     withPropsOnChange(['node', 'theme'], ({ node, theme }) => ({
         tooltip: <BasicTooltip id={node.id} enableChip={true} color={node.color} theme={theme} />,
     })),
+    withPropsOnChange(['onClick', 'node'], ({ onClick, node }) => ({
+        onClick: event => onClick(node, event),
+    })),
     withHandlers({
         handleMouseEnter: ({ showTooltip, setCurrent, node, tooltip }) => e => {
             setCurrent(node)

diff --git a/src/components/charts/sankey/props.js b/src/components/charts/sankey/props.js
@@ -8,6 +8,7 @@
  */
 import PropTypes from 'prop-types'
 import { sankeyAlignmentPropType } from '../../../props'
+import noop from '../../../lib/noop'
 
 export const SankeyPropTypes = {
     data: PropTypes.shape({
@@ -52,6 +53,7 @@ export const SankeyPropTypes = {
 
     // interactivity
     isInteractive: PropTypes.bool.isRequired,
+    onClick: PropTypes.func.isRequired,
 }
 
 export const SankeyDefaultProps = {
@@ -82,4 +84,5 @@ export const SankeyDefaultProps = {
 
     // interactivity
     isInteractive: true,
+    onClick: noop,
 }
diff --git a/stories/charts/sankey.stories.js b/stories/charts/sankey.stories.js
@@ -31,3 +31,7 @@ stories.add('nodes x padding', () => (
 ))
 
 stories.add('contracting links', () => <Sankey {...commonProperties} linkContract={10} />)
+
+stories.add('click listener (console)', () => (
+    <Sankey {...commonProperties} onClick={(data, event) => console.log({ data, event })} />
+))