feat(图表)：透视表支持设置行头宽度 #16764

core/core-frontend/src/locales/en.ts

@@ -1727,6 +1727,10 @@ export default {
     table_column_fixed: 'Fixed column width',
     table_column_custom: 'Custom',
     table_column_col_adapt: 'Column adaptive',
+    table_row_header_width: 'Table Row Header Width',
+    table_row_header_adapt: 'Adaptive',
+    table_row_header_fixed: 'Fixed',
+    table_row_header_percent: 'Percent',
     chart_table_pivot: 'Pivot table',
     chart_table_heatmap: 'Heat map',
     table_pivot_row: 'Data row',

core/core-frontend/src/locales/tw.ts

@@ -1686,6 +1686,10 @@ export default {
     table_column_fixed: '固定列寬',
     table_column_custom: '自訂',
     table_column_col_adapt: '列自適應',
+    table_row_header_width: '行頭寬度',
+    table_row_header_adapt: '自適應',
+    table_row_header_fixed: '固定寬度',
+    table_row_header_percent: '百分比',
     chart_table_pivot: '透視表',
     chart_table_heatmap: '熱力圖',
     table_pivot_row: '資料行',

core/core-frontend/src/locales/zh-CN.ts

@@ -1691,6 +1691,10 @@ export default {
     table_column_fixed: '固定列宽',
     table_column_custom: '自定义',
     table_column_col_adapt: '列自适应',
+    table_row_header_width: '行头宽度',
+    table_row_header_adapt: '自适应',
+    table_row_header_fixed: '固定宽度',
+    table_row_header_percent: '百分比',
     chart_table_pivot: '透视表',
     chart_table_heatmap: '热力图',
     table_pivot_row: '数据行',

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

@@ -381,6 +381,14 @@ declare interface ChartBasicStyle {
    * 圆形填充图间距
    */
   circlePadding: number
+  /**
+   * 透视表行头模式
+   */
+  tableRowHeaderMode: 'adapt' | 'fixed' | 'percent'
+  /**
+   * 透视表行头宽度
+   */
+  tableRowHeaderWidth: number
 }
 /**
  * 表头属性

core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue

@@ -145,6 +145,16 @@ const init = () => {
       }
       tableExpandLevelOptions.push({ name, value: i })
     }
+    if (basicStyle.tableRowHeaderMode === 'percent') {
+      if (basicStyle.tableRowHeaderWidth > 50) {
+        state.basicStyleForm.tableRowHeaderWidth = 20
+      }
+    }
+    if (basicStyle.tableRowHeaderMode === 'fixed') {
+      if (basicStyle.tableRowHeaderWidth < 10) {
+        state.basicStyleForm.tableRowHeaderWidth = 120
+      }
+    }
   }
   const lastPageInfo = dvMainStore.getViewPageInfo(props.chart.id)
   if (lastPageInfo) {
@@ -986,6 +996,46 @@ onMounted(async () => {
         <template #append>%</template>
       </el-input>
     </el-form-item>
+    <el-form-item
+      :label="t('chart.table_row_header_width')"
+      class="form-item"
+      :class="'form-item-' + themes"
+      v-if="showProperty('tableRowHeaderMode') && state.basicStyleForm.tableLayoutMode === 'tree'"
+    >
+      <el-radio-group
+        v-model="state.basicStyleForm.tableRowHeaderMode"
+        @change="changeBasicStyle('tableRowHeaderMode')"
+        class="table-column-mode"
+      >
+        <el-radio value="adapt" :effect="themes">
+          {{ t('chart.table_row_header_adapt') }}
+        </el-radio>
+        <el-radio value="fixed" :effect="themes">
+          {{ t('chart.table_row_header_fixed') }}
+        </el-radio>
+        <el-radio label="percent" :effect="themes">
+          {{ t('chart.table_row_header_percent') }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-if="
+        showProperty('tableRowHeaderMode') &&
+        state.basicStyleForm.tableLayoutMode === 'tree' &&
+        state.basicStyleForm.tableRowHeaderMode !== 'adapt'
+      "
+      class="form-item form-item-slider"
+      :class="'form-item-' + themes"
+    >
+      <el-input-number
+        :effect="themes"
+        v-model.number="state.basicStyleForm.tableRowHeaderWidth"
+        :min="state.basicStyleForm.tableRowHeaderMode === 'percent' ? 1 : 10"
+        :max="state.basicStyleForm.tableRowHeaderMode === 'percent' ? 50 : 100000"
+        controls-position="right"
+        @change="changeBasicStyle('tableRowHeaderWidth')"
+      />
+    </el-form-item>
     <el-form-item v-if="showProperty('autoWrap')" class="form-item" :class="'form-item-' + themes">
       <el-checkbox
         size="small"

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

@@ -1731,7 +1731,9 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   circleBorderWidth: 0,
   circlePadding: 0,
   quotaPosition: 'col',
-  quotaColLabel: t('dataset.value')
+  quotaColLabel: t('dataset.value'),
+  tableRowHeaderMode: 'adapt',
+  tableRowHeaderWidth: 10
 }
 
 export const BASE_VIEW_CONFIG = {

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

@@ -104,7 +104,8 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       'tableLayoutMode',
       'showHoverStyle',
       'quotaPosition',
-      'quotaColLabel'
+      'quotaColLabel',
+      'tableRowHeaderMode'
     ]
   }
   axis: AxisType[] = ['xAxis', 'xAxisExt', 'yAxis', 'filter']
@@ -265,9 +266,9 @@ export class TablePivot extends S2ChartView<PivotSheet> {
     }
     // options
     s2Options.style = this.configStyle(chart, s2DataConfig)
-    // 默认展开层级
     if (basicStyle.tableLayoutMode === 'tree') {
-      const { defaultExpandLevel } = basicStyle
+      const { defaultExpandLevel, tableRowHeaderMode, tableRowHeaderWidth } = basicStyle
+      // 默认展开层级
       if (isNumeric(defaultExpandLevel)) {
         if ((defaultExpandLevel as number) >= chart.xAxis.length) {
           s2Options.style.rowExpandDepth = defaultExpandLevel as number
@@ -281,6 +282,23 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       if (!defaultExpandLevel) {
         s2Options.style.hierarchyCollapse = true
       }
+
+      // 行头宽度
+      if (tableRowHeaderMode === 'fixed') {
+        let treeRowsWidth = tableRowHeaderWidth
+        if (treeRowsWidth < 10) {
+          treeRowsWidth = 120
+        }
+        s2Options.style.treeRowsWidth = treeRowsWidth
+      }
+      if (tableRowHeaderMode === 'percent') {
+        let treeRowsWidth = tableRowHeaderWidth
+        if (treeRowsWidth > 50) {
+          treeRowsWidth = 20
+        }
+        const width = containerDom.offsetWidth * (treeRowsWidth / 100)
+        s2Options.style.treeRowsWidth = width
+      }
     }
     // 列汇总别名
     if (!(basicStyle.quotaPosition === 'row' && basicStyle.tableLayoutMode === 'tree')) {