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

Setup preliminare classi oggetti ChartJs OK!

Browse Source
This commit is contained in:
Samuele Locatelli
2022-01-14 17:03:11 +01:00
parent 46326944b1
commit b4e7cd18cd
24 changed files with 17464 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GPW.CORE.UI/Components/Chart.razor
+120 -13
View File
@@ -5,8 +5,11 @@
@code {
public enum ChartType
{
Nd,
Pie,
Bar
Bar,
Hist,
TS
}
[Parameter]
@@ -18,6 +21,9 @@
[Parameter]
public string[] Data { get; set; }
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS{ get; set; }
[Parameter]
public string[] BackgroundColor { get; set; }
@@ -26,7 +32,31 @@
protected override async Task OnAfterRenderAsync(bool firstRender)
{
// Here we create an anonymous type with all the options
if (!firstRender)
{
switch (Type)
{
case ChartType.Hist:
await InitHist();
break;
case ChartType.TS:
await InitTs();
break;
case ChartType.Nd:
case ChartType.Pie:
case ChartType.Bar:
default:
await InitDefault();
break;
}
}
}
protected async Task InitHist()
{
// Here we create an anonymous type with all the options
// that need to be sent to Chart.js
var config = new
{
@@ -34,26 +64,103 @@
Options = new
{
Responsive = true,
//Scales = new
//{
// YAxes = new[]
// {
// new { Ticks = new {
// BeginAtZero=true
// } }
// }
//}
scales = new
{
yAxes = new
{
display = true,
}
}
},
Data = new
{
Datasets = new[]
{
{
new { Data = Data, BackgroundColor = BackgroundColor}
},
Labels = Labels
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
protected async Task InitTs()
{
// Here we create an anonymous type with all the options
// that need to be sent to 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",
},
animation = new
{
duration = 100
}
}
},
Data = new
{
Datasets = new[]
{
new
{
Data = DataTS,
borderColor= "rgb(7, 173, 236)",
lineTension= 0,
stepped= true,
label= "Temperatura Rilevata"
}
}
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
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);
}
}
GPW.CORE.UI/Components/ChartHist.razor
+69
View File
@@ -0,0 +1,69 @@
@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)
{
// 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
{
display = true,
ticks = new
{
beginAtZero = true,
maxTicksLimit = 10
}
},
animation = new
{
duration = 100
}
}
},
data = new
{
datasets = new[]
{
new
{
data = Data,
borderColor = lineColor,
backgroundColor = backColor,
borderWidth = 1,
label= "Freq. Osservate"
}
},
labels = Labels
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}
}
GPW.CORE.UI/Components/ChartTS.razor
+70
View File
@@ -0,0 +1,70 @@
@inject IJSRuntime JSRuntime
<canvas id="@Id"></canvas>
@code {
[Parameter]
public string Id { get; set; } = "MyTs";
[Parameter]
public List<chartJsData.chartJsTSerie> DataTS { get; set; }
[Parameter]
public string lineColor { get; set; }
[Parameter]
public string backColor { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!firstRender)
{
// 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",
},
animation = new
{
duration = 100
}
}
},
data = new
{
datasets = new[]
{
new
{
data = DataTS,
borderColor= lineColor,
backgroundColor= backColor,
lineTension= 0,
stepped= true,
label= "Temperatura Rilevata"
}
}
}
};
await JSRuntime.InvokeVoidAsync("setup", Id, config);
}
}
}
GPW.CORE.UI/GPW.CORE.UI.csproj
+1 -1
View File
@@ -2,7 +2,7 @@
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<Version>3.0.2201.1415</Version>
<Version>3.0.2201.1417</Version>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
GPW.CORE.UI/Pages/Test.razor
+7 -4
View File
@@ -7,14 +7,17 @@
<div class="row">
<div class="col-4">
<Chart Id="pie1" Type="@Chart.ChartType.Pie" Data="@(new[] { "1", "2" })" BackgroundColor="@(new[] { "blue","green"})" Labels="@(new[] { "Fail","Ok"})"></Chart>
<ChartTS Id="TempRil" DataTS="@getTsData()" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.3)"></ChartTS>
</div>
<div class="col-4">
<Chart Id="bar1" Type="@Chart.ChartType.Bar" Data="@(new[] { "10", "9" })" BackgroundColor="@(new[] { "yellow","red"})" Labels="@(new[] { "Fail","Ok"})"></Chart>
<ChartHist Id="FreqTemp" Data="@(new[] { "5", "8", "10", "6", "4", "3" })" Labels="@(new[] { "35.8", "35.9", "36.0", "36.1", "36.2", "36.3" })" lineColor="rgb(7, 173, 236)" backColor="rgba(107, 223, 255, 0.5)"></ChartHist>
</div>
<div class="col-4">
<Chart Id="Hist" Type="@Chart.ChartType.Bar" Data="@(new[] { "10", "9" })" BackgroundColor="@(new[] { "yellow","red"})" Labels="@(new[] { "Fail","Ok"})"></Chart>
</div>
</div>
<div class="p-1 flex-fill text-left">
@*<div class="p-1 flex-fill text-left">
<div class="d-flex justify-content-between text-center">
<div class="py-0 small flex-fill " style="width: 5.36%"><div class="d-flex"><div class="px-1 small textTrim"><button class="px-1 text-center btn btn-lg btn-outline-success"><i class="fas fa-plus-circle"></i></button></div></div></div><div class="py-0 small flex-fill border border-info rounded" style="width: 3.57%">
<div class="d-flex">
@@ -287,7 +290,7 @@
</div>
</div><div class="py-0 small flex-fill " style="width: 5.36%"><div class="d-flex"><div class="px-1 small textTrim"><button class="px-1 text-center btn btn-lg btn-outline-success"><i class="fas fa-plus-circle"></i></button></div></div></div>
</div>
</div>
</div>*@
<style>
.containerTest {
GPW.CORE.UI/Pages/Test.razor.cs
+14
View File
@@ -96,6 +96,20 @@ namespace GPW.CORE.UI.Pages
}
}
protected List<chartJsData.chartJsTSerie> getTsData()
{
List<chartJsData.chartJsTSerie> answ = new List<chartJsData.chartJsTSerie>();
DateTime dtCurs = DateTime.Now.AddDays(-120);
Random rnd = new Random();
for (int i = 0; i < 60; i++)
{
answ.Add(new chartJsData.chartJsTSerie() { x = dtCurs, y = (decimal)(360 + rnd.Next(-5, 12)) / 10 });
dtCurs = dtCurs.AddDays(rnd.Next(1,4));
}
return answ;
}
#endregion Protected Properties
#region Private Methods
GPW.CORE.UI/Pages/_Layout.cshtml
+3 -1
View File
@@ -13,7 +13,7 @@
<link href="css/site.css" rel="stylesheet" />
<link href="lib/font-awesome/css/all.css" rel="stylesheet" />
<link href="GPW.CORE.UI.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="Server" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
@RenderBody()
@@ -31,6 +31,8 @@
<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>
GPW.CORE.UI/chartJsData.cs
+16
View File
@@ -0,0 +1,16 @@
namespace GPW.CORE.UI
{
public class chartJsData
{
public class chartJsTSerie
{
public DateTime x { get; set; }
public decimal y { get; set; }
}
public class chartJsXY
{
public decimal x { get; set; }
public decimal y { get; set; }
}
}
}
GPW.CORE.UI/libman.json
+8
View File
@@ -13,6 +13,14 @@
{
"library": "Chart.js@3.7.0",
"destination": "wwwroot/lib/Chart.js/"
},
{
"library": "chartjs-adapter-luxon@1.1.0",
"destination": "wwwroot/lib/chartjs-adapter-luxon/"
},
{
"library": "luxon@2.3.0",
"destination": "wwwroot/lib/luxon/"
}
]
}
GPW.CORE.UI/wwwroot/lib/chartBoot.js
+2 -20
View File
@@ -8,29 +8,11 @@ window.setup = (id, config) => {
//window.myChart.destroy();
//console.log("Chart destroyed!");
window['chart-' + id].update();
console.log("Chart " + id + " updated!");
//console.log("Chart " + id + " updated!");
}
else {
window['chart-' + id] = new Chart(ctx, config);
console.log("Chart " + id + " created!");
//console.log("Chart " + id + " created!");
}
//console.log(window['chart-' + id]);
}
//window.setup = (id, config) => {
// var ctx = document.getElementById(id).getContext('2d');
// //console.log("Calling setup...");
// //console.log(id);
// if (window.myChart instanceof Chart) {
// //window.myChart.destroy();
// //console.log("Chart destroyed!");
// window.myChart.update();
// console.log("Chart " + id + " updated!");
// }
// else {
// window.myChart = new Chart(ctx, config);
// console.log("Chart " + id + " created!");
// }
// console.log(window.myChart);
//}
GPW.CORE.UI/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.esm.js
+91
View File
@@ -0,0 +1,91 @@
/*!
* chartjs-adapter-luxon v1.1.0
* https://www.chartjs.org
* (c) 2021 chartjs-adapter-luxon Contributors
* Released under the MIT license
*/
import { _adapters } from 'chart.js';
import { DateTime } from 'luxon';
const FORMATS = {
datetime: DateTime.DATETIME_MED_WITH_SECONDS,
millisecond: 'h:mm:ss.SSS a',
second: DateTime.TIME_WITH_SECONDS,
minute: DateTime.TIME_SIMPLE,
hour: {hour: 'numeric'},
day: {day: 'numeric', month: 'short'},
week: 'DD',
month: {month: 'short', year: 'numeric'},
quarter: "'Q'q - yyyy",
year: {year: 'numeric'}
};
_adapters._date.override({
_id: 'luxon', // DEBUG
/**
* @private
*/
_create: function(time) {
return DateTime.fromMillis(time, this.options);
},
formats: function() {
return FORMATS;
},
parse: function(value, format) {
const options = this.options;
if (value === null || typeof value === 'undefined') {
return null;
}
const type = typeof value;
if (type === 'number') {
value = this._create(value);
} else if (type === 'string') {
if (typeof format === 'string') {
value = DateTime.fromFormat(value, format, options);
} else {
value = DateTime.fromISO(value, options);
}
} else if (value instanceof Date) {
value = DateTime.fromJSDate(value, options);
} else if (type === 'object' && !(value instanceof DateTime)) {
value = DateTime.fromObject(value);
}
return value.isValid ? value.valueOf() : null;
},
format: function(time, format) {
const datetime = this._create(time);
return typeof format === 'string'
? datetime.toFormat(format, this.options)
: datetime.toLocaleString(format);
},
add: function(time, amount, unit) {
const args = {};
args[unit] = amount;
return this._create(time).plus(args).valueOf();
},
diff: function(max, min, unit) {
return this._create(max).diff(this._create(min)).as(unit).valueOf();
},
startOf: function(time, unit, weekday) {
if (unit === 'isoWeek') {
weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
const dateTime = this._create(time);
return dateTime.minus({days: (dateTime.weekday - weekday + 7) % 7}).startOf('day').valueOf();
}
return unit ? this._create(time).startOf(unit).valueOf() : time;
},
endOf: function(time, unit) {
return this._create(time).endOf(unit).valueOf();
}
});
GPW.CORE.UI/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.esm.min.js
Vendored
+1
View File
@@ -0,0 +1 @@
import{_adapters}from"chart.js";import{DateTime}from"luxon";const FORMATS={datetime:DateTime.DATETIME_MED_WITH_SECONDS,millisecond:"h:mm:ss.SSS a",second:DateTime.TIME_WITH_SECONDS,minute:DateTime.TIME_SIMPLE,hour:{hour:"numeric"},day:{day:"numeric",month:"short"},week:"DD",month:{month:"short",year:"numeric"},quarter:"'Q'q - yyyy",year:{year:"numeric"}};_adapters._date.override({_id:"luxon",_create:function(t){return DateTime.fromMillis(t,this.options)},formats:function(){return FORMATS},parse:function(t,e){var r=this.options;if(null==t)return null;var a=typeof t;return"number"==a?t=this._create(t):"string"==a?t="string"==typeof e?DateTime.fromFormat(t,e,r):DateTime.fromISO(t,r):t instanceof Date?t=DateTime.fromJSDate(t,r):"object"!=a||t instanceof DateTime||(t=DateTime.fromObject(t)),t.isValid?t.valueOf():null},format:function(t,e){const r=this._create(t);return"string"==typeof e?r.toFormat(e,this.options):r.toLocaleString(e)},add:function(t,e,r){const a={};return a[r]=e,this._create(t).plus(a).valueOf()},diff:function(t,e,r){return this._create(t).diff(this._create(e)).as(r).valueOf()},startOf:function(t,e,r){if("isoWeek"!==e)return e?this._create(t).startOf(e).valueOf():t;{r=Math.trunc(Math.min(Math.max(0,r),6));const a=this._create(t);return a.minus({days:(a.weekday-r+7)%7}).startOf("day").valueOf()}},endOf:function(t,e){return this._create(t).endOf(e).valueOf()}});
GPW.CORE.UI/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.js
+96
View File
@@ -0,0 +1,96 @@
/*!
* chartjs-adapter-luxon v1.1.0
* https://www.chartjs.org
* (c) 2021 chartjs-adapter-luxon Contributors
* Released under the MIT license
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('chart.js'), require('luxon')) :
typeof define === 'function' && define.amd ? define(['chart.js', 'luxon'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Chart, global.luxon));
}(this, (function (chart_js, luxon) { 'use strict';
const FORMATS = {
datetime: luxon.DateTime.DATETIME_MED_WITH_SECONDS,
millisecond: 'h:mm:ss.SSS a',
second: luxon.DateTime.TIME_WITH_SECONDS,
minute: luxon.DateTime.TIME_SIMPLE,
hour: {hour: 'numeric'},
day: {day: 'numeric', month: 'short'},
week: 'DD',
month: {month: 'short', year: 'numeric'},
quarter: "'Q'q - yyyy",
year: {year: 'numeric'}
};
chart_js._adapters._date.override({
_id: 'luxon', // DEBUG
/**
* @private
*/
_create: function(time) {
return luxon.DateTime.fromMillis(time, this.options);
},
formats: function() {
return FORMATS;
},
parse: function(value, format) {
const options = this.options;
if (value === null || typeof value === 'undefined') {
return null;
}
const type = typeof value;
if (type === 'number') {
value = this._create(value);
} else if (type === 'string') {
if (typeof format === 'string') {
value = luxon.DateTime.fromFormat(value, format, options);
} else {
value = luxon.DateTime.fromISO(value, options);
}
} else if (value instanceof Date) {
value = luxon.DateTime.fromJSDate(value, options);
} else if (type === 'object' && !(value instanceof luxon.DateTime)) {
value = luxon.DateTime.fromObject(value);
}
return value.isValid ? value.valueOf() : null;
},
format: function(time, format) {
const datetime = this._create(time);
return typeof format === 'string'
? datetime.toFormat(format, this.options)
: datetime.toLocaleString(format);
},
add: function(time, amount, unit) {
const args = {};
args[unit] = amount;
return this._create(time).plus(args).valueOf();
},
diff: function(max, min, unit) {
return this._create(max).diff(this._create(min)).as(unit).valueOf();
},
startOf: function(time, unit, weekday) {
if (unit === 'isoWeek') {
weekday = Math.trunc(Math.min(Math.max(0, weekday), 6));
const dateTime = this._create(time);
return dateTime.minus({days: (dateTime.weekday - weekday + 7) % 7}).startOf('day').valueOf();
}
return unit ? this._create(time).startOf(unit).valueOf() : time;
},
endOf: function(time, unit) {
return this._create(time).endOf(unit).valueOf();
}
});
})));
GPW.CORE.UI/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.min.js
Vendored
+7
View File
@@ -0,0 +1,7 @@
/*!
* chartjs-adapter-luxon v1.1.0
* https://www.chartjs.org
* (c) 2021 chartjs-adapter-luxon Contributors
* Released under the MIT license
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("chart.js"),require("luxon")):"function"==typeof define&&define.amd?define(["chart.js","luxon"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Chart,e.luxon)}(this,(function(e,t){"use strict";const n={datetime:t.DateTime.DATETIME_MED_WITH_SECONDS,millisecond:"h:mm:ss.SSS a",second:t.DateTime.TIME_WITH_SECONDS,minute:t.DateTime.TIME_SIMPLE,hour:{hour:"numeric"},day:{day:"numeric",month:"short"},week:"DD",month:{month:"short",year:"numeric"},quarter:"'Q'q - yyyy",year:{year:"numeric"}};e._adapters._date.override({_id:"luxon",_create:function(e){return t.DateTime.fromMillis(e,this.options)},formats:function(){return n},parse:function(e,n){const r=this.options;if(null==e)return null;const i=typeof e;return"number"===i?e=this._create(e):"string"===i?e="string"==typeof n?t.DateTime.fromFormat(e,n,r):t.DateTime.fromISO(e,r):e instanceof Date?e=t.DateTime.fromJSDate(e,r):"object"!==i||e instanceof t.DateTime||(e=t.DateTime.fromObject(e)),e.isValid?e.valueOf():null},format:function(e,t){const n=this._create(e);return"string"==typeof t?n.toFormat(t,this.options):n.toLocaleString(t)},add:function(e,t,n){const r={};return r[n]=t,this._create(e).plus(r).valueOf()},diff:function(e,t,n){return this._create(e).diff(this._create(t)).as(n).valueOf()},startOf:function(e,t,n){if("isoWeek"===t){n=Math.trunc(Math.min(Math.max(0,n),6));const t=this._create(e);return t.minus({days:(t.weekday-n+7)%7}).startOf("day").valueOf()}return t?this._create(e).startOf(t).valueOf():e},endOf:function(e,t){return this._create(e).endOf(t).valueOf()}})}));
GPW.CORE.UI/wwwroot/lib/luxon/cjs-browser/luxon.js
+8473
View File
File diff suppressed because it is too large Load Diff
GPW.CORE.UI/wwwroot/lib/luxon/cjs-browser/luxon.js.map
+1
View File
File diff suppressed because one or more lines are too long
GPW.CORE.UI/wwwroot/lib/luxon/cjs-browser/luxon.min.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
GPW.CORE.UI/wwwroot/lib/luxon/luxon.js
+8478
View File
File diff suppressed because it is too large Load Diff
GPW.CORE.UI/wwwroot/lib/luxon/luxon.js.map
+1
View File
File diff suppressed because one or more lines are too long
GPW.CORE.UI/wwwroot/lib/luxon/luxon.min.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
GPW.CORE.UI/wwwroot/lib/luxon/luxon.min.js.map
+1
View File
File diff suppressed because one or more lines are too long
Resources/ChangeLog.html
+1 -1
View File
@@ -1,6 +1,6 @@
<body>
<i>GPW - Gestione Presenze Web</i>
<h4>Versione: 3.0.2201.1415</h4>
<h4>Versione: 3.0.2201.1417</h4>
<br /> Note di rilascio:
<ul>
<li>
Resources/VersNum.txt
+1 -1
View File
@@ -1 +1 @@
3.0.2201.1415
3.0.2201.1417
Resources/manifest.xml
+1 -1
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<item>
<version>3.0.2201.1415</version>
<version>3.0.2201.1417</version>
<url>http://nexus.steamware.net/repository/SWS/GWMS/stable/0/GWMS.UI.zip</url>
<changelog>http://nexus.steamware.net/repository/SWS/GWMS/stable/0/ChangeLog.html</changelog>
<mandatory>false</mandatory>