Merge 8589639 into 580ac55

.eslintrc

@@ -22,7 +22,9 @@
     "react/jsx-no-bind": 0,
 
     "strict": 0,
-    "no-unused-vars": 0,
+    "no-unused-vars": 1,
+    one-var: ["error", { "uninitialized": "always" }],
+    one-var-declaration-per-line: ["error", "initializations"]
   },
   "plugins": [
     "react"

package.json

@@ -51,49 +51,50 @@
     "core-js": "2.4.0",
     "d3-scale": "1.0.0",
     "d3-shape": "1.0.0",
-    "lodash": "4.13.1",
+    "lodash": "^4.16.2",
     "react-container-dimensions": "1.2.0",
     "react-smooth": "0.1.11",
     "recharts-scale": "0.2.1",
     "reduce-css-calc": "^1.3.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.10.0",
-    "babel-core": "^6.10.0",
-    "babel-eslint": "^6.1.0",
+    "babel-cli": "^6.16.0",
+    "babel-core": "^6.17.0",
+    "babel-eslint": "^7.0.0",
     "babel-loader": "^6.2.4",
     "babel-plugin-lodash": "^3.2.0",
-    "babel-plugin-transform-class-properties": "^6.10.0",
+    "babel-plugin-transform-class-properties": "^6.16.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-export-extensions": "^6.8.0",
     "babel-plugin-transform-function-bind": "^6.8.0",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-polyfill": "^6.9.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.11.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
     "chai": "^3.5.0",
-    "chai-enzyme": "^0.5.1",
+    "chai-enzyme": "^0.5.2",
     "enzyme": "^2.3.0",
     "escope": "^3.6.0",
-    "eslint": "^3.0.0",
+    "eslint": "^3.7.0",
     "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.10.0",
-    "eslint-plugin-jsx-a11y": "^1.5.0",
-    "eslint-plugin-react": "^5.2.0",
+    "eslint-plugin-import": "^1.16.0",
+    "eslint-plugin-jsx-a11y": "^2.2.2",
+    "eslint-plugin-react": "^5.2.2",
     "estraverse-fb": "^1.3.1",
     "isparta": "^4.0.0",
     "istanbul-instrumenter-loader": "^0.2.0",
     "json-loader": "^0.5.4",
     "karma": "^1.1.1",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^1.0.1",
+    "karma-chrome-launcher": "^2.0.0",
     "karma-coverage": "^1.0.0",
     "karma-coveralls": "^1.1.2",
     "karma-firefox-launcher": "^1.0.0",
     "karma-mocha": "^1.1.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
-    "mocha": "^2.5.0",
+    "lodash-webpack-plugin": "^0.10.1",
+    "mocha": "^3.1.0",
     "pre-commit": "^1.1.3",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",

src/cartesian/Area.js

@@ -93,7 +93,6 @@ class Area extends Component {
   constructor(props, ctx) {
     super(props, ctx);
 
-    const { points } = props;
     this.state = { isAnimationFinished: true };
     if (!this.id) {
       this.id = `clipPath${Date.now()}`;
@@ -134,7 +133,7 @@ class Area extends Component {
   }
 
   renderHorizontalRect(alpha) {
-    const { baseLine, layout, points, strokeWidth } = this.props;
+    const { baseLine, points, strokeWidth } = this.props;
     const startX = points[0].x;
     const endX = points[points.length - 1].x;
     const width = alpha * Math.abs(startX - endX);
@@ -157,7 +156,7 @@ class Area extends Component {
   }
 
   renderVerticalRect(alpha) {
-    const { baseLine, layout, points, strokeWidth } = this.props;
+    const { baseLine, points, strokeWidth } = this.props;
     const startY = points[0].y;
     const endY = points[points.length - 1].y;
     const height = alpha * Math.abs(startY - endY);
@@ -246,7 +245,7 @@ class Area extends Component {
         cx: entry.x,
         cy: entry.y,
         index: i,
-        playload: entry,
+        payload: entry,
       };
 
       return this.renderDotItem(dot, dotProps);

src/cartesian/Bar.js

@@ -1,7 +1,7 @@
 /**
  * @fileOverview Render a group of bar
  */
-import React, { Component, PropTypes, Children } from 'react';
+import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import Animate from 'react-smooth';
 import Rectangle from '../shape/Rectangle';

src/cartesian/Brush.js

@@ -331,8 +331,8 @@ class Brush extends Component {
   }
 
   renderText() {
-    const { startIndex, endIndex, data, y, height, travellerWidth,
-      stroke, tickFormatter } = this.props;
+    const { startIndex, endIndex, y, height, travellerWidth,
+      stroke } = this.props;
     const { startX, endX } = this.state;
     const offset = 5;
     const style = {
@@ -365,7 +365,7 @@ class Brush extends Component {
   }
 
   render() {
-    const { x, width, travellerWidth, data, className } = this.props;
+    const { data, className } = this.props;
     const { startX, endX, isTextActive, isSlideMoving, isTravellerMoving } = this.state;
 
     if (!data || !data.length) { return null; }

src/cartesian/CartesianAxis.js

@@ -2,15 +2,14 @@
  * @fileOverview Cartesian Axis
  */
 import React, { Component, PropTypes } from 'react';
-import pureRender from '../util/PureRender';
+import { shallowEqual } from '../util/PureRender';
 import { getStringSize } from '../util/DOMUtils';
 import Layer from '../container/Layer';
 import Text from '../component/Text';
 import { isSsr, PRESENTATION_ATTRIBUTES,
   getPresentationAttributes } from '../util/ReactUtils';
 import _ from 'lodash';
 
-@pureRender
 class CartesianAxis extends Component {
 
   static displayName = 'CartesianAxis';
@@ -38,13 +37,17 @@ class CartesianAxis extends Component {
     tickLine: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
 
     minLabelGap: PropTypes.number,
-    ticks: PropTypes.arrayOf(PropTypes.shape({
-      value: PropTypes.any,
-      coordinate: PropTypes.value,
-    })),
+    ticks: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.shape({
+        value: PropTypes.any,
+        coordinate: PropTypes.value,
+      })),
+      PropTypes.arrayOf(PropTypes.number),
+    ]),
     tickSize: PropTypes.number,
     stroke: PropTypes.string,
     tickFormatter: PropTypes.func,
+    ticksGenerator: PropTypes.func,
     interval: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   };
 
@@ -113,6 +116,15 @@ class CartesianAxis extends Component {
       return isShow;
     });
   }
+
+  shouldComponentUpdate({ viewBox, ...restProps }, state) {
+		// props.viewBox is sometimes generated every time -
+		// check that specially as object equality is likely to fail
+    const { viewBox: viewBoxOld, ...restPropsOld } = this.props;
+    return !shallowEqual(viewBox, viewBoxOld) ||
+			!shallowEqual(restProps, restPropsOld) || !shallowEqual(state, this.state);
+  }
+
   /**
    * Calculate the coordinates of endpoints in ticks
    * @param  {Object} data The data of a simple tick
@@ -121,10 +133,7 @@ class CartesianAxis extends Component {
    */
   getTickLineCoord(data) {
     const { x, y, width, height, orientation, tickSize } = this.props;
-    let x1;
-    let x2;
-    let y1;
-    let y2;
+    let x1, x2, y1, y2;
 
     const finalTickSize = data.tickSize || tickSize;
 
@@ -274,9 +283,14 @@ class CartesianAxis extends Component {
     return tickItem;
   }
 
-  renderTicks() {
-    const { ticks, tickLine, stroke, tick, tickFormatter } = this.props;
-    const finalTicks = CartesianAxis.getTicks(this.props);
+	/**
+	 * render the ticks
+	 * @param {Array} ticks The ticks to actually render (overrides what was passed in props)
+	 * @return {ReactComponent} renderedTicks
+	 */
+  renderTicks(ticks) {
+    const { tickLine, stroke, tick, tickFormatter } = this.props;
+    const finalTicks = CartesianAxis.getTicks({ ...this.props, ticks });
     const textAnchor = this.getTickTextAnchor();
     const verticalAnchor = this.getTickVerticalAnchor();
     const axisProps = getPresentationAttributes(this.props);
@@ -347,7 +361,13 @@ class CartesianAxis extends Component {
   }
 
   render() {
-    const { axisLine, width, height, ticks, label } = this.props;
+    const { axisLine, width, height, ticksGenerator } = this.props;
+    let { ticks, ...noTicksProps } = this.props;
+
+    if (_.isFunction(ticksGenerator)) {
+      ticks = (ticks && ticks.length > 0) ? ticksGenerator(this.props) :
+				ticksGenerator(noTicksProps);
+    }
 
     if (width <= 0 || height <= 0 || !ticks || !ticks.length) {
       return null;
@@ -356,7 +376,7 @@ class CartesianAxis extends Component {
     return (
       <Layer className="recharts-cartesian-axis">
         {axisLine && this.renderAxisLine()}
-        {this.renderTicks()}
+        {this.renderTicks(ticks)}
         {this.renderLabel()}
       </Layer>
     );

src/cartesian/CartesianGrid.js

@@ -21,6 +21,13 @@ class CartesianGrid extends Component {
     vertical: PropTypes.bool,
     horizontalPoints: PropTypes.arrayOf(PropTypes.number),
     verticalPoints: PropTypes.arrayOf(PropTypes.number),
+    horizontalCoordinatesGenerator: PropTypes.func,
+    verticalCoordinatesGenerator: PropTypes.func,
+    xAxis: PropTypes.object,
+    yAxis: PropTypes.object,
+    offset: PropTypes.object,
+    chartWidth: PropTypes.number,
+    chartHeight: PropTypes.number,
   };
 
   static defaultProps = {
@@ -41,10 +48,11 @@ class CartesianGrid extends Component {
 
   /**
    * Draw the horizontal grid lines
+   * @param {Array} horizontalPoints either passed in as props or generated from function
    * @return {Group} Horizontal lines
    */
-  renderHorizontal() {
-    const { x, width, horizontalPoints } = this.props;
+  renderHorizontal(horizontalPoints) {
+    const { x, width } = this.props;
 
     if (!horizontalPoints || !horizontalPoints.length) { return null; }
 
@@ -57,10 +65,11 @@ class CartesianGrid extends Component {
 
   /**
    * Draw vertical grid lines
+   * @param {Array} verticalPoints either passed in as props or generated from function
    * @return {Group} Vertical lines
    */
-  renderVertical() {
-    const { y, height, verticalPoints } = this.props;
+  renderVertical(verticalPoints) {
+    const { y, height } = this.props;
 
     if (!verticalPoints || !verticalPoints.length) { return null; }
 
@@ -73,16 +82,29 @@ class CartesianGrid extends Component {
   }
 
   render() {
-    const { width, height, horizontal, vertical } = this.props;
+    const { width, height, horizontal, vertical, horizontalCoordinatesGenerator,
+      verticalCoordinatesGenerator, xAxis, yAxis, offset, chartWidth, chartHeight } = this.props;
 
     if (width <= 0 || height <= 0) {
       return null;
     }
 
+    let { horizontalPoints, verticalPoints } = this.props;
+
+    if (_.isFunction(horizontalCoordinatesGenerator)) {
+      horizontalPoints = horizontalCoordinatesGenerator({ yAxis, width: chartWidth,
+        height: chartHeight, offset });
+    }
+
+    if (_.isFunction(verticalCoordinatesGenerator)) {
+      verticalPoints = verticalCoordinatesGenerator({ xAxis, width: chartWidth,
+        height: chartHeight, offset });
+    }
+
     return (
       <g className="recharts-cartesian-grid">
-        {horizontal && this.renderHorizontal()}
-        {vertical && this.renderVertical()}
+        {horizontal && this.renderHorizontal(horizontalPoints)}
+        {vertical && this.renderVertical(verticalPoints)}
       </g>
     );
   }

src/cartesian/Line.js

@@ -91,12 +91,12 @@ class Line extends Component {
   constructor(props, ctx) {
     super(props, ctx);
 
-    const { points } = props;
     this.state = {
       isAnimationFinished: true,
       totalLength: 0,
     };
   }
+
   /* eslint-disable  react/no-did-mount-set-state */
   componentDidMount() {
     const { isAnimationActive } = this.props;
@@ -109,6 +109,7 @@ class Line extends Component {
 
     this.setState({ totalLength });
   }
+
   /* eslint-disable  react/no-did-update-set-state */
   componentDidUpdate(prevProps, prevState) {
     const { animationId, points } = this.props;
@@ -205,8 +206,6 @@ class Line extends Component {
     const customLabelProps = getPresentationAttributes(label);
 
     const labels = points.map((entry, i) => {
-      const x = entry.x + entry.width / 2;
-      const y = entry.y;
       const labelProps = {
         textAnchor: 'middle',
         ...entry,
@@ -262,7 +261,7 @@ class Line extends Component {
   }
 
   renderCurve() {
-    const { points, className, strokeDasharray, isAnimationActive,
+    const { points, strokeDasharray, isAnimationActive,
       animationBegin, animationDuration, animationEasing, onClick, onMouseEnter,
       onMouseLeave, ...other } = this.props;
     const { totalLength } = this.state;

src/cartesian/ReferenceArea.js

@@ -4,7 +4,6 @@
 import React, { Component, PropTypes } from 'react';
 import pureRender from '../util/PureRender';
 import Layer from '../container/Layer';
-import Dot from '../shape/Dot';
 import Text from '../component/Text';
 import { PRESENTATION_ATTRIBUTES, getPresentationAttributes } from '../util/ReactUtils';
 import { validateCoordinateInRange } from '../util/DataUtils';
@@ -68,10 +67,7 @@ class ReferenceArea extends Component {
     const yOffset = yScale.bandwidth ? yScale.bandwidth() / 2 : 0;
     const xRange = xScale.range();
     const yRange = yScale.range();
-    let x1;
-    let x2;
-    let y1;
-    let y2;
+    let x1, x2, y1, y2;
 
     if (hasX && isValidateValue(xValue1)) {
       x1 = xScale(xValue1) + xOffset;