feat(bump): add support for function for start/end labels

plouc · Dec 18, 2019 · 80c3e92 · 80c3e92
1 parent c6b01ff
commit 80c3e92
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git 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 => {
             <LinesLabels
                 key="start"
                 series={series}
+                getLabel={startLabel}
                 position="start"
                 padding={startLabelPadding}
                 color={startLabelTextColor}
@@ -169,6 +172,7 @@ const Bump = props => {
             <LinesLabels
                 key="end"
                 series={series}
+                getLabel={endLabel}
                 position="end"
                 padding={endLabelPadding}
                 color={endLabelTextColor}

diff --git a/packages/bump/src/bump/LinesLabels.js b/packages/bump/src/bump/LinesLabels.js
@@ -13,11 +13,12 @@ import { useTheme, useMotionConfig } from '@nivo/core'
 import { inheritedColorPropType } from '@nivo/colors'
 import { useSeriesLabels } from './hooks'
 
-const LinesLabels = ({ series, position, padding, color }) => {
+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}
                 </text>
             )
         })
@@ -71,7 +72,7 @@ const LinesLabels = ({ series, position, padding, color }) => {
                                 fill: label.color,
                             }}
                         >
-                            {label.id}
+                            {label.label}
                         </text>
                     ))}
                 </>
@@ -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
@@ -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),