feat(sankey): Support configurable labels (pmndrs#77)

cameron-martin · Oct 20, 2017 · 5ac962b · 5ac962b
1 parent 4cfd3a1
commit 5ac962b
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 5 deletions.
diff --git a/src/components/charts/sankey/Sankey.js b/src/components/charts/sankey/Sankey.js
@@ -55,6 +55,7 @@ const Sankey = ({
 
     // labels
     enableLabels,
+    getLabel,
     labelPosition,
     labelPadding,
     labelOrientation,
@@ -86,6 +87,7 @@ const Sankey = ({
 
     data.nodes.forEach(node => {
         node.color = getColor(node)
+        node.label = getLabel(node)
         node.x = node.x0 + nodePaddingX
         node.y = node.y0
         node.width = Math.max(node.x1 - node.x0 - nodePaddingX * 2, 0)

diff --git a/src/components/charts/sankey/SankeyLabels.js b/src/components/charts/sankey/SankeyLabels.js
@@ -55,6 +55,7 @@ const SankeyLabels = ({
 
         return {
             id: node.id,
+            label: node.label,
             x,
             y: node.y + node.height / 2,
             textAnchor,
@@ -74,7 +75,7 @@ const SankeyLabels = ({
                             transform={`translate(${label.x}, ${label.y}) rotate(${labelRotation})`}
                             style={{ ...theme.sankey.label, fill: label.color }}
                         >
-                            {label.id}
+                            {label.label}
                         </text>
                     )
                 })}
@@ -119,7 +120,7 @@ const SankeyLabels = ({
                                     pointerEvents: 'none',
                                 }}
                             >
-                                {data.id}
+                                {data.label}
                             </text>
                         )
                     })}
@@ -133,6 +134,7 @@ SankeyLabels.propTypes = {
     nodes: PropTypes.arrayOf(
         PropTypes.shape({
             id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
             x1: PropTypes.number.isRequired,
             x: PropTypes.number.isRequired,
             y: PropTypes.number.isRequired,

diff --git a/src/components/charts/sankey/SankeyLinks.js b/src/components/charts/sankey/SankeyLinks.js
@@ -110,9 +110,11 @@ SankeyLinks.propTypes = {
         PropTypes.shape({
             source: PropTypes.shape({
                 id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+                label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
             }).isRequired,
             target: PropTypes.shape({
                 id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+                label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
             }).isRequired,
             width: PropTypes.number.isRequired,
             color: PropTypes.string.isRequired,

diff --git a/src/components/charts/sankey/SankeyLinksItem.js b/src/components/charts/sankey/SankeyLinksItem.js
@@ -33,9 +33,9 @@ const tooltipStyles = {
 const TooltipContent = ({ link }) => (
     <span style={tooltipStyles.container}>
         <Chip color={link.source.color} style={tooltipStyles.sourceChip} />
-        <strong>{link.source.id}</strong>
+        <strong>{link.source.label}</strong>
         &nbsp;>&nbsp;
-        <strong>{link.target.id}</strong>
+        <strong>{link.target.label}</strong>
         <Chip color={link.target.color} style={tooltipStyles.targetChip} />
         <strong>{link.value}</strong>
     </span>
@@ -73,9 +73,11 @@ SankeyLinksItem.propTypes = {
     link: PropTypes.shape({
         source: PropTypes.shape({
             id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
         }).isRequired,
         target: PropTypes.shape({
             id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
         }).isRequired,
         color: PropTypes.string.isRequired,
         value: PropTypes.number.isRequired,

diff --git a/src/components/charts/sankey/SankeyNodesItem.js b/src/components/charts/sankey/SankeyNodesItem.js
@@ -54,6 +54,7 @@ const SankeyNodesItem = ({
 SankeyNodesItem.propTypes = {
     node: PropTypes.shape({
         id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
         color: PropTypes.string.isRequired,
     }),
 
@@ -78,7 +79,9 @@ SankeyNodesItem.propTypes = {
 
 const enhance = compose(
     withPropsOnChange(['node', 'theme'], ({ node, theme }) => ({
-        tooltip: <BasicTooltip id={node.id} enableChip={true} color={node.color} theme={theme} />,
+        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/enhance.js b/src/components/charts/sankey/enhance.js
@@ -12,6 +12,7 @@ import withState from 'recompose/withState'
 import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
 import { getInheritedColorGenerator } from '../../../lib/colors'
+import { getLabelGenerator } from '../../../lib/propertiesConverters'
 import { withColors, withTheme, withDimensions, withMotion } from '../../../hocs'
 import { SankeyDefaultProps } from './props'
 
@@ -35,5 +36,8 @@ export default Component =>
         withPropsOnChange(['labelTextColor'], ({ labelTextColor }) => ({
             getLabelTextColor: getInheritedColorGenerator(labelTextColor),
         })),
+        withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
+            getLabel: getLabelGenerator(label, labelFormat),
+        })),
         pure
     )(Component)
diff --git a/src/components/charts/sankey/props.js b/src/components/charts/sankey/props.js
@@ -50,6 +50,9 @@ export const SankeyPropTypes = {
     labelOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
     labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     getLabelTextColor: PropTypes.func.isRequired, // computed
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    getLabel: PropTypes.func.isRequired, // computed
 
     // interactivity
     isInteractive: PropTypes.bool.isRequired,
@@ -77,6 +80,7 @@ export const SankeyDefaultProps = {
 
     // labels
     enableLabels: true,
+    label: 'id',
     labelPosition: 'inside',
     labelPadding: 9,
     labelOrientation: 'horizontal',

diff --git a/stories/charts/sankey.stories.js b/stories/charts/sankey.stories.js
@@ -35,3 +35,7 @@ stories.add('contracting links', () => <Sankey {...commonProperties} linkContrac
 stories.add('click listener (console)', () => (
     <Sankey {...commonProperties} onClick={(data, event) => console.log({ data, event })} />
 ))
+
+stories.add('label formatter', () => (
+    <Sankey {...commonProperties} label={node => `${node.id} 😁`} />
+))