mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
feat: Enables ECharts legend selector (#23590)
This commit is contained in:
parent
adcb8cf0ac
commit
30f210b842
@ -226,7 +226,7 @@ export default function transformProps(
|
|||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
...getLegendProps(legendType, legendOrientation, showLegend),
|
...getLegendProps(legendType, legendOrientation, showLegend, theme),
|
||||||
data: keys,
|
data: keys,
|
||||||
},
|
},
|
||||||
series,
|
series,
|
||||||
|
@ -171,6 +171,7 @@ export default function transformProps(
|
|||||||
inContextMenu,
|
inContextMenu,
|
||||||
filterState,
|
filterState,
|
||||||
emitCrossFilters,
|
emitCrossFilters,
|
||||||
|
theme,
|
||||||
} = chartProps;
|
} = chartProps;
|
||||||
const data: DataRecord[] = queriesData[0].data || [];
|
const data: DataRecord[] = queriesData[0].data || [];
|
||||||
|
|
||||||
@ -324,7 +325,7 @@ export default function transformProps(
|
|||||||
),
|
),
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
...getLegendProps(legendType, legendOrientation, showLegend),
|
...getLegendProps(legendType, legendOrientation, showLegend, theme),
|
||||||
data: categoryList,
|
data: categoryList,
|
||||||
},
|
},
|
||||||
series,
|
series,
|
||||||
|
@ -458,7 +458,13 @@ export default function transformProps(
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
...getLegendProps(legendType, legendOrientation, showLegend, zoomable),
|
...getLegendProps(
|
||||||
|
legendType,
|
||||||
|
legendOrientation,
|
||||||
|
showLegend,
|
||||||
|
theme,
|
||||||
|
zoomable,
|
||||||
|
),
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
data: rawSeriesA
|
data: rawSeriesA
|
||||||
.concat(rawSeriesB)
|
.concat(rawSeriesB)
|
||||||
|
@ -315,7 +315,7 @@ export default function transformProps(
|
|||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
...getLegendProps(legendType, legendOrientation, showLegend),
|
...getLegendProps(legendType, legendOrientation, showLegend, theme),
|
||||||
data: keys,
|
data: keys,
|
||||||
},
|
},
|
||||||
graphic: showTotal
|
graphic: showTotal
|
||||||
|
@ -237,7 +237,7 @@ export default function transformProps(
|
|||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
...getLegendProps(legendType, legendOrientation, showLegend),
|
...getLegendProps(legendType, legendOrientation, showLegend, theme),
|
||||||
data: Array.from(columnsLabelMap.keys()),
|
data: Array.from(columnsLabelMap.keys()),
|
||||||
},
|
},
|
||||||
series,
|
series,
|
||||||
|
@ -469,7 +469,13 @@ export default function transformProps(
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
...getLegendProps(legendType, legendOrientation, showLegend, zoomable),
|
...getLegendProps(
|
||||||
|
legendType,
|
||||||
|
legendOrientation,
|
||||||
|
showLegend,
|
||||||
|
theme,
|
||||||
|
zoomable,
|
||||||
|
),
|
||||||
data: legendData as string[],
|
data: legendData as string[],
|
||||||
},
|
},
|
||||||
series: dedupSeries(series),
|
series: dedupSeries(series),
|
||||||
|
@ -28,6 +28,7 @@ import {
|
|||||||
NumberFormatter,
|
NumberFormatter,
|
||||||
TimeFormatter,
|
TimeFormatter,
|
||||||
AxisType,
|
AxisType,
|
||||||
|
SupersetTheme,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import { format, LegendComponentOption, SeriesOption } from 'echarts';
|
import { format, LegendComponentOption, SeriesOption } from 'echarts';
|
||||||
import { sumBy, meanBy, minBy, maxBy, orderBy } from 'lodash';
|
import { sumBy, meanBy, minBy, maxBy, orderBy } from 'lodash';
|
||||||
@ -288,6 +289,7 @@ export function getLegendProps(
|
|||||||
type: LegendType,
|
type: LegendType,
|
||||||
orientation: LegendOrientation,
|
orientation: LegendOrientation,
|
||||||
show: boolean,
|
show: boolean,
|
||||||
|
theme: SupersetTheme,
|
||||||
zoomable = false,
|
zoomable = false,
|
||||||
): LegendComponentOption | LegendComponentOption[] {
|
): LegendComponentOption | LegendComponentOption[] {
|
||||||
const legend: LegendComponentOption | LegendComponentOption[] = {
|
const legend: LegendComponentOption | LegendComponentOption[] = {
|
||||||
@ -298,6 +300,13 @@ export function getLegendProps(
|
|||||||
: 'vertical',
|
: 'vertical',
|
||||||
show,
|
show,
|
||||||
type,
|
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) {
|
switch (orientation) {
|
||||||
case LegendOrientation.Left:
|
case LegendOrientation.Left:
|
||||||
|
@ -20,6 +20,7 @@ import {
|
|||||||
DataRecord,
|
DataRecord,
|
||||||
getNumberFormatter,
|
getNumberFormatter,
|
||||||
getTimeFormatter,
|
getTimeFormatter,
|
||||||
|
supersetTheme as theme,
|
||||||
} from '@superset-ui/core';
|
} from '@superset-ui/core';
|
||||||
import {
|
import {
|
||||||
dedupSeries,
|
dedupSeries,
|
||||||
@ -37,6 +38,16 @@ import { LegendOrientation, LegendType, SortSeriesType } from '../../src/types';
|
|||||||
import { defaultLegendPadding } from '../../src/defaults';
|
import { defaultLegendPadding } from '../../src/defaults';
|
||||||
import { NULL_STRING } from '../../src/constants';
|
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', () => {
|
test('sortAndFilterSeries', () => {
|
||||||
const data: DataRecord[] = [
|
const data: DataRecord[] = [
|
||||||
{ my_x_axis: 'abc', x: 1, y: 0, z: 2 },
|
{ my_x_axis: 'abc', x: 1, y: 0, z: 2 },
|
||||||
@ -409,71 +420,106 @@ describe('formatSeriesName', () => {
|
|||||||
describe('getLegendProps', () => {
|
describe('getLegendProps', () => {
|
||||||
it('should return the correct props for scroll type with top orientation without zoom', () => {
|
it('should return the correct props for scroll type with top orientation without zoom', () => {
|
||||||
expect(
|
expect(
|
||||||
getLegendProps(LegendType.Scroll, LegendOrientation.Top, true, false),
|
getLegendProps(
|
||||||
|
LegendType.Scroll,
|
||||||
|
LegendOrientation.Top,
|
||||||
|
true,
|
||||||
|
theme,
|
||||||
|
false,
|
||||||
|
),
|
||||||
).toEqual({
|
).toEqual({
|
||||||
show: true,
|
show: true,
|
||||||
top: 0,
|
top: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
orient: 'horizontal',
|
orient: 'horizontal',
|
||||||
type: 'scroll',
|
type: 'scroll',
|
||||||
|
...expectedThemeProps,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return the correct props for scroll type with top orientation with zoom', () => {
|
it('should return the correct props for scroll type with top orientation with zoom', () => {
|
||||||
expect(
|
expect(
|
||||||
getLegendProps(LegendType.Scroll, LegendOrientation.Top, true, true),
|
getLegendProps(
|
||||||
|
LegendType.Scroll,
|
||||||
|
LegendOrientation.Top,
|
||||||
|
true,
|
||||||
|
theme,
|
||||||
|
true,
|
||||||
|
),
|
||||||
).toEqual({
|
).toEqual({
|
||||||
show: true,
|
show: true,
|
||||||
top: 0,
|
top: 0,
|
||||||
right: 55,
|
right: 55,
|
||||||
orient: 'horizontal',
|
orient: 'horizontal',
|
||||||
type: 'scroll',
|
type: 'scroll',
|
||||||
|
...expectedThemeProps,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return the correct props for plain type with left orientation', () => {
|
it('should return the correct props for plain type with left orientation', () => {
|
||||||
expect(
|
expect(
|
||||||
getLegendProps(LegendType.Plain, LegendOrientation.Left, true),
|
getLegendProps(LegendType.Plain, LegendOrientation.Left, true, theme),
|
||||||
).toEqual({
|
).toEqual({
|
||||||
show: true,
|
show: true,
|
||||||
left: 0,
|
left: 0,
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
type: 'plain',
|
type: 'plain',
|
||||||
|
...expectedThemeProps,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return the correct props for plain type with right orientation without zoom', () => {
|
it('should return the correct props for plain type with right orientation without zoom', () => {
|
||||||
expect(
|
expect(
|
||||||
getLegendProps(LegendType.Plain, LegendOrientation.Right, false, false),
|
getLegendProps(
|
||||||
|
LegendType.Plain,
|
||||||
|
LegendOrientation.Right,
|
||||||
|
false,
|
||||||
|
theme,
|
||||||
|
false,
|
||||||
|
),
|
||||||
).toEqual({
|
).toEqual({
|
||||||
show: false,
|
show: false,
|
||||||
right: 0,
|
right: 0,
|
||||||
top: 0,
|
top: 0,
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
type: 'plain',
|
type: 'plain',
|
||||||
|
...expectedThemeProps,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return the correct props for plain type with right orientation with zoom', () => {
|
it('should return the correct props for plain type with right orientation with zoom', () => {
|
||||||
expect(
|
expect(
|
||||||
getLegendProps(LegendType.Plain, LegendOrientation.Right, false, true),
|
getLegendProps(
|
||||||
|
LegendType.Plain,
|
||||||
|
LegendOrientation.Right,
|
||||||
|
false,
|
||||||
|
theme,
|
||||||
|
true,
|
||||||
|
),
|
||||||
).toEqual({
|
).toEqual({
|
||||||
show: false,
|
show: false,
|
||||||
right: 0,
|
right: 0,
|
||||||
top: 30,
|
top: 30,
|
||||||
orient: 'vertical',
|
orient: 'vertical',
|
||||||
type: 'plain',
|
type: 'plain',
|
||||||
|
...expectedThemeProps,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should return the correct props for plain type with bottom orientation', () => {
|
it('should return the correct props for plain type with bottom orientation', () => {
|
||||||
expect(
|
expect(
|
||||||
getLegendProps(LegendType.Plain, LegendOrientation.Bottom, false),
|
getLegendProps(
|
||||||
|
LegendType.Plain,
|
||||||
|
LegendOrientation.Bottom,
|
||||||
|
false,
|
||||||
|
theme,
|
||||||
|
),
|
||||||
).toEqual({
|
).toEqual({
|
||||||
show: false,
|
show: false,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
orient: 'horizontal',
|
orient: 'horizontal',
|
||||||
type: 'plain',
|
type: 'plain',
|
||||||
|
...expectedThemeProps,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user