bug: s2 chart title wrap

[madelineluke]

Implementing an expression function that is used in the title spec signal to wrap the title text when it is long or there is not enough space.

wrapTitleText(): calculates the max number of characters allowed per line based on the width of the chart and an estimated size of the text. separates each word out into an array, adds words to that line until the next word will exceed the limit, and then makes a new array entry.

Related Issue

Motivation and Context

Solves when a chart title is too long to fit on a single line within the chart's container width, the current S2 implementation shrinks the chart horizontally to accommodate the overflowing title text rather than wrapping the title onto multiple lines. This causes the data visualization area to contract unexpectedly and is visually broken for long or dynamic title strings.

How Has This Been Tested?

Unit testing the new function to wrap test, visible testing in storybook.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[c-lamoureux]

This may not be dynamic enough.
Title accepts fontWeight. We might be able to estimate size using the fontWeight value, but we have an existing expression function that draws the actual text to get the exact size.

If we could either use that or make a title specific function (if necessary), we wouldn't have to worry about future props effecting this size either.

react-spectrum-charts/packages/vega-spec-builder-s2/src/expressionFunctions/expressionFunctions.ts

Lines 181 to 188 in b278a81

	const getLabelWidth = (text: string, fontWeight: FontWeight = 'bold', fontSize: number = 12) => {
	const canvas = document.createElement('canvas');
	const context = canvas.getContext('2d');
	if (context === null) return 0;
	context.font = `${fontWeight} ${fontSize}px ${ADOBE_CLEAN_FONT}`;
	return context.measureText(text).width;
	};

[madelineluke]

yeah, this was my biggest concern with this solution. Let me try using this existing function!

[sonarqubecloud]

Quality Gate failed

Failed conditions
78.7% Coverage on New Code (required ≥ 90%)

See analysis details on SonarQube Cloud

[github-actions]

🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-825

🎨 S2 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-825-s2

📚 Docs -> https://opensource.adobe.com/react-spectrum-charts/PR-825-docs/