Pie Chart example from documentation does not compile

[QazCetelic]

Describe the bug There are several errors:

• PieChart.razor at line 3, column 1: error RZ9985: Multiple components use the tag 'PieChart'. Components: LocalWebInterface.Components.Pages.PieChart, BlazorBootstrap.PieChart, Microsoft.AspNetCore.Components.Ref
• PieChart.razor at line 3, column 28: error CS0029: Cannot implicitly convert type 'BlazorBootstrap.PieChart' to 'LocalWebInterface.Components.Pages.PieChart'
• PieChart.razor at line 35, column 28: error CS1061: 'PieChart' does not contain a definition for 'InitializeAsync' and no accessible extension method 'InitializeAsync' accepting a first argument of type 'PieChart' could be found (are you missing a using directive or an assembly reference?)
• PieChart.razor at line 67, column 24: error CS1061: 'PieChart' does not contain a definition for 'UpdateAsync' and no accessible extension method 'UpdateAsync' accepting a first argument of type 'PieChart' could be found (are you missing a using directive or an assembly reference?)
• PieChart.razor at line 75, column 36: error CS1501: No overload for method 'AddDatasetAsync' takes 3 arguments
• PieChart.razor at line 93, column 36: error CS1501: No overload for method 'AddDataAsync' takes 3 arguments

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):

• BlazorBootstrap: 1.10.5
• Blazor WebAssembly / Server: Server
• .NET Version: .NET 8

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

Piechart.razor

@page "/piechart"

<PieChart @ref="pieChart" Width="500" Class="mb-5" />

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="async () => await AddDataAsync()">Add Data</Button>

@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<IChartDataset>();

        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<double>();
                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<IChartDatasetData>();
        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<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
    {
        var datasets = new List<IChartDataset>();

        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<double> GetRandomData()
    {
        var data = new List<double>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            data.Add(random.Next(0, 100));
        }

        return data;
    }

    private List<string> GetRandomBackgroundColors()
    {
        var colors = new List<string>();
        for (var index = 0; index < dataLabelsCount; index++)
        {
            colors.Add(backgroundColors![index]);
        }

        return colors;
    }

    private List<string> GetDefaultDataLabels(int numberOfLabels)
    {
        var labels = new List<string>();
        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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="LocalWebInterface.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <!-- Add chart.js reference if chart components are used in your application. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
</body>

</html>

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):

• OS: Linux - openSUSE Tumbleweed
• Browser: Firefox
• Version: 121.0.1

[gvreddy04]

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

[QazCetelic]

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]

@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]

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]

@QazCetelic What language are you using on your machine?

[QazCetelic]

The code is written in C#

[gvreddy04]

@QazCetelic I mean the OS language culture.

[QazCetelic]

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