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:

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

@@ -20,6 +20,7 @@ import {
   DataRecord,
   getNumberFormatter,
   getTimeFormatter,
+  supersetTheme as theme,
 } from '@superset-ui/core';
 import {
   dedupSeries,
@@ -37,6 +38,16 @@ import { LegendOrientation, LegendType, SortSeriesType } from '../../src/types';
 import { defaultLegendPadding } from '../../src/defaults';
 import { NULL_STRING } from '../../src/constants';
 
+const expectedThemeProps = {
+  selector: ['all', 'inverse'],
+  selectorLabel: {
+    fontFamily: theme.typography.families.sansSerif,
+    fontSize: theme.typography.sizes.s,
+    color: theme.colors.grayscale.base,
+    borderColor: theme.colors.grayscale.base,
+  },
+};
+
 test('sortAndFilterSeries', () => {
   const data: DataRecord[] = [
     { my_x_axis: 'abc', x: 1, y: 0, z: 2 },
@@ -409,71 +420,106 @@ describe('formatSeriesName', () => {
   describe('getLegendProps', () => {
     it('should return the correct props for scroll type with top orientation without zoom', () => {
       expect(
-        getLegendProps(LegendType.Scroll, LegendOrientation.Top, true, false),
+        getLegendProps(
+          LegendType.Scroll,
+          LegendOrientation.Top,
+          true,
+          theme,
+          false,
+        ),
       ).toEqual({
         show: true,
         top: 0,
         right: 0,
         orient: 'horizontal',
         type: 'scroll',
+        ...expectedThemeProps,
       });
     });
 
     it('should return the correct props for scroll type with top orientation with zoom', () => {
       expect(
-        getLegendProps(LegendType.Scroll, LegendOrientation.Top, true, true),
+        getLegendProps(
+          LegendType.Scroll,
+          LegendOrientation.Top,
+          true,
+          theme,
+          true,
+        ),
       ).toEqual({
         show: true,
         top: 0,
         right: 55,
         orient: 'horizontal',
         type: 'scroll',
+        ...expectedThemeProps,
       });
     });
 
     it('should return the correct props for plain type with left orientation', () => {
       expect(
-        getLegendProps(LegendType.Plain, LegendOrientation.Left, true),
+        getLegendProps(LegendType.Plain, LegendOrientation.Left, true, theme),
       ).toEqual({
         show: true,
         left: 0,
         orient: 'vertical',
         type: 'plain',
+        ...expectedThemeProps,
       });
     });
 
     it('should return the correct props for plain type with right orientation without zoom', () => {
       expect(
-        getLegendProps(LegendType.Plain, LegendOrientation.Right, false, false),
+        getLegendProps(
+          LegendType.Plain,
+          LegendOrientation.Right,
+          false,
+          theme,
+          false,
+        ),
       ).toEqual({
         show: false,
         right: 0,
         top: 0,
         orient: 'vertical',
         type: 'plain',
+        ...expectedThemeProps,
       });
     });
 
     it('should return the correct props for plain type with right orientation with zoom', () => {
       expect(
-        getLegendProps(LegendType.Plain, LegendOrientation.Right, false, true),
+        getLegendProps(
+          LegendType.Plain,
+          LegendOrientation.Right,
+          false,
+          theme,
+          true,
+        ),
       ).toEqual({
         show: false,
         right: 0,
         top: 30,
         orient: 'vertical',
         type: 'plain',
+        ...expectedThemeProps,
       });
     });
 
     it('should return the correct props for plain type with bottom orientation', () => {
       expect(
-        getLegendProps(LegendType.Plain, LegendOrientation.Bottom, false),
+        getLegendProps(
+          LegendType.Plain,
+          LegendOrientation.Bottom,
+          false,
+          theme,
+        ),
       ).toEqual({
         show: false,
         bottom: 0,
         orient: 'horizontal',
         type: 'plain',
+        ...expectedThemeProps,
       });
     });
   });