[dev-v5] [Charts] Add FluentAreaChart

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

@@ -0,0 +1,125 @@
+@page "/Charts/AreaChart/Debug"
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<div style="margin:20px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:end;">
+    <FluentField LabelPosition="LabelPosition.Above"
+                 Style="min-width:220px;flex:1 1 220px;">
+        <label slot="label" for="basic-width" id="basic-width--label">
+            Width
+        </label>
+        <FluentSlider slot="input"
+                      id="basic-width"
+                      min="200"
+                      max="1000"
+                      @bind-Value="@width">
+        </FluentSlider>
+        <fluent-label slot="message">@width</fluent-label>
+    </FluentField>
+    <FluentField LabelPosition="LabelPosition.Above"
+                 Style="min-width:220px;flex:1 1 220px;">
+        <label slot="label" for="basic-height" id="basic-height--label">
+            Height
+        </label>
+        <FluentSlider slot="input"
+                      id="basic-height"
+                      min="200"
+                      max="1000"
+                      @bind-Value="@height">
+        </FluentSlider>
+        <fluent-label slot="message">@height</fluent-label>
+    </FluentField>
+    <FluentSwitch Label="Enable gradient" @bind-Value="gradient"></FluentSwitch>
+    <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="Allow multiple legend selection" Disabled="@(hideLegends)" @bind-Value="allowMultipleLegendSelection"></FluentSwitch>
+    <FluentSwitch Label="Hide Tooltips" @bind-Value="hideTooltips"></FluentSwitch>
+</div>
+
+<div style="margin:20px;">
+    <FluentAreaChart ChartData="@data"
+                     ChartTitle="Area chart rounded corners example"
+                     Width="@($"{width}px")"
+                     Height="@($"{height}px")"
+                     HideLabels="@hideLabels"
+                     HideTooltip="@hideTooltips"
+                     RoundedCorners="@roundCorners"
+                     HideLegends="@hideLegends"
+                     EnableGradient="@gradient"
+                     AllowMultipleLegendSelection="@allowMultipleLegendSelection" />
+</div>
+
+@code {
+    private readonly IReadOnlyList<AreaChartSeries> data = new List<AreaChartSeries>
+    {
+        new AreaChartSeries { Legend = "legend1",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = 7000 },
+                new AreaChartDataPoint { X = 25, Y = 9000 },
+                new AreaChartDataPoint { X = 30, Y = 13000 },
+                new AreaChartDataPoint { X = 35, Y = 15000 },
+                new AreaChartDataPoint { X = 40, Y = 11000 },
+                new AreaChartDataPoint { X = 45, Y = 8760 },
+                new AreaChartDataPoint { X = 50, Y = 3500 },
+                new AreaChartDataPoint { X = 55, Y = 20000 },
+                new AreaChartDataPoint { X = 60, Y = 17000 },
+                new AreaChartDataPoint { X = 65, Y = 1000 },
+                new AreaChartDataPoint { X = 70, Y = 12000 },
+                new AreaChartDataPoint { X = 75, Y = 6876 },
+                new AreaChartDataPoint { X = 80, Y = 12000 },
+                new AreaChartDataPoint { X = 85, Y = 7000 },
+                new AreaChartDataPoint { X = 90, Y = 10000 }
+            }
+        },
+        new AreaChartSeries { Legend = "legend2",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = 12000 },
+                new AreaChartDataPoint { X = 25, Y = 14000 },
+                new AreaChartDataPoint { X = 30, Y = 18000 },
+                new AreaChartDataPoint { X = 35, Y = 20000 },
+                new AreaChartDataPoint { X = 40, Y = 16000 },
+                new AreaChartDataPoint { X = 45, Y = 13760 },
+                new AreaChartDataPoint { X = 50, Y = 8500 },
+                new AreaChartDataPoint { X = 55, Y = 25000 },
+                new AreaChartDataPoint { X = 60, Y = 22000 },
+                new AreaChartDataPoint { X = 65, Y = 6000 },
+                new AreaChartDataPoint { X = 70, Y = 17000 },
+                new AreaChartDataPoint { X = 75, Y = 11876 },
+                new AreaChartDataPoint { X = 80, Y = 17000 },
+                new AreaChartDataPoint { X = 85, Y = 12000 },
+                new AreaChartDataPoint { X = 90, Y = 15000 }
+           }
+        },
+        new AreaChartSeries { Legend = "legend3",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = 14000 },
+                new AreaChartDataPoint { X = 25, Y = 16000 },
+                new AreaChartDataPoint { X = 30, Y = 20000 },
+                new AreaChartDataPoint { X = 35, Y = 22000 },
+                new AreaChartDataPoint { X = 40, Y = 18000 },
+                new AreaChartDataPoint { X = 45, Y = 15760 },
+                new AreaChartDataPoint { X = 50, Y = 10500 },
+                new AreaChartDataPoint { X = 55, Y = 27000 },
+                new AreaChartDataPoint { X = 60, Y = 24000 },
+                new AreaChartDataPoint { X = 65, Y = 8000 },
+                new AreaChartDataPoint { X = 70, Y = 19000 },
+                new AreaChartDataPoint { X = 75, Y = 13876 },
+                new AreaChartDataPoint { X = 80, Y = 19000 },
+                new AreaChartDataPoint { X = 85, Y = 14000 },
+                new AreaChartDataPoint { X = 90, Y = 17000 }
+            }
+        }
+    };
+
+    private int width = 400;
+    private int height = 400;
+    private bool gradient;
+    private bool roundCorners;
+    private bool hideLabels = true;
+    private bool hideLegends;
+    private bool hideTooltips;
+    private bool allowMultipleLegendSelection;
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/AreaChart/AreaChartAllNegativeYValues.razor

@@ -0,0 +1,71 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentAreaChart Width="700"
+                 YMinValue="-200"
+                 YAxisTickFormat="$,"
+                 HideTickOverlap="true"
+                 Mode="AreaChartMode.Tonexty"
+                 ChartData="data"
+                 ChartTitle="Area chart multiple all negative y example">
+</FluentAreaChart>
+
+@code {
+
+    private readonly IReadOnlyList<AreaChartSeries> data = new List<AreaChartSeries>
+    {
+        new AreaChartSeries
+        {
+            Legend = "legend1",
+            Color = DataVizPalette.Color4,
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = -9},
+                new AreaChartDataPoint { X = 25, Y = -14},
+                new AreaChartDataPoint { X = 30, Y = -14},
+                new AreaChartDataPoint { X = 35, Y = -23},
+                new AreaChartDataPoint { X = 40, Y = -20},
+                new AreaChartDataPoint { X = 45, Y = -31},
+                new AreaChartDataPoint { X = 50, Y = -29},
+                new AreaChartDataPoint { X = 55, Y = -27},
+                new AreaChartDataPoint { X = 60, Y = -37},
+                new AreaChartDataPoint { X = 65, Y = -51},
+            }
+        },
+        new AreaChartSeries
+        {
+            Legend = "legend2",
+            Color = DataVizPalette.Color5,
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = -21},
+                new AreaChartDataPoint { X = 25, Y = -25},
+                new AreaChartDataPoint { X = 30, Y = -10},
+                new AreaChartDataPoint { X = 35, Y = -10},
+                new AreaChartDataPoint { X = 40, Y = -14},
+                new AreaChartDataPoint { X = 45, Y = -18},
+                new AreaChartDataPoint { X = 50, Y = -9},
+                new AreaChartDataPoint { X = 55, Y = -23},
+                new AreaChartDataPoint { X = 60, Y = -7},
+                new AreaChartDataPoint { X = 65, Y = -55},
+            }
+        },
+        new AreaChartSeries
+        {
+            Legend = "legend3",
+            Color = DataVizPalette.Color6,
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = -30},
+                new AreaChartDataPoint { X = 25, Y = -35},
+                new AreaChartDataPoint { X = 30, Y = -33},
+                new AreaChartDataPoint { X = 35, Y = -40},
+                new AreaChartDataPoint { X = 40, Y = -10},
+                new AreaChartDataPoint { X = 45, Y = -40},
+                new AreaChartDataPoint { X = 50, Y = -34},
+                new AreaChartDataPoint { X = 55, Y = -40},
+                new AreaChartDataPoint { X = 60, Y = -60},
+                new AreaChartDataPoint { X = 65, Y = -40},
+            }
+        }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/AreaChart/AreaChartAxisTitles.razor

@@ -0,0 +1,33 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentAreaChart ChartData="data"
+                 ChartTitle="Area chart axis titles example"
+                 Width="700px"
+                 XAxisTitle="Number of days"
+                 YAxisTitle="Variation of stock market prices" />
+
+@code {
+    private readonly IReadOnlyList<AreaChartSeries> data = new List<AreaChartSeries>
+    {
+        new AreaChartSeries
+        {
+            Legend = "legend1",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = 7000 },
+                new AreaChartDataPoint { X = 25, Y = 9000 },
+                new AreaChartDataPoint { X = 30, Y = 13000 },
+            }
+        },
+        new AreaChartSeries
+        {
+            Legend = "legend2",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = 12000 },
+                new AreaChartDataPoint { X = 25, Y = 14000 },
+                new AreaChartDataPoint { X = 30, Y = 18000 },
+            }
+        }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/AreaChart/AreaChartCulture.razor

@@ -0,0 +1,34 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentAreaChart ChartData="data"
+                 ChartTitle="Area chart culture example (de-DE)"
+                 Width="700px"
+                 Culture="culture" />
+
+@code {
+    private readonly System.Globalization.CultureInfo culture = new("de-DE");
+
+    private readonly IReadOnlyList<AreaChartSeries> data = new List<AreaChartSeries>
+    {
+        new AreaChartSeries
+        {
+            Legend = "legend1",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = new DateTime(2024, 1, 1), Y = 7000 },
+                new AreaChartDataPoint { X = new DateTime(2024, 2, 1), Y = 13000 },
+                new AreaChartDataPoint { X = new DateTime(2024, 3, 1), Y = 9000 },
+            }
+        },
+        new AreaChartSeries
+        {
+            Legend = "legend2",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = new DateTime(2024, 1, 1), Y = 12000 },
+                new AreaChartDataPoint { X = new DateTime(2024, 2, 1), Y = 18000 },
+                new AreaChartDataPoint { X = new DateTime(2024, 3, 1), Y = 14000 },
+            }
+        }
+    };
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Charts/Examples/AreaChart/AreaChartCustomTooltip.razor

@@ -0,0 +1,109 @@
+@using System.Text.Json
+@using Microsoft.FluentUI.AspNetCore.Components.Charts
+
+<FluentAreaChart ChartData="data"
+                 ChartTitle="Area chart custom tooltip example"
+                 Width="700px">
+    <CartesianTooltipTemplate Context="ctx">
+        @{
+            var entries = GetTooltipEntries(ctx);
+        }
+
+        <div style="padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 160px;">
+            <div style="font-size: 0.85em;">X: <strong>@ctx.XValue</strong></div>
+
+            @if (entries.Count > 0)
+            {
+                foreach (var entry in entries)
+                {
+                    <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px;">
+                        <div style="display: flex; align-items: center; gap: 8px;">
+                            <span style="width: 10px; height: 10px; border-radius: 50%; background-color: @entry.Color; flex-shrink: 0;"></span>
+                            <strong>@entry.Legend</strong>
+                        </div>
+                        <span>@entry.Value</span>
+                    </div>
+                }
+            }
+            else
+            {
+                <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="width: 10px; height: 10px; border-radius: 50%; background-color: @ctx.Color.ToDataVizPaletteHex(ctx.CustomColor); flex-shrink: 0;"></span>
+                    <strong>@ctx.Legend</strong>
+                </div>
+                <div style="font-size: 0.85em;">Value: <strong>@ctx.YValue</strong></div>
+            }
+        </div>
+    </CartesianTooltipTemplate>
+</FluentAreaChart>
+
+@code {
+    private readonly IReadOnlyList<AreaChartSeries> data = new List<AreaChartSeries>
+    {
+        new AreaChartSeries
+        {
+            Legend = "legend1",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = 7000 },
+                new AreaChartDataPoint { X = 25, Y = 9000 },
+                new AreaChartDataPoint { X = 30, Y = 13000 },
+            }
+        },
+        new AreaChartSeries
+        {
+            Legend = "legend2",
+            ChartData = new List<AreaChartDataPoint>
+            {
+                new AreaChartDataPoint { X = 20, Y = 12000 },
+                new AreaChartDataPoint { X = 25, Y = 14000 },
+                new AreaChartDataPoint { X = 30, Y = 18000 },
+            }
+        }
+    };
+
+    private static IReadOnlyList<TooltipEntry> GetTooltipEntries(CartesianTooltipContext context)
+    {
+        if (string.IsNullOrWhiteSpace(context.RawJson))
+        {
+            return [];
+        }
+
+        try
+        {
+            using var json = JsonDocument.Parse(context.RawJson);
+            if (!json.RootElement.TryGetProperty("entries", out var entriesElement) ||
+                entriesElement.ValueKind != JsonValueKind.Array)
+            {
+                return [];
+            }
+
+            var result = new List<TooltipEntry>();
+            foreach (var item in entriesElement.EnumerateArray())
+            {
+                var legend = item.TryGetProperty("legend", out var legendElement)
+                    ? legendElement.GetString()
+                    : null;
+                var value = item.TryGetProperty("value", out var valueElement)
+                    ? valueElement.GetString()
+                    : null;
+                var color = item.TryGetProperty("color", out var colorElement)
+                    ? colorElement.GetString()
+                    : null;
+
+                if (!string.IsNullOrWhiteSpace(legend) && !string.IsNullOrWhiteSpace(value))
+                {
+                    result.Add(new TooltipEntry(legend, value, color ?? string.Empty));
+                }
+            }
+
+            return result;
+        }
+        catch
+        {
+            return [];
+        }
+    }
+
+    private sealed record TooltipEntry(string Legend, string Value, string Color);
+}