From 03e0ca451a6f7d85e415f2f94c623855135245fa Mon Sep 17 00:00:00 2001
From: niko <644506165@qq.com>
Date: Sun, 29 Oct 2017 22:09:27 -0500
Subject: [PATCH] fixed: https://github.com/ant-design/ant-design-pro/issues/33
 (#42)

---
 src/components/Charts/Bar/index.js       | 59 ++++++++++++++++++++++--
 src/components/Charts/ChartCard/index.js | 26 +++++++----
 src/components/Charts/MiniArea/index.js  |  2 +-
 src/components/Charts/MiniBar/index.js   |  2 +-
 src/components/Charts/index.less         |  8 +++-
 src/components/Charts/index.md           |  1 +
 src/routes/Dashboard/Analysis.js         | 19 ++++++--
 7 files changed, 99 insertions(+), 18 deletions(-)

diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js
index 0f398e9f..f4d87b98 100644
--- a/src/components/Charts/Bar/index.js
+++ b/src/components/Charts/Bar/index.js
@@ -1,11 +1,18 @@
 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import Debounce from 'lodash-decorators/debounce';
 import equal from '../equal';
 import styles from '../index.less';
 
 class Bar extends PureComponent {
+  state = {
+    autoHideXLabels: false,
+  }
+
   componentDidMount() {
     this.renderChart(this.props.data);
+
+    window.addEventListener('resize', this.resize);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -15,17 +22,53 @@ class Bar extends PureComponent {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
     if (this.chart) {
       this.chart.destroy();
     }
   }
 
+  @Debounce(200)
+  resize = () => {
+    if (!this.node) {
+      return;
+    }
+    const canvasWidth = this.node.parentNode.clientWidth;
+    const { data = [], autoLabel = true } = this.props;
+    if (!autoLabel) {
+      return;
+    }
+    const minWidth = data.length * 30;
+    const { autoHideXLabels } = this.state;
+
+    if (canvasWidth <= minWidth) {
+      if (!autoHideXLabels) {
+        this.setState({
+          autoHideXLabels: true,
+        });
+        this.renderChart(data);
+      }
+    } else if (autoHideXLabels) {
+      this.setState({
+        autoHideXLabels: false,
+      });
+      this.renderChart(data);
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
 
   renderChart(data) {
-    const { height = 0, fit = true, color = 'rgba(24, 144, 255, 0.85)', margin = [32, 0, 32, 40] } = this.props;
+    const { autoHideXLabels } = this.state;
+    const {
+      height = 0,
+      fit = true,
+      color = 'rgba(24, 144, 255, 0.85)',
+      margin = [32, 0, (autoHideXLabels ? 8 : 32), 40],
+    } = this.props;
+
 
     if (!data || (data && data.length < 1)) {
       return;
@@ -47,9 +90,17 @@ class Bar extends PureComponent {
       },
     });
 
-    chart.axis('x', {
-      title: false,
-    });
+    if (autoHideXLabels) {
+      chart.axis('x', {
+        title: false,
+        tickLine: false,
+        labels: false,
+      });
+    } else {
+      chart.axis('x', {
+        title: false,
+      });
+    }
     chart.axis('y', {
       title: false,
       line: false,
diff --git a/src/components/Charts/ChartCard/index.js b/src/components/Charts/ChartCard/index.js
index 20adbb5e..5624f21f 100644
--- a/src/components/Charts/ChartCard/index.js
+++ b/src/components/Charts/ChartCard/index.js
@@ -1,13 +1,10 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Card, Spin } from 'antd';
 
 import styles from './index.less';
 
-const ChartCard = ({ contentHeight, title, action, total, footer, children, ...rest }) => (
-  <Card
-    bodyStyle={{ padding: '20px 24px 8px 24px' }}
-    {...rest}
-  >
+const ChartCard = ({ loading, contentHeight, title, action, total, footer, children, ...rest }) => {
+  const content = (
     <div className={styles.chartCard}>
       <div className={styles.meta}>
         <span className={styles.title}>{title}</span>
@@ -30,7 +27,20 @@ const ChartCard = ({ contentHeight, title, action, total, footer, children, ...r
         )
       }
     </div>
-  </Card>
-);
+  );
+
+  return (
+    <Card
+      bodyStyle={{ padding: '20px 24px 8px 24px' }}
+      {...rest}
+    >
+      {
+        loading ? (
+          <Spin size="large">{content}</Spin>
+        ) : content
+      }
+    </Card>
+  );
+};
 
 export default ChartCard;
diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js
index 4995b6b8..65f09697 100644
--- a/src/components/Charts/MiniArea/index.js
+++ b/src/components/Charts/MiniArea/index.js
@@ -114,7 +114,7 @@ class MiniArea extends PureComponent {
 
     return (
       <div className={styles.miniChart} style={{ height }}>
-        <div>
+        <div className={styles.chartContent}>
           <div ref={this.handleRef} />
         </div>
       </div>
diff --git a/src/components/Charts/MiniBar/index.js b/src/components/Charts/MiniBar/index.js
index 90d9ae7c..991571b7 100644
--- a/src/components/Charts/MiniBar/index.js
+++ b/src/components/Charts/MiniBar/index.js
@@ -76,7 +76,7 @@ class MiniBar extends PureComponent {
 
     return (
       <div className={styles.miniChart} style={{ height }}>
-        <div>
+        <div className={styles.chartContent}>
           <div ref={this.handleRef} />
         </div>
       </div>
diff --git a/src/components/Charts/index.less b/src/components/Charts/index.less
index 19e13908..52f97c4c 100644
--- a/src/components/Charts/index.less
+++ b/src/components/Charts/index.less
@@ -1,7 +1,7 @@
 .miniChart {
   position: relative;
   width: 100%;
-  & > div {
+  .chartContent {
     position: absolute;
     bottom: -34px;
     width: 100%;
@@ -10,4 +10,10 @@
       overflow: hidden;
     }
   }
+  .chartLoading {
+    position: absolute;
+    top: 16px;
+    left: 50%;
+    margin-left: -7px;
+  }
 }
diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md
index 11dbc9e5..aed2ef4e 100644
--- a/src/components/Charts/index.md
+++ b/src/components/Charts/index.md
@@ -60,6 +60,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | margin | 图表内部间距 | array | \[32, 0, 32, 40\] |
 | height | 图表高度 | number | - |
 | data | 数据 | array<{x, y}> | - |
+| autoLabel | 在宽度不足时，自动隐藏 x 轴的 label | boolean | `true` |
 
 ### Pie
 
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js
index a35cdf71..00e4b80f 100644
--- a/src/routes/Dashboard/Analysis.js
+++ b/src/routes/Dashboard/Analysis.js
@@ -27,6 +27,7 @@ for (let i = 0; i < 7; i += 1) {
 }))
 export default class Analysis extends Component {
   state = {
+    loading: true,
     salesType: 'all',
     currentTabKey: '',
     rangePickerValue: [],
@@ -35,6 +36,10 @@ export default class Analysis extends Component {
   componentDidMount() {
     this.props.dispatch({
       type: 'chart/fetch',
+    }).then(() => {
+      this.setState({
+        loading: false,
+      });
     });
   }
 
@@ -89,7 +94,7 @@ export default class Analysis extends Component {
   }
 
   render() {
-    const { rangePickerValue, salesType, currentTabKey } = this.state;
+    const { rangePickerValue, salesType, currentTabKey, loading } = this.state;
     const { chart } = this.props;
     const {
       visitData,
@@ -221,6 +226,7 @@ export default class Analysis extends Component {
         <Row gutter={24}>
           <Col {...topColResponsiveProps}>
             <ChartCard
+              loading={loading}
               bordered={false}
               title="总销售额"
               action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
@@ -238,6 +244,7 @@ export default class Analysis extends Component {
           </Col>
           <Col {...topColResponsiveProps}>
             <ChartCard
+              loading={loading}
               bordered={false}
               title="访问量"
               action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
@@ -254,6 +261,7 @@ export default class Analysis extends Component {
           </Col>
           <Col {...topColResponsiveProps}>
             <ChartCard
+              loading={loading}
               bordered={false}
               title="支付笔数"
               action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
@@ -269,6 +277,7 @@ export default class Analysis extends Component {
           </Col>
           <Col {...topColResponsiveProps}>
             <ChartCard
+              loading={loading}
               bordered={false}
               title="运营活动效果"
               action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
@@ -291,6 +300,7 @@ export default class Analysis extends Component {
         </Row>
 
         <Card
+          loading={loading}
           bordered={false}
           bodyStyle={{ padding: 0 }}
         >
@@ -359,8 +369,9 @@ export default class Analysis extends Component {
         </Card>
 
         <Row gutter={24}>
-          <Col lg={12} sm={24} xs={24}>
+          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
             <Card
+              loading={loading}
               bordered={false}
               title="线上热门搜索"
               extra={iconGroup}
@@ -417,8 +428,9 @@ export default class Analysis extends Component {
               />
             </Card>
           </Col>
-          <Col lg={12} sm={24} xs={24}>
+          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
             <Card
+              loading={loading}
               className={styles.salesCard}
               bordered={false}
               title="销售额类别占比"
@@ -452,6 +464,7 @@ export default class Analysis extends Component {
         </Row>
 
         <Card
+          loading={loading}
           className={styles.offlineCard}
           bordered={false}
           bodyStyle={{ padding: '0 0 32px 0' }}
-- 
GitLab