[dev-v5] [Charts] Add FluentAreaChart - #5044
Draft
vnbaaij wants to merge 5 commits into
Draft
Conversation
- Add/move ChartBase/CartesianBse parameters
Unit Tests
Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
Microsoft.FluentUI.AspNetCore.Components.Charts - 99.7%
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds the FluentAreaChart wrapper and corresponding chart web component implementation to the Fluent UI Blazor Charts package, alongside shared charting infrastructure updates (axes, tooltip positioning, legend overflow, sizing, and options typing) and new demos/tests.
Changes:
- Introduce Area Chart end-to-end: C# models/serialization + Blazor component wrapper + FAST/d3-based web component + demo docs/examples + bUnit snapshot tests.
- Refactor/extend shared cartesian chart infrastructure (axis rendering helpers, tick options, tooltip positioning helpers, shared accessibility option types).
- Update existing chart components (donut/funnel/horizontal-bar/gantt) to use the shared infrastructure and new legend/tooltip capabilities.
Reviewed changes
Copilot reviewed 68 out of 69 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Charts/Charts/AreaChart/FluentAreaChartTests.razor | Adds bUnit tests for FluentAreaChart parameters/serialization/templates. |
| tests/Charts/Charts/AreaChart/FluentAreaChartTests.FluentAreaChart_Default.verified.razor.html | Adds verified snapshot for default render. |
| src/Charts/Serialization/AreaChartDataJsonSerializerContext.cs | Source-gen JSON context for area chart payloads. |
| src/Charts/Models/AreaChart/AreaChartSeries.cs | Defines area chart series payload model (legend/data/color/secondary-axis). |
| src/Charts/Models/AreaChart/AreaChartDataPoint.cs | Defines area chart datapoint payload model (x/y + accessibility). |
| src/Charts/Microsoft.FluentUI.AspNetCore.Components.Charts.csproj | Project update (adds AreaChart folder entry). |
| src/Charts/Infrastructure/ChartJson.cs | Adds ChartJson.Serialize overload for area chart series list. |
| src/Charts/Enums/AreaChartMode.cs | Adds enum for stacking mode mapping to web component. |
| src/Charts/Charts/HorizontalBarChartWithAxis/FluentHorizontalBarChartWithAxis.razor.cs | Moves cartesian options to base and adds EnableGradient parameter. |
| src/Charts/Charts/HorizontalBarChart/FluentHorizontalBarChart.razor.cs | Adds EnableGradient parameter. |
| src/Charts/Charts/GanttChart/FluentGanttChart.razor.cs | Moves cartesian options to base and adds EnableGradient parameter; date tick serialization override. |
| src/Charts/Charts/FluentChartBase.cs | Removes EnableGradient from the common base. |
| src/Charts/Charts/FluentCartesianChartBase.cs | Adds additional cartesian parameters (e.g., HideTickOverlap, shared axis label options). |
| src/Charts/Charts/DonutChart/FluentDonutChart.razor | Minor formatting adjustment in markup. |
| src/Charts/Charts/AreaChart/FluentAreaChart.razor.cs | Adds new FluentAreaChart component API surface. |
| src/Charts/Charts/AreaChart/FluentAreaChart.razor | Adds <fluent-area-chart> wrapper markup and tooltip portal. |
| src/Charts.Scripts/src/utils/chart-tooltip.template.ts | Updates tooltip template to hide default content when a custom renderer is present. |
| src/Charts.Scripts/src/utils/chart-options.ts | Adds shared TS AccessibilityData interface. |
| src/Charts.Scripts/src/utils/chart-helpers.ts | Adds escapeHtml helper for safe tooltip HTML. |
| src/Charts.Scripts/src/utils/chart-base.ts | Adds shared tooltip positioning + svg sizing helpers; refactors tooltip HTML escaping. |
| src/Charts.Scripts/src/utils/cartesian-chart-base.ts | Adds shared cartesian attributes (tick values/counts/category order/hide overlap/UTC/custom formatter). |
| src/Charts.Scripts/src/utils/cartesian-axis-shared.ts | Introduces shared d3 axis rendering + numeric y tick preparation + categorical sorting helpers. |
| src/Charts.Scripts/src/utils/cartesian-axis-helpers.ts | Adds shared helpers for directional margins and primary y-axis layout. |
| src/Charts.Scripts/src/horizontal-bar-chart/index.ts | Exports additional public types. |
| src/Charts.Scripts/src/horizontal-bar-chart/horizontal-bar-chart.ts | Adds new options + shared tooltip positioning improvements + type refactors. |
| src/Charts.Scripts/src/horizontal-bar-chart/horizontal-bar-chart.template.ts | Updates legend integration (rounded boxes binding). |
| src/Charts.Scripts/src/horizontal-bar-chart/horizontal-bar-chart.styles.ts | Adjusts grid layout rows. |
| src/Charts.Scripts/src/horizontal-bar-chart/horizontal-bar-chart.options.ts | Replaces enum with string union + adds public docs/types. |
| src/Charts.Scripts/src/horizontal-bar-chart-with-axis/index.ts | Exports additional public types. |
| src/Charts.Scripts/src/horizontal-bar-chart-with-axis/horizontal-bar-chart-with-axis.ts | Refactors to shared axis helpers + shared tooltip positioning + typed imports. |
| src/Charts.Scripts/src/horizontal-bar-chart-with-axis/horizontal-bar-chart-with-axis.template.ts | Updates legend integration (rounded boxes binding) and tooltip default rendering gating. |
| src/Charts.Scripts/src/horizontal-bar-chart-with-axis/horizontal-bar-chart-with-axis.styles.ts | Adjusts grid layout rows. |
| src/Charts.Scripts/src/horizontal-bar-chart-with-axis/horizontal-bar-chart-with-axis.options.ts | Uses shared AccessibilityData type + improves docs. |
| src/Charts.Scripts/src/gantt-chart/index.ts | Exports additional public types. |
| src/Charts.Scripts/src/gantt-chart/gantt-chart.ts | Refactors to shared axis helpers + UTC/custom formatter support + shared tooltip positioning. |
| src/Charts.Scripts/src/gantt-chart/gantt-chart.template.ts | Updates legend integration (rounded boxes binding) and tooltip default rendering gating. |
| src/Charts.Scripts/src/gantt-chart/gantt-chart.styles.ts | Adjusts grid layout rows. |
| src/Charts.Scripts/src/gantt-chart/gantt-chart.options.ts | Uses shared AccessibilityData type + improves docs. |
| src/Charts.Scripts/src/funnel-chart/index.ts | Exports additional public types. |
| src/Charts.Scripts/src/funnel-chart/funnel-geometry.ts | Renames exported types to align with new naming scheme. |
| src/Charts.Scripts/src/funnel-chart/funnel-chart.ts | Adds host dimension application + shared tooltip positioning + type renames. |
| src/Charts.Scripts/src/funnel-chart/funnel-chart.template.ts | Updates SVG sizing helper + legend integration (rounded boxes binding). |
| src/Charts.Scripts/src/funnel-chart/funnel-chart.styles.ts | Adjusts grid layout rows. |
| src/Charts.Scripts/src/funnel-chart/funnel-chart.options.ts | Renames exported types for public API consistency. |
| src/Charts.Scripts/src/FluentUIChartComponents.ts | Registers the area chart web component. |
| src/Charts.Scripts/src/donut-chart/index.ts | Exports additional public types. |
| src/Charts.Scripts/src/donut-chart/donut-chart.ts | Adds sizing normalization + tooltip positioning helper + inside-value formatter + default innerRadius update. |
| src/Charts.Scripts/src/donut-chart/donut-chart.template.ts | Updates SVG sizing helper + legend integration (rounded boxes binding). |
| src/Charts.Scripts/src/donut-chart/donut-chart.styles.ts | Adjusts grid layout rows. |
| src/Charts.Scripts/src/donut-chart/donut-chart.options.ts | Renames data point type for consistency. |
| src/Charts.Scripts/src/components.ts | Exports area chart from main components barrel. |
| src/Charts.Scripts/src/chart-legend/chart-legend.ts | Adds overflow menu, centering, rounded box support, and resize measurement logic. |
| src/Charts.Scripts/src/chart-legend/chart-legend.template.ts | Adds overflow rendering and rounded box styling hooks. |
| src/Charts.Scripts/src/chart-legend/chart-legend.styles.ts | Updates legend layout, overflow styling, and focus/hover visuals. |
| src/Charts.Scripts/src/area-chart/index.ts | Adds area chart barrel exports. |
| src/Charts.Scripts/src/area-chart/define.ts | Adds area chart definition registration. |
| src/Charts.Scripts/src/area-chart/area-chart.ts | Adds the AreaChart web component (d3 rendering, tooltips, axes, a11y). |
| src/Charts.Scripts/src/area-chart/area-chart.template.ts | Adds area chart template incl. legend + tooltip UI. |
| src/Charts.Scripts/src/area-chart/area-chart.styles.ts | Adds area chart styling for axes/paths/tooltip/layout. |
| src/Charts.Scripts/src/area-chart/area-chart.options.ts | Adds area chart public option types. |
| src/Charts.Scripts/src/area-chart/area-chart.definition.ts | Adds FAST element definition for <fluent-area-chart>. |
| src/Charts.Scripts/package.json | Adds d3-axis/d3-array dependencies and typings. |
| src/Charts.Scripts/package-lock.json | Locks newly added dependencies. |
| examples/Demo/FluentUI.Demo/Program.cs | Sets default RoundedCorners on FluentChartBase in demo configuration. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Pages/FluentAreaChartPage.md | Adds documentation page for AreaChart. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChart/DonutChartSizing.razor | Updates donut sizing defaults in demo. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChart/DonutChartOutsideLabels.razor | Simplifies donut outside-labels example parameters. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/AreaChart/AreaChartDefault.razor | Adds area chart basic example. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/DebugPages/AreaChartDebug.razor | Adds interactive debug page for area chart behavior. |
Files not reviewed (1)
- src/Charts.Scripts/package-lock.json: Generated file
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.
Just need to add more examples...
Adds the
FluentAreaChartweb component wrapper.Unit tests