feat(chart-pie): support avoidLabelOverlap for pie chart

[xxMudCloudxx]

• Implement spider leg layout algorithm (distributeLabels) to prevent label overlapping

  • Add dynamic extension logic for dense labels
  • Add avoidLabelOverlap prop to ChartPie component (default false)
  • Add minShowLabelPercent props to ChartPie component (default 0)
  • Fix issue 饼图数据比例不一致时，展示有没有属性进行调整 #107

  BREAKING CHANGE: None

• before:

• after:

• also support set minShowLabelPercent:

• DSL:

infographic chart-pie-compact-card
data
  title 年度营收增长
  desc 展示近三年及本年目标营收对比（单位：亿元）
  values
    - label 2021年
      value 12
      desc 转型初期，稳步试水
      icon lucide/sprout
    - label 2022年
      value 150
      desc 平台优化，效率显著提升
      icon lucide/zap
    - label 2023年
      value 190
      desc 深化数智融合，全面增长
      icon lucide/brain-circuit
    - label 2024年
      value 240
      desc 拓展生态协同，冲击新高
      icon lucide/trophy
    - label 2022年
      value 150
      desc 平台优化，效率显著提升
      icon lucide/zap


design 
  structure chart-pie
    avoidLabelOverlap true
    minShowLabelPercent 2
theme light
  palette antv

Note on Extreme Cases: When the data items exceed the canvas's physical capacity, the layout algorithm prioritizes visibility (non-overlapping) over aesthetic curvature. To mitigate this, users are recommended to use the minShowLabelPercent prop to hide insignificant data labels:

[gemini-code-assist]

Summary of Changes

Hello @xxMudCloudxx, 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 introduces significant enhancements to the ChartPie component, primarily focusing on improving label readability and management. It integrates a sophisticated "spider leg" layout algorithm to intelligently position labels and their connectors, preventing overlaps in complex or data-rich pie charts. Additionally, new properties empower users to fine-tune label visibility, ensuring a clearer and more effective data visualization experience.

Highlights

• Label Overlap Avoidance: Implemented a "spider leg" layout algorithm (distributeLabels) to prevent labels from overlapping in pie charts, significantly improving readability for dense data.
• Dynamic Label Extension: Introduced dynamic logic to extend label connectors, especially for dense label arrangements, ensuring aesthetic curvature and preventing steep angles.
• New ChartPie Props: Added avoidLabelOverlap (boolean, default false) and minShowLabelPercent (number or string, default 0) to the ChartPie component, giving users more control over label display.
• Percentage-Based Label Filtering: Labels representing slices smaller than minShowLabelPercent are now optionally hidden, allowing users to focus on more significant data points.
• Issue Fix: Addressed and fixed issue 饼图数据比例不一致时，展示有没有属性进行调整 #107, which likely pertained to label display problems.

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 introduces a sophisticated label overlap avoidance algorithm for pie charts, which is a great feature. It also adds a minShowLabelPercent prop to filter out insignificant labels. The implementation is well-structured and commented. My review includes a few suggestions to improve code quality: refactoring some duplicated logic in a utility function, avoiding mutation in the new layout algorithm to make it a pure function, and replacing magic numbers with named constants for better readability and maintainability.

[xxMudCloudxx]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a new feature to avoid label overlapping in pie charts, which is a great addition. The implementation uses a spider leg layout algorithm and adds avoidLabelOverlap and minShowLabelPercent props. The code is generally well-structured.

I've found a couple of issues in the new layout algorithm logic:

1. The distributeLabels function incorrectly mixes up top-based and center-based y coordinates for labels, leading to incorrect positioning.
2. The calculation of the maximum y boundary (labelMaxY) for labels seems to be incorrect, potentially allowing labels to be drawn outside the visible area.

I've provided detailed comments and suggestions to fix these issues. Once addressed, this will be a solid feature.

[xxMudCloudxx]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces an excellent feature to avoid label overlapping in pie charts using a spider leg layout algorithm. The implementation is well-structured, and the new distributeLabels function is accompanied by a very comprehensive set of unit tests, which is commendable. I've identified a couple of edge-case bugs in the new layout algorithm and a minor opportunity to improve maintainability by removing magic numbers. Overall, this is a great contribution that significantly enhances the pie chart component.

[Aarebecca]

@xxMudCloudxx You did an outstanding job. Additionally, do you think it would be appropriate to set avoidLabelOverlap: true and minShowLabelPercent: 2 as default values?

[xxMudCloudxx]

我觉得也许minShowLabelPercent用户自己来设置比较好，不然用户可能会发现会有一部分标签不显示而不知道原因是什么？

[xxMudCloudxx]

我建议avoidLabelOverlap: true默认开启而将minShowLabelPercent默认值保持为 0。 我们可以将minShowLabelPercent此功能作为处理过密集数据的实践在提示词示例内容中介绍。

[xxMudCloudxx]

不好意思点错了，我修复一下

[codecov-commenter]

Codecov Report

❌ Patch coverage is 65.46185% with 86 lines in your changes missing coverage. Please review.
✅ Project coverage is 44.81%. Comparing base (44fda75) to head (9c9a932).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/designs/structures/chart-pie.tsx	48.32%	77 Missing ⚠️
src/designs/utils/normalize-percent.ts	10.00%	9 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #182      +/-   ##
==========================================
+ Coverage   44.76%   44.81%   +0.05%     
==========================================
  Files         330      332       +2     
  Lines       26291    26438     +147     
  Branches     2051     2072      +21     
==========================================
+ Hits        11768    11849      +81     
- Misses      14513    14579      +66     
  Partials       10       10              

Flag	Coverage Δ
infographic	44.81% <65.46%> (+0.05%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/designs/utils/index.ts	100.00% <100.00%> (ø)
src/templates/built-in.ts	100.00% <100.00%> (ø)
src/templates/chart-pie.ts	100.00% <100.00%> (ø)
src/designs/utils/normalize-percent.ts	10.00% <10.00%> (ø)
src/designs/structures/chart-pie.tsx	23.78% <48.32%> (+18.35%)	⬆️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.