Merge pull request #11734 from dataease/pr@dev-v2@chart-t-heatmap-sort

fix(图表-热力图): 修复横纵轴排序相互影响的问题

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

@@ -173,6 +173,15 @@ const showCustomSort = item => {
   }
   return !item.chartId && (item.deType === 0 || item.deType === 5)
 }
+const showSort = () => {
+  const isExtColor = props.type === 'extColor'
+  const isChartMix = props.chart.type.includes('chart-mix')
+  const isDimensionOrDimensionStack = props.type === 'dimension' || props.type === 'dimensionStack'
+  if (isExtColor) {
+    return false
+  }
+  return !isChartMix || isDimensionOrDimensionStack
+}
 onMounted(() => {
   getItemTagType()
 })
@@ -186,7 +195,7 @@ onMounted(() => {
         :class="['editor-' + props.themes, `${themes}_icon-right`]"
         :style="{ backgroundColor: tagType + '0a', border: '1px solid ' + tagType }"
       >
-        <span style="display: flex; color: #646a73">
+        <span v-if="type !== 'extColor'" style="display: flex; color: #646a73">
           <el-icon v-if="'asc' === item.sort">
             <Icon name="icon_sort-a-to-z_outlined" />
           </el-icon>
@@ -203,6 +212,14 @@ onMounted(() => {
             />
           </el-icon>
         </span>
+        <span v-if="type === 'extColor'" style="display: flex; color: #646a73">
+          <el-icon>
+            <Icon
+              :className="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
+              :name="`field_${fieldType[item.deType]}`"
+            />
+          </el-icon>
+        </span>
         <el-tooltip
           :effect="toolTip"
           placement="top"
@@ -231,14 +248,7 @@ onMounted(() => {
           class="drop-style"
           :class="themes === 'dark' ? 'dark-dimension-quota' : ''"
         >
-          <el-dropdown-item
-            @click.prevent
-            v-if="
-              !chart.type.includes('chart-mix') ||
-              (chart.type.includes('chart-mix') &&
-                (type === 'dimension' || type === 'dimensionStack'))
-            "
-          >
+          <el-dropdown-item @click.prevent v-if="showSort()">
             <el-dropdown
               :effect="themes"
               popper-class="data-dropdown_popper_mr9"

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

@@ -1120,11 +1120,6 @@ const onChangeFlowMapPointForm = val => {
   renderChart(view.value)
 }
 
-const onChangExtColorForm = val => {
-  view.value.extColor = val
-  renderChart(view.value)
-}
-
 const showRename = val => {
   recordSnapshotInfo('render')
   state.itemForm = JSON.parse(JSON.stringify(val))

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

@@ -80,6 +80,26 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
     }
     return defaultLength
   }
+  protected sortData = (fieldObj, data) => {
+    const { deType, sort, customSort } = fieldObj
+
+    if (sort === 'desc') {
+      if (deType === 0) {
+        return data.sort().reverse()
+      } else {
+        return data.sort((a, b) => b - a)
+      }
+    } else if (sort === 'asc') {
+      if (deType === 0) {
+        return data.sort()
+      } else {
+        return data.sort((a, b) => a - b)
+      }
+    }
+
+    // 如果没有指定排序方式，直接返回原始数据或 customSort
+    return customSort && customSort.length > 0 ? customSort : data
+  }
   async drawChart(drawOptions: G2PlotDrawOptions<Heatmap>): Promise<Heatmap> {
     const { chart, container, action } = drawOptions
     const xAxis = deepCopy(chart.xAxis)
@@ -100,6 +120,7 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
         }
       })
     })
+
     // options
     const initOptions: HeatmapOptions = {
       data: data,
@@ -109,11 +130,12 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
       appendPadding: getPadding(chart),
       meta: {
         [xField]: {
-          type: 'cat'
+          type: 'cat',
+          values: this.sortData(xAxis[0], [...new Set(data.map(i => i[[xField]]))])
         },
         [xFieldExt]: {
           type: 'cat',
-          values: [...new Set(data.map(i => i[[xFieldExt]]))].reverse()
+          values: this.sortData(xAxisExt[0], [...new Set(data.map(i => i[[xFieldExt]]))]).reverse()
         }
       },
       legend: {
@@ -136,8 +158,7 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
       }
       const pointData = param.data.data
       const dimensionList = []
-      const quotaList = []
-      chart.data.fields.forEach((item, index) => {
+      chart.data.fields.forEach(item => {
         Object.keys(pointData).forEach(key => {
           if (key.startsWith('f_') && item.dataeaseName === key) {
             dimensionList.push({
@@ -146,13 +167,6 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
               value: pointData[key]
             })
           }
-          if (!key.startsWith('f_')) {
-            quotaList.push({
-              id: item.id,
-              dataeaseName: item.dataeaseName,
-              value: pointData[key]
-            })
-          }
         })
       })
       action({
@@ -183,7 +197,7 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
 
   protected configBasicStyle(chart: Chart, options: HeatmapOptions): HeatmapOptions {
     const basicStyle = parseJson(chart.customAttr).basicStyle
-    const color = basicStyle.colors?.map((ele, index) => {
+    const color = basicStyle.colors?.map(ele => {
       return hexColorToRGBA(ele, basicStyle.alpha)
     })
     return {