Fix warnings and details (#4209)

* remove useless state loading

* 🆙 upgrade bizcharts version to fix forceFit of null

close #4107
ref alibaba/BizCharts#819
close #4195

* Fix setState after unmount

* use Link over router.push

* 🐛 Fix duplicated keys in basic profile, close #4195

* use bizcharts@3.5.2-beta.2

* use bizcharts@3.5.3-beta.0

* 💹 Remove unused resize fns in Pie

* remove resize function

Dockerfile.dev

@@ -3,7 +3,7 @@ FROM node:latest
 WORKDIR /usr/src/app/
 
 COPY package.json ./
-RUN npm install --silent --no-cache
+RUN npm install --silent --no-cache --registry=https://registry.npm.taobao.org
 
 COPY ./ ./
 

config/router.config.js

@@ -155,7 +155,6 @@ export default [
           },
           {
             path: '/profile/basic/:id',
-            name: 'basic',
             hideInMenu: true,
             component: './Profile/BasicProfile',
           },

package.json

@@ -53,7 +53,7 @@
   "dependencies": {
     "@antv/data-set": "^0.10.1",
     "antd": "^3.16.1",
-    "bizcharts": "3.5.2-beta.1",
+    "bizcharts": "^3.5.3-beta.0",
     "bizcharts-plugin-slider": "^2.1.1-beta.1",
     "classnames": "^2.2.6",
     "dva": "^2.4.1",

src/components/Charts/Bar/index.js

@@ -11,14 +11,6 @@ class Bar extends Component {
     autoHideXLabels: false,
   };
 
-  componentDidMount() {
-    window.addEventListener('resize', this.resize, { passive: true });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
-
   handleRoot = n => {
     this.root = n;
   };
@@ -30,6 +22,7 @@ class Bar extends Component {
   resizeObserver() {
     const ro = new ResizeObserver(entries => {
       const { width, height } = entries[0].contentRect;
+      this.resize();
       this.setState(preState => {
         if (preState.width !== width || preState.height !== height) {
           return {

src/components/Charts/Pie/index.js

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 import ReactFitText from 'react-fittext';
 import Debounce from 'lodash-decorators/debounce';
 import Bind from 'lodash-decorators/bind';
-import ResizeObserver from 'resize-observer-polyfill';
 import styles from './index.less';
 
 /* eslint react/no-danger:0 */
@@ -17,17 +16,6 @@ class Pie extends Component {
     legendBlock: false,
   };
 
-  componentDidMount() {
-    window.addEventListener(
-      'resize',
-      () => {
-        this.requestRef = requestAnimationFrame(() => this.resize());
-      },
-      { passive: true }
-    );
-    this.resizeObserver();
-  }
-
   componentDidUpdate(preProps) {
     const { data } = this.props;
     if (data !== preProps.data) {
@@ -37,17 +25,10 @@ class Pie extends Component {
     }
   }
 
-  componentWillUnmount() {
-    window.cancelAnimationFrame(this.requestRef);
-    window.removeEventListener('resize', this.resize);
-    this.resize.cancel();
-  }
-
   getG2Instance = chart => {
     this.chart = chart;
     requestAnimationFrame(() => {
       this.getLegendData();
-      this.resize();
     });
   };
 
@@ -93,23 +74,6 @@ class Pie extends Component {
     });
   };
 
-  resizeObserver() {
-    const ro = new ResizeObserver(entries => {
-      const { height } = entries[0].contentRect;
-      this.setState(preState => {
-        if (preState.height !== height) {
-          return {
-            height,
-          };
-        }
-        return null;
-      });
-    });
-    if (this.chartDom) {
-      ro.observe(this.chartDom);
-    }
-  }
-
   // for window resize auto responsive legend
   @Bind()
   @Debounce(300)
@@ -223,45 +187,39 @@ class Pie extends Component {
 
     return (
       <div ref={this.handleRoot} className={pieClassName} style={style}>
-        <div
+        <ReactFitText maxFontSize={25}>
-          ref={ref => {
+          <div className={styles.chart}>
-            this.chartDom = ref;
+            <Chart
-          }}
+              scale={scale}
-        >
+              height={height || stateHeight}
-          <ReactFitText maxFontSize={25}>
+              data={dv}
-            <div className={styles.chart}>
+              padding={padding}
-              <Chart
+              animate={animate}
-                scale={scale}
+              onGetG2Instance={this.getG2Instance}
-                height={height || stateHeight}
+            >
-                data={dv}
+              {!!tooltip && <Tooltip showTitle={false} />}
-                padding={padding}
+              <Coord type="theta" innerRadius={inner} />
-                animate={animate}
+              <Geom
-                onGetG2Instance={this.getG2Instance}
+                style={{ lineWidth, stroke: '#fff' }}
-              >
+                tooltip={tooltip && tooltipFormat}
-                {!!tooltip && <Tooltip showTitle={false} />}
+                type="intervalStack"
-                <Coord type="theta" innerRadius={inner} />
+                position="percent"
-                <Geom
+                color={['x', percent || percent === 0 ? formatColor : defaultColors]}
-                  style={{ lineWidth, stroke: '#fff' }}
+                selected={selected}
-                  tooltip={tooltip && tooltipFormat}
+              />
-                  type="intervalStack"
+            </Chart>
-                  position="percent"
+
-                  color={['x', percent || percent === 0 ? formatColor : defaultColors]}
+            {(subTitle || total) && (
-                  selected={selected}
+              <div className={styles.total}>
-                />
+                {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
-              </Chart>
+                {/* eslint-disable-next-line */}
-
+                {total && (
-              {(subTitle || total) && (
+                  <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
-                <div className={styles.total}>
+                )}
-                  {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
+              </div>
-                  {/* eslint-disable-next-line */}
+            )}
-                  {total && (
+          </div>
-                    <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
+        </ReactFitText>
-                  )}
-                </div>
-              )}
-            </div>
-          </ReactFitText>
-        </div>
         {hasLegend && (
           <ul className={styles.legend}>
             {legendData.map((item, i) => (

src/components/Charts/TagCloud/index.js

@@ -19,11 +19,8 @@ class TagCloud extends Component {
   };
 
   componentDidMount() {
-    requestAnimationFrame(() => {
+    this.initTagCloud();
-      this.initTagCloud();
+    this.renderChart();
-      this.renderChart();
-    });
-    window.addEventListener('resize', this.resize, { passive: true });
   }
 
   componentDidUpdate(preProps) {
@@ -35,16 +32,8 @@ class TagCloud extends Component {
 
   componentWillUnmount() {
     this.isUnmount = true;
-    window.cancelAnimationFrame(this.requestRef);
-    window.removeEventListener('resize', this.resize);
   }
 
-  resize = () => {
-    this.requestRef = requestAnimationFrame(() => {
-      this.renderChart();
-    });
-  };
-
   saveRootRef = node => {
     this.root = node;
   };

src/pages/Dashboard/Analysis.js

@@ -18,7 +18,6 @@ const OfflineData = React.lazy(() => import('./OfflineData'));
 }))
 class Analysis extends Component {
   state = {
-    loading: true,
     salesType: 'all',
     currentTabKey: '',
     rangePickerValue: getTimeDistance('year'),
@@ -31,18 +30,9 @@ class Analysis extends Component {
         type: 'chart/fetch',
       });
     });
-    setTimeout(() => {
-      this.setState({
-        loading: false,
-      });
-    }, 2000);
   }
 
   componentWillUnmount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'chart/clear',
-    });
     cancelAnimationFrame(this.reqRef);
   }
 
@@ -96,9 +86,8 @@ class Analysis extends Component {
   };
 
   render() {
-    const { rangePickerValue, salesType, currentTabKey, loading: stateLoading } = this.state;
+    const { rangePickerValue, salesType, currentTabKey } = this.state;
-    const { chart, loading: propsLoading } = this.props;
+    const { chart, loading } = this.props;
-    const loading = stateLoading || propsLoading;
     const {
       visitData,
       visitData2,

src/pages/Dashboard/Workplace.js

@@ -62,13 +62,6 @@ class Workplace extends PureComponent {
     });
   }
 
-  componentWillUnmount() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: 'chart/clear',
-    });
-  }
-
   renderActivities() {
     const {
       activities: { list },

src/pages/List/TableList.js

@@ -1,7 +1,7 @@
 import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'dva';
 import moment from 'moment';
-import router from 'umi/router';
+import Link from 'umi/link';
 import {
   Row,
   Col,
@@ -293,7 +293,7 @@ class TableList extends PureComponent {
     {
       title: '规则名称',
       dataIndex: 'name',
-      render: text => <a onClick={() => this.previewItem(text)}>{text}</a>,
+      render: text => <Link to={`/profile/basic/${text.replace(/\s+/gi, '-')}`}>{text}</Link>,
     },
     {
       title: '描述',
@@ -383,10 +383,6 @@ class TableList extends PureComponent {
     });
   };
 
-  previewItem = id => {
-    router.push(`/profile/basic/${id}`);
-  };
-
   handleFormReset = () => {
     const { form, dispatch } = this.props;
     form.resetFields();