Skip to content

GitLab

A
ant-design-pro
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 @@
]
}
},
"externals": {
"g2": "G2",
"g-cloud": "Cloud"
},
"theme": "./src/theme.js"
}
.roadhogrc.mock.js
View file @ ca45dd03
......@@ -62,7 +62,7 @@ const proxy = {
res.send('Ok');
},
'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_chart_data': getFakeChartData,
......
package.json
View file @ ca45dd03
......@@ -16,8 +16,6 @@
"dependencies": {
"antd": "next",
"dva": "^1.2.1",
"g-cloud": "^1.0.2-beta",
"g2": "^2.3.8",
"g2-plugin-slider": "^1.2.1",
"lodash": "^4.17.4",
"numeral": "^2.0.6",
......
public/index.html
View file @ ca45dd03
......@@ -4,10 +4,13 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ant Design Pro</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<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>
</body>
</html>
src/components/Charts/TagCloud/index.js
View file @ ca45dd03
import React, { PureComponent } from 'react';
import classNames from 'classNames';
import G2 from 'g2';
import Cloud from 'g-cloud';
import styles from './index.less';
/* eslint no-underscore-dangle: 0 */
/* eslint no-param-reassign: 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';
class TagCloud extends PureComponent {
......@@ -28,8 +31,8 @@ class TagCloud extends PureComponent {
const textAttrs = Util.mix(true, {}, {
fillOpacity: cfg.opacity,
fontSize: cfg.size,
// rotate: 0, // cfg.origin._origin.rotate,
rotate: cfg.origin._origin.rotate,
// rotate: cfg.origin._origin.rotate,
text: cfg.origin._origin.text,
textAlign: 'center',
fill: cfg.color,
......@@ -59,10 +62,12 @@ class TagCloud extends PureComponent {
return;
}
const { height } = this.props;
const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
const height = this.props.height * 4;
let width = 0;
if (this.root) {
width = this.root.offsetWidth;
width = this.root.offsetWidth * 4;
}
// clean
......@@ -81,8 +86,10 @@ class TagCloud extends PureComponent {
width,
height,
// 设定文字大小配置函数(默认为12-40px的随机大小)
size: words => (((words.value - min) / (max - min)) * 4) + 10,
rotate: () => 0,
// 设定文字大小配置函数(默认为12-24px的随机大小)
size: words => (((words.value - min) / (max - min)) * 50) + 30,
// 设定文字内容
text: words => words.name,
......@@ -112,7 +119,7 @@ class TagCloud extends PureComponent {
chart
.point()
.position('x*y')
.color('text')
.color('text', colors)
.size('size', size => size)
.shape('cloud')
.style({
......@@ -128,8 +135,12 @@ class TagCloud extends PureComponent {
render() {
return (
<div ref={n => (this.root = n)} style={{ width: '100%' }}>
<div ref={n => (this.node = n)} />
<div
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>
);
}
......
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(
>
<NoticeIcon count={5} onItemClick={onItemClick} onClear={onClear}>
<NoticeIcon.Tab
list={noticeData['通知']}
list={data}
title="通知"
emptyText="你已查看所有通知"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
/>
<NoticeIcon.Tab
list={noticeData['消息']}
list={data}
title="消息"
emptyText="您已读完所有消息"
emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
/>
<NoticeIcon.Tab
list={noticeData['待办']}
list={data}
title="待办"
emptyText="你已完成所有待办"
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 {
</Col>
</Row>
<Row gutter={24}>
<Col lg={12} sm={24} xs={24}>
<Col xl={8} lg={24} sm={24} xs={24}>
<Card
title="各品类占比"
style={{ marginBottom: 24 }}
......@@ -113,6 +113,7 @@ export default class Monitor extends PureComponent {
<Row gutter={4} style={{ padding: '18px 0 19px 0' }}>
<Col span={8}>
<Pie
animate={false}
percent={28}
subTitle="中式快餐"
total="28%"
......@@ -121,6 +122,7 @@ export default class Monitor extends PureComponent {
</Col>
<Col span={8}>
<Pie
animate={false}
color="#5DDECF"
percent={22}
subTitle="西餐"
......@@ -130,6 +132,7 @@ export default class Monitor extends PureComponent {
</Col>
<Col span={8}>
<Pie
animate={false}
color="#2FC25B"
percent={32}
subTitle="火锅"
......@@ -140,7 +143,7 @@ export default class Monitor extends PureComponent {
</Row>
</Card>
</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}>
<TagCloud
data={tags}
......@@ -148,7 +151,7 @@ export default class Monitor extends PureComponent {
/>
</Card>
</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}>
<WaterWave
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