GPW/GPW.CORE.UI/Components/Chart.razor

@inject IJSRuntime JSRuntime

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

@code {
    public enum ChartType
    {
        Nd,
        Pie,
        Bar,
        Hist,
        TS
    }

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

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

    [Parameter]
    public string[] Data { get; set; }

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

    [Parameter]
    public string[] BackgroundColor { get; set; }

    [Parameter]
    public string[] Labels { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
        {
            switch (Type)
            {
                case ChartType.Hist:
                    await InitHist();
                    break;

                case ChartType.TS:
                    await InitTs();
                    break;

                case ChartType.Nd:
                case ChartType.Pie:
                case ChartType.Bar:
                default:
                    await InitDefault();
                    break;
            }
        }
    }

    protected async Task InitHist()
    {
        // Here we create an anonymous type with all the options
        // that need to be sent to Chart.js
        var config = new
        {
            Type = Type.ToString().ToLower(),
            Options = new
            {
                Responsive = true,
                scales = new
                {
                    yAxes = new
                    {
                        display = true,
                    }
                }
            },
            Data = new
            {
                Datasets = new[]
                                                                                                    {
                    new { Data = Data, BackgroundColor = BackgroundColor}
                },
                Labels = Labels
            }
        };
        await JSRuntime.InvokeVoidAsync("setup", Id, config);
    }

    protected async Task InitTs()
    {
        // Here we create an anonymous type with all the options
        // that need to be sent to 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= "rgb(7, 173, 236)",
                        lineTension= 0,
                        stepped= true,
                        label= "Temperatura Rilevata"
                    }
                }
            }
        };
        await JSRuntime.InvokeVoidAsync("setup", Id, config);
    }

    protected async Task InitDefault()
    {
        // Here we create an anonymous type with all the options
        // that need to be sent to Chart.js
        var config = new
        {
            Type = Type.ToString().ToLower(),
            Options = new
            {
                Responsive = true,
                scales = new
                {
                    //yAxes = new
                    //{
                    //    suggestedMin = 0
                    //}
                }
            },
            Data = new
            {
                Datasets = new[]
                                                                                       {
                    new { Data = Data, BackgroundColor = BackgroundColor}
                },
                Labels = Labels
            }
        };
        await JSRuntime.InvokeVoidAsync("setup", Id, config);
    }

}