feat(图表): 明细表支持合并单元格 #8830

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: '僅編輯時生效',

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: '仅编辑时生效',

core/core-frontend/src/models/chart/chart-attr.d.ts

@@ -459,6 +459,10 @@ declare interface ChartTableCellAttr {
    * 冻结行
    */
   tableRowFreezeHead: number
+  /**
+   * 合并单元格
+   */
+  mergeCells: boolean
 }
 
 /**

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(() => {
         </el-form-item>
       </el-col>
     </el-row>
+    <el-form-item
+      class="form-item"
+      :class="'form-item-' + themes"
+      v-if="showProperty('mergeCells')"
+    >
+      <el-checkbox
+        size="small"
+        :effect="themes"
+        v-model="state.tableCellForm.mergeCells"
+        @change="changeTableCell('mergeCells')"
+      >
+        {{ t('chart.merge_cells') }}
+      </el-checkbox>
+    </el-form-item>
     <el-form-item
       class="form-item"
       :class="'form-item-' + themes"

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

@@ -432,7 +432,8 @@ export const DEFAULT_TABLE_CELL: ChartTableCellAttr = {
   isBolder: false,
   tableFreeze: false,
   tableColumnFreezeHead: 0,
-  tableRowFreezeHead: 0
+  tableRowFreezeHead: 0,
+  mergeCells: true
 }
 export const DEFAULT_TITLE_STYLE: ChartTextStyle = {
   show: true,

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

@@ -66,7 +66,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
       ...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<TableSheet> {
     }
     // 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<TableSheet> {
     // theme
     const customTheme = this.configTheme(chart)
     newChart.setThemeCfg({ theme: customTheme })
-
     return newChart
   }
 

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
+  }
+}

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<P extends SpreadSheet> 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()