Spostato grafici in area componenti condivisi
This commit is contained in:
Samuele Locatelli
@@ -0,0 +1,64 @@
|
||||
@using Microsoft.JSInterop
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<canvas id="@Id"></canvas>
|
||||
|
||||
@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
|
||||
}
|
||||
},
|
||||
Animation = false
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[]
|
||||
{
|
||||
new { data = Data, backgroundColor = BackgroundColor}
|
||||
},
|
||||
labels = Labels
|
||||
}
|
||||
};
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
@using Microsoft.JSInterop
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<canvas id="@Id"></canvas>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter]
|
||||
public string Id { get; set; } = "MyHist";
|
||||
|
||||
[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
|
||||
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
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[]
|
||||
{
|
||||
new
|
||||
{
|
||||
data = Data,
|
||||
borderColor = lineColor,
|
||||
backgroundColor = backColor,
|
||||
borderWidth = 1,
|
||||
label= "Freq. Osservate"
|
||||
}
|
||||
},
|
||||
labels = Labels
|
||||
}
|
||||
};
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
@using Microsoft.JSInterop
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<canvas id="@Id"></canvas>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter]
|
||||
public string Id { get; set; } = "MyTs";
|
||||
|
||||
[Parameter]
|
||||
public List<chartJsData.chartJsTSerie> DataTS { get; set; } = null!;
|
||||
|
||||
[Parameter]
|
||||
public string lineColor { get; set; } = "";
|
||||
[Parameter]
|
||||
public string backColor { get; set; } = "";
|
||||
|
||||
/// <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 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
|
||||
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
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[]
|
||||
{
|
||||
new
|
||||
{
|
||||
data = DataTS,
|
||||
borderColor= lineColor,
|
||||
backgroundColor= backColor,
|
||||
lineTension= 0,
|
||||
stepped= true,
|
||||
label= "Temperatura Rilevata"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
namespace GPW.CORE.Comp
|
||||
{
|
||||
public class chartJsData
|
||||
{
|
||||
public class chartJsTSerie
|
||||
{
|
||||
public DateTime x { get; set; }
|
||||
public decimal y { get; set; }
|
||||
}
|
||||
public class chartJsXY
|
||||
{
|
||||
public decimal x { get; set; }
|
||||
public decimal y { get; set; }
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,4 @@
|
||||
using GPW.CORE.Comp;
|
||||
using GPW.CORE.Data.DbModels;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
|
||||
@@ -27,7 +27,14 @@
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-primary" title="Scambio IN/OUT" @onclick="() => ScambioInOut(item)"><i class="fas fa-exchange-alt"></i></button>
|
||||
@if (EnableEdit)
|
||||
{
|
||||
<button class="btn btn-sm btn-primary" title="Scambio IN/OUT" @onclick="() => ScambioInOut(item)"><i class="fas fa-exchange-alt"></i></button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<button class="btn btn-sm btn-secondary" title="Scambio IN/OUT" disabled><i class="fas fa-exchange-alt"></i></button>
|
||||
}
|
||||
</td>
|
||||
<td title="Uscita">
|
||||
@if (@item.Entrata == false)
|
||||
@@ -36,9 +43,15 @@
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-danger" @onclick="() => Delete(item)"><i class="fas fa-trash-alt"></i></button>
|
||||
@if (EnableEdit)
|
||||
{
|
||||
<button class="btn btn-sm btn-danger" @onclick="() => Delete(item)"><i class="fas fa-trash-alt"></i></button>
|
||||
}
|
||||
else
|
||||
{
|
||||
<button class="btn btn-sm btn-secondary" disabled><i class="fas fa-trash-alt"></i></button>
|
||||
}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
@@ -65,6 +78,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
[Parameter]
|
||||
public bool EnableEdit { get; set; } = false;
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<TimbratureModel> ReqDelete { get; set; }
|
||||
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
<div class="card-body p-0">
|
||||
@if (ListTimbRich != null)
|
||||
{
|
||||
<TimbList ListTimb="@ListTimbRich" ReqDelete="DoDelete" ReqUpdate="DoUpdate"></TimbList>
|
||||
<TimbList ListTimb="@ListTimbRich" ReqDelete="DoDelete" ReqUpdate="DoUpdate" EnableEdit=true></TimbList>
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@@ -7,8 +7,15 @@
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Compile Remove="chartJsData.cs" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Content Remove="compilerconfig.json" />
|
||||
<Content Remove="Components\Chart.razor" />
|
||||
<Content Remove="Components\ChartHist.razor" />
|
||||
<Content Remove="Components\ChartTS.razor" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
||||
@@ -16,6 +16,7 @@ using GPW.CORE.WRKLOG.Shared;
|
||||
using GPW.CORE.WRKLOG.Components;
|
||||
using GPW.CORE.Data.DbModels;
|
||||
using GPW.CORE.WRKLOG.Data;
|
||||
using GPW.CORE.Comp;
|
||||
|
||||
namespace GPW.CORE.WRKLOG.Pages
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user