fix: 表格单元格提示显示不完整

This commit is contained in:
ulleo 2024-01-22 15:30:01 +08:00
parent c8e9dfc948
commit 825fc65963

View File

@ -1,20 +1,9 @@
import { TableSheet, BaseEvent, S2Event, PivotSheet, DataCell, EXTRA_FIELD, TOTAL_VALUE } from '@antv/s2'
import { TableSheet, 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'
import { maxBy, minBy } from 'lodash'
class RowHoverInteraction extends BaseEvent {
bindEvents() {
this.spreadsheet.on(S2Event.ROW_CELL_HOVER, (event) => {
this.spreadsheet.tooltip.show({
position: { x: 0, y: 0 },
content: '...'
})
})
}
}
import { maxBy, minBy, find } from 'lodash-es'
export function baseTableInfo(s2, container, chart, action, tableData, pageInfo) {
const containerDom = document.getElementById(container)
@ -152,7 +141,7 @@ export function baseTableInfo(s2, container, chart, action, tableData, pageInfo)
s2.on(S2Event.COL_CELL_HOVER, event => showTooltip(s2, event))
}
if (size.tableCellTooltip?.show) {
s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event))
s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event, meta))
}
// theme
const customTheme = getCustomTheme(chart)
@ -343,7 +332,7 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
s2.on(S2Event.COL_CELL_HOVER, event => showTooltip(s2, event))
}
if (size.tableCellTooltip?.show) {
s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event))
s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event, meta))
}
// theme
const customTheme = getCustomTheme(chart)
@ -562,7 +551,7 @@ export function baseTablePivot(s2, container, chart, action, headerAction, table
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))
s2.on(S2Event.DATA_CELL_HOVER, event => showTooltipValue(s2, event, meta))
}
// theme
const customTheme = getCustomTheme(chart)
@ -821,9 +810,14 @@ function mappingColor(value, defaultColor, field, type, filedValueMap, rowData)
return color
}
function showTooltipValue(s2Instance, event) {
function showTooltipValue(s2Instance, event, meta) {
const cell = s2Instance.getCell(event.target)
const content = cell.actualText
const valueField = cell.getMeta().valueField
const value = cell.getMeta().data[valueField]
const metaObj = find(meta, m =>
m.field === valueField
)
const content = metaObj.formatter(value)
s2Instance.showTooltip({
position: {
x: event.clientX,