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

feat(图表): 表格支持单独控制表头和单元格的横纵边框显隐 #10609

Browse Source
This commit is contained in:
wisonic 2024-07-26 17:00:08 +08:00
parent d019c91ed8
commit 674aeacc98
9 changed files with 207 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -736,6 +736,10 @@ export default {
table_show_header_tooltip: '开启表头提示',
table_show_summary: '显示总计',
table_summary_label: '总计标签',
table_header_show_horizon_border: '表头横边框线',
table_header_show_vertical_border: '表头纵边框线',
table_cell_show_horizon_border: '单元格横边框线',
table_cell_show_vertical_border: '单元格纵边框线',
stripe: '斑马纹',
start_angle: '起始角度',
end_angle: '结束角度',

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

@ -332,6 +332,14 @@ declare interface ChartTableHeaderAttr {
* 表头显示开关
*/
showTableHeader: boolean
/**
* 表头横边框线
*/
showHorizonBorder: boolean
/**
* 表头纵边框线
*/
showVerticalBorder: boolean
}
/**
* 单元格属性
@ -370,6 +378,14 @@ declare interface ChartTableCellAttr {
* 鼠标悬浮提示
*/
showTooltip: boolean
/**
* 单元格横边框线
*/
showHorizonBorder: boolean
/**
* 单元格纵边框线
*/
showVerticalBorder: boolean
}
/**

28
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
View File

@ -250,6 +250,34 @@ onMounted(() => {
</el-form-item>
</el-col>
</el-row>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('showHorizonBorder')"
>
<el-checkbox
size="small"
:effect="themes"
v-model="state.tableCellForm.showHorizonBorder"
@change="changeTableCell('showHorizonBorder')"
>
{{ t('chart.table_cell_show_horizon_border') }}
</el-checkbox>
</el-form-item>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('showVerticalBorder')"
>
<el-checkbox
size="small"
:effect="themes"
v-model="state.tableCellForm.showVerticalBorder"
@change="changeTableCell('showVerticalBorder')"
>
{{ t('chart.table_cell_show_vertical_border') }}
</el-checkbox>
</el-form-item>
</el-form>
</template>

28
core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
View File

@ -259,6 +259,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('showHorizonBorder')"
>
<el-checkbox
size="small"
:effect="themes"
v-model="state.tableHeaderForm.showHorizonBorder"
@change="changeTableHeader('showHorizonBorder')"
>
{{ t('chart.table_header_show_horizon_border') }}
</el-checkbox>
</el-form-item>
<el-form-item
class="form-item"
:class="'form-item-' + themes"
v-if="showProperty('showVerticalBorder')"
>
<el-checkbox
size="small"
:effect="themes"
v-model="state.tableHeaderForm.showVerticalBorder"
@change="changeTableHeader('showVerticalBorder')"
>
{{ t('chart.table_header_show_vertical_border') }}
</el-checkbox>
</el-form-item>
</el-form>
</template>

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

@ -387,7 +387,9 @@ export const DEFAULT_TABLE_HEADER: ChartTableHeaderAttr = {
tableHeaderSort: false,
showColTooltip: false,
showRowTooltip: false,
showTableHeader: true
showTableHeader: true,
showHorizonBorder: true,
showVerticalBorder: true
}
export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
tableFontColor: '#000000',
@ -397,7 +399,9 @@ export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
tableItemHeight: 36,
enableTableCrossBG: false,
tableItemSubBgColor: '#EEEEEE',
showTooltip: false
showTooltip: false,
showHorizonBorder: true,
showVerticalBorder: true
}
export const DEFAULT_TITLE_STYLE: ChartTextStyle = {
show: true,

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

@ -22,7 +22,9 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'tableHeaderAlign',
'showIndex',
'indexLabel',
'showColTooltip'
'showColTooltip',
'showHorizonBorder',
'showVerticalBorder'
],
'table-cell-selector': [
'tableItemBgColor',
@ -32,7 +34,9 @@ export const TABLE_EDITOR_PROPERTY_INNER: EditorPropertyInner = {
'tableItemHeight',
'enableTableCrossBG',
'tableItemSubBgColor',
'showTooltip'
'showTooltip',
'showHorizonBorder',
'showVerticalBorder'
],
'title-selector': [
'title',

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

@ -3,7 +3,16 @@ import { formatterItem, valueFormatter } from '@/views/chart/components/js/forma
import { copyContent, SortTooltip } from '@/views/chart/components/js/panel/common/common_table'
import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/types/impl/s2'
import { parseJson } from '@/views/chart/components/js/util'
import { S2Event, S2Options, TableColCell, TableDataCell, TableSheet, ViewMeta } from '@antv/s2'
import {
S2Event,
S2Options,
SHAPE_STYLE_MAP,
TableColCell,
TableDataCell,
TableSheet,
updateShapeAttr,
ViewMeta
} from '@antv/s2'
import { cloneDeep, isNumber } from 'lodash-es'
import { TABLE_EDITOR_PROPERTY, TABLE_EDITOR_PROPERTY_INNER } from './common'
@ -260,4 +269,18 @@ class SummaryCell extends TableDataCell {
const { backgroundColor, backgroundColorOpacity } = this.theme.colCell.cell
return { backgroundColor, backgroundColorOpacity }
}
/**
* 重写这个方法是为了处理底部的汇总行取消 hover 状态时设置 border 为 1,
* 这样会导致单元格隐藏横边边框失败，出现一条白线
*/
hideInteractionShape() {
const width = this.theme.dataCell.cell.horizontalBorderWidth
this.stateShapes.forEach(shape => {
updateShapeAttr(shape, SHAPE_STYLE_MAP.backgroundOpacity, 0)
updateShapeAttr(shape, SHAPE_STYLE_MAP.backgroundColor, 'transparent')
updateShapeAttr(shape, SHAPE_STYLE_MAP.borderOpacity, 0)
updateShapeAttr(shape, SHAPE_STYLE_MAP.borderWidth, width)
updateShapeAttr(shape, SHAPE_STYLE_MAP.borderColor, 'transparent')
})
}
}

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

@ -35,7 +35,9 @@ export class TablePivot extends S2ChartView<PivotSheet> {
'tableTitleHeight',
'tableHeaderAlign',
'showColTooltip',
'showRowTooltip'
'showRowTooltip',
'showHorizonBorder',
'showVerticalBorder'
],
'table-total-selector': ['row', 'col'],
'basic-style-selector': [
@ -283,7 +285,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
}
protected configTheme(chart: Chart): S2Theme {
const theme = super.configTheme(chart)
const { basicStyle, tableHeader } = parseJson(chart.customAttr)
const { basicStyle, tableHeader, tableCell } = parseJson(chart.customAttr)
let tableHeaderBgColor = tableHeader.tableHeaderBgColor
if (!isAlphaColor(tableHeaderBgColor)) {
tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha)
@ -291,11 +293,6 @@ export class TablePivot extends S2ChartView<PivotSheet> {
const tableBorderColor = hexColorToRGBA(basicStyle.tableBorderColor, basicStyle.alpha)
const tableHeaderFontColor = hexColorToRGBA(tableHeader.tableHeaderFontColor, basicStyle.alpha)
const pivotTheme = {
cornerCell: {
cell: {
verticalBorderWidth: 1
}
},
rowCell: {
cell: {
backgroundColor: tableHeaderBgColor,
@ -326,6 +323,40 @@ export class TablePivot extends S2ChartView<PivotSheet> {
}
}
merge(theme, pivotTheme)
if (tableHeader.showHorizonBorder === false) {
const tmp: S2Theme = {
cornerCell: {
cell: {
horizontalBorderColor: tableHeaderBgColor,
horizontalBorderWidth: 0
}
},
rowCell: {
cell: {
horizontalBorderColor: tableHeaderBgColor,
horizontalBorderWidth: 0
}
}
}
merge(theme, tmp)
}
if (tableHeader.showVerticalBorder === false) {
const tmp: S2Theme = {
cornerCell: {
cell: {
verticalBorderColor: tableHeaderBgColor,
verticalBorderWidth: 0
}
},
rowCell: {
cell: {
verticalBorderColor: tableHeaderBgColor,
verticalBorderWidth: 0
}
}
}
merge(theme, tmp)
}
return theme
}

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

@ -40,9 +40,6 @@ export function getCustomTheme(chart: Chart): S2Theme {
const scrollBarHoverColor = resetRgbOpacity(scrollBarColor, 3)
const theme: S2Theme = {
background: {
color: '#00000000'
},
splitLine: {
horizontalBorderColor: borderColor,
verticalBorderColor: borderColor
@ -51,8 +48,7 @@ export function getCustomTheme(chart: Chart): S2Theme {
cell: {
backgroundColor: headerColor,
horizontalBorderColor: borderColor,
verticalBorderColor: borderColor,
verticalBorderWidth: 0
verticalBorderColor: borderColor
},
text: {
fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
@ -240,6 +236,36 @@ export function getCustomTheme(chart: Chart): S2Theme {
}
}
merge(theme, tmpTheme)
if (tableHeader.showHorizonBorder === false) {
const tmpTheme = {
splitLine: {
horizontalBorderColor: tableHeaderBgColor,
horizontalBorderWidth: 0
},
colCell: {
cell: {
horizontalBorderColor: tableHeaderBgColor,
horizontalBorderWidth: 0
}
}
}
merge(theme, tmpTheme)
}
if (tableHeader.showVerticalBorder === false) {
const tmpTheme: S2Theme = {
splitLine: {
verticalBorderColor: tableHeaderBgColor,
verticalBorderWidth: 0
},
colCell: {
cell: {
verticalBorderColor: tableHeaderBgColor,
verticalBorderWidth: 0
}
}
}
merge(theme, tmpTheme)
}
}
// cell
if (tableCell) {
@ -309,6 +335,28 @@ export function getCustomTheme(chart: Chart): S2Theme {
}
}
merge(theme, tmpTheme)
if (tableCell.showHorizonBorder === false) {
const tmpTheme: S2Theme = {
dataCell: {
cell: {
horizontalBorderColor: tableItemBgColor,
horizontalBorderWidth: 0
}
}
}
merge(theme, tmpTheme)
}
if (tableCell.showVerticalBorder === false) {
const tmpTheme = {
dataCell: {
cell: {
verticalBorderColor: tableItemBgColor,
verticalBorderWidth: 0
}
}
}
merge(theme, tmpTheme)
}
}
}
@ -360,7 +408,10 @@ export function getStyle(chart: Chart): Style {
return width / columnCount
}
const baseWidth = width / 100
return fieldMap[node.field] ? fieldMap[node.field].width * baseWidth : baseWidth * 10
const resultWidth = fieldMap[node.field]
? fieldMap[node.field].width * baseWidth
: baseWidth * 10
return parseInt(resultWidth.toFixed(0))
}
break
}