Testing JsInterop performance

Author: joadan

docs/BlazorApexCharts.Docs/Components/Features/Performance/Basic.razor

@@ -1,7 +1,9 @@
 @using System.Diagnostics
 @using System.Text.Json
 
-<Checkbox Switch @bind-Value=unMarshalledJS Label="Use UnMarshalledJS" />
+
+
+<ItemSelect Label="JS Interop Strategy" Items="@(EnumHelper.GetList<JSInteropStrategy>())" @bind-SelectedValue="@jsInteropStrategy" Changed=LoadData/>
 
 <ItemSelect Label="Datapoints" Items=points @bind-SelectedValue=pointsToLoad Changed=LoadData />
 
@@ -10,7 +12,7 @@
                Title="Value"
                Height="150"
                XAxisType="XAxisType.Datetime"
-               UnMarshalledJS=unMarshalledJS
+               JSInteropStrategy=jsInteropStrategy
                @ref=chart>
 
 
@@ -35,7 +37,7 @@ else
 
 
 @code {
-    private bool unMarshalledJS = true;
+    private JSInteropStrategy jsInteropStrategy = JSInteropStrategy.UnMarshalled;
     private ApexChart<TimeSeries> chart;
     private List<int> points = new List<int> { 100, 1000, 5000, 10000 };
     private int pointsToLoad = 100;

src/Blazor-ApexCharts/ApexChart.razor.cs

@@ -20,7 +20,7 @@ public partial class ApexChart<TItem> : IDisposable where TItem : class
         [Parameter] public string Title { get; set; }
         [Parameter] public XAxisType? XAxisType { get; set; }
         [Parameter] public bool Debug { get; set; }
-        [Parameter] public bool UnMarshalledJS { get; set; }
+        [Parameter] public JSInteropStrategy JSInteropStrategy { get; set; }
         [Parameter] public object Width { get; set; }
         [Parameter] public object Height { get; set; }
         [Parameter] public EventCallback<SelectedData<TItem>> OnDataPointSelection { get; set; }
@@ -365,16 +365,16 @@ public async Task UpdateSeriesAsync(bool animate = true)
             Console.WriteLine($"Serialize {sw.ElapsedMilliseconds}");
 
 
-            if (jsUnmarshalled != null && UnMarshalledJS)
+            if (jsUnmarshalled != null && JSInteropStrategy == JSInteropStrategy.UnMarshalled)
             {
                 jsUnmarshalled.InvokeUnmarshalled<string, string, string, string>("blazor_apexchart.testUnmarshalled", Options.Chart.Id, jsonSeries, animate.ToString().ToLower());
-                Console.WriteLine($"Invoke InvokeUnmarshalled {sw.ElapsedMilliseconds}");
+                Console.WriteLine($"Invoke Unmarshalled {sw.ElapsedMilliseconds}");
 
             }
-            else if (jsInprocess != null)
+            else if (jsInprocess != null && JSInteropStrategy == JSInteropStrategy.Sync)
             {
                 jsInprocess.InvokeVoid("blazor_apexchart.updateSeries", Options.Chart.Id, jsonSeries, animate);
-                Console.WriteLine($"Invoke Void {sw.ElapsedMilliseconds}");
+                Console.WriteLine($"Invoke Sync {sw.ElapsedMilliseconds}");
 
             }
             else

src/Blazor-ApexCharts/Models/JSInteropStrategy.cs

@@ -0,0 +1,10 @@
+
+namespace ApexCharts
+{
+    public enum JSInteropStrategy
+    {
+        UnMarshalled = 0,
+        Sync = 1,
+        Async = 2
+    }
+}

src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js

@@ -1,12 +1,7 @@
 window.blazor_apexchart = {
 
     testUnmarshalled(id, series, animate) {
-        //const chartId = BINDING.conv_string(id);
-        //const data = BINDING.conv_string(series);
-        //const animateString = BINDING.conv_string(animate);
-
         var chartAnimate = (BINDING.conv_string(animate).toLowerCase() === 'true');
-
         this.updateSeries(BINDING.conv_string(id), BINDING.conv_string(series), chartAnimate);
     },