Performance tests

Author: joadan

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

@@ -1,13 +1,16 @@
 @using System.Diagnostics
 @using System.Text.Json
 
+<Checkbox Switch @bind-Value=unMarshalledJS Label="Use UnMarshalledJS" />
+
 <ItemSelect Label="Datapoints" Items=points @bind-SelectedValue=pointsToLoad Changed=LoadData />
 
 
     <ApexChart TItem="TimeSeries"
                Title="Value"
                Height="150"
                XAxisType="XAxisType.Datetime"
+               UnMarshalledJS=unMarshalledJS
                @ref=chart>
 
 
@@ -32,8 +35,7 @@ else
 
 
 @code {
-
-
+    private bool unMarshalledJS = true;
     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,6 +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 object Width { get; set; }
         [Parameter] public object Height { get; set; }
         [Parameter] public EventCallback<SelectedData<TItem>> OnDataPointSelection { get; set; }
@@ -39,13 +40,16 @@ public partial class ApexChart<TItem> : IDisposable where TItem : class
         private string chartId;
         public string ChartId => ChartId;
         private IJSUnmarshalledRuntime jsUnmarshalled;
+        private IJSInProcessRuntime jsInprocess;
+
         private bool isWasm;
 
         protected override void OnInitialized()
         {
-            isWasm = this.JSRuntime is IJSInProcessRuntime;
+            isWasm = JSRuntime is IJSInProcessRuntime;
             if (isWasm)
             {
+                jsInprocess = (IJSInProcessRuntime)JSRuntime;
                 jsUnmarshalled = (IJSUnmarshalledRuntime)ServiceProvider.GetService(typeof(IJSUnmarshalledRuntime));
             }
         }
@@ -361,11 +365,17 @@ public async Task UpdateSeriesAsync(bool animate = true)
             Console.WriteLine($"Serialize {sw.ElapsedMilliseconds}");
 
 
-            if (jsUnmarshalled != null)
+            if (jsUnmarshalled != null && UnMarshalledJS)
             {
-                jsUnmarshalled.InvokeUnmarshalled<string, string, string, bool>("blazor_apexchart.testUnmarshalled", Options.Chart.Id, jsonSeries, animate.ToString());
+                jsUnmarshalled.InvokeUnmarshalled<string, string, string, string>("blazor_apexchart.testUnmarshalled", Options.Chart.Id, jsonSeries, animate.ToString().ToLower());
                 Console.WriteLine($"Invoke InvokeUnmarshalled {sw.ElapsedMilliseconds}");
 
+            }
+            else if (jsInprocess != null)
+            {
+                jsInprocess.InvokeVoid("blazor_apexchart.updateSeries", Options.Chart.Id, jsonSeries, animate);
+                Console.WriteLine($"Invoke Void {sw.ElapsedMilliseconds}");
+
             }
             else
             {
@@ -377,7 +387,7 @@ public async Task UpdateSeriesAsync(bool animate = true)
             sw.Stop();
         }
 
-     
+
         /// <summary>
         /// For no axis charts only provide the seriesIndex value, set dataPointIndex to null
         /// </summary>

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

@@ -1,13 +1,13 @@
 window.blazor_apexchart = {
-    
+
     testUnmarshalled(id, series, animate) {
-        console.log("Test Unmarshalled")
-        //console.log(series);
-        const chartId = BINDING.conv_string(id);
-        const data = BINDING.conv_string(series);
-        console.log("Data processed")
-        //const chartAnimate = BINDING.conv_bool(animate);
-        this.updateSeries(chartId, data, false);
+        //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);
     },
 
     getYAxisLabel(value, index, w) {