From 3814d4224f614a55dc5b27a65a2b0e88b4a395a5 Mon Sep 17 00:00:00 2001 From: wisonic Date: Wed, 6 Nov 2024 14:22:33 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=8F=90=E7=A4=BA=E8=A2=AB=E9=81=AE=E6=8C=A1?= =?UTF-8?q?=20#12616?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/js/panel/charts/bar/bar.ts | 21 ++- .../js/panel/charts/bar/bidirectional-bar.ts | 12 +- .../js/panel/charts/bar/horizontal-bar.ts | 20 ++- .../js/panel/charts/bar/progress-bar.ts | 14 +- .../js/panel/charts/bar/range-bar.ts | 15 ++- .../js/panel/charts/bar/waterfall.ts | 15 ++- .../components/js/panel/charts/line/area.ts | 14 +- .../components/js/panel/charts/line/line.ts | 13 +- .../js/panel/charts/others/chart-mix.ts | 12 +- .../js/panel/charts/others/funnel.ts | 3 +- .../js/panel/charts/others/quadrant.ts | 7 +- .../js/panel/charts/others/radar.ts | 3 +- .../js/panel/charts/others/scatter.ts | 13 +- .../components/js/panel/charts/pie/pie.ts | 11 +- .../components/js/panel/charts/pie/rose.ts | 12 +- .../components/js/panel/common/common_antv.ts | 125 +++++++++++++++++- 16 files changed, 270 insertions(+), 40 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts index 8cf46f0d9d..f83807ca3d 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bar.ts @@ -19,9 +19,12 @@ import { BAR_EDITOR_PROPERTY_INNER } from '@/views/chart/components/js/panel/charts/bar/common' import { + configPlotTooltipEvent, getLabel, getPadding, - setGradientColor + getTooltipContainer, + setGradientColor, + TOOLTIP_TPL } from '@/views/chart/components/js/panel/common/common_antv' import { useI18n } from '@/hooks/web/useI18n' import { DEFAULT_LABEL } from '@/views/chart/components/editor/util/chart' @@ -82,6 +85,7 @@ export class Bar extends G2PlotChartView { newChart = new ColumnClass(container, options) newChart.on('interval:click', action) extremumEvt(newChart, chart, options, container) + configPlotTooltipEvent(chart, newChart) return newChart } @@ -308,7 +312,10 @@ export class StackBar extends Bar { const res = valueFormatter(param.value, tooltipAttr.tooltipFormatter) obj.value = res ?? '' return obj - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, @@ -522,7 +529,10 @@ export class GroupStackBar extends StackBar { const obj = { name: `${param.category} - ${param.group}`, value: param.value } obj.value = valueFormatter(param.value, tooltipAttr.tooltipFormatter) return obj - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, @@ -605,7 +615,10 @@ export class PercentageStackBar extends GroupStackBar { const obj = { name: param.category, value: param.value } obj.value = (Math.round(param.value * 10000) / 100).toFixed(l.reserveDecimalCount) + '%' return obj - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts index 415965baee..23d0f09c6b 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/bidirectional-bar.ts @@ -4,10 +4,13 @@ import { } from '@/views/chart/components/js/panel/types/impl/g2plot' import { cloneDeep, defaultTo, isEmpty, map } from 'lodash-es' import { + configPlotTooltipEvent, getPadding, + getTooltipContainer, getYAxis, getYAxisExt, - setGradientColor + setGradientColor, + TOOLTIP_TPL } from '@/views/chart/components/js/panel/common/common_antv' import type { BidirectionalBar as G2BidirectionalBar, @@ -171,7 +174,7 @@ export class BidirectionalHorizontalBar extends G2PlotChartView< ...sourceData[0] } }) - + configPlotTooltipEvent(chart, newChart) return newChart } @@ -299,7 +302,10 @@ export class BidirectionalHorizontalBar extends G2PlotChartView< }) } return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts index 3c6c2516d2..815d8f42c4 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts @@ -3,7 +3,13 @@ import { G2PlotDrawOptions } from '@/views/chart/components/js/panel/types/impl/g2plot' import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar' -import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv' +import { + configPlotTooltipEvent, + getPadding, + getTooltipContainer, + setGradientColor, + TOOLTIP_TPL +} from '@/views/chart/components/js/panel/common/common_antv' import { cloneDeep } from 'lodash-es' import { flow, @@ -93,7 +99,7 @@ export class HorizontalBar extends G2PlotChartView { const newChart = new Bar(container, options) newChart.on('interval:click', action) - + configPlotTooltipEvent(chart, newChart) return newChart } @@ -313,7 +319,10 @@ export class HorizontalStackBar extends HorizontalBar { const res = valueFormatter(param.value, tooltipAttr.tooltipFormatter) obj.value = res ?? '' return obj - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, @@ -423,7 +432,10 @@ export class HorizontalPercentageStackBar extends HorizontalStackBar { const obj = { name: param.category, value: param.value } obj.value = (Math.round(param.value * 10000) / 100).toFixed(l.reserveDecimalCount) + '%' return obj - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts index 41b6079b35..a91503eb42 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts @@ -1,6 +1,11 @@ import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot' import { flow, hexColorToRGBA, parseJson } from '../../../util' -import { setGradientColor } from '../../common/common_antv' +import { + configPlotTooltipEvent, + 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 { @@ -134,7 +139,7 @@ export class ProgressBar extends G2PlotChartView { const newChart = new G2Progress(container, options) newChart.on('interval:click', action) - + configPlotTooltipEvent(chart, newChart) return newChart } protected configBasicStyle(chart: Chart, options: BarOptions): BarOptions { @@ -224,7 +229,10 @@ export class ProgressBar extends G2PlotChartView { } }) return result.length == 0 ? originalItems : result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } } } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts index 709b8b674d..a3b982c228 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts @@ -3,7 +3,13 @@ import { G2PlotDrawOptions } from '@/views/chart/components/js/panel/types/impl/g2plot' import type { Bar, BarOptions } from '@antv/g2plot/esm/plots/bar' -import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv' +import { + configPlotTooltipEvent, + 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' @@ -161,7 +167,7 @@ export class RangeBar extends G2PlotChartView { const newChart = new BarClass(container, options) newChart.on('interval:click', action) - + configPlotTooltipEvent(chart, newChart) return newChart } @@ -232,7 +238,10 @@ export class RangeBar extends G2PlotChartView { } } return { value: res, values: param.values, name: param.field } - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } } else { tooltip = false diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts index 608aece2af..36ef5e0a89 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts @@ -2,7 +2,14 @@ import type { WaterfallOptions, Waterfall as G2Waterfall } from '@antv/g2plot/es import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot' import { flow, hexColorToRGBA, parseJson } from '../../../util' import { valueFormatter } from '../../../formatter' -import { getPadding, getTooltipSeriesTotalMap, setGradientColor } from '../../common/common_antv' +import { + configPlotTooltipEvent, + getPadding, + getTooltipContainer, + getTooltipSeriesTotalMap, + setGradientColor, + TOOLTIP_TPL +} from '../../common/common_antv' import { isEmpty } from 'lodash-es' import { useI18n } from '@/hooks/web/useI18n' const { t } = useI18n() @@ -92,6 +99,7 @@ export class Waterfall extends G2PlotChartView { const { Waterfall: G2Waterfall } = await import('@antv/g2plot/esm/plots/waterfall') const newChart = new G2Waterfall(container, options) newChart.on('interval:click', action) + configPlotTooltipEvent(chart, newChart) return newChart } @@ -224,7 +232,10 @@ export class Waterfall extends G2PlotChartView { } }) return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts index b7091824ef..4596d9bb72 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts @@ -3,7 +3,13 @@ import { G2PlotDrawOptions } from '@/views/chart/components/js/panel/types/impl/g2plot' import type { Area as G2Area, AreaOptions } from '@antv/g2plot/esm/plots/area' -import { getPadding, setGradientColor } from '@/views/chart/components/js/panel/common/common_antv' +import { + configPlotTooltipEvent, + getPadding, + getTooltipContainer, + setGradientColor, + TOOLTIP_TPL +} from '@/views/chart/components/js/panel/common/common_antv' import { cloneDeep } from 'lodash-es' import { flow, @@ -116,6 +122,7 @@ export class Area extends G2PlotChartView { newChart.on('point:click', action) extremumEvt(newChart, chart, options, container) + configPlotTooltipEvent(chart, newChart) return newChart } @@ -352,7 +359,10 @@ export class StackArea extends Area { value: valueFormatter(param.value, tooltipAttr.tooltipFormatter) } return obj - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, tooltip } } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts index 1781068a20..0735f8a78a 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts @@ -3,7 +3,12 @@ import { G2PlotDrawOptions } from '@/views/chart/components/js/panel/types/impl/g2plot' import type { Line as G2Line, LineOptions } from '@antv/g2plot/esm/plots/line' -import { getPadding } from '../../common/common_antv' +import { + configPlotTooltipEvent, + getPadding, + getTooltipContainer, + TOOLTIP_TPL +} from '../../common/common_antv' import { flow, hexColorToRGBA, @@ -116,6 +121,7 @@ export class Line extends G2PlotChartView { newChart.on('point:click', action) extremumEvt(newChart, chart, options, container) + configPlotTooltipEvent(chart, newChart) return newChart } @@ -279,7 +285,10 @@ export class Line extends G2PlotChartView { } }) return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts index d617102e87..e573c0dc5b 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/chart-mix.ts @@ -4,12 +4,15 @@ import { } from '@/views/chart/components/js/panel/types/impl/g2plot' import type { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes' import { + configPlotTooltipEvent, getAnalyse, getLabel, getPadding, + getTooltipContainer, getYAxis, getYAxisExt, - setGradientColor + setGradientColor, + TOOLTIP_TPL } from '../../common/common_antv' import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util' import { cloneDeep, isEmpty, defaultTo, map, filter, union, defaultsDeep } from 'lodash-es' @@ -158,7 +161,7 @@ export class ColumnLineMix extends G2PlotChartView { newChart.on('point:click', action) newChart.on('interval:click', action) - + configPlotTooltipEvent(chart, newChart) return newChart } @@ -544,7 +547,10 @@ export class ColumnLineMix extends G2PlotChartView { } }) return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts index 2cea0114d6..14adddfae1 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/funnel.ts @@ -1,7 +1,7 @@ import type { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel' import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot' import { flow, parseJson, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util' -import { getPadding } from '../../common/common_antv' +import { configPlotTooltipEvent, getPadding } from '../../common/common_antv' import { useI18n } from '@/hooks/web/useI18n' import { Datum } from '@antv/g2plot/esm/types/common' import { valueFormatter } from '@/views/chart/components/js/formatter' @@ -110,6 +110,7 @@ export class Funnel extends G2PlotChartView { const { Funnel: G2Funnel } = await import('@antv/g2plot/esm/plots/funnel') const newChart = new G2Funnel(container, options) newChart.on('interval:click', action) + configPlotTooltipEvent(chart, newChart) return newChart } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts index 4d0de4afce..d755dcfdbd 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts @@ -8,6 +8,7 @@ import { valueFormatter } from '@/views/chart/components/js/formatter' import { useI18n } from '@/hooks/web/useI18n' import { isEmpty, map } from 'lodash-es' import { cloneDeep, defaultTo } from 'lodash-es' +import { configPlotTooltipEvent, getTooltipContainer, TOOLTIP_TPL } from '../../common/common_antv' const { t } = useI18n() /** @@ -209,6 +210,7 @@ export class Quadrant extends G2PlotChartView { newChart.on('point:click', action) newChart.on('click', () => quadrantDefaultBaseline(defaultBaselineQuadrant)) newChart.on('afterrender', () => quadrantDefaultBaseline(defaultBaselineQuadrant)) + configPlotTooltipEvent(chart, newChart) return newChart } @@ -379,7 +381,10 @@ export class Quadrant extends G2PlotChartView { }) } return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts index 3e2571bc42..a89771c516 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts @@ -1,7 +1,7 @@ import type { RadarOptions, Radar as G2Radar } from '@antv/g2plot/esm/plots/radar' import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot' import { flow, parseJson } from '../../../util' -import { getPadding } from '../../common/common_antv' +import { configPlotTooltipEvent, getPadding } from '../../common/common_antv' import { valueFormatter } from '../../../formatter' import type { Datum } from '@antv/g2plot/esm/types/common' import { useI18n } from '@/hooks/web/useI18n' @@ -117,6 +117,7 @@ export class Radar extends G2PlotChartView { const { Radar: G2Radar } = await import('@antv/g2plot/esm/plots/radar') const newChart = new G2Radar(container, options) newChart.on('point:click', action) + configPlotTooltipEvent(chart, newChart) return newChart } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts index fa96eb8230..c9be7c9522 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts @@ -5,7 +5,12 @@ import { import type { ScatterOptions, Scatter as G2Scatter } from '@antv/g2plot/esm/plots/scatter' import { flow, parseJson } from '../../../util' import { valueFormatter } from '../../../formatter' -import { getPadding } from '../../common/common_antv' +import { + configPlotTooltipEvent, + getPadding, + getTooltipContainer, + TOOLTIP_TPL +} from '../../common/common_antv' import { useI18n } from '@/hooks/web/useI18n' import { isEmpty } from 'lodash-es' @@ -133,6 +138,7 @@ export class Scatter extends G2PlotChartView { const { Scatter: G2Scatter } = await import('@antv/g2plot/esm/plots/scatter') const newChart = new G2Scatter(container, options) newChart.on('point:click', action) + configPlotTooltipEvent(chart, newChart) return newChart } @@ -233,7 +239,10 @@ export class Scatter extends G2PlotChartView { } }) return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts index 192b80d6ce..9947863e98 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/pie.ts @@ -10,8 +10,11 @@ import { setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util' import { + configPlotTooltipEvent, getPadding, - getTooltipSeriesTotalMap + getTooltipContainer, + getTooltipSeriesTotalMap, + TOOLTIP_TPL } from '@/views/chart/components/js/panel/common/common_antv' import { valueFormatter } from '@/views/chart/components/js/formatter' import { @@ -118,6 +121,7 @@ export class Pie extends G2PlotChartView { const { Pie: G2Pie } = await import('@antv/g2plot/esm/plots/pie') const newChart = new G2Pie(container, options) newChart.on('interval:click', action) + configPlotTooltipEvent(chart, newChart) return newChart } @@ -237,7 +241,10 @@ export class Pie extends G2PlotChartView { } }) return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts index 66047b64ed..424c793a83 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/pie/rose.ts @@ -10,8 +10,11 @@ import { PIE_EDITOR_PROPERTY_INNER } from './common' import { + configPlotTooltipEvent, getPadding, - getTooltipSeriesTotalMap + getTooltipContainer, + getTooltipSeriesTotalMap, + TOOLTIP_TPL } from '@/views/chart/components/js/panel/common/common_antv' import { parseJson, flow, setUpSingleDimensionSeriesColor } from '@/views/chart/components/js/util' import { Label } from '@antv/g2plot/lib/types/label' @@ -94,7 +97,7 @@ export class Rose extends G2PlotChartView { const plot = new G2Rose(container, options) plot.on('interval:click', action) - + configPlotTooltipEvent(chart, plot) return plot } @@ -213,7 +216,10 @@ export class Rose extends G2PlotChartView { } }) return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return { ...options, diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts index ac879b5c3c..91ed3f43e8 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts @@ -30,6 +30,8 @@ import { Scene } from '@antv/l7-scene' import { type IZoomControlOption } from '@antv/l7-component' import { PositionType } from '@antv/l7-core' import { centroid } from '@turf/centroid' +import type { Plot } from '@antv/g2plot' +import type { PickOptions } from '@antv/g2plot/lib/core/plot' export function getPadding(chart: Chart): number[] { if (chart.drill) { @@ -124,7 +126,9 @@ export function getTheme(chart: Chart) { color: tooltipColor, fontSize: tooltipFontsize + 'px', background: tooltipBackgroundColor, - boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.1)' + boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.1)', + 'z-index': 3000, + position: 'fixed' } } }, @@ -206,7 +210,10 @@ export function getTooltip(chart: Chart) { formatter: function (param: Datum) { const value = valueFormatter(param.value, t.tooltipFormatter) return { name: param.field, value } - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } } else { tooltip = false @@ -257,7 +264,10 @@ export function getMultiSeriesTooltip(chart: Chart) { } }) return result - } + }, + container: getTooltipContainer(`tooltip-${chart.id}`), + itemTpl: TOOLTIP_TPL, + enterable: true } return tooltip } @@ -1195,7 +1205,10 @@ function shouldHideZoom(basicStyle: any): boolean { * @param basicStyle */ function getCenter(basicStyle: any): [number, number] { - let center = [DEFAULT_BASIC_STYLE.mapCenter.longitude, DEFAULT_BASIC_STYLE.mapCenter.latitude] + let center: [number, number] = [ + DEFAULT_BASIC_STYLE.mapCenter.longitude, + DEFAULT_BASIC_STYLE.mapCenter.latitude + ] if (basicStyle.autoFit === false) { center = [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude] } @@ -1210,3 +1223,107 @@ function getCenter(basicStyle: any): [number, number] { function addCustomZoom(plotScene: Scene, newZoomOptions: any): void { plotScene.addControl(new CustomZoom(newZoomOptions)) } + +const G2_TOOLTIP_WRAPPER = 'g2-tooltip-wrapper' +export function getTooltipContainer(id) { + let wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER) + if (!wrapperDom) { + wrapperDom = document.createElement('div') + wrapperDom.id = G2_TOOLTIP_WRAPPER + document.body.appendChild(wrapperDom) + } + const curDom = document.getElementById(id) + if (curDom) { + curDom.remove() + } + const g2Tooltip = document.createElement('div') + g2Tooltip.setAttribute('id', id) + g2Tooltip.classList.add('g2-tooltip') + // 最多半屏，鼠标移入可滚动 + g2Tooltip.style.maxHeight = '50%' + g2Tooltip.style.overflowY = 'auto' + g2Tooltip.style.display = 'none' + g2Tooltip.style.position = 'fixed' + g2Tooltip.style.left = '0px' + g2Tooltip.style.top = '0px' + const g2TooltipTitle = document.createElement('div') + g2TooltipTitle.classList.add('g2-tooltip-title') + g2Tooltip.appendChild(g2TooltipTitle) + + const g2TooltipList = document.createElement('ul') + g2TooltipList.classList.add('g2-tooltip-list') + g2Tooltip.appendChild(g2TooltipList) + const full = document.getElementsByClassName('fullscreen') + if (full.length) { + full.item(0).appendChild(g2Tooltip) + } else { + wrapperDom.appendChild(g2Tooltip) + } + return g2Tooltip +} +export function configPlotTooltipEvent>( + chart: Chart, + plot: P +) { + const { tooltip } = parseJson(chart.customAttr) + if (!tooltip.show) { + return + } + // 鼠标可移入, 移入之后保持显示, 移出之后隐藏 + plot.options.tooltip.container.addEventListener('mouseenter', e => { + e.target.style.visibility = 'visible' + e.target.style.display = 'block' + }) + plot.options.tooltip.container.addEventListener('mouseleave', e => { + e.target.style.visibility = 'hidden' + e.target.style.display = 'none' + }) + // 手动处理 tooltip 的显示和隐藏事件，需配合源码理解 + // https://github.com/antvis/G2/blob/master/src/chart/controller/tooltip.ts#showTooltip + plot.on('tooltip:show', () => { + const tooltipCtl = plot.chart.getController('tooltip') + if (!tooltipCtl) { + return + } + const event = plot.chart.interactions.tooltip?.context?.event + if (tooltipCtl.tooltip) { + // 处理视图放大后再关闭 tooltip 的 dom 被清除 + const container = tooltipCtl.tooltip.cfg.container + container.style.display = 'block' + const dom = document.getElementById(container.id) + if (!dom) { + const full = document.getElementsByClassName('fullscreen') + if (full.length) { + full.item(0).appendChild(container) + } else { + const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER) + wrapperDom.appendChild(container) + } + } + } + plot.chart.getOptions().tooltip.follow = false + tooltipCtl.title = Math.random().toString() + plot.chart.getTheme().components.tooltip.x = event.clientX + plot.chart.getTheme().components.tooltip.y = event.clientY + }) + // https://github.com/antvis/G2/blob/master/src/chart/controller/tooltip.ts#hideTooltip + plot.on('plot:mouseleave', () => { + const tooltipCtl = plot.chart.getController('tooltip') + if (!tooltipCtl) { + return + } + plot.chart.getOptions().tooltip.follow = true + const container = tooltipCtl.tooltip?.cfg?.container + if (container) { + container.style.display = 'none' + } + tooltipCtl.hideTooltip() + }) +} + +export const TOOLTIP_TPL = + '
  • ' + + '' + + '{name}:' + + '{value}' + + '
    • '