From 8d9b7cfd94bc45adb4b26e44ff9ec83ea760dacd Mon Sep 17 00:00:00 2001
From: nikogu <644506165@qq.com>
Date: Wed, 1 Nov 2017 17:02:31 +0800
Subject: [PATCH] update Pie responsive depend on root node width

---
 src/components/Charts/Pie/index.js   | 42 +++++++++++++++++++++++++---
 src/components/Charts/Pie/index.less | 18 ++++++------
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/components/Charts/Pie/index.js b/src/components/Charts/Pie/index.js
index 0952d020..658e7939 100644
--- a/src/components/Charts/Pie/index.js
+++ b/src/components/Charts/Pie/index.js
@@ -3,6 +3,7 @@ import G2 from 'g2';
 import { Divider } from 'antd';
 import classNames from 'classnames';
 import ReactFitText from 'react-fittext';
+import Debounce from 'lodash-decorators/debounce';
 import equal from '../equal';
 import styles from './index.less';
 
@@ -10,10 +11,13 @@ import styles from './index.less';
 class Pie extends Component {
   state = {
     legendData: [],
+    legendBlock: true,
   };
 
   componentDidMount() {
-    this.renderChart(this.props.data);
+    this.renderChart();
+    this.resize();
+    window.addEventListener('resize', this.resize);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -23,15 +27,42 @@ class Pie extends Component {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
     if (this.chart) {
       this.chart.destroy();
     }
   }
 
+  @Debounce(200)
+  resize = () => {
+    const { hasLegend } = this.props;
+    if (!hasLegend || !this.node) {
+      return;
+    }
+    // antd xs size
+    if (this.root.parentNode.clientWidth <= 480) {
+      if (!this.state.legendBlock) {
+        this.setState({
+          legendBlock: true,
+        });
+        this.renderChart();
+      }
+    } else if (this.state.legendBlock) {
+      this.setState({
+        legendBlock: false,
+      });
+      this.renderChart();
+    }
+  }
+
   handleRef = (n) => {
     this.node = n;
   }
 
+  handleRoot = (n) => {
+    this.root = n;
+  }
+
   handleLegendClick = (item, i) => {
     const newItem = item;
     newItem.checked = !newItem.checked;
@@ -50,7 +81,9 @@ class Pie extends Component {
     });
   }
 
-  renderChart(data) {
+  renderChart(d) {
+    let data = d || this.props.data;
+
     const {
       height = 0,
       hasLegend,
@@ -167,13 +200,14 @@ class Pie extends Component {
 
   render() {
     const { valueFormat, subTitle, total, hasLegend, className, style } = this.props;
-    const { legendData } = this.state;
+    const { legendData, legendBlock } = this.state;
     const pieClassName = classNames(styles.pie, className, {
       [styles.hasLegend]: !!hasLegend,
+      [styles.legendBlock]: legendBlock,
     });
 
     return (
-      <div className={pieClassName} style={style}>
+      <div ref={this.handleRoot} className={pieClassName} style={style}>
         <ReactFitText maxFontSize={25}>
           <div className={styles.chart}>
             <div ref={this.handleRef} style={{ fontSize: 0 }} />
diff --git a/src/components/Charts/Pie/index.less b/src/components/Charts/Pie/index.less
index 223d253d..ad0823fe 100644
--- a/src/components/Charts/Pie/index.less
+++ b/src/components/Charts/Pie/index.less
@@ -81,15 +81,13 @@
   }
 }
 
-@media screen and (max-width: @screen-sm) {
-  .pie {
-    &.hasLegend .chart {
-      width: 100%;
-      margin: 0 0 32px 0;
-    }
-    .legend {
-      position: static;
-      transform: none;
-    }
+.legendBlock {
+  &.hasLegend .chart {
+    width: 100%;
+    margin: 0 0 32px 0;
+  }
+  .legend {
+    position: static;
+    transform: none;
   }
 }
-- 
GitLab