From 0a0255e24dd3bb1c01d86d95dbe05b8eff4d2f77 Mon Sep 17 00:00:00 2001 From: Samuele Locatelli Date: Fri, 10 Apr 2026 08:52:13 +0200 Subject: [PATCH] Aggiunta precondizioni e componenti x ChartJS --- MP.IOC/Components/App.razor | 4 + MP.IOC/Components/ChartJS/BarPlot.razor | 133 + MP.IOC/Components/ChartJS/Chart.razor | 63 + MP.IOC/Components/ChartJS/Line.razor | 123 + MP.IOC/Components/ChartJS/MultiLine.razor | 123 + MP.IOC/Components/ChartJS/PieChart.razor | 98 + MP.IOC/Components/ChartJS/StepLine.razor | 94 + MP.IOC/Components/Compo/ParetoDetail.razor | 4 - MP.IOC/Components/_Imports.razor | 1 + MP.IOC/libman.json | 23 +- MP.IOC/wwwroot/lib/Chart.js/chart.cjs.map | 1 + MP.IOC/wwwroot/lib/Chart.js/chart.js | 11590 ++++++++++++++ MP.IOC/wwwroot/lib/Chart.js/chart.js.map | 1 + MP.IOC/wwwroot/lib/Chart.js/chart.min.js | 1 + MP.IOC/wwwroot/lib/Chart.js/chart.umd.js | 14 + MP.IOC/wwwroot/lib/Chart.js/chart.umd.js.map | 1 + MP.IOC/wwwroot/lib/Chart.js/chart.umd.min.js | 14 + .../wwwroot/lib/Chart.js/chart.umd.min.js.map | 1 + MP.IOC/wwwroot/lib/Chart.js/helpers.cjs.map | 1 + MP.IOC/wwwroot/lib/Chart.js/helpers.js | 9 + MP.IOC/wwwroot/lib/Chart.js/helpers.js.map | 1 + MP.IOC/wwwroot/lib/Chart.js/helpers.min.js | 1 + MP.IOC/wwwroot/lib/Chart.js/index.d.ts | 12 + MP.IOC/wwwroot/lib/Chart.js/index.umd.d.ts | 5 + MP.IOC/wwwroot/lib/Chart.js/types.d.ts | 10 + .../lib/bootstrap/css/bootstrap-grid.css | 261 +- .../lib/bootstrap/css/bootstrap-grid.css.map | 2 +- .../lib/bootstrap/css/bootstrap-grid.min.css | 7 +- .../bootstrap/css/bootstrap-grid.min.css.map | 2 +- .../lib/bootstrap/css/bootstrap-grid.rtl.css | 261 +- .../bootstrap/css/bootstrap-grid.rtl.css.map | 2 +- .../bootstrap/css/bootstrap-grid.rtl.min.css | 7 +- .../css/bootstrap-grid.rtl.min.css.map | 2 +- .../lib/bootstrap/css/bootstrap-reboot.css | 147 +- .../bootstrap/css/bootstrap-reboot.css.map | 2 +- .../bootstrap/css/bootstrap-reboot.min.css | 7 +- .../css/bootstrap-reboot.min.css.map | 2 +- .../bootstrap/css/bootstrap-reboot.rtl.css | 147 +- .../css/bootstrap-reboot.rtl.css.map | 2 +- .../css/bootstrap-reboot.rtl.min.css | 7 +- .../css/bootstrap-reboot.rtl.min.css.map | 2 +- .../lib/bootstrap/css/bootstrap-utilities.css | 1246 +- .../bootstrap/css/bootstrap-utilities.css.map | 2 +- .../bootstrap/css/bootstrap-utilities.min.css | 7 +- .../css/bootstrap-utilities.min.css.map | 2 +- .../bootstrap/css/bootstrap-utilities.rtl.css | 1246 +- .../css/bootstrap-utilities.rtl.css.map | 2 +- .../css/bootstrap-utilities.rtl.min.css | 7 +- .../css/bootstrap-utilities.rtl.min.css.map | 2 +- .../wwwroot/lib/bootstrap/css/bootstrap.css | 2610 ++- .../lib/bootstrap/css/bootstrap.css.map | 2 +- .../lib/bootstrap/css/bootstrap.min.css | 7 +- .../lib/bootstrap/css/bootstrap.min.css.map | 2 +- .../lib/bootstrap/css/bootstrap.rtl.css | 2607 ++- .../lib/bootstrap/css/bootstrap.rtl.css.map | 2 +- .../lib/bootstrap/css/bootstrap.rtl.min.css | 7 +- .../bootstrap/css/bootstrap.rtl.min.css.map | 2 +- .../lib/bootstrap/js/bootstrap.bundle.js | 2227 +-- .../lib/bootstrap/js/bootstrap.bundle.js.map | 2 +- .../lib/bootstrap/js/bootstrap.bundle.min.js | 6 +- .../bootstrap/js/bootstrap.bundle.min.js.map | 2 +- .../wwwroot/lib/bootstrap/js/bootstrap.esm.js | 2141 +-- .../lib/bootstrap/js/bootstrap.esm.js.map | 2 +- .../lib/bootstrap/js/bootstrap.esm.min.js | 6 +- .../lib/bootstrap/js/bootstrap.esm.min.js.map | 2 +- MP.IOC/wwwroot/lib/bootstrap/js/bootstrap.js | 2149 +-- .../wwwroot/lib/bootstrap/js/bootstrap.js.map | 2 +- .../wwwroot/lib/bootstrap/js/bootstrap.min.js | 6 +- .../lib/bootstrap/js/bootstrap.min.js.map | 2 +- .../lib/bootstrap/scss/_accordion.scss | 34 +- MP.IOC/wwwroot/lib/bootstrap/scss/_alert.scss | 19 +- .../lib/bootstrap/scss/_button-group.scss | 11 +- .../wwwroot/lib/bootstrap/scss/_buttons.scss | 15 +- MP.IOC/wwwroot/lib/bootstrap/scss/_card.scss | 24 +- .../wwwroot/lib/bootstrap/scss/_carousel.scss | 44 +- MP.IOC/wwwroot/lib/bootstrap/scss/_close.scss | 46 +- .../wwwroot/lib/bootstrap/scss/_dropdown.scss | 1 + .../lib/bootstrap/scss/_functions.scss | 6 +- MP.IOC/wwwroot/lib/bootstrap/scss/_grid.scss | 6 + .../wwwroot/lib/bootstrap/scss/_helpers.scss | 2 + .../lib/bootstrap/scss/_list-group.scss | 71 +- MP.IOC/wwwroot/lib/bootstrap/scss/_maps.scss | 120 + .../wwwroot/lib/bootstrap/scss/_mixins.scss | 3 +- MP.IOC/wwwroot/lib/bootstrap/scss/_modal.scss | 9 +- MP.IOC/wwwroot/lib/bootstrap/scss/_nav.scss | 61 +- .../wwwroot/lib/bootstrap/scss/_navbar.scss | 21 +- .../lib/bootstrap/scss/_offcanvas.scss | 9 +- .../lib/bootstrap/scss/_pagination.scss | 2 +- .../wwwroot/lib/bootstrap/scss/_progress.scss | 13 +- .../wwwroot/lib/bootstrap/scss/_reboot.scss | 23 +- MP.IOC/wwwroot/lib/bootstrap/scss/_root.scss | 134 +- .../wwwroot/lib/bootstrap/scss/_spinners.scss | 1 + .../wwwroot/lib/bootstrap/scss/_tables.scss | 31 +- .../wwwroot/lib/bootstrap/scss/_tooltip.scss | 9 +- MP.IOC/wwwroot/lib/bootstrap/scss/_type.scss | 2 +- .../lib/bootstrap/scss/_utilities.scss | 191 +- .../lib/bootstrap/scss/_variables-dark.scss | 102 + .../lib/bootstrap/scss/_variables.scss | 481 +- .../lib/bootstrap/scss/bootstrap-grid.scss | 4 +- .../lib/bootstrap/scss/bootstrap-reboot.scss | 1 + .../bootstrap/scss/bootstrap-utilities.scss | 1 + .../wwwroot/lib/bootstrap/scss/bootstrap.scss | 1 + .../scss/forms/_floating-labels.scss | 28 +- .../lib/bootstrap/scss/forms/_form-check.scss | 40 +- .../bootstrap/scss/forms/_form-control.scss | 28 +- .../lib/bootstrap/scss/forms/_form-range.scss | 6 +- .../bootstrap/scss/forms/_form-select.scss | 15 +- .../bootstrap/scss/forms/_input-group.scss | 2 +- .../lib/bootstrap/scss/helpers/_color-bg.scss | 5 +- .../scss/helpers/_colored-links.scss | 22 +- .../bootstrap/scss/helpers/_focus-ring.scss | 5 + .../bootstrap/scss/helpers/_icon-link.scss | 25 + .../lib/bootstrap/scss/helpers/_vr.scss | 2 +- .../lib/bootstrap/scss/mixins/_alert.scss | 5 +- .../lib/bootstrap/scss/mixins/_banner.scss | 6 +- .../bootstrap/scss/mixins/_box-shadow.scss | 16 +- .../lib/bootstrap/scss/mixins/_caret.scss | 55 +- .../bootstrap/scss/mixins/_color-mode.scss | 21 + .../lib/bootstrap/scss/mixins/_forms.scss | 29 +- .../lib/bootstrap/scss/mixins/_grid.scss | 6 +- .../bootstrap/scss/mixins/_list-group.scss | 2 + .../lib/bootstrap/scss/mixins/_utilities.scss | 2 +- .../scss/mixins/_visually-hidden.scss | 13 +- .../lib/bootstrap/scss/vendor/_rfs.scss | 52 +- MP.IOC/wwwroot/lib/chartBoot.js | 16 + .../chartjs-adapter-luxon.esm.js | 97 + .../chartjs-adapter-luxon.esm.min.js | 1 + .../chartjs-adapter-luxon.umd.js | 102 + .../chartjs-adapter-luxon.umd.min.js | 7 + MP.IOC/wwwroot/lib/font-awesome/css/all.css | 13270 ++++++++++------ .../wwwroot/lib/font-awesome/css/all.min.css | 9 +- .../wwwroot/lib/font-awesome/css/brands.css | 2689 ++-- .../lib/font-awesome/css/brands.min.css | 6 +- .../lib/font-awesome/css/fontawesome.css | 10499 +++++++----- .../lib/font-awesome/css/fontawesome.min.css | 8 +- .../wwwroot/lib/font-awesome/css/regular.css | 28 +- .../lib/font-awesome/css/regular.min.css | 6 +- MP.IOC/wwwroot/lib/font-awesome/css/solid.css | 28 +- .../lib/font-awesome/css/solid.min.css | 6 +- .../lib/font-awesome/css/svg-with-js.css | 797 +- .../lib/font-awesome/css/svg-with-js.min.css | 6 +- MP.IOC/wwwroot/lib/font-awesome/css/svg.css | 179 + .../wwwroot/lib/font-awesome/css/svg.min.css | 6 + .../lib/font-awesome/css/v4-font-face.css | 23 +- .../lib/font-awesome/css/v4-font-face.min.css | 6 +- .../wwwroot/lib/font-awesome/css/v4-shims.css | 3110 ++-- .../lib/font-awesome/css/v4-shims.min.css | 6 +- .../lib/font-awesome/css/v5-font-face.css | 15 +- .../lib/font-awesome/css/v5-font-face.min.css | 6 +- MP.IOC/wwwroot/lib/font-awesome/js/all.js | 8727 ++++++---- MP.IOC/wwwroot/lib/font-awesome/js/all.min.js | 6 +- MP.IOC/wwwroot/lib/font-awesome/js/brands.js | 1666 +- .../wwwroot/lib/font-awesome/js/brands.min.js | 6 +- .../lib/font-awesome/js/conflict-detection.js | 889 +- .../font-awesome/js/conflict-detection.min.js | 6 +- .../lib/font-awesome/js/fontawesome.js | 2564 +-- .../lib/font-awesome/js/fontawesome.min.js | 6 +- MP.IOC/wwwroot/lib/font-awesome/js/regular.js | 1024 +- .../lib/font-awesome/js/regular.min.js | 6 +- MP.IOC/wwwroot/lib/font-awesome/js/solid.js | 3485 ++-- .../wwwroot/lib/font-awesome/js/solid.min.js | 6 +- .../wwwroot/lib/font-awesome/js/v4-shims.js | 646 +- .../lib/font-awesome/js/v4-shims.min.js | 6 +- .../lib/font-awesome/sprites/brands.svg | 2931 ++-- .../lib/font-awesome/sprites/regular.svg | 999 +- .../lib/font-awesome/sprites/solid.svg | 8382 +++++----- .../font-awesome/webfonts/fa-brands-400.ttf | Bin 181852 -> 0 bytes .../font-awesome/webfonts/fa-brands-400.woff2 | Bin 105536 -> 101180 bytes .../font-awesome/webfonts/fa-regular-400.ttf | Bin 60520 -> 0 bytes .../webfonts/fa-regular-400.woff2 | Bin 23940 -> 19000 bytes .../font-awesome/webfonts/fa-solid-900.ttf | Bin 388460 -> 0 bytes .../font-awesome/webfonts/fa-solid-900.woff2 | Bin 154228 -> 113260 bytes .../webfonts/fa-v4compatibility.ttf | Bin 10556 -> 0 bytes .../webfonts/fa-v4compatibility.woff2 | Bin 4960 -> 4056 bytes MP.IOC/wwwroot/lib/luxon/cjs-browser/luxon.js | 8739 ++++++++++ .../lib/luxon/cjs-browser/luxon.js.map | 1 + .../lib/luxon/cjs-browser/luxon.min.js | 1 + MP.IOC/wwwroot/lib/luxon/luxon.js | 8744 ++++++++++ MP.IOC/wwwroot/lib/luxon/luxon.js.map | 1 + MP.IOC/wwwroot/lib/luxon/luxon.min.js | 1 + MP.IOC/wwwroot/lib/luxon/luxon.min.js.map | 1 + MP.Stats/MP.Stats.csproj | 2 +- MP.Stats/Resources/ChangeLog.html | 2 +- MP.Stats/Resources/VersNum.txt | 2 +- MP.Stats/Resources/manifest.xml | 2 +- 185 files changed, 77180 insertions(+), 31968 deletions(-) create mode 100644 MP.IOC/Components/ChartJS/BarPlot.razor create mode 100644 MP.IOC/Components/ChartJS/Chart.razor create mode 100644 MP.IOC/Components/ChartJS/Line.razor create mode 100644 MP.IOC/Components/ChartJS/MultiLine.razor create mode 100644 MP.IOC/Components/ChartJS/PieChart.razor create mode 100644 MP.IOC/Components/ChartJS/StepLine.razor create mode 100644 MP.IOC/wwwroot/lib/Chart.js/chart.cjs.map create mode 100644 MP.IOC/wwwroot/lib/Chart.js/chart.js create mode 100644 MP.IOC/wwwroot/lib/Chart.js/chart.js.map create mode 100644 MP.IOC/wwwroot/lib/Chart.js/chart.min.js create mode 100644 MP.IOC/wwwroot/lib/Chart.js/chart.umd.js create mode 100644 MP.IOC/wwwroot/lib/Chart.js/chart.umd.js.map create mode 100644 MP.IOC/wwwroot/lib/Chart.js/chart.umd.min.js create mode 100644 MP.IOC/wwwroot/lib/Chart.js/chart.umd.min.js.map create mode 100644 MP.IOC/wwwroot/lib/Chart.js/helpers.cjs.map create mode 100644 MP.IOC/wwwroot/lib/Chart.js/helpers.js create mode 100644 MP.IOC/wwwroot/lib/Chart.js/helpers.js.map create mode 100644 MP.IOC/wwwroot/lib/Chart.js/helpers.min.js create mode 100644 MP.IOC/wwwroot/lib/Chart.js/index.d.ts create mode 100644 MP.IOC/wwwroot/lib/Chart.js/index.umd.d.ts create mode 100644 MP.IOC/wwwroot/lib/Chart.js/types.d.ts create mode 100644 MP.IOC/wwwroot/lib/bootstrap/scss/_variables-dark.scss create mode 100644 MP.IOC/wwwroot/lib/bootstrap/scss/helpers/_focus-ring.scss create mode 100644 MP.IOC/wwwroot/lib/bootstrap/scss/helpers/_icon-link.scss create mode 100644 MP.IOC/wwwroot/lib/bootstrap/scss/mixins/_color-mode.scss create mode 100644 MP.IOC/wwwroot/lib/chartBoot.js create mode 100644 MP.IOC/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.esm.js create mode 100644 MP.IOC/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.esm.min.js create mode 100644 MP.IOC/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.umd.js create mode 100644 MP.IOC/wwwroot/lib/chartjs-adapter-luxon/chartjs-adapter-luxon.umd.min.js create mode 100644 MP.IOC/wwwroot/lib/font-awesome/css/svg.css create mode 100644 MP.IOC/wwwroot/lib/font-awesome/css/svg.min.css delete mode 100644 MP.IOC/wwwroot/lib/font-awesome/webfonts/fa-brands-400.ttf delete mode 100644 MP.IOC/wwwroot/lib/font-awesome/webfonts/fa-regular-400.ttf delete mode 100644 MP.IOC/wwwroot/lib/font-awesome/webfonts/fa-solid-900.ttf delete mode 100644 MP.IOC/wwwroot/lib/font-awesome/webfonts/fa-v4compatibility.ttf create mode 100644 MP.IOC/wwwroot/lib/luxon/cjs-browser/luxon.js create mode 100644 MP.IOC/wwwroot/lib/luxon/cjs-browser/luxon.js.map create mode 100644 MP.IOC/wwwroot/lib/luxon/cjs-browser/luxon.min.js create mode 100644 MP.IOC/wwwroot/lib/luxon/luxon.js create mode 100644 MP.IOC/wwwroot/lib/luxon/luxon.js.map create mode 100644 MP.IOC/wwwroot/lib/luxon/luxon.min.js create mode 100644 MP.IOC/wwwroot/lib/luxon/luxon.min.js.map diff --git a/MP.IOC/Components/App.razor b/MP.IOC/Components/App.razor index efe9dd93..60766030 100644 --- a/MP.IOC/Components/App.razor +++ b/MP.IOC/Components/App.razor @@ -20,6 +20,10 @@ + + + + diff --git a/MP.IOC/Components/ChartJS/BarPlot.razor b/MP.IOC/Components/ChartJS/BarPlot.razor new file mode 100644 index 00000000..985a7630 --- /dev/null +++ b/MP.IOC/Components/ChartJS/BarPlot.razor @@ -0,0 +1,133 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + [Parameter] + public string Id { get; set; } = "MyHist"; + + [Parameter] + public string Legenda { get; set; } = "Legenda"; + + [Parameter] + public bool Horizontal { get; set; } = false; + + [Parameter] + public List Data { get; set; } = new List(); + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + 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() + { + // 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 + } + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + 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 + } + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + datasets = new[] { + new { + data = Data, + borderColor = lineColor, + backgroundColor = backColor, + borderWidth = 1, + label = Legenda + } + }, + labels = Labels + } + }; + await Task.Delay(50); + if (Horizontal) + { + await JSRuntime.InvokeVoidAsync("setup", Id, configHor); + } + else + { + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } + } +} diff --git a/MP.IOC/Components/ChartJS/Chart.razor b/MP.IOC/Components/ChartJS/Chart.razor new file mode 100644 index 00000000..7be94585 --- /dev/null +++ b/MP.IOC/Components/ChartJS/Chart.razor @@ -0,0 +1,63 @@ +@inject IJSRuntime JSRuntime + + + +@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 Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } + +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/Line.razor b/MP.IOC/Components/ChartJS/Line.razor new file mode 100644 index 00000000..83db14b7 --- /dev/null +++ b/MP.IOC/Components/ChartJS/Line.razor @@ -0,0 +1,123 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public string Title { get; set; } = "Demo Line"; + + [Parameter] + public List DataTS { get; set; } = null!; + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public bool Stepped { get; set; } = false; + + + [Parameter] + public string MinValue { get; set; } = "0"; + + [Parameter] + public string MaxValue { get; set; } = "0"; + + [Parameter] + public int lTens { get; set; } = 0; + + /// + /// 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) + { + await renderChart(); + } + + protected override async Task OnParametersSetAsync() + { + // await Task.Delay(100); + 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() + { + // 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 + { + type = "linear", + // type = "logarithmic", + display = true, + ticks = new + { + maxTicksLimit = 10 + }, + suggestedMin = MinValue != MaxValue ? MinValue : "auto", + suggestedMax = MinValue != MaxValue ? MaxValue : "auto" + }, + xAxes = new + { + type = "time", + distribution = "linear", + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + labels = Labels, + datasets = new[] + { + new { + data = DataTS, + borderColor = lineColor, + backgroundColor = backColor, + lineTension = lTens, + stepped = Stepped, + label = Title + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/MultiLine.razor b/MP.IOC/Components/ChartJS/MultiLine.razor new file mode 100644 index 00000000..3a926640 --- /dev/null +++ b/MP.IOC/Components/ChartJS/MultiLine.razor @@ -0,0 +1,123 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public List Titles { get; set; } = new List() { "Demo Line" }; + + [Parameter] + public List> DataTSList { get; set; } = null!; + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + [Parameter] + public bool Stepped { get; set; } = false; + + [Parameter] + public bool Stacked { get; set; } = false; + + + [Parameter] + public string MinValue { get; set; } = "0"; + + [Parameter] + public string MaxValue { get; set; } = "0"; + + [Parameter] + public int lTens { get; set; } = 0; + + /// + /// 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) + { + 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() + { + int i = 0; + // preparo lista di dati... + var dataSetsList = DataTSList.Select(dTS => new + { + data = dTS, + borderColor = lineColor[i], + backgroundColor = backColor, + lineTension = lTens, + stepped = Stepped, + label = Titles[i++] + }).ToList(); + + // 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 + { + stacked = Stacked, + type = "linear", + // type = "logarithmic", + display = true, + ticks = new + { + maxTicksLimit = 10 + }, + suggestedMin = MinValue != MaxValue ? MinValue : "auto", + suggestedMax = MinValue != MaxValue ? MaxValue : "auto" + }, + xAxes = new + { + type = "time", + distribution = "linear", + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + labels = Labels, + datasets = dataSetsList + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/PieChart.razor b/MP.IOC/Components/ChartJS/PieChart.razor new file mode 100644 index 00000000..5294db68 --- /dev/null +++ b/MP.IOC/Components/ChartJS/PieChart.razor @@ -0,0 +1,98 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public string Title { get; set; } = "DEMO Pie Chart"; + + [Parameter] + public string LegendPos { get; set; } = "right"; + + [Parameter] + public List Data { get; set; } = new List(); + + [Parameter] + public List Labels { get; set; } = new List(); + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + /// + /// 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) + { + 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() + { + // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js + var config = new + { + type = "pie", + options = new + { + responsive = true, + plugins = new + { + legend = new + { + position = LegendPos + }, + title = new + { + display = true, + text = Title + } + }, + Animation = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}", + HoverBorderWidth = 3 + }, + data = new + { + labels = Labels.ToArray(), + datasets = new[] + { + new + { + data = Data, + borderColor= lineColor, + backgroundColor= backColor + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/ChartJS/StepLine.razor b/MP.IOC/Components/ChartJS/StepLine.razor new file mode 100644 index 00000000..ff48aa1e --- /dev/null +++ b/MP.IOC/Components/ChartJS/StepLine.razor @@ -0,0 +1,94 @@ +@using MP.Data +@inject IJSRuntime JSRuntime + + + +@code { + + [Parameter] + public string Id { get; set; } = "MyTs"; + + [Parameter] + public List DataTS { get; set; } = null!; + + [Parameter] + public List lineColor { get; set; } = new List(); + + [Parameter] + public List backColor { get; set; } = new List(); + + [Parameter] + public double AspRatio { get; set; } = 0; + + /// + /// 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) + { + 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() + { + // 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 = false, + AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}" + }, + data = new + { + datasets = new[] + { + new + { + data = DataTS, + borderColor= lineColor, + backgroundColor= backColor, + lineTension= 0, + stepped= true, + label= "Temperatura Rilevata" + } + } + } + }; + await Task.Delay(50); + await JSRuntime.InvokeVoidAsync("setup", Id, config); + } +} \ No newline at end of file diff --git a/MP.IOC/Components/Compo/ParetoDetail.razor b/MP.IOC/Components/Compo/ParetoDetail.razor index e98eb733..1285c8d6 100644 --- a/MP.IOC/Components/Compo/ParetoDetail.razor +++ b/MP.IOC/Components/Compo/ParetoDetail.razor @@ -7,8 +7,6 @@
    - @*
  • -
  • *@ @foreach (var itemDet in ListPaged) {
  • @@ -20,8 +18,6 @@
  • } - @*
  • -
  • *@