diff --git a/src/components/axes/Axes.js b/src/components/axes/Axes.js index c4c01561a..b79f8a96a 100644 --- a/src/components/axes/Axes.js +++ b/src/components/axes/Axes.js @@ -43,10 +43,9 @@ const Axes = ({ return ( {positions.map(position => { - if (!axes[position]) return null - const axis = axes[position] - if (axis.enabled !== undefined && axis.enabled === false) return null + + if (!axis) return null const scale = horizontalPositions.includes(position) ? xScale : yScale diff --git a/src/components/axes/Axis.js b/src/components/axes/Axis.js index d70badf73..744b1e0f4 100644 --- a/src/components/axes/Axis.js +++ b/src/components/axes/Axis.js @@ -25,6 +25,7 @@ export const axisPropType = PropTypes.shape({ orient: PropTypes.oneOf(axisPositions), // ticks + tickValues: PropTypes.array, tickSize: PropTypes.number, tickPadding: PropTypes.number, tickRotation: PropTypes.number, @@ -42,10 +43,10 @@ const willEnter = () => ({ y: 0, }) -const willLeave = springConfig => ({ style }) => ({ +const willLeave = springConfig => ({ style: { x, y } }) => ({ opacity: spring(0, springConfig), - x: spring(style.x.val, springConfig), - y: spring(style.y.val, springConfig), + x: spring(x.val, springConfig), + y: spring(y.val, springConfig), }) const Axis = ({ @@ -54,9 +55,10 @@ const Axis = ({ width, height, position: _position, - orient: _orient, // ticks + tickValues, + tickCount, tickSize, tickPadding, tickRotation, @@ -80,6 +82,8 @@ const Axis = ({ height, scale, position: _position, + tickValues, + tickCount, tickSize, tickPadding, tickRotation, @@ -210,11 +214,12 @@ Axis.propTypes = { // generic width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, - orient: PropTypes.oneOf(axisPositions), position: PropTypes.oneOf(axisPositions).isRequired, scale: PropTypes.func.isRequired, // ticks + tickValues: PropTypes.array, + tickCount: PropTypes.number, tickSize: PropTypes.number.isRequired, tickPadding: PropTypes.number.isRequired, tickRotation: PropTypes.number.isRequired, diff --git a/src/lib/axes.js b/src/lib/axes.js index 531acb1d4..ba84d7f53 100644 --- a/src/lib/axes.js +++ b/src/lib/axes.js @@ -35,14 +35,16 @@ const centerScale = scale => { */ /** - * @param {number} width - * @param {number} height - * @param {string} _position - * @param {Function} scale - * @param {number} [tickSize=5] - * @param {number} [tickPadding=5] - * @param {number} [tickRotation=0] - * @parem {string} [engine='svg'] + * @param {number} width + * @param {number} height + * @param {string} _position + * @param {Function} scale + * @param {Array.} [tickValues] + * @param {number} [tickCount] + * @param {number} [tickSize=5] + * @param {number} [tickPadding=5] + * @param {number} [tickRotation=0] + * @parem {string} [engine='svg'] * @return {{ x: number, y: number, ticks: Array., textAlign: string, textBaseline: string }} */ export const computeAxisTicks = ({ @@ -52,6 +54,8 @@ export const computeAxisTicks = ({ scale, // ticks + tickValues, + tickCount, tickSize = 5, tickPadding = 5, tickRotation = 0, @@ -60,11 +64,9 @@ export const computeAxisTicks = ({ engine = 'svg', }) => { let values - if (scale.ticks) { - values = scale.ticks() - } else { - values = scale.domain() - } + if (tickValues) values = tickValues + else if (scale.ticks) values = scale.ticks(tickCount) + else values = scale.domain() const textProps = textPropsByEngine[engine] diff --git a/test/lib/axes.test.js b/test/lib/axes.test.js index cd70e6b17..037920934 100644 --- a/test/lib/axes.test.js +++ b/test/lib/axes.test.js @@ -67,6 +67,29 @@ describe('computeAxisTicks()', () => { }) ).toMatchSnapshot() }) + + it('should allow to customize tick values', () => { + const tickValues = [10, 20, 30] + const axis = computeAxisTicks({ + scale: linearScale, + width, + height, + tickValues, + position: 'left', + }) + expect(axis.ticks.map(({ value }) => value)).toEqual(tickValues) + }) + + it('should allow to customize tick count', () => { + const axis = computeAxisTicks({ + scale: linearScale, + width, + height, + tickCount: 1, + position: 'left', + }) + expect(axis.ticks.length).toBe(2) + }) }) describe('from ordinal scale', () => {