fix(echarts): prevent plain legend clipping in dashboards (#38675)

This commit is contained in:
Richard Fogaca Nienkotter
2026-03-25 09:38:31 -03:00
committed by GitHub
parent 3fb903fdc6
commit 12aca72074
16 changed files with 1514 additions and 102 deletions

View File

@@ -31,6 +31,7 @@ import { EchartsBubbleChartProps, EchartsBubbleFormData } from './types';
import { DEFAULT_FORM_DATA, MINIMUM_BUBBLE_SIZE } from './constants';
import { defaultGrid } from '../defaults';
import { getLegendProps, getMinAndMaxFromBounds } from '../utils/series';
import { resolveLegendLayout } from '../utils/legendLayout';
import { Refs } from '../types';
import { parseAxisBound } from '../utils/controls';
import { getDefaultTooltip } from '../utils/tooltip';
@@ -172,6 +173,20 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
const xAxisFormatter = getNumberFormatter(xAxisFormat);
const yAxisFormatter = getNumberFormatter(yAxisFormat);
const tooltipSizeFormatter = getNumberFormatter(tooltipSizeFormat);
const legendData = Array.from(legends).sort((a: string, b: string) => {
if (!legendSort) return 0;
return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
});
const { effectiveLegendMargin, effectiveLegendType } = resolveLegendLayout({
chartHeight: height,
chartWidth: width,
legendItems: legendData,
legendMargin,
orientation: legendOrientation,
show: showLegend,
theme,
type: legendType,
});
const [xAxisMin, xAxisMax] = (xAxisBounds || []).map(parseAxisBound);
const [yAxisMin, yAxisMax] = (yAxisBounds || []).map(parseAxisBound);
@@ -181,7 +196,7 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
legendOrientation,
true,
false,
legendMargin,
effectiveLegendMargin,
true,
'Left',
convertInteger(yAxisTitleMargin),
@@ -230,11 +245,13 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
type: logYAxis ? AxisType.Log : AxisType.Value,
},
legend: {
...getLegendProps(legendType, legendOrientation, showLegend, theme),
data: Array.from(legends).sort((a: string, b: string) => {
if (!legendSort) return 0;
return legendSort === 'asc' ? a.localeCompare(b) : b.localeCompare(a);
}),
...getLegendProps(
effectiveLegendType,
legendOrientation,
showLegend,
theme,
),
data: legendData,
},
tooltip: {
show: !inContextMenu,