add UI Components: charts

This commit is contained in:
zuiidea
2017-03-23 10:44:26 +08:00
parent 9d011b9c75
commit 10bb0098d4
2 changed files with 97 additions and 0 deletions
+8
View File
@@ -88,6 +88,14 @@ const Routers = function ({ history, app }) {
cb(null, require('./routes/UIElement/editor/'))
}, 'UIElement-editor')
},
}, {
path: 'UIElement/charts',
name: 'UIElement/charts',
getComponent (nextState, cb) {
require.ensure([], require => {
cb(null, require('./routes/UIElement/charts/'))
}, 'UIElement-charts')
},
}, {
path: '*',
name: 'error',
+89
View File
@@ -0,0 +1,89 @@
import React from 'react'
import { Row, Col, Card } from 'antd'
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
ResponsiveContainer,
Tooltip,
Legend,
} from 'recharts'
const data = [
{
name: 'Page A',
uv: 4000,
pv: 2400,
amt: 2400,
}, {
name: 'Page B',
uv: 3000,
pv: 1398,
amt: 2210,
}, {
name: 'Page C',
uv: 2000,
pv: 9800,
amt: 2290,
}, {
name: 'Page D',
uv: 2780,
pv: 3908,
amt: 2000,
}, {
name: 'Page E',
uv: 1890,
pv: 4800,
amt: 2181,
}, {
name: 'Page F',
uv: 2390,
pv: 3800,
amt: 2500,
}, {
name: 'Page G',
uv: 3490,
pv: 4300,
amt: 2100,
},
]
const colProps = {
lg: 12,
md: 24,
}
const SimpleLineChart = () => (
<LineChart width={600} height={300} data={data} margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{
r: 8,
}} />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
)
const EditorPage = () => (
<div className="content-inner">
<Row gutter={32}>
<Col {...colProps}>
<Card title="SimpleLineChart">
<SimpleLineChart />
</Card>
</Col>
</Row>
</div>
)
export default EditorPage