diff --git a/packages/bump/src/bump/Bump.js b/packages/bump/src/bump/Bump.js index e102465961..7820f1ae36 100644 --- a/packages/bump/src/bump/Bump.js +++ b/packages/bump/src/bump/Bump.js @@ -101,6 +101,8 @@ const Bump = props => { activePointBorderWidth, inactivePointBorderWidth, pointBorderColor, + startLabel, + endLabel, isInteractive, currentSerie, }) @@ -158,6 +160,7 @@ const Bump = props => { { { +const LinesLabels = ({ series, getLabel, position, padding, color }) => { const theme = useTheme() const { animate, springConfig } = useMotionConfig() const labels = useSeriesLabels({ series, + getLabel, position, padding, color, @@ -38,7 +39,7 @@ const LinesLabels = ({ series, position, padding, color }) => { fill: label.color, }} > - {label.id} + {label.label} ) }) @@ -71,7 +72,7 @@ const LinesLabels = ({ series, position, padding, color }) => { fill: label.color, }} > - {label.id} + {label.label} ))} @@ -92,6 +93,8 @@ LinesLabels.propTypes = { ).isRequired, }) ).isRequired, + getLabel: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.string, PropTypes.func]) + .isRequired, position: PropTypes.oneOf(['start', 'end']).isRequired, padding: PropTypes.number.isRequired, color: inheritedColorPropType.isRequired, diff --git a/packages/bump/src/bump/hooks.js b/packages/bump/src/bump/hooks.js index 6197977d93..3424d34f46 100644 --- a/packages/bump/src/bump/hooks.js +++ b/packages/bump/src/bump/hooks.js @@ -296,7 +296,7 @@ export const useSerieHandlers = ({ return handlers } -export const useSeriesLabels = ({ series, position, padding, color }) => { +export const useSeriesLabels = ({ series, position, padding, color, getLabel }) => { const theme = useTheme() const getColor = useInheritedColor(color, theme) @@ -313,6 +313,11 @@ export const useSeriesLabels = ({ series, position, padding, color }) => { const labels = [] series.forEach(serie => { + let label = serie.id + if (typeof getLabel === 'function') { + label = getLabel(serie) + } + const point = position === 'start' ? serie.linePoints[0] @@ -325,6 +330,7 @@ export const useSeriesLabels = ({ series, position, padding, color }) => { labels.push({ id: serie.id, + label, x: point[0] + signedPadding, y: point[1], color: getColor(serie),