Merge pull request #137 from zuiidea/4.0-dev

4.0 dev
This commit is contained in:
zuiidea
2017-03-23 15:17:17 +08:00
committed by GitHub
21 changed files with 1111 additions and 38 deletions
+7
View File
@@ -6,6 +6,7 @@
"dependencies": {
"antd": "^2.7.3",
"classnames": "^2.2.5",
"draftjs-to-markdown": "^0.4.0",
"dva": "^1.1.0",
"dva-loading": "^0.2.0",
"js-cookie": "^2.1.3",
@@ -14,6 +15,8 @@
"react": "^15.4.1",
"react-countup": "1.3.0",
"react-dom": "^15.4.1",
"react-draft-wysiwyg": "^1.8.1",
"react-helmet": "^5.0.0",
"recharts": "^0.19.0"
},
"devDependencies": {
@@ -30,6 +33,7 @@
"dora-plugin-proxy": "^0.8.5",
"dora-plugin-webpack": "^0.8.1",
"dora-plugin-webpack-hmr": "^0.2.1",
"draftjs-to-html": "^0.7.0",
"eslint": "^3.17.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.16.0",
@@ -42,6 +46,9 @@
"robe-ajax": "^1.0.0",
"watchjs": "^0.0.0"
},
"pre-commit": [
"lint"
],
"scripts": {
"start": "dora --plugins \"proxy,webpack?publicPath=/,webpack-hmr,browser-history?index=/src/index.html\"",
"dev": "dora --plugins \"webpack?publicPath=/,webpack-hmr,browser-history?index=/src/index.html\"",
-6
View File
@@ -5,9 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ant Design Admin</title>
<link rel="stylesheet" href="index.css" />
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
@@ -15,12 +13,8 @@
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
<script src="//at.alicdn.com/t/font_c4y7asse3q1cq5mi.js"></script>
</body>
</html>
-6
View File
@@ -37,11 +37,6 @@ class DataTable extends React.Component {
this.props = nextProps
this.fetch()
}
// if (!lodash.isEqual(nextProps.fetch, this.props.fetch)) {
// this.props = nextProps
// this.fetch()
// }
}
handleTableChange = (pagination, filters, sorter) => {
@@ -64,7 +59,6 @@ class DataTable extends React.Component {
const { fetch: { url, data, dataKey } } = this.props
const { fetchData } = this.state
this.setState({ loading: true })
console.log(data)
request(url, {
result: 10,
data: {
+11
View File
@@ -0,0 +1,11 @@
import React from 'react'
import { Editor } from 'react-draft-wysiwyg'
import styles from './Editor.less'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
const DraftEditor = (props) => {
return (<Editor toolbarClassName={styles.toolbar} wrapperClassName={styles.wrapper} editorClassName={styles.editor} {...props} />)
}
export default DraftEditor
+111
View File
@@ -0,0 +1,111 @@
.wrapper {
height: 500px;
:global {
.rdw-dropdownoption-default {
padding: 6px;
}
.rdw-dropdown-optionwrapper {
box-sizing: content-box;
width: 100%;
border-radius: 0 0 2px 2px;
}
.rdw-inline-wrapper {
flex-wrap: wrap;
margin-bottom: 0;
.rdw-option-wrapper {
margin-bottom: 6px;
}
}
.rdw-option-active {
box-shadow: 1px 1px 0 #e8e8e8 inset;
}
.rdw-dropdown-optionwrapper {
&:hover {
box-shadow: none;
}
}
.rdw-colorpicker-option {
box-shadow: none;
}
.rdw-colorpicker-modal,
.rdw-embedded-modal,
.rdw-emoji-modal,
.rdw-image-modal,
.rdw-link-modal {
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}
.rdw-colorpicker-modal,
.rdw-embedded-modal,
.rdw-link-modal {
height: auto;
}
.rdw-emoji-modal {
width: 214px;
}
.rdw-colorpicker-modal {
width: auto;
}
.rdw-embedded-modal-btn,
.rdw-image-modal-btn,
.rdw-link-modal-btn {
height: 32px;
margin-top: 12px;
}
.rdw-embedded-modal-input,
.rdw-embedded-modal-size-input,
.rdw-link-modal-input {
padding: 2px 6px;
height: 32px;
}
.rdw-dropdown-selectedtext {
color: #000;
}
.rdw-dropdown-wrapper,
.rdw-option-wrapper {
min-width: 36px;
transition: all 0.2s ease;
height: 30px;
&:active {
box-shadow: 1px 1px 0 #e8e8e8 inset;
}
&:hover {
box-shadow: 1px 1px 0 #e8e8e8;
}
}
.rdw-dropdown-wrapper {
min-width: 60px;
}
.rdw-editor-main {
box-sizing: border-box;
}
}
.editor {
border: 1px solid #F1F1F1;
padding: 5px;
border-radius: 2px;
height: auto;
min-height: 200px;
}
.toolbar {}
}
+6
View File
@@ -0,0 +1,6 @@
{
"name": "Editor",
"version": "0.0.0",
"private": true,
"main": "./Editor.js"
}
+37 -11
View File
@@ -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)");
}
}
}
}
}
+10 -1
View File
@@ -2,8 +2,17 @@ import DataTable from './DataTable'
import DropOption from './DropOption'
import Iconfont from './Iconfont'
import Search from './Search'
import Editor from './Editor'
import * as Layout from './Layout/index.js'
import layer from './layer'
export { Layout, DataTable, DropOption, Iconfont, Search, layer }
export {
Layout,
DataTable,
DropOption,
Iconfont,
Search,
Editor,
layer,
}
+35
View File
@@ -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;
}
}
}
}
-6
View File
@@ -5,9 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ant Design Admin</title>
<link rel="stylesheet" href="/index.css" />
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
@@ -15,12 +13,8 @@
</head>
<body>
<div id="root"></div>
<script src="/index.js"></script>
<script src="//at.alicdn.com/t/font_c4y7asse3q1cq5mi.js"></script>
</body>
</html>
+32
View File
@@ -80,6 +80,38 @@ const Routers = function ({ history, app }) {
cb(null, require('./routes/UIElement/dataTable/'))
}, 'UIElement-dataTable')
},
}, {
path: 'UIElement/editor',
name: 'UIElement/editor',
getComponent (nextState, cb) {
require.ensure([], require => {
cb(null, require('./routes/UIElement/editor/'))
}, 'UIElement-editor')
},
}, {
path: 'chart/lineChart',
name: 'chart/lineChart',
getComponent (nextState, cb) {
require.ensure([], require => {
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: '*',
name: 'error',
+2 -2
View File
@@ -64,7 +64,7 @@ class DataTablePage extends React.Component {
<Row gutter={32}>
<Col lg={12} md={24}>
<Card title="默认">
<DataTable />
<DataTable pagination={false} />
</Card>
</Col>
<Col lg={12} md={24}>
@@ -82,7 +82,7 @@ class DataTablePage extends React.Component {
</Card>
</Col>
<Col lg={12} md={24}>
<Card title="条件变化">
<Card title="参数变化">
<Select placeholder="Please select gender" allowClear onChange={this.handleSelectChange} style={{ width: 200, marginBottom: 16 }}>
<Select.Option value="male">Male</Select.Option>
<Select.Option value="female">Female</Select.Option>
+80
View File
@@ -0,0 +1,80 @@
import React from 'react'
import { Editor } from '../../../components'
import { convertToRaw } from 'draft-js'
import { Row, Col, Card } from 'antd'
import draftToHtml from 'draftjs-to-html'
import draftToMarkdown from 'draftjs-to-markdown'
// https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/components/Demo/index.js
export default class EditorPage extends React.Component {
constructor (props) {
super(props)
this.state = {
editorContent: null,
}
}
onEditorStateChange = (editorContent) => {
this.setState({
editorContent,
})
}
render () {
const { editorContent } = this.state
const colProps = {
lg: 12,
md: 24,
}
const textareaStyle = {
minHeight: 496,
width: '100%',
background: '#f7f7f7',
borderColor: '#F1F1F1',
padding: '16px 8px',
}
return (<div className="content-inner">
<Row gutter={32}>
<Col {...colProps}>
<Card title="Editor" style={{ overflow: 'visible' }}>
<Editor
wrapperStyle={{
minHeight: 500,
}}
editorStyle={{
minHeight: 376,
}}
editorState={editorContent}
onEditorStateChange={this.onEditorStateChange}
/>
</Card>
</Col>
<Col {...colProps}>
<Card title="HTML">
<textarea
style={textareaStyle}
disabled
value={editorContent ? draftToHtml(convertToRaw(editorContent.getCurrentContent())) : ''}
/>
</Card>
</Col>
<Col {...colProps}>
<Card title="Markdown">
<textarea
style={textareaStyle}
disabled
value={editorContent ? draftToMarkdown(convertToRaw(editorContent.getCurrentContent())) : ''}
/>
</Card>
</Col>
<Col {...colProps}>
<Card title="JSON">
<textarea
style={textareaStyle}
disabled
value={editorContent ? JSON.stringify(convertToRaw(editorContent.getCurrentContent())) : ''}
/>
</Card>
</Col>
</Row>
</div>)
}
}
+17 -5
View File
@@ -3,12 +3,13 @@ import { connect } from 'dva'
import Login from './login'
import { Layout } from '../components'
import { Spin } from 'antd'
import { classnames } from '../utils'
import { classnames, config } from '../utils'
import { Helmet } from 'react-helmet'
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,
@@ -55,7 +56,13 @@ function App ({ children, location, dispatch, app, loading }) {
}
return (
<div>{login
<div>
<Helmet>
<title>ANTD ADMIN</title>
<link rel="icon" href={config.logoSrc} type="image/x-icon" />
{config.iconFontUrl ? <script src={config.iconFontUrl}></script> : ''}
</Helmet>
{login
? <div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
{!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>
<Sider {...siderProps} />
@@ -70,8 +77,13 @@ function App ({ children, location, dispatch, app, loading }) {
</div>
<Footer />
</div>
</div>
: <div className={styles.spin}><Spin tip="加载用户信息..." spinning={loading} size="large"><Login {...loginProps} /></Spin></div>}</div>
</div> :
<div className={styles.spin}>
<Spin tip="加载用户信息..." spinning={loading} size="large">
<Login {...loginProps} />
</Spin>
</div>}
</div>
)
}
+21
View File
@@ -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
+20
View File
@@ -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;
}
}
+279
View File
@@ -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
+225
View File
@@ -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
+193
View File
@@ -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
+2 -1
View File
@@ -2,7 +2,8 @@ module.exports = {
name: 'Ant Design Admin',
prefix: 'antdAdmin',
footerText: 'Ant Design Admin 版权所有 © 2016 由 zuiidea 支持',
logoSrc: 'https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg',
logoSrc: 'https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png',
logoText: 'Antd Admin',
needLogin: true,
iconFontUrl: '//at.alicdn.com/t/font_c4y7asse3q1cq5mi.js',
}
+23
View File
@@ -31,12 +31,35 @@ module.exports = [
key: 'search',
name: 'Search 搜索',
},
{
key: 'editor',
name: 'Editor 编辑器',
},
{
key: 'layer',
name: 'layer 弹层【方法】',
},
],
},
{
key: 'chart',
name: 'Recharts',
icon: 'code-o',
child: [
{
key: 'lineChart',
name: 'LineChart',
},
{
key: 'barChart',
name: 'BarChart',
},
{
key: 'areaChart',
name: 'AreaChart',
},
],
},
{
key: 'navigation',
name: '测试导航',