Egalware/GPW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix display assi x chartJs

Browse Source
This commit is contained in:
Samuele Locatelli
2022-01-14 17:51:33 +01:00
parent b4e7cd18cd
commit a44c24eb13
6 changed files with 136 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GPW.CORE.UI/Components/Chart.razor
+14 -118
View File
@@ -5,11 +5,8 @@
@code {
public enum ChartType
{
Nd,
Pie,
Bar,
Hist,
TS
Bar
}
[Parameter]
@@ -21,9 +18,6 @@
[Parameter]
public string[] Data { get; set; }
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS{ get; set; }
[Parameter]
public string[] BackgroundColor { get; set; }
@@ -32,105 +26,7 @@
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender)
{
switch (Type)
{
case ChartType.Hist:
await InitHist();
break;
case ChartType.TS:
await InitTs();
break;
case ChartType.Nd:
case ChartType.Pie:
case ChartType.Bar:
default:
await InitDefault();
break;
}
}
}
protected async Task InitHist()
{
// 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
{
display = true,
}
}
},
Data = new
{
Datasets = new[]
{
new { Data = Data, BackgroundColor = BackgroundColor}
},
Labels = Labels
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
protected async Task InitTs()
{
// Here we create an anonymous type with all the options
// that need to be sent to 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 = new
{
duration = 100
}
}
},
Data = new
{
Datasets = new[]
{
new
{
Data = DataTS,
borderColor= "rgb(7, 173, 236)",
lineTension= 0,
stepped= true,
label= "Temperatura Rilevata"
}
}
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
await InitDefault();
}
protected async Task InitDefault()
@@ -139,25 +35,25 @@
// that need to be sent to Chart.js
var config = new
{
Type = Type.ToString().ToLower(),
Options = new
type = Type.ToString().ToLower(),
options = new
{
Responsive = true,
responsive = true,
scales = new
{
//yAxes = new
//{
// suggestedMin = 0
//}
yAxes = new
{
suggestedMin = 0
}
}
},
Data = new
data = new
{
Datasets = new[]
{
new { Data = Data, BackgroundColor = BackgroundColor}
datasets = new[]
{
new { data = Data, backgroundColor = BackgroundColor}
},
Labels = Labels
labels = Labels
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
GPW.CORE.UI/Components/ChartHist.razor
+49 -36
View File
@@ -20,50 +20,63 @@
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!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
{
// creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js
var config = new
type = "bar",
options = new
{
type = "bar",
options = new
responsive = true,
scales = new
{
Responsive = true,
scales = new
yAxes = new
{
yAxes = new
suggestedMin = 0,
display = true,
ticks = new
{
display = true,
ticks = new
{
beginAtZero = true,
maxTicksLimit = 10
}
},
animation = new
{
duration = 100
beginAtZero = true,
maxTicksLimit = 10
}
}
},
data = new
{
datasets = new[]
{
new
{
data = Data,
borderColor = lineColor,
backgroundColor = backColor,
borderWidth = 1,
label= "Freq. Osservate"
}
},
labels = Labels
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
},
data = new
{
datasets = new[]
{
new
{
data = Data,
borderColor = lineColor,
backgroundColor = backColor,
borderWidth = 1,
label= "Freq. Osservate"
}
},
labels = Labels
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}
GPW.CORE.UI/Components/ChartTS.razor
+60 -40
View File
@@ -15,56 +15,76 @@
[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)
//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
{
// creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js
var config = new
type = "line",
options = new
{
type = "line",
options = new
responsive = true,
scales = new
{
Responsive = true,
scales = new
yAxes = new
{
yAxes = new
display = true,
ticks = new
{
display = true,
ticks = new
{
maxTicksLimit = 10
}
},
xAxes = new
{
type = "timeseries",
distribution = "linear",
},
animation = new
{
duration = 100
maxTicksLimit = 10
}
}
},
data = new
{
datasets = new[]
},
xAxes = new
{
new
{
data = DataTS,
borderColor= lineColor,
backgroundColor= backColor,
lineTension= 0,
stepped= true,
label= "Temperatura Rilevata"
}
type = "timeseries",
distribution = "linear",
}
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
},
data = new
{
datasets = new[]
{
new
{
data = DataTS,
borderColor= lineColor,
backgroundColor= backColor,
lineTension= 0,
stepped= true,
label= "Temperatura Rilevata"
}
}
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}
GPW.CORE.UI/Components/DayCheckEditor.razor
+6 -2
View File
@@ -18,10 +18,14 @@
</div>
<div class="card-body text-center">
<div class="row">
<div class="col-6">
<div class="col-4">
gestione temperature rilevate + insert quotidiano <b>@TargetDate.ToShortDateString()</b>
</div>
<div class="col-6">
<div class="col-4">
<ChartHist Id="FreqTemp1" Data="@(new[] { "5", "8", "10", "6", "4", "3" })" Labels="@(new[] { "35.8", "35.9", "36.0", "36.1", "36.2", "36.3" })" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.5)"></ChartHist>
<ChartHist Id="FreqTemp2" Data="@(new[] { "5", "8", "10", "6", "4", "3" })" Labels="@(new[] { "35.8", "35.9", "36.0", "36.1", "36.2", "36.3" })" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.5)"></ChartHist>
</div>
<div class="col-4">
elenco ultimi check VC19...
</div>
</div>
GPW.CORE.UI/Pages/Test.razor
+1 -1
View File
@@ -13,7 +13,7 @@
<ChartHist Id="FreqTemp" Data="@(new[] { "5", "8", "10", "6", "4", "3" })" Labels="@(new[] { "35.8", "35.9", "36.0", "36.1", "36.2", "36.3" })" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.5)"></ChartHist>
</div>
<div class="col-4">
<Chart Id="Hist" Type="@Chart.ChartType.Bar" Data="@(new[] { "10", "9" })" BackgroundColor="@(new[] { "yellow","red"})" Labels="@(new[] { "Fail","Ok"})"></Chart>
<Chart Id="Bar" Type="@Chart.ChartType.Bar" Data="@(new[] { "10", "9", "12", "8", "14" })" BackgroundColor="@(new[] { "yellow","red", "green", "blue"})" Labels="@(new[] { "S01","S02","S03","S04"})"></Chart>
</div>
</div>
GPW.CORE.UI/wwwroot/lib/chartBoot.js
+6 -7
View File
@@ -2,17 +2,16 @@
///Setup del chart desiderato con id univoco
window.setup = (id, config) => {
var ctx = document.getElementById(id).getContext('2d');
//console.log("Calling setup...");
//let currentDate = new Date();
//console.log(currentDate + " - Calling setup...");
//console.log(id);
if (window['chart-' + id] instanceof Chart) {
//window.myChart.destroy();
window['chart-' + id].destroy();
//console.log("Chart destroyed!");
window['chart-' + id].update();
//console.log("Chart " + id + " updated!");
}
else {
window['chart-' + id] = new Chart(ctx, config);
//console.log("Chart " + id + " created!");
}
window['chart-' + id] = new Chart(ctx, config);
//console.log("Chart " + id + " created!");
//console.log(window['chart-' + id]);
}