From 01f13d4622ab966bbe77fde5211806f72852aca6 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Thu, 30 May 2024 20:02:22 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=E8=A1=A8=E6=A0=BC=E6=8F=90=E7=A4=BA=E5=BC=80=E5=85=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/models/chart/chart-attr.d.ts | 3 ++ .../components/table/TableCellSelector.vue | 14 -------- .../components/table/TableHeaderSelector.vue | 32 ------------------- .../js/panel/charts/table/common.ts | 2 +- .../js/panel/charts/table/table-info.ts | 10 ++---- .../js/panel/charts/table/table-normal.ts | 9 ++---- .../js/panel/charts/table/table-pivot.ts | 11 ++----- .../js/panel/common/common_table.ts | 17 +++++++--- .../components/js/panel/types/impl/s2.ts | 12 ++++++- 9 files changed, 37 insertions(+), 73 deletions(-) diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index aecc541928..ae1a504e7f 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -279,10 +279,12 @@ declare interface ChartTableHeaderAttr { */ tableHeaderSort: boolean /** + * @deprecated since version 2.7.0 由提示统一控制 * 行头鼠标悬浮提示开关 */ showRowTooltip: boolean /** + * @deprecated since version 2.7.0 由提示统一控制 * 列头鼠标悬浮提示开关 */ showColTooltip: boolean @@ -324,6 +326,7 @@ declare interface ChartTableCellAttr { */ tableItemSubBgColor: string /** + * @deprecated since version 2.7.0 由提示统一控制 * 鼠标悬浮提示 */ showTooltip: boolean diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue index 9fbbc4576a..e24f6f9e1e 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue @@ -234,20 +234,6 @@ onMounted(() => { - - - {{ t('chart.table_show_cell_tooltip') }} - - diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue index ef3be5cc72..e2b522a3a3 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue @@ -250,38 +250,6 @@ onMounted(() => { {{ t('chart.table_header_sort') }} - - - {{ - chart.type === 'table-pivot' - ? t('chart.table_show_col_tooltip') - : t('chart.table_show_header_tooltip') - }} - - - - - {{ t('chart.table_show_row_tooltip') }} - - diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts index 4fa610f969..92bb20139a 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts @@ -46,7 +46,7 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'letterSpace', 'fontShadow' ], - 'tooltip-selector': ['fontSize', 'color', 'backgroundColor'], + 'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'show'], 'function-cfg': ['emptyDataStrategy'], threshold: ['tableThreshold'] } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts index 36afc49597..a6a5ef574c 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts @@ -184,14 +184,10 @@ export class TableInfo extends S2ChartView { } action(param) }) - - // hover - const { showColTooltip } = customAttr.tableHeader - if (showColTooltip) { + // tooltip + const { show } = customAttr.tooltip + if (show) { newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event, meta)) - } - const { showTooltip } = customAttr.tableCell - if (showTooltip) { newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta)) } // header resize diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts index 16a5dbf584..a0ee7616b2 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts @@ -187,13 +187,10 @@ export class TableNormal extends S2ChartView { } action(param) }) - // hover - const { showColTooltip } = customAttr.tableHeader - if (showColTooltip) { + // tooltip + const { show } = customAttr.tooltip + if (show) { newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event, meta)) - } - const { showTooltip } = customAttr.tableCell - if (showTooltip) { newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta)) } // header resize diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts index 8bd20dc78b..473536b92c 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts @@ -200,16 +200,11 @@ export class TablePivot extends S2ChartView { this.configTooltip(chart, s2Options) // 开始渲染 const s2 = new PivotSheet(containerDom, s2DataConfig, s2Options as unknown as S2Options) - // hover - const { showColTooltip, showRowTooltip } = customAttr.tableHeader - if (showColTooltip) { + // tooltip + const { show } = customAttr.tooltip + if (show) { s2.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(s2, event, meta)) - } - if (showRowTooltip) { s2.on(S2Event.ROW_CELL_HOVER, event => this.showTooltip(s2, event, meta)) - } - const { showTooltip } = customAttr.tableCell - if (showTooltip) { s2.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(s2, event, meta)) } // click diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts index 9ed7a1a3a7..a6acb65fe1 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts @@ -750,7 +750,8 @@ export function configTooltip(chart: Chart, option: S2Options) { boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px', borderRadius: '3px', padding: '4px 12px', - opacity: 0.95 + opacity: 0.95, + position: 'absolute' }, adjustPosition: ({ event }) => { return getTooltipPosition(event) @@ -791,7 +792,7 @@ export function copyContent(s2Instance, event, fieldMeta) { function getTooltipPosition(event) { const s2Instance = event.s2Instance const { x, y } = event - const result = { x: x + 15, y: y + 10 } + const result = { x: x + 15, y } if (!s2Instance) { return result } @@ -809,8 +810,16 @@ function getTooltipPosition(event) { if (result.x && result.x + offsetWidth > width) { result.x -= result.x + offsetWidth - width } - if (result.y && result.y + offsetHeight > height) { - result.y -= offsetHeight + 15 + if (result.y) { + if (result.y > offsetHeight) { + if (result.y - offsetHeight >= 15) { + result.y -= offsetHeight + 15 + } else { + result.y = 0 + } + } else { + result.y += 15 + } } return result } diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts index 89e8b95166..3188b96972 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts @@ -3,7 +3,15 @@ import { AntVDrawOptions, ChartLibraryType } from '@/views/chart/components/js/panel/types' -import { S2Theme, SpreadSheet, Style, S2Options, Meta, SERIES_NUMBER_FIELD } from '@antv/s2' +import { + S2Theme, + SpreadSheet, + Style, + S2Options, + Meta, + SERIES_NUMBER_FIELD, + setTooltipContainerStyle +} from '@antv/s2' import { configHeaderInteraction, configTooltip, @@ -86,6 +94,8 @@ export abstract class S2ChartView

extends AntVAbstractCha return } event.s2Instance = s2Instance + const style = s2Instance.options.tooltip.style + setTooltipContainerStyle(s2Instance.tooltip.container, { style }) s2Instance.showTooltip({ position: { x: event.clientX,