OK, charting controlli
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
<div class="row">
|
||||
@if (RawData == null || RawData.Count == 0)
|
||||
{
|
||||
<div class="col-12">
|
||||
<div class="alert alert-secondary text-center h4"><span class="oi oi-graph"></span> No Chart Data</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="col-2 pr-0" style="max-height: 10em; overflow:hidden; overflow-y: auto;">
|
||||
<ul class="list-group list-group-sm small">
|
||||
@foreach (var item in @ParetoData)
|
||||
{
|
||||
<li class="list-group-item p-1 d-flex justify-content-between align-items-center">
|
||||
@item.label
|
||||
<span class="badge badge-primary badge-pill">@item.value</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<PieChart @ref="PieVC" TItem="double" OptionsObject="pieChartOptions" />
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<LineChart @ref="TimeSerieVC" TItem="double" OptionsObject="lineChartOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,253 @@
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Blazorise.Charts;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using MP.Stats.Data;
|
||||
|
||||
namespace MP.Stats.Components
|
||||
{
|
||||
public partial class ChartControlli
|
||||
{
|
||||
#region Protected Fields
|
||||
|
||||
protected const string EsitoKO = "Esito: Non Passato";
|
||||
|
||||
protected const string EsitoOK = "Esito: OK";
|
||||
|
||||
protected object lineChartOptions = new
|
||||
{
|
||||
Scales = new
|
||||
{
|
||||
XAxes = new object[]
|
||||
{
|
||||
new {
|
||||
Display = true
|
||||
}
|
||||
},
|
||||
YAxes = new object[]
|
||||
{
|
||||
new {
|
||||
Display = true,
|
||||
ticks= new {
|
||||
suggestedMin = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
Tooltips = new
|
||||
{
|
||||
Mode = "nearest",
|
||||
Intersect = false
|
||||
},
|
||||
Hover = new
|
||||
{
|
||||
Mode = "nearest",
|
||||
Intersect = false
|
||||
},
|
||||
Animation = false,
|
||||
AspectRatio = 4.9
|
||||
};
|
||||
|
||||
protected object pieChartOptions = new
|
||||
{
|
||||
Scales = new
|
||||
{
|
||||
XAxes = new object[]
|
||||
{
|
||||
new {
|
||||
Display = false
|
||||
}
|
||||
},
|
||||
YAxes = new object[]
|
||||
{
|
||||
new {
|
||||
Display = false
|
||||
}
|
||||
}
|
||||
},
|
||||
Legend = new
|
||||
{
|
||||
Display = false
|
||||
},
|
||||
Tooltips = new
|
||||
{
|
||||
Mode = "nearest",
|
||||
Intersect = false
|
||||
},
|
||||
Hover = new
|
||||
{
|
||||
Mode = "nearest",
|
||||
Intersect = false
|
||||
},
|
||||
Animation = false,
|
||||
AspectRatio = 1
|
||||
};
|
||||
|
||||
protected PieChart<double> PieVC;
|
||||
protected LineChart<double> TimeSerieVC;
|
||||
|
||||
#endregion Protected Fields
|
||||
|
||||
#region Protected Properties
|
||||
|
||||
protected SelectData _currFilter { get; set; } = new SelectData();
|
||||
|
||||
protected List<MP.Data.DatabaseModels.ResControlli> _rawData { get; set; } = new List<MP.Data.DatabaseModels.ResControlli>();
|
||||
|
||||
[Inject]
|
||||
protected MessageService MessageService { get; set; }
|
||||
|
||||
protected List<ChartKV> ParetoData { get; set; } = new List<ChartKV>();
|
||||
|
||||
[Inject]
|
||||
protected MpStatsService StatService { get; set; }
|
||||
|
||||
protected List<ChartTS> TSData { get; set; } = new List<ChartTS>();
|
||||
|
||||
#endregion Protected Properties
|
||||
|
||||
#region Public Properties
|
||||
|
||||
[Parameter]
|
||||
public List<MP.Data.DatabaseModels.ResControlli> RawData
|
||||
{
|
||||
get => _rawData;
|
||||
set
|
||||
{
|
||||
// salvo valori
|
||||
_rawData = value;
|
||||
if (value != null)
|
||||
{
|
||||
// ricalcolo charting data
|
||||
recalcData();
|
||||
var dataReload = Task.Run(async () =>
|
||||
{
|
||||
await HandleRedraw();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#endregion Public Properties
|
||||
|
||||
#region Private Methods
|
||||
|
||||
private PieChartDataset<double> GetBarChartDataset()
|
||||
{
|
||||
var answ = new PieChartDataset<double>
|
||||
{
|
||||
Label = "Numero Controlli",
|
||||
Data = ParetoData.Select(x => x.value).ToList(),
|
||||
BackgroundColor = getPieColors(0.4f),
|
||||
BorderColor = getPieColors(1f),
|
||||
HoverBorderWidth = 3
|
||||
};
|
||||
return answ;
|
||||
}
|
||||
|
||||
private List<string> GetBarChartLabels()
|
||||
{
|
||||
var answ = ParetoData.Select(x => x.label).ToList();
|
||||
return answ;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Elenco 2 linee x controli KO /KO
|
||||
/// </summary>
|
||||
/// <returns></returns>
|
||||
private LineChartDataset<double> GetLineChartDataset()
|
||||
{
|
||||
var answ = new LineChartDataset<double>
|
||||
{
|
||||
Label = "Numero controlli",
|
||||
Data = TSData.Select(x => x.Value).ToList(),
|
||||
BorderColor = getLineColors(1f),
|
||||
Fill = true,
|
||||
PointRadius = 2,
|
||||
LineTension = 0,
|
||||
BorderDash = new List<int> { }
|
||||
};
|
||||
return answ;
|
||||
}
|
||||
|
||||
private List<string> GetLineChartLabels()
|
||||
{
|
||||
var answ = TSData.Select(x => x.TLabel.ToString("ddd dd.MM")).ToList();
|
||||
return answ;
|
||||
}
|
||||
|
||||
private void recalcData()
|
||||
{
|
||||
if (RawData != null)
|
||||
{
|
||||
ParetoData = RawData
|
||||
.GroupBy(p => p.EsitoOk)
|
||||
.Select(y => new ChartKV() { label = y.First().EsitoOk ? EsitoOK : EsitoKO, value = y.Count() })
|
||||
.OrderByDescending(x => x.value)
|
||||
.ToList();
|
||||
|
||||
TSData = RawData
|
||||
.GroupBy(x => x.DataOra.Date)
|
||||
.Select(y => new ChartTS() { TLabel = y.First().DataOra.Date, Value = y.Count() })
|
||||
.OrderBy(x => x.TLabel)
|
||||
.ToList();
|
||||
}
|
||||
}
|
||||
|
||||
#endregion Private Methods
|
||||
|
||||
#region Protected Methods
|
||||
|
||||
/// <summary>
|
||||
/// Genera colori sfondo 33% rosso / arancione / giallo
|
||||
/// </summary>
|
||||
/// <param name="numRecords"></param>
|
||||
/// <returns></returns>
|
||||
protected List<string> getLineColors(float alpha)
|
||||
{
|
||||
List<string> answ = new List<string>();
|
||||
answ.Add(ChartColor.FromRgba(54, 82, 254, alpha));
|
||||
return answ;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Genera colori sfondo 33% rosso / arancione / giallo
|
||||
/// </summary>
|
||||
/// <param name="numRecords"></param>
|
||||
/// <returns></returns>
|
||||
protected List<string> getPieColors(float alpha)
|
||||
{
|
||||
List<string> answ = new List<string>();
|
||||
foreach (var item in ParetoData)
|
||||
{
|
||||
if (item.label == EsitoOK)
|
||||
{
|
||||
answ.Add(ChartColor.FromRgba(54, 254, 82, alpha));
|
||||
}
|
||||
else
|
||||
{
|
||||
answ.Add(ChartColor.FromRgba(254, 82, 65, alpha));
|
||||
}
|
||||
}
|
||||
return answ;
|
||||
}
|
||||
|
||||
protected async Task HandleRedraw()
|
||||
{
|
||||
if (PieVC != null)
|
||||
{
|
||||
await PieVC.Clear();
|
||||
await PieVC.AddLabelsDatasetsAndUpdate(GetBarChartLabels(), GetBarChartDataset());
|
||||
}
|
||||
if (TimeSerieVC != null)
|
||||
{
|
||||
await TimeSerieVC.Clear();
|
||||
await TimeSerieVC.AddLabelsDatasetsAndUpdate(GetLineChartLabels(), GetLineChartDataset());
|
||||
}
|
||||
}
|
||||
|
||||
#endregion Protected Methods
|
||||
}
|
||||
}
|
||||
@@ -5,9 +5,13 @@
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header table-primary p-1">
|
||||
<SelectionFilter SelFilter="currFilter" filterChanged="DoFilter" filterReset="ResetFilter"></SelectionFilter>
|
||||
<SelectionFilter SelFilter="currFilter" filterChanged="DoFilter" filterReset="ResetFilter" chartVisible="ShowCharts" chartsToggle="ToggleChart"></SelectionFilter>
|
||||
</div>
|
||||
<div class="card-body py-0 px-1">
|
||||
@if (ShowCharts == true)
|
||||
{
|
||||
<ChartControlli RawData="SearchRecords"></ChartControlli>
|
||||
}
|
||||
@if (ListRecords == null)
|
||||
{
|
||||
<LoadingData></LoadingData>
|
||||
@@ -23,7 +27,6 @@
|
||||
<table class="table table-sm table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@*<th></th>*@
|
||||
<th>Macchina</th>
|
||||
<th>Data</th>
|
||||
<th>ODL/Commessa</th>
|
||||
@@ -37,7 +40,6 @@
|
||||
@foreach (var record in ListRecords)
|
||||
{
|
||||
<tr class="@checkSelect(@record.IdxControllo)">
|
||||
@*<td><button class="btn btn-sm btn-info" @onclick="() => Edit(record)"><span class="oi oi-pencil"></span></button> <button class="btn btn-sm btn-success" @onclick="() => ShowDocs(record)" title="Vai ai documenti"><span class="oi oi-document"></span></button></td>*@
|
||||
<td>@record.IdxMacchina</td>
|
||||
<td>@record.DataOra</td>
|
||||
<td>@record.IdxOdl</td>
|
||||
|
||||
@@ -21,11 +21,41 @@ namespace MP.Stats.Pages
|
||||
|
||||
#region Private Properties
|
||||
|
||||
private int currPage { get; set; } = 1;
|
||||
private int _currPage { get; set; } = 1;
|
||||
|
||||
private int _numRecord { get; set; } = 10;
|
||||
|
||||
private int currPage
|
||||
{
|
||||
get => _currPage;
|
||||
set
|
||||
{
|
||||
if (_currPage != value)
|
||||
{
|
||||
_currPage = value;
|
||||
var pUpd = Task.Run(async () => await reloadData());
|
||||
pUpd.Wait();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private bool isLoading { get; set; } = false;
|
||||
|
||||
private int numRecord { get; set; } = 10;
|
||||
private int numRecord
|
||||
{
|
||||
get => _numRecord;
|
||||
set
|
||||
{
|
||||
if (_numRecord != value)
|
||||
{
|
||||
_numRecord = value;
|
||||
var pUpd = Task.Run(async () => await reloadData());
|
||||
pUpd.Wait();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private bool ShowCharts { get; set; } = false;
|
||||
|
||||
#endregion Private Properties
|
||||
|
||||
@@ -73,9 +103,6 @@ namespace MP.Stats.Pages
|
||||
}
|
||||
}
|
||||
|
||||
[Parameter]
|
||||
public string IdxMacchina { get; set; } = "";
|
||||
|
||||
#endregion Public Properties
|
||||
|
||||
#region Private Methods
|
||||
@@ -100,16 +127,14 @@ namespace MP.Stats.Pages
|
||||
await reloadData();
|
||||
}
|
||||
|
||||
protected async Task ForceReload(int newNum)
|
||||
protected void ForceReload(int newNum)
|
||||
{
|
||||
numRecord = newNum;
|
||||
await reloadData();
|
||||
}
|
||||
|
||||
protected async Task ForceReloadPage(int newNum)
|
||||
protected void ForceReloadPage(int newNum)
|
||||
{
|
||||
currPage = newNum;
|
||||
await reloadData();
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
@@ -137,6 +162,15 @@ namespace MP.Stats.Pages
|
||||
await reloadData();
|
||||
}
|
||||
|
||||
protected async Task ToggleChart(bool doShow)
|
||||
{
|
||||
ShowCharts = !ShowCharts;
|
||||
if (ShowCharts)
|
||||
{
|
||||
await reloadData();
|
||||
}
|
||||
}
|
||||
|
||||
protected async Task UpdateData()
|
||||
{
|
||||
currRecord = null;
|
||||
|
||||
Reference in New Issue
Block a user