Samuele Locatelli
123 lines
3.5 KiB
Plaintext
123 lines
3.5 KiB
Plaintext
@using MP.Data
|
|
@inject IJSRuntime JSRuntime
|
|
|
|
<canvas id="@Id"></canvas>
|
|
|
|
@code {
|
|
|
|
[Parameter]
|
|
public string Id { get; set; } = "MyTs";
|
|
|
|
[Parameter]
|
|
public string Title { get; set; } = "Demo Line";
|
|
|
|
[Parameter]
|
|
public List<chartJsData.chartJsTSerie> DataTS { 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 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;
|
|
|
|
/// <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)
|
|
{
|
|
await renderChart();
|
|
}
|
|
|
|
protected override async Task OnParametersSetAsync()
|
|
{
|
|
// await Task.Delay(100);
|
|
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>
|
|
/// <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
|
|
{
|
|
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);
|
|
}
|
|
} |