ColorBuilder updates

BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor

@@ -9,8 +9,11 @@
     A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.
 </div>
 
-<SectionHeading Size="HeadingSize.H4" Text="Examples" PageUrl="@pageUrl" HashTagName="Examples" />
-<Demo Type="typeof(Charts_Demo_01_BarChart_Examples)" Tabs="true" />
+<SectionHeading Size="HeadingSize.H4" Text="Example with static colors" PageUrl="@pageUrl" HashTagName="example-with-static-colors" />
+<Demo Type="typeof(Charts_Demo_01_Static_Colors)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H4" Text="Example with dynamic colors" PageUrl="@pageUrl" HashTagName="example-with-dynamic-colors" />
+<Demo Type="typeof(Charts_Demo_02_Dynamic_Colors)" Tabs="true" />
 
 @code {
     private string pageUrl = "/charts/bar-chart";

BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor

@@ -0,0 +1,167 @@
+@using BlazorBootstrap.Extensions
+@using BlazorBootstrap.Utilities;
+
+<BarChart @ref="barChart" Width="800" Class="mb-4" />
+
+<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
+<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
+<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>
+<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</Button>
+<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</Button>
+
+@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(random.Next(200));
+                }
+
+                barChartDataset.Data = newData;
+                newDatasets.Add(barChartDataset);
+            }
+        }
+
+        chartData.Datasets = newDatasets;
+
+        await barChart.UpdateAsync(chartData, barChartOptions);
+    }
+
+    private async Task AddDatasetAsync()
+    {
+        if (chartData is null || chartData.Datasets is null) return;
+
+        var chartDataset = GetRandomBarChartDataset();
+        chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions);
+    }
+
+    private async Task AddDataAsync()
+    {
+        if (chartData is null || chartData.Datasets is null)
+            return;
+
+        if (labelsCount >= 12)
+            return;
+
+        var data = new List<ChartDatasetData>();
+        foreach (var dataset in chartData.Datasets)
+        {
+            if (dataset is BarChartDataset barChartDataset)
+                data.Add(new ChartDatasetData(barChartDataset.Label, random.Next(200)));
+        }
+
+        chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data);
+    }
+
+    private async Task ShowHorizontalBarChartAsync()
+    {
+        barChartOptions.IndexAxis = "y";
+        await barChart.UpdateAsync(chartData, barChartOptions);
+    }
+
+    private async Task ShowVerticalBarChartAsync()
+    {
+        barChartOptions.IndexAxis = "x";
+        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()
+    {
+        // random color
+        var c = ColorBuilder.TwelveColors[datasetsCount].ToColor();
+
+        datasetsCount += 1;
+
+        Console.WriteLine($"Bar Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}");
+
+        return new BarChartDataset()
+            {
+                Label = $"Product {datasetsCount}",
+                Data = GetRandomData(),
+                BackgroundColor = new List<string> { c.ToRgbString() },
+                BorderColor = new List<string> { c.ToRgbString() },
+                BorderWidth = new List<double> { 0 },
+            };
+    }
+
+    private List<double> GetRandomData()
+    {
+        var data = new List<double>();
+        for (var index = 0; index < labelsCount; index++)
+        {
+            data.Add(random.Next(200));
+        }
+
+        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];
+    }
+
+    #endregion Data Preparation
+}

blazorbootstrap/Extensions/ColorExtensions.cs

@@ -36,4 +36,11 @@ public static class ColorExtensions
     /// <param name="alpha">The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).</param>
     /// <returns>RGBA(R, G, B, A) format string</returns>
     public static string ToRgbaString(this Color c, double alpha = 0.2) => $"RGBA({c.R}, {c.G}, {c.B}, {alpha})";
+
+    /// <summary>
+    /// Converts an Html color representation to a GDI+ <see cref='Color'/>.
+    /// </summary>
+    /// <param name="hex"></param>
+    /// <returns>Converts #RRGGBB string to <see cref='Color'/>.</returns>
+    public static Color ToColor(this string hex) => System.Drawing.ColorTranslator.FromHtml(hex);
 }

blazorbootstrap/Utilities/ColorBuilder.cs

@@ -0,0 +1,42 @@
+namespace BlazorBootstrap.Utilities;
+
+public static class ColorBuilder
+{
+    /// <summary>
+    /// Returns 6 #RRGGBB colors.
+    /// <seealso cref="https://spectrum.adobe.com/page/color-for-data-visualization/"/>
+    /// </summary>
+    public static string[] SixColors => new string[] {
+        "#0fb5ae",
+        "#4046ca",
+        "#f68511",
+        "#de3d82",
+        "#7e84fa",
+        "#72e06a",
+        "#147af3",
+        "#7326d3",
+        "#e8c600",
+        "#e8c600",
+        "#e8c600",
+        "#e8c600"
+    };
+
+    /// <summary>
+    /// Returns 12 #RRGGBB colors.
+    /// <seealso cref="https://spectrum.adobe.com/page/color-for-data-visualization/"/>
+    /// </summary>
+    public static string[] TwelveColors => new string[] {
+        "#0fb5ae",
+        "#4046ca",
+        "#f68511",
+        "#de3d82",
+        "#7e84fa",
+        "#72e06a",
+        "#147af3",
+        "#7326d3",
+        "#e8c600",
+        "#e8c600",
+        "#e8c600",
+        "#e8c600"
+    };
+}