From bbf7d531d4cf9a7fb64c41632354a42e1a11b34c Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 30 Jul 2023 17:44:09 +0530 Subject: [PATCH] Charts update + demos update (#307) * Charts update + demos update --- .../BarCharts/BarChartDocumentation.razor | 40 +++++ .../BarCharts/BarChart_Demo_01_Examples.razor | 12 +- ...BarChart_Demo_02_Horizontal_BarChart.razor | 48 +++++ .../BarChart_Demo_03_Stacked_BarChart.razor | 77 ++++++++ .../BarCharts/BarChart_Demo_04_Locale.razor | 78 +++++++++ .../Pages/Charts/ChartsDocumentation.razor | 29 +-- .../Charts_Demo_01_BarChart_Examples.razor | 81 --------- .../Charts_Demo_02_BubbleChart_Examples.razor | 5 - ...harts_Demo_03_DoughnutChart_Examples.razor | 93 ---------- .../Charts_Demo_04_LineChart_Examples.razor | 82 --------- .../Charts_Demo_05_PieChart_Examples.razor | 93 ---------- ...arts_Demo_06_PolarAreaChart_Examples.razor | 5 - .../Charts_Demo_07_RadarChart_Examples.razor | 5 - ...Charts_Demo_08_ScatterChart_Examples.razor | 5 - .../DoughnutChartDocumentation.razor | 11 +- .../DoughnutChart_Demo_01_Examples.razor | 56 +++--- .../Charts_Demo_02_LineChart_Examples.razor | 105 +++++++++++ .../LineCharts/LineChartDocumentation.razor | 40 +++++ .../LineChart_Demo_01_A_Examples.razor | 10 +- .../LineChart_Demo_01_B_Examples.razor | 88 ++++++++++ .../LineCharts/LineChart_Demo_02_Locale.razor | 89 ++++++++++ .../PieCharts/PieChartDocumentation.razor | 27 +++ .../PieCharts/PieChart_Demo_01_Examples.razor | 56 +++--- .../Client/Shared/MainLayout.razor.cs | 11 +- .../Client/_Imports.razor | 2 + .../BarCharts/BarChartDocumentation.razor | 40 +++++ .../BarCharts/BarChart_Demo_01_Examples.razor | 18 +- ...BarChart_Demo_02_Horizontal_BarChart.razor | 48 +++++ .../BarChart_Demo_03_Stacked_BarChart.razor | 77 ++++++++ .../BarCharts/BarChart_Demo_04_Locale.razor | 78 +++++++++ .../Pages/Charts/ChartsDocumentation.razor | 29 +-- .../Charts_Demo_01_BarChart_Examples.razor | 81 --------- .../Charts_Demo_02_BubbleChart_Examples.razor | 5 - ...harts_Demo_03_DoughnutChart_Examples.razor | 93 ---------- .../Charts_Demo_04_LineChart_Examples.razor | 82 --------- .../Charts_Demo_05_PieChart_Examples.razor | 93 ---------- ...arts_Demo_06_PolarAreaChart_Examples.razor | 5 - .../Charts_Demo_07_RadarChart_Examples.razor | 5 - ...Charts_Demo_08_ScatterChart_Examples.razor | 5 - .../DoughnutChartDocumentation.razor | 29 +++ .../DoughnutChart_Demo_01_Examples.razor | 157 +++++++++++++++++ .../Charts_Demo_02_LineChart_Examples.razor | 105 +++++++++++ .../LineCharts/LineChartDocumentation.razor | 40 +++++ .../LineChart_Demo_01_A_Examples.razor | 165 ++++++++++++++++++ .../LineChart_Demo_01_B_Examples.razor | 88 ++++++++++ .../LineCharts/LineChart_Demo_02_Locale.razor | 89 ++++++++++ .../PieCharts/PieChartDocumentation.razor | 27 +++ .../PieCharts/PieChart_Demo_01_Examples.razor | 155 ++++++++++++++++ .../Shared/MainLayout.razor.cs | 11 +- BlazorBootstrap.Demo.Server/_Imports.razor | 2 + .../BarCharts/BarChartDocumentation.razor | 40 +++++ .../BarCharts/BarChart_Demo_01_Examples.razor | 164 +++++++++++++++++ ...BarChart_Demo_02_Horizontal_BarChart.razor | 48 +++++ .../BarChart_Demo_03_Stacked_BarChart.razor | 77 ++++++++ .../BarCharts/BarChart_Demo_04_Locale.razor | 78 +++++++++ .../BarCharts/ChartsDocumentation.razor | 27 --- .../DoughnutChartDocumentation.razor | 29 +++ .../DoughnutChart_Demo_01_Examples.razor | 157 +++++++++++++++++ .../LineCharts/ChartsDocumentation.razor | 23 --- .../Charts_Demo_02_LineChart_Examples.razor | 4 +- .../LineCharts/LineChartDocumentation.razor | 40 +++++ .../LineChart_Demo_01_A_Examples.razor | 165 ++++++++++++++++++ .../LineChart_Demo_01_B_Examples.razor | 88 ++++++++++ .../LineCharts/LineChart_Demo_02_Locale.razor | 89 ++++++++++ .../PieCharts/ChartsDocumentation.razor | 20 --- .../PieCharts/PieChartDocumentation.razor | 27 +++ .../PieCharts/PieChart_Demo_01_Examples.razor | 155 ++++++++++++++++ BlazorBootstrap.Demo/_Imports.razor | 2 + .../Components/Charts/BarChart.razor.cs | 35 ++-- .../Components/Charts/BaseChart.cs | 4 +- .../Components/Charts/BubbleChart.razor | 6 - .../Components/Charts/BubbleChart.razor.cs | 28 --- .../Components/Charts/DoughnutChart.razor.cs | 37 ++-- .../Components/Charts/LineChart.razor.cs | 33 ++-- .../Components/Charts/PieChart.razor.cs | 39 ++--- .../ChartDataset/BarChartDatasetData.cs | 8 + .../Charts/ChartDataset/ChartDatasetData.cs | 14 +- .../ChartDataset/DoughnutChartDatasetData.cs | 11 ++ .../ChartDataset/LineChartDatasetData.cs | 8 + .../ChartDataset/PieChartDatasetData.cs | 11 ++ .../Charts/ChartOptions/ChartOptions.cs | 36 +++- .../ChartOptions/DoughnutChartOptions.cs | 1 + .../Charts/ChartOptions/PieChartOptions.cs | 1 + blazorbootstrap/wwwroot/blazor.bootstrap.js | 32 ++-- 84 files changed, 3119 insertions(+), 1093 deletions(-) create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChartDocumentation.razor rename BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor => BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor (92%) create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor delete mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_01_BarChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_02_BubbleChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_03_DoughnutChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_04_LineChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_05_PieChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_06_PolarAreaChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_07_RadarChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_08_ScatterChart_Examples.razor rename BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/ChartsDocumentation.razor => BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor (57%) rename BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/Charts_Demo_01_DoughnutChart_Examples.razor => BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor (78%) create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChartDocumentation.razor rename BlazorBootstrap.Demo/Pages/Charts/LineCharts/Charts_Demo_01_LineChart_Examples.razor => BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor (93%) create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor create mode 100644 BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/PieCharts/PieChartDocumentation.razor rename BlazorBootstrap.Demo/Pages/Charts/PieCharts/Charts_Demo_01_PieChart_Examples.razor => BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor (76%) create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChartDocumentation.razor rename BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_02_Dynamic_Colors.razor => BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor (90%) create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_01_BarChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_02_BubbleChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_03_DoughnutChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_04_LineChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_05_PieChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_06_PolarAreaChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_07_RadarChart_Examples.razor delete mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_08_ScatterChart_Examples.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChartDocumentation.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChartDocumentation.razor create mode 100644 BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChartDocumentation.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor delete mode 100644 BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor delete mode 100644 BlazorBootstrap.Demo/Pages/Charts/LineCharts/ChartsDocumentation.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChartDocumentation.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor delete mode 100644 BlazorBootstrap.Demo/Pages/Charts/PieCharts/ChartsDocumentation.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/PieCharts/PieChartDocumentation.razor create mode 100644 BlazorBootstrap.Demo/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor delete mode 100644 blazorbootstrap/Components/Charts/BubbleChart.razor delete mode 100644 blazorbootstrap/Components/Charts/BubbleChart.razor.cs create mode 100644 blazorbootstrap/Models/Charts/ChartDataset/BarChartDatasetData.cs create mode 100644 blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDatasetData.cs create mode 100644 blazorbootstrap/Models/Charts/ChartDataset/LineChartDatasetData.cs create mode 100644 blazorbootstrap/Models/Charts/ChartDataset/PieChartDatasetData.cs diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChartDocumentation.razor new file mode 100644 index 000000000..f4f0037f9 --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -0,0 +1,40 @@ +@page "/charts/bar-chart" + +@title + + + +

Blazor Bar Chart

+
+ 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. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + + + + + + + + + +
+ By default, the chart is using the default locale of the platform on which it is running. + In the following example, you will see the chart in the German locale (de_DE). +
+ + +@code { + private string pageUrl = "/charts/bar-chart"; + private string title = "Blazor Bar Chart"; + private string description = "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."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor similarity index 92% rename from BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor rename to BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor index 013e49341..31b7eaf60 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_01_Static_Colors.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor @@ -1,7 +1,4 @@ -@using BlazorBootstrap.Extensions -@using BlazorBootstrap.Utilities; - - + @@ -83,11 +80,11 @@ if (labelsCount >= 12) return; - var data = new List(); + var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is BarChartDataset barChartDataset) - data.Add(new ChartDatasetData(barChartDataset.Label, random.Next(200))); + data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200))); } chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data); @@ -121,13 +118,10 @@ private BarChartDataset GetRandomBarChartDataset() { - // random color var c = ColorBuilder.CategoricalTwelveColors[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}", diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor new file mode 100644 index 000000000..fdab146fa --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor @@ -0,0 +1,48 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Data = new List { 55000, 15000, 18000, 21000 }, + BackgroundColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, + BorderColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + chartData = new ChartData { + Labels = labels, + Datasets = datasets }; + + barChartOptions = new BarChartOptions(); + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.Display = true; + + barChartOptions.Plugins.Legend.Display = false; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await barChart.InitializeAsync(chartData, barChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor new file mode 100644 index 000000000..e0ca265da --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor @@ -0,0 +1,77 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Label = "Windows", + Data = new List { 28000, 8000, 2000, 17000 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + var dataset2 = new BarChartDataset() + { + Label = "macOS", + Data = new List { 8000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset2); + + var dataset3 = new BarChartDataset() + { + Label = "Other", + Data = new List { 28000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + barChartOptions = new(); + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.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); + } +} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor new file mode 100644 index 000000000..33f723cee --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor @@ -0,0 +1,78 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Label = "Windows", + Data = new List { 28000, 8000, 2000, 17000 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + var dataset2 = new BarChartDataset() + { + Label = "macOS", + Data = new List { 8000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset2); + + var dataset3 = new BarChartDataset() + { + Label = "Other", + Data = new List { 28000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + barChartOptions = new(); + barChartOptions.Locale = "de-DE"; + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.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); + } +} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/ChartsDocumentation.razor index 82989b832..58bb25a8b 100644 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/ChartsDocumentation.razor @@ -15,10 +15,10 @@
At this moment we are supporting four blazor chart types.
    -
  1. Bar Chart
    2. -
  2. Doughnut Chart
    3. -
  3. Line Chart
    4. -
  4. Pie Chart
    5. +
  5. Bar Chart
    6. +
  6. Doughnut Chart
    7. +
  7. Line Chart
    8. +
  8. Pie Chart
@@ -26,26 +26,13 @@ -Refer starter template for charts setup. - - - - - - - - - - - - - -@* -*@ +
+ Refer starter template for charts setup. +
@code { private string pageUrl = "/charts"; private string title = "Blazor Charts"; private string description = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; -} \ No newline at end of file +} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_01_BarChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_01_BarChart_Examples.razor deleted file mode 100644 index 0a7d586fb..000000000 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_01_BarChart_Examples.razor +++ /dev/null @@ -1,81 +0,0 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - - - - - - -@code { - private BarChart barChart; - - private ChartData chartData; - private BarChartOptions chartOptions; - - Random random = new Random(); - - protected override void OnInitialized() - { - chartData = new ChartData - { - Labels = new List { "January", "February", "March", "April", "May", "June", "July" }, - Datasets = new List() - }; - - chartData.Datasets.Add(GetRandomBarChartDataset()); - chartData.Datasets.Add(GetRandomBarChartDataset()); - chartData.Datasets.Add(GetRandomBarChartDataset()); - - chartOptions = new BarChartOptions - { - Responsive = true, - Interaction = new Interaction { Mode = InteractionMode.Index } - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await barChart.InitializeAsync(chartData, chartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - chartData.Datasets.Add(GetRandomBarChartDataset()); - await barChart.UpdateAsync(chartData, chartOptions); - } - - private async Task ShowHorizontalBarChartAsync() - { - chartOptions.IndexAxis = "y"; - await barChart.UpdateAsync(chartData, chartOptions); - } - - private async Task ShowVerticalBarChartAsync() - { - chartOptions.IndexAxis = "x"; - await barChart.UpdateAsync(chartData, chartOptions); - } - - private BarChartDataset GetRandomBarChartDataset() - { - // random color - var c = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); - Console.WriteLine($"Bar Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}"); - - return new BarChartDataset() - { - Label = $"Bar chart dataset {chartData.Datasets.Count + 1}", - Data = new List { random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120) }, - BackgroundColor = new List { c.ToRgbString() }, - BorderColor = new List { c.ToRgbString() }, - BorderWidth = new List { 0 }, - }; - } -} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_02_BubbleChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_02_BubbleChart_Examples.razor deleted file mode 100644 index 633280344..000000000 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_02_BubbleChart_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ -

Charts_Demo_02_BubbleChart_Examples

- -@code { - -} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_03_DoughnutChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_03_DoughnutChart_Examples.razor deleted file mode 100644 index 19a971815..000000000 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_03_DoughnutChart_Examples.razor +++ /dev/null @@ -1,93 +0,0 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - - - - -@code { - private DoughnutChart doughnutChart; - - private ChartData chartData; - private DoughnutChartOptions chartOptions; - private List backgroundColors; - - Random random = new Random(); - - protected override void OnInitialized() - { - // prepare background colors - PrepareBackgroundColors(); - - chartData = new ChartData - { - Labels = new List { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" }, - Datasets = new List() - }; - - chartData.Datasets.Add(GetRandomDoughnutChartDataset()); - - chartOptions = new DoughnutChartOptions - { - Responsive = true, - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await doughnutChart.InitializeAsync(chartData, chartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - chartData.Datasets.Add(GetRandomDoughnutChartDataset()); - await doughnutChart.UpdateAsync(chartData, chartOptions); - } - - private DoughnutChartDataset GetRandomDoughnutChartDataset() - { - return new DoughnutChartDataset() - { - Data = new List - { - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120) - }, - BackgroundColor = new List - { - backgroundColors[0], - backgroundColors[1], - backgroundColors[2], - backgroundColors[3], - backgroundColors[4], - backgroundColors[5] - }, - }; - } - - private void PrepareBackgroundColors() - { - if (backgroundColors is null) - { - backgroundColors = new List(); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - } - } - - private Color GetRandomColor() => Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); -} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_04_LineChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_04_LineChart_Examples.razor deleted file mode 100644 index defc58adc..000000000 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_04_LineChart_Examples.razor +++ /dev/null @@ -1,82 +0,0 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - - - - - - -@code { - private LineChart lineChart; - - private ChartData chartData; - private LineChartOptions chartOptions; - - Random random = new Random(); - - protected override void OnInitialized() - { - chartData = new ChartData - { - Labels = new List { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" }, - Datasets = new List() - }; - - chartData.Datasets.Add(GetRandomLineChartDataset()); - chartData.Datasets.Add(GetRandomLineChartDataset()); - chartData.Datasets.Add(GetRandomLineChartDataset()); - - chartOptions = new LineChartOptions - { - Responsive = true, - Interaction = new Interaction { Mode = InteractionMode.Index } - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await lineChart.UpdateAsync(chartData, chartOptions); - await base.OnAfterRenderAsync(firstRender); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - chartData.Datasets.Add(GetRandomLineChartDataset()); - await lineChart.UpdateAsync(chartData, chartOptions); - } - - private async Task ShowHorizontalLineChartAsync() - { - chartOptions.IndexAxis = "y"; - await lineChart.UpdateAsync(chartData, chartOptions); - } - - private async Task ShowVerticalLineChartAsync() - { - chartOptions.IndexAxis = "x"; - await lineChart.UpdateAsync(chartData, chartOptions); - } - - private LineChartDataset GetRandomLineChartDataset() - { - // random color - var c = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); - Console.WriteLine($"Line Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}"); - - return new LineChartDataset() - { - Label = $"Line chart dataset {chartData.Datasets.Count + 1}", - Data = new List { random.Next(200), random.Next(200), random.Next(200), random.Next(200), random.Next(200), random.Next(200) }, - BackgroundColor = new List { c.ToRgbString() }, - BorderColor = new List { c.ToRgbString() }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { c.ToRgbString() }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 }, - }; - } -} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_05_PieChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_05_PieChart_Examples.razor deleted file mode 100644 index ec0819e17..000000000 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_05_PieChart_Examples.razor +++ /dev/null @@ -1,93 +0,0 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - - - - -@code { - private PieChart pieChart; - - private ChartData chartData; - private PieChartOptions chartOptions; - private List backgroundColors; - - Random random = new Random(); - - protected override void OnInitialized() - { - // prepare background colors - PrepareBackgroundColors(); - - chartData = new ChartData - { - Labels = new List { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" }, - Datasets = new List() - }; - - chartData.Datasets.Add(GetRandomPieChartDataset()); - - chartOptions = new PieChartOptions - { - Responsive = true, - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await pieChart.InitializeAsync(chartData, chartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - chartData.Datasets.Add(GetRandomPieChartDataset()); - await pieChart.UpdateAsync(chartData, chartOptions); - } - - private PieChartDataset GetRandomPieChartDataset() - { - return new PieChartDataset() - { - Data = new List - { - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120) - }, - BackgroundColor = new List - { - backgroundColors[0], - backgroundColors[1], - backgroundColors[2], - backgroundColors[3], - backgroundColors[4], - backgroundColors[5] - }, - }; - } - - private void PrepareBackgroundColors() - { - if (backgroundColors is null) - { - backgroundColors = new List(); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - } - } - - private Color GetRandomColor() => Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); -} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_06_PolarAreaChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_06_PolarAreaChart_Examples.razor deleted file mode 100644 index 017b8a271..000000000 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_06_PolarAreaChart_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ -

Charts_Demo_06_PolarAreaChart_Examples

- -@code { - -} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_07_RadarChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_07_RadarChart_Examples.razor deleted file mode 100644 index ffb337f0c..000000000 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_07_RadarChart_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ -

Charts_Demo_07_RadarChart_Examples

- -@code { - -} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_08_ScatterChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_08_ScatterChart_Examples.razor deleted file mode 100644 index 02dc7079c..000000000 --- a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/Charts_Demo_08_ScatterChart_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ -

Charts_Demo_08_ScatterChart_Examples

- -@code { - -} diff --git a/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor similarity index 57% rename from BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/ChartsDocumentation.razor rename to BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index fa6dda65f..0984b9c84 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -11,8 +11,15 @@ This makes it easier to see the individual values of each category. - - + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + @code { private string pageUrl = "/charts/doughnut-chart"; diff --git a/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/Charts_Demo_01_DoughnutChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor similarity index 78% rename from BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/Charts_Demo_01_DoughnutChart_Examples.razor rename to BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor index ab45ee82b..ed912a565 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/Charts_Demo_01_DoughnutChart_Examples.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor @@ -1,7 +1,4 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - + @@ -11,7 +8,7 @@ private DoughnutChart doughnutChart = default!; private DoughnutChartOptions doughnutChartOptions = default!; private ChartData chartData = default!; - private List backgroundColors = default!; + private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; @@ -20,8 +17,13 @@ protected override void OnInitialized() { - chartData = new ChartData { Labels = GetDefaultDataLabels(5), Datasets = GetDefaultDataSets(1) }; - doughnutChartOptions = new() { Responsive = true, }; + backgroundColors = ColorBuilder.CategoricalTwelveColors; + chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; + + doughnutChartOptions = new(); + doughnutChartOptions.Responsive = true; + doughnutChartOptions.Plugins.Title.Text = "2022 - Sales"; + doughnutChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) @@ -73,17 +75,24 @@ private async Task AddDataAsync() { + if (dataLabelsCount >= 12) + return; + if (chartData is null || chartData.Datasets is null) return; - var data = new List(); + var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset) - data.Add(new ChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100))); + { + data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); + } } chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); + + dataLabelsCount += 1; } #region Data Preparation @@ -119,13 +128,10 @@ private List GetRandomBackgroundColors() { - // prepare background colors - PrepareBackgroundColors(); - var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { - colors.Add(backgroundColors[index]); + colors.Add(backgroundColors![index]); } return colors; @@ -137,33 +143,15 @@ for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); + dataLabelsCount += 1; } return labels; } - private string GetNextDataLabel() - { - dataLabelsCount += 1; - return $"Product {dataLabelsCount}"; - } - - private void PrepareBackgroundColors() - { - backgroundColors ??= new List(); - - if (dataLabelsCount == backgroundColors.Count) - return; - - var backgroundColorsCount = dataLabelsCount - backgroundColors.Count; - - for (int index = 0; index < backgroundColorsCount; index++) - { - backgroundColors.Add(GetRandomColor().ToRgbString()); - } - } + private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; - private Color GetRandomColor() => Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); + private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor new file mode 100644 index 000000000..b6fca8522 --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor @@ -0,0 +1,105 @@ + + + + + +@code { + private LineChart lineChart; + private LineChartOptions lineChartOptions; + private ChartData chartData; + private List labels; + + private List indiaRunsArray = new() { 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 }; + private List englandRunsArray = new() { 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 }; + + private int indiaCurrentOver = 0; + private int englandCurrentOver = 0; + + protected override void OnInitialized() + { + labels = new List { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" }; + lineChartOptions = GetLineChartOptions(); + chartData = new ChartData { Labels = labels, Datasets = GetDefaultDatasets() }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + private async Task UpdateIndiaNextOverRunsAsync() + { + if (indiaCurrentOver > 0 && indiaCurrentOver > (indiaRunsArray.Count - 1)) + return; + + chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver + 1}", new LineChartDatasetData("India", indiaRunsArray[indiaCurrentOver])); + indiaCurrentOver++; + } + + private async Task UpdateEnglandNextOverRunsAsync() + { + if (englandCurrentOver > 0 && englandCurrentOver > (englandRunsArray.Count - 1)) + return; + + chartData = await lineChart.AddDataAsync(chartData, $"{englandCurrentOver + 1}", new LineChartDatasetData("England", englandRunsArray[englandCurrentOver])); + englandCurrentOver++; + } + + private List GetDefaultDatasets() + { + var datasets = new List() + { + new LineChartDataset() + { + Label = "India", + Data = new List(), + BackgroundColor = new List{ "rgb(88, 80, 141)" }, + BorderColor = new List{ "rgb(88, 80, 141)" }, + BorderWidth = new List{2}, + HoverBorderWidth = new List{4}, + PointBackgroundColor = new List{ "rgb(88, 80, 141)" }, + PointBorderColor = new List{ "rgb(88, 80, 141)" }, + PointRadius = new List{0}, // hide points + PointHoverRadius = new List{4}, + }, + new LineChartDataset() + { + Label = "England", + Data = new List(), + BackgroundColor = new List{ "rgb(255, 166, 0)" }, + BorderColor = new List{ "rgb(255, 166, 0)" }, + BorderWidth = new List{2}, + HoverBorderWidth = new List{4}, + PointBackgroundColor = new List{ "rgb(255, 166, 0)" }, + PointBorderColor = new List{ "rgb(255, 166, 0)" }, + PointRadius = new List{0}, // hide points + PointHoverRadius = new List{4}, + } + }; + + return datasets; + } + + private LineChartOptions GetLineChartOptions() + { + var options = new LineChartOptions(); + + options.Interaction.Mode = InteractionMode.Index; + + options.Plugins.Title.Text = "WORM"; + options.Plugins.Title.Display = true; + options.Plugins.Title.Font.Size = 20; + + options.Responsive = true; + + options.Scales.X.Title.Text = "Overs"; + options.Scales.X.Title.Display = true; + + options.Scales.Y.Title.Text = "Runs"; + options.Scales.Y.Title.Display = true; + options.Scales.Y.SuggestedMax = 150; + + return options; + } +} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChartDocumentation.razor new file mode 100644 index 000000000..1a448b877 --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -0,0 +1,40 @@ +@page "/charts/line-chart" + +@title + + + +

Blazor Line Chart

+
+ A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. + It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
+ + + +
+ By default, the chart is using the default locale of the platform on which it is running. + In the following example, you will see the chart in the German locale (de_DE). +
+ + + + + +@code { + private string pageUrl = "/charts/line-chart"; + private string title = "Blazor Line Chart"; + private string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/Charts_Demo_01_LineChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor similarity index 93% rename from BlazorBootstrap.Demo/Pages/Charts/LineCharts/Charts_Demo_01_LineChart_Examples.razor rename to BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor index 4ae92f628..8c83b1eb0 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/Charts_Demo_01_LineChart_Examples.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor @@ -77,11 +77,11 @@ if (chartData is null || chartData.Datasets is null) return; - var data = new List(); + var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is LineChartDataset lineChartDataset) - data.Add(new ChartDatasetData(lineChartDataset.Label, random.Next(200))); + data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200))); } chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data); @@ -115,11 +115,9 @@ private LineChartDataset GetRandomLineChartDataset() { - datasetsCount += 1; + var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); - // random color - var c = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); - Console.WriteLine($"Line Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}"); + datasetsCount += 1; return new LineChartDataset() { diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor new file mode 100644 index 000000000..675c88fd9 --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor @@ -0,0 +1,88 @@ +@using BlazorBootstrap.Extensions +@using Color = System.Drawing.Color + + + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; + var datasets = new List(); + + var dataset1 = new LineChartDataset() + { + Label = "Windows", + Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[0] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset1); + + var dataset2 = new LineChartDataset() + { + Label = "macOS", + Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[1] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset2); + + var dataset3 = new LineChartDataset() + { + Label = "Other", + Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[2] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + lineChartOptions = new(); + lineChartOptions.Responsive = true; + lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; + + lineChartOptions.Scales.X.Title.Text = "2019"; + lineChartOptions.Scales.X.Title.Display = true; + + lineChartOptions.Scales.Y.Title.Text = "Visitors"; + lineChartOptions.Scales.Y.Title.Display = true; + + lineChartOptions.Plugins.Title.Text = "Operating system"; + lineChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor new file mode 100644 index 000000000..ac4d9e1b8 --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor @@ -0,0 +1,89 @@ +@using BlazorBootstrap.Extensions +@using Color = System.Drawing.Color + + + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; + var datasets = new List(); + + var dataset1 = new LineChartDataset() + { + Label = "Windows", + Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[0] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset1); + + var dataset2 = new LineChartDataset() + { + Label = "macOS", + Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[1] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset2); + + var dataset3 = new LineChartDataset() + { + Label = "Other", + Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[2] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + lineChartOptions = new(); + lineChartOptions.Locale = "de-DE"; + lineChartOptions.Responsive = true; + lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; + + lineChartOptions.Scales.X.Title.Text = "2019"; + lineChartOptions.Scales.X.Title.Display = true; + + lineChartOptions.Scales.Y.Title.Text = "Visitors"; + lineChartOptions.Scales.Y.Title.Display = true; + + lineChartOptions.Plugins.Title.Text = "Operating system"; + lineChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/PieCharts/PieChartDocumentation.razor new file mode 100644 index 000000000..9ff9cc1a0 --- /dev/null +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -0,0 +1,27 @@ +@page "/charts/pie-chart" + +@title + + + +

Blazor Pie Chart

+
+ A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + + +@code { + private string pageUrl = "/charts/pie-chart"; + private string title = "Blazor Pie Chart"; + private string description = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/PieCharts/Charts_Demo_01_PieChart_Examples.razor b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor similarity index 76% rename from BlazorBootstrap.Demo/Pages/Charts/PieCharts/Charts_Demo_01_PieChart_Examples.razor rename to BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor index 4421f2b60..bf6153982 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/PieCharts/Charts_Demo_01_PieChart_Examples.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor @@ -1,7 +1,4 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - + @@ -11,17 +8,22 @@ private PieChart pieChart = default!; private PieChartOptions pieChartOptions = default!; private ChartData chartData = default!; - private List backgroundColors = default!; + private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; - private Random random = new Random(); + private Random random = new(); protected override void OnInitialized() { - chartData = new ChartData { Labels = GetDefaultDataLabels(5), Datasets = GetDefaultDataSets(1) }; - pieChartOptions = new() { Responsive = true, }; + backgroundColors = ColorBuilder.CategoricalTwelveColors; + chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; + + pieChartOptions = new(); + pieChartOptions.Responsive = true; + pieChartOptions.Plugins.Title.Text = "2022 - Sales"; + pieChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) @@ -73,17 +75,22 @@ private async Task AddDataAsync() { + if (dataLabelsCount >= 12) + return; + if (chartData is null || chartData.Datasets is null) return; - var data = new List(); + var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset) - data.Add(new ChartDatasetData(pieChartDataset.Label, random.Next(0, 100))); + data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); } chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); + + dataLabelsCount += 1; } #region Data Preparation @@ -119,13 +126,10 @@ private List GetRandomBackgroundColors() { - // prepare background colors - PrepareBackgroundColors(); - var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { - colors.Add(backgroundColors[index]); + colors.Add(backgroundColors![index]); } return colors; @@ -137,33 +141,15 @@ for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); + dataLabelsCount += 1; } return labels; } - private string GetNextDataLabel() - { - dataLabelsCount += 1; - return $"Product {dataLabelsCount}"; - } - - private void PrepareBackgroundColors() - { - backgroundColors ??= new List(); - - if (dataLabelsCount == backgroundColors.Count) - return; - - var backgroundColorsCount = dataLabelsCount - backgroundColors.Count; - - for (int index = 0; index < backgroundColorsCount; index++) - { - backgroundColors.Add(GetRandomColor().ToRgbString()); - } - } + private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; - private Color GetRandomColor() => Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); + private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } diff --git a/BlazorBootstrap.Demo.Hosted/Client/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.Hosted/Client/Shared/MainLayout.razor.cs index 1733b76b4..36529878e 100644 --- a/BlazorBootstrap.Demo.Hosted/Client/Shared/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.Hosted/Client/Shared/MainLayout.razor.cs @@ -1,4 +1,5 @@ using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Routing; namespace BlazorBootstrap.Demo.Hosted.Client.Shared; @@ -54,7 +55,7 @@ private IEnumerable GetNavItems() new (){ Id = "503", Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav, ParentId = "5" }, new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" }, new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" }, - new (){ Id = "506", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5" }, + new (){ Id = "506", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, new (){ Id = "507", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" }, new (){ Id = "508", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" }, new (){ Id = "509", Text = "Grid", Href = "/grid", IconName = IconName.Grid, ParentId = "5" }, @@ -70,10 +71,10 @@ private IEnumerable GetNavItems() new (){ Id = "519", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning }, - new (){ Id = "600", Text = "Bar Chart", Href = "/charts", IconName = IconName.BarChartFill, ParentId = "6" }, - new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts", IconName = IconName.CircleFill, ParentId = "6" }, - new (){ Id = "602", Text = "Line Chart", Href = "/charts", IconName = IconName.GraphUp, ParentId = "6" }, - new (){ Id = "603", Text = "Pie Chart", Href = "/charts", IconName = IconName.PieChartFill, ParentId = "6" }, + new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success }, new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, diff --git a/BlazorBootstrap.Demo.Hosted/Client/_Imports.razor b/BlazorBootstrap.Demo.Hosted/Client/_Imports.razor index 0ee05754e..8937f49e2 100644 --- a/BlazorBootstrap.Demo.Hosted/Client/_Imports.razor +++ b/BlazorBootstrap.Demo.Hosted/Client/_Imports.razor @@ -8,3 +8,5 @@ @using Microsoft.JSInterop @using BlazorBootstrap.Demo.Hosted.Client @using BlazorBootstrap; +@using BlazorBootstrap.Extensions +@using BlazorBootstrap.Utilities; diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChartDocumentation.razor new file mode 100644 index 000000000..f4f0037f9 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -0,0 +1,40 @@ +@page "/charts/bar-chart" + +@title + + + +

Blazor Bar Chart

+
+ 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. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + + + + + + + + + +
+ By default, the chart is using the default locale of the platform on which it is running. + In the following example, you will see the chart in the German locale (de_DE). +
+ + +@code { + private string pageUrl = "/charts/bar-chart"; + private string title = "Blazor Bar Chart"; + private string description = "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."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_02_Dynamic_Colors.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor similarity index 90% rename from BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_02_Dynamic_Colors.razor rename to BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor index 47780dcf6..31b7eaf60 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/Charts_Demo_02_Dynamic_Colors.razor +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor @@ -1,7 +1,4 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - + @@ -68,6 +65,9 @@ { if (chartData is null || chartData.Datasets is null) return; + if (datasetsCount >= 12) + return; + var chartDataset = GetRandomBarChartDataset(); chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions); } @@ -80,11 +80,11 @@ if (labelsCount >= 12) return; - var data = new List(); + var data = new List(); foreach (var dataset in chartData.Datasets) { if (dataset is BarChartDataset barChartDataset) - data.Add(new ChartDatasetData(barChartDataset.Label, random.Next(200))); + data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200))); } chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data); @@ -118,11 +118,9 @@ private BarChartDataset GetRandomBarChartDataset() { - datasetsCount += 1; + var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); - // random color - var c = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); - Console.WriteLine($"Bar Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}"); + datasetsCount += 1; return new BarChartDataset() { diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor new file mode 100644 index 000000000..fdab146fa --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor @@ -0,0 +1,48 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Data = new List { 55000, 15000, 18000, 21000 }, + BackgroundColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, + BorderColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + chartData = new ChartData { + Labels = labels, + Datasets = datasets }; + + barChartOptions = new BarChartOptions(); + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.Display = true; + + barChartOptions.Plugins.Legend.Display = false; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await barChart.InitializeAsync(chartData, barChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor new file mode 100644 index 000000000..e0ca265da --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor @@ -0,0 +1,77 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Label = "Windows", + Data = new List { 28000, 8000, 2000, 17000 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + var dataset2 = new BarChartDataset() + { + Label = "macOS", + Data = new List { 8000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset2); + + var dataset3 = new BarChartDataset() + { + Label = "Other", + Data = new List { 28000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + barChartOptions = new(); + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.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); + } +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor new file mode 100644 index 000000000..33f723cee --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor @@ -0,0 +1,78 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Label = "Windows", + Data = new List { 28000, 8000, 2000, 17000 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + var dataset2 = new BarChartDataset() + { + Label = "macOS", + Data = new List { 8000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset2); + + var dataset3 = new BarChartDataset() + { + Label = "Other", + Data = new List { 28000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + barChartOptions = new(); + barChartOptions.Locale = "de-DE"; + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.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); + } +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/ChartsDocumentation.razor index 82989b832..58bb25a8b 100644 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/ChartsDocumentation.razor @@ -15,10 +15,10 @@
At this moment we are supporting four blazor chart types.
    -
  1. Bar Chart
    2. -
  2. Doughnut Chart
    3. -
  3. Line Chart
    4. -
  4. Pie Chart
    5. +
  5. Bar Chart
    6. +
  6. Doughnut Chart
    7. +
  7. Line Chart
    8. +
  8. Pie Chart
@@ -26,26 +26,13 @@ -Refer starter template for charts setup. - - - - - - - - - - - - - -@* -*@ +
+ Refer starter template for charts setup. +
@code { private string pageUrl = "/charts"; private string title = "Blazor Charts"; private string description = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; -} \ No newline at end of file +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_01_BarChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_01_BarChart_Examples.razor deleted file mode 100644 index 0a7d586fb..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_01_BarChart_Examples.razor +++ /dev/null @@ -1,81 +0,0 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - - - - - - -@code { - private BarChart barChart; - - private ChartData chartData; - private BarChartOptions chartOptions; - - Random random = new Random(); - - protected override void OnInitialized() - { - chartData = new ChartData - { - Labels = new List { "January", "February", "March", "April", "May", "June", "July" }, - Datasets = new List() - }; - - chartData.Datasets.Add(GetRandomBarChartDataset()); - chartData.Datasets.Add(GetRandomBarChartDataset()); - chartData.Datasets.Add(GetRandomBarChartDataset()); - - chartOptions = new BarChartOptions - { - Responsive = true, - Interaction = new Interaction { Mode = InteractionMode.Index } - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await barChart.InitializeAsync(chartData, chartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - chartData.Datasets.Add(GetRandomBarChartDataset()); - await barChart.UpdateAsync(chartData, chartOptions); - } - - private async Task ShowHorizontalBarChartAsync() - { - chartOptions.IndexAxis = "y"; - await barChart.UpdateAsync(chartData, chartOptions); - } - - private async Task ShowVerticalBarChartAsync() - { - chartOptions.IndexAxis = "x"; - await barChart.UpdateAsync(chartData, chartOptions); - } - - private BarChartDataset GetRandomBarChartDataset() - { - // random color - var c = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); - Console.WriteLine($"Bar Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}"); - - return new BarChartDataset() - { - Label = $"Bar chart dataset {chartData.Datasets.Count + 1}", - Data = new List { random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120), random.Next(120) }, - BackgroundColor = new List { c.ToRgbString() }, - BorderColor = new List { c.ToRgbString() }, - BorderWidth = new List { 0 }, - }; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_02_BubbleChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_02_BubbleChart_Examples.razor deleted file mode 100644 index 633280344..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_02_BubbleChart_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ -

Charts_Demo_02_BubbleChart_Examples

- -@code { - -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_03_DoughnutChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_03_DoughnutChart_Examples.razor deleted file mode 100644 index 19a971815..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_03_DoughnutChart_Examples.razor +++ /dev/null @@ -1,93 +0,0 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - - - - -@code { - private DoughnutChart doughnutChart; - - private ChartData chartData; - private DoughnutChartOptions chartOptions; - private List backgroundColors; - - Random random = new Random(); - - protected override void OnInitialized() - { - // prepare background colors - PrepareBackgroundColors(); - - chartData = new ChartData - { - Labels = new List { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" }, - Datasets = new List() - }; - - chartData.Datasets.Add(GetRandomDoughnutChartDataset()); - - chartOptions = new DoughnutChartOptions - { - Responsive = true, - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await doughnutChart.InitializeAsync(chartData, chartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - chartData.Datasets.Add(GetRandomDoughnutChartDataset()); - await doughnutChart.UpdateAsync(chartData, chartOptions); - } - - private DoughnutChartDataset GetRandomDoughnutChartDataset() - { - return new DoughnutChartDataset() - { - Data = new List - { - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120) - }, - BackgroundColor = new List - { - backgroundColors[0], - backgroundColors[1], - backgroundColors[2], - backgroundColors[3], - backgroundColors[4], - backgroundColors[5] - }, - }; - } - - private void PrepareBackgroundColors() - { - if (backgroundColors is null) - { - backgroundColors = new List(); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - } - } - - private Color GetRandomColor() => Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_04_LineChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_04_LineChart_Examples.razor deleted file mode 100644 index defc58adc..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_04_LineChart_Examples.razor +++ /dev/null @@ -1,82 +0,0 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - - - - - - -@code { - private LineChart lineChart; - - private ChartData chartData; - private LineChartOptions chartOptions; - - Random random = new Random(); - - protected override void OnInitialized() - { - chartData = new ChartData - { - Labels = new List { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" }, - Datasets = new List() - }; - - chartData.Datasets.Add(GetRandomLineChartDataset()); - chartData.Datasets.Add(GetRandomLineChartDataset()); - chartData.Datasets.Add(GetRandomLineChartDataset()); - - chartOptions = new LineChartOptions - { - Responsive = true, - Interaction = new Interaction { Mode = InteractionMode.Index } - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await lineChart.UpdateAsync(chartData, chartOptions); - await base.OnAfterRenderAsync(firstRender); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - chartData.Datasets.Add(GetRandomLineChartDataset()); - await lineChart.UpdateAsync(chartData, chartOptions); - } - - private async Task ShowHorizontalLineChartAsync() - { - chartOptions.IndexAxis = "y"; - await lineChart.UpdateAsync(chartData, chartOptions); - } - - private async Task ShowVerticalLineChartAsync() - { - chartOptions.IndexAxis = "x"; - await lineChart.UpdateAsync(chartData, chartOptions); - } - - private LineChartDataset GetRandomLineChartDataset() - { - // random color - var c = Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); - Console.WriteLine($"Line Chart: Color Name: {c.Name}, HEX: {c.ToHexString()}, RGB: {c.ToRgbString()}, IsNamedColor: {c.IsNamedColor}"); - - return new LineChartDataset() - { - Label = $"Line chart dataset {chartData.Datasets.Count + 1}", - Data = new List { random.Next(200), random.Next(200), random.Next(200), random.Next(200), random.Next(200), random.Next(200) }, - BackgroundColor = new List { c.ToRgbString() }, - BorderColor = new List { c.ToRgbString() }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { c.ToRgbString() }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 }, - }; - } -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_05_PieChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_05_PieChart_Examples.razor deleted file mode 100644 index ec0819e17..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_05_PieChart_Examples.razor +++ /dev/null @@ -1,93 +0,0 @@ -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - - - - -@code { - private PieChart pieChart; - - private ChartData chartData; - private PieChartOptions chartOptions; - private List backgroundColors; - - Random random = new Random(); - - protected override void OnInitialized() - { - // prepare background colors - PrepareBackgroundColors(); - - chartData = new ChartData - { - Labels = new List { "Team 1", "Team 2", "Team 3", "Team 4", "Team 5", "Team 6" }, - Datasets = new List() - }; - - chartData.Datasets.Add(GetRandomPieChartDataset()); - - chartOptions = new PieChartOptions - { - Responsive = true, - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await pieChart.InitializeAsync(chartData, chartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - chartData.Datasets.Add(GetRandomPieChartDataset()); - await pieChart.UpdateAsync(chartData, chartOptions); - } - - private PieChartDataset GetRandomPieChartDataset() - { - return new PieChartDataset() - { - Data = new List - { - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120), - random.Next(120) - }, - BackgroundColor = new List - { - backgroundColors[0], - backgroundColors[1], - backgroundColors[2], - backgroundColors[3], - backgroundColors[4], - backgroundColors[5] - }, - }; - } - - private void PrepareBackgroundColors() - { - if (backgroundColors is null) - { - backgroundColors = new List(); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - backgroundColors.Add(GetRandomColor().ToRgbString()); - } - } - - private Color GetRandomColor() => Color.FromArgb(random.Next(256), random.Next(256), random.Next(256)); -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_06_PolarAreaChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_06_PolarAreaChart_Examples.razor deleted file mode 100644 index 017b8a271..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_06_PolarAreaChart_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ -

Charts_Demo_06_PolarAreaChart_Examples

- -@code { - -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_07_RadarChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_07_RadarChart_Examples.razor deleted file mode 100644 index ffb337f0c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_07_RadarChart_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ -

Charts_Demo_07_RadarChart_Examples

- -@code { - -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_08_ScatterChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_08_ScatterChart_Examples.razor deleted file mode 100644 index 02dc7079c..000000000 --- a/BlazorBootstrap.Demo.Server/Pages/Charts/Charts_Demo_08_ScatterChart_Examples.razor +++ /dev/null @@ -1,5 +0,0 @@ -

Charts_Demo_08_ScatterChart_Examples

- -@code { - -} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor new file mode 100644 index 000000000..0984b9c84 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -0,0 +1,29 @@ +@page "/charts/doughnut-chart" + +@title + + + +

Blazor Doughnut Chart

+
+ A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. + It is similar to a pie chart, but the center of the donut chart is hollow. + This makes it easier to see the individual values of each category. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + + +@code { + private string pageUrl = "/charts/doughnut-chart"; + private string title = "Blazor Doughnut Charts"; + private string description = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor new file mode 100644 index 000000000..ed912a565 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor @@ -0,0 +1,157 @@ + + + + + + +@code { + private DoughnutChart doughnutChart = default!; + private DoughnutChartOptions doughnutChartOptions = default!; + private ChartData chartData = default!; + private string[]? backgroundColors; + + private int datasetsCount = 0; + private int dataLabelsCount = 0; + + private Random random = new(); + + protected override void OnInitialized() + { + backgroundColors = ColorBuilder.CategoricalTwelveColors; + chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; + + doughnutChartOptions = new(); + doughnutChartOptions.Responsive = true; + doughnutChartOptions.Plugins.Title.Text = "2022 - Sales"; + doughnutChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await doughnutChart.InitializeAsync(chartData, doughnutChartOptions); + } + 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 DoughnutChartDataset doughnutChartDataset + && doughnutChartDataset is not null + && doughnutChartDataset.Data is not null) + { + var count = doughnutChartDataset.Data.Count; + + var newData = new List(); + for (var i = 0; i < count; i++) + { + newData.Add(random.Next(0, 100)); + } + + doughnutChartDataset.Data = newData; + newDatasets.Add(doughnutChartDataset); + } + } + + chartData.Datasets = newDatasets; + + await doughnutChart.UpdateAsync(chartData, doughnutChartOptions); + } + + private async Task AddDatasetAsync() + { + if (chartData is null || chartData.Datasets is null) return; + + var chartDataset = GetRandomDoughnutChartDataset(); + chartData = await doughnutChart.AddDatasetAsync(chartData, chartDataset, doughnutChartOptions); + } + + private async Task AddDataAsync() + { + if (dataLabelsCount >= 12) + return; + + if (chartData is null || chartData.Datasets is null) + return; + + var data = new List(); + foreach (var dataset in chartData.Datasets) + { + if (dataset is DoughnutChartDataset doughnutChartDataset) + { + data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); + } + } + + chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); + + dataLabelsCount += 1; + } + + #region Data Preparation + + private List GetDefaultDataSets(int numberOfDatasets) + { + var datasets = new List(); + + for (var index = 0; index < numberOfDatasets; index++) + { + datasets.Add(GetRandomDoughnutChartDataset()); + } + + return datasets; + } + + private DoughnutChartDataset GetRandomDoughnutChartDataset() + { + datasetsCount += 1; + return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; + } + + private List GetRandomData() + { + var data = new List(); + for (var index = 0; index < dataLabelsCount; index++) + { + data.Add(random.Next(0, 100)); + } + + return data; + } + + private List GetRandomBackgroundColors() + { + var colors = new List(); + for (var index = 0; index < dataLabelsCount; index++) + { + colors.Add(backgroundColors![index]); + } + + return colors; + } + + private List GetDefaultDataLabels(int numberOfLabels) + { + var labels = new List(); + for (var index = 0; index < numberOfLabels; index++) + { + labels.Add(GetNextDataLabel()); + dataLabelsCount += 1; + } + + return labels; + } + + private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; + + private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; + + #endregion Data Preparation +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor new file mode 100644 index 000000000..b6fca8522 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor @@ -0,0 +1,105 @@ + + + + + +@code { + private LineChart lineChart; + private LineChartOptions lineChartOptions; + private ChartData chartData; + private List labels; + + private List indiaRunsArray = new() { 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 }; + private List englandRunsArray = new() { 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 }; + + private int indiaCurrentOver = 0; + private int englandCurrentOver = 0; + + protected override void OnInitialized() + { + labels = new List { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" }; + lineChartOptions = GetLineChartOptions(); + chartData = new ChartData { Labels = labels, Datasets = GetDefaultDatasets() }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + private async Task UpdateIndiaNextOverRunsAsync() + { + if (indiaCurrentOver > 0 && indiaCurrentOver > (indiaRunsArray.Count - 1)) + return; + + chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver + 1}", new LineChartDatasetData("India", indiaRunsArray[indiaCurrentOver])); + indiaCurrentOver++; + } + + private async Task UpdateEnglandNextOverRunsAsync() + { + if (englandCurrentOver > 0 && englandCurrentOver > (englandRunsArray.Count - 1)) + return; + + chartData = await lineChart.AddDataAsync(chartData, $"{englandCurrentOver + 1}", new LineChartDatasetData("England", englandRunsArray[englandCurrentOver])); + englandCurrentOver++; + } + + private List GetDefaultDatasets() + { + var datasets = new List() + { + new LineChartDataset() + { + Label = "India", + Data = new List(), + BackgroundColor = new List{ "rgb(88, 80, 141)" }, + BorderColor = new List{ "rgb(88, 80, 141)" }, + BorderWidth = new List{2}, + HoverBorderWidth = new List{4}, + PointBackgroundColor = new List{ "rgb(88, 80, 141)" }, + PointBorderColor = new List{ "rgb(88, 80, 141)" }, + PointRadius = new List{0}, // hide points + PointHoverRadius = new List{4}, + }, + new LineChartDataset() + { + Label = "England", + Data = new List(), + BackgroundColor = new List{ "rgb(255, 166, 0)" }, + BorderColor = new List{ "rgb(255, 166, 0)" }, + BorderWidth = new List{2}, + HoverBorderWidth = new List{4}, + PointBackgroundColor = new List{ "rgb(255, 166, 0)" }, + PointBorderColor = new List{ "rgb(255, 166, 0)" }, + PointRadius = new List{0}, // hide points + PointHoverRadius = new List{4}, + } + }; + + return datasets; + } + + private LineChartOptions GetLineChartOptions() + { + var options = new LineChartOptions(); + + options.Interaction.Mode = InteractionMode.Index; + + options.Plugins.Title.Text = "WORM"; + options.Plugins.Title.Display = true; + options.Plugins.Title.Font.Size = 20; + + options.Responsive = true; + + options.Scales.X.Title.Text = "Overs"; + options.Scales.X.Title.Display = true; + + options.Scales.Y.Title.Text = "Runs"; + options.Scales.Y.Title.Display = true; + options.Scales.Y.SuggestedMax = 150; + + return options; + } +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChartDocumentation.razor new file mode 100644 index 000000000..1a448b877 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -0,0 +1,40 @@ +@page "/charts/line-chart" + +@title + + + +

Blazor Line Chart

+
+ A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. + It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
+ + + +
+ By default, the chart is using the default locale of the platform on which it is running. + In the following example, you will see the chart in the German locale (de_DE). +
+ + + + + +@code { + private string pageUrl = "/charts/line-chart"; + private string title = "Blazor Line Chart"; + private string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor new file mode 100644 index 000000000..8c83b1eb0 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor @@ -0,0 +1,165 @@ +@using BlazorBootstrap.Extensions +@using Color = System.Drawing.Color + + + + + + + + + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + + private int datasetsCount = 0; + private int labelsCount = 0; + + private Random random = new(); + + protected override void OnInitialized() + { + chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; + lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + 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 LineChartDataset lineChartDataset + && lineChartDataset is not null + && lineChartDataset.Data is not null) + { + var count = lineChartDataset.Data.Count; + + var newData = new List(); + for (var i = 0; i < count; i++) + { + newData.Add(random.Next(200)); + } + + lineChartDataset.Data = newData; + newDatasets.Add(lineChartDataset); + } + } + + chartData.Datasets = newDatasets; + + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + private async Task AddDatasetAsync() + { + if (chartData is null || chartData.Datasets is null) return; + + var chartDataset = GetRandomLineChartDataset(); + chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions); + } + + private async Task AddDataAsync() + { + if (chartData is null || chartData.Datasets is null) + return; + + var data = new List(); + foreach (var dataset in chartData.Datasets) + { + if (dataset is LineChartDataset lineChartDataset) + data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200))); + } + + chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data); + } + + private async Task ShowHorizontalLineChartAsync() + { + lineChartOptions.IndexAxis = "y"; + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + private async Task ShowVerticalLineChartAsync() + { + lineChartOptions.IndexAxis = "x"; + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + #region Data Preparation + + private List GetDefaultDataSets(int numberOfDatasets) + { + var datasets = new List(); + + for (var index = 0; index < numberOfDatasets; index++) + { + datasets.Add(GetRandomLineChartDataset()); + } + + return datasets; + } + + private LineChartDataset GetRandomLineChartDataset() + { + var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); + + datasetsCount += 1; + + return new LineChartDataset() + { + Label = $"Team {datasetsCount}", + Data = GetRandomData(), + BackgroundColor = new List { c.ToRgbString() }, + BorderColor = new List { c.ToRgbString() }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { c.ToRgbString() }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + } + + 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 $"Day {labelsCount}"; + } + + #endregion Data Preparation +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor new file mode 100644 index 000000000..675c88fd9 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor @@ -0,0 +1,88 @@ +@using BlazorBootstrap.Extensions +@using Color = System.Drawing.Color + + + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; + var datasets = new List(); + + var dataset1 = new LineChartDataset() + { + Label = "Windows", + Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[0] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset1); + + var dataset2 = new LineChartDataset() + { + Label = "macOS", + Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[1] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset2); + + var dataset3 = new LineChartDataset() + { + Label = "Other", + Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[2] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + lineChartOptions = new(); + lineChartOptions.Responsive = true; + lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; + + lineChartOptions.Scales.X.Title.Text = "2019"; + lineChartOptions.Scales.X.Title.Display = true; + + lineChartOptions.Scales.Y.Title.Text = "Visitors"; + lineChartOptions.Scales.Y.Title.Display = true; + + lineChartOptions.Plugins.Title.Text = "Operating system"; + lineChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor new file mode 100644 index 000000000..ac4d9e1b8 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor @@ -0,0 +1,89 @@ +@using BlazorBootstrap.Extensions +@using Color = System.Drawing.Color + + + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; + var datasets = new List(); + + var dataset1 = new LineChartDataset() + { + Label = "Windows", + Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[0] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset1); + + var dataset2 = new LineChartDataset() + { + Label = "macOS", + Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[1] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset2); + + var dataset3 = new LineChartDataset() + { + Label = "Other", + Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[2] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + lineChartOptions = new(); + lineChartOptions.Locale = "de-DE"; + lineChartOptions.Responsive = true; + lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; + + lineChartOptions.Scales.X.Title.Text = "2019"; + lineChartOptions.Scales.X.Title.Display = true; + + lineChartOptions.Scales.Y.Title.Text = "Visitors"; + lineChartOptions.Scales.Y.Title.Display = true; + + lineChartOptions.Plugins.Title.Text = "Operating system"; + lineChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChartDocumentation.razor new file mode 100644 index 000000000..9ff9cc1a0 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -0,0 +1,27 @@ +@page "/charts/pie-chart" + +@title + + + +

Blazor Pie Chart

+
+ A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + + +@code { + private string pageUrl = "/charts/pie-chart"; + private string title = "Blazor Pie Chart"; + private string description = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor new file mode 100644 index 000000000..bf6153982 --- /dev/null +++ b/BlazorBootstrap.Demo.Server/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor @@ -0,0 +1,155 @@ + + + + + + +@code { + private PieChart pieChart = default!; + private PieChartOptions pieChartOptions = default!; + private ChartData chartData = default!; + private string[]? backgroundColors; + + private int datasetsCount = 0; + private int dataLabelsCount = 0; + + private Random random = new(); + + protected override void OnInitialized() + { + backgroundColors = ColorBuilder.CategoricalTwelveColors; + chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; + + pieChartOptions = new(); + pieChartOptions.Responsive = true; + pieChartOptions.Plugins.Title.Text = "2022 - Sales"; + pieChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await pieChart.InitializeAsync(chartData, pieChartOptions); + } + 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 PieChartDataset pieChartDataset + && pieChartDataset is not null + && pieChartDataset.Data is not null) + { + var count = pieChartDataset.Data.Count; + + var newData = new List(); + for (var i = 0; i < count; i++) + { + newData.Add(random.Next(0, 100)); + } + + pieChartDataset.Data = newData; + newDatasets.Add(pieChartDataset); + } + } + + chartData.Datasets = newDatasets; + + await pieChart.UpdateAsync(chartData, pieChartOptions); + } + + private async Task AddDatasetAsync() + { + if (chartData is null || chartData.Datasets is null) return; + + var chartDataset = GetRandomPieChartDataset(); + chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions); + } + + private async Task AddDataAsync() + { + if (dataLabelsCount >= 12) + return; + + if (chartData is null || chartData.Datasets is null) + return; + + var data = new List(); + foreach (var dataset in chartData.Datasets) + { + if (dataset is PieChartDataset pieChartDataset) + data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); + } + + chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); + + dataLabelsCount += 1; + } + + #region Data Preparation + + private List GetDefaultDataSets(int numberOfDatasets) + { + var datasets = new List(); + + for (var index = 0; index < numberOfDatasets; index++) + { + datasets.Add(GetRandomPieChartDataset()); + } + + return datasets; + } + + private PieChartDataset GetRandomPieChartDataset() + { + datasetsCount += 1; + return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; + } + + private List GetRandomData() + { + var data = new List(); + for (var index = 0; index < dataLabelsCount; index++) + { + data.Add(random.Next(0, 100)); + } + + return data; + } + + private List GetRandomBackgroundColors() + { + var colors = new List(); + for (var index = 0; index < dataLabelsCount; index++) + { + colors.Add(backgroundColors![index]); + } + + return colors; + } + + private List GetDefaultDataLabels(int numberOfLabels) + { + var labels = new List(); + for (var index = 0; index < numberOfLabels; index++) + { + labels.Add(GetNextDataLabel()); + dataLabelsCount += 1; + } + + return labels; + } + + private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; + + private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; + + #endregion Data Preparation +} diff --git a/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.cs index a9e6f41c1..11a526891 100644 --- a/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.Server/Shared/MainLayout.razor.cs @@ -1,4 +1,5 @@ using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Routing; namespace BlazorBootstrap.Demo.Server.Shared; @@ -54,7 +55,7 @@ private IEnumerable GetNavItems() new (){ Id = "503", Text = "Breadcrumb", Href = "/breadcrumb", IconName = IconName.SegmentedNav, ParentId = "5" }, new (){ Id = "504", Text = "Buttons", Href = "/buttons", IconName = IconName.ToggleOn, ParentId = "5" }, new (){ Id = "505", Text = "Callout", Href = "/callout", IconName = IconName.StickyFill, ParentId = "5" }, - new (){ Id = "506", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5" }, + new (){ Id = "506", Text = "Charts", Href = "/charts", IconName = IconName.BarChartLineFill, ParentId = "5", Match = NavLinkMatch.All }, new (){ Id = "507", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" }, new (){ Id = "508", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" }, new (){ Id = "509", Text = "Grid", Href = "/grid", IconName = IconName.Grid, ParentId = "5" }, @@ -70,10 +71,10 @@ private IEnumerable GetNavItems() new (){ Id = "519", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning }, - new (){ Id = "600", Text = "Bar Chart", Href = "/charts", IconName = IconName.BarChartFill, ParentId = "6" }, - new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts", IconName = IconName.CircleFill, ParentId = "6" }, - new (){ Id = "602", Text = "Line Chart", Href = "/charts", IconName = IconName.GraphUp, ParentId = "6" }, - new (){ Id = "603", Text = "Pie Chart", Href = "/charts", IconName = IconName.PieChartFill, ParentId = "6" }, + new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "601", Text = "Doughnut Chart", Href = "/charts/doughnut-chart", IconName = IconName.CircleFill, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All }, + new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All }, new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success }, new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, diff --git a/BlazorBootstrap.Demo.Server/_Imports.razor b/BlazorBootstrap.Demo.Server/_Imports.razor index 036fc33c1..45fb140df 100644 --- a/BlazorBootstrap.Demo.Server/_Imports.razor +++ b/BlazorBootstrap.Demo.Server/_Imports.razor @@ -9,3 +9,5 @@ @using BlazorBootstrap; @using BlazorBootstrap.Demo.Server @using BlazorBootstrap.Demo.Server.Shared +@using BlazorBootstrap.Extensions +@using BlazorBootstrap.Utilities; diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChartDocumentation.razor new file mode 100644 index 000000000..f4f0037f9 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -0,0 +1,40 @@ +@page "/charts/bar-chart" + +@title + + + +

Blazor Bar Chart

+
+ 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. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + + + + + + + + + +
+ By default, the chart is using the default locale of the platform on which it is running. + In the following example, you will see the chart in the German locale (de_DE). +
+ + +@code { + private string pageUrl = "/charts/bar-chart"; + private string title = "Blazor Bar Chart"; + private string description = "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."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor new file mode 100644 index 000000000..31b7eaf60 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor @@ -0,0 +1,164 @@ + + + + + + + + +@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; + + if (datasetsCount >= 12) + 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 BarChartDatasetData(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() + { + var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); + + datasetsCount += 1; + + 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/BarChart_Demo_02_Horizontal_BarChart.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor new file mode 100644 index 000000000..fdab146fa --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor @@ -0,0 +1,48 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Data = new List { 55000, 15000, 18000, 21000 }, + BackgroundColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, + BorderColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + chartData = new ChartData { + Labels = labels, + Datasets = datasets }; + + barChartOptions = new BarChartOptions(); + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.Display = true; + + barChartOptions.Plugins.Legend.Display = false; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await barChart.InitializeAsync(chartData, barChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor new file mode 100644 index 000000000..e0ca265da --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor @@ -0,0 +1,77 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Label = "Windows", + Data = new List { 28000, 8000, 2000, 17000 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + var dataset2 = new BarChartDataset() + { + Label = "macOS", + Data = new List { 8000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset2); + + var dataset3 = new BarChartDataset() + { + Label = "Other", + Data = new List { 28000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + barChartOptions = new(); + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.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); + } +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor new file mode 100644 index 000000000..33f723cee --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor @@ -0,0 +1,78 @@ + + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; + var datasets = new List(); + + var dataset1 = new BarChartDataset() + { + Label = "Windows", + Data = new List { 28000, 8000, 2000, 17000 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset1); + + var dataset2 = new BarChartDataset() + { + Label = "macOS", + Data = new List { 8000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset2); + + var dataset3 = new BarChartDataset() + { + Label = "Other", + Data = new List { 28000, 10000, 14000, 8000 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 0 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + barChartOptions = new(); + barChartOptions.Locale = "de-DE"; + barChartOptions.Responsive = true; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; + barChartOptions.IndexAxis = "y"; + + barChartOptions.Scales.X.Title.Text = "Visitors"; + barChartOptions.Scales.X.Title.Display = true; + + barChartOptions.Scales.Y.Title.Text = "Browser"; + barChartOptions.Scales.Y.Title.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); + } +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor b/BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor deleted file mode 100644 index a6c7103cc..000000000 --- a/BlazorBootstrap.Demo/Pages/Charts/BarCharts/ChartsDocumentation.razor +++ /dev/null @@ -1,27 +0,0 @@ -@page "/charts/bar-chart" - -@title - - - -

Blazor Bar Chart

-
- 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. -
- - -
In the below example, a categorical 12-color palette is used. Use ColorBuilder.CategoricalTwelveColors to get the 12 colors.
- - In the below example, a maximum of 12 datasets are allowed. - - - - - - -@code { - private string pageUrl = "/charts/bar-chart"; - private string title = "Blazor Bar Chart"; - private string description = "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."; - private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; -} diff --git a/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor new file mode 100644 index 000000000..0984b9c84 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -0,0 +1,29 @@ +@page "/charts/doughnut-chart" + +@title + + + +

Blazor Doughnut Chart

+
+ A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. + It is similar to a pie chart, but the center of the donut chart is hollow. + This makes it easier to see the individual values of each category. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + + +@code { + private string pageUrl = "/charts/doughnut-chart"; + private string title = "Blazor Doughnut Charts"; + private string description = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor new file mode 100644 index 000000000..ed912a565 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor @@ -0,0 +1,157 @@ + + + + + + +@code { + private DoughnutChart doughnutChart = default!; + private DoughnutChartOptions doughnutChartOptions = default!; + private ChartData chartData = default!; + private string[]? backgroundColors; + + private int datasetsCount = 0; + private int dataLabelsCount = 0; + + private Random random = new(); + + protected override void OnInitialized() + { + backgroundColors = ColorBuilder.CategoricalTwelveColors; + chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; + + doughnutChartOptions = new(); + doughnutChartOptions.Responsive = true; + doughnutChartOptions.Plugins.Title.Text = "2022 - Sales"; + doughnutChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await doughnutChart.InitializeAsync(chartData, doughnutChartOptions); + } + 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 DoughnutChartDataset doughnutChartDataset + && doughnutChartDataset is not null + && doughnutChartDataset.Data is not null) + { + var count = doughnutChartDataset.Data.Count; + + var newData = new List(); + for (var i = 0; i < count; i++) + { + newData.Add(random.Next(0, 100)); + } + + doughnutChartDataset.Data = newData; + newDatasets.Add(doughnutChartDataset); + } + } + + chartData.Datasets = newDatasets; + + await doughnutChart.UpdateAsync(chartData, doughnutChartOptions); + } + + private async Task AddDatasetAsync() + { + if (chartData is null || chartData.Datasets is null) return; + + var chartDataset = GetRandomDoughnutChartDataset(); + chartData = await doughnutChart.AddDatasetAsync(chartData, chartDataset, doughnutChartOptions); + } + + private async Task AddDataAsync() + { + if (dataLabelsCount >= 12) + return; + + if (chartData is null || chartData.Datasets is null) + return; + + var data = new List(); + foreach (var dataset in chartData.Datasets) + { + if (dataset is DoughnutChartDataset doughnutChartDataset) + { + data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); + } + } + + chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); + + dataLabelsCount += 1; + } + + #region Data Preparation + + private List GetDefaultDataSets(int numberOfDatasets) + { + var datasets = new List(); + + for (var index = 0; index < numberOfDatasets; index++) + { + datasets.Add(GetRandomDoughnutChartDataset()); + } + + return datasets; + } + + private DoughnutChartDataset GetRandomDoughnutChartDataset() + { + datasetsCount += 1; + return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; + } + + private List GetRandomData() + { + var data = new List(); + for (var index = 0; index < dataLabelsCount; index++) + { + data.Add(random.Next(0, 100)); + } + + return data; + } + + private List GetRandomBackgroundColors() + { + var colors = new List(); + for (var index = 0; index < dataLabelsCount; index++) + { + colors.Add(backgroundColors![index]); + } + + return colors; + } + + private List GetDefaultDataLabels(int numberOfLabels) + { + var labels = new List(); + for (var index = 0; index < numberOfLabels; index++) + { + labels.Add(GetNextDataLabel()); + dataLabelsCount += 1; + } + + return labels; + } + + private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; + + private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; + + #endregion Data Preparation +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/ChartsDocumentation.razor b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/ChartsDocumentation.razor deleted file mode 100644 index 1d7995c53..000000000 --- a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/ChartsDocumentation.razor +++ /dev/null @@ -1,23 +0,0 @@ -@page "/charts/line-chart" - -@title - - - -

Blazor Line Chart

-
- A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. - It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value. -
- - - -
- - -@code { - private string pageUrl = "/charts/line-chart"; - private string title = "Blazor Line Chart"; - private string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; - private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; -} diff --git a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor index 4ec611c15..b6fca8522 100644 --- a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor +++ b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/Charts_Demo_02_LineChart_Examples.razor @@ -33,7 +33,7 @@ if (indiaCurrentOver > 0 && indiaCurrentOver > (indiaRunsArray.Count - 1)) return; - chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver + 1}", "India", indiaRunsArray[indiaCurrentOver]); + chartData = await lineChart.AddDataAsync(chartData, $"{indiaCurrentOver + 1}", new LineChartDatasetData("India", indiaRunsArray[indiaCurrentOver])); indiaCurrentOver++; } @@ -42,7 +42,7 @@ if (englandCurrentOver > 0 && englandCurrentOver > (englandRunsArray.Count - 1)) return; - chartData = await lineChart.AddDataAsync(chartData, $"{englandCurrentOver + 1}", "England", englandRunsArray[englandCurrentOver]); + chartData = await lineChart.AddDataAsync(chartData, $"{englandCurrentOver + 1}", new LineChartDatasetData("England", englandRunsArray[englandCurrentOver])); englandCurrentOver++; } diff --git a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChartDocumentation.razor new file mode 100644 index 000000000..1a448b877 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -0,0 +1,40 @@ +@page "/charts/line-chart" + +@title + + + +

Blazor Line Chart

+
+ A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. + It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
+ + + +
+ By default, the chart is using the default locale of the platform on which it is running. + In the following example, you will see the chart in the German locale (de_DE). +
+ + + + + +@code { + private string pageUrl = "/charts/line-chart"; + private string title = "Blazor Line Chart"; + private string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor new file mode 100644 index 000000000..8c83b1eb0 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor @@ -0,0 +1,165 @@ +@using BlazorBootstrap.Extensions +@using Color = System.Drawing.Color + + + + + + + + + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + + private int datasetsCount = 0; + private int labelsCount = 0; + + private Random random = new(); + + protected override void OnInitialized() + { + chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; + lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + 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 LineChartDataset lineChartDataset + && lineChartDataset is not null + && lineChartDataset.Data is not null) + { + var count = lineChartDataset.Data.Count; + + var newData = new List(); + for (var i = 0; i < count; i++) + { + newData.Add(random.Next(200)); + } + + lineChartDataset.Data = newData; + newDatasets.Add(lineChartDataset); + } + } + + chartData.Datasets = newDatasets; + + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + private async Task AddDatasetAsync() + { + if (chartData is null || chartData.Datasets is null) return; + + var chartDataset = GetRandomLineChartDataset(); + chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions); + } + + private async Task AddDataAsync() + { + if (chartData is null || chartData.Datasets is null) + return; + + var data = new List(); + foreach (var dataset in chartData.Datasets) + { + if (dataset is LineChartDataset lineChartDataset) + data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200))); + } + + chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data); + } + + private async Task ShowHorizontalLineChartAsync() + { + lineChartOptions.IndexAxis = "y"; + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + private async Task ShowVerticalLineChartAsync() + { + lineChartOptions.IndexAxis = "x"; + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + #region Data Preparation + + private List GetDefaultDataSets(int numberOfDatasets) + { + var datasets = new List(); + + for (var index = 0; index < numberOfDatasets; index++) + { + datasets.Add(GetRandomLineChartDataset()); + } + + return datasets; + } + + private LineChartDataset GetRandomLineChartDataset() + { + var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); + + datasetsCount += 1; + + return new LineChartDataset() + { + Label = $"Team {datasetsCount}", + Data = GetRandomData(), + BackgroundColor = new List { c.ToRgbString() }, + BorderColor = new List { c.ToRgbString() }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { c.ToRgbString() }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + } + + 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 $"Day {labelsCount}"; + } + + #endregion Data Preparation +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor new file mode 100644 index 000000000..675c88fd9 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor @@ -0,0 +1,88 @@ +@using BlazorBootstrap.Extensions +@using Color = System.Drawing.Color + + + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; + var datasets = new List(); + + var dataset1 = new LineChartDataset() + { + Label = "Windows", + Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[0] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset1); + + var dataset2 = new LineChartDataset() + { + Label = "macOS", + Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[1] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset2); + + var dataset3 = new LineChartDataset() + { + Label = "Other", + Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[2] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + lineChartOptions = new(); + lineChartOptions.Responsive = true; + lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; + + lineChartOptions.Scales.X.Title.Text = "2019"; + lineChartOptions.Scales.X.Title.Display = true; + + lineChartOptions.Scales.Y.Title.Text = "Visitors"; + lineChartOptions.Scales.Y.Title.Display = true; + + lineChartOptions.Plugins.Title.Text = "Operating system"; + lineChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor new file mode 100644 index 000000000..ac4d9e1b8 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor @@ -0,0 +1,89 @@ +@using BlazorBootstrap.Extensions +@using Color = System.Drawing.Color + + + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + + protected override void OnInitialized() + { + var colors = ColorBuilder.CategoricalTwelveColors; + + var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; + var datasets = new List(); + + var dataset1 = new LineChartDataset() + { + Label = "Windows", + Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, + BackgroundColor = new List { colors[0] }, + BorderColor = new List { colors[0] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[0] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset1); + + var dataset2 = new LineChartDataset() + { + Label = "macOS", + Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, + BackgroundColor = new List { colors[1] }, + BorderColor = new List { colors[1] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[1] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset2); + + var dataset3 = new LineChartDataset() + { + Label = "Other", + Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, + BackgroundColor = new List { colors[2] }, + BorderColor = new List { colors[2] }, + BorderWidth = new List { 2 }, + HoverBorderWidth = new List { 4 }, + PointBackgroundColor = new List { colors[2] }, + PointRadius = new List { 0 }, // hide points + PointHoverRadius = new List { 4 }, + }; + datasets.Add(dataset3); + + chartData = new ChartData + { + Labels = labels, + Datasets = datasets + }; + + lineChartOptions = new(); + lineChartOptions.Locale = "de-DE"; + lineChartOptions.Responsive = true; + lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; + + lineChartOptions.Scales.X.Title.Text = "2019"; + lineChartOptions.Scales.X.Title.Display = true; + + lineChartOptions.Scales.Y.Title.Text = "Visitors"; + lineChartOptions.Scales.Y.Title.Display = true; + + lineChartOptions.Plugins.Title.Text = "Operating system"; + lineChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/PieCharts/ChartsDocumentation.razor b/BlazorBootstrap.Demo/Pages/Charts/PieCharts/ChartsDocumentation.razor deleted file mode 100644 index c19e6cbda..000000000 --- a/BlazorBootstrap.Demo/Pages/Charts/PieCharts/ChartsDocumentation.razor +++ /dev/null @@ -1,20 +0,0 @@ -@page "/charts/pie-chart" - -@title - - - -

Blazor Pie Chart

-
- A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. -
- - - - -@code { - private string pageUrl = "/charts/pie-chart"; - private string title = "Blazor Pie Chart"; - private string description = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; - private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; -} diff --git a/BlazorBootstrap.Demo/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo/Pages/Charts/PieCharts/PieChartDocumentation.razor new file mode 100644 index 000000000..9ff9cc1a0 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -0,0 +1,27 @@ +@page "/charts/pie-chart" + +@title + + + +

Blazor Pie Chart

+
+ A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. +
+ + +
+ In the following example, a categorical 12-color palette is used. +
+ + For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + + +@code { + private string pageUrl = "/charts/pie-chart"; + private string title = "Blazor Pie Chart"; + private string description = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; + private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; +} diff --git a/BlazorBootstrap.Demo/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor new file mode 100644 index 000000000..bf6153982 --- /dev/null +++ b/BlazorBootstrap.Demo/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor @@ -0,0 +1,155 @@ + + + + + + +@code { + private PieChart pieChart = default!; + private PieChartOptions pieChartOptions = default!; + private ChartData chartData = default!; + private string[]? backgroundColors; + + private int datasetsCount = 0; + private int dataLabelsCount = 0; + + private Random random = new(); + + protected override void OnInitialized() + { + backgroundColors = ColorBuilder.CategoricalTwelveColors; + chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; + + pieChartOptions = new(); + pieChartOptions.Responsive = true; + pieChartOptions.Plugins.Title.Text = "2022 - Sales"; + pieChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await pieChart.InitializeAsync(chartData, pieChartOptions); + } + 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 PieChartDataset pieChartDataset + && pieChartDataset is not null + && pieChartDataset.Data is not null) + { + var count = pieChartDataset.Data.Count; + + var newData = new List(); + for (var i = 0; i < count; i++) + { + newData.Add(random.Next(0, 100)); + } + + pieChartDataset.Data = newData; + newDatasets.Add(pieChartDataset); + } + } + + chartData.Datasets = newDatasets; + + await pieChart.UpdateAsync(chartData, pieChartOptions); + } + + private async Task AddDatasetAsync() + { + if (chartData is null || chartData.Datasets is null) return; + + var chartDataset = GetRandomPieChartDataset(); + chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions); + } + + private async Task AddDataAsync() + { + if (dataLabelsCount >= 12) + return; + + if (chartData is null || chartData.Datasets is null) + return; + + var data = new List(); + foreach (var dataset in chartData.Datasets) + { + if (dataset is PieChartDataset pieChartDataset) + data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); + } + + chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); + + dataLabelsCount += 1; + } + + #region Data Preparation + + private List GetDefaultDataSets(int numberOfDatasets) + { + var datasets = new List(); + + for (var index = 0; index < numberOfDatasets; index++) + { + datasets.Add(GetRandomPieChartDataset()); + } + + return datasets; + } + + private PieChartDataset GetRandomPieChartDataset() + { + datasetsCount += 1; + return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; + } + + private List GetRandomData() + { + var data = new List(); + for (var index = 0; index < dataLabelsCount; index++) + { + data.Add(random.Next(0, 100)); + } + + return data; + } + + private List GetRandomBackgroundColors() + { + var colors = new List(); + for (var index = 0; index < dataLabelsCount; index++) + { + colors.Add(backgroundColors![index]); + } + + return colors; + } + + private List GetDefaultDataLabels(int numberOfLabels) + { + var labels = new List(); + for (var index = 0; index < numberOfLabels; index++) + { + labels.Add(GetNextDataLabel()); + dataLabelsCount += 1; + } + + return labels; + } + + private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; + + private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; + + #endregion Data Preparation +} diff --git a/BlazorBootstrap.Demo/_Imports.razor b/BlazorBootstrap.Demo/_Imports.razor index 8dc473106..55539e260 100644 --- a/BlazorBootstrap.Demo/_Imports.razor +++ b/BlazorBootstrap.Demo/_Imports.razor @@ -10,3 +10,5 @@ @using BlazorBootstrap.Demo @using BlazorBootstrap.Demo.Shared @using System.Threading.Tasks +@using BlazorBootstrap.Extensions +@using BlazorBootstrap.Utilities; diff --git a/blazorbootstrap/Components/Charts/BarChart.razor.cs b/blazorbootstrap/Components/Charts/BarChart.razor.cs index 8191125e3..6b648f049 100644 --- a/blazorbootstrap/Components/Charts/BarChart.razor.cs +++ b/blazorbootstrap/Components/Charts/BarChart.razor.cs @@ -17,7 +17,7 @@ public BarChart() #region Methods - public override async Task AddDataAsync(ChartData chartData, string dataLabel, string datasetLabel, double data) + public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) { if (chartData is null) throw new ArgumentNullException(nameof(chartData)); @@ -25,32 +25,24 @@ public override async Task AddDataAsync(ChartData chartData, string d if (chartData.Datasets is null) throw new ArgumentNullException(nameof(chartData.Datasets)); - if (datasetLabel is null) - throw new ArgumentNullException(nameof(datasetLabel)); - - if (string.IsNullOrWhiteSpace(datasetLabel)) - throw new Exception($"{nameof(datasetLabel)} cannot be empty."); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(datasetLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); + if (data is null) + throw new ArgumentNullException(nameof(data)); foreach (var dataset in chartData.Datasets) { - if (dataset is BarChartDataset lineChartDataset && lineChartDataset.Label == dataLabel) + if (dataset is BarChartDataset barChartDataset && barChartDataset.Label == dataLabel) { - lineChartDataset.Data?.Add(data); + if (data is BarChartDatasetData barChartDatasetData) + barChartDataset.Data?.Add(barChartDatasetData.Data); } } - await JS.InvokeVoidAsync("window.blazorChart.bar.addDatasetData", ElementId, dataLabel, datasetLabel, data); + await JS.InvokeVoidAsync("window.blazorChart.bar.addDatasetData", ElementId, dataLabel, data); return chartData; } - public override async Task AddDataAsync(ChartData chartData, string dataLabel, List data) + public override async Task AddDataAsync(ChartData chartData, string dataLabel, List data) { if (chartData is null) throw new ArgumentNullException(nameof(chartData)); @@ -83,17 +75,16 @@ public override async Task AddDataAsync(ChartData chartData, string d foreach (var dataset in chartData.Datasets) { - if (dataset is BarChartDataset lineChartDataset) + if (dataset is BarChartDataset barChartDataset) { - var chartDatasetData = data.FirstOrDefault(x => x.DatasetLabel == lineChartDataset.Label); - if (chartDatasetData is null) - continue; + var chartDatasetData = data.FirstOrDefault(x => x is BarChartDatasetData barChartDatasetData && barChartDatasetData.DatasetLabel == barChartDataset.Label); - lineChartDataset.Data?.Add(chartDatasetData.Data); + if (chartDatasetData is BarChartDatasetData barChartDatasetData) + barChartDataset.Data?.Add(barChartDatasetData.Data); } } - await JS.InvokeVoidAsync("window.blazorChart.bar.addDatasetsData", ElementId, dataLabel, data); + await JS.InvokeVoidAsync("window.blazorChart.bar.addDatasetsData", ElementId, dataLabel, data?.Select(x => (BarChartDatasetData)x)); return chartData; } diff --git a/blazorbootstrap/Components/Charts/BaseChart.cs b/blazorbootstrap/Components/Charts/BaseChart.cs index 185ba569e..9a8eb40d7 100644 --- a/blazorbootstrap/Components/Charts/BaseChart.cs +++ b/blazorbootstrap/Components/Charts/BaseChart.cs @@ -51,9 +51,9 @@ public virtual async Task InitializeAsync(ChartData chartData, IChartOptions cha //public async Task ToBase64Image(string type, double quality) { } - public virtual async Task AddDataAsync(ChartData chartData, string dataLabel, List data) => await Task.FromResult(chartData); + public virtual async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) => await Task.FromResult(chartData); - public virtual async Task AddDataAsync(ChartData chartData, string dataLabel, string datasetLabel, double data) => await Task.FromResult(chartData); + public virtual async Task AddDataAsync(ChartData chartData, string dataLabel, List data) => await Task.FromResult(chartData); public virtual async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) => await Task.FromResult(chartData); diff --git a/blazorbootstrap/Components/Charts/BubbleChart.razor b/blazorbootstrap/Components/Charts/BubbleChart.razor deleted file mode 100644 index d824b3da0..000000000 --- a/blazorbootstrap/Components/Charts/BubbleChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BaseChart - -
- -
diff --git a/blazorbootstrap/Components/Charts/BubbleChart.razor.cs b/blazorbootstrap/Components/Charts/BubbleChart.razor.cs deleted file mode 100644 index 4cda5c6e5..000000000 --- a/blazorbootstrap/Components/Charts/BubbleChart.razor.cs +++ /dev/null @@ -1,28 +0,0 @@ -namespace BlazorBootstrap; - -public partial class BubbleChart : BaseChart -{ - #region Constructors - - public BubbleChart() - { - chartType = ChartType.Bubble; - } - - #endregion Constructors - - #region Members - - #endregion Members - - #region Methods - - #endregion Methods - - #region Properties - - /// - protected override bool ShouldAutoGenerateId => true; - - #endregion Properties -} diff --git a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs b/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs index 99ea6ce00..7add01047 100644 --- a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs +++ b/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs @@ -17,7 +17,7 @@ public DoughnutChart() #region Methods - public override async Task AddDataAsync(ChartData chartData, string dataLabel, string datasetLabel, double data) + public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) { if (chartData is null) throw new ArgumentNullException(nameof(chartData)); @@ -25,32 +25,27 @@ public override async Task AddDataAsync(ChartData chartData, string d if (chartData.Datasets is null) throw new ArgumentNullException(nameof(chartData.Datasets)); - if (datasetLabel is null) - throw new ArgumentNullException(nameof(datasetLabel)); - - if (string.IsNullOrWhiteSpace(datasetLabel)) - throw new Exception($"{nameof(datasetLabel)} cannot be empty."); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(datasetLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); + if (data is null) + throw new ArgumentNullException(nameof(data)); foreach (var dataset in chartData.Datasets) { if (dataset is DoughnutChartDataset doughnutChartDataset && doughnutChartDataset.Label == dataLabel) { - doughnutChartDataset.Data?.Add(data); + if (data is DoughnutChartDatasetData doughnutChartDatasetData) + { + doughnutChartDataset.Data?.Add(doughnutChartDatasetData.Data); + doughnutChartDataset.BackgroundColor?.Add(doughnutChartDatasetData.BackgroundColor); + } } } - await JS.InvokeVoidAsync("window.blazorChart.doughnut.addDatasetData", ElementId, dataLabel, datasetLabel, data); + await JS.InvokeVoidAsync("window.blazorChart.doughnut.addDatasetData", ElementId, dataLabel, data); return chartData; } - public override async Task AddDataAsync(ChartData chartData, string dataLabel, List data) + public override async Task AddDataAsync(ChartData chartData, string dataLabel, List data) { if (chartData is null) throw new ArgumentNullException(nameof(chartData)); @@ -85,15 +80,17 @@ public override async Task AddDataAsync(ChartData chartData, string d { if (dataset is DoughnutChartDataset doughnutChartDataset) { - var chartDatasetData = data.FirstOrDefault(x => x.DatasetLabel == doughnutChartDataset.Label); - if (chartDatasetData is null) - continue; + var chartDatasetData = data.FirstOrDefault(x => x is DoughnutChartDatasetData doughnutChartDatasetData && doughnutChartDatasetData.DatasetLabel == doughnutChartDataset.Label); - doughnutChartDataset.Data?.Add(chartDatasetData.Data); + if (chartDatasetData is DoughnutChartDatasetData doughnutChartDatasetData) + { + doughnutChartDataset.Data?.Add(doughnutChartDatasetData.Data); + doughnutChartDataset.BackgroundColor?.Add(doughnutChartDatasetData.BackgroundColor); + } } } - await JS.InvokeVoidAsync("window.blazorChart.doughnut.addDatasetsData", ElementId, dataLabel, data); + await JS.InvokeVoidAsync("window.blazorChart.doughnut.addDatasetsData", ElementId, dataLabel, data?.Select(x => (DoughnutChartDatasetData)x)); return chartData; } diff --git a/blazorbootstrap/Components/Charts/LineChart.razor.cs b/blazorbootstrap/Components/Charts/LineChart.razor.cs index 5ce5cbe90..54325f449 100644 --- a/blazorbootstrap/Components/Charts/LineChart.razor.cs +++ b/blazorbootstrap/Components/Charts/LineChart.razor.cs @@ -17,7 +17,7 @@ public LineChart() #region Methods - public override async Task AddDataAsync(ChartData chartData, string dataLabel, string datasetLabel, double data) + public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) { if (chartData is null) throw new ArgumentNullException(nameof(chartData)); @@ -25,32 +25,24 @@ public override async Task AddDataAsync(ChartData chartData, string d if (chartData.Datasets is null) throw new ArgumentNullException(nameof(chartData.Datasets)); - if (datasetLabel is null) - throw new ArgumentNullException(nameof(datasetLabel)); - - if (string.IsNullOrWhiteSpace(datasetLabel)) - throw new Exception($"{nameof(datasetLabel)} cannot be empty."); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(datasetLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); + if (data is null) + throw new ArgumentNullException(nameof(data)); foreach (var dataset in chartData.Datasets) { if (dataset is LineChartDataset lineChartDataset && lineChartDataset.Label == dataLabel) { - lineChartDataset.Data?.Add(data); + if (data is LineChartDatasetData lineChartDatasetData) + lineChartDataset.Data?.Add(lineChartDatasetData.Data); } } - await JS.InvokeVoidAsync("window.blazorChart.line.addDatasetData", ElementId, dataLabel, datasetLabel, data); + await JS.InvokeVoidAsync("window.blazorChart.line.addDatasetData", ElementId, dataLabel, data); return chartData; } - public override async Task AddDataAsync(ChartData chartData, string dataLabel, List data) + public override async Task AddDataAsync(ChartData chartData, string dataLabel, List data) { if (chartData is null) throw new ArgumentNullException(nameof(chartData)); @@ -85,15 +77,14 @@ public override async Task AddDataAsync(ChartData chartData, string d { if (dataset is LineChartDataset lineChartDataset) { - var chartDatasetData = data.FirstOrDefault(x => x.DatasetLabel == lineChartDataset.Label); - if (chartDatasetData is null) - continue; - - lineChartDataset.Data?.Add(chartDatasetData.Data); + var chartDatasetData = data.FirstOrDefault(x => x is LineChartDatasetData lineChartDatasetData && lineChartDatasetData.DatasetLabel == lineChartDataset.Label); + + if (chartDatasetData is LineChartDatasetData lineChartDatasetData) + lineChartDataset.Data?.Add(lineChartDatasetData.Data); } } - await JS.InvokeVoidAsync("window.blazorChart.line.addDatasetsData", ElementId, dataLabel, data); + await JS.InvokeVoidAsync("window.blazorChart.line.addDatasetsData", ElementId, dataLabel, data?.Select(x => (LineChartDatasetData)x)); return chartData; } diff --git a/blazorbootstrap/Components/Charts/PieChart.razor.cs b/blazorbootstrap/Components/Charts/PieChart.razor.cs index b182d7273..873e04626 100644 --- a/blazorbootstrap/Components/Charts/PieChart.razor.cs +++ b/blazorbootstrap/Components/Charts/PieChart.razor.cs @@ -17,7 +17,7 @@ public PieChart() #region Methods - public override async Task AddDataAsync(ChartData chartData, string dataLabel, string datasetLabel, double data) + public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) { if (chartData is null) throw new ArgumentNullException(nameof(chartData)); @@ -25,32 +25,27 @@ public override async Task AddDataAsync(ChartData chartData, string d if (chartData.Datasets is null) throw new ArgumentNullException(nameof(chartData.Datasets)); - if (datasetLabel is null) - throw new ArgumentNullException(nameof(datasetLabel)); - - if (string.IsNullOrWhiteSpace(datasetLabel)) - throw new Exception($"{nameof(datasetLabel)} cannot be empty."); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(datasetLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); + if (data is null) + throw new ArgumentNullException(nameof(data)); foreach (var dataset in chartData.Datasets) { if (dataset is PieChartDataset pieChartDataset && pieChartDataset.Label == dataLabel) { - pieChartDataset.Data?.Add(data); + if (data is PieChartDatasetData pieChartDatasetData) + { + pieChartDataset.Data?.Add(pieChartDatasetData.Data); + pieChartDataset.BackgroundColor?.Add(pieChartDatasetData.BackgroundColor); + } } } - await JS.InvokeVoidAsync("window.blazorChart.pie.addDatasetData", ElementId, dataLabel, datasetLabel, data); + await JS.InvokeVoidAsync("window.blazorChart.pie.addDatasetData", ElementId, dataLabel, data); return chartData; } - public override async Task AddDataAsync(ChartData chartData, string dataLabel, List data) + public override async Task AddDataAsync(ChartData chartData, string dataLabel, List data) { if (chartData is null) throw new ArgumentNullException(nameof(chartData)); @@ -85,15 +80,17 @@ public override async Task AddDataAsync(ChartData chartData, string d { if (dataset is PieChartDataset pieChartDataset) { - var chartDatasetData = data.FirstOrDefault(x => x.DatasetLabel == pieChartDataset.Label); - if (chartDatasetData is null) - continue; - - pieChartDataset.Data?.Add(chartDatasetData.Data); + var chartDatasetData = data.FirstOrDefault(x => x is PieChartDatasetData pieChartDatasetData && pieChartDatasetData.DatasetLabel == pieChartDataset.Label); + + if (chartDatasetData is PieChartDatasetData pieChartDatasetData) + { + pieChartDataset.Data?.Add(pieChartDatasetData.Data); + pieChartDataset.BackgroundColor?.Add(pieChartDatasetData.BackgroundColor); + } } } - await JS.InvokeVoidAsync("window.blazorChart.pie.addDatasetsData", ElementId, dataLabel, data); + await JS.InvokeVoidAsync("window.blazorChart.pie.addDatasetsData", ElementId, dataLabel, data?.Select(x => (PieChartDatasetData)x)); return chartData; } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BarChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/BarChartDatasetData.cs new file mode 100644 index 000000000..13e31ec18 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/BarChartDatasetData.cs @@ -0,0 +1,8 @@ +namespace BlazorBootstrap; + +public record BarChartDatasetData : ChartDatasetData +{ + public BarChartDatasetData(string? datasetLabel, double data) : base(datasetLabel, data) + { + } +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetData.cs index f32d53b52..036e27240 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetData.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetData.cs @@ -1,3 +1,15 @@ namespace BlazorBootstrap; -public record ChartDatasetData(string DatasetLabel, double Data); +public interface IChartDatasetData { } + +public record ChartDatasetData : IChartDatasetData +{ + public ChartDatasetData(string? datasetLabel, double data) + { + DatasetLabel = datasetLabel; + Data = data; + } + + public string? DatasetLabel { get; init; } + public double Data { get; init; } +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDatasetData.cs new file mode 100644 index 000000000..8afe24316 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDatasetData.cs @@ -0,0 +1,11 @@ +namespace BlazorBootstrap; + +public record DoughnutChartDatasetData : ChartDatasetData +{ + public DoughnutChartDatasetData(string? datasetLabel, double data, string? backgroundColor) : base(datasetLabel, data) + { + BackgroundColor = backgroundColor; + } + + public string? BackgroundColor { get; init; } +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChartDatasetData.cs new file mode 100644 index 000000000..49eba4246 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChartDatasetData.cs @@ -0,0 +1,8 @@ +namespace BlazorBootstrap; + +public record LineChartDatasetData : ChartDatasetData +{ + public LineChartDatasetData(string? datasetLabel, double data) : base(datasetLabel, data) + { + } +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PieChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/PieChartDatasetData.cs new file mode 100644 index 000000000..c362505b8 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/PieChartDatasetData.cs @@ -0,0 +1,11 @@ +namespace BlazorBootstrap; + +public record PieChartDatasetData : ChartDatasetData +{ + public PieChartDatasetData(string? datasetLabel, double data, string? backgroundColor) : base(datasetLabel, data) + { + BackgroundColor = backgroundColor; + } + + public string? BackgroundColor { get; init; } +} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs index ad3c3be99..b9e9e3829 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs @@ -7,6 +7,13 @@ public interface IChartOptions { } /// public class ChartOptions : IChartOptions { + /// + /// Gets or sets the locale. + /// By default, the chart is using the default locale of the platform which is running on. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Locale { get; set; } + /// /// /// @@ -28,7 +35,6 @@ public class ChartLayout public class Interaction { - private InteractionMode mode; /// @@ -90,6 +96,8 @@ public class Plugins [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartTooltip? Tooltip { get; set; } + + public Legend Legend { get; set; } = new Legend(); } public class Scales @@ -130,9 +138,15 @@ public class ChartAxes [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public double? SuggestedMin { get; set; } - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public Title? Title { get; set; } = new Title(); + + /// + /// Should the data be stacked. + /// By default data is not stacked. + /// If the stacked option of the value scale (y-axis on horizontal chart) is true, positive and negative values are stacked separately. + /// + public bool Stacked { get; set; } } /// @@ -310,3 +324,21 @@ public class ChartTooltip /// public string? YAlign { get; set; } } + +public class Legend +{ + /// + /// Alignment of the legend. Default values is 'center'. Other possible values 'start' and 'end'. + /// + public string? Align { get; set; } = "center"; + + /// + /// Position of the legend. Default value is 'top'. Other possible value is 'bottom'. + /// + public string? Position { get; set; } = "top"; + + /// + /// Is the legend shown? Default value is 'true'. + /// + public bool Display { get; set; } = true; +} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/DoughnutChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/DoughnutChartOptions.cs index e54b6cbed..672932436 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/DoughnutChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/DoughnutChartOptions.cs @@ -2,4 +2,5 @@ public class DoughnutChartOptions : ChartOptions { + public Plugins Plugins { get; set; } = new Plugins(); } diff --git a/blazorbootstrap/Models/Charts/ChartOptions/PieChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/PieChartOptions.cs index 7ff7a2741..f70d8028b 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/PieChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/PieChartOptions.cs @@ -2,4 +2,5 @@ public class PieChartOptions : ChartOptions { + public Plugins Plugins { get; set; } = new Plugins(); } diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index c52afc54d..a568cf8ba 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -582,10 +582,11 @@ window.blazorChart = { } window.blazorChart.bar = { - addDatasetData: (elementId, dataLabel, datasetLabel, data) => { + addDatasetData: (elementId, dataLabel, data) => { let chart = window.blazorChart.get(elementId); if (chart) { const chartData = chart.data; + const chartDatasetData = data; if (!chartData.labels.includes(dataLabel)) chartData.labels.push(dataLabel); @@ -593,9 +594,9 @@ window.blazorChart.bar = { const chartDatasets = chartData.datasets; if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === datasetLabel); + let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(data); + chartDatasets[datasetIndex].data.push(chartDatasetData.data); chart.update(); } } @@ -694,10 +695,11 @@ window.blazorChart.bar = { } window.blazorChart.doughnut = { - addDatasetData: (elementId, dataLabel, datasetLabel, data) => { + addDatasetData: (elementId, dataLabel, data) => { let chart = window.blazorChart.get(elementId); if (chart) { const chartData = chart.data; + const chartDatasetData = data; if (!chartData.labels.includes(dataLabel)) chartData.labels.push(dataLabel); @@ -705,9 +707,9 @@ window.blazorChart.doughnut = { const chartDatasets = chartData.datasets; if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === datasetLabel); + let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(data); + chartDatasets[datasetIndex].data.push(chartDatasetData.data); chart.update(); } } @@ -716,6 +718,7 @@ window.blazorChart.doughnut = { addDatasetsData: (elementId, dataLabel, data) => { let chart = window.blazorChart.get(elementId); if (chart && data) { + console.log(chart); const chartData = chart.data; if (!chartData.labels.includes(dataLabel)) { @@ -725,10 +728,12 @@ window.blazorChart.doughnut = { data.forEach(chartDatasetData => { let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); chartData.datasets[datasetIndex].data.push(chartDatasetData.data); + chartData.datasets[datasetIndex].backgroundColor.push(chartDatasetData.backgroundColor); }); chart.update(); } } + console.log(chart); } }, addDataset: (elementId, newDataset) => { @@ -806,10 +811,11 @@ window.blazorChart.doughnut = { } window.blazorChart.line = { - addDatasetData: (elementId, dataLabel, datasetLabel, data) => { + addDatasetData: (elementId, dataLabel, data) => { let chart = window.blazorChart.get(elementId); if (chart) { const chartData = chart.data; + const chartDatasetData = data; if (!chartData.labels.includes(dataLabel)) chartData.labels.push(dataLabel); @@ -817,9 +823,9 @@ window.blazorChart.line = { const chartDatasets = chartData.datasets; if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === datasetLabel); + let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(data); + chartDatasets[datasetIndex].data.push(chartDatasetData.data); chart.update(); } } @@ -954,10 +960,11 @@ window.blazorChart.line = { } window.blazorChart.pie = { - addDatasetData: (elementId, dataLabel, datasetLabel, data) => { + addDatasetData: (elementId, dataLabel, data) => { let chart = window.blazorChart.get(elementId); if (chart) { const chartData = chart.data; + const chartDatasetData = data; if (!chartData.labels.includes(dataLabel)) chartData.labels.push(dataLabel); @@ -965,9 +972,9 @@ window.blazorChart.pie = { const chartDatasets = chartData.datasets; if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === datasetLabel); + let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(data); + chartDatasets[datasetIndex].data.push(chartDatasetData.data); chart.update(); } } @@ -985,6 +992,7 @@ window.blazorChart.pie = { data.forEach(chartDatasetData => { let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); chartData.datasets[datasetIndex].data.push(chartDatasetData.data); + chartData.datasets[datasetIndex].backgroundColor.push(chartDatasetData.backgroundColor); }); chart.update(); }