add: init

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "env",
+    "react",
+    "stage-0"
+  ],
+  "plugins": [
+    "transform-export-extensions"
+  ]
+}

.eslintignore

@@ -0,0 +1,4 @@
+lib/
+node_modules/
+coverage/
+demo/

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+  },
+  "extends": ["eslint-config-airbnb"],
+  "plugins": [
+    'react',
+    'babel',
+  ],
+  "rules": {
+    "no-plusplus": 0,
+    "max-len": [1, 130],
+    "no-console": 0,
+    "linebreak-style": [2, "unix"],
+    "quotes": [2, "single"],
+    "semi": [2, "always"],
+    "arrow-body-style": 0,
+    "react/prop-types": 0,
+    "guard-for-in": 0,
+    "no-restricted-syntax": 0,
+    "react/no-string-refs": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "import/newline-after-import": 0,
+    "import/no-unresolved": [2, { ignore: ['^react$'] }],
+    "import/extensions": 0,
+    "import/no-extraneous-dependencies": 0
+  }
+};

.gitignore

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

.npmignore

@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+.idea
+coverage

demo/Line/index.jsx

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import { Chart, Line, Scale, Guide } from '@ali/f2-react';
+
+const data = [
+  {
+    name: '苹果',
+    count: 5,
+  },
+  {
+    name: '香蕉',
+    count: 3,
+  },
+  {
+    name: '牛奶',
+    count: 10,
+  },
+  {
+    name: '橘子',
+    count: 13,
+  },
+  {
+    name: '西瓜',
+    count: 8,
+  },
+];
+
+class LineDemo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data,
+    }
+  }
+  onClick() {
+    return () => {
+      data[3].count = 2;
+
+      this.setState({
+        data,
+      })
+    }
+  }
+  render() {
+    return (
+      <div onClick={this.onClick()}>
+        <Chart source={this.state.data}>
+          <Line position="name*count" />
+          <Scale field="name" range={[0, 1]} />
+          <Guide type="tag" position={['牛奶', 10]} content="这是牛奶" />
+          { null }
+        </Chart>
+      </div>
+    );
+  }
+}
+
+export default LineDemo;

demo/Pie/index.jsx

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import { Chart, Legend, Coord, Interval, Guide, Tooltip, Axis, F2 } from '@ali/f2-react';
+const { Group, Shape } = F2.G;
+
+const data = [
+  {
+      "name": "余额", 
+      "color": "64C4EF", 
+      "value": "10000.00", 
+      "proportion": 0.07, 
+      "spm": "c12899.d23652", 
+      "a": "1"
+  }, 
+  {
+      "name": "余额宝", 
+      "color": "F5865C", 
+      "value": "20000.00", 
+      "proportion": 0.13, 
+      "spm": "c12899.d23653", 
+      "a": "1"
+  }, 
+  {
+      "name": "定期", 
+      "color": "3DA4EE", 
+      "value": "30000.00", 
+      "proportion": 0.20, 
+      "spm": "c12899.d23656", 
+      "a": "1"
+  }, 
+  {
+      "name": "基金", 
+      "color": "6088EC", 
+      "value": "40000.00", 
+      "proportion": 0.27, 
+      "spm": "c12899.d23655", 
+      "a": "1"
+  }, 
+  {
+      "name": "黄金", 
+      "color": "F8CC49", 
+      "value": "50000.00", 
+      "proportion": 0.33, 
+      "spm": "c12899.d23654", 
+      "a": "1"
+  }
+];
+const OFFSET = 20; // 偏移量
+
+class PieDemo extends Component {
+  _getEndPoint(center, angle, r) {
+    return {
+      x: center.x + (r * Math.cos(angle)),
+      y: center.y + (r * Math.sin(angle)),
+    };
+  }
+
+  _addPieLabel(chart) {
+    const coord = chart.get('coord');
+    const geom = chart.get('geoms')[0];
+    const shapes = geom.get('shapes');
+    const { center } = coord; // 极坐标圆心坐标
+    const r = coord.circleRadius; // 极坐标半径
+    const canvas = chart.get('canvas'); // 获取 canvas 对象
+    const labelGroup = canvas.addGroup(); // 用于存储文本以及文本连接线
+
+    shapes.forEach((shape) => {
+      const shapeAttrs = shape.attr();
+      const origin = shape.get('origin');
+      const { startAngle, endAngle } = shapeAttrs;
+      const middleAngle = (startAngle + endAngle) / 2;
+      const routerPoint = this._getEndPoint(center, middleAngle, r + OFFSET);
+      const textName = new Shape.Text({
+        attrs: {
+          x: routerPoint.x,
+          y: routerPoint.y,
+          fontSize: 12,
+          fill: origin.color,
+          text: origin._origin.name,
+          textBaseline: 'middle',
+          lineHeight: 12,
+        },
+        origin: origin._origin, // 存储原始数据
+      });
+      labelGroup.add(textName);
+    });
+    canvas.draw();
+  }
+
+  onRendered = (chart) => {
+    this._addPieLabel(chart);
+  }
+
+  render() {
+    const html = '<div id="guide" style="text-align: center; width: 200px"><span id="guide-content" style="font-size: 14px; color: #333333; font-weight: 500">150000.00</span><br /></div>';
+    const marker = {
+      symbol: 'square',
+      radius: 4,
+    };
+    const legendMapData = {};
+    data.forEach(item => {
+      legendMapData[item.name] = item.value;
+    });
+    const animate = {
+      appear: {
+        animation: 'groupScaleInXY',
+        easing: 'elasticOut',
+        delay: 300,
+        duration: 300,
+      },
+    };
+    const itemFormatter = val => { return val + '  ' + legendMapData[val]; };
+    return <div>
+      <Chart source={ data } onRendered={this.onRendered} width={375} height={250}>
+        <Coord type="polar" transposed={true} innerRadius={0.8} radius={0.8} />
+        <Axis enable={false} />
+        <Interval position="a*proportion" color="name" adjust="stack" animate={animate}/>
+        <Guide type="html" position={[ '50%', '50%' ]} html={html} />
+        <Legend position="bottom" marker={marker} itemFormatter={itemFormatter} align="center" />
+        <Tooltip showItemMarker={false} />
+      </Chart>
+    </div>;
+  }
+}
+
+export default PieDemo;

demo/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>f2-react</title>
+  <script>
+  </script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="mountNode"></div>
+  <!-- <script src="https://as.alipayobjects.com/g/component/react/15.5.4/react.js"></script> -->
+  <!-- <script src="https://as.alipayobjects.com/g/component/react/15.5.4/react-dom.js"></script> -->
+  <script src="/bundle.js"></script>
+</body>
+
+</html>

demo/index.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import LineDemo from './Line';
+import PieDemo from './Pie';
+
+class Demo extends Component {
+  render() {
+    return (<div>
+      <LineDemo />
+      <PieDemo />
+    </div>);
+  }
+}
+
+ReactDOM.render(<Demo />, document.getElementById('mountNode'));

demo/webpack.config.js

@@ -0,0 +1,50 @@
+const path = require('path');
+
+module.exports = {
+  entry: './demo/index.js',
+  devServer: {
+    contentBase: './demo',
+    stats: 'minimal',
+    port: 9000,
+    disableHostCheck: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [
+              [
+                "import",
+                {
+                  "libraryName": "@ali/f2-react",
+                  "libraryDirectory": "src"
+                }
+              ]
+            ]
+          }
+        }
+      },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+    ]
+  },
+  plugins: [],
+  externals: {
+    // react: 'React',
+    // 'react-dom': 'ReactDOM',
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    alias: {
+      '@ali/f2-react': path.join(__dirname, '..'),
+    },
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  mode: 'development',
+};

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  setupFiles: [
+    'jest-canvas-mock',
+  ],
+  collectCoverageFrom: ['<rootDir>/src/component/**/*.{js,jsx}', '<rootDir>/src/common/*.{js,jsx}'],
+};