feat: Add crosshairs follow mouse feature for Tooltip

[yaohuitc]

feat: Add crosshairs follow mouse feature for Tooltip

Summary

This PR adds support for mouse-following crosshairs in tooltip interactions, enabling crosshairs to track the mouse position in real-time instead of snapping to data points. This is particularly useful for financial charts like K-line (candlestick) charts where users need precise coordinate tracking.

Changes

1. Type Definition (src/spec/interaction.ts)

Added 9 new parameters to TooltipInteraction:

Parameter | Type | Description -- | -- | -- crosshairsFollow | boolean | Whether crosshairs follow mouse position crosshairsXFollow | boolean | Whether horizontal crosshair follows mouse crosshairsYFollow | boolean | Whether vertical crosshair follows mouse crosshairsTag | boolean | Whether to show crosshair tags crosshairsXTag | boolean | Whether to show horizontal crosshair tag crosshairsYTag | boolean | Whether to show vertical crosshair tag crosshairsYTagPosition | 'left' \\| 'right' | Position of vertical crosshair tag crosshairsXTagFormatter | (value: any) => string | Formatter for horizontal crosshair tag crosshairsYTagFormatter | (value: any) => string | Formatter for vertical crosshair tag

2. Documentation (site/docs/manual/component/tooltip.en.md & tooltip.zh.md)

• Updated interaction.tooltip configuration table with new parameters
• Updated crosshairs detailed property table with new parameters

Usage Example

js
chart.interaction('tooltip', {
  crosshairs: true,
  crosshairsFollow: true,      // Enable crosshairs follow mouse
  crosshairsTag: true,         // Show coordinate tags
  crosshairsXTagFormatter: (v) => v.toFixed(2),
  crosshairsYTagFormatter: (v) => v.toFixed(2),
});

Use Cases

• K-line (Candlestick) Charts: Real-time crosshair tracking for precise price/time coordinates
• Financial Analysis: Track mouse position across multiple data series
• Scientific Charts: Display exact coordinates while exploring data

Checklist

• npm test passes
• benchmarks are included
• commit message follows commit guidelines
• documents are updated

Description of change

[gemini-code-assist]

Code Review

This pull request introduces crosshair follow and tag features for tooltips, including documentation and a new K-line example. The implementation involves updating the seriesTooltip logic and adding tag rendering capabilities. Review feedback recommends enhancing type safety in the global polyfill and extracting hardcoded constants for improved maintainability.

[gemini-code-assist]

For better type safety and code clarity, it's recommended to avoid using any. The parameter c in the replace callback function can be explicitly typed as string.

Suggested change

	'10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c: any) =>
	(
	+c ^
	(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
	).toString(16),
	'10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c: string) =>
	(
	+c ^
	(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
	).toString(16),

[gemini-code-assist]

The updateTag function contains several hardcoded values that could be extracted into constants for better maintainability and readability:

• Default Styles: The default styles for the tag's text and background (e.g., fill: '#fff', fontSize: 10, radius: 2) should be defined as constant objects at a higher scope.
• Magic Numbers: The number 6 is used as an offset for positioning the tag. This should be a named constant (e.g., TAG_OFFSET).

Extracting these values will make the code cleaner and easier to modify in the future.