This is an automated email from the ASF dual-hosted git repository. michaelsmolina pushed a commit to branch 5.0 in repository https://gitbox.apache.org/repos/asf/superset.git
commit faae9cc32616e6da459059354404a099eea1d5c0 Author: Elizabeth Thompson <[email protected]> AuthorDate: Mon Feb 3 14:11:09 2025 -0800 chore(timeseries charts): adjust legend width by padding (#32030) (cherry picked from commit 8984f88a3e1c2843dea00230263ea6323ef83308) --- .../superset-ui-chart-controls/src/types.ts | 7 +++++++ .../src/Timeseries/transformProps.ts | 1 + .../plugin-chart-echarts/src/utils/series.ts | 22 ++++++++++++++++++++-- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts index 09667004a5..a53a45de35 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts @@ -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; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 219df879e7..0fb392a12d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -622,6 +622,7 @@ export default function transformProps( theme, zoomable, legendState, + padding, ), data: legendData as string[], }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts index 0aa0ae988e..bbf222a2a5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts @@ -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;
