recharts - npm Package Compare versions

Comparing version 0.3.18 to 0.3.19

demo/component/AreaChart.js

@@ -27,8 +27,13 @@ import React from 'react';
   render () {
-    const data = [{name: '上海', uv: 400, pv: 2400, amt: 2400},
-                  {name: '北京', uv: 300, pv: 4567, amt: 2400},
-                  {name: '杭州', uv: 300, pv: 1398, amt: 2400},
-                  {name: '上饶', uv: 200, pv: 9800, amt: 2400},
-                  {name: '台湾', uv: 278, pv: 3908, amt: 2400},
-                  {name: '香港', uv: 189, pv: 4800, amt: 2400}];
+    const data = [
+      {name: '上海', uv: 400, pv: 2400, amt: 2400},
+      {name: '杭州', uv: 300, pv: 1398, amt: 2400},
+      {name: '上饶', uv: 200, pv: 9800, amt: 2400},
+      {name: '台湾', uv: 278, pv: 3908, amt: 2400},
+      {name: '香港', uv: 189, pv: 4800, amt: 2400}
+    ];
+    const data01 = [
+      {name: '上海', uv: 400, pv: 2400, amt: 2400},
+      {name: '北京', uv: 300, pv: 4567, amt: 2400},
+    ];
 
@@ -39,3 +44,3 @@ return (
         <div className='area-chart-wrapper'>
-          <AreaChart width={900} height={250} data={data} margin={{top: 10, right: 20, bottom: 10, left: 10}}>
+          <AreaChart width={900} height={250} data={data01} margin={{top: 10, right: 20, bottom: 10, left: 10}}>
             <XAxis dataKey='name' hasTick={true}/>
@@ -45,48 +50,7 @@ <YAxis tickCount={7} hasTick={true}/>
             <CartesianGrid stroke='#f5f5f5'/>
-            <AreaItem type='monotone' dataKey='uv' stroke='#7d79d4' fill='#7d79d4' fillOpacity={0.25}/>
+            <AreaItem type='monotone' dataKey='none' stroke='#7d79d4' fill='#7d79d4' fillOpacity={0.25}/>
           </AreaChart>
         </div>
 
-        <p>最简单的面积图</p>
-        <div className='area-chart-wrapper'>
-          <AreaChart width={100} height={50} data={data}>
-            <AreaItem type='monotone' dataKey='uv' stroke='#ff7300' fill='#ff7300'/>
-          </AreaChart>
-        </div>
 
-        <p>双轴图</p>
-        <div className='area-chart-wrapper' style={{padding: 40}}>
-          <AreaChart width={400} height={400} data={data}
-            margin={{top: 5, right: 20, left: 20, bottom: 5}}>
-            <XAxis dataKey='name'/>
-            <Tooltip />
-            <AreaItem type='monotone' dataKey='uv' stroke='#ff7300' fill='#ff7300' yAxisId={0}/>
-            <AreaItem type='monotone' dataKey='pv' stroke='#387908' fill='#387908' yAxisId={1}/>
-          </AreaChart>
-        </div>
-        <p>双轴图（线图默认是水平方向的，容器有margin）</p>
-        <div className='area-chart-wrapper'>
-          <AreaChart width={600} height={400} data={data}>
-            <YAxis type='number' yAxisId={0} stroke="#ff7300"/>
-            <YAxis type='number' orient='right' yAxisId={1} stroke="#387908"/>
-            <YAxis type='number' orient='right' yAxisId={2} stroke="#38abc8"/>
-            <XAxis dataKey='name'/>
-            <AreaItem dataKey='uv' stroke='#ff7300' fill='#ff7300' strokeWidth={2} yAxisId={0}/>
-            <AreaItem dataKey='pv' stroke='#387908' fill='#387908' strokeWidth={2} yAxisId={1}/>
-            <AreaItem dataKey='amt' stroke='#38abc8' fill='#38abc8' strokeWidth={2} yAxisId={2}/>
-          </AreaChart>
-        </div>
-
-        <p>竖直方向的线图</p>
-        <div className='area-chart-wrapper' style={{margin: 40}}>
-          <AreaChart width={400} height={400} data={data} layout='vertical'>
-            <YAxis type='category' dataKey='name'/>
-            <XAxis type='number' xAxisId={0} orient='top'/>
-            <XAxis type='number' xAxisId={1} orient='bottom'/>
-            <AreaItem dataKey='uv' dataKeyName='月环比' stroke='#ff7300' fill='#ff7300' strokeWidth={2} xAxisId={0} />
-            <AreaItem dataKey='pv' dataKeyName='年同比' stroke='#387908' fill='#387908' strokeWidth={2} xAxisId={1} />
-            <Tooltip/>
-          </AreaChart>
-        </div>
-
       </div>
@@ -96,1 +60,42 @@ );
 });
+        // <p>最简单的面积图</p>
+        // <div className='area-chart-wrapper'>
+        //   <AreaChart width={100} height={50} data={data}>
+        //     <AreaItem type='monotone' dataKey='uv' stroke='#ff7300' fill='#ff7300'/>
+        //   </AreaChart>
+        // </div>
+
+        // <p>双轴图</p>
+        // <div className='area-chart-wrapper' style={{padding: 40}}>
+        //   <AreaChart width={400} height={400} data={data}
+        //     margin={{top: 5, right: 20, left: 20, bottom: 5}}>
+        //     <XAxis dataKey='name'/>
+        //     <Tooltip />
+        //     <AreaItem type='monotone' dataKey='uv' stroke='#ff7300' fill='#ff7300' yAxisId={0}/>
+        //     <AreaItem type='monotone' dataKey='pv' stroke='#387908' fill='#387908' yAxisId={1}/>
+        //   </AreaChart>
+        // </div>
+        // <p>双轴图（线图默认是水平方向的，容器有margin）</p>
+        // <div className='area-chart-wrapper'>
+        //   <AreaChart width={600} height={400} data={data}>
+        //     <YAxis type='number' yAxisId={0} stroke="#ff7300"/>
+        //     <YAxis type='number' orient='right' yAxisId={1} stroke="#387908"/>
+        //     <YAxis type='number' orient='right' yAxisId={2} stroke="#38abc8"/>
+        //     <XAxis dataKey='name'/>
+        //     <AreaItem dataKey='uv' stroke='#ff7300' fill='#ff7300' strokeWidth={2} yAxisId={0}/>
+        //     <AreaItem dataKey='pv' stroke='#387908' fill='#387908' strokeWidth={2} yAxisId={1}/>
+        //     <AreaItem dataKey='amt' stroke='#38abc8' fill='#38abc8' strokeWidth={2} yAxisId={2}/>
+        //   </AreaChart>
+        // </div>
+
+        // <p>竖直方向的线图</p>
+        // <div className='area-chart-wrapper' style={{margin: 40}}>
+        //   <AreaChart width={400} height={400} data={data} layout='vertical'>
+        //     <YAxis type='category' dataKey='name'/>
+        //     <XAxis type='number' xAxisId={0} orient='top'/>
+        //     <XAxis type='number' xAxisId={1} orient='bottom'/>
+        //     <AreaItem dataKey='uv' dataKeyName='月环比' stroke='#ff7300' fill='#ff7300' strokeWidth={2} xAxisId={0} />
+        //     <AreaItem dataKey='pv' dataKeyName='年同比' stroke='#387908' fill='#387908' strokeWidth={2} xAxisId={1} />
+        //     <Tooltip/>
+        //   </AreaChart>
+        // </div>

demo/component/BarChart.js

@@ -222,3 +222,3 @@ import React, {PropTypes} from 'react';
         <p>有正负的柱图</p>
-        <div className='bar-chart-wrapper'>
+        <div className='bar-chart-wrapper' style={{userSelect: "none", WebkitUserSelect: "none"}}>
           <BarChart width={1100} height={250} barGap={2} barSize={6} data={data2} margin={{top: 20, right: 60, bottom: 0, left: 20}}>
@@ -225,0 +225,0 @@ <XAxis dataKey='name'/>

package.json

 {
   "name": "recharts",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "description": "React charts",
@@ -32,3 +32,2 @@ "main": "src/index.js",
   "devDependencies": {
-    "babel-polyfill": "6.3.14",
     "babel-core": "6.3.21",
@@ -39,2 +38,3 @@ "babel-eslint": "5.0.0-beta6",
     "babel-plugin-transform-export-extensions": "6.3.13",
+    "babel-polyfill": "6.3.14",
     "babel-preset-es2015": "6.3.13",
@@ -48,2 +48,3 @@ "babel-preset-react": "6.3.13",
     "history": "1.17.0",
+    "ima.js-babel6-polyfill": "^0.1.0",
     "isparta": "4.0.0",
@@ -62,3 +63,3 @@ "mocha": "2.3.4",
   "scripts": {
-    "demo": "./node_modules/.bin/webpack-dev-server --progress --port 3000  --colors --content-base demo --hot --inline --config demo/webpack.config.js",
+    "demo": "./node_modules/.bin/webpack-dev-server --host 0.0.0.0  --progress --port 3000  --colors --content-base demo --hot --inline --config demo/webpack.config.js",
     "test": "./node_modules/.bin/mocha --compilers js:babel/register --recursive",
@@ -65,0 +66,0 @@ "test-cov": "./node_modules/.bin/babel-node ./node_modules/.bin/isparta --report html cover _mocha -- --recursive",

src/chart/Area.js

 /**
- * @fileOverview 面积图
+ * @fileOverview Area
  */
 import React, { PropTypes } from 'react';
 import Curve from '../shape/Curve';
+import Dot from '../shape/Dot';
 import Layer from '../container/Layer';
+import ReactUtils from '../util/ReactUtils';
 import pureRender from 'pure-render-decorator';
@@ -21,8 +23,6 @@
     className: PropTypes.string,
-    // 是否展示曲线上的点
-    hasDot: PropTypes.bool,
-    // 是否展示曲线
-    hasCurve: PropTypes.bool,
-    // 是否展示填充面积
-    area: PropTypes.bool,
+    // dot configuration
+    dot: PropTypes.oneOfType([PropTypes.element, PropTypes.object, PropTypes.bool]),
+    // have curve configuration
+    curve: PropTypes.bool,
     baseLineType: PropTypes.oneOf(['horizontal', 'vertical', 'curve']),
@@ -44,7 +44,6 @@ baseLine: PropTypes.oneOfType([
     strokeWidth: 1,
-    area: true,
     // 数据
     data: [],
-    hasDot: false,
-    hasCurve: true,
+    dot: false,
+    curve: true,
     onClick() {},
@@ -60,38 +59,39 @@ onMouseEnter() {},
   renderArea() {
-    const { hasDot, hasCurve, className, ...other } = this.props;
+    const { stroke, className, ...other } = this.props;
 
-    return (
-      <Curve
-        {...other}
-        stroke="none"
-        onMouseEnter={this.props.onMouseEnter}
-        onMouseLeave={this.props.onMouseLeave}
-        onClick={this.props.onClick}
-      />
-    );
+    return <Curve {...other} stroke="none"/>;
   }
 
   renderCurve() {
-    const { hasDot, hasCurve, baseLineType, baseLine, ...other } = this.props;
+    const { points, type } = this.props;
 
-    return (
-      <Curve
-        {...other}
-        fill="none"
-      />
-    );
+    return <Curve {...ReactUtils.getPresentationAttributes(this.props)} points={points} type={type} fill="none" />;
   }
 
   renderDots() {
-    const { points, ...other } = this.props;
+    const { dot, points } = this.props;
+    const areaProps = ReactUtils.getPresentationAttributes(this.props);
+    const customDotProps = ReactUtils.getPresentationAttributes(dot);
+    const isDotElement = React.isValidElement(dot);
 
     const dots = points.map((entry, i) => {
-      return <circle {...other} key={'dot-' + i} cx={entry.x} cy={entry.y} r={3}/>;
+      const dotProps = {
+        key: `dot-${i}`,
+        r: 3,
+        ...areaProps,
+        ...customDotProps,
+        cx: entry.x,
+        cy: entry.y,
+        index: i,
+        playload: entry,
+      };
+
+      return isDotElement ? React.cloneElement(dot, dotProps) : <Dot {...dotProps}/>;
     });
 
-    return <Layer className="recharts-layer-line-dots">{dots}</Layer>;
+    return <Layer className="recharts-layer-area-dots">{dots}</Layer>;
   }
 
   render() {
-    const { hasDot, hasCurve, points, className, ...other } = this.props;
+    const { dot, curve, points, className, ...other } = this.props;
 
@@ -101,9 +101,10 @@ if (!points || !points.length) {
     }
+    const hasSinglePoint = points.length === 1;
 
     return (
       <Layer className={`recharts-line ${className || ''}`}>
-        {hasCurve && this.renderCurve()}
-        {this.renderArea()}
+        {curve && !hasSinglePoint && this.renderCurve()}
+        {!hasSinglePoint && this.renderArea()}
 
-        {hasDot && this.renderDots()}
+        {(dot || hasSinglePoint) && this.renderDots()}
       </Layer>
@@ -110,0 +111,0 @@ );

src/chart/Bar.js

 /**
- * @fileOverview 柱图
+ * @fileOverview Render a group of bar
  */
@@ -44,3 +44,3 @@ import React, { PropTypes } from 'react';
   static defaultProps = {
-    // 数据
+    // data of bar
     data: [],
@@ -47,0 +47,0 @@ onClick() {},

src/chart/Line.js

 /**
- * @fileOverview 饼图
+ * @fileOverview Line
  */
 import React, { PropTypes } from 'react';
 import Curve from '../shape/Curve';
+import Dot from '../shape/Dot';
 import Layer from '../container/Layer';
 import pureRender from 'pure-render-decorator';
+import ReactUtils from '../util/ReactUtils';
 
@@ -21,7 +23,5 @@ @pureRender
     className: PropTypes.string,
-    // 是否展示曲线上的点
-    dot: PropTypes.bool,
-    // 是否展示填充面积
-    area: PropTypes.bool,
-    data: PropTypes.arrayOf(PropTypes.shape({
+     // whether have dot in line
+    dot: PropTypes.oneOfType([PropTypes.object, PropTypes.element, PropTypes.bool]),
+    points: PropTypes.arrayOf(PropTypes.shape({
       x: PropTypes.number,
@@ -38,5 +38,3 @@ y: PropTypes.number,
     strokeWidth: 1,
-    area: true,
-    // 数据
-    data: [],
+    points: [],
     onClick() {},
@@ -52,29 +50,46 @@ onMouseEnter() {},
   renderDots() {
-    const { data, ...other } = this.props;
+    const { dot, points } = this.props;
+    const lineProps = ReactUtils.getPresentationAttributes(this.props);
+    const customDotProps = ReactUtils.getPresentationAttributes(dot);
+    const isDotElement = React.isValidElement(dot);
 
-    const dots = data.map((entry, i) => {
-      return <circle {...other} key={'dot-' + i} cx={entry.x} cy={entry.y} r={3}/>;
+    const dots = points.map((entry, i) => {
+      const dotProps = {
+        key: `dot-${i}`,
+        r: 3,
+        ...lineProps,
+        ...customDotProps,
+        cx: entry.x,
+        cy: entry.y,
+        index: i,
+        playload: entry,
+      };
+
+      return isDotElement ? React.cloneElement(dot, dotProps) : <Dot {...dotProps}/>;
     });
 
-    return <Layer className="layer-line-dots">{dots}</Layer>;
+    return <Layer className="recharts-layer-line-dots">{dots}</Layer>;
   }
 
   render() {
-    const { dot, data, className, ...other } = this.props;
+    const { dot, points, className, ...other } = this.props;
 
-    if (!data || !data.length) {
+    if (!points || !points.length) {
       return null;
     }
+    const hasSinglePoint = points.length === 1;
 
     return (
       <Layer className={'recharts-line ' + (className || '')}>
-        <Curve
-          {...other}
-          fill="none"
-          onMouseEnter={this.props.onMouseEnter}
-          onMouseLeave={this.props.onMouseLeave}
-          onClick={this.props.onClick}
-          points={data}
-        />
-        {dot && this.renderDots()}
+        {!hasSinglePoint && (
+          <Curve
+            {...other}
+            fill="none"
+            onMouseEnter={this.props.onMouseEnter}
+            onMouseLeave={this.props.onMouseLeave}
+            onClick={this.props.onClick}
+            points={points}
+          />
+        )}
+        {(hasSinglePoint || dot) && this.renderDots()}
       </Layer>
@@ -81,0 +96,0 @@ );

src/chart/Pie.js

 /**
- * @fileOverview 饼图
+ * @fileOverview Render sectors of a pie
  */
@@ -36,15 +36,14 @@ import React, { PropTypes } from 'react';
   static defaultProps = {
-    // 极点的横坐标
+    // The abscissa of pole
     cx: 0,
-    // 极点的纵坐标
+    // The ordinate of pole
     cy: 0,
-    // 起始角度
+    // The start angle of first sector
     startAngle: 0,
-    // 内径
+    // The inner radius of sectors
     innerRadius: 0,
-    // 外径
+    // The outer radius of sectors
     outerRadius: 0,
-    // 极坐标一般取逆时针为正方向，但饼图等一般默认为顺时针
+    // The direction of drawing sectors
     clockWise: true,
-    // 数据
     data: [],
@@ -51,0 +50,0 @@ minAngle: 0,

src/chart/Radar.js

@@ -35,5 +35,3 @@ import React, { PropTypes } from 'react';
     clockWise: true,
-    // 网格分段数
     gridNumber: 2,
-    // 数据
     data: [],
@@ -46,4 +44,4 @@ };
   /**
-   * 计算网格所在的半径节点
-   * @return {Array} 半径节点
+   * Calculate the radius of grid
+   * @return {Array} The radius of grid
    */
@@ -63,3 +61,3 @@ getGridRadius() {
 
-    // 生成均匀的网格
+    // generate grid of same gap
     const step = (outerRadius - innerRadius) / gridNumber;
@@ -77,7 +75,6 @@
   }
-
   /**
-   * 获取顶点坐标
-   * @param {Object} data 单个数据
-   * @return {Object} {x: '横坐标', y: '纵坐标'}
+   * Get the coordinate of a vertex
+   * @param {Object} data The data of a point
+   * @return {Object} {x: 'abscissa', y: 'ordinate'}
    */
@@ -101,4 +98,4 @@ getVertexCoord(data) {
   /**
-   * 获取按角度的刻度
-   * @return {Array} 角度轴的刻度
+   * Get the tick of each angle
+   * @return {Array} The tick of each angle
    */
@@ -105,0 +102,0 @@ getAngleTicks() {

src/chart/RadarSecond.js

@@ -18,12 +18,13 @@ import React, { PropTypes } from 'react';
     clockWise: PropTypes.bool,
-    // 角度的scale函数
+    // The scale function of angle
     polarAngleScale: React.PropTypes.func,
-    // 径向scale函数
+    // The scale function of polar diameter
     polarRadiusScale: React.PropTypes.func,
-    // 数据，格式为 {value: someValue, name: "数据的名称"}
-    data: React.PropTypes.array,
+    data: React.PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.number,
+      name: PropTypes.any,
+    })),
   };
 
   static defaultProps = {
-    // 数据
     data: [],
@@ -36,4 +37,4 @@ };
   /**
-   * 计算雷达图中多边形的顶点坐标
-   * @return {Array} 多边形的顶点
+   * Calculate the coordinate of vertexes
+   * @return {Array} Array of coordinate
    */
@@ -40,0 +41,0 @@ getPolygonVertexs() {

src/chart/RadialBar.js

 /**
- * @fileOverview 玉玦图
+ * @fileOverview Render a group of radial bar
  */
@@ -4,0 +4,0 @@ import React, { PropTypes } from 'react';

src/chart/Scatter.js

 /**
- * @fileOverview 散点图
+ * @fileOverview Render a group of scatters
  */
@@ -36,3 +36,2 @@ import React, { PropTypes } from 'react';
   static defaultProps = {
-    // 数据
     data: [],
@@ -39,0 +38,0 @@ onClick() {},

src/chartWrapper/AreaChart.js

 import React from 'react';
 import CartesianChart from './CartesianChart';
-
+import LodashUtils from '../util/LodashUtils';
 import Surface from '../container/Surface';
@@ -10,2 +10,4 @@ import ReactUtils from '../util/ReactUtils';
 import AreaItem from './AreaItem';
+import Dot from '../shape/Dot';
+import Curve from '../shape/Curve';
 
@@ -27,7 +29,7 @@ class AreaChart extends CartesianChart {
   /**
-   * 组装曲线数据
-   * @param  {Object} xAxis   x轴刻度
-   * @param  {Object} yAxis   y轴刻度
-   * @param  {String} dataKey 该组数据所对应的key
-   * @return {Array} 组合后的数据
+   * Compose the data of each area
+   * @param  {Object} xAxis   The configuration of x-axis
+   * @param  {Object} yAxis   The configuration of y-axis
+   * @param  {String} dataKey The unique key of a group
+   * @return {Array} Composed data
    */
@@ -64,5 +66,5 @@ getComposeData(xAxis, yAxis, dataKey) {
   /**
-   * 鼠标进入曲线的响应事件
-   * @param {String} key 曲线唯一对应的key
-   * @return {Object} no return
+   * Handler of mouse entering area chart
+   * @param {String} key  The unique key of a group of data
+   * @return {Object} null
    */
@@ -75,4 +77,4 @@ handleAreaMouseEnter(key) {
   /**
-   * 鼠标离开曲线的响应事件
-   * @return {Object} no return
+   * Handler of mouse leaving area chart
+   * @return {Object} null
    */
@@ -85,8 +87,8 @@ handleAreaMouseLeave() {
   /**
-   * 绘制图形部分
-   * @param  {Array} items 线图元素
-   * @param  {Object} xAxisMap x轴刻度
-   * @param  {Object} yAxisMap y轴刻度
-   * @param  {Object} offset   图形区域的偏移量
-   * @return {ReactComponent} 图形元素
+   * Draw the main part of area chart
+   * @param  {Array} items     React elements of AreaItem
+   * @param  {Object} xAxisMap The configuration of all x-axis
+   * @param  {Object} yAxisMap The configuration of all y-axis
+   * @param  {Object} offset   The offset of main part in the svg element
+   * @return {ReactComponent} The instances of Area
    */
@@ -130,3 +132,3 @@ renderItems(items, xAxisMap, yAxisMap, offset) {
       if (hasDot && activePoint) {
-        dotItems.push(<circle key={'area-dot-' + i} cx={activePoint.x} cy={activePoint.y} r={8} {...pointStyle}/>);
+        dotItems.push(<Dot key={'area-dot-' + i} cx={activePoint.x} cy={activePoint.y} r={8} {...pointStyle}/>);
       }
@@ -156,9 +158,10 @@ });
     const start = ticks[activeTooltipIndex].coord;
+    const x1 = layout === 'horizontal' ? start : offset.left;
+    const y1 = layout === 'horizontal' ? offset.top : start;
+    const x2 = layout === 'horizontal' ? start : offset.left + offset.width;
+    const y2 = layout === 'horizontal' ? offset.top + offset.height : start;
     const cursorProps = {
       stroke: '#ccc',
       ...ReactUtils.getPresentationAttributes(tooltipItem.props.cursor),
-      x1: layout === 'horizontal' ? start : offset.left,
-      y1: layout === 'horizontal' ? offset.top : start,
-      x2: layout === 'horizontal' ? start : offset.left + offset.width,
-      y2: layout === 'horizontal' ? offset.top + offset.height: start,
+      points: [{ x: x1, y: y1 }, { x: x2, y: y2 }],
     };
@@ -168,3 +171,3 @@
           React.cloneElement(tooltipItem.props.cursor, cursorProps) :
-          <line className="recharts-cursor" {...cursorProps}/>;
+          <Curve {...cursorProps} type="linear" className="recharts-cursor"/>;
   }
@@ -171,0 +174,0 @@

src/chartWrapper/AreaItem.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class AreaItem extends React.Component {
@@ -8,9 +10,9 @@
   static propTypes = {
-    // 数据对应的单位
+    // The unit of data
     unit: PropTypes.any,
-    // 数据对应的名称
+    // The name of data
     name: PropTypes.any,
-    // 线对应的数据key
+    // The key of data which is unique in an area chart
     dataKey: PropTypes.string.isRequired,
-    // 线的类型
+    // The type of curve in area chart
     type: PropTypes.oneOf(['linear', 'monotone', 'step', 'stepBefore', 'stepAfter']),
@@ -25,3 +27,3 @@ className: PropTypes.string,
     legendType: PropTypes.string,
-    // 数据格式化函数
+    // The formatter function of data
     formatter: PropTypes.func,
@@ -28,0 +30,0 @@ };

src/chartWrapper/BarChart.js

@@ -12,9 +12,4 @@ import React from 'react';
 import Rectangle from '../shape/Rectangle';
-/**
- *  <BarChart className='my-line-cahrt'>
- *    <BarItem data={} yAxis={0}/>
- *    <BarItem data={} yAxis={1}>
- *  </BarChart>
- */
 
+
 class BarChart extends CartesianChart {
@@ -26,2 +21,4 @@
     style: {},
+    barOffset: '10%',
+    barGap: 4,
     layout: 'horizontal',
@@ -37,9 +34,9 @@ margin: { top: 5, right: 5, bottom: 5, left: 5 },
     /**
-   * 组装曲线数据
-   * @param  {Array}  barPosition 每个柱子的大小和偏移量
-   * @param  {Object} xAxis    x轴刻度
-   * @param  {Object} yAxis    y轴刻度
-   * @param  {Object} offset   图形区域的偏移量
-   * @param  {String} dataKey  该组数据所对应的key
-   * @return {Array} 组装后的数据
+   * Compose the data of each group
+   * @param  {Array}  barPosition The offset and size of each bar
+   * @param  {Object} xAxis       The configuration of x-axis
+   * @param  {Object} yAxis       The configuration of y-axis
+   * @param  {Object} offset      The offset of main part in the svg element
+   * @param  {String} dataKey     The unique key of a group
+   * @return {Array} Composed data
    */
@@ -54,3 +51,2 @@ getComposeData(barPosition, xAxis, yAxis, offset, dataKey) {
     const baseline = this.getBaseLine(xAxis, yAxis);
-
     return data.map((entry, index) => {
@@ -92,6 +88,6 @@ const value = entry[dataKey];
   /**
-   * 获取柱子的宽度以及柱子间的间距
-   * @param  {Number}   bandSize 每一个类别所占的宽度或者高度
-   * @param  {sizeList} sizeList  所有group设置的size
-   * @return {Number} 柱子的宽度以及柱子间的间距
+   * Calculate the size of each bar and the gap between two bars
+   * @param  {Number}   bandSize  The size of each category
+   * @param  {sizeList} sizeList  The size of all groups
+   * @return {Number} The size of each bar and the gap between two bars
    */
@@ -138,5 +134,5 @@ getBarPosition(bandSize, sizeList) {
   /**
-   * 计算每组柱子的大小
-   * @param  {Array} items 所有的柱图对象
-   * @return {Object} 每组柱子的大小
+   * Calculate the size of all groups
+   * @param  {Array} items All the instance of BarItem
+   * @return {Object} The size of all groups
    */
@@ -162,5 +158,5 @@ getSizeList(items) {
   /**
-   * 计算类目轴的两个区块间隔的大小
-   * @param  {Function} scale 刻度函数
-   * @return {Number} 间隔大小
+   * Calculate the size between two category
+   * @param  {Function} scale Scale function
+   * @return {Number} Size
    */
@@ -171,5 +167,5 @@ getBandSize(scale) {
   /**
-   * 鼠标进入柱子的响应事件
-   * @param {String} key 曲线唯一对应的key
-   * @return {Object} no return
+   * Handler of mouse entering bar chart
+   * @param {String} key  The unique key of a group of data
+   * @return {Object}     null
    */
@@ -182,4 +178,4 @@ handleBarMouseEnter(key) {
   /**
-   * 鼠标离开柱子的响应事件
-   * @return {Object} no return
+   * Handler of mouse leaving area chart
+   * @return {Object} null
    */
@@ -221,8 +217,8 @@ handleBarMouseLeave() {
   /**
-   * 绘制图形部分
-   * @param  {Array} items 柱图元素
-   * @param  {Object} xAxisMap x轴刻度
-   * @param  {Object} yAxisMap y轴刻度
-   * @param  {Object} offset   图形区域的偏移量
-   * @return {ReactComponent} 柱子元素
+   * Draw the main part of bar chart
+   * @param  {Array} items     All the instance of BarItem
+   * @param  {Object} xAxisMap The configuration of all x-axis
+   * @param  {Object} yAxisMap The configuration of all y-axis
+   * @param  {Object} offset   The offset of main part in the svg element
+   * @return {ReactComponent}  All the instances of Bar
    */
@@ -229,0 +225,0 @@ renderItems(items, xAxisMap, yAxisMap, offset) {

src/chartWrapper/BarItem.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class BarItem extends React.Component {
@@ -11,7 +13,7 @@
     barSize: PropTypes.number,
-    // 数据对应的单位
+    // The unit of data
     unit: PropTypes.any,
-    // 柱对应的数据key
+    // The key of data which is unique in an area chart
     dataKey: PropTypes.string.isRequired,
-    // 指标名称
+    // The name of data
     name: PropTypes.string,
@@ -29,3 +31,3 @@
     stackType: PropTypes.string,
-    // 数据格式化函数
+    // The formatter function of data
     formatter: PropTypes.func,
@@ -32,0 +34,0 @@ };

src/chartWrapper/CartesianChart.js

@@ -77,5 +77,5 @@ import React, { PropTypes } from 'react';
   /**
-   * get coordinate of cursor in chart
-   * @param  {Object} e               event object
-   * @param  {Object} containerOffset offser of chart container
+   * Calculate coordinate of cursor in chart
+   * @param  {Object} e               Event object
+   * @param  {Object} containerOffset The offset of main part in the svg element
    * @return {Object}                 {chartX, chartY}
@@ -104,6 +104,6 @@ */
   /**
-   * 根据指标名称获取 定义域
-   * @param  {String} key 数据的key值
-   * @param  {String} type 刻度类型
-   * @return {Array} 定义域
+   * Get domain of data by key
+   * @param  {String} key  The unique key of a group of data
+   * @param  {String} type The type of axis
+   * @return {Array} Domain of data
    */
@@ -114,3 +114,3 @@ getDomainByKey(key, type) {
     const domain = data.slice(dataStartIndex, dataEndIndex + 1)
-                       .map(entry => entry[key]);
+                       .map(entry => entry[key] || 0);
 
@@ -123,6 +123,6 @@ return type === 'number' ? [
   /**
-   * 根据LineItem或者Bar计算数据的定义域
-   * @param  {Array} items 线图元素或者柱图元素
-   * @param  {String} type  相应的坐标轴类型，number - 数值类型的坐标轴, category - 类目轴
-   * @return {Array}        取值范围
+   * Get domain of data by the configuration of item element
+   * @param  {Array} items  The instances of item
+   * @param  {String} type  The type of axis, number - Number Axis, category - Category Axis
+   * @return {Array}        Domain
    */
@@ -135,3 +135,3 @@ getDomainOfItems(items, type) {
     if (type === 'number') {
-      // 计算数值类型的轴的取值范围
+      // Calculate the domain of number axis
       return domain.reduce((result, entry) => {
@@ -148,3 +148,3 @@ return [
 
-    // 类目轴，计算类目轴的并集
+    // Get the union set of category axis
     domain.forEach(entry => {
@@ -163,6 +163,6 @@ for (let i = 0, len = entry.length; i < len; i++) {
   /**
-   * 计算X轴 或者 Y轴的配置
-   * @param  {String} axisType 轴的类型
-   * @param  {Array} items    图形元素
-   * @return {Object}           轴的配置
+   * Get the configuration of all x-axis or y-axis
+   * @param  {String} axisType The type of axis
+   * @param  {Array} items     The instances of item
+   * @return {Object}          Configuration
    */
@@ -173,3 +173,3 @@ getAxisMap(axisType = 'xAxis', items) {
     const axisIdKey = axisType === 'xAxis' ? 'xAxisId' : 'yAxisId';
-    // 所有定义的XAxis组件
+    // Get all the instance of Axis
     const axes = ReactUtils.findAllByType(children, Axis);
@@ -179,3 +179,2 @@
 
-    // 根据用户显性配置的轴来计算轴的配置
     if (axes && axes.length) {
@@ -190,11 +189,11 @@ axisMap = this.getAxisMapByAxes(axes, items, axisType, axisIdKey);
   /**
-   * 根据用户显性配置的轴来计算轴的配置
-   * @param {Array} axes 轴对象
-   * @param  {Array} items 线图元素或者柱图元素
-   * @param  {String} axisType 轴的类型, xAxis - x轴, yAxis - y轴
-   * @param  {String} axisIdKey 标识轴的id的key
-   * @return {Object}      刻度配置对象
+   * Get the configuration of axis by the options of axis instance
+   * @param {Array}  axes  The instance of axes
+   * @param  {Array} items The instances of item
+   * @param  {String} axisType The type of axis, xAxis - x-axis, yAxis - y-axis
+   * @param  {String} axisIdKey The unique id of an axis
+   * @return {Object}      Configuration
    */
   getAxisMapByAxes(axes, items, axisType, axisIdKey) {
-    // 需要去除重复的情况
+    // Eliminate duplicated axes
     const axisMap = axes.reduce((result, child) => {
@@ -230,8 +229,8 @@ const { type, dataKey } = child.props;
   /**
-   * 根据用户配置的图形元素来计算轴的配置，但是这种轴不会显示
-   * @param  {Array} items 线图元素或者柱图元素
-   * @param  {ReactElement} Axis 轴对象
-   * @param  {String} axisType 轴的类型, xAxis - x轴, yAxis - y轴
-   * @param  {String} axisIdKey 标识轴的id的key
-   * @return {Object}      刻度配置对象
+   * Get the configuration of axis by the options of item, this kind of axis does not display in chart
+   * @param  {Array} items       The instances of item
+   * @param  {ReactElement} Axis Axis Component
+   * @param  {String} axisType   The type of axis, xAxis - x-axis, yAxis - y-axis
+   * @param  {String} axisIdKey  The unique id of an axis
+   * @return {Object}            Configuration
    */
@@ -243,3 +242,6 @@ getAxisMapByItems(items, Axis, axisType, axisIdKey) {
 
-    // 当没有创建XAxis时，默认X轴为类目轴，根据data的序号来决定X轴绘制内容
+    // The default type of x-axis is category axis,
+    // The default contents of x-axis is the serial numbers of data
+    // The default type of y-axis is number axis
+    // The default contents of y-axis is the domain of data
     const axisMap = items.reduce((result, child) => {
@@ -273,7 +275,7 @@ const axisId = child.props[axisIdKey];
 
-    /**
-   * 计算图表中图形区域的偏移量
-   * @param  {Object} xAxisMap  x轴刻度
-   * @param  {Object} yAxisMap  y轴刻度
-   * @return {Object} 偏移量
+  /**
+   * Calculate the offset of main part in the svg element
+   * @param  {Object} xAxisMap  The configuration of x-axis
+   * @param  {Object} yAxisMap  The configuration of y-axis
+   * @return {Object} The offset of main part in the svg element
    */
@@ -314,5 +316,5 @@ getOffset(xAxisMap, yAxisMap) {
   /**
-   * 获取图形元素的主色调
-   * @param  {ReactElement} item 图形元素
-   * @return {String}       颜色
+   * Get the main color of each graphic item
+   * @param  {ReactElement} item A graphic item
+   * @return {String}            Color
    */
@@ -335,9 +337,9 @@ getMainColorOfItem(item) {
   /**
-   * 设置刻度函数的刻度值
-   * @param {Object} scale 刻度对象
-   * @param {Object} opts  配置
-   * @return {Object} 无返回
+   * Configure the scale function of axis
+   * @param {Object} scale The scale function
+   * @param {Object} opts  The configuration of axis
+   * @return {Object}      null
    */
   setTicksOfScale(scale, opts) {
-    // 优先使用用户配置的刻度
+    // Give priority to use the options of ticks
     if (opts.ticks && opts.ticks) {
@@ -349,3 +351,3 @@ scale.domain(this.getDomainOfTicks(opts.ticks, opts.type))
     }
-    // 数值类型的刻度，指定了刻度的个数后，根据范围动态计算
+    // Calculate the ticks by the number of grid when the axis is a number axis
     if (opts.tickCount && opts.type === 'number' && !opts.hide) {
@@ -363,7 +365,7 @@ const domain = scale.domain();
   /**
-   * 计算轴的刻度函数，位置，大小等信息
-   * @param  {Object} axisMap  刻度对象
-   * @param  {Object} offset   图形区域的偏移量
-   * @param  {Object} axisType 刻度类型，x轴或者y轴
-   * @return {Object} 格式化后的刻度对象
+   * Calculate the scale function, position, width, height of axes
+   * @param  {Object} axisMap  The configuration of axes
+   * @param  {Object} offset   The offset of main part in the svg element
+   * @param  {Object} axisType The type of axes, x-axis or y-axis
+   * @return {Object} Configuration
    */
@@ -393,3 +395,3 @@ getFormatAxisMap(axisMap, offset, axisType) {
       let scale;
-      // 数值类型的刻度使用 linear刻度，类目轴使用 ordinal刻度
+
       if (type === 'number') {
@@ -433,5 +435,6 @@ scale = D3Scale.linear().domain(domain).range(range);
   /**
-   * 计算x轴，y轴的刻度
-   * @param  {Object}  axis 刻度对象
-   * @return {Array} 轴的刻度
+   * Get the ticks of an axis
+   * @param  {Object}  axis The configuration of an axis
+   * @param {Boolean} isGrid Whether or not are the ticks in grid
+   * @return {Array}  Ticks
    */
@@ -460,7 +463,7 @@ getAxisTicks(axis, isGrid = false) {
   /**
-   * 计算网格的刻度
-   * @param  {Array} ticks 刻度对象
-   * @param {Number} min 最小值
-   * @param {Number} max 最大值
-   * @return {Array} 网格的刻度
+   * Calculate the ticks of grid
+   * @param  {Array} ticks The ticks in axis
+   * @param {Number} min   The minimun value of axis
+   * @param {Number} max   The maximun value of axis
+   * @return {Array}       Ticks
    */
@@ -486,8 +489,8 @@ getGridTicks(ticks, min, max) {
   /**
-   * 判断鼠标是否在图表的图形区域
-   * @param  {Object}  xAxisMap x轴刻度
-   * @param  {Object}  yAxisMap y轴刻度
-   * @param  {Object}  offset 图形元素的偏移量
-   * @param  {Object}  e      事件对象
-   * @return {Object} 格式化后的鼠标数据
+   * Get the information of mouse in chart, return null when the mouse is not in the chart
+   * @param  {Object}  xAxisMap The configuration of all x-axes
+   * @param  {Object}  yAxisMap The configuration of all y-axes
+   * @param  {Object}  offset   The offset of main part in the svg element
+   * @param  {Object}  e        The event object
+   * @return {Object}           Mouse data
    */
@@ -506,11 +509,15 @@ getMouseInfo(xAxisMap, yAxisMap, offset, e) {
     const ticks = this.getAxisTicks(axis, true);
+
     let index = 0;
+    const len = ticks.length;
 
-    for (let i = 0, len = ticks.length; i < len; i++) {
-      if ((i === 0 && pos <= (ticks[i].coord + ticks[i + 1].coord) / 2)
-        || (i > 0 && i < len - 1 && pos > (ticks[i].coord + ticks[i - 1].coord) / 2
-          && pos <= (ticks[i].coord + ticks[i + 1].coord) / 2)
-        || (i === len - 1 && pos > (ticks[i].coord + ticks[i - 1].coord) / 2)) {
-        index = i;
-        break;
+    if (len > 1) {
+      for (let i = 0; i < len; i++) {
+        if ((i === 0 && pos <= (ticks[i].coord + ticks[i + 1].coord) / 2)
+          || (i > 0 && i < len - 1 && pos > (ticks[i].coord + ticks[i - 1].coord) / 2
+            && pos <= (ticks[i].coord + ticks[i + 1].coord) / 2)
+          || (i === len - 1 && pos > (ticks[i].coord + ticks[i - 1].coord) / 2)) {
+          index = i;
+          break;
+        }
       }
@@ -529,5 +536,5 @@ }
   /**
-   * 更具图形元素计算tooltip的显示内容
-   * @param  {Array} items 线图元素或者柱图元素
-   * @return {Array} 浮窗现实的内容
+   * Get the content to be displayed in the tooltip
+   * @param  {Array} items The instances of item
+   * @return {Array}       The content of tooltip
    */
@@ -567,8 +574,8 @@ getTooltipContent(items) {
   /**
-   * 鼠标进入图形区域
-   * @param  {Object} offset   图形区域距离容器的偏移量
-   * @param  {Object} xAxisMap x轴刻度
-   * @param  {Object} yAxisMap y轴刻度
-   * @param  {Object} e        事件对象
-   * @return {Null} no return
+   * The handler of mouse entering chart
+   * @param  {Object} offset   The offset of main part in the svg element
+   * @param  {Object} xAxisMap The configuration of all x-axes
+   * @param  {Object} yAxisMap The configuration of all y-axes
+   * @param  {Object} e        Event object
+   * @return {Null}            null
    */
@@ -591,4 +598,4 @@ handleMouseEnter(offset, xAxisMap, yAxisMap, e) {
   /**
-   * 鼠标在图形区域移动
-   * @param  {Object} offset   图形区域距离容器的偏移量
+   * The handler of mouse moving in chart
+   * @param  {Object} offset   The offset of main part in the svg element
    * @param  {Object} xAxisMap x轴刻度
@@ -701,3 +708,3 @@ * @param  {Object} yAxisMap y轴刻度
    * @param  {Object} yAxisMap y轴刻度
-   * @param  {Object} offset   图形区域的偏移量
+   * @param  {Object} offset   The offset of main part in the svg element
    * @return {ReactElement} 网格
@@ -740,3 +747,3 @@ */
    * @param  {Array} items 线图元素或者柱图元素
-   * @param  {Object} offset 图形区域的偏移量
+   * @param  {Object} offset           The offset of main part in the svg element
    * @param  {ReactElement} legendItem 图例元素
@@ -764,3 +771,3 @@ * @return {ReactElement} 图例
    * @param  {Array} items 线图元素或者柱图元素
-   * @param  {Object} offset 图形区域的偏移量
+   * @param  {Object} offset The offset of main part in the svg element
    * @return {ReactElement} 浮层元素
@@ -767,0 +774,0 @@ */

src/chartWrapper/LineChart.js

@@ -92,3 +92,3 @@ import React from 'react';
           onMouseEnter={this.handleLineMouseEnter.bind(this, dataKey)}
-          data={this.getComposeData(xAxisMap[xAxisId], yAxisMap[yAxisId], dataKey)}
+          points={this.getComposeData(xAxisMap[xAxisId], yAxisMap[yAxisId], dataKey)}
         />
@@ -95,0 +95,0 @@ );

src/chartWrapper/LineItem.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class LineItem extends React.Component {
@@ -4,0 +6,0 @@

src/chartWrapper/PieItem.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class PieItem extends React.Component {
@@ -4,0 +6,0 @@

src/chartWrapper/RadialBarItem.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class RadialBarItem extends React.Component {
@@ -4,0 +6,0 @@

src/chartWrapper/ScatterItem.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class ScatterItem extends React.Component {
@@ -4,0 +6,0 @@

src/chartWrapper/TreemapChart.js

@@ -154,4 +154,4 @@ import React, { PropTypes } from 'react';
 
-  renderDefaultNode({node}) {
-    return React.createElement(Rectangle, {...ReactUtils.getPresentationAttributes(this.props), ...node});
+  renderDefaultNode({ node }) {
+    return React.createElement(Rectangle, { ...ReactUtils.getPresentationAttributes(this.props), ...node });
   }
@@ -178,3 +178,3 @@
             React.cloneElement(customContent, { node: v, index: i }) :
-            this.renderDefaultNode({node: v, index: i})
+            this.renderDefaultNode({ node: v, index: i })
           }
@@ -181,0 +181,0 @@ </Layer>

src/chartWrapper/XAxis.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class XAxis extends React.Component {
@@ -4,0 +6,0 @@

src/chartWrapper/YAxis.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class YAxis extends React.Component {
@@ -4,0 +6,0 @@

src/chartWrapper/ZAxis.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class ZAxis extends React.Component {
@@ -4,0 +6,0 @@

src/component/Brush.js

@@ -51,2 +51,3 @@ import React, { PropTypes } from 'react';
       this.state = {
+        isTextActive: false,
         isSlideMoving: false,
@@ -63,2 +64,9 @@ isBrushMoving: false,
 
+  componentWillUnmount() {
+    if (this._leaveTimer) {
+      clearTimeout(this._leaveTimer);
+      this._leaveTimer = null;
+    }
+  }
+
   getIndexInRange(range, x) {
@@ -95,2 +103,7 @@ const len = range.length;
   handleMove(e) {
+    if (this._leaveTimer) {
+      clearTimeout(this._leaveTimer);
+      this._leaveTimer = null;
+    }
+
     if (this.state.isBrushMoving) {
@@ -110,2 +123,20 @@ this.handleBrushMove(e);
 
+  handleLeaveWrapper() {
+    if (this.state.isBrushMoving || this.state.isSlideMoving) {
+      this._leaveTimer = setTimeout(::this.handleUp, 1000);
+    }
+  }
+
+  handleEnterSlideOrBrush() {
+    this.setState({
+      isTextActive: true
+    });
+  }
+
+  handleLeaveSlideOrBrush() {
+    this.setState({
+      isTextActive: false
+    });
+  }
+
   handleSlideDown(e) {
@@ -206,2 +237,4 @@ this.setState({
         className="layer-brush"
+        onMouseEnter={::this.handleEnterSlideOrBrush}
+        onMouseLeave={::this.handleLeaveSlideOrBrush}
         onMouseDown={this.handleBrushDown.bind(this, id)}
@@ -229,2 +262,4 @@ style={{ cursor: 'col-resize' }}
       <rect
+        onMouseEnter={::this.handleEnterSlideOrBrush}
+        onMouseLeave={::this.handleLeaveSlideOrBrush}
         onMouseDown={::this.handleSlideDown}
@@ -265,3 +300,3 @@ style={{ cursor: 'move' }}
     const { x, width, burshWidth, data, className } = this.props;
-    const { startX, endX } = this.state;
+    const { startX, endX, isTextActive, isSlideMoving, isBrushMoving } = this.state;
 
@@ -273,4 +308,4 @@ if (!data || !data.length) {return null;}
         onMouseUp={::this.handleUp}
-        onMouseLeave={::this.handleUp}
         onMouseMove={::this.handleMove}
+        onMouseLeave={::this.handleLeaveWrapper}
       >
@@ -281,3 +316,3 @@ {this.renderBackground()}
         {this.renderBrush(endX, 'endX')}
-        {this.renderText()}
+        {(isTextActive || isSlideMoving || isBrushMoving) && this.renderText()}
       </Layer>
@@ -284,0 +319,0 @@ );

src/component/PolarAngleAxis.js

@@ -8,2 +8,3 @@ /**
 import createFragment from 'react-addons-create-fragment';
+import pureRender from 'pure-render-decorator';
 
@@ -15,2 +16,3 @@ const PropTypes = React.PropTypes;
 
+@pureRender
 class PolarAngleAxis extends React.Component {
@@ -17,0 +19,0 @@

src/container/Layer.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class Layer extends React.Component {
@@ -4,0 +6,0 @@

src/container/Surface.js

 import React, { PropTypes } from 'react';
+import pureRender from 'pure-render-decorator';
 
+@pureRender
 class Surface extends React.Component {
@@ -4,0 +6,0 @@

src/index.js

@@ -0,1 +1,2 @@
+import 'ima.js-babel6-polyfill';
 import Surface from './container/Surface';
@@ -2,0 +3,0 @@

src/shape/Curve.js

@@ -42,5 +42,3 @@ import React, { PropTypes } from 'react';
   };
-  constructor(props) {
-    super(props);
-  }
+
   /**
@@ -59,2 +57,4 @@ * 获取曲线路径
 
+    if (!curvePath) { return ''; }
+
     if (baseLineType === 'horizontal' && baseLine === +baseLine) {
@@ -61,0 +61,0 @@ curvePath += `L${points[len - 1].x} ${baseLine}L${points[0].x} ${baseLine}Z`;

src/shape/Rectangle.js

@@ -50,6 +50,2 @@ import React, { PropTypes } from 'react';
 
-  constructor(props) {
-    super(props);
-  }
-
   getPath(x, y, width, height, radius) {
@@ -108,2 +104,6 @@ const maxRadius = Math.min(width / 2, height / 2);
 
+    if (x !== +x || y !== +y || width !== +width || height !== +height) {
+      return null;
+    }
+
     return (
@@ -110,0 +110,0 @@ <path

src/util/DOMUtils.js

@@ -48,3 +48,3 @@ const offset = (el) => {
   return value;
-}
+};
 const camelToMiddleLine = (text) => {
@@ -62,3 +62,3 @@ const strs = text.split('');
   return formatStrs.join('');
-}
+};
 
@@ -74,3 +74,3 @@ const getStyleString = (style) => {
   return result;
-}
+};
 
@@ -108,3 +108,3 @@ const getStringSize = (text, style = {}) => {
   return result;
-}
+};
 
@@ -111,0 +111,0 @@ export default {

src/util/LodashUtils.js

@@ -7,15 +7,7 @@ const numberClass = '[object Number]';
 
-/**
-* 判断是否是数组
-* @param {Any} value 待判断的值
-* @return {Boolean} 是否为数组
-*/
+
 const isArray = Array.isArray || (value => {
   return Object.prototype.toString.call(value) === arrayClass;
 });
-/**
- * 判断是否是字符串
- * @param {Any} value 待判断的值
- * @return {Boolean} 是否为字符串
- */
+
 const isString = (value) => {
@@ -25,32 +17,15 @@ return typeof value === 'string' ||
 };
-/**
- * 判断是否是数值类型
- * @param {Any} value 待判断的值
- * @return {Boolean} 是否为数值类型
- */
+
 const isNumber = (value) => {
-  return typeof value === 'number' ||
-          value && typeof value === 'object' && Object.prototype.toString.call(value) === numberClass || false;
+  return value === +value;
 };
-/**
- * 判断是否是函数
- * @param {Any} value 待判断的值
- * @return {Boolean} 是否为函数
- */
+
 const isFunction = (value) => {
   return typeof value === 'function';
 };
-/**
- * 获取一个惟一的id
- * @param {String} prefix 前缀
- * @return {String} id
- */
+
 const getUniqueId = (prefix) => {
   return (prefix || '_') + (idStart++);
 };
-/**
- * 获取数值类型的数组的范围
- * @param  {Array} ary 数组
- * @return {Object}     {min, max}
- */
+
 const extent = (ary) => {
@@ -68,6 +43,6 @@ return ary.reduce((result, entry) => {
 /**
- * 生成从from到to（不包含to）的一个数组
- * @param  {Number} from 开始值
- * @param  {Number} to   结束值
- * @return {Array}      数组
+ * Generate a array of number which is greater than or equal to from and sma than less than to
+ * @param  {Number} from Start value
+ * @param  {Number} to   End value
+ * @return {Array}       An array
  */
@@ -87,6 +62,6 @@ const range = (from, to) => {
 /**
- * 获取百分比宽度
- * @param {Number|String} percent 百分比
- * @param {Number} totalValue 100%所对应的值
- * @return {Number} 具体的数值
+ * Get percent value of a total value
+ * @param {Number|String} percent A percent
+ * @param {Number} totalValue     Total value
+ * @return {Number} value
  */
@@ -111,5 +86,5 @@ const getPercentValue = (percent, totalValue) => {
 /**
- * 获取一个对象的所有元素
- * @param  {Object} obj 输入对象
- * @return {Array}     所有的元素集合
+ * Get all values of an object
+ * @param  {Object} obj An object
+ * @return {Array}      Array
  */
@@ -143,6 +118,6 @@ const getElementOfObject = (obj) => {
 /**
- * 转化成特定的位数
- * @param  {Object} num    数值
- * @param  {Object} fixed  固定的位数
- * @return {String}        转化后的值
+ * Covert number to a string which has a fixed number of bits
+ * @param  {Object} num    A number
+ * @param  {Object} fixed  A number of bits
+ * @return {String}        result
  */
@@ -164,3 +139,2 @@ const toFixed = (num, fixed = 0) => {
     const fDec = parseFloat('0.' + dec);
-      // 对数据做舍零处理
     const fixedDec = Math.floor(fDec * Math.pow(10, fixed)) + '';
@@ -178,4 +152,2 @@ const len = fixedDec.length;
     } else {
-      // res = fDec >= 0.5 ? (pint + 1) : pint;
-      // 不做 round，全部舍去
       res = pint;
@@ -194,7 +166,7 @@ }
 /**
- * 转化为百分比
- * @param  {Number} num  小数
- * @param  {String} unit 单位
- * @param  {Number} max  最大的百分比
- * @return {String}      百分比
+ * convert a number to percentage
+ * @param  {Number} num  A float number
+ * @param  {String} unit The unit of percentage
+ * @param  {Number} max  The maximum value of percentage
+ * @return {String}      percentage
  */
@@ -201,0 +173,0 @@ const toPercentage = (num, unit = '%', max = 99999) => {

src/util/ReactUtils.js

@@ -21,3 +21,3 @@ import React, { PropTypes } from 'react';
   'fillOpacity': PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  'fillRule': PropTypes.oneOf([ 'nonzero', 'evenodd', 'inherit']),
+  'fillRule': PropTypes.oneOf(['nonzero', 'evenodd', 'inherit']),
   'filter': PropTypes.string,
@@ -32,3 +32,3 @@ 'floodColor': PropTypes.string,
   'fontStyle': PropTypes.oneOf(['normal', 'italic', 'oblique', 'inherit']),
-  'fontVariant': PropTypes.oneOf(['normal','small-caps', 'inherit']),
+  'fontVariant': PropTypes.oneOf(['normal', 'small-caps', 'inherit']),
   'fontWeight': PropTypes.oneOf(['normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900, 'inherit']),
@@ -35,0 +35,0 @@ 'glyphOrientationHorizontal': PropTypes.string,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

458714

increased by0.95%

Number of package files

146

increased by1.39%

Lines of code

11049

increased by0.65%

Worsened metrics

Dev dependency count

26

increased by4%

No dependency changes