From 37a8811120c51b488cbea412999232ca09c53ba6 Mon Sep 17 00:00:00 2001 From: ulleo Date: Tue, 2 Jan 2024 14:03:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=8D=95=E5=85=83=E6=A0=BC=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/frontend/src/lang/en.js | 1 + core/frontend/src/lang/tw.js | 1 + core/frontend/src/lang/zh.js | 1 + core/frontend/src/views/chart/chart/chart.js | 3 ++ .../src/views/chart/chart/table/table-info.js | 36 +++++++++++++++++-- core/frontend/src/views/chart/chart/util.js | 5 ++- .../components/shapeAttr/SizeSelectorAntV.vue | 12 +++++++ 7 files changed, 56 insertions(+), 3 deletions(-) diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js index 8c652bdea0..3e7221d409 100644 --- a/core/frontend/src/lang/en.js +++ b/core/frontend/src/lang/en.js @@ -1515,6 +1515,7 @@ export default { table_index_desc: 'Index Header Name', table_row_tooltip: 'Row Tooltip', table_col_tooltip: 'Column Tooltip', + table_cell_tooltip: 'Cell Tooltip', total_sort: 'Total Sort', total_sort_none: 'None', total_sort_asc: 'ASC', diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js index 1051ba935c..67a09dc11e 100644 --- a/core/frontend/src/lang/tw.js +++ b/core/frontend/src/lang/tw.js @@ -1512,6 +1512,7 @@ export default { table_index_desc: '表頭名稱', table_row_tooltip: '行頭提示', table_col_tooltip: '列頭提示', + table_cell_tooltip: '單元格提示', total_sort: '總計排序', total_sort_none: '無', total_sort_asc: '升序', diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js index 74828f46dd..09972e1a73 100644 --- a/core/frontend/src/lang/zh.js +++ b/core/frontend/src/lang/zh.js @@ -1512,6 +1512,7 @@ export default { table_index_desc: '表头名称', table_row_tooltip: '行头提示', table_col_tooltip: '列头提示', + table_cell_tooltip: '单元格提示', total_sort: '总计排序', total_sort_none: '无', total_sort_asc: '升序', diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js index 9879226866..91c3451899 100644 --- a/core/frontend/src/views/chart/chart/chart.js +++ b/core/frontend/src/views/chart/chart/chart.js @@ -100,6 +100,9 @@ export const DEFAULT_SIZE = { tableColTooltip: { show: false }, + tableCellTooltip: { + show: false + }, gaugeMinType: 'fix', // fix or dynamic gaugeMinField: { id: '', diff --git a/core/frontend/src/views/chart/chart/table/table-info.js b/core/frontend/src/views/chart/chart/table/table-info.js index bf9b4a3d16..49da1f9aa7 100644 --- a/core/frontend/src/views/chart/chart/table/table-info.js +++ b/core/frontend/src/views/chart/chart/table/table-info.js @@ -1,8 +1,20 @@ -import { TableSheet, S2Event, PivotSheet, DataCell, EXTRA_FIELD, TOTAL_VALUE } from '@antv/s2' +import { TableSheet, BaseEvent, S2Event, PivotSheet, DataCell, EXTRA_FIELD, TOTAL_VALUE } from '@antv/s2' import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table' import { DEFAULT_COLOR_CASE, DEFAULT_TOTAL } from '@/views/chart/chart/chart' import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter' import { handleTableEmptyStrategy, hexColorToRGBA } from '@/views/chart/chart/util' + +class RowHoverInteraction extends BaseEvent { + bindEvents() { + this.spreadsheet.on(S2Event.ROW_CELL_HOVER, (event) => { + this.spreadsheet.tooltip.show({ + position: { x: 0, y: 0 }, + content: '...' + }) + }) + } +} + export function baseTableInfo(s2, container, chart, action, tableData, pageInfo) { const containerDom = document.getElementById(container) @@ -138,7 +150,9 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo) if (size.tableColTooltip?.show) { s2.on(S2Event.COL_CELL_HOVER, event => showTooltip(s2, event)) } - + if (size.tableCellTooltip?.show) { + s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event)) + } // theme const customTheme = getCustomTheme(chart) s2.setThemeCfg({ theme: customTheme }) @@ -327,6 +341,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) { if (size.tableColTooltip?.show) { s2.on(S2Event.COL_CELL_HOVER, event => showTooltip(s2, event)) } + if (size.tableCellTooltip?.show) { + s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event)) + } // theme const customTheme = getCustomTheme(chart) s2.setThemeCfg({ theme: customTheme }) @@ -524,6 +541,9 @@ export function baseTablePivot(s2, container, chart, action, headerAction, table if (size?.tableColTooltip?.show) { s2.on(S2Event.COL_CELL_HOVER, event => showTooltip(s2, event, fieldMap)) } + if (size.tableCellTooltip?.show) { + s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event)) + } // theme const customTheme = getCustomTheme(chart) s2.setThemeCfg({ theme: customTheme }) @@ -781,6 +801,18 @@ function mappingColor(value, defaultColor, field, type, filedValueMap, rowData) return color } +function showTooltipValue(s2Instance, event) { + const cell = s2Instance.getCell(event.target) + const content = cell.actualText + s2Instance.showTooltip({ + position: { + x: event.clientX, + y: event.clientY + }, + content + }) +} + function showTooltip(s2Instance, event, fieldMap) { const cell = s2Instance.getCell(event.target) const meta = cell.getMeta() diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js index 7f3192abe8..178a10625c 100644 --- a/core/frontend/src/views/chart/chart/util.js +++ b/core/frontend/src/views/chart/chart/util.js @@ -67,6 +67,7 @@ export const TYPE_CONFIGS = [ 'showIndex', 'indexLabel', 'tableColTooltip', + 'tableCellTooltip', 'showTableHeader' ], 'title-selector-ant-v': [ @@ -120,6 +121,7 @@ export const TYPE_CONFIGS = [ 'showIndex', 'indexLabel', 'tableColTooltip', + 'tableCellTooltip', 'showTableHeader', 'tableFreeze' ], @@ -171,7 +173,8 @@ export const TYPE_CONFIGS = [ 'tableItemHeight', 'tableColumnMode', 'tableRowTooltip', - 'tableColTooltip' + 'tableColTooltip', + 'tableCellTooltip' ], 'total-cfg': [ 'row', diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue index 7d841773c8..f2b0fd0252 100644 --- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue +++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue @@ -334,6 +334,17 @@ {{ $t('panel.no') }} + + + +