gwms/GWMS.UI/Components/ChartJs/Line.razor

@using GWMS.Data
@inject IJSRuntime JSRuntime

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

@code {

    private List<chartJsData.chartJsTSerie> _DataTS { get; set; } = null!;

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

    [Parameter]
    public string Title { get; set; } = "Demo Line";

    [Parameter]
    public List<chartJsData.chartJsTSerie> DataTS
    {
        get
        {
            return _DataTS;
        }
        set
        {
            _DataTS = value;
            //var pUpd = Task.Run(async () => await renderChart());
            //pUpd.Wait();
        }
    }

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

    [Parameter]
    public List<string> pointColor { 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;


    [Parameter]
    public string MinValue { get; set; } = "0";

    [Parameter]
    public string MaxValue { get; set; } = "0";

    [Parameter]
    public int lTens { 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>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected async Task renderChart()
    {
        // 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,
                        position = "right",
                        ticks = new
                        {
                            maxTicksLimit = 10
                        },
                        suggestedMin = MinValue != MaxValue ? MinValue : "auto",
                        suggestedMax = MinValue != MaxValue ? MaxValue : "auto"
                    },
                    xAxes = new
                    {
                        type = "time",
                        distribution = "linear",
                    }
                },
                plugins = new
                {
                    legend = new
                    {
                        display = false
                    },
                },
                Animation = false,
                AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}"
            },
            data = new
            {
                labels = Labels,
                datasets = new[]
                            {
                    new
                    {
                        data = DataTS,
                        pointBorderColor = backColor,
                        borderColor = lineColor,
                        backgroundColor = backColor,
                        fill = true,
                        PointRadius = 2,
                        BorderWidth = 1,
                        lineTension= lTens,
                        stepped= false,
                        label= Title
                    }
                }
            }
        };
        await JSRuntime.InvokeVoidAsync("setup", Id, config);
    }
}