Skip to content

GitLab

P
pro-blocks
Commit ca45dd03 authored by nikogu's avatar nikogu
Browse files
Options

update tag clound

parent 7c2ec988
Hide whitespace changes
Inline Side-by-side
Showing with 43 additions and 18 deletions
.roadhogrc
View file @ ca45dd03
...@@ -17,5 +17,9 @@ ...@@ -17,5 +17,9 @@
] ]
} }
}, },
"externals": {
"g2": "G2",
"g-cloud": "Cloud"
},
"theme": "./src/theme.js" "theme": "./src/theme.js"
} }
.roadhogrc.mock.js
View file @ ca45dd03
...@@ -62,7 +62,7 @@ const proxy = { ...@@ -62,7 +62,7 @@ const proxy = {
res.send('Ok'); res.send('Ok');
}, },
'GET /api/tags': mockjs.mock({ 'GET /api/tags': mockjs.mock({
'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }] 'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }]
}), }),
'GET /api/fake_list': getFakeList, 'GET /api/fake_list': getFakeList,
'GET /api/fake_chart_data': getFakeChartData, 'GET /api/fake_chart_data': getFakeChartData,
......
package.json
View file @ ca45dd03
...@@ -16,8 +16,6 @@ ...@@ -16,8 +16,6 @@
"dependencies": { "dependencies": {
"antd": "next", "antd": "next",
"dva": "^1.2.1", "dva": "^1.2.1",
"g-cloud": "^1.0.2-beta",
"g2": "^2.3.8",
"g2-plugin-slider": "^1.2.1", "g2-plugin-slider": "^1.2.1",
"lodash": "^4.17.4", "lodash": "^4.17.4",
"numeral": "^2.0.6", "numeral": "^2.0.6",
......
public/index.html
View file @ ca45dd03
...@@ -4,10 +4,13 @@ ...@@ -4,10 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ant Design Pro</title> <title>Ant Design Pro</title>
<link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="index.css" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.12/index.js"></script>
<script src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>
src/components/Charts/TagCloud/index.js
View file @ ca45dd03
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import classNames from 'classNames';
import G2 from 'g2'; import G2 from 'g2';
import Cloud from 'g-cloud'; import Cloud from 'g-cloud';
import styles from './index.less';
/* eslint no-underscore-dangle: 0 */ /* eslint no-underscore-dangle: 0 */
/* eslint no-param-reassign: 0 */ /* eslint no-param-reassign: 0 */
/* eslint no-return-assign: 0 */ /* eslint no-return-assign: 0 */
const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/SQlwcHhAbFVjjbDCLROB.png'; const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
// const imgUrl = 'https://zos.alipayobjects.com/rmsportal/EEFqYWuloqIHRnh.jpg'; // const imgUrl = 'https://zos.alipayobjects.com/rmsportal/EEFqYWuloqIHRnh.jpg';
class TagCloud extends PureComponent { class TagCloud extends PureComponent {
...@@ -28,8 +31,8 @@ class TagCloud extends PureComponent { ...@@ -28,8 +31,8 @@ class TagCloud extends PureComponent {
const textAttrs = Util.mix(true, {}, { const textAttrs = Util.mix(true, {}, {
fillOpacity: cfg.opacity, fillOpacity: cfg.opacity,
fontSize: cfg.size, fontSize: cfg.size,
// rotate: 0, // cfg.origin._origin.rotate,
rotate: cfg.origin._origin.rotate, rotate: cfg.origin._origin.rotate,
// rotate: cfg.origin._origin.rotate,
text: cfg.origin._origin.text, text: cfg.origin._origin.text,
textAlign: 'center', textAlign: 'center',
fill: cfg.color, fill: cfg.color,
...@@ -59,10 +62,12 @@ class TagCloud extends PureComponent { ...@@ -59,10 +62,12 @@ class TagCloud extends PureComponent {
return; return;
} }
const { height } = this.props; const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
const height = this.props.height * 4;
let width = 0; let width = 0;
if (this.root) { if (this.root) {
width = this.root.offsetWidth; width = this.root.offsetWidth * 4;
} }
// clean // clean
...@@ -81,8 +86,10 @@ class TagCloud extends PureComponent { ...@@ -81,8 +86,10 @@ class TagCloud extends PureComponent {
width, width,
height, height,
// 设定文字大小配置函数(默认为12-40px的随机大小) rotate: () => 0,
size: words => (((words.value - min) / (max - min)) * 4) + 10,
// 设定文字大小配置函数(默认为12-24px的随机大小)
size: words => (((words.value - min) / (max - min)) * 50) + 30,
// 设定文字内容 // 设定文字内容
text: words => words.name, text: words => words.name,
...@@ -112,7 +119,7 @@ class TagCloud extends PureComponent { ...@@ -112,7 +119,7 @@ class TagCloud extends PureComponent {
chart chart
.point() .point()
.position('x*y') .position('x*y')
.color('text') .color('text', colors)
.size('size', size => size) .size('size', size => size)
.shape('cloud') .shape('cloud')
.style({ .style({
...@@ -128,8 +135,12 @@ class TagCloud extends PureComponent { ...@@ -128,8 +135,12 @@ class TagCloud extends PureComponent {
render() { render() {
return ( return (
<div ref={n => (this.root = n)} style={{ width: '100%' }}> <div
<div ref={n => (this.node = n)} /> className={classNames(styles.tagCloud, this.props.className)}
ref={n => (this.root = n)}
style={{ width: '100%' }}
>
<div ref={n => (this.node = n)} style={{ height: this.props.height }} />
</div> </div>
); );
} }
......
src/components/Charts/TagCloud/index.less 0 → 100644
View file @ ca45dd03
.tagCloud {
canvas {
transform: scale(0.25);
transform-origin: 0 0;
}
}
src/components/NoticeIcon/demo/popover.md
View file @ ca45dd03
...@@ -52,19 +52,19 @@ ReactDOM.render( ...@@ -52,19 +52,19 @@ ReactDOM.render(
> >
<NoticeIcon count={5} onItemClick={onItemClick} onClear={onClear}> <NoticeIcon count={5} onItemClick={onItemClick} onClear={onClear}>
<NoticeIcon.Tab <NoticeIcon.Tab
list={noticeData['通知']} list={data}
title="通知" title="通知"
emptyText="你已查看所有通知" emptyText="你已查看所有通知"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
/> />
<NoticeIcon.Tab <NoticeIcon.Tab
list={noticeData['消息']} list={data}
title="消息" title="消息"
emptyText="您已读完所有消息" emptyText="您已读完所有消息"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
/> />
<NoticeIcon.Tab <NoticeIcon.Tab
list={noticeData['待办']} list={data}
title="待办" title="待办"
emptyText="你已完成所有待办" emptyText="你已完成所有待办"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg" emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
......
src/routes/Dashboard/Monitor.js
View file @ ca45dd03
...@@ -104,7 +104,7 @@ export default class Monitor extends PureComponent { ...@@ -104,7 +104,7 @@ export default class Monitor extends PureComponent {
</Col> </Col>
</Row> </Row>
<Row gutter={24}> <Row gutter={24}>
<Col lg={12} sm={24} xs={24}> <Col xl={8} lg={24} sm={24} xs={24}>
<Card <Card
title="各品类占比" title="各品类占比"
style={{ marginBottom: 24 }} style={{ marginBottom: 24 }}
...@@ -113,6 +113,7 @@ export default class Monitor extends PureComponent { ...@@ -113,6 +113,7 @@ export default class Monitor extends PureComponent {
<Row gutter={4} style={{ padding: '18px 0 19px 0' }}> <Row gutter={4} style={{ padding: '18px 0 19px 0' }}>
<Col span={8}> <Col span={8}>
<Pie <Pie
animate={false}
percent={28} percent={28}
subTitle="中式快餐" subTitle="中式快餐"
total="28%" total="28%"
...@@ -121,6 +122,7 @@ export default class Monitor extends PureComponent { ...@@ -121,6 +122,7 @@ export default class Monitor extends PureComponent {
</Col> </Col>
<Col span={8}> <Col span={8}>
<Pie <Pie
animate={false}
color="#5DDECF" color="#5DDECF"
percent={22} percent={22}
subTitle="西餐" subTitle="西餐"
...@@ -130,6 +132,7 @@ export default class Monitor extends PureComponent { ...@@ -130,6 +132,7 @@ export default class Monitor extends PureComponent {
</Col> </Col>
<Col span={8}> <Col span={8}>
<Pie <Pie
animate={false}
color="#2FC25B" color="#2FC25B"
percent={32} percent={32}
subTitle="火锅" subTitle="火锅"
...@@ -140,7 +143,7 @@ export default class Monitor extends PureComponent { ...@@ -140,7 +143,7 @@ export default class Monitor extends PureComponent {
</Row> </Row>
</Card> </Card>
</Col> </Col>
<Col lg={6} sm={12} xs={24} style={{ marginBottom: 24 }}> <Col xl={8} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="热门搜索" bordered={false}> <Card title="热门搜索" bordered={false}>
<TagCloud <TagCloud
data={tags} data={tags}
...@@ -148,7 +151,7 @@ export default class Monitor extends PureComponent { ...@@ -148,7 +151,7 @@ export default class Monitor extends PureComponent {
/> />
</Card> </Card>
</Col> </Col>
<Col lg={6} sm={12} xs={24} style={{ marginBottom: 24 }}> <Col xl={8} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="资源剩余" bodyStyle={{ textAlign: 'center' }} bordered={false}> <Card title="资源剩余" bodyStyle={{ textAlign: 'center' }} bordered={false}>
<WaterWave <WaterWave
height={161} height={161}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment