egwcorelib/EgwCoreLib.Razor/ChartMultiLine.razor.cs

using EgwCoreLib.Razor.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data;
using System.Reflection.Emit;

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

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

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


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

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

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

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

        [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/ChartMultiLine.razor.js";
            if (AddSlash)
            {
                jsPath = "/." + jsPath;
            }
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", jsPath);
            await Task.Delay(250);
            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()
        {
            List<dynamic> dynData = new List<dynamic>();
            foreach (var item in DataSets)
            {
                dynData.Add(new
                {
                    data = item.valY,
                    label = item.label,
                    borderColor = item.borderColor,
                    backgroundColor = item.backgroundColor,
                    lineTension = item.lineTension,
                    stepped = item.stepped,
                    fill = item.fill
                });
            }

            // 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,
                    plugins = new
                    {
                        legend = new
                        {
                            display = true,
                            labels = new
                            {
                                color = TextColor,
                            },
                        },
                    },
                    Animation = new
                    {
                        Duration = AnimationTime
                    },
                },
                data = new
                {
                    datasets = dynData,
                    labels = ChartLabels
                }
            };
            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
    }
}