feat: Enables ECharts legend selector (apache#23590)

(cherry picked from commit 30f210b)
airbnb · Apr 7, 2023 · 71b2d9b · 71b2d9b
1 parent e0c759b
commit 71b2d9b
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 13 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/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,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts b/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,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/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)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/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

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts b/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,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -416,7 +416,13 @@ export default function transformProps(
       },
     },
     legend: {
-      ...getLegendProps(legendType, legendOrientation, showLegend, zoomable),
+      ...getLegendProps(
+        legendType,
+        legendOrientation,
+        showLegend,
+        theme,
+        zoomable,
+      ),
       data: legendData as string[],
     },
     series: dedupSeries(series),

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/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 {
@@ -231,6 +232,7 @@ export function getLegendProps(
   type: LegendType,
   orientation: LegendOrientation,
   show: boolean,
+  theme: SupersetTheme,
   zoomable = false,
 ): LegendComponentOption | LegendComponentOption[] {
   const legend: LegendComponentOption | LegendComponentOption[] = {
@@ -241,6 +243,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:

diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts
@@ -16,7 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { getNumberFormatter, getTimeFormatter } from '@superset-ui/core';
+import {
+  getNumberFormatter,
+  getTimeFormatter,
+  supersetTheme as theme,
+} from '@superset-ui/core';
 import {
   dedupSeries,
   extractGroupbyLabel,
@@ -32,6 +36,16 @@ import { LegendOrientation, LegendType } 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,
+  },
+};
+
 describe('extractSeries', () => {
   it('should generate a valid ECharts timeseries series object', () => {
     const data = [
@@ -365,71 +379,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,
       });
     });
   });