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') }}
+
+
+
+