king
2020-05-05 92108e6c93de657838bbd766a9eb4f27d85e1c2d
src/templates/sharecomponent/chartcomponent/index.jsx
File was renamed from src/templates/zshare/chartcomponent/index.jsx
@@ -4,19 +4,20 @@
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
import ChartDrawerForm from '@/templates/zshare/chartcompile'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import ChartDrawerForm from './chartcompile'
import './index.scss'
class LineChart extends Component {
  static propTpyes = {
    type: PropTypes.string,
    dict: PropTypes.object,
    plot: PropTypes.object,
    columns: PropTypes.array,
    config: PropTypes.object,
    plotchange: PropTypes.func
  }
  state = {
    dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
    visible: true
  }
@@ -33,12 +34,12 @@
  }
  getdata = (X_axis, Y_axis) => {
    const { type } = this.props
    const { plot } = this.props
    let data = []
    let xdata = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    let point = 7
    if (type === 'pie') {
    if (plot.chartType === 'pie') {
      xdata = ['事例一', '事例二', '事例三', '事例四', '事例五']
      point = 5
    }
@@ -63,22 +64,22 @@
  }
  viewrender = () => {
    const { type } = this.props
    const { plot } = this.props
    if (type === 'line') {
    if (plot.chartType === 'line') {
      this.linerender()
    } else if (type === 'bar') {
    } else if (plot.chartType === 'bar') {
      this.barrender()
    } else if (type === 'pie') {
    } else if (plot.chartType === 'pie') {
      this.pierender()
    }
  }
  linerender = () => {
    const { plot, columns } = this.props
    const { plot, config } = this.props
    let transfield = {}
    columns.forEach(col => {
    config.columns.forEach(col => {
      if (col.field) {
        transfield[col.field] = col.label
      }
@@ -179,10 +180,10 @@
  }
  barrender = () => {
    const { plot, columns } = this.props
    const { plot, config } = this.props
    let transfield = {}
    columns.forEach(col => {
    config.columns.forEach(col => {
      if (col.field) {
        transfield[col.field] = col.label
      }
@@ -279,10 +280,10 @@
  }
  pierender = () => {
    const { plot, columns } = this.props
    const { plot, config } = this.props
    let transfield = {}
    columns.forEach(col => {
    config.columns.forEach(col => {
      if (col.field) {
        transfield[col.field] = col.label
      }
@@ -416,18 +417,33 @@
  }
  plotChange = (values) => {
    const { plot } = this.props
    const { plot, config } = this.props
    let _plot = {...plot, ...values}
    let _charts = fromJS(config.charts).toJS()
    this.props.plotchange({...plot, ...values})
    _charts = _charts.map(item => {
      if (item.uuid === _plot.uuid) {
        if (!is(fromJS(item), fromJS(_plot))) {
          let _element = document.getElementById(_plot.uuid)
          if (_element) {
            _element.innerHTML = ''
          }
        }
        return _plot
      }
      return item
    })
    this.props.plotchange({...config, charts: _charts})
  }
  render() {
    const { plot, type } = this.props
    const { plot } = this.props
    return (
      <div className="line-chart-edit-box" style={{minHeight: plot.height ? plot.height + 50 : 450}}>
        <p className="chart-title">{plot.title}</p>
        <ChartDrawerForm type={type} columns={this.props.columns} dict={this.props.dict} plot={plot} plotchange={this.plotChange} />
        <ChartDrawerForm type={plot.chartType} columns={this.props.config.columns} dict={this.state.dict} plot={plot} plotchange={this.plotChange} />
        <div className="canvas" id={plot.uuid}></div>
      </div>
    )