Egalware/mapo-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Spostamento org classi chartJs + nuova opzione horiz chart

Browse Source
This commit is contained in:
Samuele Locatelli
2022-02-24 12:09:33 +01:00
parent b760d4fa1a
commit d6c226ae1a
9 changed files with 65 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MP.Stats/Components/ChartJs/BarPlot.razor
+5
View File
@@ -0,0 +1,5 @@
<canvas id="@Id"></canvas>
MP.Stats/Components/ChartJs/BarPlot.razor.cs
+144
View File
@@ -0,0 +1,144 @@
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 MP.Stats;
using MP.Stats.Shared;
namespace MP.Stats.Components.ChartJs
{
public partial class BarPlot
{
[Inject]
IJSRuntime JSRuntime { get; set; }
[Parameter]
public string Id { get; set; } = "MyHist";
[Parameter]
public string Legenda { get; set; } = "Legenda";
[Parameter]
public bool Horizontal { get; set; } = false;
[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)
//{
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, tipo verticale
var config = new
{
type = "bar",
options = new
{
responsive = true,
scales = new
{
yAxes = new
{
suggestedMin = 0,
display = true,
ticks = new
{
beginAtZero = true,
maxTicksLimit = 10
}
}
}
},
data = new
{
datasets = new[] {
new {
data = Data,
borderColor = lineColor,
backgroundColor = backColor,
borderWidth = 1,
label = Legenda
}
},
labels = Labels
}
};
// creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale
var configHor = new
{
type = "bar",
options = new
{
indexAxis = "y",
responsive = true,
scales = new
{
yAxes = new
{
suggestedMin = 0,
display = true,
ticks = new
{
beginAtZero = true,
maxTicksLimit = 10
}
}
}
},
data = new
{
datasets = new[] {
new {
data = Data,
borderColor = lineColor,
backgroundColor = backColor,
borderWidth = 1,
label = Legenda
}
},
labels = Labels
}
};
if (Horizontal)
{
await JSRuntime.InvokeVoidAsync("setup", Id, configHor);
}
else
{
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}
}
}
MP.Stats/Components/ChartJs/Chart.razor
+62
View File
@@ -0,0 +1,62 @@
@inject IJSRuntime JSRuntime
<canvas id="@Id"></canvas>
@code {
public enum ChartType
{
Pie,
Bar
}
[Parameter]
public string Id { get; set; } = "MyChart";
[Parameter]
public ChartType Type { get; set; }
[Parameter]
public string[]? Data { get; set; }
[Parameter]
public string[]? BackgroundColor { get; set; }
[Parameter]
public string[]? Labels { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await InitDefault();
}
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);
}
}
MP.Stats/Components/ChartJs/StepLine.razor
+91
View File
@@ -0,0 +1,91 @@
@using MP.Data
@inject IJSRuntime JSRuntime
<canvas id="@Id"></canvas>
@code {
[Parameter]
public string Id { get; set; } = "MyTs";
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS { get; set; } = null!;
[Parameter]
public string lineColor { get; set; } = "";
[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)
//{
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
{
type = "line",
options = new
{
responsive = true,
scales = new
{
yAxes = new
{
display = true,
ticks = new
{
maxTicksLimit = 10
}
},
xAxes = new
{
type = "timeseries",
distribution = "linear",
}
}
},
data = new
{
datasets = new[]
{
new
{
data = DataTS,
borderColor= lineColor,
backgroundColor= backColor,
lineTension= 0,
stepped= true,
label= "Temperatura Rilevata"
}
}
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}