diff --git a/src/components/charts/sankey/Sankey.js b/src/components/charts/sankey/Sankey.js index f2ed823682..7fb64a0d80 100644 --- 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 index 42f94d30aa..89ede9e05c 100644 --- 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} ) })} @@ -119,7 +120,7 @@ const SankeyLabels = ({ pointerEvents: 'none', }} > - {data.id} + {data.label} ) })} @@ -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 index 5372e561a4..9cfab300cc 100644 --- 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 index d241595208..74be4ccb1f 100644 --- a/src/components/charts/sankey/SankeyLinksItem.js +++ b/src/components/charts/sankey/SankeyLinksItem.js @@ -33,9 +33,9 @@ const tooltipStyles = { const TooltipContent = ({ link }) => ( - {link.source.id} + {link.source.label}  >  - {link.target.id} + {link.target.label} {link.value} @@ -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 index 5c7d49e3e3..441ace5758 100644 --- 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: , + tooltip: ( + + ), })), 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 index 49dfc36fca..3ada8a6a76 100644 --- 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 index 426b066ccd..41fcac2a35 100644 --- 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 index 1d48fb024a..f82b06671d 100644 --- a/stories/charts/sankey.stories.js +++ b/stories/charts/sankey.stories.js @@ -35,3 +35,7 @@ stories.add('contracting links', () => ( console.log({ data, event })} /> )) + +stories.add('label formatter', () => ( + `${node.id} 😁`} /> +))