diff --git a/MP.IOC/Components/App.razor b/MP.IOC/Components/App.razor index efe9dd93..60766030 100644 --- a/MP.IOC/Components/App.razor +++ b/MP.IOC/Components/App.razor @@ -20,6 +20,10 @@ + + + + diff --git a/MP.IOC/Components/ChartJS/BarPlot.razor b/MP.IOC/Components/ChartJS/BarPlot.razor new file mode 100644 index 00000000..985a7630 --- /dev/null +++ b/MP.IOC/Components/ChartJS/BarPlot.razor @@ -0,0 +1,133 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + [Parameter] + public string Id { get; set; } = "MyHist"; + + [Parameter] + public string Legenda { get; set; } = "Legenda"; + + [Parameter] + public bool Horizontal { get; set; } = false; + + [Parameter] + public List Data { get; set; } = new List(); + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + + /// + /// 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 + /// + /// + 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 + } + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + 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 + } + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + datasets = new[] { + new { + data = Data, + borderColor = lineColor, + backgroundColor = backColor, + borderWidth = 1, + label = Legenda + } + }, + labels = Labels + } + }; + await Task.Delay(50); + if (Horizontal) + { + await JSRuntime.InvokeVoidAsync("setup", Id, configHor); + } + else + { + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } + } +} diff --git a/MP.IOC/Components/ChartJS/Chart.razor b/MP.IOC/Components/ChartJS/Chart.razor new file mode 100644 index 00000000..7be94585 --- /dev/null +++ b/MP.IOC/Components/ChartJS/Chart.razor @@ -0,0 +1,63 @@ +@inject IJSRuntime JSRuntime + + + +@code { + public enum ChartType + { + Pie, + Bar + } + + [Parameter] + public string Id { get; set; } = "MyChart"; + + [Parameter] + public ChartType Type { get; set; } + + [Parameter] + public string[]? Data { get; set; } + + [Parameter] + public string[]? BackgroundColor { get; set; } + + [Parameter] + public string[]? Labels { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await InitDefault(); + } + + protected async Task InitDefault() + { + // Here we create an anonymous type with all the options + // that need to be sent to Chart.js + var config = new + { + type = Type.ToString().ToLower(), + options = new + { + responsive = true, + scales = new + { + yAxes = new + { + suggestedMin = 0 + } + } + }, + data = new + { + datasets = new[] + { + new { data = Data, backgroundColor = BackgroundColor} + }, + labels = Labels + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } + +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/Line.razor b/MP.IOC/Components/ChartJS/Line.razor new file mode 100644 index 00000000..83db14b7 --- /dev/null +++ b/MP.IOC/Components/ChartJS/Line.razor @@ -0,0 +1,123 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public string Title { get; set; } = "Demo Line"; + + [Parameter] + public List DataTS { get; set; } = null!; + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public bool Stepped { get; set; } = false; + + + [Parameter] + public string MinValue { get; set; } = "0"; + + [Parameter] + public string MaxValue { get; set; } = "0"; + + [Parameter] + public int lTens { get; set; } = 0; + + /// + /// 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 + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + protected override async Task OnParametersSetAsync() + { + // await Task.Delay(100); + await renderChart(); + } + + /// + /// 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 + /// + /// + 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 + { + type = "linear", + // type = "logarithmic", + display = true, + ticks = new + { + maxTicksLimit = 10 + }, + suggestedMin = MinValue != MaxValue ? MinValue : "auto", + suggestedMax = MinValue != MaxValue ? MaxValue : "auto" + }, + xAxes = new + { + type = "time", + distribution = "linear", + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + labels = Labels, + datasets = new[] + { + new { + data = DataTS, + borderColor = lineColor, + backgroundColor = backColor, + lineTension = lTens, + stepped = Stepped, + label = Title + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/MultiLine.razor b/MP.IOC/Components/ChartJS/MultiLine.razor new file mode 100644 index 00000000..3a926640 --- /dev/null +++ b/MP.IOC/Components/ChartJS/MultiLine.razor @@ -0,0 +1,123 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public List Titles { get; set; } = new List() { "Demo Line" }; + + [Parameter] + public List> DataTSList { get; set; } = null!; + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public bool Stepped { get; set; } = false; + + [Parameter] + public bool Stacked { get; set; } = false; + + + [Parameter] + public string MinValue { get; set; } = "0"; + + [Parameter] + public string MaxValue { get; set; } = "0"; + + [Parameter] + public int lTens { get; set; } = 0; + + /// + /// 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 + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + /// + /// 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 + /// + /// + protected async Task renderChart() + { + int i = 0; + // preparo lista di dati... + var dataSetsList = DataTSList.Select(dTS => new + { + data = dTS, + borderColor = lineColor[i], + backgroundColor = backColor, + lineTension = lTens, + stepped = Stepped, + label = Titles[i++] + }).ToList(); + + // 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 + { + stacked = Stacked, + type = "linear", + // type = "logarithmic", + display = true, + ticks = new + { + maxTicksLimit = 10 + }, + suggestedMin = MinValue != MaxValue ? MinValue : "auto", + suggestedMax = MinValue != MaxValue ? MaxValue : "auto" + }, + xAxes = new + { + type = "time", + distribution = "linear", + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + labels = Labels, + datasets = dataSetsList + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/PieChart.razor b/MP.IOC/Components/ChartJS/PieChart.razor new file mode 100644 index 00000000..5294db68 --- /dev/null +++ b/MP.IOC/Components/ChartJS/PieChart.razor @@ -0,0 +1,98 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public string Title { get; set; } = "DEMO Pie Chart"; + + [Parameter] + public string LegendPos { get; set; } = "right"; + + [Parameter] + public List Data { get; set; } = new List(); + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + /// + /// 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 + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + /// + /// 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 + /// + /// + protected async Task renderChart() + { + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js + var config = new + { + type = "pie", + options = new + { + responsive = true, + plugins = new + { + legend = new + { + position = LegendPos + }, + title = new + { + display = true, + text = Title + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}", + HoverBorderWidth = 3 + }, + data = new + { + labels = Labels.ToArray(), + datasets = new[] + { + new + { + data = Data, + borderColor= lineColor, + backgroundColor= backColor + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/StepLine.razor b/MP.IOC/Components/ChartJS/StepLine.razor new file mode 100644 index 00000000..ff48aa1e --- /dev/null +++ b/MP.IOC/Components/ChartJS/StepLine.razor @@ -0,0 +1,94 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public List DataTS { get; set; } = null!; + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + /// + /// 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 + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await renderChart(); + } + + /// + /// 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 + /// + /// + 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, + ticks = new + { + maxTicksLimit = 10 + } + }, + xAxes = new + { + type = "timeseries", + distribution = "linear", + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + datasets = new[] + { + new + { + data = DataTS, + borderColor= lineColor, + backgroundColor= backColor, + lineTension= 0, + stepped= true, + label= "Temperatura Rilevata" + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/Compo/ParetoDetail.razor b/MP.IOC/Components/Compo/ParetoDetail.razor index e98eb733..1285c8d6 100644 --- a/MP.IOC/Components/Compo/ParetoDetail.razor +++ b/MP.IOC/Components/Compo/ParetoDetail.razor @@ -7,8 +7,6 @@
    - @*
  • -
  • *@ @foreach (var itemDet in ListPaged) {
  • @@ -20,8 +18,6 @@
  • } - @*
  • -
  • *@