mirror of
https://github.com/zuiidea/antd-admin
synced 2026-10-21 23:23:43 +00:00
add recharts
This commit is contained in:
zuiidea
@@ -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)");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+20
-4
@@ -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: '*',
|
||||
|
||||
@@ -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 = () => (
|
||||
<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
|
||||
+1
-1
@@ -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,
|
||||
|
||||
@@ -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 }) => <div className={styles.container} style={{ minHeight, maxHeight }}>
|
||||
<div style={{ marginTop: `${100 / ratio}%` || '100%' }}></div>
|
||||
<div className={styles.content} style={{ minHeight, maxHeight }}>
|
||||
<ResponsiveContainer>
|
||||
{children}
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Container.propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
ratio: PropTypes.number,
|
||||
minHeight: PropTypes.number,
|
||||
maxHeight: PropTypes.number,
|
||||
}
|
||||
|
||||
export default Container
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 = () => (
|
||||
<Container>
|
||||
<AreaChart data={data} margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
|
||||
</AreaChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const StackedAreaChart = () => (
|
||||
<Container>
|
||||
<AreaChart data={mixData} margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
|
||||
<Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
|
||||
<Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
|
||||
</AreaChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
// 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 (
|
||||
<div className="customized-tooltip-content">
|
||||
<p className="total">{`${label} (Total: ${total})`}</p>
|
||||
<ul className="list">
|
||||
{payload.map((entry, index) => (
|
||||
<li key={`item-${index}`} style={{
|
||||
color: entry.color,
|
||||
}}>
|
||||
{`${entry.name}: ${entry.value}(${getPercent(entry.value, total)})`}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const PercentAreaChart = () => (
|
||||
<Container>
|
||||
<AreaChart data={percentData} stackOffset="expand" margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}>
|
||||
<XAxis dataKey="month" />
|
||||
<YAxis tickFormatter={toPercent} />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip content={renderTooltipContent} />
|
||||
<Area type="monotone" dataKey="a" stackId="1" stroke="#8884d8" fill="#8884d8" />
|
||||
<Area type="monotone" dataKey="b" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
|
||||
<Area type="monotone" dataKey="c" stackId="1" stroke="#ffc658" fill="#ffc658" />
|
||||
</AreaChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
// CardinalAreaChart
|
||||
const cardinal = d3.curveCardinal.tension(0.2)
|
||||
const CardinalAreaChart = () => (
|
||||
<Container>
|
||||
<AreaChart data={mixData} margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
|
||||
<Area type={cardinal} dataKey="pv" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.3} />
|
||||
</AreaChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const EditorPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary" size="large" style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}>
|
||||
<a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
|
||||
</Button>
|
||||
<Row gutter={32}>
|
||||
<Col {...colProps}>
|
||||
<Card title="SimpleAreaChart">
|
||||
<SimpleAreaChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="StackedAreaChart">
|
||||
<StackedAreaChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="PercentAreaChart">
|
||||
<PercentAreaChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="CardinalAreaChart">
|
||||
<CardinalAreaChart />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default EditorPage
|
||||
@@ -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 = () => (
|
||||
<Container>
|
||||
<BarChart data={data} margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="pv" fill="#8884d8" />
|
||||
<Bar dataKey="uv" fill="#82ca9d" />
|
||||
</BarChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const StackedBarChart = () => (
|
||||
<Container>
|
||||
<BarChart data={data} margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="pv" stackId="a" fill="#8884d8" />
|
||||
<Bar dataKey="uv" stackId="a" fill="#82ca9d" />
|
||||
</BarChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const MixBarChart = () => (
|
||||
<Container>
|
||||
<BarChart data={mixData} margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="female" stackId="a" fill="#8884d8" />
|
||||
<Bar dataKey="male" stackId="a" fill="#82ca9d" />
|
||||
<Bar dataKey="uv" fill="#ffc658" />
|
||||
</BarChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
// 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 <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />
|
||||
}
|
||||
|
||||
TriangleBar.propTypes = {
|
||||
fill: PropTypes.string,
|
||||
x: PropTypes.number,
|
||||
y: PropTypes.number,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
}
|
||||
|
||||
const CustomShapeBarChart = () => (
|
||||
<Container>
|
||||
<BarChart data={mixData} margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Bar dataKey="female" fill="#8884d8" shape={< TriangleBar />} label />
|
||||
</BarChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const EditorPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary" size="large" style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}>
|
||||
<a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
|
||||
</Button>
|
||||
<Row gutter={32}>
|
||||
<Col {...colProps}>
|
||||
<Card title="SimpleBarChart">
|
||||
<SimpleBarChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="StackedBarChart">
|
||||
<StackedBarChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="MixBarChart">
|
||||
<MixBarChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="CustomShapeBarChart">
|
||||
<CustomShapeBarChart />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default EditorPage
|
||||
@@ -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 = () => (
|
||||
<Container>
|
||||
<LineChart 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>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const VerticalLineChart = () => (
|
||||
<Container>
|
||||
<LineChart layout="vertical" width={600} height={300} data={data} margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<XAxis type="number" />
|
||||
<YAxis dataKey="name" type="category" />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line dataKey="pv" stroke="#8884d8" />
|
||||
<Line dataKey="uv" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const DashedLineChart = () => (
|
||||
<Container>
|
||||
<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" strokeDasharray="5 5" />
|
||||
<Line type="monotone" dataKey="uv" stroke="#82ca9d" strokeDasharray="3 4 5 2" />
|
||||
</LineChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
// CustomizedDotLineChart
|
||||
const CustomizedDot = ({ cx, cy, payload }) => {
|
||||
if (payload.value > 2500) {
|
||||
return (
|
||||
<svg x={cx - 10} y={cy - 10} width={20} height={20} fill="red" viewBox="0 0 1024 1024">
|
||||
<path d="M512 1009.984c-274.912 0-497.76-222.848-497.76-497.76s222.848-497.76 497.76-497.76c274.912 0 497.76 222.848 497.76 497.76s-222.848 497.76-497.76 497.76zM340.768 295.936c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM686.176 296.704c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM772.928 555.392c-18.752-8.864-40.928-0.576-49.632 18.528-40.224 88.576-120.256 143.552-208.832 143.552-85.952 0-164.864-52.64-205.952-137.376-9.184-18.912-31.648-26.592-50.08-17.28-18.464 9.408-21.216 21.472-15.936 32.64 52.8 111.424 155.232 186.784 269.76 186.784 117.984 0 217.12-70.944 269.76-186.784 8.672-19.136 9.568-31.2-9.12-40.096z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<svg x={cx - 10} y={cy - 10} width={20} height={20} fill="green" viewBox="0 0 1024 1024">
|
||||
<path d="M517.12 53.248q95.232 0 179.2 36.352t145.92 98.304 98.304 145.92 36.352 179.2-36.352 179.2-98.304 145.92-145.92 98.304-179.2 36.352-179.2-36.352-145.92-98.304-98.304-145.92-36.352-179.2 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352zM663.552 261.12q-15.36 0-28.16 6.656t-23.04 18.432-15.872 27.648-5.632 33.28q0 35.84 21.504 61.44t51.2 25.6 51.2-25.6 21.504-61.44q0-17.408-5.632-33.28t-15.872-27.648-23.04-18.432-28.16-6.656zM373.76 261.12q-29.696 0-50.688 25.088t-20.992 60.928 20.992 61.44 50.688 25.6 50.176-25.6 20.48-61.44-20.48-60.928-50.176-25.088zM520.192 602.112q-51.2 0-97.28 9.728t-82.944 27.648-62.464 41.472-35.84 51.2q-1.024 1.024-1.024 2.048-1.024 3.072-1.024 8.704t2.56 11.776 7.168 11.264 12.8 6.144q25.6-27.648 62.464-50.176 31.744-19.456 79.36-35.328t114.176-15.872q67.584 0 116.736 15.872t81.92 35.328q37.888 22.528 63.488 50.176 17.408-5.12 19.968-18.944t0.512-18.944-3.072-7.168-1.024-3.072q-26.624-55.296-100.352-88.576t-176.128-33.28z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
CustomizedDot.propTypes = {
|
||||
cx: PropTypes.number,
|
||||
cy: PropTypes.number,
|
||||
payload: PropTypes.object,
|
||||
}
|
||||
|
||||
const CustomizedDotLineChart = () => (
|
||||
<Container>
|
||||
<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" dot={< CustomizedDot />} />
|
||||
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const EditorPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary" size="large" style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}>
|
||||
<a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
|
||||
</Button>
|
||||
<Row gutter={32}>
|
||||
<Col {...colProps}>
|
||||
<Card title="SimpleLineChart">
|
||||
<SimpleLineChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="DashedLineChart">
|
||||
<DashedLineChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="CustomizedDotLineChart">
|
||||
<CustomizedDotLineChart />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col {...colProps}>
|
||||
<Card title="VerticalLineChart">
|
||||
<VerticalLineChart />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default EditorPage
|
||||
@@ -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: '测试导航',
|
||||
|
||||
Reference in New Issue
Block a user