@inject IJSRuntime JSRuntime

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

@code {

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

    [Parameter]
    public List<chartJsData.chartJsTSerie> DataTS { get; set; }

    [Parameter]
    public string lineColor { get; set; }
    [Parameter]
    public string backColor { get; set; }


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
        {
            // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js
            var config = new
            {
                type = "line",
                options = new
                {
                    Responsive = true,
                    scales = new
                    {
                        yAxes = new
                        {
                            display = true,
                            ticks = new
                            {
                                maxTicksLimit = 10
                            }
                        },
                        xAxes = new
                        {
                            type = "timeseries",
                            distribution = "linear",
                        },
                        animation = new
                        {
                            duration = 100
                        }
                    }
                },
                data = new
                {
                    datasets = new[]
                    {
                        new
                        {
                            data = DataTS,
                            borderColor= lineColor,
                            backgroundColor= backColor,
                            lineTension= 0,
                            stepped= true,
                            label= "Temperatura Rilevata"
                        }
                    }
                }
            };
            await JSRuntime.InvokeVoidAsync("setup", Id, config);
        }
    }
}