feat(图表): 透视表属性模式支持设置默认展开层级 #14460

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

@@ -1814,12 +1814,12 @@ export default {
     axis_tip:
       'Minimum value, maximum value, and interval are all numeric types; if not filled in, this item will be considered automatic. <br/>Please make sure that the filled value can be calculated correctly, otherwise the axis value will not be displayed normally. ',
     format_tip: `The template variables are {a}, {b}, {c}, {d}, which represent the series name, data name, data value, etc. <br>
-When the trigger position is 'coordinate axis', there will be multiple series of data. At this time, the index of the series can be represented by {a0}, {a1}, {a2} followed by an index. <br>
-The meanings of {a}, {b}, {c}, {d} in different chart types are different. The variables {a}, {b}, {c}, {d} represent the data meanings in different chart types: <br><br>
-Line (area) chart, column (bar) chart, dashboard: {a} (series name), {b} (category value), {c} (value) <br>
-Pie chart, funnel chart: {a} (series name), {b} (data item name), {c} (value), {d} (percentage) <br>
-Map: {a} (series name), {b} (area name), {c} (combined value), {d} (none) <br>
-Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value array), {d} (none)`,
+      When the trigger position is 'coordinate axis', there will be multiple series of data. At this time, the index of the series can be represented by {a0}, {a1}, {a2} followed by an index. <br>
+      The meanings of {a}, {b}, {c}, {d} in different chart types are different. The variables {a}, {b}, {c}, {d} represent the data meanings in different chart types: <br><br>
+      Line (area) chart, column (bar) chart, dashboard: {a} (series name), {b} (category value), {c} (value) <br>
+      Pie chart, funnel chart: {a} (series name), {b} (data item name), {c} (value), {d} (percentage) <br>
+      Map: {a} (series name), {b} (area name), {c} (combined value), {d} (none) <br>
+      Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value array), {d} (none)`,
     h_position: 'Horizontal position',
     v_position: 'Vertical position',
     p_left: 'Left alignment',
@@ -2035,7 +2035,10 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     pivot_export_invalid_field:
       'The row dimension or indicator dimension is empty and can not be exported !',
     pivot_export_invalid_col_exceed:
-      'Table can not be exported cause the number of columns exceeds the maximum limit!'
+      'Table can not be exported cause the number of columns exceeds the maximum limit!',
+    expand_all: 'Expand all',
+    level_label: 'Level {num}',
+    default_expand_level: 'Default expand level'
   },
   dataset: {
     field_value: 'Field Value',

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

@@ -1771,12 +1771,12 @@ export default {
     axis_tip:
       '最小值、最大值、間隔均為數值類型；若不填，則該項視為自動。 <br/>請確保填入數值能正確計算，否則將無法正常顯示軸值。 ',
     format_tip: `模板變數有{a}, {b}，{c}，{d}，分別表示系列名，資料名，資料值等。 <br>
-在觸發位置為'座標軸' 的時候，會有多個系列的數據，此時可以透過{a0}, {a1}, {a2} 這種後面加索引的方式表示系列的索引。 <br>
-不同圖表類型下的{a}，{b}，{c}，{d} 意義不一樣。 其中變數{a}, {b}, {c}, {d}在不同圖表類型下代表資料意義為：<br><br>
-折線（區域）圖、柱狀（長條）圖、儀錶板: {a}（系列名稱），{b}（類目值），{c}（數值）<br>
-圓餅圖、漏斗圖: {a}（系列名稱），{b}（資料項名稱），{c}（數值）, {d}（百分比）<br>
-地圖: {a}（系列名稱），{b}（區域名稱），{c}（合併數值）, {d}（無）<br>
-散佈圖（氣泡）圖: {a}（系列名稱），{b}（資料名稱），{c}（數值陣列）, {d}（無）`,
+      在觸發位置為'座標軸' 的時候，會有多個系列的數據，此時可以透過{a0}, {a1}, {a2} 這種後面加索引的方式表示系列的索引。 <br>
+      不同圖表類型下的{a}，{b}，{c}，{d} 意義不一樣。 其中變數{a}, {b}, {c}, {d}在不同圖表類型下代表資料意義為：<br><br>
+      折線（區域）圖、柱狀（長條）圖、儀錶板: {a}（系列名稱），{b}（類目值），{c}（數值）<br>
+      圓餅圖、漏斗圖: {a}（系列名稱），{b}（資料項名稱），{c}（數值）, {d}（百分比）<br>
+      地圖: {a}（系列名稱），{b}（區域名稱），{c}（合併數值）, {d}（無）<br>
+      散佈圖（氣泡）圖: {a}（系列名稱），{b}（資料名稱），{c}（數值陣列）, {d}（無）`,
     h_position: '水平位置',
     v_position: '垂直位置',
     p_left: '左對齊',
@@ -1979,7 +1979,10 @@ export default {
     accumulate: '累加',
     table_cross_bg_tip: '合併儲存格後，不支持斑馬紋',
     pivot_export_invalid_field: '行維度或指標維度為空不可導出！',
-    pivot_export_invalid_col_exceed: '表格列數超過最大限制不可導出!'
+    pivot_export_invalid_col_exceed: '表格列數超過最大限制不可導出!',
+    expand_all: '全展開',
+    level_label: '第{num}層級',
+    default_expand_level: '默認展開層級'
   },
   dataset: {
     field_value: '欄位值',

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

@@ -1985,7 +1985,10 @@ export default {
     accumulate: '累加',
     table_cross_bg_tip: '合并单元格后，不支持班马纹',
     pivot_export_invalid_field: '行维度或指标维度为空不可导出!',
-    pivot_export_invalid_col_exceed: '表格列数超过最大限制不可导出!'
+    pivot_export_invalid_col_exceed: '表格列数超过最大限制不可导出!',
+    expand_all: '全展开',
+    level_label: '第{num}层级',
+    default_expand_level: '默认展开层级'
   },
   dataset: {
     field_value: '字段值',

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

@@ -104,6 +104,10 @@ declare interface ChartBasicStyle {
    * 表格展示形式,平铺和树形
    */
   tableLayoutMode: 'grid' | 'tree'
+  /**
+   * 表格默认展开层级
+   */
+  defaultExpandLevel: number | 'all'
   /**
    * 仪表盘样式
    */

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

@@ -12,11 +12,14 @@ import { cloneDeep, debounce, defaultsDeep } from 'lodash-es'
 import { SERIES_NUMBER_FIELD } from '@antv/s2'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
-import { isNumber } from 'mathjs'
+import { isNumber } from 'lodash-es'
 import { ElFormItem, ElInputNumber, ElMessage } from 'element-plus-secondary'
 import { svgStrToUrl } from '../../../js/util'
+import { numberToChineseUnderHundred } from '../../../js/panel/common/common_antv'
+import { useLocaleStoreWithOut } from '@/store/modules/locale'
 
 const dvMainStore = dvMainStoreWithOut()
+const localeStore = useLocaleStoreWithOut()
 const { batchOptStatus, mobileInPc } = storeToRefs(dvMainStore)
 const { t } = useI18n()
 const props = defineProps({
@@ -33,6 +36,7 @@ const props = defineProps({
   }
 })
 const showProperty = prop => props.propertyInner?.includes(prop)
+const tableExpandLevelOptions = reactive([{ name: t('chart.expand_all'), value: 'all' }])
 const predefineColors = COLOR_PANEL
 const state = reactive({
   basicStyleForm: JSON.parse(JSON.stringify(DEFAULT_BASIC_STYLE)) as ChartBasicStyle,
@@ -106,6 +110,20 @@ const init = () => {
     state.customColor = state.basicStyleForm.colors[0]
     state.colorIndex = 0
   }
+  if (basicStyle.tableLayoutMode === 'tree') {
+    tableExpandLevelOptions.splice(1)
+    let maxLevel = props.chart.xAxis?.length
+    if (isNumber(basicStyle.defaultExpandLevel)) {
+      maxLevel = Math.max(maxLevel, basicStyle.defaultExpandLevel)
+    }
+    for (let i = 1; i <= maxLevel; i++) {
+      let name = t('chart.level_label', { num: i })
+      if (localeStore.getCurrentLocale.lang !== 'en') {
+        name = t('chart.level_label', { num: numberToChineseUnderHundred(i) })
+      }
+      tableExpandLevelOptions.push({ name, value: i })
+    }
+  }
   initTableColumnWidth()
 }
 const debouncedInit = debounce(init, 500)
@@ -307,6 +325,25 @@ onMounted(() => {
         <el-radio label="tree" :effect="themes">{{ t('chart.table_layout_tree') }}</el-radio>
       </el-radio-group>
     </el-form-item>
+    <el-form-item
+      class="form-item"
+      v-if="showProperty('tableLayoutMode') && state.basicStyleForm.tableLayoutMode === 'tree'"
+      :label="t('chart.default_expand_level')"
+      :class="'form-item-' + themes"
+    >
+      <el-select
+        :effect="themes"
+        v-model="state.basicStyleForm.defaultExpandLevel"
+        @change="changeBasicStyle('defaultExpandLevel')"
+      >
+        <el-option
+          v-for="item in tableExpandLevelOptions"
+          :key="item.value"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
 
     <div class="alpha-setting" v-if="showProperty('alpha')">
       <label class="alpha-label" :class="{ dark: 'dark' === themes }">

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

@@ -1651,6 +1651,7 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
   zoomButtonColor: '#aaa',
   zoomBackground: '#fff',
   tableLayoutMode: 'grid',
+  defaultExpandLevel: 1,
   calcTopN: false,
   topN: 5,
   topNLabel: t('datasource.other'),

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

@@ -292,7 +292,23 @@ export class TablePivot extends S2ChartView<PivotSheet> {
     }
     // options
     s2Options.style = this.configStyle(chart, s2DataConfig)
-    s2Options.style.hierarchyCollapse = true
+    // 默认展开层级
+    if (basicStyle.tableLayoutMode === 'tree') {
+      const { defaultExpandLevel } = basicStyle
+      if (isNumber(defaultExpandLevel)) {
+        if (defaultExpandLevel >= chart.xAxis.length) {
+          s2Options.style.rowExpandDepth = defaultExpandLevel
+        } else {
+          s2Options.style.rowExpandDepth = defaultExpandLevel - 2
+        }
+      }
+      if (defaultExpandLevel === 'all') {
+        s2Options.style.rowExpandDepth = chart.xAxis.length
+      }
+      if (!defaultExpandLevel) {
+        s2Options.style.hierarchyCollapse = true
+      }
+    }
     // tooltip
     this.configTooltip(chart, s2Options)
     // 开始渲染

core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts

@@ -1961,3 +1961,26 @@ export const configEmptyDataStyle = (newChart, newData, container) => {
     newChart.destroy()
   }
 }
+
+export const numberToChineseUnderHundred = (num: number): string => {
+  // 合法性检查
+  if (num <= 0 || num > 99 || !Number.isInteger(num)) {
+    throw new Error('请输入1-99之间的整数')
+  }
+
+  const digits = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+
+  // 处理个位数
+  if (num < 10) return digits[num]
+
+  const tens = Math.floor(num / 10)
+  const ones = num % 10
+
+  // 处理整十
+  if (ones === 0) {
+    return tens === 1 ? '十' : digits[tens] + '十'
+  }
+
+  // 处理其他两位数
+  return tens === 1 ? '十' + digits[ones] : digits[tens] + '十' + digits[ones]
+}