feat(axis): add support for custom tick values/count (#58)

plouc · Sep 20, 2017 · bd78972 · bd78972
1 parent 3194631
commit bd78972
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 21 deletions.
diff --git a/src/components/axes/Axes.js b/src/components/axes/Axes.js
@@ -43,10 +43,9 @@ const Axes = ({
     return (
         <g>
             {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
@@ -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
@@ -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.<string|number>} [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.<AxisTick>, 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
@@ -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', () => {