添加coord测试文件

.eslintrc

@@ -41,6 +41,7 @@
     "no-lonely-if" : "off",
     "class-methods-use-this" : "off",
     "no-restricted-syntax" : "off",
-    "no-param-reassign" : "off"
+    "no-param-reassign" : "off",
+    "linebreak-style" : "off"
   }
-}
+}

package.json

@@ -31,7 +31,7 @@
     "build-umd": "cross-env NODE_ENV=development webpack src/index.jsx build/BizCharts.js",
     "build-min": "cross-env NODE_ENV=production webpack src/index.jsx build/BizCharts.min.js",
     "demo": "webpack-dev-server --progress --port 3510 --content-base demo --inline --config demo/webpack.config.js",
-    "testDemo": "webpack-dev-server --progress --port 4000 --content-base testDemo --inline --config testDemo/webpack.config.js",    
+    "testDemo": "webpack-dev-server --progress --port 9000 --content-base testDemo --inline --config testDemo/webpack.config.js",    
     "test": "cross-env NODE_ENV=test karma start test/karma.conf.js",
     "lint": "eslint src",
     "autofix": "eslint src --fix",

testDemo/component/coord/adddelete.js

@@ -0,0 +1,61 @@
+import React,  { Component } from 'react';
+import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
+import DataSet from '@antv/data-set';
+
+const { DataView } = DataSet;
+const { Text, Html, Arc, Line } = Guide;
+const data1 = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+  { year: '1959 年', sales: 38 },
+  { year: '1960 年', sales: 38 },
+  { year: '1962 年', sales: 38 },
+];
+const data2 = [
+  { year: '1951 年', sales: 28 },
+  { year: '1952 年', sales: 62 },
+  { year: '1956 年', sales: 31 },
+  { year: '1957 年', sales: 105 },
+  { year: '1958 年', sales: 148 },
+  { year: '1959 年', sales: 8 },
+  { year: '1960 年', sales: 38 },
+  { year: '1962 年', sales: 98 },
+];
+const cols = {
+  'sales': {tickInterval: 20},
+};
+const type = ['rect','helix','polar','theta']
+export default class Basic extends Component {
+  constructor() {
+    super();
+    this.state = {
+        data: data1,
+        type: 'rect'
+    }
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({
+        data: this.state.data == data1 ? data2 : data1,
+        type: type[Math.floor(Math.random()*5)]
+      });
+    }, 1000);
+  }
+  render() {
+    return (
+      <Chart height={400} data={this.state.data} scale={cols} forceFit>
+      <Coord
+      type={this.state.type}
+      />
+      <Axis name="year" />
+      <Axis name="value" />
+      <Tooltip crosshairs={{type : "y"}}/>
+      <Geom type="interval" position="year*sales" />
+    </Chart>
+    );
+  }
+}

testDemo/component/coord/index.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import AddDelete from './adddelete';
+import UpdatePolar from './updatePolar';
+import UpdateHelix from './updateHelix';
+import UpdateRect from './updateRect';
+import UpdateTheta from './updateTheta';
+
+
+export default class Guide extends Component {
+  render() {
+    return (
+      <div>
+        <AddDelete />
+        <UpdateHelix />
+        <UpdatePolar />
+        <UpdateRect />
+        <UpdateTheta />
+      </div>
+    );
+  }
+}

testDemo/component/coord/updateHelix.js

@@ -0,0 +1,67 @@
+import React,  { Component } from 'react';
+import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
+import DataSet from '@antv/data-set';
+
+const { DataView } = DataSet;
+const { Text, Html, Arc, Line } = Guide;
+const data = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+  { year: '1959 年', sales: 38 },
+  { year: '1960 年', sales: 38 },
+  { year: '1962 年', sales: 38 },
+];
+const cols = {
+  'sales': {tickInterval: 20},
+};
+export default class Basic extends Component {
+  constructor() {
+    super();
+    this.state = {
+      rotate: Math.random() * 360,
+      scale: [Math.random() *0.5+0.5,Math.random() *0.5+0.5],
+      reflect:'x',
+      innerRadius: Math.random(),
+      radius: Math.random(),
+      startAngle:Math.random()-1 * Math.PI,
+      endAngle:Math.random() * Math.PI
+    }
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({
+        rotate: Math.random() * 360,
+        scale: [Math.random() *0.5+0.5,Math.random() *0.5+0.5],
+        reflect:this.state.reflect='x'? 'y':'x',
+        innerRadius: Math.random(),
+        radius: Math.random(),
+        startAngle:Math.random()-1 * Math.PI,
+        endAngle:Math.random() * Math.PI
+      });
+    }, 1000);
+  }
+  render() {
+    return (
+      <Chart height={400} data={data} scale={cols} forceFit>
+      <Coord 
+      type="helix"
+      rotate={this.state.rotate}
+      scale ={this.state.scale}
+      reflect={this.state.reflect}
+      startAngle={this.state.startAngle}
+      endAngle={this.state.endAngle}
+      innerRadius={this.state.innerRadius}
+      radius={this.state.radius} 
+      />
+      <Axis name="year" />
+      <Axis name="value" />
+      <Tooltip crosshairs={{type : "y"}}/>
+      <Geom type="interval" position="year*sales" />
+    </Chart>
+    );
+  }
+}

testDemo/component/coord/updatePolar.js

@@ -0,0 +1,67 @@
+import React,  { Component } from 'react';
+import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
+import DataSet from '@antv/data-set';
+
+const { DataView } = DataSet;
+const { Text, Html, Arc, Line } = Guide;
+const data = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+  { year: '1959 年', sales: 38 },
+  { year: '1960 年', sales: 38 },
+  { year: '1962 年', sales: 38 },
+];
+const cols = {
+  'sales': {tickInterval: 20},
+};
+export default class Basic extends Component {
+  constructor() {
+    super();
+    this.state = {
+      rotate: Math.random() * 360,
+      scale: [Math.random() *0.5+0.5,Math.random() *0.5+0.5],
+      reflect:'x',
+      innerRadius: Math.random(),
+      radius: Math.random(),
+      startAngle:Math.random()-1 * Math.PI,
+      endAngle:Math.random() * Math.PI
+    }
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({
+        rotate: Math.random() * 360,
+        scale: [Math.random() *0.5+0.5,Math.random() *0.5+0.5],
+        reflect:this.state.reflect='x'? 'y':'x',
+        innerRadius: Math.random(),
+        radius: Math.random(),
+        startAngle:Math.random()-1 * Math.PI,
+        endAngle:Math.random() * Math.PI
+      });
+    }, 1000);
+  }
+  render() {
+    return (
+      <Chart height={400} data={data} scale={cols} forceFit>
+      <Coord 
+      type="polar"
+      rotate={this.state.rotate}
+      scale ={this.state.scale}
+      reflect={this.state.reflect}
+      startAngle={this.state.startAngle}
+      endAngle={this.state.endAngle}
+      innerRadius={this.state.innerRadius}
+      radius={this.state.radius} 
+      />
+      <Axis name="year" />
+      <Axis name="value" />
+      <Tooltip crosshairs={{type : "y"}}/>
+      <Geom type="interval" position="year*sales" />
+    </Chart>
+    );
+  }
+}

testDemo/component/coord/updateRect.js

@@ -0,0 +1,63 @@
+import React,  { Component } from 'react';
+import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
+import DataSet from '@antv/data-set';
+
+const { DataView } = DataSet;
+const { Text, Html, Arc, Line } = Guide;
+const data = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+  { year: '1959 年', sales: 38 },
+  { year: '1960 年', sales: 38 },
+  { year: '1962 年', sales: 38 },
+];
+const cols = {
+  'sales': {tickInterval: 20},
+};
+export default class Basic extends Component {
+  constructor() {
+    super();
+    this.state = {
+      rotate: Math.random() * 360,
+      scale: [Math.random() *0.5+0.5,Math.random() *0.5+0.5],
+      reflect:'x',
+      innerRadius: Math.random(),
+      radius: Math.random(),
+      startAngle:Math.random()-1 * Math.PI,
+      endAngle:Math.random() * Math.PI
+    }
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({
+        rotate: Math.random() * 360,
+        scale: [Math.random() *0.5+0.5,Math.random() *0.5+0.5],
+        reflect:this.state.reflect='x'? 'y':'x',
+        innerRadius: Math.random(),
+        radius: Math.random(),
+        startAngle:Math.random()-1 * Math.PI,
+        endAngle:Math.random() * Math.PI
+      });
+    }, 1000);
+  }
+  render() {
+    return (
+      <Chart height={400} data={data} scale={cols} forceFit>
+      <Coord 
+      type="rect"
+      rotate={this.state.rotate}
+      scale ={this.state.scale}
+      reflect={this.state.reflect}
+      />
+      <Axis name="year" />
+      <Axis name="value" />
+      <Tooltip crosshairs={{type : "y"}}/>
+      <Geom type="interval" position="year*sales" />
+    </Chart>
+    );
+  }
+}

testDemo/component/coord/updateTheta.js

@@ -0,0 +1,67 @@
+import React,  { Component } from 'react';
+import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
+import DataSet from '@antv/data-set';
+
+const { DataView } = DataSet;
+const { Text, Html, Arc, Line } = Guide;
+const data = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+  { year: '1959 年', sales: 38 },
+  { year: '1960 年', sales: 38 },
+  { year: '1962 年', sales: 38 },
+];
+const cols = {
+  'sales': {tickInterval: 20},
+};
+export default class Basic extends Component {
+  constructor() {
+    super();
+    this.state = {
+      rotate: Math.random() * 360,
+      scale: [Math.random() *0.5+0.5,Math.random() *0.5+0.5],
+      reflect:'x',
+      innerRadius: Math.random(),
+      radius: Math.random(),
+      startAngle:Math.random()-1 * Math.PI,
+      endAngle:Math.random() * Math.PI
+    }
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({
+        rotate: Math.random() * 360,
+        scale: [Math.random() *0.5+0.5,Math.random() *0.5+0.5],
+        reflect:this.state.reflect='x'? 'y':'x',
+        innerRadius: Math.random(),
+        radius: Math.random(),
+        startAngle:Math.random()-1 * Math.PI,
+        endAngle:Math.random() * Math.PI
+      });
+    }, 1000);
+  }
+  render() {
+    return (
+      <Chart height={400} data={data} scale={cols} forceFit>
+      <Coord 
+      type="theta"
+      rotate={this.state.rotate}
+      scale ={this.state.scale}
+      reflect={this.state.reflect}
+      startAngle={this.state.startAngle}
+      endAngle={this.state.endAngle}
+      innerRadius={this.state.innerRadius}
+      radius={this.state.radius} 
+      />
+      <Axis name="year" />
+      <Axis name="value" />
+      <Tooltip crosshairs={{type : "y"}}/>
+      <Geom type="interval" position="year*sales" />
+    </Chart>
+    );
+  }
+}

testDemo/component/index.js

@@ -1,7 +1,9 @@
 import Guide from './guide';
+import Coord from './coord';
 
 export default {
   Demos: {
     Guide,
+    Coord
   },
 };