egwcorelib/EgwCoreLib.Razor/ChartTS.razor.cs

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
using EgwCoreLib.Razor.Data;

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

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

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

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

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

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

        [Parameter]
        public string Id { get; set; } = "MyTs";
        [Parameter]
        public string LineColor { 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)
        {
            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
    }
}