feat: legend-size-autofit #7245
Conversation
Summary of ChangesHello @moayuisuda, I'm Gemini Code Assist1! 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 improves the legend rendering capabilities by introducing an adaptive layout system that automatically calculates legend sizes, especially for custom HTML-rendered legends. It also streamlines the documentation by removing a previously described 'hacky' approach for custom HTML legends and adding a detailed explanation of the legend layout mechanism, addressing common issues related to legend height when manual padding is applied. These changes aim to provide a more robust and user-friendly experience for configuring and displaying legends. Highlights
Using Gemini Code AssistThe 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
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 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
|
There was a problem hiding this comment.
Code Review
本次 PR 为图例引入了新的 render 选项，允许使用 HTML 自定义渲染，这是一个非常棒的功能。它替代了过去那种较为“hacky”的自定义图例方式。实现上还通过支持 itemValue 增强了默认图例的功能。文档也相应地进行了更新，包括新增的 legendLayout.md 文件，解释了布局引擎的一个重要方面。
我有一个建议：在 src/runtime/component.ts 中，用于测量 HTML 图例大小的 DOM 操作应包裹在 try...finally 块中，以确保即使发生错误，临时元素也总能从 document.body 中移除，从而使代码更健壮。
| document.body.appendChild(container); | ||
| const bbox = container.getBoundingClientRect(); | ||
| document.body.removeChild(container); | ||
| component.size = isVertical ? bbox.width : bbox.height; |
There was a problem hiding this comment.
这段代码通过将临时元素附加到 document.body 来测量其大小。这是一种常用技术，但可能不够健壮。如果在 appendChild 之后、removeChild 之前发生错误（例如在 getBoundingClientRect 期间），临时元素可能会残留在 DOM 中，导致内存泄漏并可能影响页面。为了使其更健壮，最好将 DOM 操作包装在 try...finally 块中，以确保清理操作总能执行。
try {
document.body.appendChild(container);
const bbox = container.getBoundingClientRect();
component.size = isVertical ? bbox.width : bbox.height;
} finally {
if (container.parentNode) {
container.parentNode.removeChild(container);
}
}There was a problem hiding this comment.
legend layout 应该是 legend 的一部分，不用单独的路由。
| document.body.appendChild(container); | ||
| const bbox = container.getBoundingClientRect(); | ||
| document.body.removeChild(container); | ||
| component.size = isVertical ? bbox.width : bbox.height; |
| # Legend Layout Mechanism with Manual Padding | ||
|
|
||
| ## Problem Description | ||
| When `paddingTop` is manually set (e.g., `paddingTop: 72`), the height of `legendCategory` changes unexpectedly (e.g., from 60px to 40px). |
There was a problem hiding this comment.
我理解这部分内容是不是可以放到 FAQ 里面，也能被检索到
Checklist
npm testpassesDescription of change