mirror of
https://github.com/dataease/dataease.git
synced 2025-02-24 19:42:56 +08:00
Merge pull request #9174 from dataease/pr@dev-v2@feat_table_tooltip
feat(图表): 表格支持悬停展示表头和表格内容 #8540
This commit is contained in:
wisonic-s
GitHub
commit
7b0b107f92
@ -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: '结束角度',
|
||||
|
||||
@ -242,6 +242,14 @@ declare interface ChartTableHeaderAttr {
|
||||
* 表头排序开关
|
||||
*/
|
||||
tableHeaderSort: boolean
|
||||
/**
|
||||
* 行头鼠标悬浮提示开关
|
||||
*/
|
||||
showRowTooltip: boolean
|
||||
/**
|
||||
* 列头鼠标悬浮提示开关
|
||||
*/
|
||||
showColTooltip: boolean
|
||||
}
|
||||
/**
|
||||
* 单元格属性
|
||||
@ -275,6 +283,10 @@ declare interface ChartTableCellAttr {
|
||||
* 斑马纹单数行颜色
|
||||
*/
|
||||
tableItemSubBgColor: string
|
||||
/**
|
||||
* 鼠标悬浮提示
|
||||
*/
|
||||
showTooltip: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -234,6 +234,20 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
v-if="showProperty('showTooltip')"
|
||||
>
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="themes"
|
||||
v-model="state.tableCellForm.showTooltip"
|
||||
@change="changeTableCell('showTooltip')"
|
||||
>
|
||||
{{ t('chart.table_show_cell_tooltip') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
|
||||
@ -250,6 +250,34 @@ onMounted(() => {
|
||||
{{ t('chart.table_header_sort') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
v-if="showProperty('showColTooltip')"
|
||||
>
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="themes"
|
||||
v-model="state.tableHeaderForm.showColTooltip"
|
||||
@change="changeTableHeader('showColTooltip')"
|
||||
>
|
||||
{{ t('chart.table_show_col_tooltip') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
v-if="showProperty('showRowTooltip')"
|
||||
>
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="themes"
|
||||
v-model="state.tableHeaderForm.showRowTooltip"
|
||||
@change="changeTableHeader('showRowTooltip')"
|
||||
>
|
||||
{{ t('chart.table_show_row_tooltip') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -169,6 +169,15 @@ export class TableInfo extends S2ChartView<TableSheet> {
|
||||
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
|
||||
|
||||
@ -164,6 +164,15 @@ export class TableNormal extends S2ChartView<TableSheet> {
|
||||
}
|
||||
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
|
||||
|
||||
@ -32,7 +32,9 @@ export class TablePivot extends S2ChartView<PivotSheet> {
|
||||
'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<PivotSheet> {
|
||||
|
||||
// 开始渲染
|
||||
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))
|
||||
|
||||
@ -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<P extends SpreadSheet> 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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user