feat(tooltip): add text label support for crosshairs

[lzxue]

This PR adds text label support for crosshairs in tooltip interaction, addressing issue #7275.

Features

• Add textX and textY options to display labels on crosshairs lines
• Support customizable text position (textXposition, textYposition)
• Support text offset configuration (textXoffsetX, textXoffsetY, etc.)
• Add crosshairsTextFill style for dark theme
• Properly clean up text elements when hiding crosshairs

Usage Example

chart.interaction('tooltip', { crosshairs: true, textX: 'Current X', textY: 'Current Y', crosshairsTextFill: '#fff' });

Checklist

• Code follows project style guidelines
• Added TypeScript type definitions
• Updated theme configurations
• Properly cleans up text elements

Closes #7275

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the tooltip interaction by introducing support for text labels on crosshairs. This feature allows users to display custom text alongside the crosshair lines, providing more informative visual cues, and includes extensive options for positioning, offsetting, and styling these new labels.

Highlights

• Crosshair Text Labels: Added textX and textY options to display customizable text labels on crosshair lines within the tooltip interaction.
• Text Positioning and Offset: Introduced textXposition, textYposition for customizable text alignment, and textXoffsetX, textXoffsetY, textYoffsetX, textYoffsetY for fine-grained offset control.
• Dark Theme Support: Included crosshairsTextFill style specifically for the dark theme to ensure text labels are visible and consistent.
• Resource Management: Implemented proper cleanup of text elements when crosshairs are hidden, preventing memory leaks and ensuring a clean UI state.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request introduces text label support for crosshairs, which is a valuable enhancement for tooltip interaction. The implementation correctly adds new options for text content, position, and offset, and ensures proper cleanup of text elements. The type definitions and theme updates are also well-integrated. However, there are a few areas for improvement regarding parameter usage and property access within the updateRuleX and updateRuleY functions, which could lead to unexpected behavior or confusion.

[gemini-code-assist]

The fill style for the Text object is set using defaults.textFill || defaults.stroke. However, defaults.textFill is not explicitly defined within the defaults object constructed in updateRuleX. The intended property for crosshair text fill, crosshairsTextFill, is passed through ...rest and would be available as defaults.crosshairsTextFill. As a result, the text fill will always fallback to defaults.stroke, ignoring any crosshairsTextFill configuration.

Suggested change

	fill: defaults.textFill || defaults.stroke,
	fill: defaults.crosshairsTextFill || defaults.stroke,

[gemini-code-assist]

Similar to updateRuleX, the fill style for the Text object in updateRuleY is set using defaults.textFill || defaults.stroke. defaults.textFill is not defined in the defaults object here. It should be defaults.crosshairsTextFill to correctly apply the configured crosshair text fill. This will cause the text fill to incorrectly fallback to defaults.stroke.

Suggested change

	fill: defaults.textFill || defaults.stroke,
	fill: defaults.crosshairsTextFill || defaults.stroke,

[gemini-code-assist]

The parameters textYposition, textYoffsetX, and textYoffsetY are defined in the updateRuleX function signature but are not used within the function's logic. These parameters are specifically for the Y-axis crosshair text, which is handled by updateRuleY. This suggests a potential copy-paste error or an oversight, leading to unnecessary parameters and potential confusion for future maintainers.

Suggested change

	textYposition = 'end',
	textXoffsetX = 5,
	textXoffsetY = 0,
	textYoffsetX = 0,
	textYoffsetY = 5,
	textXposition = 'start',
	textXoffsetX = 5,
	textXoffsetY = 0,

[gemini-code-assist]

The fallback defaults.text for labelX might not be the most appropriate. defaults.text is a generic property, and if textX is not provided, it might display unintended text. It would be clearer to explicitly use defaults.textX without a generic fallback, as the intention seems to be to only display a label if textX is specifically provided for the crosshair.

Suggested change

	const labelX = defaults.textX ?? defaults.text;
	const labelX = defaults.textX;

[gemini-code-assist]

The fallback defaults.text for labelY might not be the most appropriate. defaults.text is a generic property, and if textY is not provided, it might display unintended text. It would be clearer to explicitly use defaults.textY without a generic fallback, as the intention seems to be to only display a label if textY is specifically provided for the crosshair.

Suggested change

	const labelY = defaults.textY ?? defaults.text;
	const labelY = defaults.textY;