Skip to content
This repository was archived by the owner on Nov 27, 2020. It is now read-only.

Commit 5f12e77

Browse files
committed
[1.0.0] let there be g2-react
0 parents  commit 5f12e77

13 files changed

+24780
-0
lines changed

.eslintrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends": "eslint-config-airbnb",
4+
"rules": {
5+
"no-console": [0]
6+
},
7+
"ecmaFeatures": {
8+
"generators": 1,
9+
"experimentalObjectRestSpread": true
10+
}
11+
}

.gitignore

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
*.iml
2+
*.log
3+
.idea
4+
.ipr
5+
.iws
6+
*~
7+
~*
8+
*.diff
9+
*.patch
10+
*.bak
11+
.DS_Store
12+
Thumbs.db
13+
.project
14+
.*proj
15+
.svn
16+
*.swp
17+
*.swo
18+
*.pyc
19+
*.pyo
20+
node_modules
21+
.cache
22+
*.css
23+
build
24+
lib
25+
coverage
26+
__site
27+
dist

.travis.yml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
language: node_js
2+
3+
node_js:
4+
- "4"
5+
- "5"
6+
7+
after_success:
8+
- npm run coveralls

HISTORY.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## 1.0.0
2+
3+
- let there be rc-g2

README.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
# g2-react
2+
3+
Factory wrapper for using [G2](http://g2.alipay.com) easier in a React Component with dynamic `data` and `size` props
4+
5+
*Note that `g2-react` is just a wrapper, if you want to make a better chart, `docs of G2` is [HERE](http://g2.alipay.com/)*
6+
7+
[![NPM version][npm-image]][npm-url]
8+
[![npm download][download-image]][download-url]
9+
10+
[npm-image]: http://img.shields.io/npm/v/g2-react.svg?style=flat-square
11+
[npm-url]: http://npmjs.org/package/g2-react
12+
[download-image]: https://img.shields.io/npm/dm/g2-react.svg?style=flat-square
13+
[download-url]: https://npmjs.org/package/g2-react
14+
15+
## Example
16+
17+
- [online example](http://react-component.github.io/g2)
18+
19+
- [local example](http://localhost:8989/)
20+
21+
22+
## Install
23+
24+
```bash
25+
$ npm install g2 --save
26+
$ npm install g2-react --save
27+
```
28+
29+
`g2-react` works with a [peerDependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) of `g2`, you can specify the version of `g2` in your `package.json`
30+
31+
## Usage
32+
33+
```js
34+
import createG2 from 'g2-react';
35+
import { Stat } from 'g2';
36+
37+
const Pie = createG2(chart => {
38+
chart.coord('theta');
39+
chart.intervalStack().position(Stat.summary.proportion()).color('cut');
40+
chart.render();
41+
});
42+
43+
React.render(
44+
<Pie
45+
data={this.state.data}
46+
width={this.state.width}
47+
height={this.state.height}
48+
plotCfg={this.state.plotCfg}
49+
ref="myChart"
50+
/>
51+
);
52+
```
53+
54+
55+
## Props
56+
57+
See detail api of [g2](http://g2.alipay.com/api/)
58+
59+
<table class="table table-bordered table-striped">
60+
<thead>
61+
<tr>
62+
<th style="width: 100px;">name</th>
63+
<th style="width: 50px;">type</th>
64+
<th style="width: 100px;">default</th>
65+
<th>description</th>
66+
</tr>
67+
</thead>
68+
<tbody>
69+
<tr>
70+
<td>width</td>
71+
<td>number.isRequired</td>
72+
<td></td>
73+
<td>width of chart</td>
74+
</tr>
75+
<tr>
76+
<td>height</td>
77+
<td>number.isRequired</td>
78+
<td></td>
79+
<td>height of chart</td>
80+
</tr>
81+
<tr>
82+
<td>plotCfg</td>
83+
<td>object</td>
84+
<td></td>
85+
<td>config of chart, margin, border, backgroud...</td>
86+
</tr>
87+
<tr>
88+
<td>data</td>
89+
<td>arrayOf(object).isRequired</td>
90+
<td></td>
91+
<td>data source</td>
92+
</tr>
93+
<tr>
94+
<td>forceFit</td>
95+
<td>bool</td>
96+
<td>false</td>
97+
<td>if the width of chart autoFit with parent</td>
98+
</tr>
99+
</tbody>
100+
</table>
101+
102+
103+
## Development
104+
105+
```bash
106+
$ git clone git@github.com:react-component/g2.git
107+
$ npm install
108+
$ npm run doc
109+
```
110+
111+
## License
112+
113+
g2-react is released under the MIT license.

0 commit comments

Comments
 (0)