search

vikramlearning / blazorbootstrap

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
https://docs.blazorbootstrap.com/
Apache License 2.0
650 stars 30 forks source link

Pie Chart example from documentation does not compile #526

Open QazCetelic opened 7 months ago

QazCetelic commented 7 months ago

Describe the bug There are several errors:

To Reproduce Steps to reproduce the behavior:

  1. Create a Blazor page with the code from https://demos.blazorbootstrap.com/charts/pie-chart.
  2. See error

Expected behavior The example compiles. I think it might be because of a version

Versions (please complete the following information):

Sample code The only difference to the example is the added @page "/piechart".

Piechart.razor ```razor @page "/piechart" @code { private PieChart pieChart = default!; private PieChartOptions pieChartOptions = default!; private ChartData chartData = default!; private string[]? backgroundColors; private int datasetsCount = 0; private int dataLabelsCount = 0; private Random random = new(); protected override void OnInitialized() { backgroundColors = ColorBuilder.CategoricalTwelveColors; chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; pieChartOptions = new(); pieChartOptions.Responsive = true; pieChartOptions.Plugins.Title.Text = "2022 - Sales"; pieChartOptions.Plugins.Title.Display = true; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await pieChart.InitializeAsync(chartData, pieChartOptions); // Cannot resolve symbol 'InitializeAsync' } 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); // Cannot resolve symbol 'UpdateAsync' } private async Task AddDatasetAsync() { if (chartData is null || chartData.Datasets is null) return; var chartDataset = GetRandomPieChartDataset(); chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions); // Method 'AddDatasetAsync' has 0 parameter(s) but is invoked with 3 argument(s) } 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); // Method 'AddDataAsync' has 0 parameter(s) but is invoked with 3 argument(s) dataLabelsCount += 1; } #region Data Preparation private List GetDefaultDataSets(int numberOfDatasets) { var datasets = new List(); for (var index = 0; index < numberOfDatasets; index++) { datasets.Add(GetRandomPieChartDataset()); } return datasets; } private PieChartDataset GetRandomPieChartDataset() { datasetsCount += 1; return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; } private List GetRandomData() { var data = new List(); for (var index = 0; index < dataLabelsCount; index++) { data.Add(random.Next(0, 100)); } return data; } private List GetRandomBackgroundColors() { var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { colors.Add(backgroundColors![index]); } return colors; } private List GetDefaultDataLabels(int numberOfLabels) { var labels = new List(); for (var index = 0; index < numberOfLabels; index++) { labels.Add(GetNextDataLabel()); dataLabelsCount += 1; } return labels; } private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; #endregion Data Preparation } ```
App.razor ```razor ```

I've added builder.Services.AddBlazorBootstrap(); to Program.cs and @using BlazorBootstrap; to _Imports.razor. The default references have also been removed as specified in https://docs.blazorbootstrap.com/getting-started/blazor-webapp-server-global-net-8.

Desktop (please complete the following information):

gvreddy04 commented 7 months ago

@QazCetelic Were you successful in running the demos (https://demos.blazorbootstrap.com/charts/pie-chart) without any hiccups?

QazCetelic commented 7 months ago

image The demo displays correctly on demos.blazorbootstrap.com. I'm using the same browser, profile, and extensions for testing locally and viewing the demo.

gvreddy04 commented 7 months ago

@QazCetelic Would you be able to share a GitHub repository that reproduces the issue, if possible? I'd be happy to take a look.

QazCetelic commented 7 months ago

I'm unable to share the entire solution because it contains code belonging to the company I'm interning at. I've therefore packaged the project (without related projects included in the solution) into an archive file so you can view everything related to the Blazor project.

LocalWebInterface.zip

gvreddy04 commented 7 months ago

@QazCetelic What language are you using on your machine?

QazCetelic commented 7 months ago

The code is written in C#

gvreddy04 commented 7 months ago

@QazCetelic I mean the OS language culture.

QazCetelic commented 7 months ago

It's a mix of english, danish, and german

Numbers: english/danish Time: english/german Collate: english/danish Currency: english/european Messages: english/danish Paper: english/danish Name: english/danish Address: english/danish Telephone: english/danish Measurement: english/danish Identification: english/danish