From 4a9e836d681450681d1201cf1ec43e33ac6b127e Mon Sep 17 00:00:00 2001
From: Tanay Vardhan <tvardha2@illinois.edu>
Date: Tue, 9 Jul 2019 01:11:29 +0530
Subject: [PATCH] Add limit props to set height and width of XLine and YLine
 respectively (#152)

* implement xy limit props

* update documentation

* add test cases, better undefined check for XLine
---
 docs/src/docs/XLine/propDocs.json | 21 +++++++++++++++++++++
 docs/src/docs/YLine/propDocs.json | 14 ++++++++++++++
 src/XLine.js                      | 24 ++++++++++++++++++++++--
 src/YLine.js                      | 11 ++++++++++-
 tests/jsdom/spec/XLine.spec.js    | 16 ++++++++++++++++
 tests/jsdom/spec/YLine.spec.js    | 15 +++++++++++++++
 6 files changed, 98 insertions(+), 3 deletions(-)

diff --git a/docs/src/docs/XLine/propDocs.json b/docs/src/docs/XLine/propDocs.json
index 375b58b3..3d1b9cf4 100644
--- a/docs/src/docs/XLine/propDocs.json
+++ b/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"
diff --git a/docs/src/docs/YLine/propDocs.json b/docs/src/docs/YLine/propDocs.json
index 6b7d5e49..cf270778 100644
--- a/docs/src/docs/YLine/propDocs.json
+++ b/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"
diff --git a/src/XLine.js b/src/XLine.js
index aa9396c5..2ac4c890 100644
--- a/src/XLine.js
+++ b/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
         }}
diff --git a/src/YLine.js b/src/YLine.js
index 223f256b..7d4f6a2b 100644
--- a/src/YLine.js
+++ b/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,6 +44,8 @@ export default class YLine extends React.Component {
     const {
       yScale,
       value,
+      xScale,
+      xLimit,
       width,
       spacingLeft,
       spacingRight,
@@ -46,12 +53,14 @@ export default class YLine extends React.Component {
     } = 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,
diff --git a/tests/jsdom/spec/XLine.spec.js b/tests/jsdom/spec/XLine.spec.js
index d47aaf63..eb8db0a7 100644
--- a/tests/jsdom/spec/XLine.spec.js
+++ b/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));
+  });
+
 });
diff --git a/tests/jsdom/spec/YLine.spec.js b/tests/jsdom/spec/YLine.spec.js
index 78f21e51..ebcf37f2 100644
--- a/tests/jsdom/spec/YLine.spec.js
+++ b/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));
+  });
+
 });