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} 😁`} />
+))