iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(timeseries charts): adjust legend width by padding (#32030)

This commit is contained in:
Elizabeth Thompson 2025-02-03 14:11:09 -08:00 committed by GitHub
parent 386aa93e24
commit 8984f88a3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
superset-frontend/packages/superset-ui-chart-controls/src/types.ts
View File

@ -515,6 +515,13 @@ export enum SortSeriesType {
Avg = 'avg',
}
export type LegendPaddingType = {
top?: number;
bottom?: number;
left?: number;
right?: number;
};
export type SortSeriesData = {
sort_series_type: SortSeriesType;
sort_series_ascending: boolean;

1
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
View File

@ -622,6 +622,7 @@ export default function transformProps(
theme,
zoomable,
legendState,
padding,
),
data: legendData as string[],
},

22
superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
View File

@ -33,7 +33,7 @@ import {
TimeFormatter,
ValueFormatter,
} from '@superset-ui/core';
import { SortSeriesType } from '@superset-ui/chart-controls';
import { SortSeriesType, LegendPaddingType } from '@superset-ui/chart-controls';
import { format } from 'echarts/core';
import type { LegendComponentOption } from 'echarts/components';
import type { SeriesOption } from 'echarts';
@ -425,6 +425,7 @@ export function getLegendProps(
theme: SupersetTheme,
zoomable = false,
legendState?: LegendState,
padding?: LegendPaddingType,
): LegendComponentOption | LegendComponentOption[] {
const legend: LegendComponentOption | LegendComponentOption[] = {
orient: [LegendOrientation.Top, LegendOrientation.Bottom].includes(
@ -443,13 +444,30 @@ export function getLegendProps(
borderColor: theme.colors.grayscale.base,
},
};
const MIN_LEGEND_WIDTH = 0;
const MARGIN_GUTTER = 45;
const getLegendWidth = (paddingWidth: number) =>
Math.max(paddingWidth - MARGIN_GUTTER, MIN_LEGEND_WIDTH);
switch (orientation) {
case LegendOrientation.Left:
legend.left = 0;
if (padding?.left) {
legend.textStyle = {
overflow: 'truncate',
width: getLegendWidth(padding.left),
};
}
break;
case LegendOrientation.Right:
legend.right = 0;
legend.top = zoomable ? TIMESERIES_CONSTANTS.legendRightTopOffset : 0;
if (padding?.right) {
legend.textStyle = {
overflow: 'truncate',
width: getLegendWidth(padding.right),
};
}
break;
case LegendOrientation.Bottom:
legend.bottom = 0;
@ -467,7 +485,7 @@ export function getChartPadding(
show: boolean,
orientation: LegendOrientation,
margin?: string | number | null,
padding?: { top?: number; bottom?: number; left?: number; right?: number },
padding?: LegendPaddingType,
isHorizontal?: boolean,
): {
bottom: number;