import {
|
G2PlotChartView,
|
G2PlotDrawOptions
|
} from '@/views/chart/components/js/panel/types/impl/g2plot'
|
import type {
|
CirclePacking as G2CirclePacking,
|
CirclePackingOptions
|
} from '@antv/g2plot/esm/plots/circle-packing'
|
import { flow, parseJson } from '@/views/chart/components/js/util'
|
import { getPadding } from '@/views/chart/components/js/panel/common/common_antv'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import type { Datum } from '@antv/g2plot/esm/types/common'
|
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import { cloneDeep } from 'lodash-es'
|
|
const { t } = useI18n()
|
const DEFAULT_DATA = []
|
/**
|
* 圆形填充图
|
*/
|
export class CirclePacking extends G2PlotChartView<CirclePackingOptions, G2CirclePacking> {
|
properties: EditorProperty[] = [
|
'basic-style-selector',
|
'background-overall-component',
|
'border-style',
|
'label-selector',
|
'legend-selector',
|
'title-selector',
|
'tooltip-selector',
|
'jump-set',
|
'linkage'
|
]
|
propertyInner: EditorPropertyInner = {
|
'background-overall-component': ['all'],
|
'border-style': ['all'],
|
'basic-style-selector': ['colors', 'alpha', 'circleBorderStyle'],
|
'title-selector': [
|
'title',
|
'fontSize',
|
'color',
|
'hPosition',
|
'isItalic',
|
'isBolder',
|
'remarkShow',
|
'fontFamily',
|
'letterSpace',
|
'fontShadow'
|
],
|
'function-cfg': ['emptyDataStrategy'],
|
'label-selector': ['color', 'fontSize', 'showDimension', 'showQuota', 'showProportion'],
|
'legend-selector': ['icon', 'orient', 'fontSize', 'color', 'hPosition', 'vPosition'],
|
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'tooltipFormatter', 'show']
|
}
|
axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'drill']
|
axisConfig: AxisConfig = {
|
xAxis: {
|
name: `${t('chart.circle_packing_name')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1
|
},
|
yAxis: {
|
name: `${t('chart.circle_packing_value')} / ${t('chart.quota')}`,
|
type: 'q',
|
limit: 1
|
}
|
}
|
async drawChart(drawOptions: G2PlotDrawOptions<G2CirclePacking>): Promise<G2CirclePacking> {
|
const { chart, container, action } = drawOptions
|
if (chart?.data?.data?.length) {
|
// data
|
const data = chart.data.data
|
const { yAxis } = chart
|
const ySort = yAxis[0]?.sort ?? 'none'
|
const sort = {
|
sort: (a, b) =>
|
ySort === 'asc' ? a.value - b.value : ySort === 'desc' ? b.value - a.value : 0
|
}
|
// 将数据转为圆形填充图数据格式
|
const getCirclePackingData = () => {
|
const result = [{ name: t('commons.all'), children: [] }]
|
const addNode = (nodes, item) => {
|
const node = { ...item, name: item.name, children: [] }
|
nodes.push(node)
|
}
|
data.forEach(item => addNode(result[0].children, item))
|
return result[0]
|
}
|
// options
|
const initOptions: CirclePackingOptions = {
|
data: getCirclePackingData(),
|
appendPadding: getPadding(chart),
|
hierarchyConfig: {
|
...(ySort === 'none' ? {} : sort)
|
},
|
interactions: [
|
{
|
type: 'legend-active',
|
cfg: {
|
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
|
end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
|
}
|
},
|
{
|
type: 'legend-filter',
|
cfg: {
|
start: [
|
{
|
trigger: 'legend-item:click',
|
action: [
|
'list-unchecked:toggle',
|
'data-filter:filter',
|
'element-active:reset',
|
'element-highlight:reset'
|
]
|
}
|
]
|
}
|
}
|
]
|
}
|
const options = this.setupOptions(chart, initOptions)
|
const { CirclePacking: G2CirclePacking } = await import(
|
'@antv/g2plot/esm/plots/circle-packing'
|
)
|
const newChart = new G2CirclePacking(container, options)
|
newChart.on('element:click', param => {
|
const pointData = param?.data?.data
|
if (pointData?.name === t('commons.all')) {
|
return
|
}
|
const actionParams = {
|
x: param.x,
|
y: param.y,
|
data: {
|
data: {
|
...pointData
|
}
|
}
|
}
|
action(actionParams)
|
})
|
return newChart
|
}
|
}
|
|
protected configBasicStyle(chart: Chart, options: CirclePackingOptions): CirclePackingOptions {
|
// size
|
const customAttr: DeepPartial<ChartAttr> = parseJson(chart.customAttr)
|
const s = JSON.parse(JSON.stringify(customAttr.basicStyle))
|
// 圆形边框样式
|
const pointStyle = {
|
stroke: s.circleBorderColor,
|
lineWidth: s.circleBorderWidth ?? 0
|
}
|
const padding = s.circlePadding
|
return {
|
...options,
|
hierarchyConfig: {
|
...options.hierarchyConfig,
|
padding: padding / 100 ?? 0
|
},
|
pointStyle
|
}
|
}
|
|
protected configLabel(chart: Chart, options: CirclePackingOptions): CirclePackingOptions {
|
const tmpOptions = super.configLabel(chart, options)
|
if (!tmpOptions.label) {
|
return {
|
...tmpOptions,
|
label: false
|
}
|
}
|
const { label: labelAttr } = parseJson(chart.customAttr)
|
const label = {
|
...tmpOptions.label,
|
textAlign: 'center',
|
offsetY: 5,
|
layout: labelAttr.fullDisplay ? [] : [{ type: 'limit-in-shape' }],
|
formatter: (d: Datum) => {
|
let showLabel = labelAttr.showDimension ? d.name : ''
|
if (labelAttr.showQuota) {
|
const quota = valueFormatter(d.value, labelAttr.quotaLabelFormatter)
|
showLabel += showLabel ? `\n${quota}` : quota
|
}
|
if (labelAttr.showProportion && d.depth > 0) {
|
const proportion = ((d.value || 1) / (d.parent?.value || 1)) * 100
|
const percent = `${proportion.toFixed(labelAttr.reserveDecimalCount ?? 2)}%`
|
showLabel += showLabel ? `\n${percent}` : percent
|
}
|
return d.children.length === 0 ? showLabel : ''
|
}
|
}
|
return {
|
...tmpOptions,
|
label
|
}
|
}
|
|
protected configTooltip(chart: Chart, options: CirclePackingOptions): CirclePackingOptions {
|
const temOptions = super.configTooltip(chart, options)
|
if (!temOptions.tooltip) {
|
return temOptions
|
}
|
const tooltipAttr = parseJson(chart.customAttr).tooltip
|
return {
|
...temOptions,
|
tooltip: {
|
...temOptions,
|
fields: ['name', 'value'],
|
formatter: d => {
|
let value = d.value
|
if (tooltipAttr.tooltipFormatter) {
|
value = valueFormatter(value, tooltipAttr.tooltipFormatter)
|
}
|
return { name: d.name, value }
|
}
|
}
|
}
|
}
|
configEmptyDataStrategy(chart: Chart, options: CirclePackingOptions): CirclePackingOptions {
|
const { functionCfg } = parseJson(chart.senior)
|
const emptyDataStrategy = functionCfg.emptyDataStrategy
|
const setChildren = children => {
|
if (emptyDataStrategy === 'ignoreData') {
|
for (let i = children.length - 1; i >= 0; i--) {
|
let isNotNullChildren = []
|
if (children[i].children?.length) {
|
isNotNullChildren = children[i].children.filter(item => item.value !== null)
|
}
|
if (children[i].children?.length && isNotNullChildren.length) {
|
setChildren(children[i].children)
|
}
|
if (children[i]?.hasOwnProperty('value') && children[i].value === null) {
|
children.splice(i, 1)
|
}
|
if (!children[i]?.hasOwnProperty('value') && isNotNullChildren.length === 0) {
|
children.splice(i, 1)
|
}
|
}
|
} else {
|
for (let i = children.length - 1; i >= 0; i--) {
|
let isNotNullChildren = []
|
if (children[i].children?.length) {
|
isNotNullChildren = children[i].children.filter(item => item.value !== null)
|
if (!isNotNullChildren.length) {
|
children[i].children = []
|
continue
|
}
|
}
|
setChildren(children[i].children)
|
}
|
}
|
}
|
const data = cloneDeep(options.data.children)
|
setChildren(data)
|
options.data.children = data
|
return options
|
}
|
setupDefaultOptions(chart: ChartObj): ChartObj {
|
const { customAttr, customStyle, senior } = chart
|
const { label, basicStyle } = customAttr
|
const { legend } = customStyle
|
senior.functionCfg.emptyDataStrategy = 'ignoreData'
|
customAttr.label = {
|
...label,
|
show: true
|
}
|
legend.show = false
|
basicStyle.circleBorderWidth = 0
|
basicStyle.circleBorderColor = '#fff'
|
basicStyle.circlePadding = 0
|
return chart
|
}
|
protected setupOptions(chart: Chart, options: CirclePackingOptions): CirclePackingOptions {
|
return flow(
|
this.configTheme,
|
this.configEmptyDataStrategy,
|
this.configBasicStyle,
|
this.configLabel,
|
this.configTooltip,
|
this.configLegend
|
)(chart, options)
|
}
|
|
constructor() {
|
super('circle-packing', DEFAULT_DATA)
|
}
|
}
|
