feat(sankey): Support complete configuration of the tooltips (#78)

plouc · Oct 20, 2017 · f3aecf6 · f3aecf6
1 parent 5ac962b
commit f3aecf6
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 8 deletions.
diff --git a/src/components/charts/sankey/Sankey.js b/src/components/charts/sankey/Sankey.js
@@ -65,6 +65,10 @@ const Sankey = ({
     theme,
     getColor, // computed
 
+    // tooltip
+    nodeTooltip,
+    linkTooltip,
+
     // motion
     animate,
     motionDamping,
@@ -147,6 +151,7 @@ const Sankey = ({
                         currentLink={currentLink}
                         isCurrentLink={isCurrentLink}
                         onClick={onClick}
+                        tooltip={linkTooltip}
                         theme={theme}
                         {...motionProps}
                     />
@@ -165,6 +170,7 @@ const Sankey = ({
                         currentLink={currentLink}
                         isCurrentNode={isCurrentNode}
                         onClick={onClick}
+                        tooltip={nodeTooltip}
                         theme={theme}
                         {...motionProps}
                     />

diff --git a/src/components/charts/sankey/SankeyLinks.js b/src/components/charts/sankey/SankeyLinks.js
@@ -39,6 +39,7 @@ const SankeyLinks = ({
     isCurrentLink,
     onClick,
 
+    tooltip,
     theme,
 }) => {
     const getOpacity = link => {
@@ -63,6 +64,7 @@ const SankeyLinks = ({
                         hideTooltip={hideTooltip}
                         setCurrent={setCurrentLink}
                         onClick={onClick}
+                        tooltip={tooltip}
                         theme={theme}
                     />
                 ))}
@@ -96,6 +98,7 @@ const SankeyLinks = ({
                             hideTooltip={hideTooltip}
                             setCurrent={setCurrentLink}
                             onClick={onClick}
+                            tooltip={tooltip}
                             theme={theme}
                         />
                     )}
@@ -128,6 +131,7 @@ SankeyLinks.propTypes = {
     linkContract: PropTypes.number.isRequired,
 
     theme: PropTypes.object.isRequired,
+    tooltip: PropTypes.func,
 
     ...motionPropTypes,
 

diff --git a/src/components/charts/sankey/SankeyLinksItem.js b/src/components/charts/sankey/SankeyLinksItem.js
@@ -99,9 +99,16 @@ SankeyLinksItem.propTypes = {
 }
 
 const enhance = compose(
-    withPropsOnChange(['link', 'theme'], ({ link, theme }) => ({
-        tooltip: <BasicTooltip id={<TooltipContent link={link} />} theme={theme} />,
-    })),
+    withPropsOnChange(['link', 'theme', 'tooltip'], ({ link, theme, tooltip }) => {
+        if (tooltip) {
+            return {
+                tooltip: <BasicTooltip id={tooltip(link)} enableChip={false} theme={theme} />,
+            }
+        }
+        return {
+            tooltip: <BasicTooltip id={<TooltipContent link={link} />} theme={theme} />,
+        }
+    }),
     withPropsOnChange(['onClick', 'link'], ({ onClick, link }) => ({
         onClick: event => onClick(link, event),
     })),

diff --git a/src/components/charts/sankey/SankeyNodes.js b/src/components/charts/sankey/SankeyNodes.js
@@ -38,6 +38,7 @@ const SankeyNodes = ({
     isCurrentNode,
     onClick,
 
+    tooltip,
     theme,
 }) => {
     const getOpacity = node => {
@@ -65,6 +66,7 @@ const SankeyNodes = ({
                         hideTooltip={hideTooltip}
                         setCurrent={setCurrentNode}
                         onClick={onClick}
+                        tooltip={tooltip}
                         theme={theme}
                     />
                 ))}
@@ -115,6 +117,7 @@ const SankeyNodes = ({
                                 hideTooltip={hideTooltip}
                                 setCurrent={setCurrentNode}
                                 onClick={onClick}
+                                tooltip={tooltip}
                                 theme={theme}
                             />
                         )
@@ -145,6 +148,7 @@ SankeyNodes.propTypes = {
     getNodeBorderColor: PropTypes.func.isRequired,
 
     theme: PropTypes.object.isRequired,
+    tooltip: PropTypes.func,
 
     ...motionPropTypes,
 

diff --git a/src/components/charts/sankey/SankeyNodesItem.js b/src/components/charts/sankey/SankeyNodesItem.js
@@ -74,15 +74,23 @@ SankeyNodesItem.propTypes = {
     setCurrent: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,
 
+    tooltip: PropTypes.element.isRequired,
     theme: PropTypes.object.isRequired,
 }
 
 const enhance = compose(
-    withPropsOnChange(['node', 'theme'], ({ node, theme }) => ({
-        tooltip: (
-            <BasicTooltip id={node.label} enableChip={true} color={node.color} theme={theme} />
-        ),
-    })),
+    withPropsOnChange(['node', 'theme', 'tooltip'], ({ node, theme, tooltip }) => {
+        if (tooltip) {
+            return {
+                tooltip: <BasicTooltip id={tooltip(node)} enableChip={false} theme={theme} />,
+            }
+        }
+        return {
+            tooltip: (
+                <BasicTooltip id={node.label} enableChip={true} color={node.color} theme={theme} />
+            ),
+        }
+    }),
     withPropsOnChange(['onClick', 'node'], ({ onClick, node }) => ({
         onClick: event => onClick(node, event),
     })),

diff --git a/src/components/charts/sankey/props.js b/src/components/charts/sankey/props.js
@@ -54,6 +54,10 @@ export const SankeyPropTypes = {
     labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     getLabel: PropTypes.func.isRequired, // computed
 
+    // tooltip
+    nodeTooltip: PropTypes.func,
+    linkTooltip: PropTypes.func,
+
     // interactivity
     isInteractive: PropTypes.bool.isRequired,
     onClick: PropTypes.func.isRequired,

diff --git a/stories/charts/sankey.stories.js b/stories/charts/sankey.stories.js
@@ -39,3 +39,15 @@ stories.add('click listener (console)', () => (
 stories.add('label formatter', () => (
     <Sankey {...commonProperties} label={node => `${node.id} 😁`} />
 ))
+
+stories.add('custom tooltip', () => (
+    <Sankey
+        {...commonProperties}
+        nodeTooltip={node => <span>Custom tooltip for node: {node.label}</span>}
+        linkTooltip={node => (
+            <span>
+                Custom tooltip for link: {node.source.label} to {node.target.label}
+            </span>
+        )}
+    />
+))