Add animation support to BarChart components and docs

This commit introduces new sections in the `BarChartDocumentation.razor` file to document animations related to chart delays, including "Animations - Delay" and "Animations - DataSet level delay".

New `Animation` properties of type `ChartAnimation?` are added to the `ChartDataset<TData>` and `ChartOptions` classes, allowing for configurable animations with detailed XML documentation.

The `ChartAnimation` class is introduced, featuring properties like `Delay`, `Duration`, `Easing`, and `Loop`, each with comprehensive documentation.

Demo files `BarChart_Demo_07_Animations_A_Delay.razor` and `BarChart_Demo_08_Animations_B_DataSet_Level_Delay.razor` are updated to showcase animation settings, with the first demo applying a global delay and the second demonstrating dataset-level customization.

Additionally, several properties in the `ChartOptions` class have had their `[Parameter]` attributes removed, reflecting a change in their intended usage.

NOTE: This commit message is auto-generated using GitHub Copilot.

Author: gvreddy04

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor

@@ -106,6 +106,20 @@
     <Demo Type="typeof(BarChart_Demo_06_Border_Radius)" Tabs="true" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - Delay" PageUrl="@pageUrl" Link="animations-delay">
+    <Block>
+        TODO: Update the description once the demo is implemented.
+    </Block>
+    <Demo Type="typeof(BarChart_Demo_07_Animations_A_Delay)" Tabs="true" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - DataSet level delay" PageUrl="@pageUrl" Link="animations-dataset-level-delay">
+    <Block>
+        TODO: Update the description once the demo is implemented.
+    </Block>
+    <Demo Type="typeof(BarChart_Demo_08_Animations_B_DataSet_Level_Delay)" Tabs="true" />
+</Section>
+
 @code {
     private const string pageUrl = DemoRouteConstants.Demos_BarChart;
     private const string pageUrl2 = DemoRouteConstants.Demos_Prefix;

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_07_Animations_A_Delay.razor

@@ -0,0 +1,71 @@
+<BarChart @ref="barChart" Width="600" />
+
+@code {
+    private BarChart barChart = default!;
+    private BarChartOptions barChartOptions = default!;
+    private ChartData chartData = default!;
+
+    protected override void OnInitialized()
+    {
+        var colors = ColorUtility.CategoricalTwelveColors;
+
+        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
+        var datasets = new List<IChartDataset>();
+
+        var dataset1 = new BarChartDataset()
+        {
+            Label = "Windows",
+            Data = new List<double?> { 28000, 8000, 2000, 17000 },
+            BackgroundColor = new List<string> { colors[3] },
+            BorderColor = new List<string> { colors[3] },
+            BorderWidth = new List<double> { 0 }
+        };
+        datasets.Add(dataset1);
+
+        var dataset2 = new BarChartDataset()
+        {
+            Label = "macOS",
+            Data = new List<double?> { 8000, 10000, 14000, 8000 },
+            BackgroundColor = new List<string> { colors[4] },
+            BorderColor = new List<string> { colors[4] },
+            BorderWidth = new List<double> { 0 }
+        };
+        datasets.Add(dataset2);
+
+        var dataset3 = new BarChartDataset()
+        {
+            Label = "Other",
+            Data = new List<double?> { 28000, 10000, 14000, 8000 },
+            BackgroundColor = new List<string> { colors[5] },
+            BorderColor = new List<string> { colors[5] },
+            BorderWidth = new List<double> { 0 }
+        };
+        datasets.Add(dataset3);
+
+        chartData = new ChartData { Labels = labels, Datasets = datasets };
+
+        barChartOptions = new();
+        barChartOptions.Responsive = true;
+        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
+
+        barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
+        barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
+
+        barChartOptions.Scales.X.Stacked = true;
+        barChartOptions.Scales.Y.Stacked = true;
+
+        barChartOptions.Plugins.Title!.Text = "Operating system";
+        barChartOptions.Plugins.Title.Display = true;
+
+        barChartOptions.Animation = new ChartAnimation { Duration = 1000, Delay = 1500 };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await barChart.InitializeAsync(chartData, barChartOptions);
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+}

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_08_Animations_B_DataSet_Level_Delay.razor

@@ -0,0 +1,72 @@
+<BarChart @ref="barChart" Width="600" />
+
+@code {
+    private BarChart barChart = default!;
+    private BarChartOptions barChartOptions = default!;
+    private ChartData chartData = default!;
+
+    protected override void OnInitialized()
+    {
+        var colors = ColorUtility.CategoricalTwelveColors;
+
+        var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
+        var datasets = new List<IChartDataset>();
+
+        var dataset1 = new BarChartDataset()
+        {
+            Label = "Windows",
+            Data = new List<double?> { 28000, 8000, 2000, 17000 },
+            BackgroundColor = new List<string> { colors[6] },
+            BorderColor = new List<string> { colors[6] },
+            BorderWidth = new List<double> { 0 },
+            Animation = new ChartAnimation { Duration = 1000, Delay = 500 }
+        };
+        datasets.Add(dataset1);
+
+        var dataset2 = new BarChartDataset()
+        {
+            Label = "macOS",
+            Data = new List<double?> { 8000, 10000, 14000, 8000 },
+            BackgroundColor = new List<string> { colors[7] },
+            BorderColor = new List<string> { colors[7] },
+            BorderWidth = new List<double> { 0 },
+            Animation = new ChartAnimation { Duration = 1000, Delay = 1000 }
+        };
+        datasets.Add(dataset2);
+
+        var dataset3 = new BarChartDataset()
+        {
+            Label = "Other",
+            Data = new List<double?> { 28000, 10000, 14000, 8000 },
+            BackgroundColor = new List<string> { colors[8] },
+            BorderColor = new List<string> { colors[8] },
+            BorderWidth = new List<double> { 0 },
+            Animation = new ChartAnimation { Duration = 1000, Delay = 1500 }
+        };
+        datasets.Add(dataset3);
+
+        chartData = new ChartData { Labels = labels, Datasets = datasets };
+
+        barChartOptions = new();
+        barChartOptions.Responsive = true;
+        barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
+
+        barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
+        barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
+
+        barChartOptions.Scales.X.Stacked = true;
+        barChartOptions.Scales.Y.Stacked = true;
+
+        barChartOptions.Plugins.Title!.Text = "Operating system";
+        barChartOptions.Plugins.Title.Display = true;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await barChart.InitializeAsync(chartData, barChartOptions);
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+}

BlazorExpress.ChartJS/Models/ChartDataset/ChartDataset.cs

@@ -19,6 +19,13 @@ public ChartDataset()
 
     #region Properties, Indexers
 
+    /// <summary>
+    /// Chart.js animates charts out of the box. 
+    /// A number of options are provided to configure how the animation looks and how long it takes.
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public ChartAnimation? Animation { get; set; }
+
     /// <summary>
     /// How to clip relative to chartArea. Positive value allows overflow, negative value clips that 
     /// many pixels inside chartArea. 0 = clip at chartArea.  Clipping can also be configured 

BlazorExpress.ChartJS/Models/ChartOptions/ChartOptions.cs

@@ -12,6 +12,13 @@ public class ChartOptions : IChartOptions
 {
     #region Properties, Indexers
 
+    /// <summary>
+    /// Chart.js animates charts out of the box. 
+    /// A number of options are provided to configure how the animation looks and how long it takes.
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public ChartAnimation? Animation { get; set; }
+
     //aspectRatio
     //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options
 
@@ -27,7 +34,7 @@ public class ChartOptions : IChartOptions
     [DefaultValue("By default, the chart is using the default locale of the platform which is running on.")]
     [Description("Gets or sets the locale for the chart.")]
     [ParameterTypeName("string?")]
-    [Parameter]
+    //[Parameter]
     public string? Locale { get; set; }
 
     /// <summary>
@@ -42,7 +49,7 @@ public class ChartOptions : IChartOptions
     [AddedVersion("1.0.0")]
     [DefaultValue(true)]
     [Description("Gets or sets a value indicating whether to maintain the original canvas aspect ratio (width / height) when resizing.")]
-    [Parameter]
+    //[Parameter]
     public bool MaintainAspectRatio { get; set; } = true;
 
     //onResize
@@ -63,7 +70,7 @@ public class ChartOptions : IChartOptions
     [AddedVersion("1.0.0")]
     [DefaultValue(true)]
     [Description("Gets or sets a value indicating whether the chart canvas should resize when its container does.")]
-    [Parameter]
+    //[Parameter]
     public bool Responsive { get; set; } = true;
 
     #endregion
@@ -86,7 +93,7 @@ public class ChartLayout
     [AddedVersion("1.0.0")]
     [DefaultValue(true)]
     [Description("Gets or sets a value indicating whether to apply automatic padding so visible elements are completely drawn.")]
-    [Parameter]
+    //[Parameter]
     public bool AutoPadding { get; set; } = true;
 
     /// <summary>
@@ -98,7 +105,7 @@ public class ChartLayout
     [AddedVersion("1.0.0")]
     [DefaultValue(0)]
     [Description("Gets or sets the padding to add inside the chart.")]
-    [Parameter]
+    //[Parameter]
     public int Padding { get; set; } = 0;
 
     #endregion
@@ -610,7 +617,7 @@ public TitleAlignment TitleAlignment
 }
 
 /// <summary>
-///     <see href="https://www.chartjs.org/docs/latest/general/fonts.html" />
+/// <see href="https://www.chartjs.org/docs/latest/general/fonts.html" />
 /// </summary>
 public class ChartFont
 {
@@ -650,3 +657,50 @@ public class ChartFont
 
     #endregion
 }
+
+/// <summary>
+/// Chart.js animates charts out of the box. 
+/// A number of options are provided to configure how the animation looks and how long it takes.
+/// <see href="https://www.chartjs.org/docs/latest/configuration/animations.html#animations" />
+/// </summary>
+public class ChartAnimation
+{
+    /// <summary>
+    /// Delay before starting the animations.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// </summary>
+    public double? Delay { get; set; } = null;
+
+    /// <summary>
+    /// The number of milliseconds an animation takes.
+    /// <para>
+    /// Default value is 1000
+    /// </para>
+    /// </summary>
+    public double Duration { get; set; } = 1000;
+
+    /// <summary>
+    /// Easing function to use.
+    /// <para>
+    /// Default value is "easeOutQuart". 
+    /// </para>
+    /// <para>
+    /// Supported values are: 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInExpo', 'easeOutExpo', 'easeInOutExpo', 'easeInCirc', 'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', and 'easeInOutBounce'.
+    /// </para>
+    /// <see href="https://www.chartjs.org/docs/latest/configuration/animations.html#easing" />
+    /// </summary>
+    public string Easing { get; set; } = "easeOutQuart";
+
+    /// <summary>
+    /// If set to <see langword="true"/>, the animations loop endlessly.
+    /// <para>
+    /// Default value is <see langword="null" />.
+    /// </para>
+    /// </summary>
+    public bool? Loop { get; set; } = null;
+
+    //Animation Callbacks
+    //https://www.chartjs.org/docs/latest/configuration/animations.html#animation-callbacks
+}