From d71d66c80ae68f7253fe6a9d4b2df1a267b7c579 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Thu, 23 Mar 2017 15:14:13 +0800 Subject: [PATCH] add recharts --- src/components/Layout/Layout.less | 48 +++-- src/components/skin.less | 35 ++++ src/router.js | 24 ++- src/routes/UIElement/charts/index.js | 88 --------- src/routes/app.js | 2 +- src/routes/chart/Container.js | 21 ++ src/routes/chart/Container.less | 20 ++ src/routes/chart/areaChart/index.js | 279 +++++++++++++++++++++++++++ src/routes/chart/barChart/index.js | 225 +++++++++++++++++++++ src/routes/chart/lineChart/index.js | 193 ++++++++++++++++++ src/utils/menu.js | 19 ++ 11 files changed, 850 insertions(+), 104 deletions(-) delete mode 100644 src/routes/UIElement/charts/index.js create mode 100644 src/routes/chart/Container.js create mode 100644 src/routes/chart/Container.less create mode 100644 src/routes/chart/areaChart/index.js create mode 100644 src/routes/chart/barChart/index.js create mode 100644 src/routes/chart/lineChart/index.js diff --git a/src/components/Layout/Layout.less b/src/components/Layout/Layout.less index 55c8604..fcc402c 100644 --- a/src/components/Layout/Layout.less +++ b/src/components/Layout/Layout.less @@ -223,20 +223,22 @@ height: 100vh; transition: @transition-ease-out; + :global { + .content-inner { + background: #fff; + padding: 24px; + box-shadow: @shadow-1; + min-height: e("calc(100vh - 184px)"); + } + } + .container { margin: 24px; + } - .content { - min-height: e("calc(100vh - 184px)"); - position: relative; - - :global .content-inner { - background: #fff; - padding: 24px; - box-shadow: @shadow-1; - min-height: e("calc(100vh - 184px)"); - } - } + .content { + min-height: e("calc(100vh - 184px)"); + position: relative; } } @@ -330,3 +332,27 @@ height: 100vh; } } +@media (max-width: 767px) { + .layout { + .main { + .container { + margin: 12px; + } + + .bread { + padding: 0 12px; + } + + .content { + min-height: e("calc(100vh - 160px)"); + } + + :global { + .content-inner { + padding: 12px; + min-height: e("calc(100vh - 160px)"); + } + } + } + } +} diff --git a/src/components/skin.less b/src/components/skin.less index f772655..55f873f 100644 --- a/src/components/skin.less +++ b/src/components/skin.less @@ -84,4 +84,39 @@ body { .ant-pagination-item { margin-bottom: 8px; } + + .ant-select-dropdown-menu-item { + padding: 12px 16px !important; + } +} +@media (min-width: 1600px) { + .ant-col-xl-48 { + width: 20%; + } + + .ant-col-xl-96 { + width: 40%; + } +} +@media (min-width: 1600px) { + .ant-col-xl-48 { + width: 20%; + } + + .ant-col-xl-96 { + width: 40%; + } +} +@media (max-width: 767px) { + :global { + .ant-card { + .ant-card-head { + padding: 0 12px; + } + + .ant-card-body { + padding: 12px; + } + } + } } diff --git a/src/router.js b/src/router.js index d8904ab..8c2780b 100644 --- a/src/router.js +++ b/src/router.js @@ -89,12 +89,28 @@ const Routers = function ({ history, app }) { }, 'UIElement-editor') }, }, { - path: 'UIElement/charts', - name: 'UIElement/charts', + path: 'chart/lineChart', + name: 'chart/lineChart', getComponent (nextState, cb) { require.ensure([], require => { - cb(null, require('./routes/UIElement/charts/')) - }, 'UIElement-charts') + cb(null, require('./routes/chart/lineChart/')) + }, 'chart-lineChart') + }, + }, { + path: 'chart/barChart', + name: 'chart/barChart', + getComponent (nextState, cb) { + require.ensure([], require => { + cb(null, require('./routes/chart/barChart/')) + }, 'chart-barChart') + }, + }, { + path: 'chart/areaChart', + name: 'chart/areaChart', + getComponent (nextState, cb) { + require.ensure([], require => { + cb(null, require('./routes/chart/areaChart/')) + }, 'chart-areaChart') }, }, { path: '*', diff --git a/src/routes/UIElement/charts/index.js b/src/routes/UIElement/charts/index.js deleted file mode 100644 index 5cd158d..0000000 --- a/src/routes/UIElement/charts/index.js +++ /dev/null @@ -1,88 +0,0 @@ -import React from 'react' -import { Row, Col, Card } from 'antd' -import { - LineChart, - Line, - XAxis, - YAxis, - CartesianGrid, - 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 = () => ( - - - - - - - - - -) - -const EditorPage = () => ( -
- - - - - - - -
-) - -export default EditorPage diff --git a/src/routes/app.js b/src/routes/app.js index 6b075df..dd94bb7 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -9,7 +9,7 @@ import '../components/skin.less' const { Header, Bread, Footer, Sider, styles } = Layout -function App ({ children, location, dispatch, app, loading }) { +const App = ({ children, location, dispatch, app, loading }) => { const { login, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys } = app const loginProps = { loading, diff --git a/src/routes/chart/Container.js b/src/routes/chart/Container.js new file mode 100644 index 0000000..104e4b2 --- /dev/null +++ b/src/routes/chart/Container.js @@ -0,0 +1,21 @@ +import React, { PropTypes } from 'react' +import styles from './Container.less' +import { ResponsiveContainer } from 'recharts' + +const Container = ({ children, ratio = 5 / 2, minHeight = 250, maxHeight = 350 }) =>
+
+
+ + {children} + +
+
+ +Container.propTypes = { + children: PropTypes.element.isRequired, + ratio: PropTypes.number, + minHeight: PropTypes.number, + maxHeight: PropTypes.number, +} + +export default Container diff --git a/src/routes/chart/Container.less b/src/routes/chart/Container.less new file mode 100644 index 0000000..4186376 --- /dev/null +++ b/src/routes/chart/Container.less @@ -0,0 +1,20 @@ +.container { + width: 100%; + position: relative; + display: inline-block; +} + +.content { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +:global { + .recharts-responsive-container { + width: e("calc(100% + 56px)")!important; + margin-left: -32px; + } +} diff --git a/src/routes/chart/areaChart/index.js b/src/routes/chart/areaChart/index.js new file mode 100644 index 0000000..cdbcc35 --- /dev/null +++ b/src/routes/chart/areaChart/index.js @@ -0,0 +1,279 @@ +import React from 'react' +import { Row, Col, Card, Button } from 'antd' +import Container from '../Container' +import * as d3 from 'd3-shape' +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip, +} 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 mixData = [ + { + 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 percentData = [ + { + month: '2015.01', + a: 4000, + b: 2400, + c: 2400, + }, { + month: '2015.02', + a: 3000, + b: 1398, + c: 2210, + }, { + month: '2015.03', + a: 2000, + b: 9800, + c: 2290, + }, { + month: '2015.04', + a: 2780, + b: 3908, + c: 2000, + }, { + month: '2015.05', + a: 1890, + b: 4800, + c: 2181, + }, { + month: '2015.06', + a: 2390, + b: 3800, + c: 2500, + }, { + month: '2015.07', + a: 3490, + b: 4300, + c: 2100, + }, +] + +const colProps = { + lg: 12, + md: 24, +} + +const SimpleAreaChart = () => ( + + + + + + + + + +) + +const StackedAreaChart = () => ( + + + + + + + + + + + +) + +// StackedAreaChart + +const toPercent = (decimal, fixed = 0) => { + return `${(decimal * 100).toFixed(fixed)}%` +} + +const getPercent = (value, total) => { + const ratio = total > 0 + ? value / total + : 0 + + return toPercent(ratio, 2) +} + +const renderTooltipContent = (o) => { + const { payload, label } = o + const total = payload.reduce((result, entry) => (result + entry.value), 0) + + return ( +
+

{`${label} (Total: ${total})`}

+ +
+ ) +} + +const PercentAreaChart = () => ( + + + + + + + + + + + +) + +// CardinalAreaChart +const cardinal = d3.curveCardinal.tension(0.2) +const CardinalAreaChart = () => ( + + + + + + + + + + +) + +const EditorPage = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + + +
+) + +export default EditorPage diff --git a/src/routes/chart/barChart/index.js b/src/routes/chart/barChart/index.js new file mode 100644 index 0000000..fd083c1 --- /dev/null +++ b/src/routes/chart/barChart/index.js @@ -0,0 +1,225 @@ +import React, { PropTypes } from 'react' +import { Row, Col, Card, Button } from 'antd' +import Container from '../Container' +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + 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 mixData = [ + { + name: 'Page A', + uv: 4000, + female: 2400, + male: 2400, + }, { + name: 'Page B', + uv: 3000, + female: 1398, + male: 2210, + }, { + name: 'Page C', + uv: 2000, + female: 9800, + male: 2290, + }, { + name: 'Page D', + uv: 2780, + female: 3908, + male: 2000, + }, { + name: 'Page E', + uv: 1890, + female: 4800, + male: 2181, + }, { + name: 'Page F', + uv: 2390, + female: 3800, + male: 2500, + }, { + name: 'Page G', + uv: 3490, + female: 4300, + male: 2100, + }, +] +const colProps = { + lg: 12, + md: 24, +} + +const SimpleBarChart = () => ( + + + + + + + + + + + +) + +const StackedBarChart = () => ( + + + + + + + + + + + +) + +const MixBarChart = () => ( + + + + + + + + + + + + +) + +// CustomShapeBarChart +const getPath = (x, y, width, height) => { + return `M${x},${y + height} + C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3} ${x + width / 2}, ${y} + C${x + width / 2},${y + height / 3} ${x + 2 * width / 3},${y + height} ${x + width}, ${y + height} + Z` +} + +const TriangleBar = (props) => { + const { fill, x, y, width, height } = props + return +} + +TriangleBar.propTypes = { + fill: PropTypes.string, + x: PropTypes.number, + y: PropTypes.number, + width: PropTypes.number, + height: PropTypes.number, +} + +const CustomShapeBarChart = () => ( + + + + + + } label /> + + +) + +const EditorPage = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + + +
+) + +export default EditorPage diff --git a/src/routes/chart/lineChart/index.js b/src/routes/chart/lineChart/index.js new file mode 100644 index 0000000..c363fb1 --- /dev/null +++ b/src/routes/chart/lineChart/index.js @@ -0,0 +1,193 @@ +import React, { PropTypes } from 'react' +import { Row, Col, Card, Button } from 'antd' +import Container from '../Container' +import { + LineChart, + Line, + XAxis, + YAxis, + CartesianGrid, + 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 = () => ( + + + + + + + + + + + +) + +const VerticalLineChart = () => ( + + + + + + + + + + + +) + +const DashedLineChart = () => ( + + + + + + + + + + + +) + +// CustomizedDotLineChart +const CustomizedDot = ({ cx, cy, payload }) => { + if (payload.value > 2500) { + return ( + + + + ) + } + + return ( + + + + ) +} + +CustomizedDot.propTypes = { + cx: PropTypes.number, + cy: PropTypes.number, + payload: PropTypes.object, +} + +const CustomizedDotLineChart = () => ( + + + + + + + + } /> + + + +) + +const EditorPage = () => ( +
+ + + + + + + + + + + + + + + + + + + + + + + +
+) + +export default EditorPage diff --git a/src/utils/menu.js b/src/utils/menu.js index a1d4138..4382ae7 100644 --- a/src/utils/menu.js +++ b/src/utils/menu.js @@ -41,6 +41,25 @@ module.exports = [ }, ], }, + { + key: 'chart', + name: 'Recharts', + icon: 'code-o', + child: [ + { + key: 'lineChart', + name: 'LineChart', + }, + { + key: 'barChart', + name: 'BarChart', + }, + { + key: 'areaChart', + name: 'AreaChart', + }, + ], + }, { key: 'navigation', name: '测试导航',