diff --git a/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor
new file mode 100644
index 0000000..e3d24db
--- /dev/null
+++ b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor
@@ -0,0 +1,19 @@
+@page "/TestMultiLine"
+
+@if (currDS == null)
+{
+
+}
+else
+{
+
TestMultiLine
+
+}
+
diff --git a/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor.cs b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor.cs
new file mode 100644
index 0000000..189626a
--- /dev/null
+++ b/EgwCoreLib.BlazorTest/Pages/TestMultiLine.razor.cs
@@ -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? currDS { get; set; } = null;
+
+ protected List? ChLabels { get; set; } = null;
+
+ protected Random rnd = new Random();
+
+ private async Task setupData()
+ {
+ currDS = null;
+ List currDemo = new List();
+ ChLabels = new List();
+ 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 simData = new List();
+ 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 answ = new List();
+ for (int i = 0; i < 50; i++)
+ {
+ answ.Add($"LBL_{i:00}");
+ }
+ return answ.ToArray();
+ }
+ protected string[] histData(int num)
+ {
+ List answ = new List();
+ for (int i = 0; i < 50; i++)
+ {
+ answ.Add($"{(double)(rnd.Next(10, 100)) / 10 + i}");
+ }
+ return answ.ToArray();
+ }
+ }
+}
\ No newline at end of file
diff --git a/EgwCoreLib.Razor/ChartHist.razor.cs b/EgwCoreLib.Razor/ChartHist.razor.cs
index f905623..03e09b4 100644
--- a/EgwCoreLib.Razor/ChartHist.razor.cs
+++ b/EgwCoreLib.Razor/ChartHist.razor.cs
@@ -120,7 +120,8 @@ namespace EgwCoreLib.Razor
},
data = new
{
- datasets = new[]{
+ datasets = new[]
+ {
new
{
data = Data,
diff --git a/EgwCoreLib.Razor/ChartHist.razor.js b/EgwCoreLib.Razor/ChartHist.razor.js
index 2e45682..1cd8e37 100644
--- a/EgwCoreLib.Razor/ChartHist.razor.js
+++ b/EgwCoreLib.Razor/ChartHist.razor.js
@@ -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);
}
-
}
\ No newline at end of file
diff --git a/EgwCoreLib.Razor/ChartMultiLine.razor b/EgwCoreLib.Razor/ChartMultiLine.razor
new file mode 100644
index 0000000..60523c5
--- /dev/null
+++ b/EgwCoreLib.Razor/ChartMultiLine.razor
@@ -0,0 +1,4 @@
+@using Microsoft.JSInterop
+
+
+
diff --git a/EgwCoreLib.Razor/ChartMultiLine.razor.cs b/EgwCoreLib.Razor/ChartMultiLine.razor.cs
new file mode 100644
index 0000000..9b03066
--- /dev/null
+++ b/EgwCoreLib.Razor/ChartMultiLine.razor.cs
@@ -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 DataSets { get; set; } = null!;
+
+ [Parameter]
+ public string GridColor { get; set; } = "";
+
+ [Parameter]
+ public string Id { get; set; } = "myMLP";
+
+ [Parameter]
+ public List ChartLabels { get; set; } = new List();
+
+ [Parameter]
+ public string TextColor { get; set; } = "";
+
+ #endregion Public Properties
+
+ #region Protected Methods
+
+ ///
+ /// 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
+ ///
+ ///
+ ///
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ string jsPath = "./_content/EgwCoreLib.Razor/ChartMultiLine.razor.js";
+ if (AddSlash)
+ {
+ jsPath = "/." + jsPath;
+ }
+ module = await JSRuntime.InvokeAsync("import", jsPath);
+ await Task.Delay(250);
+ await renderChart();
+ }
+
+ ///
+ /// 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
+ ///
+ ///
+ ///
+ protected async Task renderChart()
+ {
+ List dynData = new List();
+ 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
+ }
+}
\ No newline at end of file
diff --git a/EgwCoreLib.Razor/ChartMultiLine.razor.js b/EgwCoreLib.Razor/ChartMultiLine.razor.js
new file mode 100644
index 0000000..d7c7021
--- /dev/null
+++ b/EgwCoreLib.Razor/ChartMultiLine.razor.js
@@ -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);
+ }
+
+}
\ No newline at end of file
diff --git a/EgwCoreLib.Razor/ChartTS.razor.js b/EgwCoreLib.Razor/ChartTS.razor.js
index 2e45682..6a03d1b 100644
--- a/EgwCoreLib.Razor/ChartTS.razor.js
+++ b/EgwCoreLib.Razor/ChartTS.razor.js
@@ -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);
}
}
\ No newline at end of file
diff --git a/EgwCoreLib.Razor/Data/chartJsData.cs b/EgwCoreLib.Razor/Data/chartJsData.cs
index faa9976..9146d94 100644
--- a/EgwCoreLib.Razor/Data/chartJsData.cs
+++ b/EgwCoreLib.Razor/Data/chartJsData.cs
@@ -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 data { get; set; } = new List();
+ 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 data { get; set; } = new List();
+ }
}
}
diff --git a/EgwCoreLib.Razor/EgwCoreLib.Razor.csproj b/EgwCoreLib.Razor/EgwCoreLib.Razor.csproj
index 8bd3f95..9a99e29 100644
--- a/EgwCoreLib.Razor/EgwCoreLib.Razor.csproj
+++ b/EgwCoreLib.Razor/EgwCoreLib.Razor.csproj
@@ -30,11 +30,16 @@
+
+
+ true
+ PreserveNewest
+
true
PreserveNewest