[Lens][XY] Truncate long axis tick labels in horizontal bar charts

[biamalveiro]

Summary

Wires axis tick label truncation to @elastic/charts through the new tickLabel.truncation style option, replacing previous character based truncating happening inside the formatter. We now interpret axis.truncate as pixels instead of characters now.

To fix #265517, for horizontal charts with bars and no explicit truncate, we apply a default truncation of 40% relative to the chart container's width.

Before:

After:

Legacy compatibility

Agg-based XY charts truncated axis tick labels by character count, and the renderer sliced tick strings to that length in the formatter. We now use elastic-charts's tickLabelMaxLength which expects a value in pixels. Without converting, a saved value like 100 would be treated as 100px instead of ~100 characters, so labels would truncate much more aggressively than before. charsToPixels used in vis_types/xy/public/to_ast.ts approximates character count to pixels so existing legacy charts and editor keep a similar behavior.

To test:

1. Go to Machine Learning / Data Visualizer and upload file sample-k8s.csv, name index "test-h-data".
2. Go to Saved Objects and import horizontal-bars-truncate.ndjson.zip
3. Go to visualisation "truncate-horizontal-bar-labels", set time frame to last year.

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

• Unit or functional tests were updated or added to match the most common scenarios
• The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
• Review the backport guidelines and apply applicable backport:* labels.

[biamalveiro]

Legacy xy charts truncated axis tick labels by character count, and then in expression_xy, the formatter sliced tick strings to that length:

kibana/src/platform/plugins/shared/chart_expressions/expression_xy/public/components/xy_chart.tsx

Lines 986 to 992 in e2f0b1e

	tickFormat={(d) => {
	let value = axis.formatter?.convert(d) || '';
	if (axis.truncate && value.length > axis.truncate) {
	value = `${value.slice(0, axis.truncate)}...`;
	}
	return value;
	}}

We now use elastic-charts's tickLabelMaxLength which expects a value in pixels.

Without converting, a saved value like 100 would be treated as 100px instead of 100 characters, so labels would truncate much more aggressively than before.

[markov00]

Thanks, works pretty well locally!

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 814c283
• Build duration: 68 mins

Failed CI Steps

• FTR Configs #79
• FTR Configs #228
• Scout Lane #9 - stateful-classic / default
• Scout Lane #33 - serverless-observability_complete / default
• Scout Lane #35 - serverless-observability_complete / composite_slo

Test Failures

• [job] [logs] Scout Lane #33 - serverless-observability_complete / default / local-serverless-observability_complete - Hosts Page - Empty State - should show onboarding page when no data is present
• [job] [logs] Scout Lane #9 - stateful-classic / default / local-stateful-classic - Profiling is setup and data is loaded - Admin user

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
visTypeXy	196	197	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
expressionXY	101.8KB	101.8KB	+51.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
expressionXY	41.7KB	41.7KB	+13.0B
visTypeXy	29.1KB	29.2KB	+73.0B
total			+86.0B

History

• 💛 Build #447315 was flaky 329cf8a
• 💛 Build #447016 was flaky a099966
• 💔 Build #446782 failed 2455b6d