feat(图表): 分组柱状图支持组内排序 #14154 (#15498)

core/core-backend/src/main/java/io/dataease/chart/manage/ChartViewManege.java

@@ -408,7 +408,7 @@ public class ChartViewManege {
         record.setFlowMapStartName(objectMapper.writeValueAsString(dto.getFlowMapStartName()));
         record.setFlowMapEndName(objectMapper.writeValueAsString(dto.getFlowMapEndName()));
         record.setExtColor(objectMapper.writeValueAsString(dto.getExtColor()));
-
+        record.setSortPriority(objectMapper.writeValueAsString(dto.getSortPriority()));
         return record;
     }
 

core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue

@@ -399,14 +399,14 @@ onMounted(() => {
               </template>
             </el-dropdown>
           </el-dropdown-item>
-          <!-- <el-dropdown-item
+          <el-dropdown-item
             v-if="showSort()"
             :command="beforeClickItem('sortPriority')"
             class="menu-item-padding"
           >
             <el-icon />
             <span>{{ t('chart.sort_priority') }}</span>
-          </el-dropdown-item> -->
+          </el-dropdown-item>
           <el-dropdown-item
             @click.prevent
             v-if="item.deType === 1"

core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue

@@ -790,14 +790,14 @@ onMounted(() => {
             </el-dropdown>
           </el-dropdown-item>
 
-          <!-- <el-dropdown-item
+          <el-dropdown-item
             v-if="showSort"
             class="menu-item-padding"
             :command="beforeClickItem('sortPriority')"
           >
             <el-icon />
             <span>{{ t('chart.sort_priority') }}</span>
-          </el-dropdown-item> -->
+          </el-dropdown-item>
 
           <el-dropdown-item
             class="menu-item-padding"

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -1590,6 +1590,7 @@ const closeSortPriority = () => {
 }
 const saveSortPriority = () => {
   view.value.sortPriority = state.sortPriority as ChartViewField[]
+  recordSnapshotInfo('render')
   closeSortPriority()
 }
 const onPriorityChange = val => {

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

@@ -441,6 +441,77 @@ export class GroupBar extends StackBar {
     }
   }
 
+  async drawChart(drawOptions: G2PlotDrawOptions<Column>): Promise<Column> {
+    const plot = await super.drawChart(drawOptions)
+    if (!plot) {
+      return plot
+    }
+    const { chart } = drawOptions
+    const { xAxis, xAxisExt, yAxis } = chart
+    let innerSort = true
+    if (!(xAxis.length && xAxisExt.length && yAxis.length)) {
+      innerSort = false
+    }
+    if (yAxis[0].sort === 'none') {
+      innerSort = false
+    }
+    if (xAxisExt[0].sort !== 'none') {
+      const sortPriority = chart.sortPriority ?? []
+      const yAxisIndex = sortPriority?.findIndex(e => e.id === yAxis[0].id)
+      const xAxisExtIndex = sortPriority?.findIndex(e => e.id === xAxisExt[0].id)
+      if (xAxisExtIndex <= yAxisIndex) {
+        innerSort = false
+      }
+    }
+    if (!innerSort) {
+      return plot
+    }
+    plot.chart.once('beforepaint', () => {
+      const geo = plot.chart.geometries[0]
+      const originMapping = geo.beforeMapping.bind(geo)
+      geo.beforeMapping = originData => {
+        const values = geo.getXScale().values
+        const valueMap = values.reduce((p, n) => {
+          if (!p?.[n]) {
+            p[n] = {
+              fieldArr: [],
+              indexArr: [],
+              dataArr: []
+            }
+          }
+          originData.forEach((arr, arrIndex) => {
+            arr.forEach((item, index) => {
+              if (item._origin.field === n) {
+                p[n].fieldArr.push(item.field)
+                p[n].indexArr.push([arrIndex, index])
+                p[n].dataArr.push(item)
+              }
+            })
+          })
+          return p
+        }, {})
+        values.forEach(v => {
+          const item = valueMap[v]
+          item.dataArr.sort((a, b) => {
+            if (yAxis[0].sort === 'asc') {
+              return a.value - b.value
+            }
+            if (yAxis[0].sort === 'desc') {
+              return b.value - a.value
+            }
+            return 0
+          })
+          item.indexArr.forEach((index, i) => {
+            item.dataArr[i].field = item.fieldArr[i]
+            originData[index[0]][index[1]] = item.dataArr[i]
+          })
+        })
+        return originMapping(originData)
+      }
+    })
+    return plot
+  }
+
   protected configLabel(chart: Chart, options: ColumnOptions): ColumnOptions {
     const tmpLabel = getLabel(chart)
     if (!tmpLabel) {