[dev-v5] Add Vertical Bar Chart variants - #5068
Draft
Vincent Baaij (vnbaaij) wants to merge 78 commits into
Draft
Conversation
…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
…os and docs pages
- Organize examples
- Ignore playwright screenshots and chart-comments files
- Fix HBCWA color handling - Fix HBCWA Blazor example
- Update docs
…-specific packages
- Re-add Core SDK 9.0.300 build fix
…ents can render custom tooltips
- Add/move ChartBase/CartesianBse parameters
- Update chart wc scripts - Add and update tests
…om/microsoft/fluentui-blazor into users/vnbaaij/dev-v5/add-areachart
- Fix roundBoxes passing through
…ticalStackedBarChart
Copy link
Copy Markdown
Contributor
There was a problem hiding this comment.
Pull request overview
Adds new vertical bar chart variants to the FluentUI Blazor charts package by introducing new payload model types and System.Text.Json source-generator contexts, plus demo documentation/examples intended to showcase the new charts.
Changes:
- Added model records and source-generated JSON serializer contexts for VerticalBarChart, GroupedVerticalBarChart, and VerticalStackedBarChart payloads.
- Extended the shared ChartJson helper with a new vertical bar serialization overload.
- Added demo docs/pages/examples and updated demo configuration defaults for charts.
Reviewed changes
Copilot reviewed 19 out of 22 changed files in this pull request and generated 11 comments.
Show a summary per file| File | Description |
|---|---|
| src/Charts/Serialization/VerticalStackedBarChartDataJsonSerializerContext.cs | Adds STJ source-generator context for vertical stacked bar payloads. |
| src/Charts/Serialization/VerticalBarChartDataJsonSerializerContext.cs | Adds STJ source-generator context for vertical bar payloads. |
| src/Charts/Serialization/GroupedVerticalBarChartDataJsonSerializerContext.cs | Adds STJ source-generator context for grouped vertical bar payloads. |
| src/Charts/Models/VerticalStackedBarChart/VerticalStackedBarChartSeries.cs | Adds series payload record for vertical stacked bars. |
| src/Charts/Models/VerticalStackedBarChart/VerticalStackedBarChartDataPoint.cs | Adds data point payload record for vertical stacked bars. |
| src/Charts/Models/VerticalBarChart/VerticalBarChartSeries.cs | Adds series payload record for vertical bar charts. |
| src/Charts/Models/VerticalBarChart/VerticalBarChartDataPoint.cs | Adds data point payload record for vertical bar charts. |
| src/Charts/Models/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisSeries.cs | Adds a series payload record under the with-axis model folder. |
| src/Charts/Models/GroupedVerticalBarChart/GroupedVerticalBarChartSeries.cs | Adds series payload record for grouped vertical bars. |
| src/Charts/Models/GroupedVerticalBarChart/GroupedVerticalBarChartDataPoint.cs | Adds data point payload record for grouped vertical bars. |
| src/Charts/Infrastructure/ChartJson.cs | Adds a Serialize(IReadOnlyList<VerticalBarChartSeries>) helper (and should likely be expanded for the other new variants). |
| src/Charts/Charts/VerticalStackedBarChart/FluentVerticalStackedBarChart.razor | Added new component wrapper file (currently empty). |
| src/Charts/Charts/VerticalBarChart/FluentVerticalBarChart.razor | Added new component wrapper file (currently empty). |
| src/Charts/Charts/GroupedVerticalBarChart/FluentGroupedVerticalBarChart.razor | Added new component wrapper file (currently empty). |
| src/Charts.Scripts/src/chart-legend/chart-legend.definition.ts | Modified chart-legend definition (currently contains unresolved merge conflict markers). |
| examples/Demo/FluentUI.Demo/Program.cs | Sets a default chart configuration (RoundedCorners) for the demo. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentVerticalStackedBarChart.md | Adds documentation page for vertical stacked bar chart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentVerticalBarChart.md | Adds documentation page for vertical bar chart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentGroupedVerticalBarChart.md | Adds documentation page for grouped vertical bar chart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/VerticalStackedBarChart/VerticalStackedBarChartDefault.razor | Adds demo example (currently shows a donut chart). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/VerticalBarChart/VerticalBarChartDefault.razor | Adds demo example (currently shows a donut chart). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/GroupedVerticalBarChart/GroupedVerticalBarChartDefault.razor | Adds demo example (currently shows a donut chart). |
src/Charts.Scripts/src/chart-legend/chart-legend.definition.ts:19
- The element definition block still contains merge conflict markers and mixes two different definition patterns. Other chart components in this package use a PartialFASTElementDefinition object with FluentDesignSystem.registry and shadowOptions.
<<<<<<< HEAD
export const definition = ChartLegend.compose({
name: `${FluentDesignSystem.prefix}-chart-legend`,
template,
styles,
Sorry, something went wrong.
Comment thread
src/Charts/Models/VerticalStackedBarChart/VerticalStackedBarChartSeries.cs
Outdated
Comment thread
src/Charts/Models/GroupedVerticalBarChart/GroupedVerticalBarChartSeries.cs
Outdated
Comment thread
src/Charts/Models/VerticalBarChart/VerticalBarChartDataPoint.cs
Outdated
Comment thread
...ient/Documentation/Components/Charts/Examples/VerticalBarChart/VerticalBarChartDefault.razor
Outdated
Comment thread
...tion/Components/Charts/Examples/VerticalStackedBarChart/VerticalStackedBarChartDefault.razor
Outdated
Comment thread
.../FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentGroupedVerticalBarChart.md
Outdated
Comment thread
src/Charts/Infrastructure/ChartJson.cs
Comment on lines
+80
to
89
| /// <summary> | ||
| /// Serializes vertical bar chart data using the vertical bar chart serializer context. | ||
| /// </summary> | ||
| /// <param name="value">The vertical bar chart series collection.</param> | ||
| /// <returns>A JSON string suitable for the <c>fluent-vertical-bar-chart</c> component.</returns> | ||
| public static string Serialize(IReadOnlyList<VerticalBarChartSeries> value) => | ||
| JsonSerializer.Serialize( | ||
| value, | ||
| VerticalBarChartDataJsonSerializerContext.Default.IReadOnlyListVerticalBarChartSeries); | ||
| } |
Comment thread
src/Charts/Infrastructure/ChartJson.cs
Comment thread
src/Charts/Models/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisSeries.cs
Outdated
Copy link
Copy Markdown
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Sorry, something went wrong.
Copy link
Copy Markdown
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
|
Sorry, something went wrong.
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
Reviewers
At least 1 approving review is required to merge this pull request.
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.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.