From 9f3a0655391c42dc7fb9a3cfa6d8fc4ca935bd9d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 29 十二月 2020 18:29:37 +0800
Subject: [PATCH] 2020-12-29
---
src/menu/components/chart/antv-bar/index.jsx | 576 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 442 insertions(+), 134 deletions(-)
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index c16378f..95f9131 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -1,27 +1,34 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
+import { Icon, Popover, notification } from 'antd'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
+import asyncIconComponent from '@/utils/asyncIconComponent'
import Utils from '@/utils/utils.js'
+import { chartColors } from '@/utils/option.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'
-const SettingComponent = asyncComponent(() => import('@/menu/datasource'))
-const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
-const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
-const ChartCompileForm = asyncComponent(() => import('./chartcompile'))
+const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
+const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
+const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent'))
+const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
+const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent'))
+const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))
+const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent'))
class antvBarLineChart extends Component {
static propTpyes = {
- menu: PropTypes.object,
card: PropTypes.object,
updateConfig: PropTypes.func,
+ deletecomponent: PropTypes.func,
}
state = {
@@ -31,14 +38,18 @@
}
UNSAFE_componentWillMount () {
- const { card, menu } = this.props
+ const { card } = this.props
if (card.isNew) {
let _plot = {
chartType: card.type, // 鍥捐〃绫诲瀷
enabled: 'false', // 鏄惁浣跨敤鑷畾涔夎缃�
datatype: 'query', // 鏁版嵁绫诲瀷鏌ヨ鎴栫粺璁�
- customs: []
+ customs: [],
+ width: 24,
+ height: 400,
+ barSize: 35,
+ name: card.name
}
if (card.subtype === 'bar') {
@@ -53,17 +64,6 @@
_plot.shape = 'hv'
}
- let dataName = ''
-
- if (card.floor === 1) {
- while (!dataName) {
- let _dataName = Utils.getdataName()
- if (menu.components.filter(com => com.dataName === _dataName).length === 0) {
- dataName = _dataName
- }
- }
- }
-
let _card = {
uuid: card.uuid,
type: card.type,
@@ -73,14 +73,22 @@
format: 'array', // 缁勪欢灞炴�� - 鏁版嵁鏍煎紡
pageable: false, // 缁勪欢灞炴�� - 鏄惁鍙垎椤�
switchable: false, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹�
- dataName: dataName,
+ dataName: card.dataName || '',
+ width: _plot.width,
+ name: _plot.name,
subtype: card.subtype,
- setting: {span: card.floor === 1 ? 12 : 24, height: 400, interType: 'system', name: card.name},
+ setting: { interType: 'system' },
+ style: {
+ borderWidth: '1px', borderColor: 'rgb(217, 217, 217)',
+ marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
+ },
+ headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
columns: [],
scripts: [],
search: [],
action: [],
- plot: _plot
+ plot: _plot,
+ btnlog: [],
}
this.setState({
card: _card
@@ -96,10 +104,11 @@
componentDidMount () {
this.viewrender()
MKEmitter.addListener('tabsChange', this.handleTabsChange)
+ MKEmitter.addListener('submitStyle', this.getStyle)
}
shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.state), fromJS(nextState))
+ return !is(fromJS(this.state), fromJS(nextState)) || (!this.props.menu && nextProps.menu)
}
/**
@@ -110,6 +119,7 @@
return
}
MKEmitter.removeListener('tabsChange', this.handleTabsChange)
+ MKEmitter.removeListener('submitStyle', this.getStyle)
}
handleTabsChange = (parentId) => {
@@ -159,17 +169,13 @@
}
}
+ /**
+ * @description 鎶樼嚎鍥�
+ */
linerender = () => {
const { card } = this.state
- let plot = {...card.plot, height: card.setting.height - 70}
-
- let transfield = {}
- card.columns.forEach(col => {
- if (col.field) {
- transfield[col.field] = col.label
- }
- })
-
+ let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let X_axis = plot.Xaxis || 'x'
let Y_axis = plot.Yaxis || ['y']
@@ -178,6 +184,12 @@
if (plot.enabled !== 'true') {
const ds = new DataSet()
const dv = ds.createView().source(data)
+ let transfield = {}
+ card.columns.forEach(col => {
+ if (col.field) {
+ transfield[col.field] = col.label
+ }
+ })
dv.transform({
type: 'fold',
@@ -203,6 +215,9 @@
})
chart.data(dv.rows)
+
+ chart.axis(X_axis, { label: { style: { fill: color } }, line: { style: { fill: color } } })
+ chart.axis('value', { grid: { style: { fill: color } }, label: { style: { fill: color } } })
if (plot.coordinate !== 'polar') {
chart.scale(X_axis, {
@@ -210,14 +225,16 @@
})
}
chart.scale('value', {
- nice: true
+ nice: true,
+ range: [0, 0.93]
})
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
} else {
chart.legend({
- position: plot.legend
+ position: plot.legend,
+ itemName: { style: { fill: color } }
})
}
@@ -239,15 +256,57 @@
radius: 0.8
})
}
+
+ let colors = new Map()
+ let colorIndex = 0
+
+ if (plot.colors && plot.colors.length > 0) {
+ plot.colors.forEach(item => {
+ if (!colors.has(transfield[item.type])) {
+ colors.set(transfield[item.type], item.color)
+ }
+ })
+ }
let _chart = chart
.line()
.position(`${X_axis}*value`)
- .color('key')
.shape(plot.shape || 'smooth')
+ .tooltip(`${X_axis}*value`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ value: value
+ }
+ })
+ if (plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ _chart.color('key', (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ } else {
+ _chart.color('key')
+ }
if (plot.label === 'true') {
- _chart.label('value')
+ _chart.label('value', (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
}
if (plot.point === 'true') {
@@ -260,34 +319,75 @@
}
chart.render()
} else {
- this.customrender(data, transfield)
+ this.customrender(data)
}
}
- customrender = (data, transfield) => {
- const { plot } = this.props
-
- let barfields = []
+ /**
+ * @description 鑷畾涔夊浘
+ */
+ customrender = (data) => {
+ let card = fromJS(this.state.card).toJS()
+ let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let fields = []
let legends = []
+ let transfield = {}
+
+ card.columns.forEach(col => {
+ if (col.field) {
+ transfield[col.field] = col.label
+ }
+ })
+
+ let colors = new Map()
+ let colorIndex = 0
+ let limit = chartColors.length
+
+ if (plot.colors && plot.colors.length > 0) {
+ plot.colors.forEach(item => {
+ if (!colors.has(item.type)) {
+ colors.set(item.type, item.color)
+ }
+ })
+ }
+
+ let axisIndex = 0
+ let hasBar = false
plot.customs.forEach(item => {
- item.name = transfield[item.field] || item.field
- if (item.axis === 'left') {
- item.index = 0
- } else if (item.axis === 'right') {
- item.index = 1
+ item.name = transfield[item.type] || item.type
+ item.chartType = item.shape ? (item.shape[0] || 'bar') : 'bar'
+ item.shape = item.shape ? (item.shape[1] || '') : ''
+
+ if (colors.get(item.type)) {
+ item.color = colors.get(item.type)
} else {
- item.index = 2
+ item.color = chartColors[colorIndex % limit]
+ colorIndex++
}
- if (item.chartType === 'bar') {
- barfields.push(item.field)
- fields.unshift(item)
+ if (item.chartType === 'bar' && !hasBar) {
+ hasBar = true
+ } else if (item.chartType === 'bar') {
+ item.chartType = 'line'
+ item.shape = 'smooth'
+ }
+
+ if (item.axis === 'true' && axisIndex < 2) {
+ if (axisIndex === 0) {
+ item.axis = { grid: {style: { fill: color }}, title: { style: { fill: color } }, label: {style: { fill: color }} }
+ fields.unshift(item)
+ } else {
+ item.axis = { grid: null, title: {style: { fill: color }}, label: {style: { fill: color }} }
+ fields.splice(1, 0, item)
+ }
+ axisIndex++
} else {
+ item.axis = { grid: null, title: null, label: null }
fields.push(item)
}
-
+
legends.push({
value: item.name,
name: item.name,
@@ -295,29 +395,29 @@
})
})
- fields.sort((a, b) => a.index - b.index)
-
const ds = new DataSet()
const dv = ds.createView().source(data)
dv.transform({
type: 'map',
callback(row) {
fields.forEach(line => {
- row[line.name] = row[line.field]
+ row[line.name] = row[line.type]
})
return row
}
})
const chart = new Chart({
- container: plot.uuid,
+ container: card.uuid,
autoFit: true,
height: plot.height || 400
})
chart.data(dv.rows)
- if (plot.coordinate !== 'polar' && barfields.length === 0) {
+ chart.axis(plot.Xaxis, { label: { style: { fill: color } }, line: { style: { fill: color } } })
+
+ if (!hasBar) {
chart.scale(plot.Xaxis, {
range: [0, 1]
})
@@ -330,6 +430,7 @@
custom: true,
position: plot.legend,
items: legends,
+ itemName: { style: { fill: color } }
})
}
@@ -337,18 +438,7 @@
chart.tooltip(false)
} else {
chart.tooltip({
- shared: true
- })
- }
-
- if (plot.transpose === 'true') {
- chart.coordinate().transpose()
- }
-
- if (plot.coordinate === 'polar') {
- chart.coordinate('polar', {
- innerRadius: 0.1,
- radius: 0.8
+ shared: true,
})
}
@@ -356,36 +446,45 @@
nice: true
})
- fields.forEach((item, i) => {
- if (i === 0) {
- chart.axis(item.name, {
- grid: {},
- title: {},
- label: {}
- })
- } else if (i === 1 && item.axis !== 'unset') {
- chart.axis(item.name, {
- grid: null,
- title: {},
- label: {}
- })
- } else {
- chart.axis(item.name, {
- grid: null,
- title: null,
- label: null
- })
- }
+ fields.forEach(item => {
+ chart.axis(item.name, item.axis)
+ chart.scale(item.name, {
+ nice: true,
+ range: [0, 0.93]
+ })
+
if (item.chartType === 'bar') {
let _chart = chart
.interval()
.position(`${plot.Xaxis}*${item.name}`)
.color(item.color)
.shape(item.shape)
+ .tooltip(`${plot.Xaxis}*${item.name}`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ value: value
+ }
+ })
+ if (plot.barSize) {
+ _chart.size(plot.barSize || 35)
+ }
if (item.label === 'true') {
- _chart.label(item.name)
+ _chart.label(item.name, (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
}
} else if (item.chartType === 'line') {
let _chart = chart
@@ -393,9 +492,28 @@
.position(`${plot.Xaxis}*${item.name}`)
.color(item.color)
.shape(item.shape)
+ .tooltip(`${plot.Xaxis}*${item.name}`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ value: value
+ }
+ })
if (item.label === 'true') {
- _chart.label(item.name)
+ _chart.label(item.name, (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
}
if (plot.point === 'true') {
@@ -412,17 +530,13 @@
chart.render()
}
+ /**
+ * @description 鏌卞舰鍥�
+ */
barrender = () => {
const { card } = this.state
-
- let plot = {...card.plot, height: card.setting.height - 70}
-
- let transfield = {}
- card.columns.forEach(col => {
- if (col.field) {
- transfield[col.field] = col.label
- }
- })
+ let plot = {...card.plot, height: card.plot.height - 80}
+ let color = plot.color || 'rgba(0, 0, 0, 0.85)'
let X_axis = plot.Xaxis || 'x'
let Y_axis = plot.Yaxis || ['y']
@@ -431,6 +545,13 @@
if (plot.enabled !== 'true') {
const ds = new DataSet()
const dv = ds.createView().source(data)
+ let transfield = {}
+
+ card.columns.forEach(col => {
+ if (col.field) {
+ transfield[col.field] = col.label
+ }
+ })
dv.transform({
type: 'fold',
@@ -448,7 +569,7 @@
},
})
}
-
+
const chart = new Chart({
container: card.uuid,
autoFit: true,
@@ -456,16 +577,21 @@
})
chart.data(dv.rows)
+
+ chart.axis(X_axis, { label: { style: { fill: color } }, line: { style: { fill: color } } })
+ chart.axis('value', { grid: { style: { fill: color } }, label: { style: { fill: color } } })
chart.scale('value', {
- nice: true
+ nice: true,
+ range: [0, 0.93]
})
if (!plot.legend || plot.legend === 'hidden') {
chart.legend(false)
} else {
chart.legend({
- position: plot.legend
+ position: plot.legend,
+ itemName: { style: { fill: color } }
})
}
@@ -487,12 +613,22 @@
radius: 0.8
})
}
+
+ let colors = new Map()
+ let colorIndex = 0
+
+ if (plot.colors && plot.colors.length > 0) {
+ plot.colors.forEach(item => {
+ if (!colors.has(transfield[item.type])) {
+ colors.set(transfield[item.type], item.color)
+ }
+ })
+ }
if (plot.adjust !== 'stack') {
let _chart = chart
.interval()
.position(`${X_axis}*value`)
- .color('key')
.adjust([
{
type: 'dodge',
@@ -500,39 +636,113 @@
}
])
.shape(plot.shape || 'rect')
-
+ .tooltip(`${X_axis}*value`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ value: value
+ }
+ })
+
+ if (plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ _chart.color('key', (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ } else {
+ _chart.color('key')
+ }
if (plot.label === 'true') {
- _chart.label('value')
+ _chart.label('value', (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
+ }
+
+ if (plot.barSize || plot.correction) {
+ _chart.size(plot.barSize || 35)
}
} else if (plot.adjust === 'stack') {
let _chart = chart
.interval()
.position(`${X_axis}*value`)
- .color('key')
.adjust('stack')
.shape(plot.shape || 'rect')
+ .tooltip(`${X_axis}*value`, (name, value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ name: name,
+ value: value
+ }
+ })
+ if (plot.colors && plot.colors.length > 0) {
+ let limit = chartColors.length
+ _chart.color('key', (key) => {
+ if (colors.get(key)) {
+ return colors.get(key)
+ } else {
+ colors.set(key, chartColors[colorIndex % limit])
+ colorIndex++
+ }
+ })
+ } else {
+ _chart.color('key')
+ }
if (plot.label === 'true') {
- _chart.label('value')
+ _chart.label('value', (value) => {
+ if (plot.show === 'percent') {
+ value = value + '%'
+ }
+ return {
+ content: value,
+ style: {
+ fill: color
+ }
+ }
+ })
+ }
+
+ if (plot.barSize || plot.correction) {
+ _chart.size(plot.barSize || 35)
}
}
chart.render()
} else {
- this.customrender(data, transfield)
+ this.customrender(data)
}
}
updateComponent = (component) => {
const card = fromJS(this.state.card).toJS()
let refresh = false
- if (card.setting.span !== component.setting.span || card.setting.height !== component.setting.height || !is(fromJS(component.plot), fromJS(card.plot))) {
+ if (!is(fromJS(component.plot), fromJS(card.plot))) {
let _element = document.getElementById(card.uuid)
if (_element) {
_element.innerHTML = ''
}
refresh = true
}
+
+ component.width = component.plot.width
+ component.name = component.plot.name
this.setState({
card: component
@@ -546,44 +756,142 @@
this.props.updateConfig(component)
}
+ addSearch = () => {
+ const { card } = this.state
+
+ let newcard = {}
+ newcard.uuid = Utils.getuuid()
+ newcard.focus = true
+
+ newcard.label = 'label'
+ newcard.initval = ''
+ newcard.type = 'select'
+ newcard.resourceType = '0'
+ newcard.options = []
+ newcard.setAll = 'false'
+ newcard.orderType = 'asc'
+ newcard.display = 'dropdown'
+ newcard.match = '='
+
+ // 娉ㄥ唽浜嬩欢-娣诲姞鎼滅储
+ MKEmitter.emit('addSearch', card.uuid, newcard)
+ }
+
+ addButton = () => {
+ const { card } = this.state
+
+ let newcard = {}
+ newcard.uuid = Utils.getuuid()
+ newcard.focus = true
+
+ newcard.label = '瀵煎嚭Excel'
+ newcard.sqlType = ''
+ newcard.Ot = 'requiredSgl'
+ newcard.OpenType = 'excelOut'
+ newcard.icon = 'download'
+ newcard.class = 'dgreen'
+ newcard.intertype = card.setting.interType
+ newcard.innerFunc = card.setting.innerFunc || ''
+ newcard.sysInterface = card.setting.sysInterface || ''
+ newcard.outerFunc = card.setting.outerFunc || ''
+ newcard.interface = card.setting.interface || ''
+ newcard.execSuccess = 'grid'
+ newcard.execError = 'never'
+ newcard.popClose = 'never'
+ newcard.errorTime = 10
+ newcard.verify = null
+ newcard.show = 'icon'
+
+ // 娉ㄥ唽浜嬩欢-娣诲姞鎸夐挳
+ MKEmitter.emit('addButton', card.uuid, newcard)
+ }
+
+ changeStyle = () => {
+ const { card } = this.state
+
+ MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin'], card.style)
+ }
+
+ getStyle = (comIds, style) => {
+ const { card } = this.state
+
+ if (comIds[0] !== card.uuid || comIds.length > 1) return
+
+ let _card = {...card, style}
+
+ this.setState({
+ card: _card
+ })
+
+ this.props.updateConfig(_card)
+ }
+
+ handleLog = (type, logs, item) => {
+ let card = fromJS(this.state.card).toJS()
+
+ if (type === 'revert') {
+ card.action = card.action ? [...card.action, item] : [item]
+ card.btnlog = logs
+
+ this.setState({ card })
+ this.props.updateConfig(card)
+ notification.success({
+ top: 92,
+ message: '鎭㈠鎴愬姛锛�',
+ duration: 2
+ })
+ } else {
+ card.btnlog = logs
+ this.setState({ card })
+ this.props.updateConfig(card)
+ notification.success({
+ top: 92,
+ message: '娓呴櫎鎴愬姛锛�',
+ duration: 2
+ })
+ }
+ }
+
render() {
const { card } = this.state
- const { menu } = this.props
return (
- <div className="menu-line-chart-edit-box" style={{height: card.setting.height || 400}}>
- <SettingComponent
- config={card}
- menu={menu}
- updateConfig={this.updateComponent}
- />
- <div className="chart-header">
- <span className="chart-title">{card.setting.title || ''}</span>
- <SearchComponent
- menu={menu}
- config={card}
- sysRoles={menu.sysRoles}
- optionLibs={null}
- updatesearch={this.updateComponent}
- />
- </div>
+ <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}>
+ <NormalHeader config={card} updateComponent={this.updateComponent}/>
+ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
+ <div className="mk-popover-control">
+ <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" />
+ <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" />
+ <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
+ <CopyComponent type="line" card={card}/>
+ <PasteComponent config={card} options={['action', 'search', 'form']} updateConfig={this.updateComponent} />
+ <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" />
+ <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} />
+ <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} />
+ <SettingComponent config={card} updateConfig={this.updateComponent}/>
+ </div>
+ } trigger="hover">
+ <Icon type="tool" />
+ </Popover>
<ActionComponent
type="chart"
- menu={menu}
config={card}
- tabs={[]}
- // setSubConfig={(_btn) => this.setSubConfig(_btn, 'button')}
updateaction={this.updateComponent}
/>
<div className="canvas" id={card.uuid}></div>
- <ChartCompileForm
- config={card}
- dict={this.state.dict}
- plotchange={this.updateComponent}
- />
</div>
)
}
}
-export default antvBarLineChart
\ No newline at end of file
+const mapStateToProps = (state) => {
+ return {
+ menu: state.customMenu
+ }
+}
+
+const mapDispatchToProps = () => {
+ return {}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(antvBarLineChart)
\ No newline at end of file
--
Gitblit v1.8.0