Bad legend sizing with long showLegendExtra values - Ordinal

[nickofthyme]

Describe the bug
With the removal of default showLegendExtra values on Ordinal, the chart now incorrectly sizes legends with long showLegendExtra values.

To Reproduce
Steps to reproduce the behavior:

1. Go to http://localhost:9001/?path=/story/axes--different-tooltip-formatter
2. Remove the spacingBuffer theme override
3. Notice the screenshot below.

Additional context
The defaultExtra values are both null

elastic-charts/src/chart_types/xy_chart/legend/legend.ts

Lines 99 to 102 in 0e6353f

	defaultExtra: {
	raw: lastValue && lastValue.y1 !== null ? lastValue.y1 : null,
	formatted: lastValue && lastValue.y1 !== null ? formatter(lastValue.y1) : null,
	},

When the formatted value is used to determine the labels here

elastic-charts/src/chart_types/xy_chart/state/selectors/get_legend_items_labels.ts

Lines 28 to 37 in 0e6353f

	export const getLegendItemsLabelsSelector = createCachedSelector(
	[computeLegendSelector, getSettingsSpecSelector],
	(legendItems, { showLegendExtra }): LegendItemLabel[] =>
	legendItems.map(({ label, defaultExtra }) => {
	if (defaultExtra?.formatted != null) {
	return { label: `${label}${showLegendExtra ? defaultExtra.formatted : ''}`, depth: 0 };
	}
	return { label, depth: 0 };
	}),
	)(getChartIdSelector);

The defaultExtra is thus omitted and never used in the size calculations rendering a narrow legend size.

I suspect a fix would be to calculate the last value even for Ordinal scales and use a sample formatted value in the dimensions calculations, but still hide the default values on Ordinal scales.

Expected behaviour
The legend should find the correct size including the showLegendExtra content

Screenshots

[markov00]

🎉 This issue has been resolved in version 24.1.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀