Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds Blazor wrappers, models, and demo documentation/examples for Fluent UI chart web components (DonutChart and HorizontalBarChart), including script-side registration and JSON source-generation helpers.
Changes:
- Introduces new chart components (
FluentDonutChart,FluentHorizontalBarChart) and their data models/serializer contexts. - Registers
@fluentui/chart-web-componentsand defines chart web components in the scripts package. - Adds demo documentation pages and multiple usage examples for both charts.
Reviewed changes
Copilot reviewed 24 out of 25 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj | Minor MSBuild formatting change for temporary .esproj asset fix target. |
| src/Core/Enums/HorizontalBarChartVariant.cs | Adds an enum to control HorizontalBarChart rendering variants. |
| src/Core/Components/Charts/Models/HorizontalBarChartModels.cs | Adds HorizontalBarChart payload models for JSON serialization. |
| src/Core/Components/Charts/Models/HorizontalBarChartDataJsonSerializerContext.cs | Adds source-generated JSON serialization context for HorizontalBarChart models. |
| src/Core/Components/Charts/Models/DonutChartModels.cs | Adds DonutChart payload models for JSON serialization. |
| src/Core/Components/Charts/Models/DonutChartDataJsonSerializerContext.cs | Adds source-generated JSON serialization context for DonutChart models. |
| src/Core/Components/Charts/FluentHorizontalBarChart.razor.cs | Adds Blazor wrapper logic/parameters for HorizontalBarChart. |
| src/Core/Components/Charts/FluentHorizontalBarChart.razor | Adds the Razor markup to render the horizontal bar chart web component. |
| src/Core/Components/Charts/FluentDonutChart.razor.cs | Adds Blazor wrapper logic/parameters for DonutChart. |
| src/Core/Components/Charts/FluentDonutChart.razor | Adds the Razor markup to render the donut chart web component. |
| src/Core/Components/Charts/ChartJson.cs | Adds shared JSON serialization helper methods for chart payloads. |
| src/Core.Scripts/src/FluentUIWebComponents.ts | Registers chart web components in the custom element registry. |
| src/Core.Scripts/package.json | Adds @fluentui/chart-web-components dependency. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentHorizontalBarChartPage.md | Adds docs page for HorizontalBarChart with examples and API sections. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentDonutChartPage.md | Adds docs page for DonutChart with examples and API sections. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/FluentUIChartsPage.md | Adds a Charts landing page listing available chart types. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartSingleDataPoint.razor | Adds demo example for single data point HorizontalBarChart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartSingleBarNMVariant.razor | Adds demo example for SingleBar “n/M” style scenario. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartSingleBar.razor | Adds demo example for AbsoluteScale SingleBar HorizontalBarChart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartDefaultRTL.razor | Adds RTL HorizontalBarChart demo example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartDefault.razor | Adds default HorizontalBarChart demo example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartBenchmark.razor | Adds benchmark HorizontalBarChart demo example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartDefaultRTL.razor | Adds RTL DonutChart demo example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartDefault.razor | Adds default DonutChart demo example. |
Files not reviewed (1)
- src/Core.Scripts/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…kage so there isno chart related code in the core scripts anymore.
…b-component package but finished source is copied here. This because we cannot publisch/update the npm package
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Web Component wrappers, docs and examples
DonutChart
HorizontalBarChart
ToDo: