Merge pull request #3791 from dataease/pr@dev@feat_pivot_total

feat(视图): 透视表支持按合计排序

frontend/src/lang/en.js

@@ -1441,7 +1441,12 @@ export default {
     proportion: 'Proportion',
     label_content: 'Label Content',
     percent: 'Percent',
-    table_index_desc: 'Index Header Name'
+    table_index_desc: 'Index Header Name',
+    total_sort: 'Total Sort',
+    total_sort_none: 'None',
+    total_sort_asc: 'ASC',
+    total_sort_desc: 'DESC',
+    total_sort_field: 'Sort Field'
   },
   dataset: {
     spend_time: 'Spend',

frontend/src/lang/tw.js

@@ -1441,7 +1441,12 @@ export default {
     proportion: '佔比',
     label_content: '標籤展示',
     percent: '占比',
-    table_index_desc: '表頭名稱'
+    table_index_desc: '表頭名稱',
+    total_sort: '總計排序',
+    total_sort_none: '無',
+    total_sort_asc: '升序',
+    total_sort_desc: '降序',
+    total_sort_field: '排序字段'
   },
   dataset: {
     spend_time: '耗時',

frontend/src/lang/zh.js

@@ -1440,7 +1440,12 @@ export default {
     proportion: '占比',
     label_content: '标签展示',
     percent: '占比',
-    table_index_desc: '表头名称'
+    table_index_desc: '表头名称',
+    total_sort: '总计排序',
+    total_sort_none: '无',
+    total_sort_asc: '升序',
+    total_sort_desc: '降序',
+    total_sort_field: '排序字段'
   },
   dataset: {
     spend_time: '耗时',

frontend/src/views/chart/chart/chart.js

@@ -172,7 +172,9 @@ export const DEFAULT_TOTAL = {
     },
     calcSubTotals: {
       aggregation: 'SUM'
-    }
+    },
+    totalSort: 'none', // asc,desc
+    totalSortField: ''
   },
   col: {
     showGrandTotals: true,
@@ -187,7 +189,9 @@ export const DEFAULT_TOTAL = {
     },
     calcSubTotals: {
       aggregation: 'SUM'
-    }
+    },
+    totalSort: 'none', // asc,desc
+    totalSortField: ''
   }
 }
 export const DEFAULT_TITLE_STYLE = {

frontend/src/views/chart/chart/table/table-info.js

@@ -1,4 +1,4 @@
-import { TableSheet, S2Event, PivotSheet, DataCell } from '@antv/s2'
+import { TableSheet, S2Event, PivotSheet, DataCell, EXTRA_FIELD, TOTAL_VALUE } from '@antv/s2'
 import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
 import { DEFAULT_COLOR_CASE, DEFAULT_TOTAL } from '@/views/chart/chart/chart'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
@@ -403,17 +403,6 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
     })
   }
 
-  // data config
-  const s2DataConfig = {
-    fields: {
-      rows: r,
-      columns: c,
-      values: v
-    },
-    meta: meta,
-    data: tableData
-  }
-
   // total config
   let totalCfg = {}
   const chartObj = JSON.parse(JSON.stringify(chart))
@@ -433,6 +422,43 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
   totalCfg.row.subTotalsDimensions = r
   totalCfg.col.subTotalsDimensions = c
 
+  // 解析合计、小计排序
+  const sortParams = []
+  if (totalCfg.row.totalSort && totalCfg.row.totalSort !== 'none' && c.length > 0) {
+    const sort = {
+      sortFieldId: c[0],
+      sortMethod: totalCfg.row.totalSort.toUpperCase(),
+      sortByMeasure: TOTAL_VALUE,
+      query: {
+        [EXTRA_FIELD]: totalCfg.row.totalSortField
+      }
+    }
+    sortParams.push(sort)
+  }
+  if (totalCfg.col.totalSort && totalCfg.col.totalSort !== 'none' && r.length > 0) {
+    const sort = {
+      sortFieldId: r[0],
+      sortMethod: totalCfg.col.totalSort.toUpperCase(),
+      sortByMeasure: TOTAL_VALUE,
+      query: {
+        [EXTRA_FIELD]: totalCfg.col.totalSortField
+      }
+    }
+    sortParams.push(sort)
+  }
+
+  // data config
+  const s2DataConfig = {
+    fields: {
+      rows: r,
+      columns: c,
+      values: v
+    },
+    meta: meta,
+    data: tableData,
+    sortParams: sortParams
+  }
+
   // options
   const s2Options = {
     width: containerDom.offsetWidth,

frontend/src/views/chart/components/shapeAttr/TotalCfg.vue

@@ -67,6 +67,40 @@
               />
             </el-select>
           </el-form-item>
+          <el-form-item
+            v-if="chart.type === 'table-pivot'"
+            :label="$t('chart.total_sort')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="totalForm.row.totalSort"
+              @change="changeTotalCfg('row')"
+            >
+              <el-radio label="none">{{ $t('chart.total_sort_none') }}</el-radio>
+              <el-radio label="asc">{{ $t('chart.total_sort_asc') }}</el-radio>
+              <el-radio label="desc">{{ $t('chart.total_sort_desc') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="chart.type === 'table-pivot' && totalForm.row.totalSort !== 'none'"
+            :label="$t('chart.total_sort_field')"
+            class="form-item"
+          >
+            <el-select
+              v-model="totalForm.row.totalSortField"
+              class="form-item-select"
+              :placeholder="$t('chart.total_sort_field')"
+              size="mini"
+              @change="changeTotalCfg('row')"
+            >
+              <el-option
+                v-for="option in totalSortFields"
+                :key="option.dataeaseName"
+                :label="option.name"
+                :value="option.dataeaseName"
+              />
+            </el-select>
+          </el-form-item>
         </div>
 
         <el-form-item
@@ -190,6 +224,40 @@
               />
             </el-select>
           </el-form-item>
+          <el-form-item
+            v-if="chart.type === 'table-pivot'"
+            :label="$t('chart.total_sort')"
+            class="form-item"
+          >
+            <el-radio-group
+              v-model="totalForm.col.totalSort"
+              @change="changeTotalCfg('col')"
+            >
+              <el-radio label="none">{{ $t('chart.total_sort_none') }}</el-radio>
+              <el-radio label="asc">{{ $t('chart.total_sort_asc') }}</el-radio>
+              <el-radio label="desc">{{ $t('chart.total_sort_desc') }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="chart.type === 'table-pivot' && totalForm.col.totalSort !== 'none'"
+            :label="$t('chart.total_sort_field')"
+            class="form-item"
+          >
+            <el-select
+              v-model="totalForm.col.totalSortField"
+              class="form-item-select"
+              :placeholder="$t('chart.total_sort_field')"
+              size="mini"
+              @change="changeTotalCfg('col')"
+            >
+              <el-option
+                v-for="option in totalSortFields"
+                :key="option.dataeaseName"
+                :label="option.name"
+                :value="option.dataeaseName"
+              />
+            </el-select>
+          </el-form-item>
         </div>
 
         <el-form-item
@@ -283,7 +351,8 @@ export default {
         { name: this.$t('chart.avg'), value: 'AVG' },
         { name: this.$t('chart.max'), value: 'MAX' },
         { name: this.$t('chart.min'), value: 'MIN' }
-      ]
+      ],
+      totalSortFields: []
     }
   },
   computed: {
@@ -339,6 +408,27 @@ export default {
         } else {
           this.totalForm = JSON.parse(JSON.stringify(DEFAULT_TOTAL))
         }
+
+        this.totalForm.row.totalSort = this.totalForm.row.totalSort ? this.totalForm.row.totalSort : DEFAULT_TOTAL.row.totalSort
+        this.totalForm.row.totalSortField = this.totalForm.row.totalSortField ? this.totalForm.row.totalSortField : DEFAULT_TOTAL.row.totalSortField
+        this.totalForm.col.totalSort = this.totalForm.col.totalSort ? this.totalForm.col.totalSort : DEFAULT_TOTAL.col.totalSort
+        this.totalForm.col.totalSortField = this.totalForm.col.totalSortField ? this.totalForm.col.totalSortField : DEFAULT_TOTAL.col.totalSortField
+      }
+      // 解析表格的指标
+      if (chart.yaxis) {
+        if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
+          this.totalSortFields = JSON.parse(JSON.stringify(chart.yaxis))
+        } else {
+          this.totalSortFields = JSON.parse(chart.yaxis)
+        }
+        if (this.totalSortFields.length > 0) {
+          if (this.totalForm.row.totalSortField === '') {
+            this.totalForm.row.totalSortField = this.totalSortFields[0].dataeaseName
+          }
+          if (this.totalForm.col.totalSortField === '') {
+            this.totalForm.col.totalSortField = this.totalSortFields[0].dataeaseName
+          }
+        }
       }
     },
     changeTotalCfg(modifyName) {