egwcorelib/EgwCoreLib.Razor/ChartTS.razor.cs

using EgwCoreLib.Razor.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace EgwCoreLib.Razor
{
    public partial class ChartTS
    {
        #region Public Properties

        [Parameter]
        public bool AddSlash { get; set; } = false;

        [Parameter]
        public int AnimationTime { get; set; } = 0;

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

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

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

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

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

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

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

        #endregion Public Properties

        #region Protected Methods

        /// <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)
        {
            string jsPath = "./_content/EgwCoreLib.Razor/ChartHist.razor.js";
            if (AddSlash)
            {
                jsPath = "/." + jsPath;
            }
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", jsPath);
            await Task.Delay(50);
            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,
                    MaintainAspectRatio = false,
                    scales = new
                    {
                        yAxes = new
                        {
                            display = true,
                            grid = new
                            {
                                color = GridColor,
                                display = true,
                            },
                            ticks = new
                            {
                                color = TextColor,
                                maxTicksLimit = 10,
                            }
                        },
                        xAxes = new
                        {
                            type = "timeseries",
                            distribution = "linear",
                            grid = new
                            {
                                color = GridColor,
                                display = true,
                            },
                            ticks = new
                            {
                                color = TextColor,
                            },
                        }
                    },
                    plugins = new
                    {
                        legend = new
                        {
                            display = true,
                            labels = new
                            {
                                color = TextColor,
                            },
                        },
                    },
                    Animation = new
                    {
                        Duration = AnimationTime
                    },
                },
                data = new
                {
                    datasets = new[]
                    {
                        new
                        {
                            data = DataTS,
                            borderColor = LineColor,
                            backgroundColor = BackColor,
                            lineTension = 0,
                            stepped = true,
                            label = ChartLabel
                        }
                    }
                }
            };
            await JSRuntime.InvokeVoidAsync("setup", Id, config);
        }

        #endregion Protected Methods

        #region Private Properties

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

        private IJSObjectReference module { get; set; } = null!;

        #endregion Private Properties
    }
}