mirror of
https://github.com/zuiidea/antd-admin.git
synced 2024-04-21 12:32:14 +00:00
🔥 Removing unnecessary pages.
This commit is contained in:
zuiidea
@@ -1,3 +1,4 @@
|
||||
module.exports = {
|
||||
testURL: 'http://localhost:8000',
|
||||
experimentalDecorators: true
|
||||
}
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import { Mock, Constant } from './_utils'
|
||||
|
||||
const { ApiPrefix } = Constant
|
||||
|
||||
let postId = 0
|
||||
const database = Mock.mock({
|
||||
'data|100': [
|
||||
{
|
||||
id() {
|
||||
postId += 1
|
||||
return postId + 10000
|
||||
},
|
||||
'status|1-2': 1,
|
||||
title: '@title',
|
||||
author: '@last',
|
||||
categories: '@word',
|
||||
tags: '@word',
|
||||
'views|10-200': 1,
|
||||
'comments|10-200': 1,
|
||||
visibility: () => {
|
||||
return Mock.mock(
|
||||
'@pick(["Public",' + '"Password protected", ' + '"Private"])'
|
||||
)
|
||||
},
|
||||
date: '@dateTime',
|
||||
image() {
|
||||
return Mock.Random.image(
|
||||
'100x100',
|
||||
Mock.Random.color(),
|
||||
'#757575',
|
||||
'png',
|
||||
this.author.substr(0, 1)
|
||||
)
|
||||
},
|
||||
},
|
||||
],
|
||||
}).data
|
||||
|
||||
module.exports = {
|
||||
[`GET ${ApiPrefix}/posts`](req, res) {
|
||||
const { query } = req
|
||||
let { pageSize, page, ...other } = query
|
||||
pageSize = pageSize || 10
|
||||
page = page || 1
|
||||
|
||||
let newData = database
|
||||
for (let key in other) {
|
||||
if ({}.hasOwnProperty.call(other, key)) {
|
||||
newData = newData.filter(item => {
|
||||
if ({}.hasOwnProperty.call(item, key)) {
|
||||
return (
|
||||
String(item[key])
|
||||
.trim()
|
||||
.indexOf(decodeURI(other[key]).trim()) > -1
|
||||
)
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
res.status(200).json({
|
||||
data: newData.slice((page - 1) * pageSize, page * pageSize),
|
||||
total: newData.length,
|
||||
})
|
||||
},
|
||||
}
|
||||
+1
-59
@@ -17,14 +17,6 @@ const database = [
|
||||
icon: 'user',
|
||||
route: '/user',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'Posts',
|
||||
zhName: '文章管理',
|
||||
icon: 'shopping-cart',
|
||||
route: '/post',
|
||||
},
|
||||
{
|
||||
id: '21',
|
||||
menuParentId: '-1',
|
||||
@@ -33,64 +25,14 @@ const database = [
|
||||
zhName: '用户详情',
|
||||
route: '/user/:id',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'Request',
|
||||
zhName: 'Request',
|
||||
icon: 'api',
|
||||
route: '/request',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'UI Element',
|
||||
zhName: 'UI组件',
|
||||
icon: 'camera-o',
|
||||
},
|
||||
{
|
||||
id: '45',
|
||||
breadcrumbParentId: '4',
|
||||
menuParentId: '4',
|
||||
name: 'Editor',
|
||||
zhName: 'Editor',
|
||||
icon: 'edit',
|
||||
route: '/UIElement/editor',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'Charts',
|
||||
zhName: 'Charts',
|
||||
icon: 'code-o',
|
||||
},
|
||||
{
|
||||
id: '51',
|
||||
breadcrumbParentId: '5',
|
||||
menuParentId: '5',
|
||||
name: 'ECharts',
|
||||
zhName: 'ECharts',
|
||||
icon: 'line-chart',
|
||||
route: '/chart/ECharts',
|
||||
},
|
||||
{
|
||||
id: '52',
|
||||
breadcrumbParentId: '5',
|
||||
menuParentId: '5',
|
||||
name: 'HighCharts',
|
||||
zhName: 'HighCharts',
|
||||
icon: 'bar-chart',
|
||||
route: '/chart/highCharts',
|
||||
},
|
||||
{
|
||||
id: '53',
|
||||
breadcrumbParentId: '5',
|
||||
menuParentId: '5',
|
||||
name: 'Rechartst',
|
||||
zhName: 'Rechartst',
|
||||
icon: 'area-chart',
|
||||
route: '/chart/Recharts',
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
module.exports = {
|
||||
|
||||
@@ -10,17 +10,12 @@
|
||||
"axios": "^0.18.0",
|
||||
"babel-core": "7.0.0-bridge.0",
|
||||
"classnames": "^2.2.6",
|
||||
"d3-shape": "^1.2.2",
|
||||
"draftjs-to-html": "^0.8.4",
|
||||
"draftjs-to-markdown": "^0.5.1",
|
||||
"dva-model-extend": "^0.1.2",
|
||||
"echarts": "^4.2.0-rc.2",
|
||||
"echarts-for-react": "^2.0.15-beta.0",
|
||||
"echarts-gl": "^1.1.1",
|
||||
"echarts-liquidfill": "^2.0.2",
|
||||
"enquire-js": "^0.2.1",
|
||||
"highcharts-exporting": "^0.1.7",
|
||||
"highcharts-more": "^0.1.7",
|
||||
"json-format": "^1.0.1",
|
||||
"lodash": "^4.17.11",
|
||||
"md5": "^2.2.1",
|
||||
@@ -28,14 +23,9 @@
|
||||
"path-to-regexp": "^2.4.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"qs": "^6.5.2",
|
||||
"rc-tween-one": "^2.2.17",
|
||||
"react-adsense": "^0.0.6",
|
||||
"react-countup": "^4.0.0-alpha.6",
|
||||
"react-draft-wysiwyg": "^1.12.13",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-highcharts": "^16.0.2",
|
||||
"react-perfect-scrollbar": "^1.4.2",
|
||||
"recharts": "^1.3.6",
|
||||
"store": "^2.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -58,7 +48,6 @@
|
||||
"less-vars-to-js": "^1.3.0",
|
||||
"lint-staged": "^8.0.4",
|
||||
"mockjs": "^1.0.1-beta3",
|
||||
"module": "^1.2.5",
|
||||
"prettier": "^1.15.2",
|
||||
"stylelint": "^9.8.0",
|
||||
"stylelint-config-prettier": "^4.0.0",
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
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'
|
||||
|
||||
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,
|
||||
style: {
|
||||
marginBottom: 32,
|
||||
},
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react'
|
||||
import AdSense from 'react-adsense'
|
||||
import { Link } from 'react-router'
|
||||
import DynamicChartComponent from './DynamicChartComponent.js'
|
||||
|
||||
@@ -15,8 +14,6 @@ const MainPageComponent = () => {
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<AdSense.Google client="ca-pub-7292810486004926" slot="7806394673" />
|
||||
|
||||
<h4>
|
||||
<Link to="/echarts/simple">Simple demo</Link> |
|
||||
<Link to="/echarts/loading">Echarts loading</Link> |
|
||||
|
||||
@@ -1,360 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Row, Col, Card, Button } from 'antd'
|
||||
import * as d3 from 'd3-shape'
|
||||
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'
|
||||
import Container from './Container'
|
||||
|
||||
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 AreaChartPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button
|
||||
type="primary"
|
||||
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 AreaChartPage
|
||||
@@ -1,260 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Row, Col, Card, Button } from 'antd'
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
import Container from './Container'
|
||||
|
||||
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 BarChartPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button
|
||||
type="primary"
|
||||
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 BarChartPage
|
||||
@@ -1,27 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { ResponsiveContainer } from 'recharts'
|
||||
import styles from './Container.less'
|
||||
|
||||
const Container = ({
|
||||
children,
|
||||
ratio = 5 / 2,
|
||||
minHeight = 250,
|
||||
maxHeight = 350,
|
||||
}) => (
|
||||
<div className={styles.container} style={{ minHeight, maxHeight }}>
|
||||
<div style={{ marginTop: `${100 / ratio}%` || '100%' }} />
|
||||
<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
|
||||
@@ -1,20 +0,0 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
:global {
|
||||
.recharts-responsive-container {
|
||||
width: e('calc(100% + 56px)') !important;
|
||||
margin-left: -32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -1,261 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Row, Col, Card, Button } from 'antd'
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
import Container from './Container'
|
||||
|
||||
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 LineChartPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button
|
||||
type="primary"
|
||||
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 LineChartPage
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import AreaChartComponent from './AreaChartComponent'
|
||||
import BarChartComponent from './BarChartComponent'
|
||||
import LineChartComponent from './LineChartComponent'
|
||||
|
||||
const ReChartsComponent = ({ type }) => {
|
||||
if (type === 'areaChart') return <AreaChartComponent />
|
||||
if (type === 'barChart') return <BarChartComponent />
|
||||
return <LineChartComponent />
|
||||
}
|
||||
|
||||
ReChartsComponent.propTypes = {
|
||||
type: PropTypes.string,
|
||||
}
|
||||
|
||||
export default ReChartsComponent
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Radio } from 'antd'
|
||||
import { Page } from 'components'
|
||||
import ReChartsComponent from './ReChartsComponent'
|
||||
import styles from './index.less'
|
||||
|
||||
const RadioGroup = Radio.Group
|
||||
|
||||
const chartList = [
|
||||
{
|
||||
label: 'lineChart',
|
||||
value: 'lineChart',
|
||||
},
|
||||
{
|
||||
label: 'barChart',
|
||||
value: 'barChart',
|
||||
},
|
||||
{
|
||||
label: 'areaChart',
|
||||
value: 'areaChart',
|
||||
},
|
||||
]
|
||||
|
||||
class Chart extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = {
|
||||
type: '',
|
||||
}
|
||||
this.handleRadioGroupChange = this.handleRadioGroupChange.bind(this)
|
||||
}
|
||||
handleRadioGroupChange(e) {
|
||||
this.setState({
|
||||
type: e.target.value,
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Page inner>
|
||||
<RadioGroup
|
||||
options={chartList}
|
||||
defaultValue="lineChart"
|
||||
onChange={this.handleRadioGroupChange}
|
||||
/>
|
||||
<div className={styles.chart}>
|
||||
<ReChartsComponent type={this.state.type} />
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart
|
||||
@@ -1,8 +0,0 @@
|
||||
.chart {
|
||||
:global {
|
||||
.ant-card {
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import HighstockComponent from './HighstockComponent'
|
||||
import HighmapsComponent from './HighmapsComponent'
|
||||
import HighMoreComponent from './HighMoreComponent'
|
||||
|
||||
const HighChartsComponent = ({ type }) => {
|
||||
if (type === 'Highmaps') return <HighmapsComponent />
|
||||
if (type === 'HighMore') return <HighMoreComponent />
|
||||
return <HighstockComponent />
|
||||
}
|
||||
|
||||
HighChartsComponent.propTypes = {
|
||||
type: PropTypes.string,
|
||||
}
|
||||
|
||||
export default HighChartsComponent
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactHighcharts from 'react-highcharts'
|
||||
import HighchartsExporting from 'highcharts-exporting'
|
||||
import HighchartsMore from 'highcharts-more'
|
||||
|
||||
HighchartsMore(ReactHighcharts.Highcharts)
|
||||
HighchartsExporting(ReactHighcharts.Highcharts)
|
||||
|
||||
const config = {
|
||||
chart: {
|
||||
polar: true,
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec',
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
29.9,
|
||||
71.5,
|
||||
106.4,
|
||||
129.2,
|
||||
144.0,
|
||||
176.0,
|
||||
135.6,
|
||||
148.5,
|
||||
216.4,
|
||||
194.1,
|
||||
95.6,
|
||||
54.4,
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const HighMoreComponent = () => {
|
||||
return <ReactHighcharts config={config} />
|
||||
}
|
||||
|
||||
export default HighMoreComponent
|
||||
@@ -1,81 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactHighmaps from 'react-highcharts/ReactHighmaps.src'
|
||||
import maps from './mapdata/europe'
|
||||
|
||||
const config = {
|
||||
chart: {
|
||||
spacingBottom: 20,
|
||||
},
|
||||
title: {
|
||||
text: 'Europe time zones',
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: true,
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
map: {
|
||||
allAreas: false,
|
||||
joinBy: ['iso-a2', 'code'],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
color: 'white',
|
||||
style: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
mapData: maps,
|
||||
tooltip: {
|
||||
headerFormat: '',
|
||||
pointFormat: '{point.name}: <b>{series.name}</b>',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'UTC',
|
||||
data: ['IE', 'IS', 'GB', 'PT'].map(code => {
|
||||
return { code }
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: 'UTC + 1',
|
||||
data: [
|
||||
'NO',
|
||||
'SE',
|
||||
'DK',
|
||||
'DE',
|
||||
'NL',
|
||||
'BE',
|
||||
'LU',
|
||||
'ES',
|
||||
'FR',
|
||||
'PL',
|
||||
'CZ',
|
||||
'AT',
|
||||
'CH',
|
||||
'LI',
|
||||
'SK',
|
||||
'HU',
|
||||
'SI',
|
||||
'IT',
|
||||
'SM',
|
||||
'HR',
|
||||
'BA',
|
||||
'YF',
|
||||
'ME',
|
||||
'AL',
|
||||
'MK',
|
||||
].map(code => {
|
||||
return { code }
|
||||
}),
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const HighmapsComponent = () => {
|
||||
return <ReactHighmaps config={config} />
|
||||
}
|
||||
export default HighmapsComponent
|
||||
@@ -1,99 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactHighstock from 'react-highcharts/ReactHighstock.src'
|
||||
|
||||
const data = [
|
||||
[1220832000000, 22.56],
|
||||
[1220918400000, 21.67],
|
||||
[1221004800000, 21.66],
|
||||
[1221091200000, 21.81],
|
||||
[1221177600000, 21.28],
|
||||
[1221436800000, 20.05],
|
||||
[1221523200000, 19.98],
|
||||
[1221609600000, 18.26],
|
||||
[1221696000000, 19.16],
|
||||
[1221782400000, 20.13],
|
||||
[1222041600000, 18.72],
|
||||
[1222128000000, 18.12],
|
||||
[1222214400000, 18.39],
|
||||
[1222300800000, 18.85],
|
||||
[1222387200000, 18.32],
|
||||
[1222646400000, 15.04],
|
||||
[1222732800000, 16.24],
|
||||
[1222819200000, 15.59],
|
||||
[1222905600000, 14.3],
|
||||
[1222992000000, 13.87],
|
||||
[1223251200000, 14.02],
|
||||
[1223337600000, 12.74],
|
||||
[1223424000000, 12.83],
|
||||
[1223510400000, 12.68],
|
||||
[1223596800000, 13.8],
|
||||
[1223856000000, 15.75],
|
||||
[1223942400000, 14.87],
|
||||
[1224028800000, 13.99],
|
||||
[1224115200000, 14.56],
|
||||
[1224201600000, 13.91],
|
||||
[1224460800000, 14.06],
|
||||
[1224547200000, 13.07],
|
||||
[1224633600000, 13.84],
|
||||
[1224720000000, 14.03],
|
||||
[1224806400000, 13.77],
|
||||
[1225065600000, 13.16],
|
||||
[1225152000000, 14.27],
|
||||
[1225238400000, 14.94],
|
||||
[1225324800000, 15.86],
|
||||
[1225411200000, 15.37],
|
||||
[1225670400000, 15.28],
|
||||
[1225756800000, 15.86],
|
||||
[1225843200000, 14.76],
|
||||
[1225929600000, 14.16],
|
||||
[1226016000000, 14.03],
|
||||
[1226275200000, 13.7],
|
||||
[1226361600000, 13.54],
|
||||
[1226448000000, 12.87],
|
||||
[1226534400000, 13.78],
|
||||
[1226620800000, 12.89],
|
||||
[1226880000000, 12.59],
|
||||
[1226966400000, 12.84],
|
||||
[1227052800000, 12.33],
|
||||
[1227139200000, 11.5],
|
||||
[1227225600000, 11.8],
|
||||
[1227484800000, 13.28],
|
||||
[1227571200000, 12.97],
|
||||
[1227657600000, 13.57],
|
||||
[1227830400000, 13.24],
|
||||
[1228089600000, 12.7],
|
||||
[1228176000000, 13.21],
|
||||
[1228262400000, 13.7],
|
||||
[1228348800000, 13.06],
|
||||
[1228435200000, 13.43],
|
||||
[1228694400000, 14.25],
|
||||
[1228780800000, 14.29],
|
||||
[1228867200000, 14.03],
|
||||
[1228953600000, 13.57],
|
||||
[1229040000000, 14.04],
|
||||
[1229299200000, 13.54],
|
||||
]
|
||||
|
||||
const config = {
|
||||
rangeSelector: {
|
||||
selected: 1,
|
||||
},
|
||||
title: {
|
||||
text: 'AAPL Stock Price',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'AAPL',
|
||||
data,
|
||||
tooltip: {
|
||||
valueDecimals: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const HighstockComponent = () => {
|
||||
return <ReactHighstock config={config} />
|
||||
}
|
||||
|
||||
export default HighstockComponent
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Radio } from 'antd'
|
||||
import { Page } from 'components'
|
||||
import HighChartsComponent from './HighChartsComponent'
|
||||
import styles from './index.less'
|
||||
|
||||
const RadioGroup = Radio.Group
|
||||
|
||||
const chartList = [
|
||||
{
|
||||
label: 'Highstock',
|
||||
value: 'Highstock',
|
||||
},
|
||||
{
|
||||
label: 'Highmaps',
|
||||
value: 'Highmaps',
|
||||
},
|
||||
{
|
||||
label: 'HighMore',
|
||||
value: 'HighMore',
|
||||
},
|
||||
]
|
||||
|
||||
class Chart extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = {
|
||||
type: '',
|
||||
}
|
||||
this.handleRadioGroupChange = this.handleRadioGroupChange.bind(this)
|
||||
}
|
||||
handleRadioGroupChange(e) {
|
||||
this.setState({
|
||||
type: e.target.value,
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Page inner>
|
||||
<RadioGroup
|
||||
options={chartList}
|
||||
defaultValue="Highstock"
|
||||
onChange={this.handleRadioGroupChange}
|
||||
/>
|
||||
<div className={styles.chart}>
|
||||
<HighChartsComponent type={this.state.type} />
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart
|
||||
@@ -1,7 +0,0 @@
|
||||
.chart {
|
||||
:global {
|
||||
.ant-radio-wrapper {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,74 +0,0 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import { Table, Avatar } from 'antd'
|
||||
import { withI18n } from '@lingui/react'
|
||||
import { Ellipsis } from 'ant-design-pro'
|
||||
import styles from './List.less'
|
||||
|
||||
@withI18n()
|
||||
class List extends PureComponent {
|
||||
render() {
|
||||
const { i18n, ...tableProps } = this.props
|
||||
const columns = [
|
||||
{
|
||||
title: i18n.t`Image`,
|
||||
dataIndex: 'image',
|
||||
render: text => <Avatar shape="square" src={text} />,
|
||||
},
|
||||
{
|
||||
title: i18n.t`Title`,
|
||||
dataIndex: 'title',
|
||||
render: text => (
|
||||
<Ellipsis tooltip length={30}>
|
||||
{text}
|
||||
</Ellipsis>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: i18n.t`Author`,
|
||||
dataIndex: 'author',
|
||||
},
|
||||
{
|
||||
title: i18n.t`Categories`,
|
||||
dataIndex: 'categories',
|
||||
},
|
||||
{
|
||||
title: i18n.t`Tags`,
|
||||
dataIndex: 'tags',
|
||||
},
|
||||
{
|
||||
title: i18n.t`Visibility`,
|
||||
dataIndex: 'visibility',
|
||||
},
|
||||
{
|
||||
title: i18n.t`Comments`,
|
||||
dataIndex: 'comments',
|
||||
},
|
||||
{
|
||||
title: i18n.t`Views`,
|
||||
dataIndex: 'views',
|
||||
},
|
||||
{
|
||||
title: i18n.t`Publish Date`,
|
||||
dataIndex: 'date',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Table
|
||||
{...tableProps}
|
||||
pagination={{
|
||||
...tableProps.pagination,
|
||||
showTotal: total => i18n.t`Total ${total} Items`,
|
||||
}}
|
||||
bordered
|
||||
scroll={{ x: 1200 }}
|
||||
className={styles.table}
|
||||
columns={columns}
|
||||
simple
|
||||
rowKey={record => record.id}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default List
|
||||
@@ -1,7 +0,0 @@
|
||||
.table {
|
||||
:global {
|
||||
.ant-table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'dva'
|
||||
import { Tabs } from 'antd'
|
||||
import { router } from 'utils'
|
||||
import { stringify } from 'qs'
|
||||
import { withI18n } from '@lingui/react'
|
||||
import { Page } from 'components'
|
||||
import List from './components/List'
|
||||
|
||||
const { TabPane } = Tabs
|
||||
|
||||
const EnumPostStatus = {
|
||||
UNPUBLISH: 1,
|
||||
PUBLISHED: 2,
|
||||
}
|
||||
|
||||
@withI18n()
|
||||
@connect(({ post, loading }) => ({ post, loading }))
|
||||
class Post extends PureComponent {
|
||||
render() {
|
||||
const { post, loading, location, i18n } = this.props
|
||||
const { list, pagination } = post
|
||||
const { query, pathname } = location
|
||||
|
||||
const listProps = {
|
||||
pagination,
|
||||
dataSource: list,
|
||||
loading: loading.effects['post/query'],
|
||||
onChange(page) {
|
||||
router.push({
|
||||
pathname,
|
||||
search: stringify({
|
||||
...query,
|
||||
page: page.current,
|
||||
pageSize: page.pageSize,
|
||||
}),
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
const handleTabClick = key => {
|
||||
router.push({
|
||||
pathname,
|
||||
search: stringify({
|
||||
status: key,
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Page inner>
|
||||
<Tabs
|
||||
activeKey={
|
||||
query.status === String(EnumPostStatus.UNPUBLISH)
|
||||
? String(EnumPostStatus.UNPUBLISH)
|
||||
: String(EnumPostStatus.PUBLISHED)
|
||||
}
|
||||
onTabClick={handleTabClick}
|
||||
>
|
||||
<TabPane
|
||||
tab={i18n.t`Publised`}
|
||||
key={String(EnumPostStatus.PUBLISHED)}
|
||||
>
|
||||
<List {...listProps} />
|
||||
</TabPane>
|
||||
<TabPane
|
||||
tab={i18n.t`Unpublished`}
|
||||
key={String(EnumPostStatus.UNPUBLISH)}
|
||||
>
|
||||
<List {...listProps} />
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Post.propTypes = {
|
||||
post: PropTypes.object,
|
||||
loading: PropTypes.object,
|
||||
location: PropTypes.object,
|
||||
dispatch: PropTypes.func,
|
||||
}
|
||||
|
||||
export default Post
|
||||
@@ -1,45 +0,0 @@
|
||||
import modelExtend from 'dva-model-extend'
|
||||
import { queryPostList } from 'api'
|
||||
import { pathMatchRegexp } from 'utils'
|
||||
import { pageModel } from 'utils/model'
|
||||
|
||||
export default modelExtend(pageModel, {
|
||||
namespace: 'post',
|
||||
|
||||
subscriptions: {
|
||||
setup({ dispatch, history }) {
|
||||
history.listen(location => {
|
||||
if (pathMatchRegexp('/post', location.pathname)) {
|
||||
dispatch({
|
||||
type: 'query',
|
||||
payload: {
|
||||
status: 2,
|
||||
...location.query,
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
effects: {
|
||||
*query({ payload }, { call, put }) {
|
||||
const data = yield call(queryPostList, payload)
|
||||
if (data.success) {
|
||||
yield put({
|
||||
type: 'querySuccess',
|
||||
payload: {
|
||||
list: data.data,
|
||||
pagination: {
|
||||
current: Number(payload.page) || 1,
|
||||
pageSize: Number(payload.pageSize) || 10,
|
||||
total: data.total,
|
||||
},
|
||||
},
|
||||
})
|
||||
} else {
|
||||
throw data
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -1,254 +0,0 @@
|
||||
import React from 'react'
|
||||
import { request } from 'utils'
|
||||
import { apiPrefix } from 'utils/config'
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Select,
|
||||
Input,
|
||||
Button,
|
||||
List,
|
||||
Tag,
|
||||
Form,
|
||||
Icon,
|
||||
Checkbox,
|
||||
} from 'antd'
|
||||
import classnames from 'classnames'
|
||||
import { Trans } from '@lingui/react'
|
||||
import api from '@/services/api'
|
||||
import { Page } from 'components'
|
||||
|
||||
import styles from './index.less'
|
||||
|
||||
const { Option } = Select
|
||||
const InputGroup = Input.Group
|
||||
const methods = ['POST', 'GET', 'PUT', 'PATCH', 'DELETE']
|
||||
|
||||
const methodTagColor = {
|
||||
GET: 'green',
|
||||
POST: 'orange',
|
||||
DELETE: 'red',
|
||||
PUT: 'geekblue',
|
||||
}
|
||||
|
||||
const requests = Object.values(api).map(item => {
|
||||
let url = apiPrefix + item
|
||||
let method = 'GET'
|
||||
const paramsArray = item.split(' ')
|
||||
if (paramsArray.length === 2) {
|
||||
method = paramsArray[0]
|
||||
url = apiPrefix + paramsArray[1]
|
||||
}
|
||||
return {
|
||||
method,
|
||||
url,
|
||||
}
|
||||
})
|
||||
|
||||
let uuid = 2
|
||||
@Form.create()
|
||||
class RequestPage extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
method: 'GET',
|
||||
url: '/api/v1/routes',
|
||||
keys: [1],
|
||||
result: null,
|
||||
visible: true,
|
||||
}
|
||||
}
|
||||
|
||||
handleRequest = () => {
|
||||
const { method, url } = this.state
|
||||
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
const params = {}
|
||||
if (values.key) {
|
||||
values.key.forEach((item, index) => {
|
||||
if (item && values.check[index]) {
|
||||
params[item] = values.value[index]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
request({ method, url, data: params }).then(data => {
|
||||
this.setState({
|
||||
result: JSON.stringify(data),
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
handleClickListItem = ({ method, url }) => {
|
||||
this.setState({
|
||||
method,
|
||||
url,
|
||||
keys: [uuid++],
|
||||
result: null,
|
||||
})
|
||||
}
|
||||
|
||||
handleInputChange = e => {
|
||||
this.setState({
|
||||
url: e.target.value,
|
||||
})
|
||||
}
|
||||
|
||||
handleSelectChange = method => {
|
||||
this.setState({
|
||||
method,
|
||||
})
|
||||
}
|
||||
|
||||
handleAddField = () => {
|
||||
const { keys } = this.state
|
||||
const nextKeys = keys.concat(uuid)
|
||||
uuid++
|
||||
this.setState({
|
||||
keys: nextKeys,
|
||||
})
|
||||
}
|
||||
|
||||
handleRemoveField = key => {
|
||||
const { keys } = this.state
|
||||
this.setState({
|
||||
keys: keys.filter(item => item !== key),
|
||||
})
|
||||
}
|
||||
|
||||
handleVisible = () => {
|
||||
this.setState({
|
||||
visible: !this.state.visible,
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { result, url, method, keys, visible } = this.state
|
||||
const { getFieldDecorator } = this.props.form
|
||||
|
||||
return (
|
||||
<Page inner>
|
||||
<Row>
|
||||
<Col lg={8} md={24}>
|
||||
<List
|
||||
className={styles.requestList}
|
||||
dataSource={requests}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
className={classnames(styles.listItem, {
|
||||
[styles.lstItemActive]:
|
||||
item.method === method && item.url === url,
|
||||
})}
|
||||
onClick={this.handleClickListItem.bind(this, item)}
|
||||
>
|
||||
<span style={{ width: 72 }}>
|
||||
<Tag
|
||||
style={{ marginRight: 8 }}
|
||||
color={methodTagColor[item.method]}
|
||||
>
|
||||
{item.method}
|
||||
</Tag>
|
||||
</span>
|
||||
{item.url}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={16} md={24}>
|
||||
<Row type="flex" justify="space-between">
|
||||
<InputGroup compact size="large" style={{ flex: 1 }}>
|
||||
<Select
|
||||
size="large"
|
||||
value={method}
|
||||
style={{ width: 100 }}
|
||||
onChange={this.handleSelectChange}
|
||||
>
|
||||
{methods.map(item => (
|
||||
<Option value={item} key={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
<Input
|
||||
value={url}
|
||||
onChange={this.handleInputChange}
|
||||
style={{ width: 'calc(100% - 200px)' }}
|
||||
/>
|
||||
<Button
|
||||
ghost={visible}
|
||||
type={visible ? 'primary' : ''}
|
||||
onClick={this.handleVisible}
|
||||
size="large"
|
||||
>
|
||||
<Trans>Params</Trans>
|
||||
</Button>
|
||||
</InputGroup>
|
||||
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
style={{ width: 100 }}
|
||||
onClick={this.handleRequest}
|
||||
>
|
||||
<Trans>Send</Trans>
|
||||
</Button>
|
||||
</Row>
|
||||
|
||||
<div
|
||||
className={classnames(styles.paramsBlock, {
|
||||
[styles.hideParams]: !visible,
|
||||
})}
|
||||
>
|
||||
{keys.map((key, index) => (
|
||||
<Row
|
||||
gutter={8}
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
key={key}
|
||||
>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
{getFieldDecorator(`check[${key}]`, {
|
||||
initialValue: true,
|
||||
})(<Checkbox defaultChecked />)}
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
{getFieldDecorator(`key[${key}]`)(
|
||||
<Input placeholder="Key" />
|
||||
)}
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
{getFieldDecorator(`value[${key}]`)(
|
||||
<Input placeholder="Value" />
|
||||
)}
|
||||
</Col>
|
||||
<Col style={{ marginTop: 8 }}>
|
||||
<Icon
|
||||
onClick={this.handleRemoveField.bind(this, key)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
type="close"
|
||||
theme="outlined"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
))}
|
||||
|
||||
<Row style={{ marginTop: 8 }}>
|
||||
<Button onClick={this.handleAddField}>
|
||||
<Trans>Add Param</Trans>
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div className={styles.result}>{result}</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default RequestPage
|
||||
@@ -1,39 +0,0 @@
|
||||
@import '~themes/vars';
|
||||
|
||||
.result {
|
||||
height: 600px;
|
||||
width: 100%;
|
||||
background: @hover-color;
|
||||
border-color: #ddd;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
word-break: break-word;
|
||||
line-height: 2;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.requestList {
|
||||
padding-right: 24px;
|
||||
margin-bottom: 24px;
|
||||
.listItem {
|
||||
cursor: pointer;
|
||||
padding-left: 8px;
|
||||
&.lstItemActive {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
.background-hover();
|
||||
}
|
||||
}
|
||||
|
||||
.paramsBlock {
|
||||
overflow: visible;
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
transition: opacity 0.3s;
|
||||
&.hideParams {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user