update tag clound

9 years ago · ca45dd03f2
8 changed files with 43 additions and 18 deletions
--- a/.roadhogrc
+++ b/.roadhogrc
@ -17,5 +17,9 @@
      ]
    }
  },
+  "externals": {
+    "g2": "G2",
+    "g-cloud": "Cloud"
+  },
  "theme": "./src/theme.js"
 }
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@ -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,
--- a/package.json
+++ b/package.json
@ -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",
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/src/components/Charts/TagCloud/index.js
+++ b/src/components/Charts/TagCloud/index.js
@ -1,12 +1,15 @@
 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>
    );
  }
--- a/src/components/Charts/TagCloud/index.less
+++ b/src/components/Charts/TagCloud/index.less
@ -0,0 +1,6 @@
+.tagCloud {
+  canvas {
+    transform: scale(0.25);
+    transform-origin: 0 0;
+  }
+}
--- a/src/components/NoticeIcon/demo/popover.md
+++ b/src/components/NoticeIcon/demo/popover.md
@ -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"
--- a/src/routes/Dashboard/Monitor.js
+++ b/src/routes/Dashboard/Monitor.js
@ -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}