feat(bar): add label format support for Bar (#45)

src/components/charts/bar/Bar.js

@@ -76,6 +76,9 @@ const Bar = ({
     enableLabels,
     getLabelsLinkColor,
     getLabelsTextColor,
+    label,
+    labelFormat,
+    getLabel,
 
     // markers
     markers,
@@ -212,6 +215,7 @@ const Bar = ({
                             result.bars.map(d => (
                                 <BarItemLabel
                                     {...d}
+                                    getLabel={getLabel}
                                     textColor={getLabelsTextColor(d, theme)}
                                     linkColor={getLabelsLinkColor(d, theme)}
                                 />

src/components/charts/bar/BarItemLabel.js

@@ -8,7 +8,7 @@
  */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-
+import { getLabelGenerator } from '../../../lib/propertiesConverters'
 const safeSize = 20
 
 const labelStyle = {
@@ -26,12 +26,13 @@ export default class BarItemLabel extends Component {
         height: PropTypes.number.isRequired,
         linkColor: PropTypes.string.isRequired,
         textColor: PropTypes.string.isRequired,
+        getLabel: PropTypes.func.isRequired,
     }
 
     static defaultProps = {}
 
     render() {
-        const { x: _x, y: _y, width, height, linkColor, textColor, data } = this.props
+        const { x: _x, y: _y, width, height, getLabel, linkColor, textColor, data } = this.props
 
         let x = _x
         let y = _y
@@ -54,7 +55,7 @@ export default class BarItemLabel extends Component {
             <g transform={`translate(${x},${y})`} className="nivo_bar_legend" style={labelStyle}>
                 {line}
                 <text x={textX} textAnchor={textAnchor} dy="0.5em" style={{ fill: textColor }}>
-                    {data.value}
+                    {getLabel(data)}
                 </text>
             </g>
         )

src/components/charts/bar/enhance.js

@@ -2,7 +2,7 @@
  * This file is part of the nivo project.
  *
  * Copyright 2016-present, Raphaël Benitte.
- *
+ *d
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
@@ -14,6 +14,7 @@ import { withTheme, withColors, withDimensions, withMotion } from '../../../hocs
 import { getInheritedColorGenerator } from '../../../lib/colors'
 import { getAccessorFor } from '../../../lib/propertiesConverters'
 import { BarDefaultProps } from './props'
+import { getLabelGenerator } from '../../../lib/propertiesConverters'
 
 export default Component =>
     compose(
@@ -31,5 +32,8 @@ export default Component =>
         withPropsOnChange(['labelsLinkColor'], ({ labelsLinkColor }) => ({
             getLabelsLinkColor: getInheritedColorGenerator(labelsLinkColor, 'axis.tickColor'),
         })),
+        withPropsOnChange(['label', 'labelFormat'], ({ label, labelFormat }) => ({
+            getLabel: getLabelGenerator(label, labelFormat),
+        })),
         pure
     )(Component)

src/components/charts/bar/props.js

@@ -37,6 +37,11 @@ export const BarPropTypes = {
     getLabelsTextColor: PropTypes.func.isRequired, // computed
     labelsLinkColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
     getLabelsLinkColor: PropTypes.func.isRequired, // computed
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    getLabel: PropTypes.func,
+    // interactions
+    onClick: PropTypes.func,
 
     // theming
     getColor: PropTypes.func.isRequired,
@@ -70,7 +75,7 @@ export const BarDefaultProps = {
     enableLabels: true,
     labelsLinkColor: 'theme',
     labelsTextColor: 'theme',
-
+    label: 'value',
     // interactivity
     isInteractive: true,
     onClick: noop,

src/lib/propertiesConverters.js

@@ -10,26 +10,14 @@ import _ from 'lodash'
 import { format } from 'd3-format'
 
 export const getLabelGenerator = (_label, labelFormat) => {
-    if (_.isFunction(_label)) {
-        return _label
-    }
-
-    const label = d => _.get(d, _label)
-
+    const getRawLabel = _.isFunction(_label) ? _label : d => _.get(d, _label)
     let formatter
     if (labelFormat) {
-        formatter = format(labelFormat)
+        formatter = _.isFunction(labelFormat) ? labelFormat : format(labelFormat)
     }
 
-    return data => {
-        let labelOutput = label(data)
-
-        if (formatter) {
-            labelOutput = formatter(labelOutput)
-        }
-
-        return labelOutput
-    }
+    if (formatter) return d => formatter(getRawLabel(d))
+    return getRawLabel
 }
 
 export const getAccessorFor = directive => (_.isFunction(directive) ? directive : d => d[directive])

test/lib/getLabelGenerator.test.js

@@ -0,0 +1,38 @@
+import { getLabelGenerator } from '../../src/lib/propertiesConverters'
+
+describe('getLabelGenerator()', () => {
+    it(`should handle simple value access`, () => {
+        const getLabel = getLabelGenerator('value')
+        expect(getLabel({ value: 12 })).toBe(12)
+    })
+
+    it(`should handle nested property access`, () => {
+        const getLabel = getLabelGenerator('node.value')
+        expect(getLabel({ node: { value: 13 } })).toBe(13)
+    })
+
+    it(`should handle simple access with d3 formatting`, () => {
+        const getLabel = getLabelGenerator('value', '.1f')
+        expect(getLabel({ value: 14 })).toBe('14.0')
+    })
+
+    it(`should handle simple access with d3 formatting`, () => {
+        const getLabel = getLabelGenerator('value', '.1f')
+        expect(getLabel({ value: 14 })).toBe('14.0')
+    })
+
+    it(`should handle custom access function`, () => {
+        const getLabel = getLabelGenerator(d => d.value[0])
+        expect(getLabel({ value: [15, 16] })).toBe(15)
+    })
+
+    it(`should handle custom formatting function`, () => {
+        const getLabel = getLabelGenerator('value', v => v + 10)
+        expect(getLabel({ value: 17 })).toBe(27)
+    })
+
+    it(`should handle custom access & formatting functions`, () => {
+        const getLabel = getLabelGenerator(d => d.value[1], v => v + 10)
+        expect(getLabel({ value: [18, 19] })).toBe(29)
+    })
+})