dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 表格增加单元格提示

Browse Source
This commit is contained in:
ulleo 2024-01-02 14:03:26 +08:00
parent 446d3224f5
commit 37a8811120
7 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/frontend/src/lang/en.js
View File

@ -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',

1
core/frontend/src/lang/tw.js
View File

@ -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: '升序',

1
core/frontend/src/lang/zh.js
View File

@ -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: '升序',

3
core/frontend/src/views/chart/chart/chart.js
View File

@ -100,6 +100,9 @@ export const DEFAULT_SIZE = {
tableColTooltip: {
show: false
},
tableCellTooltip: {
show: false
},
gaugeMinType: 'fix', // fix or dynamic
gaugeMinField: {
id: '',

36
core/frontend/src/views/chart/chart/table/table-info.js
View File

@ -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()

5
core/frontend/src/views/chart/chart/util.js
View File

@ -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',

12
core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
View File

@ -334,6 +334,17 @@
<el-radio :label="false">{{ $t('panel.no') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="showProperty('tableCellTooltip')"
:label="$t('chart.table_cell_tooltip')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.tableCellTooltip.show"
@change="changeBarSizeCase('tableCellTooltip')"
/>
</el-form-item>
<el-form-item
v-if="showProperty('indexLabel') && sizeForm.showIndex"
:label="$t('chart.table_index_desc')"
@ -1705,6 +1716,7 @@ export default {
this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
this.sizeForm.tableRowTooltip = this.sizeForm.tableRowTooltip ?? DEFAULT_SIZE.tableRowTooltip
this.sizeForm.tableColTooltip = this.sizeForm.tableColTooltip ?? DEFAULT_SIZE.tableColTooltip
this.sizeForm.tableCellTooltip = this.sizeForm.tableCellTooltip ?? DEFAULT_SIZE.tableCellTooltip
this.sizeForm.tableColumnFreezeHead = this.sizeForm.tableColumnFreezeHead ?? DEFAULT_SIZE.tableColumnFreezeHead
this.sizeForm.tableColumnFreezeTail = this.sizeForm.tableColumnFreezeTail ?? DEFAULT_SIZE.tableColumnFreezeTail
this.sizeForm.tableRowFreezeHead = this.sizeForm.tableRowFreezeHead ?? DEFAULT_SIZE.tableRowFreezeHead