@using MP.Data
@inject IJSRuntime JSRuntime

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

@code {

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

    [Parameter]
    public string Title { get; set; } = "DEMO Pie Chart";

    [Parameter]
    public string LegendPos { get; set; } = "right";

    [Parameter]
    public List<double> Data { get; set; } = new List<double>();

    [Parameter]
    public List<string> Labels { get; set; } = new List<string>();

    [Parameter]
    public List<string> lineColor { get; set; } = new List<string>();

    [Parameter]
    public List<string> backColor { get; set; } = new List<string>();

    [Parameter]
    public double AspRatio { get; set; } = 0;

    /// <summary>
    /// Inizializzazione rendering componente
    ///
    /// partendo da qui:
    /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/
    /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/
    /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await renderChart();
    }

    /// <summary>
    /// Inizializzazione rendering componente
    ///
    /// partendo da qui:
    /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/
    /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/
    /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type
    /// </summary>
    /// <returns></returns>
    protected async Task renderChart()
    {
        var showLegend = Labels.Count <= 15;
        var options = new Dictionary<string, object>
        {
            ["responsive"] = true,
            ["animation"] = false,
            ["plugins"] = new
            {
                legend = new { display = showLegend, position = LegendPos },
                title = new { display = true, text = Title }
            }
        };

        if (AspRatio != 0)
        {
            options["aspectRatio"] = AspRatio;
        }

        // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js
        var config = new
        {
            type = "pie",
            options,
            data = new
            {
                labels = Labels.ToArray(),
                datasets = new[]
                {
                    new
                    {
                        data = Data,
                        borderColor = lineColor,
                        backgroundColor = backColor,
                        hoverBorderWidth = 3
                    }
                }
            }
        };
        await Task.Delay(50);
        await JSRuntime.InvokeVoidAsync("setup", Id, config);
    }
}