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,
  });
  });
  });