File was renamed from src/templates/zshare/chartcomponent/index.jsx |
| | |
| | | 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 |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | 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 |
| | | } |
| | |
| | | } |
| | | |
| | | 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 |
| | | } |
| | |
| | | } |
| | | |
| | | 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 |
| | | } |
| | |
| | | } |
| | | |
| | | 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 |
| | | } |
| | |
| | | } |
| | | |
| | | 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> |
| | | ) |