diff --git a/package.json b/package.json index 0c4aa07a9..a460681b5 100644 --- 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 index 6eba008c8..0fd137359 100644 --- 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 => )} + {enableLabels && + result.bars.map(d => + + )} ) } diff --git a/src/components/charts/bar/BarItemLabel.js b/src/components/charts/bar/BarItemLabel.js index 44e1f04a3..74610cc85 100644 --- 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 = } else { textX = 0 textAnchor = 'middle' @@ -46,7 +47,7 @@ export default class BarItemLabel extends Component { return ( {line} - + {value} diff --git a/src/lib/colorUtils.js b/src/lib/colorUtils.js index 49efe853f..b32ee63cf 100644 --- 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'