feat(pie): add sort legend (#34323)

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 } from '../controls';
+import { legendSection, legendSortControl } from '../controls';
 
 const {
   donut,
@@ -119,6 +119,7 @@ const config: ControlPanelConfig = {
           },
         ],
         ...legendSection,
+        [legendSortControl],
         // eslint-disable-next-line react/jsx-key
         [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],
         [

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

@@ -151,6 +151,7 @@ export default function transformProps(
     legendMargin,
     legendOrientation,
     legendType,
+    legendSort,
     metric = '',
     numberFormat,
     currencyFormat,
@@ -435,7 +436,12 @@ export default function transformProps(
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),
-      data: transformedData.map(datum => datum.name),
+      data: transformedData
+        .map(datum => datum.name)
+        .sort((a: string, b: string) => {
+          if (!legendSort) return 0;
+          return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
+        }),
     },
     graphic: showTotal
       ? {

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

@@ -40,6 +40,7 @@ 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/controls.tsx

@@ -97,6 +97,24 @@ const legendOrientationControl: ControlSetItem = {
   },
 };
 
+export const legendSortControl: ControlSetItem = {
+  name: 'legendSort',
+  config: {
+    type: 'SelectControl',
+    label: t('Sort legend'),
+    default: null,
+    renderTrigger: true,
+    choices: [
+      ['asc', t('Label ascending')],
+      ['desc', t('Label descending')],
+      [null, t('Sort by data')],
+    ],
+    description: t('Changes the sort value of the items in the legend only'),
+    visibility: ({ controls }: ControlPanelsContainerProps) =>
+      Boolean(controls?.show_legend?.value),
+  },
+};
+
 export const legendSection: ControlSetRow[] = [
   [<ControlSubSectionHeader>{t('Legend')}</ControlSubSectionHeader>],
   [showLegendControl],