import {
|
G2PlotChartView,
|
G2PlotDrawOptions
|
} from '@/views/chart/components/js/panel/types/impl/g2plot'
|
import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar'
|
import {
|
configAxisLabelLengthLimit,
|
configPlotTooltipEvent,
|
configRoundAngle,
|
getPadding,
|
getTooltipContainer,
|
setGradientColor,
|
TOOLTIP_TPL
|
} from '@/views/chart/components/js/panel/common/common_antv'
|
import { cloneDeep, find } from 'lodash-es'
|
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
|
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import {
|
BAR_AXIS_TYPE,
|
BAR_RANGE_EDITOR_PROPERTY,
|
BAR_EDITOR_PROPERTY_INNER
|
} from '@/views/chart/components/js/panel/charts/bar/common'
|
import { Datum } from '@antv/g2plot/esm/types/common'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
|
import { Group } from '@antv/g-canvas'
|
|
const { t } = useI18n()
|
const DEFAULT_DATA = []
|
|
/**
|
* 区间条形图
|
*/
|
export class RangeBar extends G2PlotChartView<BarOptions, Bar> {
|
axisConfig = {
|
xAxis: {
|
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
|
type: 'd'
|
},
|
yAxis: {
|
name: `${t('chart.drag_block_value_start')} / ${t('chart.time_dimension_or_quota')}`,
|
limit: 1,
|
type: 'q'
|
},
|
yAxisExt: {
|
name: `${t('chart.drag_block_value_end')} / ${t('chart.time_dimension_or_quota')}`,
|
limit: 1,
|
type: 'q'
|
}
|
}
|
properties = BAR_RANGE_EDITOR_PROPERTY.filter(p => p !== 'threshold')
|
propertyInner = {
|
...BAR_EDITOR_PROPERTY_INNER,
|
'label-selector': ['hPosition', 'color', 'fontSize', 'labelFormatter', 'showGap'],
|
'tooltip-selector': [
|
'fontSize',
|
'color',
|
'backgroundColor',
|
'tooltipFormatter',
|
'showGap',
|
'show'
|
],
|
'x-axis-selector': [...BAR_EDITOR_PROPERTY_INNER['x-axis-selector'], 'axisLabelFormatter'],
|
'y-axis-selector': [
|
'name',
|
'color',
|
'fontSize',
|
'axisLine',
|
'splitLine',
|
'axisForm',
|
'axisLabel',
|
'position',
|
'showLengthLimit'
|
]
|
}
|
axis: AxisType[] = [...BAR_AXIS_TYPE, 'yAxisExt']
|
protected baseOptions: BarOptions = {
|
data: [],
|
xField: 'values',
|
yField: 'field',
|
colorField: 'category',
|
isGroup: true
|
}
|
|
async drawChart(drawOptions: G2PlotDrawOptions<Bar>): Promise<Bar> {
|
const { chart, container, action } = drawOptions
|
if (!chart.data?.data?.length) {
|
return
|
}
|
// data
|
const data: Array<any> = cloneDeep(chart.data.data)
|
|
data.forEach(d => {
|
d.tempId = (Math.random() * 10000000).toString()
|
})
|
|
const ifAggregate = !!chart.aggregate
|
|
const isDate = !!chart.data.isDate
|
|
const axis = chart.yAxis ?? chart.yAxisExt ?? []
|
let dateFormat: string
|
const dateSplit = axis[0]?.datePattern === 'date_split' ? '/' : '-'
|
switch (axis[0]?.dateStyle) {
|
case 'y':
|
dateFormat = 'YYYY'
|
break
|
case 'y_M':
|
dateFormat = 'YYYY' + dateSplit + 'MM'
|
break
|
case 'y_M_d':
|
dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD'
|
break
|
// case 'H_m_s':
|
// dateFormat = 'HH:mm:ss'
|
// break
|
case 'y_M_d_H':
|
dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH'
|
break
|
case 'y_M_d_H_m':
|
dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH:mm'
|
break
|
case 'y_M_d_H_m_s':
|
dateFormat = 'YYYY' + dateSplit + 'MM' + dateSplit + 'DD' + ' HH:mm:ss'
|
break
|
default:
|
dateFormat = 'YYYY-MM-dd HH:mm:ss'
|
}
|
|
const minTime = chart.data.minTime
|
const maxTime = chart.data.maxTime
|
|
const minNumber = chart.data.min
|
const maxNumber = chart.data.max
|
|
// options
|
const initOptions: BarOptions = {
|
...this.baseOptions,
|
appendPadding: getPadding(chart),
|
data,
|
seriesField: isDate ? (ifAggregate ? 'category' : undefined) : 'category',
|
isGroup: isDate ? !ifAggregate : false,
|
isStack: isDate ? !ifAggregate : false,
|
meta: isDate
|
? {
|
values: {
|
type: 'time',
|
min: minTime,
|
max: maxTime,
|
mask: dateFormat
|
},
|
tempId: {
|
key: true
|
}
|
}
|
: {
|
values: {
|
min: minNumber,
|
max: maxNumber,
|
mask: dateFormat
|
},
|
tempId: {
|
key: true
|
}
|
}
|
}
|
|
const options = this.setupOptions(chart, initOptions)
|
|
const { Bar: BarClass } = await import('@antv/g2plot/esm/plots/bar')
|
// 开始渲染
|
const newChart = new BarClass(container, options)
|
|
newChart.on('interval:click', action)
|
if (options.label) {
|
newChart.on('label:click', e => {
|
action({
|
x: e.x,
|
y: e.y,
|
data: {
|
data: e.target.attrs.data
|
}
|
})
|
})
|
}
|
configPlotTooltipEvent(chart, newChart)
|
configAxisLabelLengthLimit(chart, newChart)
|
return newChart
|
}
|
|
protected configXAxis(chart: Chart, options: BarOptions): BarOptions {
|
const tmpOptions = super.configXAxis(chart, options)
|
if (!tmpOptions.xAxis) {
|
return tmpOptions
|
}
|
const xAxis = parseJson(chart.customStyle).xAxis
|
const axisValue = xAxis.axisValue
|
const isDate = !!chart.data.isDate
|
if (tmpOptions.xAxis.label) {
|
tmpOptions.xAxis.label.formatter = value => {
|
if (isDate) {
|
return value
|
}
|
return valueFormatter(value, xAxis.axisLabelFormatter)
|
}
|
}
|
if (tmpOptions.xAxis.position === 'top') {
|
tmpOptions.xAxis.position = 'left'
|
}
|
if (tmpOptions.xAxis.position === 'bottom') {
|
tmpOptions.xAxis.position = 'right'
|
}
|
if (!axisValue?.auto) {
|
const axis = {
|
xAxis: {
|
...tmpOptions.xAxis,
|
min: axisValue.min,
|
max: axisValue.max,
|
minLimit: axisValue.min,
|
maxLimit: axisValue.max,
|
tickCount: axisValue.splitCount
|
}
|
}
|
return { ...tmpOptions, ...axis }
|
}
|
return tmpOptions
|
}
|
|
protected configTooltip(chart: Chart, options: BarOptions): BarOptions {
|
const isDate = !!chart.data.isDate
|
let tooltip
|
let customAttr: DeepPartial<ChartAttr>
|
if (chart.customAttr) {
|
customAttr = parseJson(chart.customAttr)
|
// tooltip
|
if (customAttr.tooltip) {
|
const t = JSON.parse(JSON.stringify(customAttr.tooltip))
|
if (t.show) {
|
tooltip = {
|
fields: ['values', 'field', 'gap'],
|
formatter: function (param: Datum) {
|
let res
|
if (isDate) {
|
res = param.values[0] + ' ~ ' + param.values[1]
|
if (t.showGap) {
|
res = res + ' (' + param.gap + ')'
|
}
|
} else {
|
res =
|
valueFormatter(param.values[0], t.tooltipFormatter) +
|
' ~ ' +
|
valueFormatter(param.values[1], t.tooltipFormatter)
|
if (t.showGap) {
|
res = res + ' (' + valueFormatter(param.gap, t.tooltipFormatter) + ')'
|
}
|
}
|
return { value: res, values: param.values, name: param.field }
|
},
|
container: getTooltipContainer(`tooltip-${chart.id}`),
|
itemTpl: TOOLTIP_TPL,
|
enterable: true
|
}
|
} else {
|
tooltip = false
|
}
|
}
|
}
|
return { ...options, tooltip }
|
}
|
|
protected configBasicStyle(chart: Chart, options: BarOptions): BarOptions {
|
const isDate = !!chart.data.isDate
|
const ifAggregate = !!chart.aggregate
|
const basicStyle = parseJson(chart.customAttr).basicStyle
|
|
if (isDate && !ifAggregate) {
|
const customColors = []
|
const groups = []
|
for (let i = 0; i < chart.data.data.length; i++) {
|
const name = chart.data.data[i].field
|
if (groups.indexOf(name) < 0) {
|
groups.push(name)
|
}
|
}
|
for (let i = 0; i < groups.length; i++) {
|
const s = groups[i]
|
customColors.push({
|
name: s,
|
color: basicStyle.colors[i % basicStyle.colors.length],
|
isCustom: false
|
})
|
}
|
const color = obj => {
|
const colorObj = find(customColors, o => {
|
return o.name === obj.field
|
})
|
if (colorObj === undefined) {
|
return undefined
|
}
|
const color = hexColorToRGBA(colorObj.color, basicStyle.alpha)
|
if (basicStyle.gradient) {
|
return setGradientColor(color, true)
|
} else {
|
return color
|
}
|
}
|
|
options = {
|
...options,
|
color
|
}
|
} else {
|
if (basicStyle.gradient) {
|
let color = basicStyle.colors
|
color = color.map(ele => {
|
const tmp = hexColorToRGBA(ele, basicStyle.alpha)
|
return setGradientColor(tmp, true)
|
})
|
options = {
|
...options,
|
color
|
}
|
}
|
}
|
|
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
|
}
|
|
setupDefaultOptions(chart: ChartObj): ChartObj {
|
const { customAttr, senior } = chart
|
const { label } = customAttr
|
if (!['left', 'middle', 'right'].includes(label.position)) {
|
label.position = 'middle'
|
}
|
senior.functionCfg.emptyDataStrategy = 'ignoreData'
|
return chart
|
}
|
|
protected configLabel(chart: Chart, options: BarOptions): BarOptions {
|
const isDate = !!chart.data.isDate
|
const ifAggregate = !!chart.aggregate
|
|
const tmpOptions = super.configLabel(chart, options)
|
if (!tmpOptions.label) {
|
return {
|
...tmpOptions,
|
label: false
|
}
|
}
|
const labelAttr = parseJson(chart.customAttr).label
|
|
if (isDate && !ifAggregate) {
|
if (!tmpOptions.label.layout) {
|
tmpOptions.label.layout = []
|
}
|
tmpOptions.label.layout.push({ type: 'interval-hide-overlap' })
|
tmpOptions.label.layout.push({ type: 'limit-in-plot', cfg: { action: 'hide' } })
|
}
|
|
const label = {
|
fields: [],
|
...tmpOptions.label,
|
formatter: (param: Datum) => {
|
let res
|
if (isDate) {
|
if (labelAttr.showGap) {
|
res = param.gap
|
} else {
|
res = param.values[0] + ' ~ ' + param.values[1]
|
}
|
} else {
|
if (labelAttr.showGap) {
|
res = valueFormatter(param.gap, labelAttr.labelFormatter)
|
} else {
|
res =
|
valueFormatter(param.values[0], labelAttr.labelFormatter) +
|
' ~ ' +
|
valueFormatter(param.values[1], labelAttr.labelFormatter)
|
}
|
}
|
const group = new Group({})
|
group.addShape({
|
type: 'text',
|
attrs: {
|
x: 0,
|
y: 0,
|
data: param,
|
text: res,
|
textAlign: 'start',
|
textBaseline: 'top',
|
fontSize: labelAttr.fontSize,
|
fontFamily: chart.fontFamily,
|
fill: labelAttr.color
|
}
|
})
|
return group
|
}
|
}
|
return {
|
...tmpOptions,
|
label
|
}
|
}
|
|
protected configYAxis(chart: Chart, options: BarOptions): BarOptions {
|
const tmpOptions = super.configYAxis(chart, options)
|
if (!tmpOptions.yAxis) {
|
return tmpOptions
|
}
|
if (tmpOptions.yAxis.position === 'left') {
|
tmpOptions.yAxis.position = 'bottom'
|
}
|
if (tmpOptions.yAxis.position === 'right') {
|
tmpOptions.yAxis.position = 'top'
|
}
|
return tmpOptions
|
}
|
|
protected setupOptions(chart: Chart, options: BarOptions): BarOptions {
|
return flow(
|
this.configTheme,
|
this.configBasicStyle,
|
this.configLabel,
|
this.configTooltip,
|
this.configLegend,
|
this.configXAxis,
|
this.configYAxis,
|
this.configSlider,
|
this.configEmptyDataStrategy
|
)(chart, options)
|
}
|
|
constructor(name = 'bar-range') {
|
super(name, DEFAULT_DATA)
|
}
|
}
|
