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

inizio merge gestione Chart senza blazorise

Browse Source
This commit is contained in:
Samuele Locatelli
2022-02-21 18:30:44 +01:00
parent 091d542084
commit 182d3c82f1
15 changed files with 366 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MP-STATS.sln
+2 -2
View File
@@ -1,7 +1,7 @@
Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 16
VisualStudioVersion = 16.0.31229.75
# Visual Studio Version 17
VisualStudioVersion = 17.0.32126.317
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MP.Stats", "MP.Stats\MP.Stats.csproj", "{D9901B50-E61C-400C-B62C-FA060CF72C29}"
EndProject
MP.Data/chartJsData.cs
+31
View File
@@ -0,0 +1,31 @@
using System;
namespace MP.Data
{
public class chartJsData
{
#region Public Classes
public class chartJsTSerie
{
#region Public Properties
public DateTime x { get; set; }
public decimal y { get; set; }
#endregion Public Properties
}
public class chartJsXY
{
#region Public Properties
public decimal x { get; set; }
public decimal y { get; set; }
#endregion Public Properties
}
#endregion Public Classes
}
}
MP.Stats/Components/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/ChartHist.razor
+82
View File
@@ -0,0 +1,82 @@
@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)
//{
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 = "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= "Freq. Osservate"
}
},
labels = Labels
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}
MP.Stats/Components/ChartTS.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);
}
}
MP.Stats/Components/DataPager.razor
+34 -62
View File
@@ -1,57 +1,20 @@
<div class="row">
<div class="col-6 col-lg-10 text-left">
<div class="col-12 col-lg-8 text-left">
<div class="row">
<div class="col-9 small">
<div class="col-12 small">
@if (totalCount > 0)
{
<Pagination>
<PaginationItem>
<PaginationLink Clicked="@HandlePaginationItemClick" Page="1">
<i class="fas fa-angle-double-left"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink Clicked="@HandlePaginationItemClick" Page="@prevBlock.ToString()">
<span aria-hidden="true"><i class="fas fa-angle-left"></i></span>
</PaginationLink>
</PaginationItem>
<ul class="pagination pagination-sm mb-1">
<li class="page-item"><button class="page-link" @onclick="() => PaginationItemClick(1)"><i class="fas fa-angle-double-left"></i></button></li>
<li class="page-item"><button class="page-link" @onclick="() => PaginationItemClick(prevBlock)"><i class="fas fa-angle-left"></i></button></li>
@for (int i = @startPage; i <= endPage; ++i)
{
var pageNum = i;
<PaginationItem Active="@(currPage.Equals(pageNum))">
<PaginationLink Clicked="@HandlePaginationItemClick" Page="@pageNum.ToString()">
@pageNum
</PaginationLink>
</PaginationItem>
<li class="page-item @cssActive(pageNum)"><button class="page-link" @onclick="() => PaginationItemClick(pageNum)">@pageNum</button></li>
}
<PaginationItem>
<PaginationLink Clicked="@HandlePaginationItemClick" Page="@nextBlock.ToString()">
<i class="fas fa-angle-right"></i>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink Clicked="@HandlePaginationItemClick" Page="@LastPage.ToString()">
<i class="fas fa-angle-double-right"></i>
</PaginationLink>
</PaginationItem>
</Pagination>
}
</div>
<div class="col-3 text-center">
@if (!showLoading)
{
<div>@totalCount records</div>
}
@if (totalCount > 0)
{
if (!fileExist)
{
<button class="btn btn-block btn-sm btn-primary" @onclick="() => requestSave()"><span class="oi oi-wrench"></span> Prepare Data</button>
}
else
{
<a target="_blank" href="Download?fileName=@fileName" class="btn btn-block btn-sm btn-success"><span class="oi oi-cloud-download"></span> Download Data</a>
}
<li class="page-item"><button class="page-link" @onclick="() => PaginationItemClick(nextBlock)"><i class="fas fa-angle-right"></i></button></li>
<li class="page-item"><button class="page-link" @onclick="() => PaginationItemClick(LastPage)"><i class="fas fa-angle-double-right"></i></button></li>
</ul>
}
</div>
</div>
@@ -59,26 +22,35 @@
<div class="col-12 small">
@if (showLoading)
{
<Progress>
<ProgressBar Value="@percLoading" Striped="true" Animated="true" />
</Progress>
<div class="progress" style="height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:@percLoading%;"></div>
</div>
}
</div>
</div>
</div>
<div class="col-6 col-lg-2 text-right">
@if (totalCount > 0)
{
<div class="input-group input-group-sm">
row/pag:&nbsp;
<select @bind="@PageSize" class="form-control form-control-sm">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<div class="col-12 col-lg-4">
<div class="d-flex">
<div class="p-1 flex-fill text-right">
@if (!showLoading)
{
<span>@totalCount records</span>
}
</div>
}
<div class="p-1 flex-fill text-right small">
@if (totalCount > 0)
{
<div class="input-group input-group-sm">
<select @bind="@PageSize" class="form-control form-control-sm">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
}
</div>
</div>
</div>
</div>
MP.Stats/Components/DataPager.razor.cs
+17 -8
View File
@@ -9,7 +9,7 @@ using MP.Stats.Data;
namespace MP.Stats.Components
{
public partial class DataPager
public partial class DataPager : ComponentBase
{
#region Protected Fields
@@ -17,6 +17,7 @@ namespace MP.Stats.Components
protected string exportDir = $"{Directory.GetCurrentDirectory()}\\temp";
#endregion Protected Fields
#region Private Properties
@@ -61,7 +62,7 @@ namespace MP.Stats.Components
}
}
// calcola un set 1..numPOages centrato sulla pagina corrente...
// calcola un set 1 .. numPages centrato sulla pagina corrente...
private int startPage
{
get
@@ -194,23 +195,31 @@ namespace MP.Stats.Components
showLoading = false;
}
#endregion Private Methods
#region Protected Methods
protected void HandlePaginationItemClick(string page)
protected string cssActive(int numPage)
{
currPage = int.Parse(page);
string answ = "";
if (numPage == currPage)
{
answ = "active";
}
return answ;
}
#endregion Protected Methods
#if false
protected override async Task OnInitializedAsync()
{
await Task.Run(() => showLoading = false);
}
#endif
protected void PaginationItemClick(int page)
{
currPage = page;
}
#endregion Protected Methods
}
}
MP.Stats/Components/SelectionFilter.razor
+3 -3
View File
@@ -6,7 +6,7 @@
<div class="p-2">
<div class="form-group mb-0">
<label for="btnReset" class="small">chart</label><br />
<Button id="btnReset" class="@btnClass" Clicked="toggleChart" disabled="@(!ChartEnabled)">
<button class="@btnClass" @onclick="() => toggleChart()" disabled="@(!ChartEnabled)">
@if (chartVisible)
{
<span class="oi oi-chevron-top"></span>
@@ -15,7 +15,7 @@
{
<span class="oi oi-chevron-bottom"></span>
}
</Button>
</button>
</div>
</div>
<div class="p-2">
@@ -80,7 +80,7 @@
<div class="p-2">
<div class="form-group mb-0">
<label for="btnReset" class="small">reset</label><br />
<Button id="btnReset" class="btn btn-info btn-sm btn-block" Clicked="resetFilter"><span class="oi oi-loop-circular"></span></Button>
<button id="btnReset" class="btn btn-info btn-sm btn-block" Clicked="resetFilter"><span class="oi oi-loop-circular"></span></button>
</div>
</div>
</div>
MP.Stats/MP.Stats.csproj
+19 -1
View File
@@ -4,7 +4,7 @@
<TargetFramework>net6.0</TargetFramework>
<RootNamespace>MP.Stats</RootNamespace>
<UserSecretsId>826e877c-ba70-4253-84cb-d0b1cafd4440</UserSecretsId>
<Version>6.14.2202.2116</Version>
<Version>6.14.2202.2117</Version>
</PropertyGroup>
<ItemGroup>
@@ -132,6 +132,16 @@
<None Include="wwwroot\lib\bootstrap\scss\_type.scss" />
<None Include="wwwroot\lib\bootstrap\scss\_utilities.scss" />
<None Include="wwwroot\lib\bootstrap\scss\_variables.scss" />
<None Include="wwwroot\lib\Chart.js\chart.esm.js" />
<None Include="wwwroot\lib\Chart.js\chart.esm.min.js" />
<None Include="wwwroot\lib\Chart.js\chart.js" />
<None Include="wwwroot\lib\Chart.js\chart.min.js" />
<None Include="wwwroot\lib\Chart.js\helpers.esm.js" />
<None Include="wwwroot\lib\Chart.js\helpers.esm.min.js" />
<None Include="wwwroot\lib\chartjs-adapter-luxon\chartjs-adapter-luxon.esm.js" />
<None Include="wwwroot\lib\chartjs-adapter-luxon\chartjs-adapter-luxon.esm.min.js" />
<None Include="wwwroot\lib\chartjs-adapter-luxon\chartjs-adapter-luxon.js" />
<None Include="wwwroot\lib\chartjs-adapter-luxon\chartjs-adapter-luxon.min.js" />
<None Include="wwwroot\lib\font-awesome\js\all.js" />
<None Include="wwwroot\lib\font-awesome\js\all.min.js" />
<None Include="wwwroot\lib\font-awesome\js\brands.js" />
@@ -155,10 +165,18 @@
<None Include="wwwroot\lib\font-awesome\webfonts\fa-regular-400.woff2" />
<None Include="wwwroot\lib\font-awesome\webfonts\fa-solid-900.svg" />
<None Include="wwwroot\lib\font-awesome\webfonts\fa-solid-900.woff2" />
<None Include="wwwroot\lib\luxon\cjs-browser\luxon.js" />
<None Include="wwwroot\lib\luxon\cjs-browser\luxon.js.map" />
<None Include="wwwroot\lib\luxon\cjs-browser\luxon.min.js" />
<None Include="wwwroot\lib\luxon\luxon.js" />
<None Include="wwwroot\lib\luxon\luxon.js.map" />
<None Include="wwwroot\lib\luxon\luxon.min.js" />
<None Include="wwwroot\lib\luxon\luxon.min.js.map" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Blazorise" Version="0.9.5.5" />
<PackageReference Include="Blazorise.Bootstrap" Version="0.9.5.5" />
<PackageReference Include="Blazorise.Charts" Version="0.9.5.5" />
<PackageReference Include="Blazorise.Components" Version="0.9.5.5" />
<PackageReference Include="ElmahCore" Version="2.1.1" />
MP.Stats/Pages/Test.razor
+2 -2
View File
@@ -1,8 +1,8 @@
@page "/test"
<Heading Size="HeadingSize.Is1">Test</Heading>
<h1>Test</h1>
<Button class="btn btn-info btn-sm" Clicked="@(async () => await HandleRedraw())">Redraw</Button>
<button class="btn btn-info btn-sm" @onclick="@(async () => await HandleRedraw())">Redraw</button>
<div class="row">
<div class="col-3">
MP.Stats/Pages/_Host.cshtml
+17 -6
View File
@@ -17,6 +17,13 @@
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet"href="css/site.css" />
<link rel="stylesheet"href="lib/font-awesome/css/all.css" />
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<!-- inside of head section -->
@*<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />*@
<link href="MP.Stats.styles.css" rel="stylesheet" />
</head>
<body>
@@ -34,15 +41,19 @@
</div>
<!-- inside of body section and after the div/app tag -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
@*<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>*@
@*<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>*@
@*<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>*@
<script src="_content/Blazorise/blazorise.js"></script>
@*<script src="_content/Blazorise/blazorise.js"></script>
<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
<script src="_content/Blazorise.Charts/blazorise.charts.js"></script>
<script src="_content/Blazorise.Charts/blazorise.charts.js"></script>*@
<script src="_framework/blazor.server.js"></script>
<script src="lib/Chart.js/chart.js"></script>
<script src="lib/luxon/luxon.js"></script>
<script src="lib/chartjs-adapter-luxon/chartjs-adapter-luxon.js"></script>
<script src="lib/chartBoot.js"></script>
</body>
</html>
MP.Stats/Resources/ChangeLog.html
+1 -1
View File
@@ -1,6 +1,6 @@
<body>
<i>Modulo statistiche MAPO</i>
<h4>Versione: 6.14.2202.2116</h4>
<h4>Versione: 6.14.2202.2117</h4>
<br />
Note di rilascio:
<ul>
MP.Stats/Resources/VersNum.txt
+1 -1
View File
@@ -1 +1 @@
6.14.2202.2116
6.14.2202.2117
MP.Stats/Resources/manifest.xml
+1 -1
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<item>
<version>6.14.2202.2116</version>
<version>6.14.2202.2117</version>
<url>https://nexus.steamware.net/repository/SWS/MP-STATS/stable/LAST/MP.Stats.zip</url>
<changelog>https://nexus.steamware.net/repository/SWS/MP-STATS/stable/LAST/ChangeLog.html</changelog>
<mandatory>false</mandatory>
MP.Stats/Startup.cs
+3 -1
View File
@@ -8,6 +8,7 @@ using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using MP.Stats.Data;
using System.Globalization;
using Blazorise.Bootstrap;
namespace MP.Stats
{
@@ -79,7 +80,8 @@ namespace MP.Stats
services.AddBlazorise(options =>
{
options.ChangeTextOnKeyPress = true; // optional
});
})
.AddBootstrapProviders();
// Elmah
services.AddElmah();