import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
|
import { flow, hexColorToRGBA, parseJson } from '../../../util'
|
import {
|
configAxisLabelLengthLimit,
|
configPlotTooltipEvent,
|
configRoundAngle,
|
getTooltipContainer,
|
setGradientColor,
|
TOOLTIP_TPL
|
} from '../../common/common_antv'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import type { Bar as G2Progress, BarOptions } from '@antv/g2plot/esm/plots/bar'
|
import {
|
BAR_AXIS_TYPE,
|
BAR_EDITOR_PROPERTY_INNER
|
} from '@/views/chart/components/js/panel/charts/bar/common'
|
import { cloneDeep, defaultTo } from 'lodash-es'
|
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import { Options } from '@antv/g2plot/esm'
|
import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
|
|
const { t } = useI18n()
|
|
export class ProgressBar extends G2PlotChartView<BarOptions, G2Progress> {
|
axisConfig = {
|
xAxis: {
|
name: `${t('chart.form_type')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1
|
},
|
yAxis: {
|
name: `${t('chart.progress_target')} / ${t('chart.quota')}`,
|
type: 'q',
|
limit: 1
|
},
|
yAxisExt: {
|
name: `${t('chart.progress_current')} / ${t('chart.quota')}`,
|
type: 'q',
|
limit: 1
|
}
|
}
|
properties: EditorProperty[] = [
|
'background-overall-component',
|
'border-style',
|
'basic-style-selector',
|
'label-selector',
|
'tooltip-selector',
|
'y-axis-selector',
|
'title-selector',
|
'function-cfg',
|
'jump-set',
|
'linkage',
|
'threshold'
|
]
|
propertyInner = {
|
...BAR_EDITOR_PROPERTY_INNER,
|
'legend-selector': null,
|
'background-overall-component': ['all'],
|
'border-style': ['all'],
|
'basic-style-selector': ['colors', 'alpha', 'gradient', 'radiusColumnBar', 'columnWidthRatio'],
|
'label-selector': ['hPosition', 'color', 'fontSize', 'showQuota', 'showProportion'],
|
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'],
|
'y-axis-selector': [
|
'name',
|
'color',
|
'fontSize',
|
'axisForm',
|
'axisLabel',
|
// 'position',
|
'showLengthLimit'
|
],
|
'function-cfg': ['emptyDataStrategy'],
|
threshold: ['lineThreshold']
|
}
|
axis: AxisType[] = [...BAR_AXIS_TYPE, 'yAxisExt']
|
protected baseOptions: BarOptions = {
|
data: [],
|
xField: 'progress',
|
yField: 'title',
|
seriesField: 'type',
|
isGroup: false,
|
isPercent: true,
|
isStack: true,
|
xAxis: false,
|
appendPadding: [0, 0, 10, 0]
|
}
|
|
async drawChart(drawOptions: G2PlotDrawOptions<G2Progress>): Promise<G2Progress> {
|
const { chart, container, action } = drawOptions
|
if (!chart.data?.data?.length) {
|
return
|
}
|
const getCompletionRate = (target: number, current: number) => {
|
if (target === 0) {
|
return 100
|
}
|
// 目标为正 当前为负
|
if (target > 0 && current < 0) {
|
return 0
|
}
|
// 目标为负 当前为正 正向
|
if ((target < 0 && current > 0) || (target < 0 && current === 0)) {
|
return (2 - current / target) * 100
|
}
|
// 目标与当前都为正
|
if (target > 0 && current > 0) {
|
return (current / target) * 100
|
}
|
// 目标与当前都为负 负向小于0为0
|
if (target < 0 && current < 0) {
|
const completionRate = (2 - current / target) * 100
|
return Number(Math.max(completionRate, 0).toFixed(2))
|
}
|
return 0
|
}
|
// data
|
const sourceData: Array<any> = cloneDeep(chart.data.data)
|
const data1 = defaultTo(sourceData[0]?.data, [])
|
const data2 = defaultTo(sourceData[1]?.data, [])
|
const currentData = data2.map(item => {
|
const progress = getCompletionRate(data1.find(i => i.field === item.field)?.value, item.value)
|
return {
|
...item,
|
type: 'current',
|
title: item.field,
|
id: item.quotaList[0].id,
|
originalValue: item.value,
|
originalProgress: progress,
|
progress: progress >= 100 ? 100 : progress
|
}
|
})
|
const targetData = data1.map(item => {
|
const progress = 100 - currentData.find(i => i.title === item.field)?.progress
|
return {
|
...item,
|
type: 'target',
|
title: item.field,
|
id: item.quotaList[0].id,
|
originalValue: item.value,
|
progress: progress
|
}
|
})
|
// options
|
const initOptions: BarOptions = {
|
...this.baseOptions,
|
data: currentData.concat(targetData).flat()
|
}
|
const options = this.setupOptions(chart, initOptions)
|
|
const { Bar: G2Progress } = await import('@antv/g2plot/esm/plots/bar')
|
// 开始渲染
|
const newChart = new G2Progress(container, options)
|
|
newChart.on('interval:click', action)
|
configPlotTooltipEvent(chart, newChart)
|
configAxisLabelLengthLimit(chart, newChart)
|
return newChart
|
}
|
protected configBasicStyle(chart: Chart, options: BarOptions): BarOptions {
|
const basicStyle = parseJson(chart.customAttr).basicStyle
|
let color1 = basicStyle.colors?.map((ele, index) => {
|
if (index === 1) {
|
return hexColorToRGBA(ele, basicStyle.alpha > 10 ? 10 : basicStyle.alpha)
|
} else {
|
return hexColorToRGBA(ele, basicStyle.alpha)
|
}
|
})
|
if (basicStyle.gradient) {
|
// eslint-disable-next-line
|
color1 = color1.map((ele, _index) => {
|
return setGradientColor(ele, true, 0)
|
})
|
}
|
options = {
|
...options,
|
color: datum => {
|
if (datum.type === 'target') {
|
return 'rgba(0, 0, 0, 0)'
|
}
|
return color1[0]
|
},
|
barBackground: {
|
style: {
|
fill: color1[1]
|
}
|
}
|
}
|
options = {
|
...options,
|
...configRoundAngle(chart, 'barStyle')
|
}
|
|
let barWidthRatio
|
const _v = basicStyle.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
|
if (_v >= 1 && _v <= 100) {
|
barWidthRatio = _v / 100.0
|
} else if (_v < 1) {
|
barWidthRatio = 1 / 100.0
|
} else if (_v > 100) {
|
barWidthRatio = 1
|
}
|
if (barWidthRatio) {
|
options.barWidthRatio = barWidthRatio
|
}
|
|
return options
|
}
|
protected configTooltip(chart: Chart, options: BarOptions): BarOptions {
|
const tooltipAttr = parseJson(chart.customAttr).tooltip
|
if (!tooltipAttr.show) {
|
return {
|
...options,
|
tooltip: {
|
showContent: false
|
}
|
}
|
}
|
const yAxis = cloneDeep(chart.yAxis)[0]
|
const yAxisExt = cloneDeep(chart.yAxisExt)[0]
|
return {
|
...options,
|
tooltip: {
|
showContent: true,
|
domStyles: {
|
'g2-tooltip-marker': null
|
},
|
customItems(originalItems) {
|
const result = []
|
originalItems.forEach(item => {
|
if (item.data) {
|
const value = valueFormatter(item.data.value, tooltipAttr.tooltipFormatter)
|
if (item.data.id === yAxis.id) {
|
result.push({
|
...item,
|
marker: false,
|
name: yAxis.chartShowName ? yAxis.chartShowName : yAxis.name,
|
value: value
|
})
|
}
|
if (item.data.id === yAxisExt.id) {
|
result.push({
|
...item,
|
marker: false,
|
name: yAxisExt.chartShowName ? yAxisExt.chartShowName : yAxisExt.name,
|
value: value
|
})
|
}
|
}
|
})
|
return result.length == 0 ? originalItems : result
|
},
|
container: getTooltipContainer(`tooltip-${chart.id}`),
|
itemTpl: TOOLTIP_TPL,
|
enterable: true
|
}
|
}
|
}
|
|
protected configLabel(chart: Chart, options: BarOptions): BarOptions {
|
const baseOptions = super.configLabel(chart, options)
|
if (!baseOptions.label) return baseOptions
|
if (!baseOptions.label.layout?.[0]) {
|
baseOptions.label.layout = [{ type: 'limit-in-canvas' }]
|
}
|
const { label: labelAttr } = parseJson(chart.customAttr)
|
baseOptions.label.style.fill = labelAttr.color
|
const label = {
|
...baseOptions.label,
|
content: item => {
|
if (item.type === 'target') return ''
|
let text = ''
|
if (labelAttr.showQuota) text += valueFormatter(item.value, labelAttr.quotaLabelFormatter)
|
if (labelAttr.showProportion) {
|
let proportion = item.originalProgress.toFixed(labelAttr.reserveDecimalCount) + '%'
|
if (labelAttr.showQuota) {
|
proportion = ` (${proportion}) `
|
}
|
text += proportion
|
}
|
return text
|
}
|
}
|
if (label.position === 'top') label.position = 'right'
|
return { ...baseOptions, label }
|
}
|
protected configYAxis(chart: Chart, options: BarOptions): BarOptions {
|
const baseOption = super.configYAxis(chart, options)
|
if (!baseOption.yAxis) {
|
return baseOption
|
}
|
baseOption.yAxis.position = 'bottom'
|
const yAxis = parseJson(chart.customStyle).yAxis
|
if (yAxis.axisLabel.show) {
|
const rotate = yAxis.axisLabel.rotate
|
let textAlign = 'end'
|
let textBaseline = 'middle'
|
if (Math.abs(rotate) > 75) {
|
textAlign = 'center'
|
}
|
if (rotate > 75) {
|
textBaseline = 'top'
|
}
|
if (rotate < -75) {
|
textBaseline = 'bottom'
|
}
|
baseOption.yAxis.label.style.textBaseline = textBaseline
|
baseOption.yAxis.label.style.textAlign = textAlign
|
}
|
|
/*if (baseOption.yAxis.position === 'left') {
|
baseOption.yAxis.position = 'bottom'
|
}
|
if (baseOption.yAxis.position === 'right') {
|
baseOption.yAxis.position = 'top'
|
}*/
|
return baseOption
|
}
|
setupDefaultOptions(chart: ChartObj): ChartObj {
|
chart.customStyle.yAxis = {
|
...chart.customStyle.yAxis,
|
position: 'left',
|
axisLine: {
|
show: false,
|
lineStyle: chart.customStyle.yAxis.axisLine.lineStyle
|
},
|
splitLine: {
|
show: false,
|
lineStyle: chart.customStyle.yAxis.axisLine.lineStyle
|
}
|
}
|
chart.customStyle.legend.show = false
|
chart.customAttr.label.show = true
|
chart.customAttr.label.position = 'right'
|
chart.customAttr.label.showQuota = false
|
chart.customAttr.label.showProportion = true
|
return chart
|
}
|
|
protected configLegend(chart: Chart, options: BarOptions): BarOptions {
|
const o = super.configLegend(chart, options)
|
return {
|
...o,
|
legend: false
|
}
|
}
|
|
protected configEmptyDataStrategy(chart: Chart, options: BarOptions): BarOptions {
|
const { data } = options as unknown as Options
|
if (!data?.length) {
|
return options
|
}
|
const strategy = parseJson(chart.senior).functionCfg.emptyDataStrategy
|
if (strategy === 'ignoreData') {
|
const emptyFields = data.filter(obj => obj['value'] === null).map(obj => obj['field'])
|
return {
|
...options,
|
data: data.filter(obj => {
|
if (emptyFields.includes(obj['field'])) {
|
return false
|
}
|
return true
|
})
|
}
|
}
|
if (strategy === 'breakLine') {
|
data.forEach(obj => {
|
if (obj['value'] === null) {
|
obj['value'] = null
|
}
|
})
|
}
|
if (strategy === 'setZero') {
|
data.forEach(obj => {
|
if (obj['value'] === null) {
|
obj['value'] = 0
|
}
|
})
|
}
|
return options
|
}
|
|
protected setupOptions(chart: Chart, options: BarOptions): BarOptions {
|
return flow(
|
this.addConditionsStyleColorToData,
|
this.configTheme,
|
this.configBasicStyle,
|
this.configLabel,
|
this.configTooltip,
|
this.configLegend,
|
this.configYAxis,
|
this.configEmptyDataStrategy,
|
this.configBarConditions
|
)(chart, options)
|
}
|
|
constructor() {
|
super('progress-bar', [])
|
}
|
}
|
