Fix issues (#166)

* Added an option to overlay or underlay the Grid

* Make requested changes

* Fix Issue #141 : Brush gets stuck

* Fix Issue #150 : Control tick count

* Add link to source code Issue #133

Author: sartaj10

lib/components/YAxis.js

@@ -198,12 +198,21 @@ var YAxis = function (_React$Component) {
       var axis = align === "left" ? _d3Axis.axisLeft : _d3Axis.axisRight;
       if (this.props.type === "linear" || this.props.type === "power") {
         if (this.props.height <= 200) {
-          axisGenerator = axis(scale).ticks(5).tickFormat(function (d) {
-            if (absolute) {
-              return yformat(Math.abs(d));
-            }
-            return yformat(d);
-          }).tickSizeOuter(0);
+          if (this.props.tickCount > 0) {
+            axisGenerator = axis(scale).ticks(this.props.tickCount).tickFormat(d => {
+              if (absolute) {
+                return yformat(Math.abs(d));
+              }
+              return yformat(d);
+            }).tickSizeOuter(0);
+          } else {
+            axisGenerator = axis(scale).ticks(5).tickFormat(function (d) {
+              if (absolute) {
+                return yformat(Math.abs(d));
+              }
+              return yformat(d);
+            }).tickSizeOuter(0);
+          }
         } else {
           axisGenerator = axis(scale).tickFormat(function (d) {
             if (absolute) {
@@ -349,5 +358,9 @@ YAxis.propTypes = {
   /**
    * [Internal] The height supplied by the surrounding ChartContainer
    */
-  height: _propTypes2.default.number
+  height: _propTypes2.default.number,
+  /**
+   * The number of ticks
+   */
+  tickCount: _propTypes2.default.number
 };

src/components/Brush.js

@@ -157,20 +157,22 @@ export default class Brush extends React.Component {
           this.props.timeScale.invert(xy[0]).getTime();
 
         // Constrain
+        let startOffsetConstraint = timeOffset;
+        let endOffsetConstrain = timeOffset;
         if (tb - timeOffset < viewport.begin()) {
-          timeOffset = tb - viewport.begin().getTime();
+          startOffsetConstraint = tb - viewport.begin().getTime();
         }
         if (te - timeOffset > viewport.end()) {
-          timeOffset = te - viewport.end().getTime();
+          endOffsetConstrain = te - viewport.end().getTime();
         }
 
         newBegin = this.state.brushingInitializationSite === "brush" ||
           this.state.brushingInitializationSite === "handle-left"
-          ? parseInt(tb - timeOffset, 10)
+          ? parseInt(tb - startOffsetConstraint, 10)
           : tb;
         newEnd = this.state.brushingInitializationSite === "brush" ||
           this.state.brushingInitializationSite === "handle-right"
-          ? parseInt(te - timeOffset, 10)
+          ? parseInt(te - endOffsetConstrain, 10)
           : te;
 
         // Swap if needed

src/components/YAxis.js

@@ -174,12 +174,21 @@ export default class YAxis extends React.Component {
     const axis = align === "left" ? axisLeft : axisRight;
     if (this.props.type === "linear" || this.props.type === "power") {
       if (this.props.height <= 200) {
-        axisGenerator = axis(scale).ticks(5).tickFormat(d => {
-          if (absolute) {
-            return yformat(Math.abs(d));
-          }
-          return yformat(d);
-        }).tickSizeOuter(0);
+        if (this.props.tickCount > 0) {
+          axisGenerator = axis(scale).ticks(this.props.tickCount).tickFormat(d => {
+            if (absolute) {
+              return yformat(Math.abs(d));
+            }
+            return yformat(d);
+          }).tickSizeOuter(0);
+        } else {
+          axisGenerator = axis(scale).ticks(5).tickFormat(d => {
+            if (absolute) {
+              return yformat(Math.abs(d));
+            }
+            return yformat(d);
+          }).tickSizeOuter(0);
+        }
       } else {
         axisGenerator = axis(scale).tickFormat(d => {
           if (absolute) {
@@ -279,7 +288,7 @@ YAxis.defaultProps = {
   labelOffset: 0, // Offset the label position
   transition: 100, // Axis transition time
   width: 80,
-  style: defaultStyle
+  style: defaultStyle,
 };
 
 YAxis.propTypes = {
@@ -360,5 +369,9 @@ YAxis.propTypes = {
   /**
    * [Internal] The height supplied by the surrounding ChartContainer
    */
-  height: PropTypes.number
+  height: PropTypes.number,
+  /**
+   * The number of ticks
+   */
+  tickCount: PropTypes.number
 };

src/website/api/docs.json

@@ -4132,6 +4132,13 @@
         },
         "required": false,
         "description": "[Internal] The height supplied by the surrounding ChartContainer"
+      },
+      "tickCount": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "The number of ticks"
       }
     }
   }

src/website/examples/Example.js

@@ -29,14 +29,15 @@ export default React.createClass({
         const ExampleMetaData = Meta[exampleName];
         const Component = Examples[exampleName];
         const docs = Examples[`${exampleName}_docs`];
-
+        const sourceCode = "https://github.com/esnet/react-timeseries-charts/tree/master/src/website/examples/" + exampleName;
         return (
             <div>
                 <div className="row">
                     <div className="col-md-12">
                         <div className="row">
                             <div className="col-md-12">
                                 <h3>{ExampleMetaData.title}</h3>
+                                <a href={sourceCode} target="_blank">Source Code</a>
                                 <p>
                                     {ExampleMetaData.description}
                                 </p>