feat: support legend render

[moayuisuda]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @moayuisuda, 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 significantly enhances the flexibility of legend rendering by introducing support for custom HTML content. Users can now provide a custom render function to define the visual representation of legends, moving beyond the default component-based rendering. This feature allows for more diverse and tailored legend designs, making the UI components more adaptable to specific charting and visualization needs.

Highlights

• Custom HTML Legend Component: Introduced a new HtmlLegend class that extends the base HTML component, specifically designed to manage and update custom HTML content within legends.
• Conditional Legend Rendering: The Category legend component's render method now checks for a render attribute. If provided, it delegates to a new renderCustom method for HTML-based rendering; otherwise, it uses the traditional title and item rendering.
• Custom Render Function Support: Added a render property to CategoryItemsStyleProps, allowing users to supply a function that returns a string or HTMLElement for highly customized legend item displays.
• New CSS Class for HTML Legends: A new html class name has been added to CLASS_NAMES to facilitate styling and identification of custom HTML legend elements.

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.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

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

This pull request adds support for custom rendering of legends using an HTML-based approach. The changes introduce a new render attribute that, when provided, uses a custom function to generate the legend's content as HTML. My review focuses on improving type safety, correcting a type assertion bug, and simplifying the code. Overall, the changes are well-structured to support this new feature.

[gemini-code-assist]

The options parameter in the update method is typed as any. For better type safety and code clarity, it's recommended to use a more specific type. You can use HTMLStyleProps which is available for HTML elements.

  update(options: Partial<import('../../shapes').HTMLStyleProps>) {
    this.attr(options);
  }

[gemini-code-assist]

The type assertion in the if condition is unnecessary for a truthiness check and makes the code more verbose. You can simplify it by just checking for render.

Suggested change

	if (render as CategoryStyleProps['render']) {
	if (render) {