fix: Heatmap sorting (#31752)

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/buildQuery.ts

@@ -18,6 +18,7 @@
  */
 import {
   QueryFormColumn,
+  QueryFormData,
   QueryFormOrderBy,
   buildQueryContext,
   ensureIsArray,
@@ -26,9 +27,8 @@ import {
   getXAxisColumn,
 } from '@superset-ui/core';
 import { rankOperator } from '@superset-ui/chart-controls';
-import { HeatmapFormData } from './types';
 
-export default function buildQuery(formData: HeatmapFormData) {
+export default function buildQuery(formData: QueryFormData) {
   const { groupby, normalize_across, sort_x_axis, sort_y_axis, x_axis } =
     formData;
   const metric = getMetricLabel(formData.metric);
@@ -36,16 +36,19 @@ export default function buildQuery(formData: HeatmapFormData) {
     ...ensureIsArray(getXAxisColumn(formData)),
     ...ensureIsArray(groupby),
   ];
-  const orderby: QueryFormOrderBy[] = [
-    [
+  const orderby: QueryFormOrderBy[] = [];
+  if (sort_x_axis) {
+    orderby.push([
       sort_x_axis.includes('value') ? metric : columns[0],
       sort_x_axis.includes('asc'),
-    ],
-    [
+    ]);
+  }
+  if (sort_y_axis) {
+    orderby.push([
       sort_y_axis.includes('value') ? metric : columns[1],
       sort_y_axis.includes('asc'),
-    ],
-  ];
+    ]);
+  }
   const group_by =
     normalize_across === 'x'
       ? getColumnLabel(x_axis)

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/controlPanel.tsx

@@ -50,8 +50,7 @@ const config: ControlPanelConfig = {
               label: t('Sort X Axis'),
               choices: sortAxisChoices,
               renderTrigger: false,
-              clearable: false,
-              default: 'alpha_asc',
+              clearable: true,
             },
           },
         ],
@@ -63,8 +62,7 @@ const config: ControlPanelConfig = {
               label: t('Sort Y Axis'),
               choices: sortAxisChoices,
               renderTrigger: false,
-              clearable: false,
-              default: 'alpha_asc',
+              clearable: true,
             },
           },
         ],

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts

@@ -156,8 +156,10 @@ export default function transformProps(
       ),
       label: {
         show: showValues,
-        formatter: (params: CallbackDataParams) =>
-          valueFormatter(params.value?.[2]),
+        formatter: (params: CallbackDataParams) => {
+          const paramsValue = params.value as (string | number)[];
+          return valueFormatter(paramsValue?.[2] as number | null | undefined);
+        },
       },
     },
   ];
@@ -178,9 +180,10 @@ export default function transformProps(
           yAxisLabel,
           metricLabel,
         );
-        const x = params.value?.[0];
-        const y = params.value?.[1];
-        const value = params.value?.[2];
+        const paramsValue = params.value as (string | number)[];
+        const x = paramsValue?.[0];
+        const y = paramsValue?.[1];
+        const value = paramsValue?.[2] as number | null | undefined;
         const formattedX = xAxisFormatter(x);
         const formattedY = yAxisFormatter(y);
         const formattedValue = valueFormatter(value);

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/types.ts

@@ -36,8 +36,8 @@ export interface HeatmapFormData extends QueryFormData {
   showLegend?: boolean;
   showPercentage?: boolean;
   showValues?: boolean;
-  sortXAxis: string;
-  sortYAxis: string;
+  sortXAxis?: string;
+  sortYAxis?: string;
   timeFormat?: string;
   xAxis: QueryFormColumn;
   xscaleInterval: number;