Skip to content

Commit

Permalink
feat: Enables ECharts legend selector (#23590)
Browse files Browse the repository at this point in the history
  • Loading branch information
michael-s-molina authored Apr 6, 2023
1 parent adcb8cf commit 30f210b
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ export default function transformProps(
}),
},
legend: {
...getLegendProps(legendType, legendOrientation, showLegend),
...getLegendProps(legendType, legendOrientation, showLegend, theme),
data: keys,
},
series,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ export default function transformProps(
inContextMenu,
filterState,
emitCrossFilters,
theme,
} = chartProps;
const data: DataRecord[] = queriesData[0].data || [];

Expand Down Expand Up @@ -324,7 +325,7 @@ export default function transformProps(
),
},
legend: {
...getLegendProps(legendType, legendOrientation, showLegend),
...getLegendProps(legendType, legendOrientation, showLegend, theme),
data: categoryList,
},
series,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ export default function transformProps(
}),
},
legend: {
...getLegendProps(legendType, legendOrientation, showLegend),
...getLegendProps(legendType, legendOrientation, showLegend, theme),
data: keys,
},
graphic: showTotal
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -288,6 +289,7 @@ export function getLegendProps(
type: LegendType,
orientation: LegendOrientation,
show: boolean,
theme: SupersetTheme,
zoomable = false,
): LegendComponentOption | LegendComponentOption[] {
const legend: LegendComponentOption | LegendComponentOption[] = {
Expand All @@ -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:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
DataRecord,
getNumberFormatter,
getTimeFormatter,
supersetTheme as theme,
} from '@superset-ui/core';
import {
dedupSeries,
Expand All @@ -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 },
Expand Down Expand Up @@ -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,
});
});
});
Expand Down

0 comments on commit 30f210b

Please sign in to comment.