Egalware/mapo-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Demo gestione array colori

Browse Source
This commit is contained in:
Samuele Locatelli
2022-02-25 18:25:15 +01:00
parent 0a26d475f9
commit 0798679629
11 changed files with 160 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MP.Stats/Components/ChartJs/BarPlot.razor
+121 -1
View File
@@ -1,5 +1,125 @@
@using MP.Data
@inject IJSRuntime JSRuntime
<canvas id="@Id"></canvas>
@code {
[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 List<string> lineColor { get; set; } = new List<string>();
[Parameter]
public List<string> backColor { get; set; } = new List<string>();
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, 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);
}
}
}
}
MP.Stats/Components/ChartJs/BarPlot.razor.cs
-144
View File
@@ -1,144 +0,0 @@
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);
}
}
}
}
MP.Stats/Components/ChartJs/Line.razor
+3 -3
View File
@@ -10,11 +10,11 @@
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS { get; set; } = null!;
[Parameter]
public string lineColor { get; set; } = "";
public List<string> lineColor { get; set; } = new List<string>();
[Parameter]
public string backColor { get; set; } = "";
public List<string> backColor { get; set; } = new List<string>();
[Parameter]
public int lTens { get; set; } = 0;
MP.Stats/Components/ChartJs/PieChart.razor
+15 -12
View File
@@ -12,9 +12,9 @@
public List<double> Data { get; set; } = null!;
[Parameter]
public string lineColor { get; set; } = "";
public List<string> lineColor { get; set; } = new List<string>();
[Parameter]
public string backColor { get; set; } = "";
public List<string> backColor { get; set; } = new List<string>();
[Parameter]
public int lTens { get; set; } = 0;
@@ -30,10 +30,7 @@
/// <returns></returns>
protected override async Task OnAfterRenderAsync(bool firstRender)
{
//if (!firstRender)
//{
await renderChart();
//}
}
/// <summary>
@@ -55,28 +52,34 @@
options = new
{
responsive = true,
plugins = new
{
legend = new
{
position = "top"
},
title = new
{
display = true,
text = "Chart.js Pie Chart"
}
}
// plugins = {
// legend =
// {
// position = "top",
// },
// title = {
// display = true,
// text = 'Chart.js Pie Chart'
// }
//}
},
data = new
{
datasets = new[]
{
{
new
{
data = Data,
borderColor= lineColor,
backgroundColor= backColor,
lineTension= lTens,
stepped= false,
label= "Temperatura Rilevata"
}
}
MP.Stats/Components/ChartJs/StepLine.razor
+3 -6
View File
@@ -10,11 +10,11 @@
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS { get; set; } = null!;
[Parameter]
public string lineColor { get; set; } = "";
public List<string> lineColor { get; set; } = new List<string>();
[Parameter]
public string backColor { get; set; } = "";
public List<string> backColor { get; set; } = new List<string>();
/// <summary>
/// Inizializzazione rendering componente
@@ -28,10 +28,7 @@
/// <returns></returns>
protected override async Task OnAfterRenderAsync(bool firstRender)
{
//if (!firstRender)
//{
await renderChart();
//}
}
/// <summary>
MP.Stats/MP.Stats.csproj
+1 -1
View File
@@ -4,7 +4,7 @@
<TargetFramework>net6.0</TargetFramework>
<RootNamespace>MP.Stats</RootNamespace>
<UserSecretsId>826e877c-ba70-4253-84cb-d0b1cafd4440</UserSecretsId>
<Version>6.14.2202.2512</Version>
<Version>6.14.2202.2518</Version>
</PropertyGroup>
<ItemGroup>
MP.Stats/Pages/Test.razor
+6 -6
View File
@@ -39,19 +39,19 @@
<PieChart @ref="pieChart" TItem="double" OptionsObject="horizontalLineChartOptions" />
</div>*@
<div class="col-6">
<BarPlot Id="TestBar" Data="@histGroupData" Labels="@histGroupLabel" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.5)" Legenda="Freq. Osservate"></BarPlot>
<BarPlot Id="TestBar" Data="@histGroupData" Labels="@histGroupLabel" lineColor="@lineColors" backColor="@bgColors" Legenda="Freq. Osservate"></BarPlot>
</div>
<div class="col-6">
<StepLine Id="TestTS" DataTS="@dataList" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.3)"></StepLine>
<StepLine Id="TestTS" DataTS="@dataList" lineColor="@lineColors.Skip(4).Take(1).ToList()" backColor="@bgColors.Skip(4).Take(1).ToList()"></StepLine>
</div>
<div class="col-6">
<BarPlot Id="TestBarHor" Horizontal="true" Data="@histGroupData" Labels="@histGroupLabel" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.5)" Legenda="Freq. Osservate"></BarPlot>
<BarPlot Id="TestBarHor" Horizontal="true" Data="@histGroupData" Labels="@histGroupLabel" lineColor="@lineColors" backColor="@bgColors" Legenda="Freq. Osservate"></BarPlot>
</div>
<div class="col-6">
<Line Id="TestLineTS" DataTS="@dataList" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.3)" lTens="@lineTens"></Line>
<Line Id="TestLineTS" DataTS="@dataList" lineColor="@lineColors.Skip(1).Take(1).ToList()" backColor="@bgColors.Skip(1).Take(1).ToList()" lTens="@lineTens"></Line>
</div>
<div class="col-6">
<PieChart Id="Testpie" Data="@randData" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.3)"></PieChart>
<div class="col-3">
<PieChart Id="Testpie" Data="@(randData.Take(14).ToList())" lineColor="@lineColors" backColor="@bgColors"></PieChart>
</div>
</div>
MP.Stats/Pages/Test.razor.cs
+8 -2
View File
@@ -160,6 +160,9 @@ namespace MP.Stats.Pages
dataList = TSData(DateTime.Today.AddHours(-randData.Count), randData).Select(r => new chartJsData.chartJsTSerie()
{ x = r.Key, y = r.Value }).ToList();
lineColors = new List<string>() { "rgba(255, 99, 132, 1)", "rgba(255, 159, 64, 1)", "rgba(255, 205, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(54, 162, 235, 1)", "rgba(153, 102, 255, 1)", "rgba(201, 203, 207, 1)" };
bgColors = new List<string>() { "rgba(255, 99, 132, 0.3)", "rgba(255, 159, 64, 0.3)", "rgba(255, 205, 86, 0.3)", "rgba(75, 192, 192, 0.3)", "rgba(54, 162, 235, 0.3)", "rgba(153, 102, 255, 0.3)", "rgba(201, 203, 207, 0.3)" };
}
protected string[]? histData { get; set; } = null;
@@ -172,6 +175,9 @@ namespace MP.Stats.Pages
protected List<double> randData { get; set; } = new List<double>();
protected List<string> bgColors = new List<string>();
protected List<string> lineColors = new List<string>();
protected List<chartJsData.chartJsTSerie>? dataList { get; set; } = null;
#if false
@@ -199,8 +205,8 @@ namespace MP.Stats.Pages
string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
#if false
List<string> backgroundColors = new List<string> { ChartColor.FromRgba(255, 99, 132, 0.2f), ChartColor.FromRgba(54, 162, 235, 0.2f), ChartColor.FromRgba(255, 206, 86, 0.2f), ChartColor.FromRgba(75, 192, 192, 0.2f), ChartColor.FromRgba(153, 102, 255, 0.2f), ChartColor.FromRgba(255, 159, 64, 0.2f) };
List<string> borderColors = new List<string> { ChartColor.FromRgba(255, 99, 132, 1f), ChartColor.FromRgba(54, 162, 235, 1f), ChartColor.FromRgba(255, 206, 86, 1f), ChartColor.FromRgba(75, 192, 192, 1f), ChartColor.FromRgba(153, 102, 255, 1f), ChartColor.FromRgba(255, 159, 64, 1f) };
List<string> backgroundColors = new List<string> { ChartColor.Fromrgbaa(255, 99, 132, 0.2f), ChartColor.Fromrgbaa(54, 162, 235, 0.2f), ChartColor.Fromrgbaa(255, 206, 86, 0.2f), ChartColor.Fromrgbaa(75, 192, 192, 0.2f), ChartColor.Fromrgbaa(153, 102, 255, 0.2f), ChartColor.Fromrgbaa(255, 159, 64, 0.2f) };
List<string> borderColors = new List<string> { ChartColor.Fromrgbaa(255, 99, 132, 1f), ChartColor.Fromrgbaa(54, 162, 235, 1f), ChartColor.Fromrgbaa(255, 206, 86, 1f), ChartColor.Fromrgbaa(75, 192, 192, 1f), ChartColor.Fromrgbaa(153, 102, 255, 1f), ChartColor.Fromrgbaa(255, 159, 64, 1f) };
#endif
private List<double> RandomizeData()
MP.Stats/Resources/ChangeLog.html
+1 -1
View File
@@ -1,6 +1,6 @@
<body>
<i>Modulo statistiche MAPO</i>
<h4>Versione: 6.14.2202.2512</h4>
<h4>Versione: 6.14.2202.2518</h4>
<br />
Note di rilascio:
<ul>
MP.Stats/Resources/VersNum.txt
+1 -1
View File
@@ -1 +1 @@
6.14.2202.2512
6.14.2202.2518
MP.Stats/Resources/manifest.xml
+1 -1
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<item>
<version>6.14.2202.2512</version>
<version>6.14.2202.2518</version>
<url>https://nexus.steamware.net/repository/SWS/MP-STATS/stable/LAST/MP.Stats.zip</url>
<changelog>https://nexus.steamware.net/repository/SWS/MP-STATS/stable/LAST/ChangeLog.html</changelog>
<mandatory>false</mandatory>