feat: legend 支持 render 配置

[moayuisuda]

Checklist

• npm test passes

Description of change

legend 支持 render 配置

  legend: {
    color: {
      defaultSelect: ['Sports'],
      render: (items) => {
        const itemsHtml = items.map(item => 
          `<div legend-value="${item.id}" style="display: inline-flex; align-items: center; margin: 5px;">
            <span style="font-size: 12px; color: ${item.color};">${item.label}</span>
          </div>`
        ).join('');
        // 也可直接返回 dom
        return `<div style="display: flex; align-items: center;">${itemsHtml}</div>`;
      },
    },
  },

[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 customization capabilities of legends by introducing a render option. This allows developers to provide a function that returns custom HTML for legend items, opening up possibilities for highly tailored visual designs and interactive behaviors. The changes ensure that these custom HTML legends are fully functional with existing filtering and interaction mechanisms.

Highlights

• Legend Custom Rendering: Introduced a new render configuration option for category legends, allowing users to define custom HTML content for legend items. This provides enhanced flexibility for styling and interactivity beyond default SVG rendering.
• HTML-based Legend Interaction: Implemented support for filtering and interaction with legends rendered using custom HTML, ensuring that custom legends behave consistently with standard legends.
• New Test Cases: Added new integration test snapshots and a dedicated test case (intervalTooltipRender) to validate the functionality and visual output of custom HTML legends.

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

这个 PR 很好地实现了图例（legend）的自定义渲染功能，允许用户通过 render 函数返回 HTML 字符串或 DOM 元素来完全控制图例的展现形式和交互。这是一个非常实用的新特性，大大增强了 G2 的灵活性。

代码整体结构清晰，新功能的实现主要集中在 legendCategory.ts 和 legendFilter.ts 中，这是合理的。为新功能添加的测试用例 interval-tooltip-render.ts 也很好地覆盖了自定义渲染和交互的场景。

我在代码中发现了一些小问题，主要涉及交互逻辑中的一些错误和测试代码中的不一致之处。此外，对于交互逻辑部分，我有一个关于代码复用的重构建议。请查看具体的审查评论。

[lxfu1]

感觉这个应该在 @antv/component 实现更合适，直接 render HTML 就可以了。

[moayuisuda]

感觉这个应该在 @antv/component 实现更合适，直接 render HTML 就可以了。

渲染部分代码很少，大部分是绑定事件代码

    if (render) {
      const items = legendStyle.data || [];
      const htmlContent = render(items);

      const htmlElement = new HtmlLegend({
        className: 'legend-category-html',
        style: {
          // @ts-ignore
          defaultSelect: categoryStyle.defaultSelect,
          innerHTML: htmlContent,
          x: bbox.x,
          y: bbox.y,
          width: bbox.width,
          height: bbox.height,
          pointerEvents: 'auto',
        },
      });

      return htmlElement as unknown as DisplayObject;
    }

那就这块代码放到 @antv/component 里？

[lxfu1]

感觉这个应该在 @antv/component 实现更合适，直接 render HTML 就可以了。

渲染部分代码很少，大部分是绑定事件代码

    if (render) {
      const items = legendStyle.data || [];
      const htmlContent = render(items);

      const htmlElement = new HtmlLegend({
        className: 'legend-category-html',
        style: {
          // @ts-ignore
          defaultSelect: categoryStyle.defaultSelect,
          innerHTML: htmlContent,
          x: bbox.x,
          y: bbox.y,
          width: bbox.width,
          height: bbox.height,
          pointerEvents: 'auto',
        },
      });

      return htmlElement as unknown as DisplayObject;
    }

那就这块代码放到 @antv/component 里？

嗯嗯，在 component 里面加个 render 的实现。