inizio gestione aggiunta chart

EgwCoreLib.BlazorTest/EgwCoreLib.BlazorTest.csproj

@@ -13,6 +13,12 @@
 
   <ItemGroup>
     <None Include="compilerconfig.json" />
+    <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" />
   </ItemGroup>
 
   <ItemGroup>

EgwCoreLib.BlazorTest/Pages/TestCompo.razor

@@ -1,11 +1,12 @@
 @page "/TestCompo"
+@using EgwCoreLib.Razor.Data;
 @using EgwCoreLib.Utils;
 
 <PageTitle>Test</PageTitle>
 
 <h3>TestCompo</h3>
 
-<div class="row">
+@*<div class="row">
     <div class="col-6">
         @if (periodo != null)
         {
@@ -17,14 +18,52 @@
     <div class="col-6">
         <PeriodoSel E_PeriodoSel="setPeriodo" CurrPeriodo="@periodo"></PeriodoSel>
     </div>
-</div>
+</div>*@
+
+<Doughnut Type="@Doughnut.ChartType.Doughnut" Data="@Data.ToArray()" BackgroundColor="@colors"></Doughnut>
 
 @code {
+#if false
+
     protected DtUtils.Periodo? periodo { get; set; } = new DtUtils.Periodo(DtUtils.PeriodSet.ThisTrim);
 
     protected async Task setPeriodo(DtUtils.Periodo newPeriodo)
     {
-        await Task.Delay(1);
-        periodo = newPeriodo;
+    await Task.Delay(1);
+    periodo = newPeriodo;
     }
+#endif
+
+    public List<DoughnutStyling> colors = new List<DoughnutStyling>();
+
+    public List<double> Data = new List<double>();
+
+    public List<string> Labels = new List<string>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await Task.Delay(1);
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await ReloadData();
+        await Task.Delay(1);
+    }
+
+    protected async Task ReloadData()
+    {
+        Data.Clear();
+        Labels.Clear();
+        colors.Clear();
+        for (int x = 0; x < 5; x++)
+        {
+            Data.Add(x);
+            Labels.Add($"test n#: {x} - {x}min");
+            colors.Add(new DoughnutStyling("orange", "ccc"));
+            colors.Add(new DoughnutStyling("#2874A6", "ccc"));
+        }
+        await Task.Delay(1);
+    }
+
 }

EgwCoreLib.BlazorTest/Pages/_Layout.cshtml

@@ -29,5 +29,8 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+
+    <script src="~/lib/chart.js"></script>
+    <script src="~/lib/chartBoot.js"></script>
 </body>
 </html>

EgwCoreLib.BlazorTest/libman.json

@@ -9,6 +9,16 @@
     {
       "library": "font-awesome@6.3.0",
       "destination": "wwwroot/lib/font-awesome/"
+    },
+    {
+      "library": "Chart.js@4.3.0",
+      "destination": "wwwroot/lib/Chart.js/",
+      "files": [
+        "chart.min.js",
+        "helpers.min.js",
+        "helpers.js",
+        "chart.js"
+      ]
     }
   ]
 }

EgwCoreLib.BlazorTest/wwwroot/lib/Chart.js/helpers.esm.js

@@ -0,0 +1,7 @@
+/*!
+ * Chart.js v3.7.0
+ * https://www.chartjs.org
+ * (c) 2021 Chart.js Contributors
+ * Released under the MIT License
+ */
+export { H as HALF_PI, aX as INFINITY, P as PI, aW as PITAU, aZ as QUARTER_PI, aY as RAD_PER_DEG, T as TAU, a_ as TWO_THIRDS_PI, Q as _addGrace, V as _alignPixel, a0 as _alignStartEnd, p as _angleBetween, a$ as _angleDiff, _ as _arrayUnique, a6 as _attachContext, aq as _bezierCurveTo, an as _bezierInterpolation, av as _boundSegment, al as _boundSegments, a3 as _capitalize, ak as _computeSegments, a7 as _createResolver, aH as _decimalPlaces, aP as _deprecated, a8 as _descriptors, af as _elementsEqual, M as _factorize, aJ as _filterBetween, F as _getParentNode, U as _int16Range, ah as _isBetween, ag as _isClickEvent, K as _isDomSupported, z as _isPointInArea, w as _limitValue, aI as _longestText, aK as _lookup, x as _lookupByKey, S as _measureText, aN as _merger, aO as _mergerIf, aw as _normalizeAngle, ao as _pointInLine, ai as _readValueToProps, A as _rlookupByKey, aD as _setMinAndMaxByKey, am as _steppedInterpolation, ap as _steppedLineTo, az as _textX, $ as _toLeftRightCenter, aj as _updateBezierControlPoints, as as addRoundedRectPath, aG as almostEquals, aF as almostWhole, O as callback, ad as clearCanvas, W as clipArea, aM as clone, c as color, h as createContext, ab as debounce, j as defined, aC as distanceBetweenPoints, ar as drawPoint, D as each, e as easingEffects, N as finiteOrDefault, aU as fontString, o as formatNumber, B as getAngleFromPoint, aL as getHoverColor, E as getMaximumSize, y as getRelativePosition, ax as getRtlAdapter, aT as getStyle, b as isArray, g as isFinite, a5 as isFunction, k as isNullOrUndef, q as isNumber, i as isObject, l as listenArrayEvents, L as log10, a2 as merge, a9 as mergeIf, aE as niceNum, aB as noop, ay as overrideTextDirection, G as readUsedSize, X as renderText, r as requestAnimFrame, a as resolve, f as resolveObjectKey, aA as restoreTextDirection, ac as retinaScale, ae as setsEqual, s as sign, aR as splineCurve, aS as splineCurveMonotone, J as supportsEventListenerOptions, I as throttled, R as toDegrees, n as toDimension, Z as toFont, aQ as toFontString, aV as toLineHeight, C as toPadding, m as toPercentage, t as toRadians, at as toTRBL, au as toTRBLCorners, aa as uid, Y as unclipArea, u as unlistenArrayEvents, v as valueOrDefault } from './chunks/helpers.segment.js';

EgwCoreLib.BlazorTest/wwwroot/lib/Chart.js/helpers.esm.min.js

@@ -0,0 +1 @@
+export{H as HALF_PI,aX as INFINITY,P as PI,aW as PITAU,aZ as QUARTER_PI,aY as RAD_PER_DEG,T as TAU,a_ as TWO_THIRDS_PI,Q as _addGrace,V as _alignPixel,a0 as _alignStartEnd,p as _angleBetween,a$ as _angleDiff,_ as _arrayUnique,a6 as _attachContext,aq as _bezierCurveTo,an as _bezierInterpolation,av as _boundSegment,al as _boundSegments,a3 as _capitalize,ak as _computeSegments,a7 as _createResolver,aH as _decimalPlaces,aP as _deprecated,a8 as _descriptors,af as _elementsEqual,M as _factorize,aJ as _filterBetween,F as _getParentNode,U as _int16Range,ah as _isBetween,ag as _isClickEvent,K as _isDomSupported,z as _isPointInArea,w as _limitValue,aI as _longestText,aK as _lookup,x as _lookupByKey,S as _measureText,aN as _merger,aO as _mergerIf,aw as _normalizeAngle,ao as _pointInLine,ai as _readValueToProps,A as _rlookupByKey,aD as _setMinAndMaxByKey,am as _steppedInterpolation,ap as _steppedLineTo,az as _textX,$ as _toLeftRightCenter,aj as _updateBezierControlPoints,as as addRoundedRectPath,aG as almostEquals,aF as almostWhole,O as callback,ad as clearCanvas,W as clipArea,aM as clone,c as color,h as createContext,ab as debounce,j as defined,aC as distanceBetweenPoints,ar as drawPoint,D as each,e as easingEffects,N as finiteOrDefault,aU as fontString,o as formatNumber,B as getAngleFromPoint,aL as getHoverColor,E as getMaximumSize,y as getRelativePosition,ax as getRtlAdapter,aT as getStyle,b as isArray,g as isFinite,a5 as isFunction,k as isNullOrUndef,q as isNumber,i as isObject,l as listenArrayEvents,L as log10,a2 as merge,a9 as mergeIf,aE as niceNum,aB as noop,ay as overrideTextDirection,G as readUsedSize,X as renderText,r as requestAnimFrame,a as resolve,f as resolveObjectKey,aA as restoreTextDirection,ac as retinaScale,ae as setsEqual,s as sign,aR as splineCurve,aS as splineCurveMonotone,J as supportsEventListenerOptions,I as throttled,R as toDegrees,n as toDimension,Z as toFont,aQ as toFontString,aV as toLineHeight,C as toPadding,m as toPercentage,t as toRadians,at as toTRBL,au as toTRBLCorners,aa as uid,Y as unclipArea,u as unlistenArrayEvents,v as valueOrDefault}from"./chunks/helpers.segment.js";

EgwCoreLib.BlazorTest/wwwroot/lib/chartBoot.js

@@ -0,0 +1,12 @@
+///Setup del chart desiderato con id univoco
+window.setup = (id, config) => {
+    var ctx = document.getElementById(id);
+    if (window['myChart'] instanceof Chart) {
+        window['myChart'].destroy();
+        window['myChart'] = new Chart(ctx, config);
+    }
+    else {
+        window['myChart'] = new Chart(ctx, config);
+    }
+
+}

EgwCoreLib.Razor/Chart.razor

@@ -7,7 +7,8 @@
     public enum ChartType
     {
         Pie,
-        Bar
+        Bar,
+        doughnut
     }
 
     [Parameter]

EgwCoreLib.Razor/Data/DoughnutStyling.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace EgwCoreLib.Razor.Data
+{
+    public class DoughnutStyling
+    {
+        public string color { get; set; }
+        public string border { get; set; }
+
+        public DoughnutStyling(string color, string border)
+        {
+            this.color = color;
+            this.border = border;
+        }
+    }
+}

EgwCoreLib.Razor/Doughnut.razor

@@ -0,0 +1,54 @@
+@using EgwCoreLib.Razor.Data;
+@using Microsoft.JSInterop;
+
+<h3>Doughnut</h3>
+
+@code {
+    [Inject]
+    private IJSRuntime JSRuntime { get; set; } = null!;
+
+
+    public enum ChartType
+    {
+        Pie,
+        Bar,
+        Doughnut
+    }
+
+    //[Parameter]
+    public string Id { get; set; } = "myChart";
+
+    [Parameter]
+    public ChartType Type { get; set; }
+
+    [Parameter]
+    public double[] Data { get; set; } = null!;
+    [Parameter]
+    public List<DoughnutStyling> BackgroundColor { get; set; } = null!;
+
+    [Parameter]
+    public string[] Labels { get; set; } = null!;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var config = new
+        {
+            Type = Type.ToString().ToLower(),
+            Options = new
+            {
+                Responsive = true,
+            },
+            Data = new
+            {
+                Datasets = new[]
+                {
+                    new { Data = Data, BackgroundColor = BackgroundColor.Select(x=>x.color), borderColor = BackgroundColor.Select(x=>x.border), borderWidth= 0, offset= 1, borderRadius = 0
+    }
+},
+                Labels = Labels
+            }
+        };
+
+        await JSRuntime.InvokeVoidAsync("setup", Id, config);
+    }
+}