feat(bar): add ability to customize bar labels colors

plouc · Aug 5, 2017 · 0f63c07 · 0f63c07
1 parent c0aecaa
commit 0f63c07
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nivo",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "licenses": [
     {
       "type": "MIT",

diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js
@@ -12,7 +12,7 @@ import { merge } from 'lodash'
 import { TransitionMotion, spring } from 'react-motion'
 import Nivo, { defaultTheme } from '../../../Nivo'
 import { marginPropType, motionPropTypes } from '../../../props'
-import { getColorsGenerator } from '../../../lib/colorUtils'
+import { getColorsGenerator, getInheritedColorGenerator } from '../../../lib/colorUtils'
 import { generateGroupedBars, generateStackedBars } from '../../../lib/charts/bar'
 import SvgWrapper from '../SvgWrapper'
 import Axes from '../../axes/Axes'
@@ -49,6 +49,7 @@ export default class Bar extends Component {
 
         // labels
         enableLabels: PropTypes.bool.isRequired,
+        labelsTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
 
         // interactions
         onClick: PropTypes.func,
@@ -66,7 +67,6 @@ export default class Bar extends Component {
         margin: Nivo.defaults.margin,
         groupMode: 'stacked',
         xPadding: 0.1,
-        enableLabels: true,
         axes: {
             left: {
                 enabled: true,
@@ -78,6 +78,11 @@ export default class Bar extends Component {
         enableGridX: false,
         enableGridY: true,
 
+        // labels
+        enableLabels: true,
+        labelsLinkColor: 'theme',
+        labelsTextColor: 'theme',
+
         // theming
         theme: {},
         colors: Nivo.defaults.colorRange,
@@ -100,7 +105,11 @@ export default class Bar extends Component {
             axes,
             enableGridX,
             enableGridY,
+
+            // labels
             enableLabels,
+            labelsLinkColor: _labelsLinkColor,
+            labelsTextColor: _labelsTextColor,
 
             // theming
             theme: _theme,
@@ -119,6 +128,8 @@ export default class Bar extends Component {
 
         const theme = merge({}, defaultTheme, _theme)
         const color = getColorsGenerator(colors, colorBy)
+        const labelsLinkColor = getInheritedColorGenerator(_labelsLinkColor, 'axis.tickColor')
+        const labelsTextColor = getInheritedColorGenerator(_labelsTextColor, 'axis.textColor')
 
         const motionProps = {
             animate,
@@ -200,7 +211,15 @@ export default class Bar extends Component {
                     {...motionProps}
                 />
                 {bars}
-                {enableLabels && result.bars.map(d => <BarItemLabel {...d} key={d.key} />)}
+                {enableLabels &&
+                    result.bars.map(d =>
+                        <BarItemLabel
+                            {...d}
+                            key={d.key}
+                            linkColor={labelsLinkColor(d, theme)}
+                            textColor={labelsTextColor(d, theme)}
+                        />
+                    )}
             </SvgWrapper>
         )
     }

diff --git a/src/components/charts/bar/BarItemLabel.js b/src/components/charts/bar/BarItemLabel.js
@@ -18,13 +18,14 @@ export default class BarItemLabel extends Component {
         y: PropTypes.number.isRequired,
         width: PropTypes.number.isRequired,
         height: PropTypes.number.isRequired,
-        color: PropTypes.string.isRequired,
+        linkColor: PropTypes.string.isRequired,
+        textColor: PropTypes.string.isRequired,
     }
 
     static defaultProps = {}
 
     render() {
-        const { x: _x, y: _y, width, height, color, value } = this.props
+        const { x: _x, y: _y, width, height, linkColor, textColor, value } = this.props
 
         let x = _x
         let y = _y
@@ -35,7 +36,7 @@ export default class BarItemLabel extends Component {
             textX = -13
             textAnchor = 'end'
             y = _y + height / 2
-            line = <line stroke={color} x1={0} x2={-10} y1={0} y2={0} />
+            line = <line style={{ stroke: linkColor }} x1={0} x2={-10} y1={0} y2={0} />
         } else {
             textX = 0
             textAnchor = 'middle'
@@ -46,7 +47,7 @@ export default class BarItemLabel extends Component {
         return (
             <g transform={`translate(${x},${y})`} className="nivo_bar_legend">
                 {line}
-                <text x={textX} textAnchor={textAnchor} dy="0.5em">
+                <text x={textX} textAnchor={textAnchor} dy="0.5em" style={{ fill: textColor }}>
                     {value}
                 </text>
             </g>

diff --git a/src/lib/colorUtils.js b/src/lib/colorUtils.js
@@ -144,7 +144,7 @@ export const getColorsGenerator = (colors, colorBy) => {
 const memoizedColorModifier = _.memoize((method, _amount) => {
     const amount = parseFloat(_amount)
 
-    return _.memoize(d => rgb(d.color)[method](amount), d => d.color)
+    return _.memoize(d => rgb(d.color)[method](amount).toString(), d => d.color)
 }, (method, amount) => `${method}.${amount}`)
 
 const noneGenerator = () => 'none'