feat: Add segments to PieChart

[jay-k98]

As described in #2003 a "Stacked Pie Chart" was requested. This Pull Request aims to add this feature.

Solution

The Implementation of [StackedPieChart] is very similar to [PieChart]. The biggest difference is drawing a Section with multiple Segments.

The radius of a segment is calculated like this:

SegmentRadius = SectionRadius * SegmentValue / TotalSectionValues

The sweep angles are then calculated like in [PieChart]

Todo's and Improvements

• Add drawing strokes
• Extend the Demo (add icon and more examples)
• Add tests
• Extract duplicate logic from [PieChart] and [StackedPieChart]

[codecov]

Codecov Report

❌ Patch coverage is 95.45455% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.62%. Comparing base (ea7ccf5) to head (ca2f3a3).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
lib/src/chart/pie_chart/pie_chart_painter.dart	95.31%	3 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2004   +/-   ##
=======================================
  Coverage   92.61%   92.62%           
=======================================
  Files          50       50           
  Lines        3873     3904   +31     
=======================================
+ Hits         3587     3616   +29     
- Misses        286      288    +2     

Flag	Coverage Δ
flutter	92.62% <95.45%> (+<0.01%)	⬆️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[imaNNeo]

Hi, thanks for your contribution.
I think we can use the current implementation of the PieChart to just add the stacked logic into it.
This way, we reuse a lot of code that we already wrote.

Just like what I did for the stacked bar chart here: #112

Please let me know your thoughts on it.

[jay-k98]

Hi, yeah thank you for responding! I wanted to hear your opinion about that. I'll implement analogous to #112 and add tests :)

[imaNNeo]

I appreciate it!
Thanks in advance.

[jay-k98]

Hi @imaNNeo i was on vacation but now I'm back and implemented the stacked logic for PieChart. I also updated tests and added a new sample for the example app. Looking forward to your feedback :)

[Bazni]

Hey 👋,
I think I commented at the wrong place the first time, sorry about that.

Thx for the work. I'm looking to do something like this:

Do you think I will be able to do it with your StackedPieChart?

[imaNNeo]

Hi @imaNNeo i was on vacation but now I'm back and implemented the stacked logic for PieChart. I also updated tests and added a new sample for the example app. Looking forward to your feedback :)

Can you please update your branch with the latest changes? Then I can check it again.
(You don't need to update the CHANGELOG.md)

[jay-k98]

Can you please update your branch with the latest changes? Then I can check it again. (You don't need to update the CHANGELOG.md)

Hey, I updated the branch and removed CHANGELOG.md changes.

[jay-k98]

Hey 👋, I think I commented at the wrong place the first time, sorry about that.

Thx for the work. I'm looking to do something like this:

Do you think I will be able to do it with your StackedPieChart?

Yes, the green and red part will definetly be possible. You can checkout the branch of this PR and run the example. Pie Chart Sample 4 is pretty close to the screenshot you provided.

About the grid you might need to get creative.. :D But I guess you could put two PieCharts in a Stack and use the "lower" PieChart to create the grid with section and segment outlines as well as labels. Hope this helps :)

[imaNNeo]

Can you please update your branch?

[Copilot]

Pull request overview

This pull request implements a "Stacked Pie Chart" feature that allows pie chart sections to contain multiple concentric segments (radial bands), addressing issue #2003. The implementation extends the existing PieChart functionality by adding segment support to PieChartSectionData.

Changes:

• Introduced PieChartStackSegmentData class to represent individual segments within a pie chart section
• Extended PieChartSectionData with segments list and segmentsSpace properties to support stacked rendering
• Refactored pie chart rendering to draw individual segments instead of full sections, using new drawSegments, drawSegment, and generateSegmentPath methods

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
lib/src/chart/pie_chart/pie_chart_data.dart	Added PieChartStackSegmentData class, extended PieChartSectionData with segments support, added totalRadius calculation, updated lerp and equality methods
lib/src/chart/pie_chart/pie_chart_painter.dart	Refactored rendering logic from section-based to segment-based drawing, removed drawSection method, added drawSegments/drawSegment/generateSegmentPath methods, updated all radius calculations to use totalRadius
lib/src/utils/lerp.dart	Added lerpPieChartStackSegmentDataList function for segment animation support
test/chart/pie_chart/pie_chart_painter_test.dart	Updated tests to match new segment-based API, changed method calls from drawSection to drawSegment, updated path generation tests
test/chart/pie_chart/pie_chart_renderer_test.mocks.dart	Updated mocks to reflect new segment methods and removed obsolete drawSection mock
example/lib/presentation/samples/pie/pie_chart_sample4.dart	Added new sample demonstrating stacked pie chart with single segment per section
example/lib/presentation/samples/chart_samples.dart	Registered PieChartSample4 in the samples list

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[jay-k98]

@imaNNeo Thank you for responding. I updated the branch and applied the suggested changes of the copilot code-review.

[imaNNeo]

Thanks for the fixes,
I had a closer look now. And there's something that doesn't feel right to me.

We have the PieChartSectionData.radius and also segments (where each segment has PieChartStackSegmentData.radius

Now they're adding to determine the final radius of the pie-section shape.
But what I was assuming is like:
PieChartSectionData.radius -> determines the total radius of the section
Then we can have a list of:
PieChartStackSegmentData -> that each one determines the from/to radius of the stacked segment.

Just like how stacking works in BarChart (Look at BarChartSample4 for example)

In BarChart, we define the main bar's toY, then each stack item can have a fromY and toY. We render the main bar behind, then we render the stacked parts on top of that based on the fromY and toY

I would like to have a similar functionality here, so in that way, we can have PieChartSectionData.radius which determines the total radius of the section, and we render it behind, then we will have a list of segments that each one has a fromRadius and toRadius, then we render them on top of the base section.
(Keep in mind to clamp the numbers based on the valid radius that we can have (0 to PieChartSectionData.radius)

So basically, segments is a list that we render on top of the main section!

This way:

1. We have the consistent logic for our stacked items in different charts
2. We have more customizability (for example user can add a stack only in the middle of the main section

Sorry for giving this feedback so late, but this is something I realized now!
Please let me know your thoughts on it.

[jay-k98]

@imaNNeo I get your point and I like the idea of keeping it consistent. Also as you say it would lead to a more flexible solution, which I also appreciate. I will start refactoring and hit you up when I'm done.

[jay-k98]

@imaNNeo I updated the branch and commited the refactored segment logic. I really like it because it is much cleaner and easier to understand. Thanks a lot for your feedback! Segment spacing can be solved by adding a segment. I provided that trick in the samples.

Let me know if this is what you had in mind :)