From 29c23b1f5cafa9f77d3047a618e79d2033b973b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Sun, 28 Apr 2019 20:52:28 +0800 Subject: [PATCH] Add Loading (#4055) * add loading in html * add loading * rm console * add ResizeObserver --- docker/docker-compose.yml | 6 +- package.json | 1 + src/components/Charts/Bar/index.js | 29 +++++- src/components/Charts/Pie/index.js | 33 +++++-- src/pages/Dashboard/Analysis.js | 11 ++- src/pages/document.ejs | 153 ++++++++++++++++++++++++++++- 6 files changed, 215 insertions(+), 18 deletions(-) diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index d0556006..13e12db8 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -1,9 +1,9 @@ -version: "3.5" +version: '3.5' services: ant-design-pro_build: build: ../ - container_name: "ant-design-pro_build" + container_name: 'ant-design-pro_build' volumes: - dist:/usr/src/app/dist @@ -11,7 +11,7 @@ services: image: nginx ports: - 80:80 - container_name: "ant-design-pro_web" + container_name: 'ant-design-pro_web' restart: unless-stopped volumes: - dist:/usr/share/nginx/html:ro diff --git a/package.json b/package.json index da5c1e9f..2032a86a 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "react-dom": "^16.7.0", "react-fittext": "^1.0.0", "react-media": "^1.9.2", + "resize-observer-polyfill": "^1.5.1", "umi": "^2.4.4", "umi-plugin-react": "^1.7.2", "umi-request": "^1.0.5" diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js index f0cb65ff..77176df2 100644 --- a/src/components/Charts/Bar/index.js +++ b/src/components/Charts/Bar/index.js @@ -2,12 +2,13 @@ import React, { Component } from 'react'; import { Chart, Axis, Tooltip, Geom } from 'bizcharts'; import Debounce from 'lodash-decorators/debounce'; import Bind from 'lodash-decorators/bind'; -import autoHeight from '../autoHeight'; +import ResizeObserver from 'resize-observer-polyfill'; import styles from '../index.less'; -@autoHeight() class Bar extends Component { state = { + width: 0, + height: 0, autoHideXLabels: false, }; @@ -27,6 +28,24 @@ class Bar extends Component { this.node = n; }; + resizeObserver() { + const ro = new ResizeObserver(entries => { + const { width, height } = entries[0].contentRect; + this.setState((preState, { hasLegend }) => { + if (preState.width !== width || preState.height !== height) { + return { + width: width - (hasLegend ? 240 : 0), + height, + }; + } + return null; + }); + }); + if (this.root) { + ro.observe(this.root); + } + } + @Bind() @Debounce(400) resize() { @@ -56,7 +75,7 @@ class Bar extends Component { render() { const { - height, + height: propsHeight, title, forceFit = true, data, @@ -82,13 +101,15 @@ class Bar extends Component { value: y, }), ]; - + const { height: stateHeight, width } = this.state; + const height = propsHeight || stateHeight; return (
{title &&

{title}

} { + const { width, height } = entries[0].contentRect; + this.setState((preState, { hasLegend }) => { + if (preState.width !== width || preState.height !== height) { + return { + width: width - (hasLegend ? 240 : 0), + height, + }; + } + return null; + }); + }); + if (this.root) { + ro.observe(this.root); + } + } + // for window resize auto responsive legend @Bind() @Debounce(300) @@ -125,7 +144,6 @@ class Pie extends Component { className, style, height, - forceFit = true, percent, color, inner = 0.75, @@ -134,7 +152,7 @@ class Pie extends Component { lineWidth = 1, } = this.props; - const { legendData, legendBlock } = this.state; + const { legendData, height: StateHeight, width, legendBlock } = this.state; const pieClassName = classNames(styles.pie, className, { [styles.hasLegend]: !!hasLegend, [styles.legendBlock]: legendBlock, @@ -211,9 +229,9 @@ class Pie extends Component {
- {hasLegend && (
    {legendData.map((item, i) => ( diff --git a/src/pages/Dashboard/Analysis.js b/src/pages/Dashboard/Analysis.js index 0d222cc3..5673ca37 100644 --- a/src/pages/Dashboard/Analysis.js +++ b/src/pages/Dashboard/Analysis.js @@ -18,6 +18,7 @@ const OfflineData = React.lazy(() => import('./OfflineData')); })) class Analysis extends Component { state = { + loading: true, salesType: 'all', currentTabKey: '', rangePickerValue: getTimeDistance('year'), @@ -30,6 +31,11 @@ class Analysis extends Component { type: 'chart/fetch', }); }); + setTimeout(() => { + this.setState({ + loading: false, + }); + }, 2000); } componentWillUnmount() { @@ -90,8 +96,9 @@ class Analysis extends Component { }; render() { - const { rangePickerValue, salesType, currentTabKey } = this.state; - const { chart, loading } = this.props; + const { rangePickerValue, salesType, currentTabKey, loading: stateLoading } = this.state; + const { chart, loading: propsLoading } = this.props; + const loading = stateLoading || propsLoading; const { visitData, visitData2, diff --git a/src/pages/document.ejs b/src/pages/document.ejs index cf09effa..042c96ab 100644 --- a/src/pages/document.ejs +++ b/src/pages/document.ejs @@ -12,6 +12,157 @@ -
    +
    + +
    +
    + +
    +
    +