Feature/charts release

.gitignore

@@ -360,4 +360,6 @@ MigrationBackup/
 .ionide/
 
 # Fody - auto-generated XML schema
-FodyWeavers.xsd
+FodyWeavers.xsd
+
+shellui-installation-tests/

Directory.Build.props

@@ -2,7 +2,7 @@
 <Project>
   <!-- Centralized ShellUI Version - Update this single file to version all components -->
   <PropertyGroup>
-    <ShellUIVersion>0.1.1</ShellUIVersion>
+    <ShellUIVersion>0.2.0</ShellUIVersion>
     <ShellUIVersionSuffix></ShellUIVersionSuffix>
   </PropertyGroup>
 

NET9/BlazorInteractiveServer/BlazorInteractiveServer.csproj

@@ -8,6 +8,7 @@
 
   <ItemGroup>
     <PackageReference Include="System.Linq.Dynamic.Core" Version="1.6.9" />
+    <PackageReference Include="Blazor-ApexCharts" Version="6.0.2" />
   </ItemGroup>
 
   <!-- Removed NuGet/Project reference - using CLI-installed components instead -->

NET9/BlazorInteractiveServer/Components/Demo/ChartsDemo.razor

@@ -0,0 +1,141 @@
+@using BlazorInteractiveServer.Components.UI
+@using BlazorInteractiveServer.Components.UI.Variants
+@using ApexCharts
+
+<section class="border border-border rounded-lg p-6 bg-card">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Bar Chart</h2>
+    <BarChart TItem="SalesData"
+              Data="SalesData"
+              Title="Monthly Sales"
+              Name="Sales"
+              XValue="e => e.Month"
+              YValue="e => e.Amount"
+              Height="300px" />
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Line Chart</h2>
+    <LineChart TItem="SalesData"
+              Data="SalesData"
+              Title="Monthly Revenue Trend"
+              Name="Revenue"
+              XValue="e => e.Month"
+              YValue="e => e.Amount"
+              Height="300px" />
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Area Chart</h2>
+    <AreaChart TItem="SalesData"
+               Data="SalesData"
+               Title="Monthly Growth"
+               Name="Growth"
+               Theme="ChartTheme.Colorful"
+               XValue="e => e.Month"
+               YValue="e => e.Amount"
+               Height="300px" />
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Pie Chart</h2>
+    <PieChart TItem="CategoryData"
+              Data="CategoryData"
+              Title="Market Share"
+              Name="Share"
+              XValue="e => e.Category"
+              YValue="e => e.Value"
+              Height="300px" />
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Multi-Series Chart</h2>
+    <MultiSeriesChart TItem="SalesData"
+                       Title="Revenue vs Profit"
+                       Height="300px">
+        <ChartSeries TItem="SalesData"
+                     Data="SalesData"
+                     Name="Revenue"
+                     SeriesType="SeriesType.Bar"
+                     XValue="e => e.Month"
+                     YValue="e => e.Amount" />
+        <ChartSeries TItem="SalesData"
+                     Data="ProfitData"
+                     Name="Profit"
+                     SeriesType="SeriesType.Line"
+                     XValue="e => e.Month"
+                     YValue="e => e.Amount" />
+    </MultiSeriesChart>
+</section>
+
+<section class="border border-border rounded-lg p-6 bg-card mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-card-foreground">Chart Themes</h2>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div>
+            <h3 class="text-lg font-medium mb-2">Default Theme</h3>
+            <BarChart TItem="SalesData"
+                      Data="SalesData.Take(3)"
+                      Title="Default"
+                      Theme="ChartTheme.Default"
+                      XValue="e => e.Month"
+                      YValue="e => e.Amount"
+                      Height="200px" />
+        </div>
+        <div>
+            <h3 class="text-lg font-medium mb-2">Colorful Theme</h3>
+            <BarChart TItem="SalesData"
+                      Data="SalesData.Take(3)"
+                      Title="Colorful"
+                      Theme="ChartTheme.Colorful"
+                      XValue="e => e.Month"
+                      YValue="e => e.Amount"
+                      Height="200px" />
+        </div>
+        <div>
+            <h3 class="text-lg font-medium mb-2">Monochrome Theme</h3>
+            <BarChart TItem="SalesData"
+                      Data="SalesData.Take(3)"
+                      Title="Monochrome"
+                      Theme="ChartTheme.Monochrome"
+                      XValue="e => e.Month"
+                      YValue="e => e.Amount"
+                      Height="200px" />
+        </div>
+    </div>
+</section>
+
+@code {
+    private List<SalesData> SalesData { get; set; } = new();
+    private List<SalesData> ProfitData { get; set; } = new();
+    private List<CategoryData> CategoryData { get; set; } = new();
+
+    protected override void OnInitialized()
+    {
+        SalesData = new List<SalesData>
+        {
+            new SalesData { Month = "Jan", Amount = 120 },
+            new SalesData { Month = "Feb", Amount = 150 },
+            new SalesData { Month = "Mar", Amount = 180 },
+            new SalesData { Month = "Apr", Amount = 200 },
+            new SalesData { Month = "May", Amount = 170 },
+            new SalesData { Month = "Jun", Amount = 220 }
+        };
+
+        ProfitData = new List<SalesData>
+        {
+            new SalesData { Month = "Jan", Amount = 40 },
+            new SalesData { Month = "Feb", Amount = 50 },
+            new SalesData { Month = "Mar", Amount = 60 },
+            new SalesData { Month = "Apr", Amount = 70 },
+            new SalesData { Month = "May", Amount = 55 },
+            new SalesData { Month = "Jun", Amount = 80 }
+        };
+
+        CategoryData = new List<CategoryData>
+        {
+            new CategoryData { Category = "Desktop", Value = 45 },
+            new CategoryData { Category = "Mobile", Value = 35 },
+            new CategoryData { Category = "Tablet", Value = 20 }
+        };
+    }
+
+}

NET9/BlazorInteractiveServer/Components/Demo/FileUploadDemo.razor

@@ -100,14 +100,14 @@
     private List<IBrowserFile> _imageFiles = new();
     private Dictionary<IBrowserFile, string> _imageUrls = new();
 
-    private async Task HandleFileSelection(InputFileChangeEventArgs e)
+    private void HandleFileSelection(InputFileChangeEventArgs e)
     {
         var file = e.File;
         _selectedFiles.Clear();
         _selectedFiles.Add(file);
     }
 
-    private async Task HandleMultipleFileSelection(InputFileChangeEventArgs e)
+    private void HandleMultipleFileSelection(InputFileChangeEventArgs e)
     {
         var files = e.GetMultipleFiles(5);
         _multipleFiles.Clear();

NET9/BlazorInteractiveServer/Components/Models/ChartModels.cs

@@ -0,0 +1,13 @@
+namespace BlazorInteractiveServer.Components.Models;
+
+public class SalesData
+{
+    public string Month { get; set; } = "";
+    public decimal Amount { get; set; }
+}
+
+public class CategoryData
+{
+    public string Category { get; set; } = "";
+    public decimal Value { get; set; }
+}

NET9/BlazorInteractiveServer/Components/Pages/Home.razor

@@ -1,4 +1,4 @@
-@page "/"
+@page "/"
 @using BlazorInteractiveServer.Components.UI
 @using BlazorInteractiveServer.Components.Models
 @using BlazorInteractiveServer.Components.Demo
@@ -29,6 +29,7 @@
         <FormsDemo />
         <CardsAlertsDemo />
         <BadgesDialogDemo />
+        <ChartsDemo />
     </div>
 
     <div class="mt-12 p-6 bg-muted rounded-lg border border-border">

NET9/BlazorInteractiveServer/Components/UI/AreaChart.razor

@@ -0,0 +1,26 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using ApexCharts
+@inherits Chart<TItem>
+@typeparam TItem where TItem : class
+
+<div class="@ComputedClass border border-border bg-card text-card-foreground overflow-hidden [border-radius:var(--radius)] [box-shadow:var(--shadow)]" data-chart-theme="@Theme.ToString().ToLower()">
+    <ApexChart TItem="TItem"
+               Title="@Title"
+               Options="@ChartOptions"
+               Height="@Height"
+               Width="@Width">
+        <ApexPointSeries TItem="TItem"
+                         Items="Data"
+                         Name="@Name"
+                         SeriesType="SeriesType.Area"
+                         XValue="@XValue"
+                         YValue="@YValue" />
+    </ApexChart>
+</div>
+
+@code {
+    [Parameter] public IEnumerable<TItem>? Data { get; set; }
+    [Parameter] public string Name { get; set; } = "Data";
+    [Parameter] public Func<TItem, object>? XValue { get; set; }
+    [Parameter] public Func<TItem, decimal?>? YValue { get; set; }
+}

NET9/BlazorInteractiveServer/Components/UI/BarChart.razor

@@ -0,0 +1,26 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using ApexCharts
+@inherits Chart<TItem>
+@typeparam TItem where TItem : class
+
+<div class="@ComputedClass border border-border bg-card text-card-foreground overflow-hidden [border-radius:var(--radius)] [box-shadow:var(--shadow)]" data-chart-theme="@Theme.ToString().ToLower()">
+    <ApexChart TItem="TItem"
+               Title="@Title"
+               Options="@ChartOptions"
+               Height="@Height"
+               Width="@Width">
+        <ApexPointSeries TItem="TItem"
+                         Items="Data"
+                         Name="@Name"
+                         SeriesType="SeriesType.Bar"
+                         XValue="@XValue"
+                         YValue="@YValue" />
+    </ApexChart>
+</div>
+
+@code {
+    [Parameter] public IEnumerable<TItem>? Data { get; set; }
+    [Parameter] public string Name { get; set; } = "Data";
+    [Parameter] public Func<TItem, object>? XValue { get; set; }
+    [Parameter] public Func<TItem, decimal?>? YValue { get; set; }
+}

NET9/BlazorInteractiveServer/Components/UI/Chart.razor

@@ -0,0 +1,59 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using ApexCharts
+@using BlazorInteractiveServer.Components.UI.Variants
+@typeparam TItem where TItem : class
+
+<div class="@ComputedClass" data-chart-theme="@Theme.ToString().ToLower()">
+    <ApexChart TItem="TItem"
+               Title="@Title"
+               Options="@ChartOptions"
+               Height="@Height"
+               Width="@Width">
+        @ChildContent
+    </ApexChart>
+</div>
+
+@code {
+    [Parameter] public ChartTheme Theme { get; set; } = ChartTheme.Default;
+    [Parameter] public string? Title { get; set; }
+    [Parameter] public string? Subtitle { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter] public string? Height { get; set; } = "400px";
+    [Parameter] public string? Width { get; set; } = "100%";
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    private ApexCharts.ApexChartOptions<TItem>? _chartOptions;
+
+    protected ApexCharts.ApexChartOptions<TItem> ChartOptions
+    {
+        get
+        {
+            if (_chartOptions == null)
+            {
+                _chartOptions = ChartVariants.GetOptions<TItem>(Theme);
+
+                // Apply title if provided
+                if (!string.IsNullOrEmpty(Title))
+                {
+                    _chartOptions.Title = _chartOptions.Title ?? new ApexCharts.Title();
+                    _chartOptions.Title.Text = Title;
+                }
+
+                // Apply subtitle if provided
+                if (!string.IsNullOrEmpty(Subtitle))
+                {
+                    _chartOptions.Subtitle = _chartOptions.Subtitle ?? new ApexCharts.Subtitle();
+                    _chartOptions.Subtitle.Text = Subtitle;
+                }
+            }
+            return _chartOptions;
+        }
+        set => _chartOptions = value;
+    }
+
+    protected string ComputedClass => Shell.Cn(
+        "border border-border bg-card text-card-foreground overflow-hidden",
+        "[border-radius:var(--radius)] [box-shadow:var(--shadow)]",
+        Class
+    );
+}

NET9/BlazorInteractiveServer/Components/UI/ChartSeries.razor

@@ -0,0 +1,18 @@
+@namespace BlazorInteractiveServer.Components.UI
+@using ApexCharts
+@typeparam TItem where TItem : class
+
+<ApexPointSeries TItem="TItem"
+                 Items="Data"
+                 Name="@Name"
+                 SeriesType="@SeriesType"
+                 XValue="@XValue"
+                 YValue="@YValue" />
+
+@code {
+    [Parameter] public IEnumerable<TItem>? Data { get; set; }
+    [Parameter] public string Name { get; set; } = "Series";
+    [Parameter] public SeriesType SeriesType { get; set; } = SeriesType.Line;
+    [Parameter] public Func<TItem, object>? XValue { get; set; }
+    [Parameter] public Func<TItem, decimal?>? YValue { get; set; }
+}