[dev-v5][Charts] Add DonutChart and HorizontalBarChart

.editorconfig

@@ -405,6 +405,10 @@ dotnet_diagnostic.MA0026.severity = none
 # IDE0130: Namespace does not match folder structure
 dotnet_diagnostic.IDE0130.severity = none
 
+[src/Charts/**.cs]
+# IDE0130: Namespace does not match folder structure
+dotnet_diagnostic.IDE0130.severity = none
+
 [{tests/**.{cs,razor},examples/Tools/FluentUI.Demo.DocViewer.Tests/**.{cs,razor}}]
 # CA1018: Mark attributes with AttributeUsageAttribute
 dotnet_diagnostic.CA1018.severity = suggestion

.github/copilot-instructions.md

@@ -0,0 +1,4 @@
+# Copilot Instructions
+
+## Project Guidelines
+- Before debugging UI issues with Playwright, verify the Playwright connection first; if it is unavailable, close the browser or tab and retry before proceeding.

.gitignore

@@ -416,6 +416,7 @@ FodyWeavers.xsd
 *.cobertura.xml
 Microsoft.FluentUI.AspNetCore.Components.xml
 Microsoft.FluentUI.AspNetCore.McpServer.xml
+Microsoft.FluentUI.AspNetCore.Components.Charts.xml
 /examples/Demo/FluentUI.Demo.Client/wwwroot/sources/
 /examples/Demo/FluentUI.Demo.Client/wwwroot/documentation/
 api-comments.json

Microsoft.FluentUI-v5.slnx

@@ -20,6 +20,13 @@
     <Project Path="examples/Samples/FluentUI.Samples.WasmStandalone/FluentUI.Samples.WasmStandalone.csproj" />
   </Folder>
   <Folder Name="/src/" />
+  <Folder Name="/src/Charts/">
+    <Project Path="src/Charts.Scripts/Microsoft.FluentUI.AspNetCore.Components.Charts.Scripts.esproj">
+      <Build />
+      <Deploy />
+    </Project>
+    <Project Path="src/Charts/Microsoft.FluentUI.AspNetCore.Components.Charts.csproj" Id="63c9d5be-e015-46ac-96d1-77d52ae5ea17" />
+  </Folder>
   <Folder Name="/src/Core/">
     <Project Path="src/Core.Scripts/Microsoft.FluentUI.AspNetCore.Components.Scripts.esproj">
       <Build />

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/DebugPages/DonutChartDebug.razor

@@ -0,0 +1,43 @@
+@page "/Charts/DonutChart/Debug"
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<div style="margin:20px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:end;">
+    <FluentSwitch Label="Rounded corners" @bind-Value="roundCorners"></FluentSwitch>
+    <FluentSwitch Label="Hide labels" @bind-Value="hideLabels"></FluentSwitch>
+    <FluentSwitch Label="Hide legends" @bind-Value="hideLegends"></FluentSwitch>
+    <FluentSwitch Label="Show percentages" @bind-Value="showLabelsInPercent"></FluentSwitch>
+    <FluentSwitch Label="Allow multiple legend selection" @bind-Value="allowMultipleLegendSelection"></FluentSwitch>
+</div>
+
+<div style="margin:20px;">
+    <FluentDonutChart ChartData="@data"
+                      ChartTitle="Donut chart rounded corners example"
+                      HideLabels="@hideLabels"
+                      InnerRadius="55"
+                      ValueInsideDonut="39,000"
+                      RoundedCorners="@roundCorners"
+                      HideLegends="@hideLegends"
+                      ShowLabelsInPercent="@showLabelsInPercent"
+                      AllowMultipleLegendSelection="@allowMultipleLegendSelection" />
+</div>
+
+
+
+
+@code {
+    private readonly DonutChartData data = new()
+    {
+        ChartData =
+        [
+            new DonutChartDataPoint { Legend = "first", Data = 20000 },
+            new DonutChartDataPoint { Legend = "second", Data = 39000 },
+            new DonutChartDataPoint { Legend = "third", Data = 15000 },
+        ]
+    };
+
+    private bool roundCorners;
+    private bool hideLabels = true;
+    private bool hideLegends;
+    private bool showLabelsInPercent;
+    private bool allowMultipleLegendSelection;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartDefault.razor

@@ -0,0 +1,18 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentDonutChart ChartData="data"
+                  ChartTitle="Donut chart basic example"
+                  ValueInsideDonut="39000"
+                  InnerRadius="45" />
+
+@code {
+    DonutChartData data = new DonutChartData
+    {
+        ChartTitle = "Donut chart basic example",
+        ChartData = new List<DonutChartDataPoint>
+        {
+            new DonutChartDataPoint { Legend = "first", Data = 20000 },
+            new DonutChartDataPoint { Legend = "second", Data = 39000 }
+        }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartDefaultRTL.razor

@@ -0,0 +1,20 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<div dir="rtl">
+    <FluentDonutChart ChartData="data"
+                      ChartTitle="Donut chart basic example RTL"
+                      ValueInsideDonut="20000"
+                      InnerRadius="45" />
+</div>
+
+@code {
+    DonutChartData data = new DonutChartData
+    {
+        ChartTitle = "Donut chart basic example",
+        ChartData = new List<DonutChartDataPoint>
+        {
+            new DonutChartDataPoint { Legend = "first", Data = 20000 },
+            new DonutChartDataPoint { Legend = "second", Data = 39000 }
+        }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartHideLegends.razor

@@ -0,0 +1,18 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentDonutChart ChartData="@data"
+                  ChartTitle="Donut chart hide legends example"
+                  HideLegends="true"
+                  ValueInsideDonut="39,000"
+                  InnerRadius="55" />
+
+@code {
+    private readonly DonutChartData data = new()
+    {
+        ChartData =
+        [
+            new DonutChartDataPoint { Legend = "first", Data = 20000 },
+            new DonutChartDataPoint { Legend = "second", Data = 39000 }
+        ]
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartLabels.razor

@@ -0,0 +1,24 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentDonutChart ChartData="data"
+                  ChartTitle="Donut chart labels example"
+                  HideLabels="false"
+                  HideTooltip="false"
+                  HideLegends="false"
+                  ValueInsideDonut="39000"
+                  InnerRadius="45" />
+
+
+
+
+@code {
+    DonutChartData data = new DonutChartData
+    {
+
+        ChartData = new List<DonutChartDataPoint>
+        {
+            new DonutChartDataPoint { Legend = "first", Data = 20000 },
+            new DonutChartDataPoint { Legend = "second", Data = 39000 }
+        }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartRoundedCorners.razor

@@ -0,0 +1,29 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<div style="display:flex;flex-wrap:wrap;gap:16px 24px;align-items:end;">
+    <FluentSwitch @bind-Value="roundCorners">Rounded corners</FluentSwitch>
+    <FluentSwitch @bind-Value="hideLabels">Hide labels</FluentSwitch>
+</div>
+
+<div style="margin-top:20px;">
+    <FluentDonutChart ChartData="@data"
+                      ChartTitle="Donut chart rounded corners example"
+                      HideLabels="@hideLabels"
+                      InnerRadius="55"
+                      ValueInsideDonut="39,000"
+                      RoundedCorners="@roundCorners" />
+</div>
+
+@code {
+    private readonly DonutChartData data = new()
+    {
+        ChartData =
+        [
+            new DonutChartDataPoint { Legend = "first", Data = 20000 },
+            new DonutChartDataPoint { Legend = "second", Data = 39000 }
+        ]
+    };
+
+    private bool roundCorners;
+    private bool hideLabels;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartShowLabelsInPercent.razor

@@ -0,0 +1,18 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentDonutChart ChartData="@data"
+                  ChartTitle="Donut chart percent labels example"
+                  HideLabels="false"
+                  InnerRadius="55"
+                  ShowLabelsInPercent="true" />
+
+@code {
+    private readonly DonutChartData data = new()
+    {
+        ChartData =
+        [
+            new DonutChartDataPoint { Legend = "first", Data = 20000 },
+            new DonutChartDataPoint { Legend = "second", Data = 39000 }
+        ]
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/DonutChartSizing.razor

@@ -0,0 +1,30 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="4">
+    <FluentSlider Label=@($"Width: {_width}") @bind-Value="_width" Id="donut-width" Min="200" Max="640" Step="10" Style="width:300px;" />
+    <FluentSlider Label=@($"Height: {_height}") @bind-Value="_height" Id="donut-height" Min="200" Max="640" Step="10" Style="width:300px;" />
+    <FluentSlider Label=@($"Inner radius: {_innerRadius}") @bind-Value="_innerRadius" Id="donut-inner-radius" Min="1" Max="120" Step="5" Style="width:300px;" />
+</FluentStack>
+
+<FluentDonutChart ChartData="@data"
+                  ChartTitle="Donut chart sizing example"
+                  Width="@_width"
+                  Height="@_height"
+                  InnerRadius="@_innerRadius"
+                  ValueInsideDonut="39,000" />
+
+
+@code {
+    private int _width = 320;
+    private int _height = 320;
+    private int _innerRadius = 55;
+
+    private readonly DonutChartData data = new()
+    {
+        ChartData =
+            [
+                new DonutChartDataPoint { Legend = "first", Data = 20000 },
+                new DonutChartDataPoint { Legend = "second", Data = 39000 }
+            ]
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartBenchmark.razor

@@ -0,0 +1,40 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+@using Microsoft.FluentUI.AspNetCore.Components.Enums
+
+<FluentHorizontalBarChart Style="width: 100%;"
+                          Variant="@HorizontalBarChartVariant.SingleBar"
+                          ChartData="@ChartData">
+</FluentHorizontalBarChart>
+
+@code {
+    IReadOnlyList<HorizontalBarChartSeries> ChartData = new List<HorizontalBarChartSeries>
+    {
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "one",
+            ChartData = new List<HorizontalBarChartDataPoint>
+            {
+                new HorizontalBarChartDataPoint { Legend = "one", Data = 10, Total = 100, Color = "#637cef" }
+            },
+            BenchmarkData = 50
+        },
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "two",
+            ChartData = new List<HorizontalBarChartDataPoint>
+            {
+                new HorizontalBarChartDataPoint { Legend = "two", Data = 30, Total = 200, Color = "#e3008c" }
+            },
+            BenchmarkData = 30
+        },
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "three",
+            ChartData = new List<HorizontalBarChartDataPoint>
+            {
+                new HorizontalBarChartDataPoint { Legend = "three", Data = 15, Total = 50, Color = "#2aa0a4" }
+            },
+            BenchmarkData = 5
+        }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartDefault.razor

@@ -0,0 +1,45 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentHorizontalBarChart Style="width: 100%"
+                          ChartTitle="Default Horizontal Bar Chart"
+                          ChartData="@ChartData">
+</FluentHorizontalBarChart>
+
+@code {
+    private IReadOnlyList<HorizontalBarChartSeries> ChartData =
+    [
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "Monitored First",
+            ChartData =
+            [
+                new HorizontalBarChartDataPoint { Legend = "Debit card numbers (EU and USA)", Data = 40, Color = "#0099BC" },
+                new HorizontalBarChartDataPoint { Legend = "Passport numbers (USA)", Data = 23, Color = "#77004D" },
+                new HorizontalBarChartDataPoint { Legend = "Social security numbers", Data = 35, Color = "#4F68ED" },
+                new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 87, Color = "#AE8C00" },
+                new HorizontalBarChartDataPoint { Legend = "Tax identification numbers (USA)", Data = 87, Color = "#004E8C" }
+            ]
+        },
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "Monitored Second",
+            ChartData =
+            [
+                new HorizontalBarChartDataPoint { Legend = "Debit card numbers (EU and USA)", Data = 40, Color = "#0099BC" },
+                new HorizontalBarChartDataPoint { Legend = "Passport numbers (USA)", Data = 56, Color = "#77004D" },
+                new HorizontalBarChartDataPoint { Legend = "Social security numbers", Data = 35, Color = "#4F68ED" },
+                new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 92, Color = "#AE8C00" },
+                new HorizontalBarChartDataPoint { Legend = "Tax identification numbers (USA)", Data = 87, Color = "#004E8C" }
+            ]
+        },
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "Unmonitored",
+            ChartData =
+            [
+                new HorizontalBarChartDataPoint { Legend = "Phone Numbers", Data = 40, Color = "#881798" },
+                new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 23, Color = "#AE8C00" }
+            ]
+        }
+    ];
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/HorizontalBarChartDefaultRTL.razor

@@ -0,0 +1,47 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<div dir="rtl">
+    <FluentHorizontalBarChart Style="width: 100%"
+                              ChartTitle="Default Horizontal Bar Chart RTL"
+                              ChartData="@ChartData">
+    </FluentHorizontalBarChart>
+</div>
+
+@code {
+    private IReadOnlyList<HorizontalBarChartSeries> ChartData =
+    [
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "Monitored First",
+            ChartData =
+            [
+                new HorizontalBarChartDataPoint { Legend = "Debit card numbers (EU and USA)", Data = 40, Color = "#0099BC" },
+                new HorizontalBarChartDataPoint { Legend = "Passport numbers (USA)", Data = 23, Color = "#77004D" },
+                new HorizontalBarChartDataPoint { Legend = "Social security numbers", Data = 35, Color = "#4F68ED" },
+                new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 87, Color = "#AE8C00" },
+                new HorizontalBarChartDataPoint { Legend = "Tax identification numbers (USA)", Data = 87, Color = "#004E8C" }
+            ]
+        },
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "Monitored Second",
+            ChartData =
+            [
+                new HorizontalBarChartDataPoint { Legend = "Debit card numbers (EU and USA)", Data = 40, Color = "#0099BC" },
+                new HorizontalBarChartDataPoint { Legend = "Passport numbers (USA)", Data = 56, Color = "#77004D" },
+                new HorizontalBarChartDataPoint { Legend = "Social security numbers", Data = 35, Color = "#4F68ED" },
+                new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 92, Color = "#AE8C00" },
+                new HorizontalBarChartDataPoint { Legend = "Tax identification numbers (USA)", Data = 87, Color = "#004E8C" }
+            ]
+        },
+        new HorizontalBarChartSeries
+        {
+            ChartSeriesTitle = "Unmonitored",
+            ChartData =
+            [
+                new HorizontalBarChartDataPoint { Legend = "Phone Numbers", Data = 40, Color = "#881798" },
+                new HorizontalBarChartDataPoint { Legend = "Credit card Numbers", Data = 23, Color = "#AE8C00" }
+            ]
+        }
+    ];
+}