import {
|
G2PlotChartView,
|
G2PlotDrawOptions
|
} from '@/views/chart/components/js/panel/types/impl/g2plot'
|
import type { WordCloud as G2WordCloud, WordCloudOptions } from '@antv/g2plot/esm/plots/word-cloud'
|
import {
|
filterChartDataByRange,
|
flow,
|
getMaxAndMinValueByData,
|
parseJson
|
} from '@/views/chart/components/js/util'
|
import { getPadding } from '@/views/chart/components/js/panel/common/common_antv'
|
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { isEmpty } from 'lodash-es'
|
import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
|
|
const { t } = useI18n()
|
const DEFAULT_DATA = []
|
/**
|
* 词云图
|
*/
|
export class WordCloud extends G2PlotChartView<WordCloudOptions, G2WordCloud> {
|
properties: EditorProperty[] = [
|
'basic-style-selector',
|
'background-overall-component',
|
'border-style',
|
'title-selector',
|
'tooltip-selector',
|
'misc-selector',
|
'jump-set',
|
'linkage'
|
]
|
propertyInner: EditorPropertyInner = {
|
'background-overall-component': ['all'],
|
'border-style': ['all'],
|
'basic-style-selector': ['colors', 'alpha'],
|
'title-selector': [
|
'title',
|
'fontSize',
|
'color',
|
'hPosition',
|
'isItalic',
|
'isBolder',
|
'remarkShow',
|
'fontFamily',
|
'letterSpace',
|
'fontShadow'
|
],
|
'misc-selector': ['wordSizeRange', 'wordSpacing', 'wordCloudAxisValueRange'],
|
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show']
|
}
|
axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
|
axisConfig: AxisConfig = {
|
xAxis: {
|
name: `${t('chart.drag_block_word_cloud_label')} / ${t('chart.dimension_or_quota')}`,
|
type: 'd',
|
limit: 1
|
},
|
yAxis: {
|
name: `${t('chart.drag_block_word_cloud_size')} / ${t('chart.quota')}`,
|
type: 'q',
|
limit: 1
|
}
|
}
|
setDataRange = (action, maxValue, minValue) => {
|
action({
|
from: 'word-cloud',
|
data: {
|
max: maxValue,
|
min: minValue
|
}
|
})
|
}
|
async drawChart(drawOptions: G2PlotDrawOptions<G2WordCloud>): Promise<G2WordCloud> {
|
const { chart, container, action } = drawOptions
|
if (chart?.data) {
|
// data
|
let data = chart.data.data
|
const { misc } = parseJson(chart.customAttr)
|
let minValue = 0
|
let maxValue = 0
|
if (
|
!misc.wordCloudAxisValueRange?.auto &&
|
misc.wordCloudAxisValueRange?.fieldId === chart.yAxis[0].id
|
) {
|
minValue = misc.wordCloudAxisValueRange.min
|
maxValue = misc.wordCloudAxisValueRange.max
|
}
|
getMaxAndMinValueByData(data ?? [], 'value', maxValue, minValue, (max, min) => {
|
maxValue = max
|
minValue = min
|
})
|
data = filterChartDataByRange(data ?? [], maxValue, minValue)
|
// options
|
const initOptions: WordCloudOptions = {
|
data: data,
|
wordField: 'field',
|
weightField: 'value',
|
colorField: 'field',
|
wordStyle: {
|
fontFamily: chart.fontFamily ? chart.fontFamily : 'Verdana',
|
fontSize: (misc.wordSizeRange ?? DEFAULT_MISC.wordSizeRange) as [number, number],
|
rotation: [0, 0],
|
padding: misc.wordSpacing ?? DEFAULT_MISC.wordSpacing
|
},
|
random: () => 0.5,
|
appendPadding: getPadding(chart),
|
legend: false,
|
interactions: []
|
}
|
const options = this.setupOptions(chart, initOptions)
|
const { WordCloud: G2WordCloud } = await import('@antv/g2plot/esm/plots/word-cloud')
|
const newChart = new G2WordCloud(container, options)
|
newChart.on('click', () => {
|
this.setDataRange(action, maxValue, minValue)
|
})
|
newChart.on('afterrender', () => {
|
this.setDataRange(action, maxValue, minValue)
|
})
|
newChart.on('point:click', param => {
|
action({ x: param.x, y: param.y, data: { data: param.data.data.datum } })
|
})
|
return newChart
|
}
|
}
|
|
protected configTooltip(chart: Chart, options: WordCloudOptions): WordCloudOptions {
|
const customAttr: DeepPartial<ChartAttr> = parseJson(chart.customAttr)
|
const tooltipAttr = customAttr.tooltip
|
const yAxis = chart.yAxis
|
if (!tooltipAttr.show) {
|
return {
|
...options,
|
tooltip: false
|
}
|
}
|
const formatterMap = tooltipAttr.seriesTooltipFormatter
|
?.filter(i => i.show)
|
.reduce((pre, next) => {
|
pre[next.id] = next
|
return pre
|
}, {}) as Record<string, SeriesFormatter>
|
const tooltip: WordCloudOptions['tooltip'] = {
|
showTitle: true,
|
title: () => undefined,
|
customItems(originalItems) {
|
let tooltipItems = originalItems
|
if (tooltipAttr.seriesTooltipFormatter?.length) {
|
tooltipItems = originalItems.filter(item => formatterMap[item.data.datum.quotaList[0].id])
|
}
|
const result = []
|
const head = originalItems[0]
|
tooltipItems.forEach(item => {
|
const formatter = formatterMap[item.data.datum.quotaList[0].id] ?? yAxis[0]
|
const value = valueFormatter(item.value, formatter.formatterCfg)
|
const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
result.push({ ...item, name, value })
|
})
|
head.data.datum.dynamicTooltipValue?.forEach(item => {
|
const formatter = formatterMap[item.fieldId]
|
if (formatter) {
|
const value = valueFormatter(parseFloat(item.value), formatter.formatterCfg)
|
const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
result.push({ color: 'grey', name, value })
|
}
|
})
|
return result
|
}
|
}
|
return {
|
...options,
|
tooltip
|
}
|
}
|
|
protected setupOptions(chart: Chart, options: WordCloudOptions): WordCloudOptions {
|
return flow(this.configTheme, this.configTooltip)(chart, options)
|
}
|
|
constructor() {
|
super('word-cloud', DEFAULT_DATA)
|
}
|
}
|
