Charts enhancements

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

@@ -19,12 +19,14 @@
         The <strong>Bar Chart</strong> component visualizes data as vertical bars, making it easy to compare values across categories or track changes over time.
         <br /><br />
         <strong>How to use:</strong>
-        <ul>
-            <li>Add the <code>BarChart</code> component to your page.</li>
-            <li>Provide <code>Labels</code> for the X-axis categories and one or more <code>Datasets</code> for the Y-axis values.</li>
-            <li>Customize appearance and behavior using the <code>Options</code> property (e.g., colors, tooltips, axis settings).</li>
-            <li>Refer to the demo code for examples of basic and advanced usage, including multiple datasets and custom styling.</li>
-        </ul>
+        <div class="content">
+            <ol>
+                <li>Add the <code>BarChart</code> component to your page.</li>
+                <li>Provide <code>Labels</code> for the X-axis categories and one or more <code>Datasets</code> for the Y-axis values.</li>
+                <li>Customize appearance and behavior using the <code>Options</code> property (e.g., colors, tooltips, axis settings).</li>
+                <li>Refer to the demo code for examples of basic and advanced usage, including multiple datasets and custom styling.</li>
+            </ol>
+        </div>
         This demo showcases the essential setup for a bar chart and demonstrates how to bind your data for quick visualization.
     </Block>
     <Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
@@ -35,11 +37,13 @@
         The <strong>Horizontal Bar Chart</strong> displays data values as horizontal bars, making it ideal for comparing categories with long labels or when you want to emphasize comparison between values.
         <br /><br />
         <strong>How to use:</strong>
-        <ul>
-            <li>Use the <code>BarChart</code> component and set the <code>IndexAxis</code> option to <code>'y'</code> to render bars horizontally.</li>
-            <li>Provide your data and labels as you would for a standard bar chart.</li>
-            <li>Customize colors and appearance using the available palette utilities or your own color set.</li>
-        </ul>
+        <div class="content">
+            <ol>
+                <li>Use the <code>BarChart</code> component and set the <code>IndexAxis</code> option to <code>'y'</code> to render bars horizontally.</li>
+                <li>Provide your data and labels as you would for a standard bar chart.</li>
+                <li>Customize colors and appearance using the available palette utilities or your own color set.</li>
+            </ol>
+        </div>
         Refer to the demo code below for a working example and configuration options.
     </Block>
     <Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" Tabs="true" />
@@ -50,12 +54,14 @@
         The <strong>Stacked Bar Chart</strong> allows you to display multiple data series stacked on top of each other, making it easy to compare the total and individual contributions of each series for every category.
         <br /><br />
         <strong>How to use:</strong>
-        <ul>
-            <li>Use the <code>BarChart</code> component and configure the <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> properties to <code>true</code> to enable stacking.</li>
-            <li>Provide multiple datasets in your chart data, each representing a different series to be stacked.</li>
-            <li>Customize colors for each dataset using palette utilities or your own color set for better distinction.</li>
-            <li>Refer to the demo code below for a working example and further configuration options.</li>
-        </ul>
+        <div class="content">
+            <ol>
+                <li>Use the <code>BarChart</code> component and configure the <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> properties to <code>true</code> to enable stacking.</li>
+                <li>Provide multiple datasets in your chart data, each representing a different series to be stacked.</li>
+                <li>Customize colors for each dataset using palette utilities or your own color set for better distinction.</li>
+                <li>Refer to the demo code below for a working example and further configuration options.</li>
+            </ol>
+        </div>
     </Block>
     <Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />
 </Section>
@@ -78,25 +84,82 @@
 
 <Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
     <Block>
-        The <strong>Locale</strong> demo shows how to localize number and date formatting in your bar chart. 
+        The <strong>Locale</strong> demo shows how to localize number and date formatting in your bar chart.
         <br /><br />
         <strong>How to use:</strong>
-        <ul>
-            <li>Set the <code>Locale</code> property on the <code>BarChart</code> component to your desired culture code (e.g., <code>"fr-FR"</code> for French).</li>
-            <li>Number and date labels in the chart will automatically format according to the specified locale.</li>
-            <li>This is useful for displaying charts to users in different regions with appropriate formatting.</li>
-        </ul>
+        <div class="content">
+            <ol>
+                <li>Set the <code>Locale</code> property on the <code>BarChart</code> component to your desired culture code (e.g., <code>"fr-FR"</code> for French).</li>
+                <li>Number and date labels in the chart will automatically format according to the specified locale.</li>
+                <li>This is useful for displaying charts to users in different regions with appropriate formatting.</li>
+            </ol>
+        </div>
         Refer to the demo code below for a working example and configuration options.
     </Block>
     <Demo Type="typeof(BarChart_Demo_05_Locale)" Tabs="true" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Border radius" PageUrl="@pageUrl" Link="border-radius">
+    <Block>
+        The <strong>Border Radius</strong> feature allows you to create bar charts with rounded corners, giving your charts a modern and visually appealing look. This is especially useful for dashboards and applications where aesthetics are important.
+        <br /><br />
+        <strong>How to use:</strong>
+        <div class="content">
+            <ol>
+                <li>Add the <code>BarChart</code> component to your page.</li>
+                <li>When defining each <code>BarChartDataset</code>, set the <code>BorderRadius</code> property to a list of pixel values (e.g., <code>new List&lt;double&gt; { 10 }</code>) to control the roundness of the bar corners.</li>
+                <li>Optionally, set <code>BorderSkipped = false</code> to apply the border radius to all corners of each bar.</li>
+                <li>Customize other appearance options such as <code>BackgroundColor</code> and <code>BorderColor</code> as needed.</li>
+                <li>Refer to the demo code below for a working example and further customization options.</li>
+            </ol>
+        </div>
+        Using the <code>BorderRadius</code> property, you can easily enhance the style of your bar charts to better match your application's design.
+    </Block>
+    <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>
+        The <strong>Animations - Delay</strong> demo illustrates how to add a delay to the animation of your Bar Chart, making the chart elements appear with a timed entrance effect. This is useful for drawing attention to the chart as it loads or for creating a more engaging user experience.
+        <br /><br />
+        <strong>How to use:</strong>
+        <div class="content">
+            <ol>
+                <li>Add the <code>BarChart</code> component to your page and define your <code>Labels</code> and <code>Datasets</code> as usual.</li>
+                <li>Configure the <code>Options.Animation</code> property by setting the <code>Duration</code> (in milliseconds) and <code>Delay</code> (in milliseconds) to control the timing of the animation.</li>
+                <li>Bind your <code>chartData</code> and <code>barChartOptions</code> to the <code>BarChart</code> component.</li>
+                <li>Refer to the demo code below for a working example of how to set up and customize animation delays.</li>
+            </ol>
+        </div>
+        Animation delays help you create visually appealing transitions and can be tailored to fit your application's style.
+    </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>
+        The <strong>Animations - DataSet Level Delay</strong> demo demonstrates how to apply different animation delays to each dataset in your Bar Chart. This allows each dataset to animate in sequence, making comparisons clearer and adding a dynamic effect to your data presentation.
+        <br /><br />
+        <strong>How to use:</strong>
+        <div class="content">
+            <ol>
+                <li>Add the <code>BarChart</code> component to your page and define your <code>Labels</code> and multiple <code>Datasets</code>.</li>
+                <li>For each dataset, set the <code>Animation</code> property with specific <code>Duration</code> and <code>Delay</code> values to control when each dataset animates.</li>
+                <li>Bind your <code>chartData</code> and <code>barChartOptions</code> to the <code>BarChart</code> component.</li>
+                <li>Refer to the demo code below for a practical example of dataset-level animation configuration.</li>
+            </ol>
+        </div>
+        Dataset-level animation delays are ideal for highlighting differences between series and creating engaging, stepwise chart reveals.
+    </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;
     private const string pageTitle = "Bar Chart";
     private const string pageDescription = "The <code>Blazor Bar Chart</code> component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
     private const string metaTitle = "Blazor Bar Chart";
     private const string metaDescription = "The Blazor Bar Chart component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
-    private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update with the actual image URL for the Bar Chart demo
+    private const string imageUrl = @DemoImageSrcConstants.BarChart;
 }

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

@@ -0,0 +1,125 @@
+<BarChart @ref="barChart" Width="600" />
+
+<div class="mt-5">
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
+</div>
+
+@code {
+    private BarChart barChart = default!;
+    private BarChartOptions barChartOptions = default!;
+    private ChartData chartData = default!;
+
+    private int datasetsCount = 0;
+    private int labelsCount = 0;
+    private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
+    private Random random = new();
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
+        barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await barChart.InitializeAsync(chartData, barChartOptions);
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private async Task RandomizeAsync()
+    {
+        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;
+
+        var newDatasets = new List<IChartDataset>();
+
+        foreach (var dataset in chartData.Datasets)
+        {
+            if (dataset is BarChartDataset barChartDataset
+                && barChartDataset is not null
+                && barChartDataset.Data is not null)
+            {
+                var count = barChartDataset.Data.Count;
+
+                var newData = new List<double?>();
+                for (var i = 0; i < count; i++)
+                {
+                    newData.Add(NewRandom());
+                }
+
+                barChartDataset.Data = newData;
+                newDatasets.Add(barChartDataset);
+            }
+        }
+
+        chartData.Datasets = newDatasets;
+
+        await barChart.UpdateAsync(chartData, barChartOptions);
+    }
+
+    #region Data Preparation
+
+    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
+    {
+        var datasets = new List<IChartDataset>();
+
+        for (var index = 0; index < numberOfDatasets; index++)
+        {
+            datasets.Add(GetRandomBarChartDataset());
+        }
+
+        return datasets;
+    }
+
+    private BarChartDataset GetRandomBarChartDataset()
+    {
+        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
+
+        datasetsCount += 1;
+
+        return new BarChartDataset()
+        {
+            Label = $"Product {datasetsCount}",
+            Data = GetRandomData(),
+            BorderColor = new List<string> { c.ToRgbString() },
+            BackgroundColor = new List<string> { c.ToRgbaString(0.5) },
+            BorderWidth = new List<double> { 2 },
+            BorderRadius = new List<double> { 10 },
+            BorderSkipped = false
+        };
+    }
+
+    private List<double?> GetRandomData()
+    {
+        var data = new List<double?>();
+        for (var index = 0; index < labelsCount; index++)
+        {
+            data.Add(NewRandom());
+        }
+
+        return data;
+    }
+
+    private List<string> GetDefaultDataLabels(int numberOfLabels)
+    {
+        var labels = new List<string>();
+        for (var index = 0; index < numberOfLabels; index++)
+        {
+            labels.Add(GetNextDataLabel());
+        }
+
+        return labels;
+    }
+
+    private string GetNextDataLabel()
+    {
+        labelsCount += 1;
+        return months[labelsCount - 1];
+    }
+
+    private double NewRandom() => random.Next(-100, 100);
+
+    #endregion Data Preparation
+}

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);
+    }
+}