From e6fb7282e339c724f65647ae47202efeda5a10ce Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 28 Jul 2023 21:56:40 +0530 Subject: [PATCH] ColorBuilder updates --- .../BarCharts/ChartsDocumentation.razor | 7 +- .../Charts_Demo_01_Static_Colors.razor | 167 ++++++++++++++++++ ...or => Charts_Demo_02_Dynamic_Colors.razor} | 0 blazorbootstrap/Extensions/ColorExtensions.cs | 7 + blazorbootstrap/Utilities/ColorBuilder.cs | 42 +++++ 5 files changed, 221 insertions(+), 2 deletions(-) create mode 100644 BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor rename BlazorBootstrap.Demo/Pages/Charts/BarCharts/{Charts_Demo_01_BarChart_Examples.razor => Charts_Demo_02_Dynamic_Colors.razor} (100%) create mode 100644 blazorbootstrap/Utilities/ColorBuilder.cs diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor index eeb4f0082..c5965000e 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor +++ b/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. - - + + + + + @code { private string pageUrl = "/charts/bar-chart"; diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor new file mode 100644 index 000000000..1a07b26cc --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor @@ -0,0 +1,167 @@ +@using BlazorBootstrap.Extensions +@using BlazorBootstrap.Utilities; + + + + + + + + + +@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(); + + 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(); + 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(); + 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 GetDefaultDataSets(int numberOfDatasets) + { + var datasets = new List(); + + 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 { c.ToRgbString() }, + BorderColor = new List { c.ToRgbString() }, + BorderWidth = new List { 0 }, + }; + } + + private List GetRandomData() + { + var data = new List(); + for (var index = 0; index < labelsCount; index++) + { + data.Add(random.Next(200)); + } + + return data; + } + + private List GetDefaultDataLabels(int numberOfLabels) + { + var labels = new List(); + for (var index = 0; index < numberOfLabels; index++) + { + labels.Add(GetNextDataLabel()); + } + + return labels; + } + + private string GetNextDataLabel() + { + labelsCount += 1; + return months[labelsCount - 1]; + } + + #endregion Data Preparation +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_BarChart_Examples.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_02_Dynamic_Colors.razor similarity index 100% rename from BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_BarChart_Examples.razor rename to BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_02_Dynamic_Colors.razor diff --git a/blazorbootstrap/Extensions/ColorExtensions.cs b/blazorbootstrap/Extensions/ColorExtensions.cs index 836b0135f..a587b7405 100644 --- a/blazorbootstrap/Extensions/ColorExtensions.cs +++ b/blazorbootstrap/Extensions/ColorExtensions.cs @@ -36,4 +36,11 @@ public static class ColorExtensions /// The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). /// RGBA(R, G, B, A) format string public static string ToRgbaString(this Color c, double alpha = 0.2) => $"RGBA({c.R}, {c.G}, {c.B}, {alpha})"; + + /// + /// Converts an Html color representation to a GDI+ . + /// + /// + /// Converts #RRGGBB string to . + public static Color ToColor(this string hex) => System.Drawing.ColorTranslator.FromHtml(hex); } diff --git a/blazorbootstrap/Utilities/ColorBuilder.cs b/blazorbootstrap/Utilities/ColorBuilder.cs new file mode 100644 index 000000000..e0791be03 --- /dev/null +++ b/blazorbootstrap/Utilities/ColorBuilder.cs @@ -0,0 +1,42 @@ +namespace BlazorBootstrap.Utilities; + +public static class ColorBuilder +{ + /// + /// Returns 6 #RRGGBB colors. + /// + /// + public static string[] SixColors => new string[] { + "#0fb5ae", + "#4046ca", + "#f68511", + "#de3d82", + "#7e84fa", + "#72e06a", + "#147af3", + "#7326d3", + "#e8c600", + "#e8c600", + "#e8c600", + "#e8c600" + }; + + /// + /// Returns 12 #RRGGBB colors. + /// + /// + public static string[] TwelveColors => new string[] { + "#0fb5ae", + "#4046ca", + "#f68511", + "#de3d82", + "#7e84fa", + "#72e06a", + "#147af3", + "#7326d3", + "#e8c600", + "#e8c600", + "#e8c600", + "#e8c600" + }; +} \ No newline at end of file