2020-05-22

king

2020-05-22 5afa6791ca4f1f962273f48f61cfc61107d94561

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