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

Merge branch 'release/AddChartJsOnMaster02'

Browse Source
This commit is contained in:
Samuele Locatelli
2023-06-29 17:56:25 +02:00
parent d0f0c6e495 add63946e1
commit bb73b26dcd
10 changed files with 173 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
EgwCoreLib.BlazorTest/Pages/TestCompo.razor
+63 -17
View File
@@ -6,7 +6,7 @@
<h3>TestCompo</h3>
@*<div class="row">
<div class="row">
<div class="col-6">
@if (periodo != null)
{
@@ -18,21 +18,32 @@
<div class="col-6">
<PeriodoSel E_PeriodoSel="setPeriodo" CurrPeriodo="@periodo"></PeriodoSel>
</div>
</div>*@
</div>
<Doughnut Type="@Doughnut.ChartType.Doughnut" Data="@Data.ToArray()" BackgroundColor="@colors"></Doughnut>
<div class="row" style="max-height: 30rem;">
<div class="col-2">
<Doughnut Id="00" Type="@Doughnut.ChartType.Doughnut" Data="@SimData()" BackgroundColor="@colors"></Doughnut>
</div>
<div class="col-4">
<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-4">
<ChartHist Id="02" Data="@histData(2)" Labels="@histLabel(2)" LineColor="rgb(173, 7, 236)" BackColor="rgba(223,107, 255, 0.5)" ChartLabel="Ore 02"></ChartHist>
</div>
<div class="col-2">
<Doughnut Id="03" Type="@Doughnut.ChartType.Doughnut" Data="@SimData()" BackgroundColor="@colors"></Doughnut>
</div>
</div>
@code {
#if false
protected DtUtils.Periodo? periodo { get; set; } = new DtUtils.Periodo(DtUtils.PeriodSet.ThisTrim);
protected async Task setPeriodo(DtUtils.Periodo newPeriodo)
{
await Task.Delay(1);
periodo = newPeriodo;
await Task.Delay(1);
periodo = newPeriodo;
}
#endif
public List<DoughnutStyling> colors = new List<DoughnutStyling>();
@@ -51,19 +62,54 @@
await Task.Delay(1);
}
protected double[] SimData()
{
List<double> answ = new List<double>();
double currColor = 0;
for (int i = 0; i < 10; i++)
{
currColor = (double)(rnd.Next(10, 100)) / 10;
answ.Add(currColor);
if(currColor>7)
{
colors.Add(new DoughnutStyling("#28FF69", "ccc"));
}
else if (currColor > 3)
{
colors.Add(new DoughnutStyling("orange", "ccc"));
}
else
{
colors.Add(new DoughnutStyling("red", "ccc"));
}
}
return answ.ToArray();
}
protected async Task ReloadData()
{
Data.Clear();
Labels.Clear();
colors.Clear();
for (int x = 0; x < 5; x++)
{
Data.Add(x);
Labels.Add($"test n#: {x} - {x}min");
colors.Add(new DoughnutStyling("orange", "ccc"));
colors.Add(new DoughnutStyling("#2874A6", "ccc"));
}
await Task.Delay(1);
}
protected Random rnd = new Random();
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
-1
View File
@@ -1,5 +1,4 @@
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime
<canvas id="@Id"></canvas>
EgwCoreLib.Razor/ChartHist.razor.cs
+28 -8
View File
@@ -8,10 +8,13 @@ namespace EgwCoreLib.Razor
#region Public Properties
[Parameter]
public string BackColor { get; set; } = "";
public bool AddSlash { get; set; } = false;
[Parameter]
public string TextColor { get; set; } = "";
public int AnimationTime { get; set; } = 0;
[Parameter]
public string BackColor { get; set; } = "";
[Parameter]
public string ChartLabel { get; set; } = "";
@@ -20,7 +23,10 @@ namespace EgwCoreLib.Razor
public string[]? Data { get; set; }
[Parameter]
public string Id { get; set; } = "MyHist";
public string GridColor { get; set; } = "";
[Parameter]
public string Id { get; set; } = "000";
[Parameter]
public string[]? Labels { get; set; }
@@ -29,10 +35,7 @@ namespace EgwCoreLib.Razor
public string LineColor { get; set; } = "";
[Parameter]
public string GridColor { get; set; } = "";
[Parameter]
public int AnimationTime { get; set; } = 0;
public string TextColor { get; set; } = "";
#endregion Public Properties
@@ -40,6 +43,13 @@ namespace EgwCoreLib.Razor
protected override async Task OnAfterRenderAsync(bool firstRender)
{
string jsPath = "./_content/EgwCoreLib.Razor/ChartHist.razor.js";
if (AddSlash)
{
jsPath = "/." + jsPath;
}
module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", jsPath);
await Task.Delay(50);
await renderChart();
}
@@ -59,7 +69,8 @@ namespace EgwCoreLib.Razor
type = "bar",
options = new
{
responsive = true,
Responsive = true,
MaintainAspectRatio = false,
scales = new
{
yAxes = new
@@ -128,5 +139,14 @@ namespace EgwCoreLib.Razor
}
#endregion Protected Methods
#region Private Properties
[Inject]
private IJSRuntime JSRuntime { get; set; } = null!;
private IJSObjectReference module { get; set; } = null!;
#endregion Private Properties
}
}
EgwCoreLib.Razor/ChartHist.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['myChart' + id] instanceof Chart) {
window['myChart' + id].destroy();
window['myChart' + id] = new Chart(ctx, config);
}
else {
window['myChart' + id] = new Chart(ctx, config);
}
}
EgwCoreLib.Razor/ChartTS.razor
-1
View File
@@ -1,5 +1,4 @@
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime
<canvas id="@Id"></canvas>
EgwCoreLib.Razor/ChartTS.razor.cs
+36 -24
View File
@@ -1,12 +1,6 @@
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
using EgwCoreLib.Razor.Data;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace EgwCoreLib.Razor
{
@@ -14,28 +8,33 @@ namespace EgwCoreLib.Razor
{
#region Public Properties
[Parameter]
public bool AddSlash { get; set; } = false;
[Parameter]
public int AnimationTime { get; set; } = 0;
[Parameter]
public string BackColor { get; set; } = "";
[Parameter]
public string TextColor { get; set; } = "";
[Parameter]
public string GridColor { get; set; } = "";
[Parameter]
public string ChartLabel { get; set; } = "";
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS { get; set; } = null!;
[Parameter]
public string GridColor { get; set; } = "";
[Parameter]
public string Id { get; set; } = "MyTs";
[Parameter]
public string LineColor { get; set; } = "";
[Parameter]
public string TextColor { get; set; } = "";
#endregion Public Properties
#region Protected Methods
@@ -43,27 +42,30 @@ namespace EgwCoreLib.Razor
/// <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
/// 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>
/// <param name="firstRender"></param>
/// <returns></returns>
protected override async Task OnAfterRenderAsync(bool firstRender)
{
string jsPath = "./_content/EgwCoreLib.Razor/ChartHist.razor.js";
if (AddSlash)
{
jsPath = "/." + jsPath;
}
module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", jsPath);
await Task.Delay(50);
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
/// 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>
/// <param name="firstRender"></param>
/// <returns></returns>
protected async Task renderChart()
{
@@ -73,7 +75,8 @@ namespace EgwCoreLib.Razor
type = "line",
options = new
{
responsive = true,
Responsive = true,
MaintainAspectRatio = false,
scales = new
{
yAxes = new
@@ -141,5 +144,14 @@ namespace EgwCoreLib.Razor
}
#endregion Protected Methods
#region Private Properties
[Inject]
private IJSRuntime JSRuntime { get; set; } = null!;
private IJSObjectReference module { get; set; } = null!;
#endregion Private Properties
}
}
EgwCoreLib.Razor/ChartTS.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['myChart' + id] instanceof Chart) {
window['myChart' + id].destroy();
window['myChart' + id] = new Chart(ctx, config);
}
else {
window['myChart' + id] = new Chart(ctx, config);
}
}
EgwCoreLib.Razor/Doughnut.razor
+8 -6
View File
@@ -16,8 +16,8 @@
Doughnut
}
//[Parameter]
public string Id { get; set; } = "myChart";
[Parameter]
public string Id { get; set; } = "000";
[Parameter]
public ChartType Type { get; set; }
@@ -53,16 +53,18 @@
Options = new
{
Responsive = true,
MaintainAspectRatio = false
},
Data = new
{
Datasets = new[]
{
new { Data = Data, BackgroundColor = BackgroundColor.Select(x=>x.color), borderColor = BackgroundColor.Select(x=>x.border), borderWidth= 0, offset= 1, borderRadius = 0
}
},
new { Data = Data, BackgroundColor = BackgroundColor.Select(x=>x.color), borderColor = BackgroundColor.Select(x=>x.border), borderWidth= 0, offset= 1, borderRadius = 0 }
},
Labels = Labels
}
},
Responsive = true,
MaintainAspectRatio = false
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
EgwCoreLib.Razor/Doughnut.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'] instanceof Chart) {
window['myChart'].destroy();
window['myChart'] = new Chart(ctx, config);
if (window['myChart' + id] instanceof Chart) {
window['myChart' + id].destroy();
window['myChart' + id] = new Chart(ctx, config);
}
else {
window['myChart'] = new Chart(ctx, config);
window['myChart' + id] = new Chart(ctx, config);
}
}
EgwCoreLib.Razor/EgwCoreLib.Razor.csproj
+10
View File
@@ -29,10 +29,20 @@
</ItemGroup>
<ItemGroup>
<None Remove="ChartHist.razor.js" />
<None Remove="ChartTS.razor.js" />
<None Remove="Doughnut.razor.js" />
</ItemGroup>
<ItemGroup>
<Content Include="ChartTS.razor.js">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
<Content Include="ChartHist.razor.js">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</Content>
<Content Include="Doughnut.razor.js">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>