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 | 511 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 308 insertions(+), 203 deletions(-)
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index 579d22f..95f9131 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
-import { Icon, Popover } from 'antd'
+import { Icon, Popover, notification } from 'antd'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
@@ -11,14 +11,18 @@
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 = asyncIconComponent(() => import('@/menu/datasource'))
-const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))
-const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
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 = {
@@ -78,12 +82,13 @@
borderWidth: '1px', borderColor: 'rgb(217, 217, 217)',
marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
},
- headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: 'rgb(217, 217, 217)' },
+ headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' },
columns: [],
scripts: [],
search: [],
action: [],
- plot: _plot
+ plot: _plot,
+ btnlog: [],
}
this.setState({
card: _card
@@ -164,18 +169,13 @@
}
}
+ /**
+ * @description 鎶樼嚎鍥�
+ */
linerender = () => {
const { card } = this.state
let plot = {...card.plot, height: card.plot.height - 80} // 鍘婚櫎title鎵�鍗犵┖闂�
let color = plot.color || 'rgba(0, 0, 0, 0.85)'
-
- let transfield = {}
- card.columns.forEach(col => {
- if (col.field) {
- transfield[col.field] = col.label
- }
- })
-
let X_axis = plot.Xaxis || 'x'
let Y_axis = plot.Yaxis || ['y']
@@ -184,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',
@@ -210,30 +216,8 @@
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.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, {
@@ -241,7 +225,8 @@
})
}
chart.scale('value', {
- nice: true
+ nice: true,
+ range: [0, 0.93]
})
if (!plot.legend || plot.legend === 'hidden') {
@@ -249,11 +234,7 @@
} else {
chart.legend({
position: plot.legend,
- itemName: {
- style: {
- fill: color,
- }
- }
+ itemName: { style: { fill: color } }
})
}
@@ -275,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') {
@@ -296,36 +319,75 @@
}
chart.render()
} else {
- this.customrender(data, transfield)
+ this.customrender(data)
}
}
- customrender = (data, transfield) => {
- const { card } = this.state
+ /**
+ * @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 barfields = []
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,
@@ -333,54 +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)
- chart.axis(plot.Xaxis, {
- label: {
- style: {
- fill: color,
- }
- },
- line: {
- style: {
- fill: color,
- }
- }
- })
- chart.axis('value', {
- grid: {
- style: {
- fill: color,
- }
- },
- label: {
- style: {
- fill: color,
- }
- }
- })
+ chart.axis(plot.Xaxis, { label: { style: { fill: color } }, line: { style: { fill: color } } })
- if (plot.coordinate !== 'polar' && barfields.length === 0) {
+ if (!hasBar) {
chart.scale(plot.Xaxis, {
range: [0, 1]
})
@@ -393,11 +430,7 @@
custom: true,
position: plot.legend,
items: legends,
- itemName: {
- style: {
- fill: color,
- }
- }
+ itemName: { style: { fill: color } }
})
}
@@ -409,51 +442,49 @@
})
}
- if (plot.transpose === 'true') {
- chart.coordinate().transpose()
- }
-
- if (plot.coordinate === 'polar') {
- chart.coordinate('polar', {
- innerRadius: 0.1,
- radius: 0.8
- })
- }
-
chart.scale({
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
@@ -461,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') {
@@ -480,17 +530,13 @@
chart.render()
}
+ /**
+ * @description 鏌卞舰鍥�
+ */
barrender = () => {
const { card } = this.state
let plot = {...card.plot, height: card.plot.height - 80}
let color = plot.color || 'rgba(0, 0, 0, 0.85)'
-
- let transfield = {}
- card.columns.forEach(col => {
- if (col.field) {
- transfield[col.field] = col.label
- }
- })
let X_axis = plot.Xaxis || 'x'
let Y_axis = plot.Yaxis || ['y']
@@ -499,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',
@@ -525,33 +578,12 @@
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.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') {
@@ -559,11 +591,7 @@
} else {
chart.legend({
position: plot.legend,
- itemName: {
- style: {
- fill: color,
- }
- }
+ itemName: { style: { fill: color } }
})
}
@@ -585,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',
@@ -598,9 +636,41 @@
}
])
.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) {
@@ -610,12 +680,43 @@
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) {
@@ -625,7 +726,7 @@
chart.render()
} else {
- this.customrender(data, transfield)
+ this.customrender(data)
}
}
@@ -694,7 +795,6 @@
newcard.sysInterface = card.setting.sysInterface || ''
newcard.outerFunc = card.setting.outerFunc || ''
newcard.interface = card.setting.interface || ''
- newcard.method = 'POST'
newcard.execSuccess = 'grid'
newcard.execError = 'never'
newcard.popClose = 'never'
@@ -706,12 +806,6 @@
MKEmitter.emit('addButton', card.uuid, newcard)
}
- changeTitleStyle = () => {
- const { card } = this.state
-
- MKEmitter.emit('changeStyle', [card.uuid, 'header'], ['font', 'border'], card.headerStyle)
- }
-
changeStyle = () => {
const { card } = this.state
@@ -721,16 +815,9 @@
getStyle = (comIds, style) => {
const { card } = this.state
- if (comIds[0] !== card.uuid) return
+ if (comIds[0] !== card.uuid || comIds.length > 1) return
- let _card = {}
- if (comIds.length === 1) {
- _card = {...card, style}
- } else if (comIds.length === 2 && comIds[1] === 'header') {
- _card = {...card, headerStyle: style}
- } else {
- return
- }
+ let _card = {...card, style}
this.setState({
card: _card
@@ -739,40 +826,58 @@
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 { menu } = this.props
const { card } = this.state
return (
<div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}>
- <div className="chart-header" style={card.headerStyle}>
- <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
- <div className="mk-popover-control">
- <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeTitleStyle} type="font-colors" />
- </div>
- } trigger="hover">
- <span className="chart-title">{card.plot.title || ''}</span>
- </Popover>
- <SearchComponent config={card} updatesearch={this.updateComponent}/>
- </div>
+ <NormalHeader config={card} updateComponent={this.updateComponent}/>
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
<div className="mk-popover-control">
- {menu && menu.MenuType !== 'billPrint' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null}
- {menu && menu.MenuType !== 'billPrint' ? <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> : null}
- {menu ? <ChartCompileForm config={card} sysRoles={menu.sysRoles} MenuType={menu.MenuType} dict={this.state.dict} plotchange={this.updateComponent}/> : null}
+ <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>
- {menu && menu.MenuType !== 'billPrint' ? <ActionComponent
+ <ActionComponent
type="chart"
- plus="false"
config={card}
updateaction={this.updateComponent}
- /> : null}
+ />
<div className="canvas" id={card.uuid}></div>
</div>
)
--
Gitblit v1.8.0