feat: add legendSort in legendSection

Author: SBIN2010

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

@@ -128,6 +128,7 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
     legendOrientation,
     legendMargin,
     legendType,
+    legendSort,
     sliceId,
   }: EchartsBubbleFormData = { ...DEFAULT_FORM_DATA, ...formData };
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
@@ -230,7 +231,10 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),
-      data: Array.from(legends),
+      data: Array.from(legends).sort((a: string, b: string) => {
+        if (!legendSort) return 0;
+        return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
+      }),
     },
     tooltip: {
       show: !inContextMenu,

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

@@ -112,6 +112,7 @@ export default function transformProps(
     legendMargin,
     legendOrientation,
     legendType,
+    legendSort,
     metric = '',
     numberFormat,
     currencyFormat,
@@ -290,7 +291,10 @@ export default function transformProps(
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),
-      data: keys,
+      data: keys.sort((a: string, b: string) => {
+        if (!legendSort) return 0;
+        return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
+      }),
     },
     series,
   };

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

@@ -131,6 +131,7 @@ export default function transformProps(chartProps: EchartsGanttChartProps) {
     legendMargin,
     legendOrientation,
     legendType,
+    legendSort,
     showLegend,
     yAxisTitle,
     yAxisTitleMargin,
@@ -330,6 +331,18 @@ export default function transformProps(chartProps: EchartsGanttChartProps) {
     },
   );
 
+  const legendData = series
+    .map(entry => {
+      const { name } = entry;
+      if (name === null || name === undefined) return '';
+      return String(name);
+    })
+    .filter(name => name !== '')
+    .sort((a, b) => {
+      if (!legendSort) return 0;
+      return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
+    });
+
   const tooltipFormatterMap = {
     [GenericDataType.Numeric]: tooltipValuesFormatter,
     [GenericDataType.String]: undefined,
@@ -365,6 +378,7 @@ export default function transformProps(chartProps: EchartsGanttChartProps) {
         zoomable,
         legendState,
       ),
+      data: legendData,
     },
     grid: {
       ...defaultGrid,

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

@@ -188,6 +188,7 @@ export default function transformProps(
     legendMargin,
     legendOrientation,
     legendType,
+    legendSort,
     showLegend,
     baseEdgeWidth,
     baseNodeSize,
@@ -353,7 +354,10 @@ export default function transformProps(
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),
-      data: categoryList,
+      data: categoryList.sort((a: string, b: string) => {
+        if (!legendSort) return 0;
+        return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
+      }),
     },
     series,
   };

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

@@ -158,6 +158,7 @@ export default function transformProps(
     contributionMode,
     legendOrientation,
     legendType,
+    legendSort,
     logAxis,
     logAxisSecondary,
     markerEnabled,
@@ -720,7 +721,11 @@ export default function transformProps(
             ForecastSeriesEnum.Observation,
         )
         .map(entry => entry.id || entry.name || '')
-        .concat(extractAnnotationLabels(annotationLayers)),
+        .concat(extractAnnotationLabels(annotationLayers))
+        .sort((a: string, b: string) => {
+          if (!legendSort) return 0;
+          return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
+        }),
     },
     series: dedupSeries(reorderForecastSeries(series) as SeriesOption[]),
     toolbox: {

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

@@ -29,7 +29,7 @@ import {
   sharedControls,
 } from '@superset-ui/chart-controls';
 import { DEFAULT_FORM_DATA } from './types';
-import { legendSection, legendSortControl } from '../controls';
+import { legendSection } from '../controls';
 
 const {
   donut,
@@ -119,7 +119,6 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
-        [legendSortControl],
         // eslint-disable-next-line react/jsx-key
         [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
         [

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

@@ -40,7 +40,6 @@ export type EchartsPieFormData = QueryFormData &
     labelType: EchartsPieLabelType;
     labelTemplate: string | null;
     labelsOutside: boolean;
-    legendSort: 'asc' | 'desc' | null;
     metric?: string;
     outerRadius: number;
     showLabels: boolean;

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

@@ -116,6 +116,7 @@ export default function transformProps(
     dateFormat,
     showLabels,
     showLegend,
+    legendSort,
     isCircle,
     columnConfig,
     sliceId,
@@ -354,7 +355,10 @@ export default function transformProps(
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),
-      data: Array.from(columnsLabelMap.keys()),
+      data: Array.from(columnsLabelMap.keys()).sort((a: string, b: string) => {
+        if (!legendSort) return 0;
+        return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
+      }),
     },
     series,
     radar: {

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

@@ -149,6 +149,7 @@ export default function transformProps(
     legendOrientation,
     legendType,
     legendMargin,
+    legendSort,
     logAxis,
     markerEnabled,
     markerSize,
@@ -646,7 +647,10 @@ export default function transformProps(
         padding,
       ),
       scrollDataIndex: legendIndex || 0,
-      data: legendData as string[],
+      data: legendData.sort((a: string, b: string) => {
+        if (!legendSort) return 0;
+        return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
+      }) as string[],
     },
     series: dedupSeries(reorderForecastSeries(series) as SeriesOption[]),
     toolbox: {

superset-frontend/plugins/plugin-chart-echarts/src/constants.ts

@@ -103,6 +103,7 @@ export const DEFAULT_LEGEND_FORM_DATA: LegendFormData = {
   legendOrientation: LegendOrientation.Top,
   legendType: LegendType.Scroll,
   showLegend: true,
+  legendSort: null,
 };
 
 export const DEFAULT_TITLE_FORM_DATA: TitleFormData = {