diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/buildQuery.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/buildQuery.ts index 2d1ee869eb9e6..858a8ddb3e665 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/buildQuery.ts +++ b/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) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/controlPanel.tsx index 16b825e8463bc..bc949acf99525 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/controlPanel.tsx +++ b/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, }, }, ], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts index d0b0b1dd7de2f..5a3cd75870094 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts +++ b/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); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/types.ts index 8ec98470329dd..11b1685e4de58 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/types.ts +++ b/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;