feat: Enables ECharts legend selector (#23590)

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

@@ -226,7 +226,7 @@ export default function transformProps(
         }),
     },
     legend: {
-      ...getLegendProps(legendType, legendOrientation, showLegend),
+      ...getLegendProps(legendType, legendOrientation, showLegend, theme),
       data: keys,
     },
     series,

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

@@ -171,6 +171,7 @@ export default function transformProps(
     inContextMenu,
     filterState,
     emitCrossFilters,
+    theme,
   } = chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
 
@@ -324,7 +325,7 @@ export default function transformProps(
         ),
     },
     legend: {
-      ...getLegendProps(legendType, legendOrientation, showLegend),
+      ...getLegendProps(legendType, legendOrientation, showLegend, theme),
       data: categoryList,
     },
     series,

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

@@ -458,7 +458,13 @@ export default function transformProps(
       },
     },
     legend: {
-      ...getLegendProps(legendType, legendOrientation, showLegend, zoomable),
+      ...getLegendProps(
+        legendType,
+        legendOrientation,
+        showLegend,
+        theme,
+        zoomable,
+      ),
       // @ts-ignore
       data: rawSeriesA
         .concat(rawSeriesB)

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

@@ -315,7 +315,7 @@ export default function transformProps(
         }),
     },
     legend: {
-      ...getLegendProps(legendType, legendOrientation, showLegend),
+      ...getLegendProps(legendType, legendOrientation, showLegend, theme),
       data: keys,
     },
     graphic: showTotal

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

@@ -237,7 +237,7 @@ export default function transformProps(
       trigger: 'item',
     },
     legend: {
-      ...getLegendProps(legendType, legendOrientation, showLegend),
+      ...getLegendProps(legendType, legendOrientation, showLegend, theme),
       data: Array.from(columnsLabelMap.keys()),
     },
     series,

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

@@ -469,7 +469,13 @@ export default function transformProps(
       },
     },
     legend: {
-      ...getLegendProps(legendType, legendOrientation, showLegend, zoomable),
+      ...getLegendProps(
+        legendType,
+        legendOrientation,
+        showLegend,
+        theme,
+        zoomable,
+      ),
       data: legendData as string[],
     },
     series: dedupSeries(series),

superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts

@@ -28,6 +28,7 @@ import {
   NumberFormatter,
   TimeFormatter,
   AxisType,
+  SupersetTheme,
 } from '@superset-ui/core';
 import { format, LegendComponentOption, SeriesOption } from 'echarts';
 import { sumBy, meanBy, minBy, maxBy, orderBy } from 'lodash';
@@ -288,6 +289,7 @@ export function getLegendProps(
   type: LegendType,
   orientation: LegendOrientation,
   show: boolean,
+  theme: SupersetTheme,
   zoomable = false,
 ): LegendComponentOption | LegendComponentOption[] {
   const legend: LegendComponentOption | LegendComponentOption[] = {
@@ -298,6 +300,13 @@ export function getLegendProps(
       : 'vertical',
     show,
     type,
+    selector: ['all', 'inverse'],
+    selectorLabel: {
+      fontFamily: theme.typography.families.sansSerif,
+      fontSize: theme.typography.sizes.s,
+      color: theme.colors.grayscale.base,
+      borderColor: theme.colors.grayscale.base,
+    },
   };
   switch (orientation) {
     case LegendOrientation.Left: