feat(axes): remove stale axes components & add proper props validation

plouc · Aug 8, 2017 · 7fc0e4d · 7fc0e4d
1 parent 507dcb6
commit 7fc0e4d
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 208 deletions.
diff --git a/src/components/axes/Axes.js b/src/components/axes/Axes.js
@@ -9,18 +9,12 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { motionPropTypes } from '../../props'
-import Axis from './Axis'
+import Axis, { axisPropType } from './Axis'
 
 const horizontalPositions = ['top', 'bottom']
 const verticalPositions = ['left', 'right']
 const positions = [...horizontalPositions, ...verticalPositions]
 
-const axisPropType = PropTypes.shape({
-    tickSize: PropTypes.number,
-    tickPadding: PropTypes.number,
-    format: PropTypes.func,
-})
-
 export default class Axes extends Component {
     static propTypes = {
         xScale: PropTypes.func.isRequired,
@@ -29,12 +23,10 @@ export default class Axes extends Component {
         width: PropTypes.number.isRequired,
         height: PropTypes.number.isRequired,
 
-        axes: PropTypes.shape({
-            top: axisPropType,
-            right: axisPropType,
-            bottom: axisPropType,
-            left: axisPropType,
-        }).isRequired,
+        top: axisPropType,
+        right: axisPropType,
+        bottom: axisPropType,
+        left: axisPropType,
 
         theme: PropTypes.object.isRequired,
 
@@ -50,13 +42,18 @@ export default class Axes extends Component {
             yScale,
             width,
             height,
-            axes,
+            top,
+            right,
+            bottom,
+            left,
             theme,
             animate,
             motionStiffness,
             motionDamping,
         } = this.props
 
+        const axes = { top, right, bottom, left }
+
         return (
             <g>
                 {positions.map(position => {

diff --git a/src/components/axes/Axis.js b/src/components/axes/Axis.js
@@ -22,12 +22,29 @@ const center = scale => {
     return d => scale(d) + offset
 }
 
+const axisPositions = ['top', 'right', 'bottom', 'left']
+const legendPositions = ['start', 'center', 'end']
+
+export const axisPropType = PropTypes.shape({
+    orient: PropTypes.oneOf(axisPositions),
+
+    // ticks
+    tickSize: PropTypes.number,
+    tickPadding: PropTypes.number,
+    format: PropTypes.func,
+
+    // legend
+    legend: PropTypes.string,
+    legendPosition: PropTypes.oneOf(legendPositions),
+    legendOffset: PropTypes.number,
+})
+
 export default class Axis extends Component {
     static propTypes = {
         width: PropTypes.number.isRequired,
         height: PropTypes.number.isRequired,
-        orient: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-        position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired,
+        orient: PropTypes.oneOf(axisPositions),
+        position: PropTypes.oneOf(axisPositions).isRequired,
         scale: PropTypes.func.isRequired,
 
         // ticks
@@ -37,8 +54,9 @@ export default class Axis extends Component {
 
         // legend
         legend: PropTypes.string,
-        legendPosition: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
+        legendPosition: PropTypes.oneOf(legendPositions).isRequired,
         legendOffset: PropTypes.number.isRequired,
+
         theme: PropTypes.object.isRequired,
 
         // motion

diff --git a/src/components/axes/AxisX.js b/src/components/axes/AxisX.js
diff --git a/src/components/axes/AxisY.js b/src/components/axes/AxisY.js
diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js
@@ -42,8 +42,11 @@ export default class Bar extends Component {
         margin: marginPropType,
         xPadding: PropTypes.number.isRequired,
 
-        // axes
-        axes: PropTypes.object.isRequired,
+        // axes & grid
+        axisTop: PropTypes.object,
+        axisRight: PropTypes.object,
+        axisBottom: PropTypes.object,
+        axisLeft: PropTypes.object,
         enableGridX: PropTypes.bool.isRequired,
         enableGridY: PropTypes.bool.isRequired,
 
@@ -67,14 +70,10 @@ export default class Bar extends Component {
         margin: Nivo.defaults.margin,
         groupMode: 'stacked',
         xPadding: 0.1,
-        axes: {
-            left: {
-                enabled: true,
-            },
-            bottom: {
-                enabled: true,
-            },
-        },
+
+        // axes & grid
+        axisBottom: {},
+        axisLeft: {},
         enableGridX: false,
         enableGridY: true,
 
@@ -102,7 +101,12 @@ export default class Bar extends Component {
             width: _width,
             height: _height,
             xPadding,
-            axes,
+
+            // axes & grid
+            axisTop,
+            axisRight,
+            axisBottom,
+            axisLeft,
             enableGridX,
             enableGridY,
 
@@ -152,10 +156,6 @@ export default class Bar extends Component {
         if (animate === true) {
             bars = (
                 <TransitionMotion
-                    /*
-                    willEnter={this.willEnter}
-                    willLeave={this.willLeave}
-                    */
                     styles={result.bars.map(bar => {
                         return {
                             key: bar.key,
@@ -202,12 +202,15 @@ export default class Bar extends Component {
                     {...motionProps}
                 />
                 <Axes
-                    axes={axes}
                     xScale={result.xScale}
                     yScale={result.yScale}
                     width={width}
                     height={height}
                     theme={theme}
+                    top={axisTop}
+                    right={axisRight}
+                    bottom={axisBottom}
+                    left={axisLeft}
                     {...motionProps}
                 />
                 {bars}