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 e24f6f9e1e..cc34593c4e 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 @@ -4,6 +4,7 @@ import { useI18n } from '@/hooks/web/useI18n' import { COLOR_PANEL, DEFAULT_TABLE_CELL } from '@/views/chart/components/editor/util/chart' import { ElSpace } from 'element-plus-secondary' import { cloneDeep, defaultsDeep } from 'lodash-es' +import { convertToAlphaColor, isAlphaColor } from '@/views/chart/components/js/util' const { t } = useI18n() @@ -56,6 +57,19 @@ const init = () => { const tableCell = props.chart?.customAttr?.tableCell if (tableCell) { state.tableCellForm = defaultsDeep(cloneDeep(tableCell), cloneDeep(DEFAULT_TABLE_CELL)) + const alpha = props.chart.customAttr.basicStyle.alpha + if (!isAlphaColor(state.tableCellForm.tableItemBgColor)) { + state.tableCellForm.tableItemBgColor = convertToAlphaColor( + state.tableCellForm.tableItemBgColor, + alpha + ) + } + if (!isAlphaColor(state.tableCellForm.tableItemSubBgColor)) { + state.tableCellForm.tableItemSubBgColor = convertToAlphaColor( + state.tableCellForm.tableItemSubBgColor, + alpha + ) + } } } const showProperty = prop => props.propertyInner?.includes(prop) @@ -79,6 +93,7 @@ onMounted(() => { :trigger-width="108" v-model="state.tableCellForm.tableItemBgColor" :predefine="predefineColors" + show-alpha @change="changeTableCell('tableItemBgColor')" /> @@ -107,6 +122,7 @@ onMounted(() => { :predefine="predefineColors" :disabled="!state.tableCellForm.enableTableCrossBG" is-custom + show-alpha @change="changeTableCell('tableItemSubBgColor')" /> 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 e2b522a3a3..a0a947f6c8 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 @@ -4,6 +4,7 @@ import { useI18n } from '@/hooks/web/useI18n' import { COLOR_PANEL, DEFAULT_TABLE_HEADER } from '@/views/chart/components/editor/util/chart' import { ElSpace } from 'element-plus-secondary' import { cloneDeep, defaultsDeep } from 'lodash-es' +import { convertToAlphaColor, isAlphaColor } from '@/views/chart/components/js/util' const { t } = useI18n() @@ -56,6 +57,13 @@ const init = () => { const tableHeader = props.chart?.customAttr?.tableHeader if (tableHeader) { state.tableHeaderForm = defaultsDeep(cloneDeep(tableHeader), cloneDeep(DEFAULT_TABLE_HEADER)) + if (!isAlphaColor(state.tableHeaderForm.tableHeaderBgColor)) { + const alpha = props.chart.customAttr.basicStyle.alpha + state.tableHeaderForm.tableHeaderBgColor = convertToAlphaColor( + state.tableHeaderForm.tableHeaderBgColor, + alpha + ) + } } } const showProperty = prop => props.propertyInner?.includes(prop) @@ -84,6 +92,7 @@ onMounted(() => { is-custom :trigger-width="108" :predefine="predefineColors" + show-alpha @change="changeTableHeader('tableHeaderBgColor')" /> 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 0ce479a366..c744318633 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 @@ -1,6 +1,6 @@ import { EXTRA_FIELD, PivotSheet, S2Event, S2Options, TOTAL_VALUE, S2Theme, Totals } from '@antv/s2' import { formatterItem, valueFormatter } from '../../../formatter' -import { hexColorToRGBA, parseJson } from '../../../util' +import { hexColorToRGBA, isAlphaColor, parseJson } from '../../../util' import { S2ChartView, S2DrawOptions } from '../../types/impl/s2' import { TABLE_EDITOR_PROPERTY_INNER } from './common' import { useI18n } from '@/hooks/web/useI18n' @@ -284,7 +284,10 @@ export class TablePivot extends S2ChartView { protected configTheme(chart: Chart): S2Theme { const theme = super.configTheme(chart) const { basicStyle, tableHeader } = parseJson(chart.customAttr) - const tableHeaderBgColor = hexColorToRGBA(tableHeader.tableHeaderBgColor, basicStyle.alpha) + let tableHeaderBgColor = tableHeader.tableHeaderBgColor + if (!isAlphaColor(tableHeaderBgColor)) { + tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha) + } const tableBorderColor = hexColorToRGBA(basicStyle.tableBorderColor, basicStyle.alpha) const tableHeaderFontColor = hexColorToRGBA(tableHeader.tableHeaderFontColor, basicStyle.alpha) const pivotTheme = { 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 6e48c50c4c..fee05b058b 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 @@ -1,4 +1,4 @@ -import { copyString, hexColorToRGBA, parseJson, resetRgbOpacity } from '../..//util' +import { copyString, hexColorToRGBA, isAlphaColor, parseJson, resetRgbOpacity } from '../..//util' import { DEFAULT_BASIC_STYLE, DEFAULT_TABLE_CELL, @@ -192,7 +192,10 @@ export function getCustomTheme(chart: Chart): S2Theme { tableHeader.tableHeaderFontColor, basicStyle.alpha ) - const tableHeaderBgColor = hexColorToRGBA(tableHeader.tableHeaderBgColor, basicStyle.alpha) + let tableHeaderBgColor = tableHeader.tableHeaderBgColor + if (!isAlphaColor(tableHeaderBgColor)) { + tableHeaderBgColor = hexColorToRGBA(tableHeaderBgColor, basicStyle.alpha) + } const { tableHeaderAlign, tableTitleFontSize } = tableHeader const tmpTheme: S2Theme = { cornerCell: { @@ -241,8 +244,14 @@ export function getCustomTheme(chart: Chart): S2Theme { // cell if (tableCell) { const tableFontColor = hexColorToRGBA(tableCell.tableFontColor, basicStyle.alpha) - const tableItemBgColor = hexColorToRGBA(tableCell.tableItemBgColor, basicStyle.alpha) - const tableItemSubBgColor = hexColorToRGBA(tableCell.tableItemSubBgColor, basicStyle.alpha) + let tableItemBgColor = tableCell.tableItemBgColor + if (!isAlphaColor(tableItemBgColor)) { + tableItemBgColor = hexColorToRGBA(tableItemBgColor, basicStyle.alpha) + } + let tableItemSubBgColor = tableCell.tableItemSubBgColor + if (!isAlphaColor(tableItemSubBgColor)) { + tableItemSubBgColor = hexColorToRGBA(tableItemSubBgColor, basicStyle.alpha) + } const { tableItemAlign, tableItemFontSize, enableTableCrossBG } = tableCell const tmpTheme: S2Theme = { rowCell: { diff --git a/core/core-frontend/src/views/chart/components/js/util.ts b/core/core-frontend/src/views/chart/components/js/util.ts index 82ebe3ef5c..3be44aa8b5 100644 --- a/core/core-frontend/src/views/chart/components/js/util.ts +++ b/core/core-frontend/src/views/chart/components/js/util.ts @@ -1350,3 +1350,41 @@ export const sliderHandleExtremumPoint = (ev, chart, options) => { } configExtremum(chart) } + +export function isAlphaColor(color: string): boolean { + if (!color?.trim()) { + return false + } + if (color.startsWith('#')) { + return color.length === 9 + } + if (color.startsWith('rgb')) { + return color.split(',').length === 4 + } + return false +} + +export function convertToAlphaColor(color: string, alpha: number): string { + if (!color?.trim()) { + return 'rgba(255,255,255,1)' + } + if (color.startsWith('#')) { + let colorStr = color.trim().substring(1) + if (colorStr.length === 3) { + const tmp = colorStr.split('') + colorStr = `${tmp[0]}${tmp[0]}${tmp[1]}${tmp[1]}${tmp[2]}${tmp[2]}` + } + if (colorStr.length !== 6) { + return '#FFFFFFFF' + } + const alphaHex = parseInt((alpha * 2.55).toFixed(0)) + .toString(16) + .toUpperCase() + return `#${colorStr}${alphaHex}` + } + if (color.startsWith('rgb')) { + const rgb = color.match(/\d+/g) + return `rgba(${rgb.join(',')},${alpha / 100})` + } + return 'rgba(255,255,255,1)' +}