egwcorelib/EgwCoreLib.Razor/Doughnut.razor

@using EgwCoreLib.Razor.Data;
@using Microsoft.JSInterop;

<canvas id="@Id"></canvas>


@code {
    [Inject]
    private IJSRuntime JSRuntime { get; set; } = null!;


    public enum ChartType
    {
        Pie,
        Bar,
        Doughnut
    }

    [Parameter]
    public string Id { get; set; } = "000";

    [Parameter]
    public ChartType Type { get; set; }

    [Parameter]
    public double[] Data { get; set; } = null!;
    [Parameter]
    public List<DoughnutStyling> BackgroundColor { get; set; } = null!;

    [Parameter]
    public string[] Labels { get; set; } = null!;

    private IJSObjectReference module { get; set; } = null!;
    
    [Parameter]
    public int BordWidth { get; set; } = 0;
    [Parameter]
    public bool AddSlash { get; set; } = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        string jsPath = "./_content/EgwCoreLib.Razor/Doughnut.razor.js";
        if (AddSlash)
        {
            jsPath = "/." + jsPath;
        }
        module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", jsPath);

        await Task.Delay(50);


        var config = new
        {
            Type = Type.ToString().ToLower(),
            Options = new
            {
                Responsive = true,
                MaintainAspectRatio = false
            },
            Data = new
            {
                Datasets = new[]
                {
                    new {
                        Data = Data,
                        BackgroundColor = BackgroundColor.Select(x=>x.color),
                        BorderColor = BackgroundColor.Select(x=>x.border),
                        BorderWidth = BordWidth,
                        offset= 1,
                        borderRadius = 0
                    }
                },
                Labels = Labels
            },
            Responsive = true,
            MaintainAspectRatio = false
        };

        await JSRuntime.InvokeVoidAsync("setup", Id, config);
    }
}