feat: apex chart restyle — shadcn aesthetic, 3 new chart types, sleek tooltips

NET10/BlazorInteractiveServer/Components/Demo/ChartsDemo.razor

@@ -67,6 +67,39 @@
     </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">Donut Chart</h2>
+    <DonutChart TItem="CategoryData"
+                Data="CategoryData"
+                Title="Traffic by Device"
+                Name="Traffic"
+                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">Radar Chart</h2>
+    <RadarChart TItem="SkillItem"
+                Data="Skills"
+                Title="Frontend Skills"
+                Name="Level"
+                XValue="e => e.Skill"
+                YValue="e => e.Level"
+                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">Radial Chart</h2>
+    <RadialChart TItem="ProgressItem"
+                 Data="Progress"
+                 Title="Quarterly Goal"
+                 Name="Progress"
+                 XValue="e => e.Label"
+                 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">Chart Themes</h2>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -107,6 +140,11 @@
     private List<SalesData> SalesData { get; set; } = new();
     private List<SalesData> ProfitData { get; set; } = new();
     private List<CategoryData> CategoryData { get; set; } = new();
+    private List<SkillItem> Skills { get; set; } = new();
+    private List<ProgressItem> Progress { get; set; } = new();
+
+    public class SkillItem { public string Skill { get; set; } = ""; public decimal Level { get; set; } }
+    public class ProgressItem { public string Label { get; set; } = ""; public decimal Value { get; set; } }
 
     protected override void OnInitialized()
     {
@@ -136,6 +174,21 @@
             new CategoryData { Category = "Mobile", Value = 35 },
             new CategoryData { Category = "Tablet", Value = 20 }
         };
+
+        Skills = new List<SkillItem>
+        {
+            new SkillItem { Skill = "React", Level = 85 },
+            new SkillItem { Skill = "TypeScript", Level = 90 },
+            new SkillItem { Skill = "CSS", Level = 80 },
+            new SkillItem { Skill = "Testing", Level = 65 },
+            new SkillItem { Skill = "Design", Level = 70 },
+            new SkillItem { Skill = "Perf", Level = 75 }
+        };
+
+        Progress = new List<ProgressItem>
+        {
+            new ProgressItem { Label = "Q4 Goal", Value = 72 }
+        };
     }
 
 }

NET10/BlazorInteractiveServer/Components/UI/Chart.razor

@@ -20,6 +20,10 @@
     [Parameter] public string? Class { get; set; }
     [Parameter] public string? Height { get; set; } = "400px";
     [Parameter] public string? Width { get; set; } = "100%";
+    /// Show ApexCharts' zoom/pan/download toolbar. Off by default (shadcn aesthetic).
+    [Parameter] public bool ShowToolbar { get; set; }
+    /// Show the series legend. Defaults to true; set false on single-series charts for a cleaner look.
+    [Parameter] public bool ShowLegend { get; set; } = true;
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
     private ApexCharts.ApexChartOptions<TItem>? _chartOptions;
@@ -30,7 +34,7 @@
         {
             if (_chartOptions == null)
             {
-                _chartOptions = ChartVariants.GetOptions<TItem>(Theme);
+                _chartOptions = ChartVariants.GetOptions<TItem>(Theme, ShowToolbar, ShowLegend);
 
                 // Apply title if provided
                 if (!string.IsNullOrEmpty(Title))

NET10/BlazorInteractiveServer/Components/UI/DonutChart.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.Donut"
+                         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; }
+}

NET10/BlazorInteractiveServer/Components/UI/PieChart.razor

@@ -27,33 +27,9 @@
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
-
         if (ChartOptions.Chart != null)
         {
             ChartOptions.Chart.Type = ApexCharts.ChartType.Pie;
         }
-
-        /* Custom tooltip for pie chart */
-        ChartOptions.Tooltip = new ApexCharts.Tooltip
-        {
-            Enabled = true,
-            Style = new ApexCharts.TooltipStyle
-            {
-                FontSize = "12px"
-            },
-            Custom = @"function({ series, seriesIndex, dataPointIndex, w }) {
-                const label = w.globals.labels[seriesIndex];
-                const value = series[seriesIndex];
-                const color = w.config.colors[seriesIndex];
-
-                return '<div class=""custom-tooltip"">' +
-                       '<div class=""custom-tooltip-item"">' +
-                       '<span class=""custom-tooltip-marker"" style=""background-color: ' + color + ';""></span>' +
-                       '<span class=""custom-tooltip-label"">' + label + ':</span>' +
-                       '<span class=""custom-tooltip-value"">' + value + '</span>' +
-                       '</div>' +
-                       '</div>';
-            }"
-        };
     }
 }

NET10/BlazorInteractiveServer/Components/UI/RadarChart.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.Radar"
+                         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; }
+}

NET10/BlazorInteractiveServer/Components/UI/RadialChart.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.RadialBar"
+                         XValue="@XValue"
+                         YValue="@YValue" />
+    </ApexChart>
+</div>
+
+@code {
+    [Parameter] public IEnumerable<TItem>? Data { get; set; }
+    [Parameter] public string Name { get; set; } = "Progress";
+    [Parameter] public Func<TItem, object>? XValue { get; set; }
+    [Parameter] public Func<TItem, decimal?>? YValue { get; set; }
+}