mapo-core/MP.Stats/Components/ChartJs/BarPlot.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Net.Http;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.JSInterop;
using MP.Stats;
using MP.Stats.Shared;

namespace MP.Stats.Components.ChartJs
{
    public partial class BarPlot
    {
        [Inject]
        IJSRuntime JSRuntime { get; set; }

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

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

        [Parameter]
        public bool Horizontal { get; set; } = false;
        [Parameter]
        public string[]? Data { get; set; }

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

        [Parameter]
        public string lineColor { get; set; } = "";
        [Parameter]
        public string backColor { get; set; } = "";
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            //if (!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, tipo verticale
            var config = new
            {
                type = "bar",
                options = new
                {
                    responsive = true,
                    scales = new
                    {
                        yAxes = new
                        {
                            suggestedMin = 0,
                            display = true,
                            ticks = new
                            {
                                beginAtZero = true,
                                maxTicksLimit = 10
                            }
                        }
                    }
                },
                data = new
                {
                    datasets = new[] {
                        new {
                            data = Data,
                            borderColor = lineColor,
                            backgroundColor = backColor,
                            borderWidth = 1,
                            label = Legenda
                        }
                    },
                    labels = Labels
                }
            };
            // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale
            var configHor = new
            {
                type = "bar",
                options = new
                {
                    indexAxis = "y",
                    responsive = true,
                    scales = new
                    {
                        yAxes = new
                        {
                            suggestedMin = 0,
                            display = true,
                            ticks = new
                            {
                                beginAtZero = true,
                                maxTicksLimit = 10
                            }
                        }
                    }
                },
                data = new
                {
                    datasets = new[] {
                        new {
                            data = Data,
                            borderColor = lineColor,
                            backgroundColor = backColor,
                            borderWidth = 1,
                            label = Legenda
                        }
                    },
                    labels = Labels
                }
            };
            if (Horizontal)
            {
                await JSRuntime.InvokeVoidAsync("setup", Id, configHor);
            }
            else
            {
                await JSRuntime.InvokeVoidAsync("setup", Id, config);
            }
        }
    }
}