fix(module: core): update data after chart render (#133)

ant-design-blazor · Feb 2, 2024 · 514fbd8 · 514fbd8
1 parent ed13fda
commit 514fbd8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 14 deletions.
diff --git a/src/AntDesign.Charts/Components/Base/ChartComponentBase.cs b/src/AntDesign.Charts/Components/Base/ChartComponentBase.cs
@@ -84,6 +84,13 @@ public ChartComponentBase(string chartType, bool isNoDataRender = false)
         /// </summary>
         private bool IsCreated = false;
 
+        protected override void OnInitialized()
+        {
+            chartRef = DotNetObjectReference.Create(this);
+
+            base.OnInitialized();
+        }
+
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             await base.OnAfterRenderAsync(firstRender);
@@ -96,8 +103,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
                 if (Data != null || IsNoDataRender == true)
                     await Create();
-
-                if (OnFirstRender.HasDelegate) await OnFirstRender.InvokeAsync(this);
             }
         }
 
@@ -129,15 +134,7 @@ public async void Dispose()
         /// <returns></returns>
         private async Task Create()
         {
-            await JS.InvokeVoidAsync(InteropCreate, ChartType, Ref, Ref.Id, Config, OtherConfig, JsonConfig, JsConfig);
-            IsCreated = true;
-
-            if (OnCreateAfter.HasDelegate)
-                await OnCreateAfter.InvokeAsync(this);
-            chartRef = DotNetObjectReference.Create(this);
-
-            if (OnTitleClick.HasDelegate)
-                await JS.InvokeVoidAsync(InteropSetEvent, Ref.Id, "title:click", chartRef, nameof(JsTitleClick));
+            await JS.InvokeVoidAsync(InteropCreate, ChartType, Ref, Ref.Id, chartRef, Config, OtherConfig, JsonConfig, JsConfig);
         }
 
         #region 图表操作
@@ -190,7 +187,7 @@ public async Task UpdateChart(object csConfig = null, object csOtherConfig = nul
             {
                 //更新接口已经不存在了
                 //await JS.InvokeVoidAsync(InteropUpdateConfig, Ref.Id, Config, OtherConfig, all);
-                await JS.InvokeVoidAsync(InteropCreate, ChartType, Ref, Ref.Id, Config, OtherConfig, JsonConfig, JsConfig);
+                await JS.InvokeVoidAsync(InteropCreate, ChartType, Ref, Ref.Id, chartRef, Config, OtherConfig, JsonConfig, JsConfig);
             }
             else if ((csConfig == null || csOtherConfig == null || string.IsNullOrWhiteSpace(jsonConfig) || string.IsNullOrWhiteSpace(jsConfig)) && csData != null)
             {//更新数据
@@ -280,9 +277,23 @@ public async Task SetDefault(object condition, object style)
         [JSInvokable]
         public async Task JsTitleClick(System.Text.Json.JsonElement ev) { if (OnTitleClick.HasDelegate) await OnTitleClick.InvokeAsync(new ChartEvent(this, ev)); }
 
+        [JSInvokable]
+        public async Task AfterChartRender()
+        {
+            IsCreated = true;
 
-        #endregion
+            if (Data != null)
+            {
+                await JS.InvokeVoidAsync(InteropChangeData, Ref.Id, Data, true);
+            }
 
+            if (OnCreateAfter.HasDelegate)
+                await OnCreateAfter.InvokeAsync(this);
+
+            if (OnTitleClick.HasDelegate)
+                await JS.InvokeVoidAsync(InteropSetEvent, Ref.Id, "title:click", chartRef, nameof(JsTitleClick));
+        }
 
+        #endregion
     }
 }
diff --git a/src/AntDesign.Charts/wwwroot/ant-design-charts-blazor.js b/src/AntDesign.Charts/wwwroot/ant-design-charts-blazor.js
@@ -3,7 +3,7 @@
 
 window.AntDesignCharts = {
     interop: {
-        create: (type, domRef, domId, csConfig, others, jsonConfig, jsConfig) => {
+        create: (type, domRef, domId, chartRef, csConfig, others, jsonConfig, jsConfig) => {
             domRef.innerHTML = '';
 
             let config = {}
@@ -28,6 +28,15 @@ window.AntDesignCharts = {
 
             try {
                 const plot = new G2Plot[type](domRef, config);
+
+                plot.on('afterrender', (e) => {
+                    chartRef.invokeMethodAsync('AfterChartRender')
+                });
+
+                plot.on('beforedestroy', (e) => {
+                    chartRef.dispose();
+                });
+
                 plot.render();
                 window.AntDesignCharts.chartsContainer[domId] = plot;
                 console.log("create:" + domId)