From 51a60b5cb00fdeaf9e42c29341242460bf2154e8 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 18 九月 2020 09:37:22 +0800
Subject: [PATCH] 2020-09-18
---
src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 187 ++++++++++++++++++++++++++--------------------
1 files changed, 105 insertions(+), 82 deletions(-)
diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
index 0b72187..c74f855 100644
--- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
+++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx
@@ -31,12 +31,15 @@
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 瀛楀吀
config: true, // 鍥捐〃閰嶇疆淇℃伅
empty: true, // 鍥捐〃鏁版嵁涓虹┖
+ loading: false, // 鏁版嵁鍔犺浇鐘舵��
chartId: Utils.getuuid(), // 鍥捐〃Id
title: '', // 缁勪欢鏍囬
sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁
plot: null, // 鍥捐〃璁剧疆
data: null, // 鏁版嵁
search: null, // 鎼滅储鏉′欢
+ vFields: [], // 鏁板�煎瓧娈�
+ vstFields: null, // 缁熻鏁版嵁鍊煎瓧娈典俊鎭�
chartData: [], // 鍥捐〃鏁版嵁
chartFields: [], // 缁熻鍥捐〃鐢熸垚瀛楁闆�
selectFields: [], // 缁熻鍥捐〃閫夋嫨瀛楁
@@ -55,9 +58,54 @@
_sync = false
}
+ let vFields = []
+ let percentFields = []
+ let vstFields = null
+
+ if (_config.plot.datatype === 'statistics') {
+ let _column = _config.columns.filter(col => _config.plot.InfoValue === col.field)[0]
+ if (_column) {
+ let decimal = 0
+
+ if (/Decimal/ig.test(_column.datatype)) {
+ decimal = +_column.datatype.replace(/^Decimal\(18,/ig, '').replace(/\)/ig, '')
+ }
+
+ vstFields = {
+ label: _column.label,
+ field: _column.field,
+ show: _config.plot.show,
+ decimal
+ }
+ }
+ } else {
+ let _vFields = _config.plot.Yaxis && typeof(_config.plot.Yaxis) === 'string' ? [_config.plot.Yaxis] : _config.plot.Yaxis
+ _config.columns.forEach(col => {
+ if (_vFields.includes(col.field)) {
+ let decimal = 0
+ if (/Decimal/ig.test(col.datatype)) {
+ decimal = +col.datatype.replace(/^Decimal\(18,/ig, '').replace(/\)/ig, '')
+ }
+ vFields.push({
+ label: col.label,
+ field: col.field,
+ show: _config.plot.show,
+ decimal
+ })
+
+ if (_config.plot.show === 'percent') {
+ percentFields.push(col.label)
+ }
+ }
+ })
+ }
+
this.setState({
config: _config,
data: _data,
+ vFields: vFields,
+ vstFields: vstFields,
+ percentFields: percentFields,
arr_field: _config.columns.map(col => col.field).join(','),
plot: _config.plot,
sync: _sync,
@@ -66,8 +114,14 @@
}, () => {
if (config.setting.sync !== 'true') {
this.loadData()
- } else if (config.setting.sync === 'true' && _data) {
- this.handleData()
+ } else if (config.setting.sync === 'true') {
+ if (!_data) {
+ this.setState({
+ loading: true
+ })
+ } else {
+ this.handleData()
+ }
}
})
}
@@ -76,43 +130,7 @@
* @description 鏍￠獙鍥捐〃鐨勬寜閽粍锛屽鏋滀负缁熻鍥捐〃锛岃绠楀浘琛ㄥ瓧娈�
*/
componentDidMount () {
- // const { plot, data, config } = this.props
- // let _state = {}
- // let percentFields = []
- // 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
-
- // let _column = config.columns.filter(col => plot.InfoValue === col.field)[0]
-
- // if (_column && _column.format === 'percent') {
- // percentFields.push(plot.InfoValue)
- // _state.percentFields = percentFields
- // }
-
- // this.setState(_state, () => {
- // this.viewrender()
- // })
- // } else {
- // if (plot.chartType === 'line' || plot.chartType === 'bar') {
- // try {
- // plot.Yaxis.forEach(yaxis => {
- // let _column = config.columns.filter(col => yaxis === col.field)[0]
- // if (_column && _column.format === 'percent') {
- // percentFields.push(_column.label)
- // }
- // })
- // } catch {
- // console.warn('Incorrect percentage setting')
- // }
- // }
- // this.setState({ percentFields }, () => {
- // this.viewrender()
- // })
- // }
}
/**
@@ -127,7 +145,7 @@
_data = nextProps.data[config.dataName] || []
}
- this.setState({sync: false, data: _data}, () => {
+ this.setState({sync: false, loading: false, data: _data}, () => {
this.handleData()
})
}
@@ -154,6 +172,12 @@
}
this.viewrender()
})
+ } else {
+ let _element = document.getElementById(this.state.chartId)
+ if (_element) {
+ _element.innerHTML = ''
+ }
+ this.viewrender()
}
}
@@ -201,9 +225,7 @@
* 3銆佹煴鐘跺浘鏁版嵁琛ラ綈
*/
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))
+ const { data, plot, vFields } = this.state
if (!data) {
this.setState({empty: true})
@@ -216,14 +238,14 @@
if (plot.repeat === 'average') {
let _mdata = new Map()
_cdata.forEach(item => {
- _columns.forEach(col => {
+ vFields.forEach(col => {
if (typeof(item[col.field]) !== 'number') {
item[col.field] = parseFloat(item[col.field])
if (isNaN(item[col.field])) {
item[col.field] = 0
}
}
- if (col.format === 'percent') {
+ if (col.show === 'percent') {
item[col.field] = item[col.field] * 100
}
})
@@ -234,8 +256,8 @@
} else if (item[plot.Xaxis]) {
let _item = _mdata.get(item[plot.Xaxis])
_item.$count++
- vFields.forEach(field => {
- _item[field] += item[field]
+ vFields.forEach(col => {
+ _item[col.field] += item[col.field]
})
_mdata.set(item[plot.Xaxis], _item)
}
@@ -243,7 +265,7 @@
_data = [..._mdata.values()]
_data = _data.map(item => {
- _columns.forEach(col => {
+ vFields.forEach(col => {
item[col.field] = item[col.field] / item.$count
item[col.field] = item[col.field].toFixed(col.decimal)
item[col.field] = +item[col.field]
@@ -253,14 +275,14 @@
} else if (plot.repeat === 'cumsum') {
let _mdata = new Map()
_cdata.forEach(item => {
- _columns.forEach(col => {
+ vFields.forEach(col => {
if (typeof(item[col.field]) !== 'number') {
item[col.field] = parseFloat(item[col.field])
if (isNaN(item[col.field])) {
item[col.field] = 0
}
}
- if (col.format === 'percent') {
+ if (col.show === 'percent') {
item[col.field] = item[col.field] * 100
}
})
@@ -269,8 +291,8 @@
_mdata.set(item[plot.Xaxis], item)
} else if (item[plot.Xaxis]) {
let _item = _mdata.get(item[plot.Xaxis])
- vFields.forEach(field => {
- _item[field] += item[field]
+ vFields.forEach(col => {
+ _item[col.field] += item[col.field]
})
_mdata.set(item[plot.Xaxis], _item)
}
@@ -278,7 +300,7 @@
_data = [..._mdata.values()]
_data = _data.map(item => {
- _columns.forEach(col => {
+ vFields.forEach(col => {
item[col.field] = item[col.field].toFixed(col.decimal)
item[col.field] = +item[col.field]
})
@@ -288,14 +310,14 @@
let _mdata = new Map()
_cdata.forEach(item => {
if (item[plot.Xaxis] && !_mdata.has(item[plot.Xaxis])) {
- _columns.forEach(col => {
+ vFields.forEach(col => {
if (typeof(item[col.field]) !== 'number') {
item[col.field] = parseFloat(item[col.field])
if (isNaN(item[col.field])) {
item[col.field] = 0
}
}
- if (col.format === 'percent') {
+ if (col.show === 'percent') {
item[col.field] = item[col.field] * 100
}
item[col.field] = item[col.field].toFixed(col.decimal)
@@ -315,7 +337,7 @@
let _val = Array( i + 2 ).join(' ')
let _cell = {}
_cell[plot.Xaxis] = _val
- _columns.forEach(col => {
+ vFields.forEach(col => {
_cell[col.field] = ''
})
@@ -332,16 +354,16 @@
* @description 缁熻鏁版嵁棰勫鐞嗭紝鍔ㄦ�佺敓鎴愮粺璁″瓧娈靛苟杩涜鏁版嵁杞崲
*/
getStaticMsg = (data) => {
- const { plot, config } = this.props
+ const { plot, vstFields } = this.state
- let _column = config.columns.filter(col => plot.InfoValue === col.field)[0]
let percent = false
let decimal = 0
- if (_column && _column.format === 'percent') {
+
+ if (plot.show === 'percent') {
percent = true
}
- if (_column) {
- decimal = _column.decimal
+ if (vstFields) {
+ decimal = vstFields.decimal
}
if (!data) {
@@ -468,8 +490,7 @@
* @description 鑾峰彇缁熻鍥捐〃灞曠ず鏁版嵁锛岄�氳繃閫夋嫨绫诲瀷绛涢��
*/
getStaticData = () => {
- const { plot } = this.props
- const { chartData, chartFields, selectFields } = this.state
+ const { plot, chartData, chartFields, selectFields } = this.state
let _data = []
if (selectFields.length === chartFields.length) {
@@ -486,7 +507,7 @@
* @description 鍥捐〃娓叉煋鍒嗙粍
*/
viewrender = () => {
- const { plot } = this.props
+ const { plot } = this.state
if (plot.chartType === 'line') {
this.linerender()
@@ -499,8 +520,7 @@
* @description 鎶樼嚎鍥炬覆鏌�
*/
linerender = () => {
- const { plot, config } = this.props
- const { percentFields } = this.state
+ const { plot, config, percentFields } = this.state
let _data = []
let _valfield = 'value'
@@ -511,7 +531,7 @@
_valfield = plot.InfoValue
_typefield = plot.InfoType
- if (percentFields.length > 0) {
+ if (plot.show === 'percent') {
ispercent = true
}
@@ -579,8 +599,8 @@
formatter: (val) => {
if (!val || /^\s*$/.test(val)) return val
let _val = `${val}`
- if (_val.length <= 10) return val
- return _val.substring(0, 7) + '...'
+ if (_val.length <= 11) return val
+ return _val.substring(0, 8) + '...'
}
}
})
@@ -644,8 +664,7 @@
* @description 鑷畾涔夋覆鏌�
*/
customrender = (data, transfield) => {
- const { plot } = this.props
- const { percentFields } = this.state
+ const { plot, percentFields } = this.state
let barfields = []
let fields = []
@@ -713,8 +732,8 @@
formatter: (val) => {
if (!val || /^\s*$/.test(val)) return val
let _val = `${val}`
- if (_val.length <= 10) return val
- return _val.substring(0, 7) + '...'
+ if (_val.length <= 11) return val
+ return _val.substring(0, 8) + '...'
}
}
})
@@ -820,8 +839,7 @@
* @description 鏌辩姸鍥炬覆鏌�
*/
barrender = () => {
- const { plot, config } = this.props
- const { percentFields } = this.state
+ const { plot, config, percentFields } = this.state
let _data = []
let _valfield = 'value'
@@ -832,7 +850,7 @@
_valfield = plot.InfoValue
_typefield = plot.InfoType
- if (percentFields.length > 0) {
+ if (plot.show === 'percent') {
ispercent = true
}
@@ -883,6 +901,13 @@
// dodge is not support linear attribute, please use category attribute! 鏃堕棿鏍煎紡
if (_data[0] && _data[0][plot.Xaxis] && /^\d{4}-\d{2}-\d{2}(\s\d{2}:\d{2}:\d{2})?/.test(_data[0][plot.Xaxis])) {
+ for (let i = 1; i < 12; i++) {
+ if (_data[i] && _data[i][plot.Xaxis] === _data[0][plot.Xaxis]) {
+ _data[i][plot.Xaxis] += ' '
+ } else {
+ break;
+ }
+ }
_data[0][plot.Xaxis] += ' '
}
@@ -899,8 +924,8 @@
formatter: (val) => {
if (!val || /^\s*$/.test(val)) return val
let _val = `${val}`
- if (_val.length <= 10) return val
- return _val.substring(0, 7) + '...'
+ if (_val.length <= 11) return val
+ return _val.substring(0, 8) + '...'
}
}
})
@@ -991,12 +1016,12 @@
}
render() {
- const { loading, config, BID, Tab } = this.props
- const { title, plot, empty, chartFields, selectFields } = this.state
+ const { BID } = this.props
+ const { config, loading, title, plot, empty, chartFields, selectFields } = this.state
return (
<div className="custom-line-chart-plot-box">
- <searchLine />
+ {/* <searchLine /> */}
{title ? <p className="chart-title">{title}</p> : null}
{loading ?
<div className="loading-mask">
@@ -1023,7 +1048,6 @@
<ExcelOutButton
key={item.uuid}
BID={BID}
- Tab={Tab}
btn={item}
show="icon"
setting={config.setting}
@@ -1036,7 +1060,6 @@
<ExcelInButton
key={item.uuid}
BID={BID}
- Tab={Tab}
btn={item}
show="icon"
setting={config.setting}
--
Gitblit v1.8.0