center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(图表): 表格支持隐藏鼠标悬浮样式 #12755

Browse Source
This commit is contained in:
wisonic 2024-10-24 18:58:33 +08:00
parent 7a1667ba4a
commit 429ffc4239
8 changed files with 79 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/core-frontend/src/locales/zh-CN.ts
View File

@ -1544,7 +1544,8 @@ export default {
auto_fit: '自适应缩放',
zoom_level: '缩放等级',
central_point: '中心点',
full_display: '全量显示'
full_display: '全量显示',
show_hover_style: '显示鼠标悬浮样式'
},
dataset: {
scope_edit: '仅编辑时生效',

4
core/core-frontend/src/models/chart/chart-attr.d.ts vendored
View File

@ -322,6 +322,10 @@ declare interface ChartBasicStyle {
* 符号地图自定义符号形状
*/
customIcon: string
/**
* 表格鼠标悬浮样式
*/
showHoverStyle: boolean
}
/**
* 表头属性

14
core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
View File

@ -1023,6 +1023,20 @@ onMounted(() => {
@blur="changeBasicStyle('summaryLabel')"
/>
</el-form-item>
<el-form-item
v-if="showProperty('showHoverStyle')"
class="form-item"
:class="'form-item-' + themes"
>
<el-checkbox
size="small"
:effect="themes"
v-model="state.basicStyleForm.showHoverStyle"
@change="changeBasicStyle('showHoverStyle')"
>
{{ t('chart.show_hover_style') }}
</el-checkbox>
</el-form-item>
<!--table2 end-->
<!--gauge start-->
<el-form-item

4
core/core-frontend/src/views/chart/components/editor/util/chart.ts
View File

@ -1594,7 +1594,9 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
longitude: 117.232,
latitude: 39.354
},
zoomLevel: 7
zoomLevel: 7,
customIcon: '',
showHoverStyle: true
}
export const BASE_VIEW_CONFIG = {

34
core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts
View File

@ -59,7 +59,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
'tableBorderColor',
'tableScrollBarColor',
'alpha',
'tablePageMode'
'tablePageMode',
'showHoverStyle'
],
'table-cell-selector': [
...TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'],
@ -141,21 +142,24 @@ export class TableInfo extends S2ChartView<TableSheet> {
data: newData
}
const customAttr = parseJson(chart.customAttr)
const { basicStyle, tableCell, tableHeader, tooltip } = parseJson(chart.customAttr)
// options
const s2Options: S2Options = {
width: containerDom.getBoundingClientRect().width,
height: containerDom.offsetHeight,
showSeriesNumber: customAttr.tableHeader.showIndex,
showSeriesNumber: tableHeader.showIndex,
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom,
renderTooltip: sheet => new SortTooltip(sheet)
},
interaction: {
hoverHighlight: !(basicStyle.showHoverStyle === false)
}
}
s2Options.style = this.configStyle(chart, s2DataConfig)
// 自适应列宽模式下，URL 字段的宽度固定为 120
if (customAttr.basicStyle.tableColumnMode === 'adapt') {
if (basicStyle.tableColumnMode === 'adapt') {
const urlFields = fields.filter(
field => field.deType === 7 && !axisMap[field.dataeaseName]?.hide
)
@ -164,13 +168,13 @@ export class TableInfo extends S2ChartView<TableSheet> {
return p
}, {})
}
if (customAttr.tableCell.tableFreeze) {
s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0
if (tableCell.tableFreeze) {
s2Options.frozenColCount = tableCell.tableColumnFreezeHead ?? 0
s2Options.frozenRowCount = tableCell.tableRowFreezeHead ?? 0
}
// 开启序号之后，第一列就是序号列，修改 label 即可
if (s2Options.showSeriesNumber) {
let indexLabel = customAttr.tableHeader.indexLabel
let indexLabel = tableHeader.indexLabel
if (!indexLabel) {
indexLabel = ''
}
@ -194,15 +198,13 @@ export class TableInfo extends S2ChartView<TableSheet> {
// tooltip
this.configTooltip(chart, s2Options)
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
if (customAttr.tableHeader.showTableHeader === false) {
if (tableHeader.showTableHeader === false) {
s2Options.style.colCfg.height = 1
if (customAttr.tableCell.showHorizonBorder === false) {
if (tableCell.showHorizonBorder === false) {
s2Options.style.colCfg.height = 0
}
s2Options.interaction = {
resize: {
colCellVertical: false
}
s2Options.interaction.resize = {
colCellVertical: false
}
s2Options.colCell = (node, sheet, config) => {
node.label = ' '
@ -217,7 +219,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
// 自适应铺满
if (customAttr.basicStyle.tableColumnMode === 'adapt') {
if (basicStyle.tableColumnMode === 'adapt') {
newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, () => {
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult)
})
@ -298,7 +300,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
action(param)
})
// tooltip
const { show } = customAttr.tooltip
const { show } = tooltip
if (show) {
newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta))

47
core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts
View File

@ -34,7 +34,8 @@ export class TableNormal extends S2ChartView<TableSheet> {
'basic-style-selector': [
...TABLE_EDITOR_PROPERTY_INNER['basic-style-selector'],
'showSummary',
'summaryLabel'
'summaryLabel',
'showHoverStyle'
],
'table-cell-selector': [
...TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'],
@ -130,28 +131,31 @@ export class TableNormal extends S2ChartView<TableSheet> {
data: newData
}
const customAttr = parseJson(chart.customAttr)
const { basicStyle, tableCell, tableHeader, tooltip } = parseJson(chart.customAttr)
// options
const s2Options: S2Options = {
width: containerDom.getBoundingClientRect().width,
height: containerDom.offsetHeight,
showSeriesNumber: customAttr.tableHeader.showIndex,
showSeriesNumber: tableHeader.showIndex,
conditions: this.configConditions(chart),
tooltip: {
getContainer: () => containerDom,
renderTooltip: sheet => new SortTooltip(sheet)
},
interaction: {
hoverHighlight: !(basicStyle.showHoverStyle === false)
}
}
// 列宽设置
s2Options.style = this.configStyle(chart, s2DataConfig)
// 行列冻结
if (customAttr.tableCell.tableFreeze) {
s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0
if (tableCell.tableFreeze) {
s2Options.frozenColCount = tableCell.tableColumnFreezeHead ?? 0
s2Options.frozenRowCount = tableCell.tableRowFreezeHead ?? 0
}
// 开启序号之后，第一列就是序号列，修改 label 即可
if (s2Options.showSeriesNumber) {
let indexLabel = customAttr.tableHeader.indexLabel
let indexLabel = tableHeader.indexLabel
if (!indexLabel) {
indexLabel = ''
}
@ -165,15 +169,13 @@ export class TableNormal extends S2ChartView<TableSheet> {
// tooltip
this.configTooltip(chart, s2Options)
// 隐藏表头，保留顶部的分割线, 禁用表头横向 resize
if (customAttr.tableHeader.showTableHeader === false) {
if (tableHeader.showTableHeader === false) {
s2Options.style.colCfg.height = 1
if (customAttr.tableCell.showHorizonBorder === false) {
if (tableCell.showHorizonBorder === false) {
s2Options.style.colCfg.height = 0
}
s2Options.interaction = {
resize: {
colCellVertical: false
}
s2Options.interaction.resize = {
colCellVertical: false
}
s2Options.colCell = (node, sheet, config) => {
node.label = ' '
@ -186,10 +188,10 @@ export class TableNormal extends S2ChartView<TableSheet> {
}
// 总计
if (customAttr.basicStyle.showSummary) {
if (basicStyle.showSummary) {
// 设置汇总行高度和表头一致
const heightByField = {}
heightByField[newData.length] = customAttr.tableHeader.tableTitleHeight
heightByField[newData.length] = tableHeader.tableTitleHeight
s2Options.style.rowCfg = { heightByField }
// 计算汇总加入到数据里，冻结最后一行
s2Options.frozenTrailingRowCount = 1
@ -211,11 +213,11 @@ export class TableNormal extends S2ChartView<TableSheet> {
return new TableDataCell(viewMeta, viewMeta.spreadsheet)
}
if (viewMeta.colIndex === 0) {
if (customAttr.tableHeader.showIndex) {
viewMeta.fieldValue = customAttr.basicStyle.summaryLabel ?? '总计'
if (tableHeader.showIndex) {
viewMeta.fieldValue = basicStyle.summaryLabel ?? '总计'
} else {
if (xAxis.length) {
viewMeta.fieldValue = customAttr.basicStyle.summaryLabel ?? '总计'
viewMeta.fieldValue = basicStyle.summaryLabel ?? '总计'
}
}
}
@ -225,11 +227,10 @@ export class TableNormal extends S2ChartView<TableSheet> {
// 开始渲染
const newChart = new TableSheet(containerDom, s2DataConfig, s2Options)
// 总计紧贴在单元格后面
if (customAttr.basicStyle.showSummary) {
if (basicStyle.showSummary) {
newChart.on(S2Event.LAYOUT_BEFORE_RENDER, () => {
const totalHeight =
customAttr.tableHeader.tableTitleHeight * 2 +
customAttr.tableCell.tableItemHeight * (newData.length - 1)
tableHeader.tableTitleHeight * 2 + tableCell.tableItemHeight * (newData.length - 1)
if (totalHeight < newChart.options.height) {
// 6 是阴影高度
newChart.options.height =
@ -238,7 +239,7 @@ export class TableNormal extends S2ChartView<TableSheet> {
})
}
// 自适应铺满
if (customAttr.basicStyle.tableColumnMode === 'adapt') {
if (basicStyle.tableColumnMode === 'adapt') {
newChart.on(S2Event.LAYOUT_RESIZE_COL_WIDTH, () => {
newChart.store.set('lastLayoutResult', newChart.facet.layoutResult)
})
@ -308,7 +309,7 @@ export class TableNormal extends S2ChartView<TableSheet> {
action(param)
})
// tooltip
const { show } = customAttr.tooltip
const { show } = tooltip
if (show) {
newChart.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(newChart, event, meta))
newChart.on(S2Event.DATA_CELL_HOVER, event => this.showTooltip(newChart, event, meta))

13
core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts
View File

@ -97,7 +97,8 @@ export class TablePivot extends S2ChartView<PivotSheet> {
'tableBorderColor',
'tableScrollBarColor',
'alpha',
'tableLayoutMode'
'tableLayoutMode',
'showHoverStyle'
]
}
axis: AxisType[] = ['xAxis', 'xAxisExt', 'yAxis', 'filter']
@ -172,8 +173,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
})
// total config
const customAttr = parseJson(chart.customAttr)
const { tableTotal, basicStyle } = customAttr
const { basicStyle, tooltip, tableTotal } = parseJson(chart.customAttr)
tableTotal.row.subTotalsDimensions = r
tableTotal.col.subTotalsDimensions = c
@ -259,7 +259,10 @@ export class TablePivot extends S2ChartView<PivotSheet> {
getContainer: () => containerDom
},
hierarchyType: basicStyle.tableLayoutMode ?? 'grid',
dataSet: spreadSheet => new CustomPivotDataset(spreadSheet)
dataSet: spreadSheet => new CustomPivotDataset(spreadSheet),
interaction: {
hoverHighlight: !(basicStyle.showHoverStyle === false)
}
}
// options
s2Options.style = this.configStyle(chart, s2DataConfig)
@ -269,7 +272,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
// 开始渲染
const s2 = new PivotSheet(containerDom, s2DataConfig, s2Options as unknown as S2Options)
// tooltip
const { show } = customAttr.tooltip
const { show } = tooltip
if (show) {
s2.on(S2Event.COL_CELL_HOVER, event => this.showTooltip(s2, event, meta))
s2.on(S2Event.ROW_CELL_HOVER, event => this.showTooltip(s2, event, meta))

7
core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
View File

@ -184,7 +184,12 @@ export function getCustomTheme(chart: Chart): S2Theme {
dataCell: {
cell: {
horizontalBorderColor: tableBorderColor,
verticalBorderColor: tableBorderColor
verticalBorderColor: tableBorderColor,
interactionState: {
hoverFocus: {
borderOpacity: basicStyle.showHoverStyle === false ? 0 : 1
}
}
}
},
scrollBar: {