mapo-core/MP.SPEC/Components/Chart/Line.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using MP.Data;

namespace MP.SPEC.Components.Chart
{
    public partial class Line
    {
        #region Public Properties

        [Parameter]
        public double AspRatio { get; set; } = 0;

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

        [Parameter]
        public string ChartId
        {
            get
            {
                return Id;
            }
            set
            {
                Id = value;
            }
        }

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

            set
            {
                _DataTS = value;
            }
        }

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

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

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

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

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

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

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

        #endregion Public Properties

        #region Protected Properties

        protected string Id { get; set; } = "CurrId";

        #endregion Protected 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,
                    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);
        }

        #endregion Protected Methods

        #region Private Properties

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

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

        #endregion Private Properties
    }
}