Aggiunta precondizioni e componenti x ChartJS
This commit is contained in:
Samuele Locatelli
@@ -0,0 +1,133 @@
|
||||
@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 List<double> Data { get; set; } = new List<double>();
|
||||
|
||||
[Parameter]
|
||||
public List<string> Labels { get; set; } = new List<string>();
|
||||
|
||||
[Parameter]
|
||||
public double AspRatio { get; set; } = 0;
|
||||
|
||||
[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>
|
||||
/// <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
|
||||
}
|
||||
}
|
||||
},
|
||||
Animation = false,
|
||||
AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}"
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
Animation = false,
|
||||
AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}"
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[] {
|
||||
new {
|
||||
data = Data,
|
||||
borderColor = lineColor,
|
||||
backgroundColor = backColor,
|
||||
borderWidth = 1,
|
||||
label = Legenda
|
||||
}
|
||||
},
|
||||
labels = Labels
|
||||
}
|
||||
};
|
||||
await Task.Delay(50);
|
||||
if (Horizontal)
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, configHor);
|
||||
}
|
||||
else
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@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
|
||||
}
|
||||
}
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[]
|
||||
{
|
||||
new { data = Data, backgroundColor = BackgroundColor}
|
||||
},
|
||||
labels = Labels
|
||||
}
|
||||
};
|
||||
await Task.Delay(50);
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
@using MP.Data
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<canvas id="@Id"></canvas>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter]
|
||||
public string Id { get; set; } = "MyTs";
|
||||
|
||||
[Parameter]
|
||||
public List<string> Titles { get; set; } = new List<string>() { "Demo Line" };
|
||||
|
||||
[Parameter]
|
||||
public List<List<chartJsData.chartJsTSerie>> DataTSList { 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 bool Stacked { 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();
|
||||
}
|
||||
|
||||
/// <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()
|
||||
{
|
||||
int i = 0;
|
||||
// preparo lista di dati...
|
||||
var dataSetsList = DataTSList.Select(dTS => new
|
||||
{
|
||||
data = dTS,
|
||||
borderColor = lineColor[i],
|
||||
backgroundColor = backColor,
|
||||
lineTension = lTens,
|
||||
stepped = Stepped,
|
||||
label = Titles[i++]
|
||||
}).ToList();
|
||||
|
||||
// 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
|
||||
{
|
||||
stacked = Stacked,
|
||||
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 = dataSetsList
|
||||
}
|
||||
};
|
||||
await Task.Delay(50);
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
@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 Pie Chart";
|
||||
|
||||
[Parameter]
|
||||
public string LegendPos { get; set; } = "right";
|
||||
|
||||
[Parameter]
|
||||
public List<double> Data { get; set; } = new List<double>();
|
||||
|
||||
[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;
|
||||
|
||||
/// <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();
|
||||
}
|
||||
|
||||
/// <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 = "pie",
|
||||
options = new
|
||||
{
|
||||
responsive = true,
|
||||
plugins = new
|
||||
{
|
||||
legend = new
|
||||
{
|
||||
position = LegendPos
|
||||
},
|
||||
title = new
|
||||
{
|
||||
display = true,
|
||||
text = Title
|
||||
}
|
||||
},
|
||||
Animation = false,
|
||||
AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}",
|
||||
HoverBorderWidth = 3
|
||||
},
|
||||
data = new
|
||||
{
|
||||
labels = Labels.ToArray(),
|
||||
datasets = new[]
|
||||
{
|
||||
new
|
||||
{
|
||||
data = Data,
|
||||
borderColor= lineColor,
|
||||
backgroundColor= backColor
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
await Task.Delay(50);
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
@using MP.Data
|
||||
@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 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;
|
||||
|
||||
/// <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();
|
||||
}
|
||||
|
||||
/// <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
|
||||
{
|
||||
display = true,
|
||||
ticks = new
|
||||
{
|
||||
maxTicksLimit = 10
|
||||
}
|
||||
},
|
||||
xAxes = new
|
||||
{
|
||||
type = "timeseries",
|
||||
distribution = "linear",
|
||||
}
|
||||
},
|
||||
Animation = false,
|
||||
AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}"
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[]
|
||||
{
|
||||
new
|
||||
{
|
||||
data = DataTS,
|
||||
borderColor= lineColor,
|
||||
backgroundColor= backColor,
|
||||
lineTension= 0,
|
||||
stepped= true,
|
||||
label= "Temperatura Rilevata"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
await Task.Delay(50);
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user