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

Setup preliminare classi oggetti ChartJs OK!

Browse Source
This commit is contained in:
Samuele Locatelli
2022-01-14 17:03:11 +01:00
parent 46326944b1
commit b4e7cd18cd
24 changed files with 17464 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GPW.CORE.UI/Components/Chart.razor
+120 -13
View File
@@ -5,8 +5,11 @@
@code {
public enum ChartType
{
Nd,
Pie,
Bar
Bar,
Hist,
TS
}
[Parameter]
@@ -18,6 +21,9 @@
[Parameter]
public string[] Data { get; set; }
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS{ get; set; }
[Parameter]
public string[] BackgroundColor { get; set; }
@@ -26,7 +32,31 @@
protected override async Task OnAfterRenderAsync(bool firstRender)
{
// Here we create an anonymous type with all the options
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
{
@@ -34,26 +64,103 @@
Options = new
{
Responsive = true,
//Scales = new
//{
// YAxes = new[]
// {
// new { Ticks = new {
// BeginAtZero=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);
}
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 JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}
GPW.CORE.UI/Components/ChartHist.razor
+69
View File
@@ -0,0 +1,69 @@
@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)
{
// 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
{
display = true,
ticks = new
{
beginAtZero = true,
maxTicksLimit = 10
}
},
animation = new
{
duration = 100
}
}
},
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
+70
View File
@@ -0,0 +1,70 @@
@inject IJSRuntime JSRuntime
<canvas id="@Id"></canvas>
@code {
[Parameter]
public string Id { get; set; } = "MyTs";
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS { get; set; }
[Parameter]
public string lineColor { get; set; }
[Parameter]
public string backColor { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender)
{
// 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 = new
{
duration = 100
}
}
},
data = new
{
datasets = new[]
{
new
{
data = DataTS,
borderColor= lineColor,
backgroundColor= backColor,
lineTension= 0,
stepped= true,
label= "Temperatura Rilevata"
}
}
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}
}