From 137fb8ea6af2789b3238b22bac31d80bced41dfe Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 28 七月 2021 11:39:39 +0800 Subject: [PATCH] 2021-07-28 --- src/tabviews/custom/components/chart/antv-pie/index.jsx | 525 ++++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 450 insertions(+), 75 deletions(-) diff --git a/src/tabviews/custom/components/chart/antv-pie/index.jsx b/src/tabviews/custom/components/chart/antv-pie/index.jsx index c7fbd33..002b51b 100644 --- a/src/tabviews/custom/components/chart/antv-pie/index.jsx +++ b/src/tabviews/custom/components/chart/antv-pie/index.jsx @@ -3,7 +3,7 @@ import { is, fromJS } from 'immutable' import { Chart } from '@antv/g2' import { connect } from 'react-redux' -import DataSet from '@antv/data-set' +import DataSet, { DataView } from '@antv/data-set' import { Spin, Empty, notification } from 'antd' import moment from 'moment' @@ -55,17 +55,23 @@ _sync = false } + let height = config.plot.height || 400 if (config.plot.title || config.search.length > 0) { - _config.plot.height = _config.plot.height - 80 + _config.plot.height = height - 75 } else { - _config.plot.height = _config.plot.height - 30 + _config.plot.height = height - 30 } - if (_config.style) { - _config.style = {..._config.style, minHeight: (config.plot.height || 400)} - } else { - _config.style = {minHeight: (config.plot.height || 400)} - } + _config.style.height = height + + let decimal = 0 + _config.columns.forEach(col => { + if (_config.plot.Yaxis === col.field && /Decimal/ig.test(col.datatype)) { + decimal = +col.datatype.replace(/^Decimal\(18,/ig, '').replace(/\)/ig, '') + } + }) + + _config.plot.$decimal = decimal this.setState({ config: _config, @@ -100,12 +106,10 @@ this.setState({sync: false, data: _data}, () => { this.handleData() }) - } else if (nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { - if (config.setting.syncRefresh === 'true') { - this.setState({}, () => { - this.loadData() - }) - } + } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { + this.setState({}, () => { + this.loadData() + }) } } @@ -136,16 +140,7 @@ if (!config.timer) return - const _change = { - '15s': 15000, - '30s': 30000, - '1min': 60000, - '5min': 300000, - '10min': 600000, - '15min': 900000, - '30min': 1800000, - '1hour': 3600000 - } + const _change = { '15s': 15000, '30s': 30000, '1min': 60000, '5min': 300000, '10min': 600000, '15min': 900000, '30min': 1800000, '1hour': 3600000 } let timer = _change[config.timer] @@ -210,11 +205,18 @@ } handleData = () => { - let _element = document.getElementById(this.state.chartId) + const { plot, chartId } = this.state + + let _element = document.getElementById(chartId) if (_element) { _element.innerHTML = '' } - this.pierender() + + if (plot.shape === 'nest') { + this.nestrender() + } else { + this.pierender() + } } async loadData (hastimer) { @@ -231,13 +233,18 @@ } let searches = fromJS(search).toJS() - if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + if (config.setting.useMSearch && mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 let keys = searches.map(item => item.key) mainSearch.forEach(item => { if (!keys.includes(item.key)) { searches.push(item) } }) + } + + let requireFields = searches.filter(item => item.required && item.value === '') + if (requireFields.length > 0) { + return } if (!hastimer) { @@ -277,19 +284,12 @@ * 3銆佹煴鐘跺浘鏁版嵁琛ラ綈 */ getdata = () => { - const { data, plot, config } = this.state + const { data, plot } = this.state if (!data) { this.setState({empty: true}) return [] } - - let decimal = 0 - config.columns.forEach(col => { - if (plot.Yaxis === col.field && /Decimal/ig.test(col.datatype)) { - decimal = +col.datatype.replace(/^Decimal\(18,/ig, '').replace(/\)/ig, '') - } - }) let _data = [] let _cdata = fromJS(data).toJS() @@ -300,14 +300,16 @@ if (typeof(item[plot.Yaxis]) !== 'number') { item[plot.Yaxis] = parseFloat(item[plot.Yaxis]) if (isNaN(item[plot.Yaxis])) { - item[plot.Yaxis] = 0 + return } + } else if (!item[plot.Xaxis]) { + return } - if (item[plot.Xaxis] && !_mdata.has(item[plot.Xaxis])) { + if (!_mdata.has(item[plot.Xaxis])) { item.$count = 1 _mdata.set(item[plot.Xaxis], item) - } else if (item[plot.Xaxis]) { + } else { let _item = _mdata.get(item[plot.Xaxis]) _item.$count++ _item[plot.Yaxis] += item[plot.Yaxis] @@ -318,8 +320,7 @@ _data = [..._mdata.values()] _data = _data.map(item => { item[plot.Yaxis] = item[plot.Yaxis] / item.$count - item[plot.Yaxis] = item[plot.Yaxis].toFixed(decimal) - item[plot.Yaxis] = +item[plot.Yaxis] + item[plot.Yaxis] = +item[plot.Yaxis].toFixed(plot.$decimal) return item }) @@ -329,13 +330,15 @@ if (typeof(item[plot.Yaxis]) !== 'number') { item[plot.Yaxis] = parseFloat(item[plot.Yaxis]) if (isNaN(item[plot.Yaxis])) { - item[plot.Yaxis] = 0 + return } + } else if (!item[plot.Xaxis]) { + return } - if (item[plot.Xaxis] && !_mdata.has(item[plot.Xaxis])) { + if (!_mdata.has(item[plot.Xaxis])) { _mdata.set(item[plot.Xaxis], item) - } else if (item[plot.Xaxis]) { + } else { let _item = _mdata.get(item[plot.Xaxis]) _item[plot.Yaxis] += item[plot.Yaxis] _mdata.set(item[plot.Xaxis], _item) @@ -344,34 +347,390 @@ _data = [..._mdata.values()] _data = _data.map(item => { - item[plot.Yaxis] = item[plot.Yaxis].toFixed(decimal) - item[plot.Yaxis] = +item[plot.Yaxis] + item[plot.Yaxis] = +item[plot.Yaxis].toFixed(plot.$decimal) return item }) } else { // plot.repeat === 'unrepeat' let _mdata = new Map() _cdata.forEach(item => { - if (item[plot.Xaxis] && !_mdata.has(item[plot.Xaxis])) { - - if (typeof(item[plot.Yaxis]) !== 'number') { - item[plot.Yaxis] = parseFloat(item[plot.Yaxis]) - if (isNaN(item[plot.Yaxis])) { - item[plot.Yaxis] = 0 - } - } - - item[plot.Yaxis] = item[plot.Yaxis].toFixed(decimal) - item[plot.Yaxis] = +item[plot.Yaxis] - - _mdata.set(item[plot.Xaxis], item) + if (!item[plot.Xaxis] || _mdata.has(item[plot.Xaxis])) { + return } + if (typeof(item[plot.Yaxis]) !== 'number') { + item[plot.Yaxis] = parseFloat(item[plot.Yaxis]) + if (isNaN(item[plot.Yaxis])) { + return + } + } + + item[plot.Yaxis] = +item[plot.Yaxis].toFixed(plot.$decimal) + + _mdata.set(item[plot.Xaxis], item) }) _data = [..._mdata.values()] } this.setState({empty: _data.length === 0}) + return _data + } + + getnestdata = () => { + const { data, plot } = this.state + + if (!data) { + this.setState({empty: true}) + return [] + } + + let _data = [] + let _cdata = fromJS(data).toJS() + + if (plot.repeat === 'average') { + let _mdata = new Map() + let map = new Map() + let sort = 1 + _cdata.forEach(item => { + if (typeof(item[plot.Yaxis]) !== 'number') { + item[plot.Yaxis] = parseFloat(item[plot.Yaxis]) + if (isNaN(item[plot.Yaxis])) { + return + } + } else if (!item[plot.Xaxis] || !item[plot.type]) { + return + } + + let sign = item[plot.type] + item[plot.Xaxis] + + if (!_mdata.has(sign)) { + let _sort = sort + if (map.has(item.type)) { + _sort = map.get(item.type) + } else { + map.set(item.type, _sort) + sort++ + } + + item.$count = 1 + item.$sort = _sort + _mdata.set(sign, item) + } else { + let _item = _mdata.get(sign) + _item.$count++ + _item[plot.Yaxis] += item[plot.Yaxis] + _mdata.set(sign, _item) + } + }) + + _data = [..._mdata.values()] + _data = _data.map(item => { + item[plot.Yaxis] = item[plot.Yaxis] / item.$count + item[plot.Yaxis] = +item[plot.Yaxis].toFixed(plot.$decimal) + + return item + }) + } else if (plot.repeat === 'cumsum') { + let _mdata = new Map() + let map = new Map() + let sort = 1 + _cdata.forEach(item => { + if (typeof(item[plot.Yaxis]) !== 'number') { + item[plot.Yaxis] = parseFloat(item[plot.Yaxis]) + if (isNaN(item[plot.Yaxis])) { + return + } + } else if (!item[plot.Xaxis] || !item[plot.type]) { + return + } + + let sign = item[plot.type] + item[plot.Xaxis] + + if (!_mdata.has(sign)) { + let _sort = sort + if (map.has(item.type)) { + _sort = map.get(item.type) + } else { + map.set(item.type, _sort) + sort++ + } + + item.$sort = _sort + _mdata.set(sign, item) + } else { + let _item = _mdata.get(sign) + _item[plot.Yaxis] += item[plot.Yaxis] + _mdata.set(sign, _item) + } + }) + + _data = [..._mdata.values()] + _data = _data.map(item => { + item[plot.Yaxis] = +item[plot.Yaxis].toFixed(plot.$decimal) + return item + }) + } else { // plot.repeat === 'unrepeat' + let _mdata = new Map() + let map = new Map() + let sort = 1 + _cdata.forEach(item => { + let sign = item[plot.type] + item[plot.Xaxis] + if (!item[plot.Xaxis] || !item[plot.type] || _mdata.has(sign)) { + return + } + + if (typeof(item[plot.Yaxis]) !== 'number') { + item[plot.Yaxis] = parseFloat(item[plot.Yaxis]) + if (isNaN(item[plot.Yaxis])) { + return + } + } + + let _sort = sort + if (map.has(item.type)) { + _sort = map.get(item.type) + } else { + map.set(item.type, _sort) + sort++ + } + + item.$sort = _sort + item[plot.Yaxis] = +item[plot.Yaxis].toFixed(plot.$decimal) + + _mdata.set(sign, item) + }) + + _data = [..._mdata.values()] + } + + this.setState({empty: _data.length === 0}) + + return _data + } + + nestrender = () => { + const { plot, chartId } = this.state + + let X_axis = plot.Xaxis + let Y_axis = plot.Yaxis + let type = plot.type + let color = plot.color + + let colors = new Map() + let colorIndex = 0 + + if (plot.colors && plot.colors.length > 0) { + plot.colors.forEach(item => { + if (!colors.has(item.label)) { + colors.set(item.label, item.color) + } + }) + } + + let _data = this.getnestdata() + + const dvx = new DataView().source(_data) + + dvx.transform({ + type: 'sort-by', + fields: ['$sort'] + }) + + let data = dvx.rows + + // 閫氳繃 DataSet 璁$畻鐧惧垎姣� + const dv = new DataView() + dv.source(data).transform({ + type: 'percent', + field: Y_axis, + dimension: type, + as: '$percent' + }) + + const dv1 = new DataView() + dv1.source(data).transform({ + type: 'percent', + field: Y_axis, + dimension: X_axis, + as: '$percent', + }) + + const chart = new Chart({ + container: chartId, + autoFit: true, + height: plot.height, + padding: 0, + }) + + chart.data(dv.rows) + + if (plot.show !== 'value') { + chart.scale('percent', { + formatter: (val) => { + val = val * 100 + '%' + return val + } + }) + + Y_axis = '$percent' + } + let radius = plot.radius / 100 + let innerRadius = plot.innerRadius / 100 + + chart.coordinate('theta', { + innerRadius: innerRadius, + radius: innerRadius + (radius - innerRadius) / 2, + }) + chart.tooltip({ + showTitle: false, + showMarkers: false, + }) + chart.legend(false) + let chart1 = chart + .interval() + .adjust('stack') + .position(Y_axis) + .tooltip(`${type}*${Y_axis}`, (type, percent) => { + if (plot.show !== 'value') { + percent = (percent * 100).toFixed(2) + '%' + } + return { + name: type, + value: percent, + } + }) + if (plot.splitLine) { + chart1.style({ + lineWidth: plot.splitLine, + stroke: plot.splitColor, + }) + } + if (plot.colors && plot.colors.length > 0) { + let limit = chartColors.length + chart1.color(type, (_type) => { + if (colors.has(_type)) { + return colors.get(_type) + } else { + let _c = chartColors[colorIndex % limit] + colors.set(type, _c) + colorIndex++ + return _c + } + }) + } else { + chart1.color(type) + } + + if (plot.label !== 'false') { + chart1.label(type, { + offset: -10, + }) + } + + const outterView = chart.createView() + + outterView.data(dv1.rows) + + if (plot.show !== 'value') { + outterView.scale('percent', { + formatter: (val) => { + val = val * 100 + '%' + return val + } + }) + } + outterView.coordinate('theta', { + innerRadius: (innerRadius + (radius - innerRadius) / 2) / radius, + radius: radius + }) + let chart2 = outterView + .interval() + .adjust('stack') + .position(Y_axis) + .tooltip(`${X_axis}*${Y_axis}`, (name, value) => { + if (plot.show !== 'value') { + value = (value * 100).toFixed(2) + '%' + } + return { + name: name, + value: value + } + }) + + if (plot.splitLine) { + chart2.style({ + lineWidth: plot.splitLine, + stroke: plot.splitColor, + }) + } + if (plot.colors && plot.colors.length > 0) { + let limit = chartColors.length + chart2.color(X_axis, (type) => { + if (colors.has(type)) { + return colors.get(type) + } else { + let _c = chartColors[colorIndex % limit] + colors.set(type, _c) + colorIndex++ + return _c + } + }) + } else { + chart2.color(X_axis) + } + + if (plot.label !== 'false') { + if (plot.label === 'inner') { + chart2.label(Y_axis, { + offset: -30, + content: (data) => { + let _val = '' + if (plot.show !== 'value') { + _val = `${(data[Y_axis] * 100).toFixed(2)}%` + } else { + _val = `${data[Y_axis]}` + } + return _val + }, + style: { + textAlign: 'center', + fontSize: 16, + shadowBlur: 2, + shadowColor: 'rgba(0, 0, 0, .45)', + fill: '#fff', + } + }) + } else { + chart2.label(Y_axis, { + layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' }, + labelHeight: 20, + content: (data) => { + let _val = '' + if (plot.show !== 'value') { + _val = `${(data[Y_axis] * 100).toFixed(2)}%` + } else { + _val = `${data[Y_axis]}` + } + + return `${data[X_axis]}: ${_val}` + }, + labelLine: { + style: { + lineWidth: 0.5, + }, + }, + style: { + fill: color + } + }) + } + } + if (plot.interaction && plot.interaction.length) { + plot.interaction.forEach(t => { + chart.interaction(t) + }) + } + chart.render() } /** @@ -379,12 +738,13 @@ */ pierender = () => { const { plot, chartId } = this.state - let color = plot.color || 'rgba(0, 0, 0, 0.85)' - let X_axis = plot.Xaxis || 'x' - let Y_axis = plot.Yaxis || 'y' + let color = plot.color - let data = this.getdata(X_axis, Y_axis) + let X_axis = plot.Xaxis + let Y_axis = plot.Yaxis + + let data = this.getdata() const ds = new DataSet() const dv = ds.createView().source(data) @@ -392,7 +752,7 @@ const chart = new Chart({ container: chartId, autoFit: true, - height: plot.height || 400 + height: plot.height }) if (plot.shape !== 'nightingale' && plot.show !== 'value') { @@ -479,14 +839,23 @@ value: value } }) + + if (plot.splitLine) { + _chart.style({ + lineWidth: plot.splitLine, + stroke: plot.splitColor, + }) + } if (plot.colors && plot.colors.length > 0) { let limit = chartColors.length _chart.color(X_axis, (type) => { - if (colors.get(type)) { + if (colors.has(type)) { return colors.get(type) } else { - colors.set(type, chartColors[colorIndex % limit]) + let _c = chartColors[colorIndex % limit] + colors.set(type, _c) colorIndex++ + return _c } }) } else { @@ -515,7 +884,7 @@ }) } else { _chart.label(Y_axis, { - layout: { type: 'pie-spider' }, + layout: { type: plot.label === 'outer' ? 'pie-spider' : 'fixed-overlap' }, labelHeight: 20, content: (data) => { let _val = '' @@ -538,10 +907,8 @@ }) } } - chart.interaction('element-active') } else { chart.axis(false) - chart.interaction('element-highlight') let _chart = chart .interval() .position(`${X_axis}*${Y_axis}`) @@ -549,11 +916,13 @@ if (plot.colors && plot.colors.length > 0) { let limit = chartColors.length _chart.color(X_axis, (type) => { - if (colors.get(type)) { + if (colors.has(type)) { return colors.get(type) } else { - colors.set(type, chartColors[colorIndex % limit]) + let _c = chartColors[colorIndex % limit] + colors.set(type, _c) colorIndex++ + return _c } }) } else { @@ -570,9 +939,11 @@ } _chart.label(X_axis, _label) - .style({ - lineWidth: 1, - stroke: '#fff', + } + if (plot.splitLine) { + _chart.style({ + lineWidth: plot.splitLine, + stroke: plot.splitColor, }) } } @@ -624,7 +995,11 @@ } }) } - + if (plot.interaction && plot.interaction.length) { + plot.interaction.forEach(t => { + chart.interaction(t) + }) + } chart.render() } @@ -647,7 +1022,7 @@ } <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> <div className="canvas-wrap"> - <div className={'canvas' + (empty ? ' empty' : '')} id={this.state.chartId}></div> + <div className={'canvas' + (empty ? ' empty' : '')} style={{height: config.plot.height + 30}} id={this.state.chartId}></div> </div> {empty ? <Empty description={false}/> : null} </div> -- Gitblit v1.8.0