update Pie responsive depend on root node width

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 }} />

src/components/Charts/Pie/index.less

@@ -81,8 +81,7 @@
   }
 }
 
-@media screen and (max-width: @screen-sm) {
-  .pie {
+.legendBlock {
   &.hasLegend .chart {
     width: 100%;
     margin: 0 0 32px 0;
@@ -91,5 +90,4 @@
     position: static;
     transform: none;
   }
-  }
 }