Add limit props to set height and width of XLine and YLine respective…

…ly (#152)

* implement xy limit props

* update documentation

* add test cases, better undefined check for XLine

docs/src/docs/XLine/propDocs.json

@@ -16,6 +16,27 @@
       "required": true,
       "description": ""
     },
+    "yScale": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "D3 scale for Y axis - provided by XYPlot"
+    },
+    "yLimit": {
+      "type": {
+        "name": "any"
+      },
+      "required": false,
+      "description": "Limit on the height of the line"
+    },
+    "yDomain": {
+      "type": {
+        "name": "array"
+      },
+      "required": false,
+      "description": "Y domain of the data as an array - provided by XYPlot"
+    },
     "spacingTop": {
       "type": {
         "name": "number"

docs/src/docs/YLine/propDocs.json

@@ -16,6 +16,20 @@
       "required": true,
       "description": ""
     },
+    "xScale": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "D3 scale for X axis - provided by XYPlot"
+    },
+    "xLimit": {
+      "type": {
+        "name": "any"
+      },
+      "required": false,
+      "description": "Limit on the width of the line"
+    },
     "spacingLeft": {
       "type": {
         "name": "number"

src/XLine.js

@@ -11,6 +11,15 @@ export default class XLine extends React.Component {
      */
     xScale: PropTypes.func,
     value: PropTypes.any.isRequired,
+    /**
+     * D3 scale for Y axis - provided by XYPlot
+     */
+    yScale: PropTypes.func,
+    yLimit: PropTypes.any,
+    /**
+     * The Y domain of the data as an array - provided by XYPlot
+     */
+    yDomain: PropTypes.array,
     /**
      * Spacing top - provided by XYPlot
      */
@@ -39,6 +48,9 @@ export default class XLine extends React.Component {
     const {
       xScale,
       value,
+      yScale,
+      yLimit,
+      yDomain,
       height,
       style,
       spacingTop,
@@ -47,13 +59,21 @@ export default class XLine extends React.Component {
     const className = `rct-chart-line-x ${this.props.className}`;
     const lineX = xScale(value);
 
+    let y1 = -spacingTop;
+    let y2 = height + spacingBottom;
+
+    if (typeof yLimit !== "undefined") {
+      y1 = yScale(yDomain[0]) + spacingBottom;
+      y2 = yScale(yLimit);
+    }
+
     return (
       <line
         {...{
           x1: lineX,
           x2: lineX,
-          y1: -spacingTop,
-          y2: height + spacingBottom,
+          y1: y1,
+          y2: y2,
           className,
           style
         }}

src/YLine.js

@@ -11,6 +11,11 @@ export default class YLine extends React.Component {
      */
     yScale: PropTypes.func,
     value: PropTypes.any.isRequired,
+    /**
+     * D3 scale for X axis - provided by XYPlot
+     */
+    xScale: PropTypes.func,
+    xLimit: PropTypes.any,
     /**
      * Spacing left - provided by XYPlot
      */
@@ -39,19 +44,23 @@ export default class YLine extends React.Component {
     const {
       yScale,
       value,
+      xScale,
+      xLimit,
       width,
       spacingLeft,
       spacingRight,
       style
     } = this.props;
     const className = `rct-chart-line-y ${this.props.className || ""}`;
     const lineY = yScale(value);
+    const lineX =
+      typeof xLimit === "undefined" ? width + spacingRight : xScale(xLimit);
 
     return (
       <line
         {...{
           x1: -spacingLeft,
-          x2: width + spacingRight,
+          x2: lineX,
           y1: lineY,
           y2: lineY,
           className,

tests/jsdom/spec/XLine.spec.js

@@ -110,4 +110,20 @@ describe("XLine", () => {
     );
     expect(findLine(wrapper).prop("style")).to.deep.equal(style);
   });
+
+  it("limits the line's height using yLimit", () => {
+    const limit = 2;
+    let wrapper = shallow(
+      <XLine 
+        yScale={linearScale}
+        xScale={linearScale}
+        yDomain={linearScale.domain}
+        value={linearValue}
+        yLimit={limit}
+        {...commonProps}
+      />
+    );
+    expect(getLineHeight(findLine(wrapper))).to.equal(linearScale(limit));
+  });
+
 });

tests/jsdom/spec/YLine.spec.js

@@ -110,4 +110,19 @@ describe("YLine", () => {
     );
     expect(findLine(wrapper).prop("style")).to.deep.equal(style);
   });
+
+  it("limits the line's width using xLimit", () => {
+    const limit = 2;
+    let wrapper = shallow(
+      <YLine 
+        yScale={linearScale}
+        xScale={linearScale}
+        value={linearValue}
+        xLimit={limit}
+        {...commonProps}
+      />
+    );
+    expect(getLineWidth(findLine(wrapper))).to.equal(linearScale(limit));
+  });
+
 });