diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 3ee4570a12..2b26f80104 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -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: '结束角度', diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index 6da095a553..7ae99dce75 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -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 } /** diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue index cc34593c4e..be9521021d 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue @@ -250,6 +250,34 @@ onMounted(() => { + + + {{ t('chart.table_cell_show_horizon_border') }} + + + + + {{ t('chart.table_cell_show_vertical_border') }} + + diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue index a0a947f6c8..518348d91f 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue @@ -259,6 +259,34 @@ onMounted(() => { {{ t('chart.table_header_sort') }} + + + {{ t('chart.table_header_show_horizon_border') }} + + + + + {{ t('chart.table_header_show_vertical_border') }} + + diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 0f16c4b1ff..896f342781 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -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, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts index 92bb20139a..20ab6289e6 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/common.ts @@ -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', diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts index 4180aae321..63013f2c73 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts @@ -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') + }) + } } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts index c744318633..95bcc38a7b 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts @@ -35,7 +35,9 @@ export class TablePivot extends S2ChartView { 'tableTitleHeight', 'tableHeaderAlign', 'showColTooltip', - 'showRowTooltip' + 'showRowTooltip', + 'showHorizonBorder', + 'showVerticalBorder' ], 'table-total-selector': ['row', 'col'], 'basic-style-selector': [ @@ -283,7 +285,7 @@ export class TablePivot extends S2ChartView { } 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 { 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 { } } 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 } diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts index fee05b058b..8aff7fee25 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts @@ -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 }