diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 33b0ba3795..510767a054 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -648,6 +648,9 @@ export default { table_item_font_color: '表格字体', table_show_index: '显示序号', table_header_sort: '开启表头排序', + table_show_row_tooltip: '开启行头提示', + table_show_col_tooltip: '开启列头提示', + table_show_cell_tooltip: '开启单元格提示', stripe: '斑马纹', start_angle: '起始角度', end_angle: '结束角度', 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 18924a54eb..368903c713 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -242,6 +242,14 @@ declare interface ChartTableHeaderAttr { * 表头排序开关 */ tableHeaderSort: boolean + /** + * 行头鼠标悬浮提示开关 + */ + showRowTooltip: boolean + /** + * 列头鼠标悬浮提示开关 + */ + showColTooltip: boolean } /** * 单元格属性 @@ -275,6 +283,10 @@ declare interface ChartTableCellAttr { * 斑马纹单数行颜色 */ tableItemSubBgColor: string + /** + * 鼠标悬浮提示 + */ + 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 e24f6f9e1e..9fbbc4576a 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,6 +234,20 @@ 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 a1ee4a3d4e..bce68caf68 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,6 +250,34 @@ onMounted(() => { {{ t('chart.table_header_sort') }} + + + {{ t('chart.table_show_col_tooltip') }} + + + + + {{ t('chart.table_show_row_tooltip') }} + + diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index ecd873ce1b..f7c8a0b135 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -333,7 +333,9 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = { tableHeaderFontColor: '#000000', tableTitleFontSize: 12, tableTitleHeight: 36, - tableHeaderSort: false + tableHeaderSort: false, + showColTooltip: false, + showRowTooltip: false } export const DEFAULT_TABLE_CELL: ChartTableCellAttr = { tableFontColor: '#000000', @@ -342,7 +344,8 @@ export const DEFAULT_TABLE_CELL: ChartTableCellAttr = { tableItemFontSize: 12, tableItemHeight: 36, enableTableCrossBG: false, - tableItemSubBgColor: '#EEEEEE' + tableItemSubBgColor: '#EEEEEE', + showTooltip: false } export const DEFAULT_TITLE_STYLE: ChartTextStyle = { show: true, 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 b309006b65..2d0f999147 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 @@ -20,7 +20,8 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'tableTitleHeight', 'tableHeaderAlign', 'showIndex', - 'indexLabel' + 'indexLabel', + 'showColTooltip' ], 'table-cell-selector': [ 'tableItemBgColor', @@ -29,7 +30,8 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = { 'tableItemAlign', 'tableItemHeight', 'enableTableCrossBG', - 'tableItemSubBgColor' + 'tableItemSubBgColor', + 'showTooltip' ], 'title-selector': [ 'title', 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 2db4ca5bed..5c048f116d 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 @@ -169,6 +169,15 @@ export class TableInfo extends S2ChartView { action(param) }) + // hover + const { showColTooltip } = customAttr.tableHeader + if (showColTooltip) { + 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 newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, ev => resizeAction(ev)) // right click 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 cd93307715..98b1b73275 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 @@ -164,6 +164,15 @@ export class TableNormal extends S2ChartView { } action(param) }) + // hover + const { showColTooltip } = customAttr.tableHeader + if (showColTooltip) { + newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event)) + } + const { showTooltip } = customAttr.tableCell + if (showTooltip) { + newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta)) + } // header resize newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, ev => resizeAction(ev)) // right click 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 5638684ecd..33e57528c8 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 @@ -32,7 +32,9 @@ export class TablePivot extends S2ChartView { 'tableTitleFontSize', 'tableHeaderFontColor', 'tableTitleHeight', - 'tableHeaderAlign' + 'tableHeaderAlign', + 'showColTooltip', + 'showRowTooltip' ], 'table-total-selector': ['row', 'col'], 'basic-style-selector': ['tableColumnMode', 'tableBorderColor', 'tableScrollBarColor', 'alpha'] @@ -185,7 +187,18 @@ export class TablePivot extends S2ChartView { // 开始渲染 const s2 = new PivotSheet(containerDom, s2DataConfig, s2Options as unknown as S2Options) - + // hover + const { showColTooltip, showRowTooltip } = customAttr.tableHeader + if (showColTooltip) { + 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 s2.on(S2Event.DATA_CELL_CLICK, ev => this.dataCellClickAction(chart, ev, s2, action)) s2.on(S2Event.ROW_CELL_CLICK, ev => this.headerCellClickAction(chart, ev, s2, action)) 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 deba6536b0..2fc026a84d 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,7 @@ import { AntVDrawOptions, ChartLibraryType } from '@/views/chart/components/js/panel/types' -import { S2Theme, SpreadSheet, Style, S2Options } from '@antv/s2' +import { S2Theme, SpreadSheet, Style, S2Options, Meta } from '@antv/s2' import { configHeaderInteraction, configTooltip, @@ -13,6 +13,7 @@ import { handleTableEmptyStrategy } from '@/views/chart/components/js/panel/common/common_table' import '@antv/s2/dist/style.min.css' +import { find } from 'lodash-es' declare interface PageInfo { currentPage: number @@ -52,4 +53,40 @@ export abstract class S2ChartView

extends AntVAbstractCha protected configConditions(chart: Chart) { return getConditions(chart) } + + protected showTooltip(s2Instance: P, event, metaConfig: Meta[]) { + const cell = s2Instance.getCell(event.target) + const meta = cell.getMeta() + let content = '' + let field + switch (cell.cellType) { + case 'dataCell': + field = find(metaConfig, item => item.field === meta.valueField) + if (meta.fieldValue) { + content = field?.formatter?.(meta.fieldValue) + } + break + case 'rowCell': + case 'colCell': + content = meta.label + field = find(metaConfig, item => item.field === content) + if (field) { + content = field.name + } + break + } + if (!content) { + return + } + event.s2Instance = s2Instance + s2Instance.showTooltip({ + position: { + x: event.clientX, + y: event.clientY + }, + content, + meta, + event + }) + } }