diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts index fd9c6408e9..5d65fde922 100644 --- a/core/core-frontend/src/locales/tw.ts +++ b/core/core-frontend/src/locales/tw.ts @@ -1880,7 +1880,8 @@ export default { zoom_level: '縮放等級', central_point: '中心點', full_display: '全量顯示', - show_hover_style: '顯示鼠標懸浮樣式' + show_hover_style: '顯示鼠標懸浮樣式', + merge_cells: '合並單元格' }, dataset: { scope_edit: '僅編輯時生效', diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index ce0dd3ce98..45b17740f1 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -1880,7 +1880,8 @@ export default { zoom_level: '缩放等级', central_point: '中心点', full_display: '全量显示', - show_hover_style: '显示鼠标悬浮样式' + show_hover_style: '显示鼠标悬浮样式', + merge_cells: '合并单元格' }, dataset: { scope_edit: '仅编辑时生效', 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 d26aaf1870..a98d728e4a 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -459,6 +459,10 @@ declare interface ChartTableCellAttr { * 冻结行 */ tableRowFreezeHead: number + /** + * 合并单元格 + */ + mergeCells: 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 5cbf1e6f64..27167f01de 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 @@ -65,6 +65,7 @@ const changeTableCell = prop => { const init = () => { const tableCell = props.chart?.customAttr?.tableCell if (tableCell) { + tableCell.mergeCells = tableCell.mergeCells === undefined ? false : tableCell.mergeCells state.tableCellForm = defaultsDeep(cloneDeep(tableCell), cloneDeep(DEFAULT_TABLE_CELL)) const alpha = props.chart.customAttr.basicStyle.alpha if (!isAlphaColor(state.tableCellForm.tableItemBgColor)) { @@ -364,6 +365,20 @@ onMounted(() => { + + + {{ t('chart.merge_cells') }} + + { ...TABLE_EDITOR_PROPERTY_INNER['table-cell-selector'], 'tableFreeze', 'tableColumnFreezeHead', - 'tableRowFreezeHead' + 'tableRowFreezeHead', + 'mergeCells' ] } axis: AxisType[] = ['xAxis', 'filter', 'drill'] @@ -197,6 +198,8 @@ export class TableInfo extends S2ChartView { } // tooltip this.configTooltip(chart, s2Options) + // 合并单元格 + this.configMergeCells(chart, s2Options) // 隐藏表头，保留顶部的分割线, 禁用表头横向 resize if (tableHeader.showTableHeader === false) { s2Options.style.colCfg.height = 1 @@ -312,7 +315,6 @@ export class TableInfo extends S2ChartView { // theme const customTheme = this.configTheme(chart) newChart.setThemeCfg({ theme: customTheme }) - return newChart } 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 7436169b47..7467873b81 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,3 +1,4 @@ +/* eslint-disable prettier/prettier */ import { copyString, hexColorToRGBA, @@ -36,7 +37,6 @@ import TableTooltip from '@/views/chart/components/editor/common/TableTooltip.vu import Exceljs from 'exceljs' import { saveAs } from 'file-saver' import { ElMessage } from 'element-plus-secondary' -import { matrix } from 'mathjs' export function getCustomTheme(chart: Chart): S2Theme { const headerColor = hexColorToRGBA( @@ -1408,3 +1408,59 @@ export async function exportPivotExcel(instance: PivotSheet, chart: ChartObj) { exportTreePivot(instance, chart) } } + +export function configMergeCells(chart: Chart, options: S2Options) { + const { mergeCells } = parseJson(chart.customAttr).tableCell + const { showIndex } = parseJson(chart.customAttr).tableHeader + if (mergeCells) { + const xAxis = chart.xAxis + const quotaIndex = xAxis.findIndex(axis => axis.groupType === 'q') + const data = chart.data?.tableRow + if (quotaIndex <= 0 || !data?.length) { + return + } + const mergedColInfo: number[][][] = [[[0, data.length - 1]]] + const mergedCellsInfo = [] + const axisToMerge = xAxis.filter((a, i) => a.hide !== true && i < quotaIndex) + axisToMerge.forEach((a, i) => { + const preMergedColInfo = mergedColInfo[i] + const curMergedColInfo = [] + mergedColInfo.push(curMergedColInfo) + preMergedColInfo.forEach(range => { + const [start, end] = range + let lastVal = data[start][a.dataeaseName] + let lastIndex = start + for (let index = start; index <= end; index++) { + const curVal = data[index][a.dataeaseName] + if (curVal !== lastVal || index === end) { + const curRange = index - lastIndex + if (curRange > 1 || + (index === end && curRange === 1 && lastVal === curVal)) { + const tmpMergeCells = [] + const textIndex = curRange % 2 === 1 ? (curRange - 1) / 2 : curRange / 2 - 1 + for (let j = 0; j < curRange; j++) { + tmpMergeCells.push({ + colIndex: showIndex ? i + 1 : i, + rowIndex: lastIndex + j, + showText: j === textIndex + }) + } + if (index === end) { + tmpMergeCells.push({ + colIndex: showIndex ? i + 1 : i, + rowIndex: index, + showText: false + }) + } + mergedCellsInfo.push(tmpMergeCells) + curMergedColInfo.push([lastIndex, index === end ? index : index - 1]) + } + lastVal = curVal + lastIndex = index + } + } + }) + }) + options.mergedCellsInfo = mergedCellsInfo + } +} diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts index 8f2ea866fb..4a4d0bd930 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts @@ -15,6 +15,7 @@ import { } from '@antv/s2' import { configHeaderInteraction, + configMergeCells, configTooltip, getConditions, getCustomTheme, @@ -63,6 +64,10 @@ export abstract class S2ChartView

extends AntVAbstractCha return getConditions(chart) } + protected configMergeCells(chart: Chart, option: S2Options) { + configMergeCells(chart, option) + } + protected showTooltip(s2Instance: P, event, metaConfig: Meta[]) { const cell = s2Instance.getCell(event.target) const meta = cell.getMeta()