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

Aggiunta componente multiline x ChartJs + refresh

Browse Source
This commit is contained in:
Samuele Locatelli
2023-07-25 15:18:38 +02:00
parent 59c2ad7929
commit 8e13de8d1e
10 changed files with 307 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor
+19
View File
@@ -0,0 +1,19 @@
@page "/TestMultiLine"
@if (currDS == null)
{
<LoadingData></LoadingData>
}
else
{
<h3>TestMultiLine</h3>
<div class="row" style="height: 500px;">
<div class="col-6">
<ChartHist Id="01" Data="@histData(1)" Labels="@histLabel(1)" LineColor="rgb(7, 173, 236)" BackColor="rgba(107, 223, 255, 0.5)" ChartLabel="Ore 01"></ChartHist>
</div>
<div class="col-6">
<ChartMultiLine DataSets="currDS" ChartLabels="ChLabels"></ChartMultiLine>
</div>
</div>
}
EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor.cs
+97
View File
@@ -0,0 +1,97 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Net.Http;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.JSInterop;
using EgwCoreLib.BlazorTest;
using EgwCoreLib.BlazorTest.Components;
using EgwCoreLib.BlazorTest.Shared;
using EgwCoreLib.Razor;
using EgwCoreLib.Razor.Data;
using static EgwCoreLib.Razor.Data.chartJsData;
namespace EgwCoreLib.BlazorTest.Pages
{
public partial class TestMultiLine
{
protected override async Task OnInitializedAsync()
{
currDS = null;
await Task.Delay(200);
await setupData();
}
protected List<chartJsData.chartJsDataSetXY>? currDS { get; set; } = null;
protected List<string>? ChLabels { get; set; } = null;
protected Random rnd = new Random();
private async Task setupData()
{
currDS = null;
List<chartJsData.chartJsDataSetXY> currDemo = new List<chartJsData.chartJsDataSetXY>();
ChLabels = new List<string>();
int numMesi = 6;
for (int iMese = 1; iMese <= numMesi; iMese++)
{
ChLabels.Add($"{iMese:00}");
}
for (int iSerie = 0; iSerie < 4; iSerie++)
{
// simulo 12 mesi...
List<chartJsXY> simData = new List<chartJsXY>();
for (int iMese = 1; iMese <= numMesi; iMese++)
{
simData.Add(new chartJsXY() { x = iMese, y = iMese + rnd.Next(-4, 4) });
}
int rCol = rnd.Next(0, 155);
int gCol = rnd.Next(0, 155);
int bCol = rnd.Next(0, 100);
chartJsData.chartJsDataSetXY singleData = new chartJsData.chartJsDataSetXY()
{
label = $"Data_{iSerie:00}",
data = simData,
borderColor = $"#{10 + rCol:X2}{30 + gCol:X2}{100 + bCol:X2}",
backgroundColor = $"rgba({60 + rCol},{80 + gCol},{155 + bCol},0.3)",
lineTension = 0,
stepped = iSerie % 5 == 0,
fill = iSerie % 3 == 0 ? "start" : "false"
};
// aggiungo
currDemo.Add(singleData);
}
currDS = currDemo;
await Task.Delay(10);
}
protected string[] histLabel(int num)
{
List<string> answ = new List<string>();
for (int i = 0; i < 50; i++)
{
answ.Add($"LBL_{i:00}");
}
return answ.ToArray();
}
protected string[] histData(int num)
{
List<string> answ = new List<string>();
for (int i = 0; i < 50; i++)
{
answ.Add($"{(double)(rnd.Next(10, 100)) / 10 + i}");
}
return answ.ToArray();
}
}
}
EgwCoreLib.Razor/ChartHist.razor.cs
+2 -1
View File
@@ -120,7 +120,8 @@ namespace EgwCoreLib.Razor
},
data = new
{
datasets = new[]{
datasets = new[]
{
new
{
data = Data,
EgwCoreLib.Razor/ChartHist.razor.js
+4 -5
View File
@@ -1,12 +1,11 @@
///Setup del chart desiderato con id univoco
window.setup = (id, config) => {
var ctx = document.getElementById(id);
if (window['myChart' + id] instanceof Chart) {
window['myChart' + id].destroy();
window['myChart' + id] = new Chart(ctx, config);
if (window['histChart' + id] instanceof Chart) {
window['histChart' + id].destroy();
window['histChart' + id] = new Chart(ctx, config);
}
else {
window['myChart' + id] = new Chart(ctx, config);
window['histChart' + id] = new Chart(ctx, config);
}
}
EgwCoreLib.Razor/ChartMultiLine.razor
+4
View File
@@ -0,0 +1,4 @@
@using Microsoft.JSInterop
<canvas id="@Id"></canvas>
EgwCoreLib.Razor/ChartMultiLine.razor.cs
+131
View File
@@ -0,0 +1,131 @@
using EgwCoreLib.Razor.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data;
using System.Reflection.Emit;
namespace EgwCoreLib.Razor
{
public partial class ChartMultiLine
{
#region Public Properties
[Parameter]
public bool AddSlash { get; set; } = false;
[Parameter]
public int AnimationTime { get; set; } = 0;
[Parameter]
public List<chartJsData.chartJsDataSetXY> DataSets { get; set; } = null!;
[Parameter]
public string GridColor { get; set; } = "";
[Parameter]
public string Id { get; set; } = "myMLP";
[Parameter]
public List<string> ChartLabels { get; set; } = new List<string>();
[Parameter]
public string TextColor { get; set; } = "";
#endregion Public Properties
#region Protected Methods
/// <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)
{
string jsPath = "./_content/EgwCoreLib.Razor/ChartMultiLine.razor.js";
if (AddSlash)
{
jsPath = "/." + jsPath;
}
module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", jsPath);
await Task.Delay(250);
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()
{
List<dynamic> dynData = new List<dynamic>();
foreach (var item in DataSets)
{
dynData.Add(new
{
data = item.valY,
label = item.label,
borderColor = item.borderColor,
backgroundColor = item.backgroundColor,
lineTension = item.lineTension,
stepped = item.stepped,
fill = item.fill
});
}
// creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js
var config = new
{
type = "line",
options = new
{
Responsive = true,
MaintainAspectRatio = false,
plugins = new
{
legend = new
{
display = true,
labels = new
{
color = TextColor,
},
},
},
Animation = new
{
Duration = AnimationTime
},
},
data = new
{
datasets = dynData,
labels = ChartLabels
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
#endregion Protected Methods
#region Private Properties
[Inject]
private IJSRuntime JSRuntime { get; set; } = null!;
private IJSObjectReference module { get; set; } = null!;
#endregion Private Properties
}
}
EgwCoreLib.Razor/ChartMultiLine.razor.js
+12
View File
@@ -0,0 +1,12 @@
///Setup del chart desiderato con id univoco
window.setup = (id, config) => {
var ctx = document.getElementById(id);
if (window['mlChart' + id] instanceof Chart) {
window['mlChart' + id].destroy();
window['mlChart' + id] = new Chart(ctx, config);
}
else {
window['mlChart' + id] = new Chart(ctx, config);
}
}
EgwCoreLib.Razor/ChartTS.razor.js
+4 -4
View File
@@ -1,12 +1,12 @@
///Setup del chart desiderato con id univoco
window.setup = (id, config) => {
var ctx = document.getElementById(id);
if (window['myChart' + id] instanceof Chart) {
window['myChart' + id].destroy();
window['myChart' + id] = new Chart(ctx, config);
if (window['tsChart' + id] instanceof Chart) {
window['tsChart' + id].destroy();
window['tsChart' + id] = new Chart(ctx, config);
}
else {
window['myChart' + id] = new Chart(ctx, config);
window['tsChart' + id] = new Chart(ctx, config);
}
}
EgwCoreLib.Razor/Data/chartJsData.cs
+29
View File
@@ -12,5 +12,34 @@
public decimal x { get; set; }
public decimal y { get; set; }
}
public class chartJsDataSetXY
{
public string label { get; set; } = "DataSet00";
public string borderColor { get; set; } = "blue";
public string backgroundColor { get; set; } = "aqua";
public double lineTension { get; set; } = 0;
public bool stepped { get; set; } = false;
public string fill { get; set; } = "false";
public List<chartJsXY> data { get; set; } = new List<chartJsXY>();
public string[] valX
{
get => data.Select(val => $"{val.x}").ToArray();
}
public string[] valY
{
get => data.Select(val => $"{val.y}").ToArray();
}
}
public class chartJsDataSetTS
{
public string label { get; set; } = "DataSet00";
public string borderColor { get; set; } = "blue";
public string backgroundColor { get; set; } = "aqua";
public double lineTension { get; set; } = 0;
public bool stepped { get; set; } = false;
public List<chartJsTSerie> data { get; set; } = new List<chartJsTSerie>();
}
}
}
EgwCoreLib.Razor/EgwCoreLib.Razor.csproj
+5
View File
@@ -30,11 +30,16 @@
<ItemGroup>
<None Remove="ChartHist.razor.js" />
<None Remove="ChartTS - Copy.razor.js" />
<None Remove="ChartTS.razor.js" />
<None Remove="Doughnut.razor.js" />
</ItemGroup>
<ItemGroup>
<Content Include="ChartMultiLine.razor.js">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
<Content Include="ChartTS.razor.js">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>