Add show line prop and default style for X and Y Axis (#106)

* Add show line prop and default style for xaxis

* Regenerated docs

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.5554d7a2bd35d8e7c180.js"></script></body>
+<script type="text/javascript" src="bundle.5444d2714eccb376e78e.js"></script></body>
 </html>

docs/src/docs/XAxis/propDocs.json

@@ -350,6 +350,28 @@
       },
       "required": false,
       "description": ""
+    },
+    "showLine": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Show X Axis line",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "lineStyle": {
+      "type": {
+        "name": "object"
+      },
+      "required": false,
+      "description": "Inline style object to be applied to the X Axis line",
+      "defaultValue": {
+        "value": "{}",
+        "computed": false
+      }
     }
   }
 }

docs/src/docs/YAxis/propDocs.json

@@ -350,6 +350,28 @@
       },
       "required": false,
       "description": ""
+    },
+    "showLine": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Show Y Axis line",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "lineStyle": {
+      "type": {
+        "name": "object"
+      },
+      "required": false,
+      "description": "Inline style object to be applied to the Y Axis line",
+      "defaultValue": {
+        "value": "{}",
+        "computed": false
+      }
     }
   }
 }

src/XAxis.js

@@ -72,7 +72,16 @@ export default class XAxis extends React.Component {
 
     onMouseEnterLabel: PropTypes.func,
     onMouseMoveLabel: PropTypes.func,
-    onMouseLeaveLabel: PropTypes.func
+    onMouseLeaveLabel: PropTypes.func,
+
+    /**
+     * Show X Axis line
+     */
+    showLine: PropTypes.bool,
+    /**
+     * Inline style object to be applied to the X Axis line
+     */
+    lineStyle: PropTypes.object
   };
 
   static defaultProps = {
@@ -90,7 +99,9 @@ export default class XAxis extends React.Component {
     spacingTop: 0,
     spacingBottom: 0,
     spacingLeft: 0,
-    spacingRight: 0
+    spacingRight: 0,
+    showLine: true,
+    lineStyle: {}
   };
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -132,7 +143,9 @@ export default class XAxis extends React.Component {
       showTitle,
       showLabels,
       showTicks,
-      showGrid
+      showGrid,
+      showLine,
+      lineStyle
     } = this.props;
 
     const {
@@ -168,13 +181,16 @@ export default class XAxis extends React.Component {
 
         {showTitle ? <XAxisTitle {...titleProps} /> : null}
 
-        <line
-          className="rct-chart-axis-line rct-chart-axis-line-x"
-          x1={-spacingLeft}
-          x2={width + spacingRight}
-          y1={axisLineY}
-          y2={axisLineY}
-        />
+        {showLine ? (
+          <line
+            className="rct-chart-axis-line rct-chart-axis-line-x"
+            x1={-spacingLeft}
+            x2={width + spacingRight}
+            y1={axisLineY}
+            y2={axisLineY}
+            style={lineStyle}
+          />
+        ) : null}
       </g>
     );
   }

src/YAxis.js

@@ -72,7 +72,15 @@ export default class YAxis extends React.Component {
 
     onMouseEnterLabel: PropTypes.func,
     onMouseMoveLabel: PropTypes.func,
-    onMouseLeaveLabel: PropTypes.func
+    onMouseLeaveLabel: PropTypes.func,
+    /**
+     * Show Y Axis line
+     */
+    showLine: PropTypes.bool,
+    /**
+     * Inline style object to be applied to the Y Axis line
+     */
+    lineStyle: PropTypes.object
   };
 
   static defaultProps = {
@@ -90,7 +98,9 @@ export default class YAxis extends React.Component {
     spacingTop: 0,
     spacingBottom: 0,
     spacingLeft: 0,
-    spacingRight: 0
+    spacingRight: 0,
+    showLine: true,
+    lineStyle: {}
   };
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -132,7 +142,9 @@ export default class YAxis extends React.Component {
       spacingTop,
       spacingBottom,
       spacingLeft,
-      spacingRight
+      spacingRight,
+      showLine,
+      lineStyle
     } = this.props;
 
     const {
@@ -165,13 +177,16 @@ export default class YAxis extends React.Component {
 
         {showTitle ? <YAxisTitle {...titleProps} /> : null}
 
-        <line
-          className="rct-chart-axis-line rct-chart-axis-line-y"
-          x1={axisLineX}
-          x2={axisLineX}
-          y1={-spacingTop}
-          y2={height + spacingBottom}
-        />
+        {showLine ? (
+          <line
+            className="rct-chart-axis-line rct-chart-axis-line-y"
+            x1={axisLineX}
+            x2={axisLineX}
+            y1={-spacingTop}
+            y2={height + spacingBottom}
+            style={lineStyle}
+          />
+        ) : null}
       </g>
     );
   }

styles/charts.less

@@ -114,3 +114,8 @@
     fill: steelblue;
   }
 }
+
+.rct-chart-axis-line-y,
+.rct-chart-axis-line-x {
+  stroke: #b9b9b9;
+}

tests/browser/spec/XAxis.spec.js

@@ -59,25 +59,19 @@ describe("XAxis", () => {
   it("renders every part of the xAxis", () => {
     const tree = (
       <XYPlot {...props} xDomain={[0, 10]} yDomain={[0, 10]}>
-        <LineChart data={[[0, 0], [10, 10]]} x={d => d[0]} y={d => d[1]} />
         <XAxis ticks={[-5, 0, 5]} />
       </XYPlot>
     );
     const rendered = mount(tree);
-    const lineChart = rendered
-      .find(XAxis)
-      .childAt(4)
-      .props();
+    const line = rendered.find(".rct-chart-axis-line-x");
     expect(rendered.find(XGrid).props().ticks).to.have.length(3);
     expect(rendered.find(XAxisLabels)).to.have.length(1);
     expect(rendered.find(XAxisTitle)).to.have.length(1);
     expect(rendered.find(XTicks)).to.have.length(1);
-    expect(lineChart.className).to.equal(
-      "rct-chart-axis-line rct-chart-axis-line-x"
-    );
-    expect(lineChart.x1).to.be.a("number");
-    expect(lineChart.x2).to.be.a("number");
-    expect(lineChart.y1).to.be.a("number");
-    expect(lineChart.y2).to.be.a("number");
+    expect(line).to.have.length(1);
+    expect(line.props().x1).to.be.a("number");
+    expect(line.props().x2).to.be.a("number");
+    expect(line.props().y1).to.be.a("number");
+    expect(line.props().y2).to.be.a("number");
   });
 });

tests/browser/spec/YAxis.spec.js

@@ -59,25 +59,19 @@ describe("YAxis", () => {
   it("renders every part of the yAxis", () => {
     const tree = (
       <XYPlot {...props} xDomain={[0, 10]} yDomain={[0, 10]}>
-        <LineChart data={[[0, 0], [10, 10]]} x={d => d[0]} y={d => d[1]} />
         <YAxis ticks={[-5, 0, 5]} />
       </XYPlot>
     );
     const rendered = mount(tree);
-    const lineChart = rendered
-      .find(YAxis)
-      .childAt(4)
-      .props();
+    const line = rendered.find(".rct-chart-axis-line-y");
     expect(rendered.find(YGrid).props().ticks).to.have.length(3);
     expect(rendered.find(YAxisLabels)).to.have.length(1);
     expect(rendered.find(YAxisTitle)).to.have.length(1);
     expect(rendered.find(YTicks)).to.have.length(1);
-    expect(lineChart.className).to.equal(
-      "rct-chart-axis-line rct-chart-axis-line-y"
-    );
-    expect(lineChart.x1).to.be.a("number");
-    expect(lineChart.x2).to.be.a("number");
-    expect(lineChart.y1).to.be.a("number");
-    expect(lineChart.y2).to.be.a("number");
+    expect(line).to.have.length(1);
+    expect(line.props().x1).to.be.a("number");
+    expect(line.props().x2).to.be.a("number");
+    expect(line.props().y1).to.be.a("number");
+    expect(line.props().y2).to.be.a("number");
   });
 });