init files

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": [
+      "transform-object-assign"
+  ]
+}

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[makefile]
+indent_style = tab
+indent_size = 4

.eslintignore

@@ -0,0 +1,6 @@
+build/
+demo/
+doc/
+es6/
+node_modules/
+lib/

.eslintrc

@@ -0,0 +1,46 @@
+{
+  "extends": "eslint-config-airbnb",
+  "parser": "babel-eslint",
+  "globals": {
+    "it": true,
+    "describe": true,
+    "require": true,
+    "process": true,
+    "before": true,
+    "after" : true,
+    "sinon": true,
+    "expect" : true,
+    "beforeEach": true,
+    "afterEach": true
+  },
+  "env":{
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    // 低版本 nodejs 需要在 strict 模式下支持 es6 语法
+    "strict": "off",
+    // 经常需要打印东西
+    "no-console" : "off",
+    // 不希望参数使用解构,低版本 nodejs 不支持
+    "prefer-spread" : "off",
+    // 会有很多地方需要直接使用 arguments
+    "prefer-rest-params": "off",
+    // 有动态引入的需求
+    "import/no-dynamic-require": "off",
+    // 有些函数对外需要暴露 generator 类型函数,但里面确实只有同步代码
+    "require-yield": "off",
+    // 一些正则表达式需要用到
+    "no-useless-escape": "off",
+    // 感觉这样写简洁一些
+    "no-mixed-operators" : "warn",
+    "no-lonely-if" : "off",
+    "class-methods-use-this" : "off",
+    "no-restricted-syntax" : "off",
+    "no-param-reassign" : "off"
+  }
+}

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+*.log
+node_modules
+umd
+lib
+es6
+coverage
+npm-debug.log
+*.orig
+.vscode/*

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -0,0 +1,96 @@
+# BizCharts
+
+BizCharts 是基于 [G2](https://antv.alipay.com/) 的 React 图表库，历经阿里两年打磨，覆盖数十个产品，于 11.21 开源，并同步升级到 G2 3.0 版本。
+
+## [BizCharts 官网](https://alibaba.github.io/BizCharts/)
+
+## 使用示例
+```jsx
+<Chart height={400} data={data} forceFit>
+  <Axis name="month" />
+  <Axis name="temperature" label={{formatter: val => `${val}°C`}} />
+  <Tooltip crosshairs={{type : "y"}} />
+  <Geom type="line" position="month*temperature" size={2} color={'city'} />
+  <Geom type='point' position="month*temperature" size={4} color={'city'} />
+</Chart>
+```
+
+<img width="600" src="https://img.alicdn.com/tfs/TB1PMfgdZrI8KJjy0FhXXbfnpXa-1408-811.png" />
+
+## 使用
+
+### npm
+```sh
+$ npm install @alibaba/BizCharts
+```
+
+### umd
+```html
+ <script src="https://unpkg.com/alibaba/BizCharts/umd/BizCharts.min.js"></script>
+```
+
+### dev build
+```sh
+$ git clone https://github.com/alibaba／BizCharts/BizCharts.git
+$ cd BizCharts
+$ npm install
+$ npm run build
+```
+
+### dev demo
+
+```sh
+$ sudo vi /etc/hosts
+//加入 127.0.0.1 localhost
+$ npm run[-script] demo
+```
+
+## 文档
+### 教程
+- [快速入门](doc/tutorial/start.md)
+- [图表介绍](./doc/tutorial/chart.md)
+- [图表类型](./doc/tutorial/chartType.md)
+- [数据](./doc/tutorial/data.md)
+- [DataSet](./doc/tutorial/dataset.md)
+- [dataflow](./doc/tutorial/dataflow.md)
+- [主题](./doc/tutorial/theme.md)
+- [交互](./doc/tutorial/interaction.md)
+- [动画](./doc/tutorial/animate.md)
+
+### api 文档
+- [BizCharts](./doc/api/bizcharts.md)
+- 组件
+  - [Chart](./doc/api/chart.md)
+  - [Coord](./doc/api/coord.md)
+  - [Axis](./doc/api/axis.md)
+  - [Geom](./doc/api/geom.md)
+  - [Label](./doc/api/label.md)
+  - [Legend](./doc/api/legend.md)
+  - [Tooltip](./doc/api/tooltip.md)
+  - [Guide](./doc/api/guide.md)
+  - [Facet](./doc/api/facet.md)
+  - [View](./doc/api/view.md)
+- 其他
+  - [scale](./doc/api/scale.md)
+  - [shape](./doc/api/shape.md)
+  - [dataset](./doc/api/dataset.md)
+  - [connector](./doc/api/connector.md)
+  - [transform](./doc/api/transform.md)
+  - [theme](./doc/api/theme.md)
+
+### 常见问题
+- [有问题怎么办](./doc/faq/faq.md#ques)
+- [坐标轴空间不够](./doc/faq/faq.md#axisSpace)
+- [坐标轴label自定义](./doc/faq/faq.md#customLabel)
+- [tooltip显示](./doc/faq/faq.md#tooltipShow)
+- [tooltip自定义](./doc/faq/faq.md#customTooltip)
+
+
+## [demo](https://alibaba.github.io/BizCharts/demo.html)
+
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2017 BizCharts Group

demo/.babelrc

@@ -0,0 +1,10 @@
+{
+  plugins: [
+    "transform-export-extensions",
+    "transform-decorators-legacy",
+    "transform-class-properties",
+    "transform-object-rest-spread",
+    "transform-function-bind",
+  ],
+  presets: ["es2015", "react"]
+}

demo/component/area/basic.js

@@ -0,0 +1,36 @@
+import React,  { Component } from 'react';
+import BizCharts from 'bizcharts';
+
+const { Chart, Axis, Geom, Tooltip } = BizCharts;
+
+const data = [
+  { year: "1991", value: 3 },
+  { year: "1992", value: 4 },
+  { year: "1993", value: 3.5 },
+  { year: "1994", value: 5 },
+  { year: "1995", value: 4.9 },
+  { year: "1996", value: 6 },
+  { year: "1997", value: 7 },
+  { year: "1998", value: 9 },
+  { year: "1999", value: 13 }
+];
+
+const scale = {
+  'value': { min: 0 },
+  'year': {range: [ 0 , 1] }
+};
+
+export default class Area extends Component {
+
+  render() {
+    return (
+      <Chart height={400} data={data} scale={scale} forceFit>
+        <Axis name="year" />
+        <Axis name="value" />
+        <Tooltip crosshairs={{type : "y"}}/>
+        <Geom type="area" position="year*value" size={2} />
+        <Geom type='point' position="year*value" size={4} shape={'circle'} style={{ stroke: '#fff', lineWidth: 1}} />
+      </Chart>
+    );
+  }
+}

demo/component/area/index.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import Basic from './basic';
+import Percent from './percent';
+import Stacked from './stacked';
+
+
+export default class AreaChart extends Component {
+  render() {
+    return (
+      <div className='Area-charts'>
+        <div className='Area-chart-basic'>
+          <Basic />
+        </div>
+        <div className='Area-chart-Percent'>
+          <Percent />
+        </div>
+        <div className='Area-chart-Stacked'>
+          <Stacked />
+        </div>
+      </div>
+    );
+  }
+}

demo/component/area/percent.js

@@ -0,0 +1,69 @@
+import React,  { Component } from 'react';
+import BizCharts from 'bizcharts';
+import DataSet from '@antv/data-set';
+
+const { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } = BizCharts;
+const { DataView } = DataSet;
+
+const data = [
+  {country: 'Asia', year: '1750', value: 502},
+  {country: 'Asia', year: '1800', value: 635},
+  {country: 'Asia', year: '1850', value: 809},
+  {country: 'Asia', year: '1900', value: 947},
+  {country: 'Asia', year: '1950', value: 1402},
+  {country: 'Asia', year: '1999', value: 3634},
+  {country: 'Asia', year: '2050', value: 5268},
+  {country: 'Africa', year: '1750', value: 106},
+  {country: 'Africa', year: '1800', value: 107},
+  {country: 'Africa', year: '1850', value: 111},
+  {country: 'Africa', year: '1900', value: 133},
+  {country: 'Africa', year: '1950', value: 221},
+  {country: 'Africa', year: '1999', value: 767},
+  {country: 'Africa', year: '2050', value: 1766},
+  {country: 'Europe', year: '1750', value: 163},
+  {country: 'Europe', year: '1800', value: 203},
+  {country: 'Europe', year: '1850', value: 276},
+  {country: 'Europe', year: '1900', value: 408},
+  {country: 'Europe', year: '1950', value: 547},
+  {country: 'Europe', year: '1999', value: 729},
+  {country: 'Europe', year: '2050', value: 628}
+];
+
+const dv = new DataView().source(data);
+  dv.transform({
+  type: 'percent',
+  field: 'value',
+  dimension: 'country',
+  groupBy: [ 'year' ],
+  as: 'percent'
+});
+const cols = {
+  year: {
+  type: 'linear',
+  tickInterval: 50
+  },
+  'percent': {
+  formatter: function(value) {
+    value = value || 0;
+    value = value * 100;
+    return parseInt(value);
+  },
+  alias: 'percent(%)'
+  }
+}
+
+export default class Percent extends Component {
+
+  render() {
+    return (
+      <Chart height={600} data={dv} scale={cols} forceFit>
+        <Axis name="year" />
+        <Axis name="percent" />
+        <Legend />
+        <Tooltip crosshairs={{type:'line'}}/>
+        <Geom type="areaStack" position="year*percent" color='country' />
+        <Geom type="lineStack" position="year*percent" size={2} color='country' />
+      </Chart>
+    );
+  }
+}