diff --git a/.gitattributes b/.gitattributes index 9b8dd82f9..25179d52b 100644 --- a/.gitattributes +++ b/.gitattributes @@ -63,4 +63,4 @@ #*.RTF diff=astextplain # blazor dlls -*.dll binary \ No newline at end of file +*.dll binary diff --git a/.gitignore b/.gitignore index 5d91e72ad..cb9671d6a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ ## Ignore Visual Studio temporary files, build results, and ## files generated by popular Visual Studio add-ons. ## +## ## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore # User-specific files diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index 659812ffa..b77275d43 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -81,6 +81,7 @@ internal override IEnumerable GetNavItems() 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 = "604", Text = "Polar Area Chart", Href = "/charts/polar-area-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.RCL/Components/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor index 4f487c3a6..80a43adbc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor @@ -21,10 +21,11 @@
  • Doughnut Chart
  • Line Chart
  • Pie Chart
    • +
  • Polar Area Chart
    • - We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions. + We will add Bubble Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/Charts_Demo_00_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/Charts_Demo_00_Examples.razor index 7748b6671..b243e82df 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/Charts_Demo_00_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/Charts_Demo_00_Examples.razor @@ -69,27 +69,27 @@ { Label = "India", Data = new List{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 }, - 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}, + BackgroundColor = "rgb(88, 80, 141)", + BorderColor = "rgb(88, 80, 141)", + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = "rgb(88, 80, 141)", + PointBorderColor = "rgb(88, 80, 141)", + PointRadius = 0, // hide points + PointHoverRadius = 4, }, new LineChartDataset() { Label = "England", Data = new List{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 }, - 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}, + BackgroundColor = "rgb(255, 166, 0)", + BorderColor = "rgb(255, 166, 0)", + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = "rgb(255, 166, 0)", + PointBorderColor = "rgb(255, 166, 0)", + PointRadius = 0, // hide points + PointHoverRadius = 4, } } }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor index 977dcae96..dd049619b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor @@ -100,11 +100,11 @@ var dataset = GetRandomDoughnutChartDataset(); if (index == 0) - dataset.Datalabels.Anchor = "end"; + dataset.Datalabels.Anchor = Anchor.End; else if (index == numberOfDatasets - 1) - dataset.Datalabels.Anchor = "start"; + dataset.Datalabels.Anchor = Anchor.Start; else - dataset.Datalabels.Anchor = "center"; + dataset.Datalabels.Anchor = Anchor.Center; datasets.Add(dataset); } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor index 8a440de14..7e3cc73c0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor @@ -122,13 +122,13 @@ { 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 } + BackgroundColor = c.ToRgbString(), + BorderColor = c.ToRgbString(), + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = c.ToRgbString(), + PointRadius = 0, // hide points + PointHoverRadius = 4, }; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor index 34cad3aa6..dc2bcb032 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor @@ -16,13 +16,13 @@ { 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 } + BackgroundColor = colors[0], + BorderColor = colors[0], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[0], + PointRadius = 0, // hide points + PointHoverRadius = 4, }; datasets.Add(dataset1); @@ -30,13 +30,13 @@ { 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 } + BackgroundColor = colors[1], + BorderColor = colors[1], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[1], + PointRadius = 0, // hide points + PointHoverRadius = 4, }; datasets.Add(dataset2); @@ -44,13 +44,13 @@ { 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 } + BackgroundColor = colors[2], + BorderColor = colors[2], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[2], + PointRadius = 0, // hide points + PointHoverRadius = 4, }; datasets.Add(dataset3); diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor index c83762196..26c5796f7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor @@ -16,13 +16,13 @@ { 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 } + BackgroundColor = colors[0], + BorderColor = colors[0], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[0], + PointRadius = 0, // hide points + PointHoverRadius = 4, }; datasets.Add(dataset1); @@ -30,13 +30,13 @@ { 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 } + BackgroundColor = colors[1], + BorderColor = colors[1], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[1], + PointRadius = 0, // hide points + PointHoverRadius = 4, }; datasets.Add(dataset2); @@ -44,13 +44,13 @@ { 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 } + BackgroundColor = colors[2], + BorderColor = colors[2], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[2], + PointRadius = 0, // hide points + PointHoverRadius = 4, }; datasets.Add(dataset3); diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor index 1d144ee13..476af895b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor @@ -56,27 +56,27 @@ { 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 } + BackgroundColor = "rgb(88, 80, 141)", + BorderColor = "rgb(88, 80, 141)", + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = "rgb(88, 80, 141)", + PointBorderColor = "rgb(88, 80, 141)", + PointRadius = 0, // hide points + PointHoverRadius = 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 } + BackgroundColor = "rgb(255, 166, 0)", + BorderColor = "rgb(255, 166, 0)", + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = "rgb(255, 166, 0)", + PointBorderColor = "rgb(255, 166, 0)", + PointRadius = 0, // hide points + PointHoverRadius = 4, } }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor index a553b515b..528aa4d20 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor @@ -16,16 +16,16 @@ { 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 { 3 }, // show points - PointHoverRadius = new List { 4 }, + BackgroundColor = colors[0], + BorderColor = colors[0], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[0], + PointRadius = 3, // show points + PointHoverRadius = 4, // datalabels - Datalabels = new() { Align = "end", Anchor = "end" } + Datalabels = new() { Alignment = Alignment.End, Anchor = Anchor.End } }; datasets.Add(dataset1); @@ -33,16 +33,16 @@ { 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 { 3 }, // show points - PointHoverRadius = new List { 4 }, + BackgroundColor = colors[1], + BorderColor = colors[1], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[1], + PointRadius = 3, // show points + PointHoverRadius = 4, // datalabels - Datalabels = new() { Align = "end", Anchor = "end" } + Datalabels = new() { Alignment = Alignment.End, Anchor = Anchor.End } }; datasets.Add(dataset2); @@ -50,16 +50,16 @@ { 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 { 3 }, // show points - PointHoverRadius = new List { 4 }, + BackgroundColor = colors[2], + BorderColor = colors[2], + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = colors[2], + PointRadius = 3, // show points + PointHoverRadius = 4, // datalabels - Datalabels = new() { Align = "start", Anchor = "start" } + Datalabels = new() { Alignment = Alignment.Start, Anchor = Anchor.Start } }; datasets.Add(dataset3); diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor index b2d4d56a2..5b08113b7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor @@ -77,13 +77,13 @@ { 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 } + BackgroundColor = c.ToRgbString(), + BorderColor = c.ToRgbString(), + BorderWidth = 2, + HoverBorderWidth = 4, + PointBackgroundColor = c.ToRgbString(), + PointRadius = 0, // hide points + PointHoverRadius = 4, }; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor index 83bee0027..07a1ef7eb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor @@ -98,11 +98,11 @@ var dataset = GetRandomPieChartDataset(); if (index == 0) - dataset.Datalabels.Anchor = "end"; + dataset.Datalabels.Anchor = Anchor.End; else if (index == numberOfDatasets - 1) - dataset.Datalabels.Anchor = "end"; + dataset.Datalabels.Anchor = Anchor.End; else - dataset.Datalabels.Anchor = "center"; + dataset.Datalabels.Anchor = Anchor.Center; datasets.Add(dataset); } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor new file mode 100644 index 000000000..905a78dc0 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor @@ -0,0 +1,43 @@ +@page "/charts/polar-area-chart" + +@title + + + +

    Blazor Polar Area Chart

    +
    + A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. +
    + + + + +
    + Refer to the getting started guide for setting up charts. +
    + + +
    + 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. + + + +@* + + + +
    + This sample demonstrates how to change the position of the chart legend. +
    + *@ + +@code { + private string pageUrl = "/charts/polar-area-chart"; + private string title = "Blazor Polar Area Chart"; + private string description = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value."; + private string imageUrl = "https://i.imgur.com/MSFDsSo.png"; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor new file mode 100644 index 000000000..e2dbb36c8 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor @@ -0,0 +1,157 @@ + + +
    + + + +
    + +@code { + private PolarAreaChart polarAreaChart = default!; + private PolarAreaChartOptions polarAreaChartOptions = 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 = ColorUtility.CategoricalTwelveColors; + chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; + + polarAreaChartOptions = new(); + polarAreaChartOptions.Responsive = true; + polarAreaChartOptions.Plugins.Title!.Text = "2022 - Sales"; + polarAreaChartOptions.Plugins.Title.Display = true; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions); + } + 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 PolarAreaChartDataset polarAreaChartDataset + && polarAreaChartDataset is not null + && polarAreaChartDataset.Data is not null) + { + var count = polarAreaChartDataset.Data.Count; + + var newData = new List(); + for (var i = 0; i < count; i++) + { + newData.Add(random.Next(0, 100)); + } + + polarAreaChartDataset.Data = newData; + newDatasets.Add(polarAreaChartDataset); + } + } + + chartData.Datasets = newDatasets; + + await polarAreaChart.UpdateAsync(chartData, polarAreaChartOptions); + } + + private async Task AddDatasetAsync() + { + if (chartData is null || chartData.Datasets is null) return; + + var chartDataset = GetRandomPolarAreaChartDataset(); + chartData = await polarAreaChart.AddDatasetAsync(chartData, chartDataset, polarAreaChartOptions); + } + + 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 PolarAreaChartDataset polarAreaChartDataset) + data.Add(new PolarAreaChartDatasetData(polarAreaChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); + } + + chartData = await polarAreaChart.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(GetRandomPolarAreaChartDataset()); + } + + return datasets; + } + + private PolarAreaChartDataset GetRandomPolarAreaChartDataset() + { + 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.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Datalabels.razor new file mode 100644 index 000000000..07a1ef7eb --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Datalabels.razor @@ -0,0 +1,158 @@ + + +
    + + +
    + +@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 = ColorUtility.CategoricalTwelveColors; + chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) }; + + 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) + { + // pass the plugin name to enable the data labels + await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { "ChartDataLabels" }); + } + 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 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++) + { + var dataset = GetRandomPieChartDataset(); + + if (index == 0) + dataset.Datalabels.Anchor = Anchor.End; + else if (index == numberOfDatasets - 1) + dataset.Datalabels.Anchor = Anchor.End; + else + dataset.Datalabels.Anchor = Anchor.Center; + + datasets.Add(dataset); + } + + 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.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_03_Change_Legend_Position.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_03_Change_Legend_Position.razor new file mode 100644 index 000000000..3ab7f6e51 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_03_Change_Legend_Position.razor @@ -0,0 +1,113 @@ + + +
    + + + + +
    + +@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 = ColorUtility.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; + + pieChartOptions.Plugins.Legend.Position = "right"; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await pieChart.InitializeAsync(chartData, pieChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } + + private async Task PositionTopAsync() => await UpdatePositionAsync("top"); + private async Task PositionRightAsync() => await UpdatePositionAsync("right"); + private async Task PositionBottomAsync() => await UpdatePositionAsync("bottom"); + private async Task PositionLeftAsync() => await UpdatePositionAsync("left"); + + private async Task UpdatePositionAsync(string position) + { + pieChartOptions.Plugins.Legend.Position = position; + await pieChart.UpdateAsync(chartData, pieChartOptions); + } + + #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.RCL/Components/Pages/Images/ImageDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor index 045781c95..37e14c4c0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor @@ -30,5 +30,5 @@ private string pageUrl = "/images"; private string title = "Blazor Image Component"; private string description = "Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them."; - private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update this + private string imageUrl = "https://i.imgur.com/eiSTmvO.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index a7c16fecb..63a0fcc4b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -90,11 +90,6 @@

    Confirm Dialog

    -
    - -

    Dropdown

    -     -

    Currency Input

    @@ -105,6 +100,11 @@

    Date Input
    +
    + +

    Dropdown

    +     +

    Grid Updated

    @@ -293,6 +293,11 @@

    Pie Chart Updated
    +
    + +

    Polar Area Chart New

    +     +
    diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 3fd4e4add..76440985b 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -61,7 +61,7 @@ representative at an online or offline event. Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at -support@blazorbootstrap.com +[support@blazorbootstrap.com](mailto:support@blazorbootstrap.com) All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the diff --git a/LICENSE.txt b/LICENSE.txt index 30ef8e7e8..b084f0a1e 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -187,7 +187,7 @@ same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright 2024 Vikram Gaddam + Copyright (c) 2024 Vikram Gaddam Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/README.md b/README.md index e6003cda9..3f3170cc6 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorboo | Dropdown | [Docs](https://docs.blazorbootstrap.com/components/dropdown) | [Demos](https://demos.blazorbootstrap.com/dropdown) | | Grid | [Docs](https://docs.blazorbootstrap.com/components/grid) | [Demos](https://demos.blazorbootstrap.com/grid) | | Icons | [Docs](https://docs.blazorbootstrap.com/content/icons) | [Demos](https://demos.blazorbootstrap.com/icons) | +| Images | [Docs](https://docs.blazorbootstrap.com/content/images) | [Demos](https://demos.blazorbootstrap.com/images) | | Modals | [Docs](https://docs.blazorbootstrap.com/components/modal) | [Demos](https://demos.blazorbootstrap.com/modals) | | Number Input | [Docs](https://docs.blazorbootstrap.com/forms/number-input) | [Demos](https://demos.blazorbootstrap.com/form/number-input) | | Offcanvas | [Docs](https://docs.blazorbootstrap.com/components/offcanvas) | [Demos](https://demos.blazorbootstrap.com/offcanvas) | @@ -115,12 +116,18 @@ Blazor Bootstrap's documentation, which is included in this repository's root di ### Blazor Bootstrap - Badge ![Blazor Bootstrap - Badge](https://i.imgur.com/ux0sTs9.png "Blazor Bootstrap - Badge") +### Blazor Bootstrap - Breadcrumb +![Blazor Bootstrap - Breadcrumb](https://i.imgur.com/hO90HoC.jpg "Blazor Bootstrap - Breadcrumb") + ### Blazor Bootstrap - Buttons ![Blazor Bootstrap - Buttons](https://i.imgur.com/ENKhcXR.jpg "Blazor Bootstrap - Buttons") ### Blazor Bootstrap - Callout ![Blazor Bootstrap - Callout](https://i.imgur.com/vmibzEu.png "Blazor Bootstrap - Callout") +### Blazor Bootstrap - Card +![Blazor Bootstrap - Card](https://i.imgur.com/RhytwPa.png "Blazor Bootstrap - Card") + ### Blazor Bootstrap - Charts: Bar Chart ![Blazor Bootstrap - Charts: Bar Chart](https://i.imgur.com/JLV7oss.png "Blazor Bootstrap - Charts: Bar Chart") @@ -133,6 +140,9 @@ Blazor Bootstrap's documentation, which is included in this repository's root di ### Blazor Bootstrap - Charts: Pie Chart ![Blazor Bootstrap - Charts: Pie Chart](https://i.imgur.com/jr3w0fM.png "Blazor Bootstrap - Charts: Pie Chart") +### Blazor Bootstrap - Charts: Polar Area Chart +![Blazor Bootstrap - Charts: Polar Area Chart](https://i.imgur.com/MSFDsSo.png "Blazor Bootstrap - Charts: Polar Area Chart") + ### Blazor Bootstrap - Collapse ![Blazor Bootstrap - Collapse](https://i.imgur.com/8A0emQe.png "Blazor Bootstrap - Collapse") @@ -145,9 +155,18 @@ Blazor Bootstrap's documentation, which is included in this repository's root di ### Blazor Bootstrap - Date Input ![Blazor Bootstrap - Date Input](https://i.imgur.com/1mVjqQv.png "Blazor Bootstrap - Date Input") +### Blazor Bootstrap - Dropdown +![Blazor Bootstrap - Dropdown](https://i.imgur.com/beAr31J.png "Blazor Bootstrap - Dropdown") + ### Blazor Bootstrap - Grid ![Blazor Bootstrap - Grid](https://i.imgur.com/36RsWZ3.png "Blazor Bootstrap - Grid") +### Blazor Bootstrap - Icon +![Blazor Bootstrap - Icon](https://i.imgur.com/ko7c6k3.jpg "Blazor Bootstrap - Icon") + +### Blazor Bootstrap - Image +![Blazor Bootstrap - Image](https://i.imgur.com/eiSTmvO.png "Blazor Bootstrap - Image") + ### Blazor Bootstrap - Modal ![Blazor Bootstrap - Modal](https://i.imgur.com/n0m4Fhq.jpg "Blazor Bootstrap - Modal") @@ -163,6 +182,9 @@ Blazor Bootstrap's documentation, which is included in this repository's root di ### Blazor Bootstrap - PDF Viewer ![Blazor Bootstrap - PDF Viewer](https://i.imgur.com/7Vz9Efi.png "Blazor Bootstrap - PDF Viewer") +### Blazor Bootstrap - Placeholder +![Blazor Bootstrap - Placeholder](https://i.imgur.com/Mw13qfX.png "Blazor Bootstrap - Placeholder") + ### Blazor Bootstrap - Preload ![Blazor Bootstrap - Preload](https://i.imgur.com/3pvzbXY.png "Blazor Bootstrap - Preload") @@ -199,6 +221,9 @@ Blazor Bootstrap's documentation, which is included in this repository's root di ### Blazor Bootstrap - Toasts ![Blazor Bootstrap - Toasts](https://i.imgur.com/OCQUchu.png "Blazor Bootstrap - Toasts") +### Blazor Bootstrap - Tooltips +![Blazor Bootstrap - Tooltips](https://i.imgur.com/2xuTx6b.png "Blazor Bootstrap - Tooltips") + ## Creators **Vikram Reddy** diff --git a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs index 7d0575ad9..d44b96f39 100644 --- a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs +++ b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs @@ -128,14 +128,14 @@ private object GetChartDataObject(ChartData chartData) foreach (var dataset in chartData.Datasets) if (dataset is BarChartDataset) datasets.Add((BarChartDataset)dataset); - else if (dataset is BubbleChartDataset) - datasets.Add((BubbleChartDataset)dataset); else if (dataset is DoughnutChartDataset) datasets.Add((DoughnutChartDataset)dataset); else if (dataset is LineChartDataset) datasets.Add((LineChartDataset)dataset); else if (dataset is PieChartDataset) datasets.Add((PieChartDataset)dataset); + else if (dataset is PolarAreaChartDataset) + datasets.Add((PolarAreaChartDataset)dataset); var data = new { chartData?.Labels, Datasets = datasets }; diff --git a/blazorbootstrap/Components/Charts/PolarAreaChart.razor b/blazorbootstrap/Components/Charts/PolarAreaChart.razor new file mode 100644 index 000000000..a24e57c6f --- /dev/null +++ b/blazorbootstrap/Components/Charts/PolarAreaChart.razor @@ -0,0 +1,6 @@ +@namespace BlazorBootstrap +@inherits BlazorBootstrapChart + +
    + +
    diff --git a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs new file mode 100644 index 000000000..7762b0bb5 --- /dev/null +++ b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs @@ -0,0 +1,129 @@ +namespace BlazorBootstrap; + +public partial class PolarAreaChart : BlazorBootstrapChart +{ + #region Fields and Constants + + private const string _jsObjectName = "window.blazorChart.polarArea"; + + #endregion + + #region Constructors + + public PolarAreaChart() + { + chartType = ChartType.PolarArea; + } + + #endregion + + #region Methods + + public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) + { + if (chartData is null) + throw new ArgumentNullException(nameof(chartData)); + + if (chartData.Datasets is null) + throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); + + if (data is null) + throw new ArgumentNullException(nameof(data)); + + foreach (var dataset in chartData.Datasets) + if (dataset is PolarAreaChartDataset barChartDataset && barChartDataset.Label == dataLabel) + if (data is PolarAreaChartDatasetData barChartDatasetData) + barChartDataset.Data?.Add(barChartDatasetData.Data); + + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.addDatasetData", Id, dataLabel, data); + + return chartData; + } + + public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) + { + if (chartData is null) + throw new ArgumentNullException(nameof(chartData)); + + if (chartData.Datasets is null) + throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); + + if (chartData.Labels is null) + throw new ArgumentException("chartData.Labels must not be null", nameof(chartData)); + + if (dataLabel is null) + throw new ArgumentNullException(nameof(dataLabel)); + + if (string.IsNullOrWhiteSpace(dataLabel)) + throw new Exception($"{nameof(dataLabel)} cannot be empty."); + + if (data is null) + throw new ArgumentNullException(nameof(data)); + + if (!data.Any()) + throw new Exception($"{nameof(data)} cannot be empty."); + + if (chartData.Datasets.Count != data.Count) + throw new InvalidDataException("The chart dataset count and the new data points count do not match."); + + if (chartData.Labels.Contains(dataLabel)) + throw new Exception($"{dataLabel} already exists."); + + chartData.Labels.Add(dataLabel); + + foreach (var dataset in chartData.Datasets) + if (dataset is PolarAreaChartDataset barChartDataset) + { + var chartDatasetData = data.FirstOrDefault(x => x is PolarAreaChartDatasetData barChartDatasetData && barChartDatasetData.DatasetLabel == barChartDataset.Label); + + if (chartDatasetData is PolarAreaChartDatasetData barChartDatasetData) + barChartDataset.Data?.Add(barChartDatasetData.Data); + } + + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.addDatasetsData", Id, dataLabel, data?.Select(x => (PolarAreaChartDatasetData)x)); + + return chartData; + } + + public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) + { + if (chartData is null) + throw new ArgumentNullException(nameof(chartData)); + + if (chartData.Datasets is null) + throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); + + if (chartDataset is null) + throw new ArgumentNullException(nameof(chartDataset)); + + if (chartDataset is PolarAreaChartDataset) + { + chartData.Datasets.Add(chartDataset); + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.addDataset", Id, (PolarAreaChartDataset)chartDataset); + } + + return chartData; + } + + public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) + { + if (chartData is not null && chartData.Datasets is not null) + { + var datasets = chartData.Datasets.OfType(); + var data = new { chartData.Labels, Datasets = datasets }; + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, plugins); + } + } + + public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) + { + if (chartData is not null && chartData.Datasets is not null) + { + var datasets = chartData.Datasets.OfType(); + var data = new { chartData.Labels, Datasets = datasets }; + await JSRuntime.InvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions); + } + } + + #endregion +} diff --git a/blazorbootstrap/Enums/Anchor.cs b/blazorbootstrap/Enums/Anchor.cs new file mode 100644 index 000000000..9d7b2575d --- /dev/null +++ b/blazorbootstrap/Enums/Anchor.cs @@ -0,0 +1,9 @@ +namespace BlazorBootstrap; + +public enum Anchor +{ + None, + Start, + Center, // default + End +} diff --git a/blazorbootstrap/Extensions/EnumExtensions.cs b/blazorbootstrap/Extensions/EnumExtensions.cs index cc07568a6..e915a7b67 100644 --- a/blazorbootstrap/Extensions/EnumExtensions.cs +++ b/blazorbootstrap/Extensions/EnumExtensions.cs @@ -117,6 +117,24 @@ public static string ToButtonColorClass(this ButtonColor buttonColor) => _ => "" }; + public static string? ToChartDatasetDataLabelAlignmentString(this Alignment alignment) => + alignment switch + { + Alignment.Start => "start", + Alignment.Center or Alignment.None => "center", // default + Alignment.End => "end", + _ => null + }; + + public static string? ToChartDatasetDataLabelAnchorString(this Anchor anchor) => + anchor switch + { + Anchor.Start => "start", + Anchor.Center or Anchor.None => "center", // default + Anchor.End => "end", + _ => null + }; + public static string ToDropdownButtonColorClass(this DropdownColor dropdownColor) => dropdownColor switch { diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDataset.cs new file mode 100644 index 000000000..cd17a17f4 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDataset.cs @@ -0,0 +1,260 @@ +namespace BlazorBootstrap; + +/// +/// The bar chart allows a number of properties to be specified for each dataset. +/// These are used to set display properties for a specific dataset. +/// +/// +/// +public class BarChartDataset : ChartDataset +{ + #region Properties, Indexers + + /// + /// The bar background color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BackgroundColor { get; set; } + + /// + /// Percent (0-1) of the available width each bar should be within the category width. + /// 1.0 will take the whole category width and put the bars right next to each other. + /// + /// + /// Default value is 0.9. + /// + public double BarPercentage { get; set; } = 0.9; + + /// + /// It is applied to the width of each bar, in pixels. + /// When this is enforced, barPercentage and categoryPercentage are ignored. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? BarThickness { get; set; } + + /// + /// The bar border color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderColor { get; set; } + + /// + /// Border radius + /// + /// + /// Default value is 0. + /// + public List? BorderRadius { get; set; } + + /// + /// Gets or sets the border width (in pixels). + /// + /// + /// Default value is 0. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderWidth { get; set; } + + //BorderSkipped + //https://www.chartjs.org/docs/latest/api/interfaces/BarControllerDatasetOptions.html#borderskipped + + /// + /// Percent (0-1) of the available width each category should be within the sample width. + /// + /// + /// Default value is 0.8. + /// + public double CategoryPercentage { get; set; } = 0.8; + + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public BarChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link + + /// + /// Should the bars be grouped on index axis. + /// When true, all the datasets at same index value will be placed next to each other centering on that index value. + /// When false, each bar is placed on its actual index-axis value. + /// + /// + /// Default value is . + /// + public bool Grouped { get; set; } = true; + + /// + /// The bar background color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBackgroundColor { get; set; } + + /// + /// The bar border color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderColor { get; set; } + + /// + /// The bar border radius when hovered (in pixels). + /// + /// + /// Default value is 0. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderRadius { get; set; } + + /// + /// The bar border width when hovered (in pixels). + /// + /// + /// Default value is 1. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderWidth { get; set; } + + /// + /// The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. + /// + /// + /// Default value is 'x'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string IndexAxis { get; set; } = "x"; + + //InflateAmount + //https://www.chartjs.org/docs/latest/charts/bar.html#inflateamount + + /// + /// Set this to ensure that bars are not sized thicker than this. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? MaxBarThickness { get; set; } + + /// + /// Set this to ensure that bars have a minimum length in pixels. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? MinBarLength { get; set; } + + //PointStyle + //https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles + + /// + /// If , null or undefined values will not be used for spacing calculations when determining bar size. + /// + /// + /// Default value is . + /// + public bool SkipNull { get; set; } + + //Stack + //https://www.chartjs.org/docs/latest/charts/bar.html#general + + /// + /// The ID of the x axis to plot this dataset on. + /// + /// + /// Default value is first x axis. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? XAxisID { get; set; } + + /// + /// The ID of the y axis to plot this dataset on. + /// + /// + /// Default value is first y axis. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? YAxisID { get; set; } + + #endregion +} + +public class BarChartDatasetDataLabels +{ + #region Fields and Constants + + private Alignment alignment; + + private Anchor anchor; + + #endregion + + #region Properties, Indexers + + /// + /// Gets or sets the data labels alignment. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Alignment Alignment + { + get => alignment; + set + { + alignment = value; + DataLabelsAlignment = value.ToChartDatasetDataLabelAlignmentString(); + } + } + + /// + /// Gets or sets the data labels anchor. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Anchor Anchor + { + get => anchor; + set + { + anchor = value; + DataLabelsAnchor = value.ToChartDatasetDataLabelAnchorString(); + } + } + + /// + /// Gets or sets the data labels alignment. + /// Possible values: start, center, and end. + /// + /// + /// Default value is . + /// + [JsonPropertyName("align")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? DataLabelsAlignment { get; private set; } + + /// + /// Gets or sets the data labels anchor. + /// Possible values: start, center, and end. + /// + /// + /// Default value is . + /// + [JsonPropertyName("anchor")] + public string? DataLabelsAnchor { get; private set; } + + #endregion +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BarChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDatasetData.cs similarity index 100% rename from blazorbootstrap/Models/Charts/ChartDataset/BarChartDatasetData.cs rename to blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDatasetData.cs diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BarChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/BarChartDataset.cs deleted file mode 100644 index f483d9417..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/BarChartDataset.cs +++ /dev/null @@ -1,67 +0,0 @@ -namespace BlazorBootstrap; - -public class BarChartDataset : ChartDataset -{ - #region Properties, Indexers - - /// - /// Percent (0-1) of the available width each bar should be within the category width. - /// 1.0 will take the whole category width and put the bars right next to each other. - /// - public double BarPercentage { get; set; } = 0.8; - - /// - /// Border radius - /// - public int BorderRadius { get; set; } - - //BarThickness - //https://www.chartjs.org/docs/latest/api/interfaces/BarControllerDatasetOptions.html#barthickness - - //BorderSkipped - //https://www.chartjs.org/docs/latest/api/interfaces/BarControllerDatasetOptions.html#borderskipped - - /// - /// Percent (0-1) of the available width each category should be within the sample width. - /// - public double CategoryPercentage { get; set; } = 0.8; - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public BarChartDatasetDataLabels Datalabels { get; set; } = new(); - - /// - /// The label for the dataset which appears in the legend and tooltips. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Label { get; set; } - - //MaxBarThickness - //https://www.chartjs.org/docs/latest/api/interfaces/BarControllerDatasetOptions.html#maxbarthickness - - //MinBarLength - //https://www.chartjs.org/docs/latest/api/interfaces/BarControllerDatasetOptions.html#minbarlength - - /// - /// The ID of the x axis to plot this dataset on. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? XAxisID { get; set; } - - /// - /// The ID of the y axis to plot this dataset on. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? YAxisID { get; set; } - - #endregion -} - -public class BarChartDatasetDataLabels -{ - #region Properties, Indexers - - public string? Align { get; set; } = "center"; - public string? Anchor { get; set; } = "center"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BubbleChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/BubbleChartDataset.cs deleted file mode 100644 index e7e69ef94..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/BubbleChartDataset.cs +++ /dev/null @@ -1,49 +0,0 @@ -namespace BlazorBootstrap; - -public class BubbleChartDataset : ChartDataset -{ - #region Properties, Indexers - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? BackgroundColor { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? BorderColor { get; set; } - - public new double BorderWidth { get; set; } - - public new List? Data { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? HoverBackgroundColor { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? HoverBorderColor { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? HoverBorderWidth { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Label { get; set; } - - public int Radius { get; set; } = 3; - - #endregion -} - -public class BubbleData -{ - #region Constructors - - public BubbleData(double x, double y, double r) - { - X = x; - Y = y; - R = r; - } - - #endregion - - #region Properties, Indexers - - public double R { get; set; } - - public double X { get; set; } - public double Y { get; set; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/ChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/ChartDataset.cs index f1acee96e..60954a5f6 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/ChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/ChartDataset.cs @@ -2,6 +2,9 @@ public interface IChartDataset { } +/// +/// +/// public class ChartDataset : IChartDataset { #region Constructors @@ -15,68 +18,65 @@ public ChartDataset() #region Properties, Indexers - /// - /// Get or sets the BackgroundColor. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BackgroundColor { get; set; } - - /// - /// Get or sets the BorderColor. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderColor { get; set; } - - /// - /// Get or sets the BorderWidth. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderWidth { get; set; } - /// /// How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside /// chartArea. 0 = clip at chartArea. /// Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} /// + /// + /// Default value is . + /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Clip { get; set; } /// /// Get or sets the Data. /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public List? Data { get; set; } /// - /// Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. + /// Configures the visibility state of the dataset. Set it to , to hide the dataset from the chart. /// + /// + /// Default value is . + /// public bool Hidden { get; set; } /// - /// Get or sets the HoverBackgroundColor. + /// The label for the dataset which appears in the legend and tooltips. /// + /// + /// Default value is . + /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBackgroundColor { get; set; } + public string? Label { get; set; } /// - /// Get or sets the HoverBorderColor. + /// Get unique object id. /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderColor { get; set; } + public Guid Oid { get; private set; } /// - /// Get or sets the HoverBorderWidth. + /// The drawing order of dataset. Also affects order for stacking, tooltip and legend. /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderWidth { get; set; } + /// + /// Default value is 0. + /// + public int Order { get; set; } - /// - /// Get unique object id. - /// - public Guid Oid { get; private set; } + //Stack + //https://www.chartjs.org/docs/latest/general/data-structures.html#dataset-configuration /// /// Gets or sets the chart type. /// + /// + /// Default value is . + /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Type { get; protected set; } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDataset.cs new file mode 100644 index 000000000..186d7d65f --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDataset.cs @@ -0,0 +1,273 @@ +namespace BlazorBootstrap; + +/// +/// The doughnut/pie chart allows a number of properties to be specified for each dataset. +/// These are used to set display properties for a specific dataset. +/// . +/// +public class DoughnutChartDataset : ChartDataset +{ + #region Properties, Indexers + + /// + /// Arc background color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BackgroundColor { get; set; } + + /// + /// Supported values are 'center' and 'inner'. + /// When 'center' is set, the borders of arcs next to each other will overlap. + /// When 'inner' is set, it is guaranteed that all borders will not overlap. + /// + /// + /// Default value is 'center'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderAlign { get; set; } // TODO: change this to enum + + /// + /// Arc border color. + /// + /// + /// Default value is '#fff'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderColor { get; set; } + + /// + /// Arc border length and spacing of dashes. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderDash { get; set; } + + /// + /// Arc border offset for line dashes. + /// + /// + /// Default value is 0.0. + /// + public double BorderDashOffset { get; set; } + + /// + /// Arc border join style. + /// Supported values are 'round', 'bevel', 'miter'. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderJoinStyle { get; set; } // TODO: change this to enum + + /// + /// It is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). + /// + /// + /// Default value is 0. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderRadius { get; set; } + + /// + /// Arc border width (in pixels). + /// + /// + /// Default value is 2. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderWidth { get; set; } + + /// + /// Per-dataset override for the sweep that the arcs cover. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? Circumference { get; set; } + + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public DoughnutChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link + + /// + /// Arc background color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBackgroundColor { get; set; } + + /// + /// Arc border color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderColor { get; set; } + + /// + /// Arc border length and spacing of dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderDash { get; set; } + + /// + /// Arc border offset for line dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? HoverBorderDashOffset { get; set; } + + /// + /// Arc border join style when hovered. + /// Supported values are 'round', 'bevel', 'miter'. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderJoinStyle { get; set; } // TODO: change this to enum + + /// + /// Arc border width when hovered (in pixels). + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderWidth { get; set; } + + /// + /// Arc offset when hovered (in pixels). + /// + /// + /// Default value is 0. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverOffset { get; set; } + + /// + /// Arc offset (in pixels). + /// + /// + /// Default value is 0. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? Offset { get; set; } + + /// + /// Per-dataset override for the starting angle to draw arcs from. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? Rotation { get; set; } + + /// + /// Fixed arc offset (in pixels). Similar to but applies to all arcs. + /// + /// + /// Default value is 0. + /// + public double Spacing { get; set; } + + /// + /// The relative thickness of the dataset. + /// Providing a value for weight will cause the pie or doughnut dataset to be drawn + /// with a thickness relative to the sum of all the dataset weight values. + /// + /// + /// Default value is 1. + /// + public double Weight { get; set; } = 1; + + #endregion +} + +public class DoughnutChartDatasetDataLabels +{ + #region Fields and Constants + + private Alignment alignment; + + private Anchor anchor; + + #endregion + + #region Properties, Indexers + + /// + /// Gets or sets the data labels alignment. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Alignment Alignment + { + get => alignment; + set + { + alignment = value; + DataLabelsAlignment = value.ToChartDatasetDataLabelAlignmentString(); + } + } + + /// + /// Gets or sets the data labels anchor. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Anchor Anchor + { + get => anchor; + set + { + anchor = value; + DataLabelsAnchor = value.ToChartDatasetDataLabelAnchorString(); + } + } + + //public string? BackgroundColor { get; set; } + + public double? BorderWidth { get; set; } = 2; + + /// + /// Gets or sets the data labels alignment. + /// Possible values: start, center, and end. + /// + /// + /// Default value is . + /// + [JsonPropertyName("align")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? DataLabelsAlignment { get; private set; } + + /// + /// Gets or sets the data labels anchor. + /// Possible values: start, center, and end. + /// + /// + /// Default value is . + /// + [JsonPropertyName("anchor")] + public string? DataLabelsAnchor { get; private set; } + + #endregion +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDatasetData.cs similarity index 100% rename from blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDatasetData.cs rename to blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDatasetData.cs diff --git a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDataset.cs deleted file mode 100644 index 39b6665da..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChartDataset.cs +++ /dev/null @@ -1,34 +0,0 @@ -namespace BlazorBootstrap; - -public class DoughnutChartDataset : ChartDataset -{ - #region Properties, Indexers - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public DoughnutChartDatasetDataLabels Datalabels { get; set; } = new(); - - /// - /// The label for the dataset which appears in the legend and tooltips. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Label { get; set; } - - #endregion -} - -public class DoughnutChartDatasetDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label anchor. - /// Possible values: start, center, and end. - /// - public string? Anchor { get; set; } = "start"; - - //public string? BackgroundColor { get; set; } - - public double? BorderWidth { get; set; } = 2; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs new file mode 100644 index 000000000..aaf723843 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -0,0 +1,389 @@ +namespace BlazorBootstrap; + +/// +/// The line chart allows a number of properties to be specified for each dataset. +/// These are used to set display properties for a specific dataset. +/// . +/// +public class LineChartDataset : ChartDataset +{ + #region Properties, Indexers + + /// + /// Get or sets the line fill color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + public string BackgroundColor { get; set; } = "rgba(0, 0, 0, 0.1)"; + + /// + /// Cap style of the line. + /// Supported values are 'butt', 'round', and 'square'. + /// + /// + /// Default value is 'butt'. + /// + public string BorderCapStyle { get; set; } = "butt"; + + /// + /// Get or sets the line color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + public string BorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; + + /// + /// Gets or sets the length and spacing of dashes. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderDash { get; set; } + + /// + /// Offset for line dashes. + /// + /// + /// Default value is 0.0. + /// + public double BorderDashOffset { get; set; } + + /// + /// Line joint style. + /// There are three possible values for this property: 'round', 'bevel', and 'miter'. + /// + /// + /// Default value is 'miter'. + /// + public string BorderJoinStyle { get; set; } = "miter"; + + /// + /// Gets or sets the line width (in pixels). + /// + /// + /// Default value is 3. + /// + public double BorderWidth { get; set; } = 3; + + /// + /// . + /// Supported values are 'default', and 'monotone'. + /// + /// + /// Default value is 'default'. + /// + public string CubicInterpolationMode { get; set; } = "default"; + + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public LineChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link + + /// + /// Draw the active points of a dataset over the other points of the dataset. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? DrawActiveElementsOnTop { get; set; } + + /// + /// How to fill the area under the line. + /// + /// + /// Default value is . + /// + public bool Fill { get; set; } + + /// + /// The line fill color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? HoverBackgroundColor { get; set; } + + /// + /// Cap style of the line when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? HoverBorderCapStyle { get; set; } + + /// + /// The line color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? HoverBorderColor { get; set; } + + /// + /// Gets or sets the length and spacing of dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderDash { get; set; } + + /// + /// Offset for line dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? HoverBorderDashOffset { get; set; } + + /// + /// Line joint style. + /// There are three possible values for this property: 'round', 'bevel', and 'miter'. + /// + /// + /// Default value is 'miter'. + /// + public string HoverBorderJoinStyle { get; set; } = "miter"; + + /// + /// The bar border width when hovered (in pixels) when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? HoverBorderWidth { get; set; } + + /// + /// The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. + /// + /// + /// Default value is 'x'. + /// + public string IndexAxis { get; set; } = "x"; + + /// + /// The fill color for points. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + public string PointBackgroundColor { get; set; } = "rgba(0, 0, 0, 0.1)"; + + /// + /// The border color for points. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + public string PointBorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; + + /// + /// The width of the point border in pixels. + /// + /// + /// Default value is 1. + /// + public double PointBorderWidth { get; set; } = 1; + + /// + /// The pixel size of the non-displayed point that reacts to mouse events. + /// + /// + /// Default value is 1. + /// + public double PointHitRadius { get; set; } = 1; + + /// + /// Point background color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? PointHoverBackgroundColor { get; set; } + + /// + /// Point border color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? PointHoverBorderColor { get; set; } + + /// + /// Border width of point when hovered. + /// + /// + /// Default value is 1. + /// + public double PointHoverBorderWidth { get; set; } = 1; + + /// + /// The radius of the point when hovered. + /// + /// + /// Default value is 4. + /// + public double PointHoverRadius { get; set; } = 4; + + /// + /// The radius of the point shape. If set to 0, the point is not rendered. + /// + /// + /// Default value is 3. + /// + public double PointRadius { get; set; } = 3; + + /// + /// The rotation of the point in degrees. + /// + /// + /// Default value is 0. + /// + public double PointRotation { get; set; } = 0; + + /// + /// Style of the point. + /// Supported values are 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style. + /// the point. + /// + /// + /// Default value is 'circle'. + /// + public string PointStyle { get; set; } = "circle"; + + //segment + //https://www.chartjs.org/docs/latest/charts/line.html#segment + + /// + /// If , the lines between points are not drawn. + /// + /// + /// Default value is . + /// + public bool ShowLine { get; set; } = true; + + /// + /// If , lines will be drawn between points with no or null data. + /// If , points with null data will create a break in the line. + /// Can also be a number specifying the maximum gap length to span. + /// The unit of the value depends on the scale used. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? SpanGaps { get; set; } + + //stack + //https://www.chartjs.org/docs/latest/charts/line.html#general + + /// + /// true to show the line as a stepped line (tension will be ignored). + /// + /// + /// Default value is . + /// + public bool Stepped { get; set; } + + /// + /// Bezier curve tension of the line. Set to 0 to draw straight lines. + /// This option is ignored if monotone cubic interpolation is used. + /// + /// + /// Default value is 0. + /// + public double Tension { get; set; } + + /// + /// The ID of the x axis to plot this dataset on. + /// + /// + /// Default value is 'first x axis'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? XAxisID { get; set; } + + /// + /// The ID of the y axis to plot this dataset on. + /// + /// + /// Default value is 'first y axis'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? YAxisID { get; set; } + + #endregion +} + +public class LineChartDatasetDataLabels +{ + #region Fields and Constants + + private Alignment alignment; + + private Anchor anchor; + + #endregion + + #region Properties, Indexers + + /// + /// Gets or sets the data labels alignment. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Alignment Alignment + { + get => alignment; + set + { + alignment = value; + DataLabelsAlignment = value.ToChartDatasetDataLabelAlignmentString(); + } + } + + /// + /// Gets or sets the data labels anchor. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Anchor Anchor + { + get => anchor; + set + { + anchor = value; + DataLabelsAnchor = value.ToChartDatasetDataLabelAnchorString(); + } + } + + /// + /// Gets or sets the data labels alignment. + /// Possible values: start, center, and end. + /// + [JsonPropertyName("align")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? DataLabelsAlignment { get; private set; } + + /// + /// Gets or sets the data labels anchor. + /// Possible values: start, center, and end. + /// + [JsonPropertyName("anchor")] + public string? DataLabelsAnchor { get; private set; } + + #endregion +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDatasetData.cs similarity index 100% rename from blazorbootstrap/Models/Charts/ChartDataset/LineChartDatasetData.cs rename to blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDatasetData.cs diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChartDataset.cs deleted file mode 100644 index 0c912b7ee..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChartDataset.cs +++ /dev/null @@ -1,170 +0,0 @@ -namespace BlazorBootstrap; - -public class LineChartDataset : ChartDataset -{ - #region Properties, Indexers - - /// - /// Line dash. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderDash { get; set; } - - /// - /// Line dash offset. - /// - public double BorderDashOffset { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public LineChartDatasetDataLabels Datalabels { get; set; } = new(); - - /// - /// Both line and radar charts support a fill option on the dataset object - /// which can be used to create area between two datasets or a dataset and - /// a boundary, i.e. the scale origin, start or end. - /// - public bool Fill { get; set; } - - /// - /// Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. - /// - public new bool Hidden { get; set; } - - /// - /// Hover line dash. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderDash { get; set; } - - /// - /// The label for the dataset which appears in the legend and tooltips. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Label { get; set; } - - /// - /// The fill color for points. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List PointBackgroundColor { get; set; } = new() { "rgba(0, 0, 0, 0.1)" }; - - /// - /// The border color for points. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List PointBorderColor { get; set; } = new() { "rgba(0, 0, 0, 0.1)" }; - - /// - /// The width of the point border in pixels. - /// - public List PointBorderWidth { get; set; } = new() { 1 }; - - /// - /// The pixel size of the non-displayed point that reacts to mouse events. - /// - public List PointHitRadius { get; set; } = new() { 1 }; - - /// - /// Point background color when hovered. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBackgroundColor { get; set; } - - /// - /// Point border color when hovered. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderColor { get; set; } - - /// - /// Border width of point when hovered. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List PointHoverBorderWidth { get; set; } = new() { 1 }; - - /// - /// The radius of the point when hovered. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List PointHoverRadius { get; set; } = new() { 1 }; // Default: 4 - - /// - /// The radius of the point shape. If set to 0, the point is not rendered. - /// Default: 3 - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List PointRadius { get; set; } = new() { 1 }; // Default: 3 - - /// - /// The rotation of the point in degrees. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List PointRotation { get; set; } = new() { 0 }; - - /// - /// Style of the point. - /// Use 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style - /// the point. - /// - public List PointStyle { get; set; } = new() { "circle" }; - - // Segment - // https://www.chartjs.org/docs/latest/api/interfaces/LineControllerDatasetOptions.html#segment - - /// - /// If false, the lines between points are not drawn. - /// - public bool ShowLine { get; set; } = true; - - /// - /// If , lines will be drawn between points with no or null data. - /// If false, points with null data will create a break in the line. - /// Can also be a number specifying the maximum gap length to span. - /// The unit of the value depends on the scale used. - /// - public bool SpanGaps { get; set; } - - /// - /// to show the line as a stepped line (tension will be ignored). - /// - public bool Stepped { get; set; } - - /// - /// Bezier curve tension of the line. Set to 0 to draw straightlines. - /// This option is ignored if monotone cubic interpolation is used. - /// - public double Tension { get; set; } = 0.2; - - /// - /// The ID of the x axis to plot this dataset on. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? XAxisID { get; set; } - - /// - /// The ID of the y axis to plot this dataset on. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? YAxisID { get; set; } - - #endregion -} - -public class LineChartDatasetDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label alignment. - /// Possible values: start, center, and end. - /// - public string? Align { get; set; } = "start"; - - /// - /// Gets or sets the data label anchor. - /// Possible values: start, center, and end. - /// - public string? Anchor { get; set; } = "start"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDataset.cs new file mode 100644 index 000000000..7a1c015e3 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDataset.cs @@ -0,0 +1,270 @@ +namespace BlazorBootstrap; + +/// +/// The doughnut/pie chart allows a number of properties to be specified for each dataset. +/// These are used to set display properties for a specific dataset. +/// . +/// +public class PieChartDataset : ChartDataset +{ + #region Properties, Indexers + + /// + /// Arc background color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BackgroundColor { get; set; } + + /// + /// Supported values are 'center' and 'inner'. + /// When 'center' is set, the borders of arcs next to each other will overlap. + /// When 'inner' is set, it is guaranteed that all borders will not overlap. + /// + /// + /// Default value is 'center'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderAlign { get; set; } // TODO: change this to enum + + /// + /// Arc border color. + /// + /// + /// Default value is '#fff'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderColor { get; set; } + + /// + /// Arc border length and spacing of dashes. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderDash { get; set; } + + /// + /// Arc border offset for line dashes. + /// + /// + /// Default value is 0.0. + /// + public double BorderDashOffset { get; set; } + + /// + /// Arc border join style. + /// Supported values are 'round', 'bevel', 'miter'. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderJoinStyle { get; set; } // TODO: change this to enum + + /// + /// It is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). + /// + /// + /// Default value is 0. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderRadius { get; set; } + + /// + /// Arc border width (in pixels). + /// + /// + /// Default value is 2. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderWidth { get; set; } + + /// + /// Per-dataset override for the sweep that the arcs cover. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? Circumference { get; set; } + + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public PieChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link + + /// + /// Arc background color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBackgroundColor { get; set; } + + /// + /// Arc border color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderColor { get; set; } + + /// + /// Arc border length and spacing of dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderDash { get; set; } + + /// + /// Arc border offset for line dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? HoverBorderDashOffset { get; set; } + + /// + /// Arc border join style when hovered. + /// Supported values are 'round', 'bevel', 'miter'. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderJoinStyle { get; set; } // TODO: change this to enum + + /// + /// Arc border width when hovered (in pixels). + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderWidth { get; set; } + + /// + /// Arc offset when hovered (in pixels). + /// + /// + /// Default value is 0. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverOffset { get; set; } + + /// + /// Arc offset (in pixels). + /// + /// + /// Default value is 0. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? Offset { get; set; } + + /// + /// Per-dataset override for the starting angle to draw arcs from. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? Rotation { get; set; } + + /// + /// Fixed arc offset (in pixels). Similar to but applies to all arcs. + /// + /// + /// Default value is 0. + /// + public double Spacing { get; set; } + + /// + /// The relative thickness of the dataset. + /// Providing a value for weight will cause the pie or doughnut dataset to be drawn + /// with a thickness relative to the sum of all the dataset weight values. + /// + /// + /// Default value is 1. + /// + public double Weight { get; set; } = 1; + + #endregion +} + +public class PieChartDatasetDataLabels +{ + #region Fields and Constants + + private Alignment alignment; + + private Anchor anchor; + + #endregion + + #region Properties, Indexers + + /// + /// Gets or sets the data labels alignment. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Alignment Alignment + { + get => alignment; + set + { + alignment = value; + DataLabelsAlignment = value.ToChartDatasetDataLabelAlignmentString(); + } + } + + /// + /// Gets or sets the data labels anchor. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Anchor Anchor + { + get => anchor; + set + { + anchor = value; + DataLabelsAnchor = value.ToChartDatasetDataLabelAnchorString(); + } + } + + //public string? BackgroundColor { get; set; } + + public double? BorderWidth { get; set; } = 2; + + /// + /// Gets or sets the data labels alignment. + /// Possible values: start, center, and end. + /// + /// + /// Default value is . + /// + [JsonPropertyName("align")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? DataLabelsAlignment { get; private set; } + + /// + /// Gets or sets the data labels anchor. + /// Possible values: start, center, and end. + /// + [JsonPropertyName("anchor")] + public string? DataLabelsAnchor { get; private set; } + + #endregion +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PieChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDatasetData.cs similarity index 100% rename from blazorbootstrap/Models/Charts/ChartDataset/PieChartDatasetData.cs rename to blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDatasetData.cs diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PieChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/PieChartDataset.cs deleted file mode 100644 index 89abc12e3..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/PieChartDataset.cs +++ /dev/null @@ -1,34 +0,0 @@ -namespace BlazorBootstrap; - -public class PieChartDataset : ChartDataset -{ - #region Properties, Indexers - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public PieChartDatasetDataLabels Datalabels { get; set; } = new(); - - /// - /// The label for the dataset which appears in the legend and tooltips. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Label { get; set; } - - #endregion -} - -public class PieChartDatasetDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label anchor. - /// Possible values: start, center, and end. - /// - public string? Anchor { get; set; } = "start"; - - //public string? BackgroundColor { get; set; } - - public double? BorderWidth { get; set; } = 2; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDataset.cs new file mode 100644 index 000000000..8fd27315e --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDataset.cs @@ -0,0 +1,210 @@ +namespace BlazorBootstrap; + +public class PolarAreaChartDataset : ChartDataset +{ + #region Properties, Indexers + + /// + /// Arc background color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BackgroundColor { get; set; } + + /// + /// Supported values are 'center' and 'inner'. + /// When 'center' is set, the borders of arcs next to each other will overlap. + /// When 'inner' is set, it is guaranteed that all borders will not overlap. + /// + /// + /// Default value is 'center'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderAlign { get; set; } // TODO: change this to enum + + /// + /// Arc border color. + /// + /// + /// Default value is '#fff'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderColor { get; set; } + + /// + /// Arc border length and spacing of dashes. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderDash { get; set; } + + /// + /// Arc border offset for line dashes. + /// + /// + /// Default value is 0.0. + /// + public double BorderDashOffset { get; set; } + + /// + /// Arc border join style. + /// Supported values are 'round', 'bevel', 'miter'. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderJoinStyle { get; set; } // TODO: change this to enum + + /// + /// Arc border width (in pixels). + /// + /// + /// Default value is 2. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderWidth { get; set; } + + /// + /// By default the Arc is curved. If , the Arc will be flat. + /// + /// + /// Default value is . + /// + public bool Circular { get; set; } = true; + + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public PieChartDatasetDataLabels Datalabels { get; set; } = new(); + + /// + /// Arc background color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBackgroundColor { get; set; } + + /// + /// Arc border color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderColor { get; set; } + + /// + /// Arc border length and spacing of dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderDash { get; set; } + + /// + /// Arc border offset for line dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? HoverBorderDashOffset { get; set; } + + /// + /// Arc border join style when hovered. + /// Supported values are 'round', 'bevel', 'miter'. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderJoinStyle { get; set; } // TODO: change this to enum + + /// + /// Arc border width when hovered (in pixels). + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderWidth { get; set; } + + #endregion +} + +public class PolarAreaChartDatasetDataLabels +{ + #region Fields and Constants + + private Alignment alignment; + + private Anchor anchor; + + #endregion + + #region Properties, Indexers + + /// + /// Gets or sets the data labels alignment. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Alignment Alignment + { + get => alignment; + set + { + alignment = value; + DataLabelsAlignment = value.ToChartDatasetDataLabelAlignmentString(); + } + } + + /// + /// Gets or sets the data labels anchor. + /// + /// + /// Default value is . + /// + [JsonIgnore] + public Anchor Anchor + { + get => anchor; + set + { + anchor = value; + DataLabelsAnchor = value.ToChartDatasetDataLabelAnchorString(); + } + } + + //public string? BackgroundColor { get; set; } + + public double? BorderWidth { get; set; } = 2; + + /// + /// Gets or sets the data labels alignment. + /// Possible values: start, center, and end. + /// + /// + /// Default value is . + /// + [JsonPropertyName("align")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? DataLabelsAlignment { get; private set; } + + /// + /// Gets or sets the data labels anchor. + /// Possible values: start, center, and end. + /// + [JsonPropertyName("anchor")] + public string? DataLabelsAnchor { get; private set; } + + #endregion +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDatasetData.cs new file mode 100644 index 000000000..16177adec --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDatasetData.cs @@ -0,0 +1,19 @@ +namespace BlazorBootstrap; + +public record PolarAreaChartDatasetData : ChartDatasetData +{ + #region Constructors + + public PolarAreaChartDatasetData(string? datasetLabel, double data, string? backgroundColor) : base(datasetLabel, data) + { + BackgroundColor = backgroundColor; + } + + #endregion + + #region Properties, Indexers + + public string? BackgroundColor { get; init; } + + #endregion +} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChartDataset.cs deleted file mode 100644 index 43dc85c4e..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChartDataset.cs +++ /dev/null @@ -1,3 +0,0 @@ -namespace BlazorBootstrap; - -public class PolarAreaChartDataset : ChartDataset { } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/RadarChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/RadarChartDataset.cs deleted file mode 100644 index 0a578291b..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/RadarChartDataset.cs +++ /dev/null @@ -1,22 +0,0 @@ -namespace BlazorBootstrap; - -public class RadarChartDataset : ChartDataset -{ - #region Properties, Indexers - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? BackgroundColor { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? BorderColor { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new double BorderWidth { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? HoverBackgroundColor { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? HoverBorderColor { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public new string? HoverBorderWidth { get; set; } - - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Label { get; set; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/PolarAreaChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/PolarAreaChartOptions.cs new file mode 100644 index 000000000..dab89c4d4 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartOptions/PolarAreaChartOptions.cs @@ -0,0 +1,10 @@ +namespace BlazorBootstrap; + +public class PolarAreaChartOptions : ChartOptions +{ + #region Properties, Indexers + + public PieChartPlugins Plugins { get; set; } = new(); + + #endregion +} diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/PolarAreaChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/PolarAreaChartPlugins.cs new file mode 100644 index 000000000..4e07b5528 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartPlugins/PolarAreaChartPlugins.cs @@ -0,0 +1,33 @@ +namespace BlazorBootstrap; + +public class PolarAreaChartPlugins : ChartPlugins +{ + #region Properties, Indexers + + public PieChartDataLabels Datalabels { get; set; } = new(); + + #endregion +} + +public class PolarAreaChartDataLabels +{ + #region Properties, Indexers + + public string? BorderColor { get; set; } = "white"; + public double BorderRadius { get; set; } = 25; + public double BorderWidth { get; set; } = 2; + public string? Color { get; set; } = "white"; + public PieChartDataLabelsFont Font { get; set; } = new(); + public double Padding { get; set; } = 6; + + #endregion +} + +public class PolarAreaChartDataLabelsFont +{ + #region Properties, Indexers + + public string? Weight { get; set; } = "bold"; + + #endregion +} diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index 72b087e24..7095f03bf 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -1334,3 +1334,123 @@ window.blazorChart.pie = { } }, } + +window.blazorChart.polarArea = { + 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); + + const chartDatasets = chartData.datasets; + + if (chartDatasets.length > 0) { + let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); + if (datasetIndex > -1) { + chartDatasets[datasetIndex].data.push(chartDatasetData.data); + chart.update(); + } + } + } + }, + addDatasetsData: (elementId, dataLabel, data) => { + let chart = window.blazorChart.get(elementId); + if (chart && data) { + const chartData = chart.data; + + if (!chartData.labels.includes(dataLabel)) { + chartData.labels.push(dataLabel); + + if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { + 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(); + } + } + } + }, + addDataset: (elementId, newDataset) => { + let chart = window.blazorChart.get(elementId); + if (chart) { + chart.data.datasets.push(newDataset); + chart.update(); + } + }, + create: (elementId, type, data, options, plugins) => { + let chartEl = document.getElementById(elementId); + let _plugins = []; + + if (plugins && plugins.length > 0) { + // register `ChartDataLabels` plugin + if (plugins.includes('ChartDataLabels')) { + _plugins.push(ChartDataLabels); + + // set datalabel background color + options.plugins.datalabels.backgroundColor = function (context) { + return context.dataset.backgroundColor; + }; + } + } + + // https://www.chartjs.org/docs/latest/configuration/#configuration-object-structure + const config = { + type: type, + data: data, + options: options, + plugins: _plugins + }; + + const chart = new Chart( + chartEl, + config + ); + }, + get: (elementId) => { + let chart; + Chart.helpers.each(Chart.instances, function (instance) { + if (instance.canvas.id === elementId) { + chart = instance; + } + }); + + return chart; + }, + initialize: (elementId, type, data, options, plugins) => { + let chart = window.blazorChart.polarArea.get(elementId); + if (chart) return; + else + window.blazorChart.polarArea.create(elementId, type, data, options, plugins); + }, + resize: (elementId, width, height) => { + let chart = window.blazorChart.polarArea.get(elementId); + if (chart) { + chart.canvas.parentNode.style.height = height; + chart.canvas.parentNode.style.width = width; + } + }, + update: (elementId, type, data, options) => { + let chart = window.blazorChart.polarArea.get(elementId); + if (chart) { + if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { + // set datalabel background color + options.plugins.datalabels.backgroundColor = function (context) { + return context.dataset.backgroundColor; + }; + } + + chart.data = data; + chart.options = options; + chart.update(); + } + else { + console.warn(`The chart is not initialized. Initialize it and then call update.`); + } + }, +} + diff --git a/nuget/README.md b/nuget/README.md index 44e6a5574..c16a57aff 100644 --- a/nuget/README.md +++ b/nuget/README.md @@ -53,6 +53,7 @@ Get started any way you want | Dropdown | [Docs](https://docs.blazorbootstrap.com/components/dropdown) | [Demos](https://demos.blazorbootstrap.com/dropdown) | | Grid | [Docs](https://docs.blazorbootstrap.com/components/grid) | [Demos](https://demos.blazorbootstrap.com/grid) | | Icons | [Docs](https://docs.blazorbootstrap.com/content/icons) | [Demos](https://demos.blazorbootstrap.com/icons) | +| Images | [Docs](https://docs.blazorbootstrap.com/content/images) | [Demos](https://demos.blazorbootstrap.com/images) | | Modals | [Docs](https://docs.blazorbootstrap.com/components/modal) | [Demos](https://demos.blazorbootstrap.com/modals) | | Number Input | [Docs](https://docs.blazorbootstrap.com/forms/number-input) | [Demos](https://demos.blazorbootstrap.com/form/number-input) | | Offcanvas | [Docs](https://docs.blazorbootstrap.com/components/offcanvas) | [Demos](https://demos.blazorbootstrap.com/offcanvas) |