From 10bb0098d4c5890b333b2d7bb0d66fb314989a9d Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Thu, 23 Mar 2017 10:44:26 +0800
Subject: [PATCH] add UI Components: charts

---
 src/router.js                        |  8 +++
 src/routes/UIElement/charts/index.js | 89 ++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 src/routes/UIElement/charts/index.js

diff --git a/src/router.js b/src/router.js
index 891c409..d8904ab 100644
--- a/src/router.js
+++ b/src/router.js
@@ -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',
diff --git a/src/routes/UIElement/charts/index.js b/src/routes/UIElement/charts/index.js
new file mode 100644
index 0000000..176e479
--- /dev/null
+++ b/src/routes/UIElement/charts/index.js
@@ -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