Ancora update grafici
This commit is contained in:
Samuele Locatelli
@@ -4,122 +4,123 @@
|
||||
<canvas id="@Id"></canvas>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string Id { get; set; } = "MyHist";
|
||||
[Parameter]
|
||||
public string Id { get; set; } = "MyHist";
|
||||
|
||||
[Parameter]
|
||||
public string Legenda { get; set; } = "Legenda";
|
||||
[Parameter]
|
||||
public string Legenda { get; set; } = "Legenda";
|
||||
|
||||
[Parameter]
|
||||
public bool Horizontal { get; set; } = false;
|
||||
[Parameter]
|
||||
public string[]? Data { get; set; }
|
||||
[Parameter]
|
||||
public bool Horizontal { get; set; } = false;
|
||||
|
||||
[Parameter]
|
||||
public string[]? Labels { get; set; }
|
||||
[Parameter]
|
||||
public string[]? Data { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public List<string> lineColor { get; set; } = new List<string>();
|
||||
[Parameter]
|
||||
public List<string> backColor { get; set; } = new List<string>();
|
||||
[Parameter]
|
||||
public string[]? Labels { get; set; }
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
[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
|
||||
{
|
||||
await renderChart();
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
/// <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()
|
||||
else
|
||||
{
|
||||
// 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);
|
||||
}
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,8 +13,10 @@
|
||||
|
||||
[Parameter]
|
||||
public List<string> lineColor { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public List<string> backColor { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public int lTens { get; set; } = 0;
|
||||
|
||||
|
||||
@@ -11,10 +11,15 @@
|
||||
[Parameter]
|
||||
public List<double> Data { get; set; } = null!;
|
||||
|
||||
[Parameter]
|
||||
public List<string> Labels { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public List<string> lineColor { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public List<string> backColor { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public int lTens { get; set; } = 0;
|
||||
|
||||
@@ -56,7 +61,7 @@
|
||||
{
|
||||
legend = new
|
||||
{
|
||||
position = "top"
|
||||
position = "right"
|
||||
},
|
||||
title = new
|
||||
{
|
||||
@@ -64,25 +69,19 @@
|
||||
text = "Chart.js Pie Chart"
|
||||
}
|
||||
}
|
||||
// plugins = {
|
||||
// legend =
|
||||
// {
|
||||
// position = "top",
|
||||
// },
|
||||
//}
|
||||
},
|
||||
data = new
|
||||
{
|
||||
labels = Labels.ToArray(),
|
||||
datasets = new[]
|
||||
{
|
||||
{
|
||||
new
|
||||
{
|
||||
data = Data,
|
||||
borderColor= lineColor,
|
||||
backgroundColor= backColor,
|
||||
label= "Temperatura Rilevata"
|
||||
backgroundColor= backColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
|
||||
[Parameter]
|
||||
public List<string> lineColor { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public List<string> backColor { get; set; } = new List<string>();
|
||||
|
||||
|
||||
@@ -35,9 +35,6 @@
|
||||
|
||||
|
||||
<div class="row">
|
||||
@*<div class="col-3">
|
||||
<PieChart @ref="pieChart" TItem="double" OptionsObject="horizontalLineChartOptions" />
|
||||
</div>*@
|
||||
<div class="col-6">
|
||||
<BarPlot Id="TestBar" Data="@histGroupData" Labels="@histGroupLabel" lineColor="@lineColors" backColor="@bgColors" Legenda="Freq. Osservate"></BarPlot>
|
||||
</div>
|
||||
@@ -50,8 +47,8 @@
|
||||
<div class="col-6">
|
||||
<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-3">
|
||||
<PieChart Id="Testpie" Data="@(randData.Take(14).ToList())" lineColor="@lineColors" backColor="@bgColors"></PieChart>
|
||||
<div class="col-4">
|
||||
<PieChart Id="Testpie" Data="@histData" Labels="@histLabel" lineColor="@lineColors" backColor="@bgColors"></PieChart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -67,9 +67,6 @@ namespace MP.Stats.Pages
|
||||
|
||||
protected int lineTens { get; set; } = 0;
|
||||
|
||||
#if false
|
||||
PieChart<double> pieChart;
|
||||
#endif
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
@@ -86,22 +83,6 @@ namespace MP.Stats.Pages
|
||||
|
||||
object horizontalLineChartOptions = new
|
||||
{
|
||||
//Title = new
|
||||
//{
|
||||
// Display = true,
|
||||
// Text = "Line chart sample"
|
||||
//},
|
||||
//Scales = new
|
||||
//{
|
||||
// XAxes = new object[]
|
||||
// {
|
||||
// new {
|
||||
// //ScaleLabel = new {
|
||||
// //Display = true, LabelString = "value" },
|
||||
// Stacked = true
|
||||
// }
|
||||
// }
|
||||
//},
|
||||
Tooltips = new
|
||||
{
|
||||
Mode = "nearest",
|
||||
@@ -129,19 +110,15 @@ namespace MP.Stats.Pages
|
||||
;
|
||||
private async Task HandleRedraw()
|
||||
{
|
||||
#if false
|
||||
await pieChart.Clear();
|
||||
await pieChart.AddLabelsDatasetsAndUpdate(Labels, GetPieChartDataset());
|
||||
#endif
|
||||
// calcolo hist frequenza con EFCore: https://entityframeworkcore.com/knowledge-base/60871048/group-by-and-to-dictionary-in-ef-core-3-1
|
||||
randData = RandomizeData();
|
||||
var histDict = randData.GroupBy(r => r).Select(g => new
|
||||
{
|
||||
g.Key,
|
||||
Count = g.Count()
|
||||
}).OrderBy(d => d.Key).ToDictionary(x => x.Key, x => x.Count.ToString());
|
||||
histData = histDict.Values.ToArray();
|
||||
histLabel = histDict.Keys.Select(x => $"{x}").ToArray();
|
||||
//var histDict = randData.GroupBy(r => r).Select(g => new
|
||||
//{
|
||||
// g.Key,
|
||||
// Count = g.Count()
|
||||
//}).OrderBy(d => d.Key).ToDictionary(x => x.Key, x => x.Count.ToString());
|
||||
//histData = histDict.Values.ToArray();
|
||||
//histLabel = histDict.Keys.Select(x => $"{x}").ToArray();
|
||||
|
||||
// calcolo i valori raggruppati in numGroup...
|
||||
int numGroup = (int)Math.Sqrt(numRec);
|
||||
@@ -152,11 +129,12 @@ namespace MP.Stats.Pages
|
||||
{
|
||||
g.Key,
|
||||
Count = g.Count()
|
||||
}).OrderBy(d => d.Key).ToDictionary(x => x.Key, x => x.Count.ToString());
|
||||
histGroupData = histDictGroup.Values.ToArray();
|
||||
}).OrderBy(d => d.Key).ToDictionary(x => x.Key, x => x.Count);
|
||||
histGroupData = histDictGroup.Values.Select(x => $"{x}").ToArray();
|
||||
histGroupLabel = histDictGroup.Keys.Select(x => $"{x:N2}").ToArray();
|
||||
|
||||
|
||||
histData = histDictGroup.Values.Select(x => (double)x).ToList();
|
||||
histLabel = histDictGroup.Keys.Select(x => $"{x:N2}").ToList();
|
||||
|
||||
dataList = TSData(DateTime.Today.AddHours(-randData.Count), randData).Select(r => new chartJsData.chartJsTSerie()
|
||||
{ x = r.Key, y = r.Value }).ToList();
|
||||
@@ -165,9 +143,9 @@ namespace MP.Stats.Pages
|
||||
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;
|
||||
protected List<double> histData { get; set; } = new List<double>();
|
||||
|
||||
protected string[]? histLabel { get; set; } = null;
|
||||
protected List<string> histLabel { get; set; } = new List<string>();
|
||||
|
||||
protected string[]? histGroupData { get; set; } = null;
|
||||
|
||||
@@ -180,34 +158,10 @@ namespace MP.Stats.Pages
|
||||
|
||||
|
||||
protected List<chartJsData.chartJsTSerie>? dataList { get; set; } = null;
|
||||
#if false
|
||||
|
||||
PieChartDataset<double> GetPieChartDataset()
|
||||
{
|
||||
return new PieChartDataset<double> { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = backgroundColors, BorderColor = borderColors };
|
||||
}
|
||||
|
||||
LineChartDataset<double> GetLineChartDataset()
|
||||
{
|
||||
return new LineChartDataset<double> { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = backgroundColors, BorderColor = borderColors, Fill = true, PointRadius = 2, BorderDash = new List<int> { } };
|
||||
}
|
||||
|
||||
BarChartDataset<double> GetBarChartDataset()
|
||||
{
|
||||
return new BarChartDataset<double> { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = backgroundColors, BorderColor = borderColors, HoverBorderWidth = 5 };
|
||||
}
|
||||
|
||||
BarChartDataset<double> GetHorizBarChartDataset()
|
||||
{
|
||||
return new BarChartDataset<double> { Label = "# of randoms", Data = RandomizeData(), BackgroundColor = backgroundColors, BorderColor = borderColors, HoverBorderWidth = 5 };
|
||||
}
|
||||
#endif
|
||||
|
||||
string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
|
||||
#if false
|
||||
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()
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user