2020-07-16

king

2020-07-16 9a82bce9cf0ed4a51c1b0b0669eaa38cedbace07

 src/tabviews/zshare/chartcomponent/index.jsx

@@ -5,22 +5,30 @@
import DataSet from '@antv/data-set'
import { Spin, Empty, Select } from 'antd'

import asyncComponent from './asyncButtonComponent'
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'

const ExcelOutButton = asyncComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton'))
const ExcelInButton = asyncComponent(() => import('@/tabviews/zshare/actionList/excelInbutton'))

class LineChart extends Component {
  static propTpyes = {
    BID: PropTypes.any,
    Tab: PropTypes.any,
    plot: PropTypes.object,
    data: PropTypes.array,
    loading: PropTypes.bool,
    config: PropTypes.object
    config: PropTypes.object,
    getexceloutparam: PropTypes.func
  }

  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    empty: true,
    actions: [],
    chartId: Utils.getuuid(),
    chartData: [],
    chartFields: [],
@@ -28,20 +36,29 @@
  }

  componentDidMount () {
    const { plot, data } = this.props

    const { plot, data, config } = this.props
    let _state = {}
    let actions = []
    config.action.forEach(item => {
      if (!plot.actions || plot.actions.length === 0) return
      if (!(item.OpenType === 'excelOut' || (item.OpenType === 'excelIn' && item.Ot === 'notRequired'))) return
      if (plot.actions.includes(item.uuid)) {
        actions.push(fromJS(item).toJS())
      }
    })

    if (plot.datatype === 'statistics' && (plot.chartType === 'line' || plot.chartType === 'bar')) {
      let result = this.getStaticMsg(data)
      _state.chartData = result.data
      _state.chartFields = result.chartFields
      _state.selectFields = result.selectFields
      _state.actions = actions

      this.setState(_state, () => {
        this.viewrender()
      })
    } else {
      this.setState({ actions })
      this.viewrender()
    }
  }
@@ -74,7 +91,6 @@

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

@@ -436,7 +452,7 @@
          if (!val || /^\s*$/.test(val)) return val
          let _val = `${val}`
          if (_val.length <= 10) return val
          return _val.substring(0, 5) + '...'
          return _val.substring(0, 7) + '...'
        }
      }
    })
@@ -560,7 +576,7 @@
          if (!val || /^\s*$/.test(val)) return val
          let _val = `${val}`
          if (_val.length <= 10) return val
          return _val.substring(0, 5) + '...'
          return _val.substring(0, 7) + '...'
        }
      }
    })
@@ -724,7 +740,7 @@
          if (!val || /^\s*$/.test(val)) return val
          let _val = `${val}`
          if (_val.length <= 10) return val
          return _val.substring(0, 5) + '...'
          return _val.substring(0, 7) + '...'
        }
      }
    })
@@ -873,7 +889,14 @@
      if (plot.label === 'true') {
        let setting = {
          content: (data) => {
            return `${data[plot.Xaxis]}: ${(data.percent * 100).toFixed(2)}%`
            let val = data[plot.Xaxis]
            if (val) {
              val = `${val}`
              if (val.length > 10) {
                val = val.substring(0, 7) + '...'
              }
            }
            return `${val}: ${(data.percent * 100).toFixed(2)}%`
          }
        }

@@ -904,7 +927,14 @@
      if (plot.label === 'true') {
        let setting = {
          content: (data) => {
            return `${data[plot.Xaxis]}: ${data[plot.Yaxis]}`
            let val = data[plot.Xaxis]
            if (val) {
              val = `${val}`
              if (val.length > 10) {
                val = val.substring(0, 7) + '...'
              }
            }
            return `${val}: ${data[plot.Yaxis]}`
          }
        }

@@ -934,8 +964,8 @@
  }

  render() {
    const { plot, loading } = this.props
    const { empty, chartFields, selectFields } = this.state
    const { plot, loading, config, BID, Tab } = this.props
    const { empty, chartFields, selectFields, actions } = this.state

    return (
      <div className="line-chart-plot-box">
@@ -957,7 +987,39 @@
        >
          {chartFields.map((item, i) => <Select.Option key={i} value={item}>{item}</Select.Option>)}
        </Select> : null}
        <div className={'canvas' + (empty ? ' empty' : '')} style={{minHeight: plot.height ? plot.height : 400}} id={this.state.chartId}></div>
        <div className="canvas-wrap">
          <div className={'chart-action ' + (plot.title ? 'with-title' : '')}>
            {actions.map(item => {
              if (item.OpenType === 'excelOut') {
                return (
                  <ExcelOutButton
                    key={item.uuid}
                    BID={BID}
                    Tab={Tab}
                    btn={item}
                    show="icon"
                    setting={config.setting}
                    getexceloutparam={this.props.getexceloutparam}
                    updateStatus={() => {}}
                  />
                )
              } else {
                return (
                  <ExcelInButton
                    key={item.uuid}
                    BID={BID}
                    Tab={Tab}
                    btn={item}
                    show="icon"
                    setting={config.setting}
                    updateStatus={() => {}}
                  />
                )
              }
            })}
          </div>
          <div className={'canvas' + (empty ? ' empty' : '')} style={{minHeight: plot.height ? plot.height : 400}} id={this.state.chartId}></div>
        </div>
        {empty ? <Empty description={false}/> : null}
      </div>
    )