From 5afa6791ca4f1f962273f48f61cfc61107d94561 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 22 五月 2020 18:05:23 +0800
Subject: [PATCH] 2020-05-22

---
 src/tabviews/zshare/chartcomponent/index.jsx |   42 ++++++++++++++++++++++++++++++++++--------
 1 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/tabviews/zshare/chartcomponent/index.jsx b/src/tabviews/zshare/chartcomponent/index.jsx
index f9d9167..f936550 100644
--- a/src/tabviews/zshare/chartcomponent/index.jsx
+++ b/src/tabviews/zshare/chartcomponent/index.jsx
@@ -3,7 +3,9 @@
 import { is, fromJS } from 'immutable'
 import { Chart } from '@antv/g2'
 import DataSet from '@antv/data-set'
+import { Spin, Empty } from 'antd'
 
+import Utils from '@/utils/utils.js'
 import zhCN from '@/locales/zh-CN/model.js'
 import enUS from '@/locales/en-US/model.js'
 import './index.scss'
@@ -12,11 +14,14 @@
   static propTpyes = {
     plot: PropTypes.object,
     data: PropTypes.array,
+    loading: PropTypes.bool,
     config: PropTypes.object
   }
 
   state = {
     dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
+    empty: true,
+    chartId: Utils.getuuid()
   }
 
   componentDidMount () {
@@ -26,7 +31,7 @@
   UNSAFE_componentWillReceiveProps (nextProps) {
     if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
       this.setState({}, () => {
-        let _element = document.getElementById(this.props.plot.uuid)
+        let _element = document.getElementById(this.state.chartId)
         if (_element) {
           _element.innerHTML = ''
         }
@@ -35,13 +40,20 @@
     }
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+  }
+
   getdata = () => {
     const { data, plot, config } = this.props
     
     let vFields = plot.Yaxis && typeof(plot.Yaxis) === 'string' ? [plot.Yaxis] : plot.Yaxis
     let _columns = config.columns.filter(col => vFields.includes(col.field))
 
-    if (!data) return []
+    if (!data) {
+      this.setState({empty: true})
+      return []
+    }
 
     let _data = []
     let _cdata = fromJS(data).toJS()
@@ -139,6 +151,7 @@
       _data = [..._mdata.values()]
     }
 
+    this.setState({empty: _data.length === 0})
     return _data
   }
 
@@ -191,7 +204,7 @@
     }
     
     const chart = new Chart({
-      container: plot.uuid,
+      container: this.state.chartId,
       autoFit: true,
       height: plot.height || 400
     })
@@ -291,10 +304,15 @@
     }
     
     const chart = new Chart({
-      container: plot.uuid,
+      container: this.state.chartId,
       autoFit: true,
       height: plot.height || 400
     })
+
+    // dodge is not support linear attribute, please use category attribute! 鏃堕棿鏍煎紡
+    if (dv.rows[0] && dv.rows[0][X_axis] && /^\d{4}-\d{2}-\d{2}(\s\d{2}:\d{2}:\d{2})?/.test(dv.rows[0][X_axis])) {
+      dv.rows[0][X_axis] += ' '
+    }
 
     chart.data(dv.rows)
 
@@ -384,7 +402,7 @@
     }
     
     const chart = new Chart({
-      container: plot.uuid,
+      container: this.state.chartId,
       autoFit: true,
       height: plot.height || 400
     })
@@ -495,12 +513,20 @@
   }
 
   render() {
-    const { plot } = this.props
+    const { plot, loading } = this.props
+    const { empty } = this.state
 
     return (
-      <div className="line-chart-plot-box" style={{minHeight: plot.height ? plot.height + 50 : 450}}>
+      <div className="line-chart-plot-box">
         {plot.title ? <p className="chart-title">{plot.title}</p> : null}
-        <div className="canvas" id={plot.uuid}></div>
+        {loading ?
+          <div className="loading-mask">
+            <div className="ant-spin-blur"></div>
+            <Spin />
+          </div> : null
+        }
+        <div className={'canvas' + (empty ? ' empty' : '')} style={{minHeight: plot.height ? plot.height : 400}} id={this.state.chartId}></div>
+        {empty ? <Empty description={false}/> : null}
       </div>
     )
   }

--
Gitblit v1.8.0