feat(Chart): add AddDataset method

Author: ArgoZhang

src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.cs

@@ -1,4 +1,4 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
@@ -131,6 +131,8 @@ public partial class Chart
 
     private bool UpdateDataSource { get; set; }
 
+    private ChartDataSource? _ds = null;
+
     /// <summary>
     /// OnInitialized 方法
     /// </summary>
@@ -156,20 +158,19 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 throw new InvalidOperationException($"{nameof(OnInitAsync)} parameter must be set. {nameof(OnInitAsync)} 回调方法必须设置");
             }
 
-            ChartDataSource? ds = null;
             if (OnInitAsync != null)
             {
-                ds = await OnInitAsync();
-                UpdateOptions(ds);
+                _ds = await OnInitAsync();
+                UpdateOptions(_ds);
 
                 if (Height != null && Width != null)
                 {
                     //设置了高度和宽度,会自动禁用约束图表比例,图表充满容器
-                    ds.Options.MaintainAspectRatio = false;
+                    _ds.Options.MaintainAspectRatio = false;
                 }
             }
 
-            await InvokeVoidAsync("init", Id, Interop, nameof(Completed), ds);
+            await InvokeVoidAsync("init", Id, Interop, nameof(Completed), _ds);
         }
     }
 
@@ -200,6 +201,70 @@ public async Task OnClickCallback(int datasetIndex, int index)
         }
     }
 
+    /// <summary>
+    /// 增加数据集
+    /// </summary>
+    /// <param name="dataset"></param>
+    /// <param name="index"></param>
+    /// <returns></returns>
+    public async Task AddDataset(ChartDataset dataset, int? index = null)
+    {
+        if (_ds == null)
+        {
+            if (OnInitAsync != null)
+            {
+                _ds = await OnInitAsync();
+                UpdateOptions(_ds);
+            }
+        }
+
+        if (_ds != null)
+        {
+            if (index.HasValue)
+            {
+                _ds.Data.Insert(index.Value, dataset);
+            }
+            else
+            {
+                _ds.Data.Add(dataset);
+            }
+            await InvokeVoidAsync("update", Id, _ds, ChartAction.AddDataset.ToDescriptionString());
+
+            if (OnAfterUpdateAsync != null)
+            {
+                await OnAfterUpdateAsync(ChartAction.AddDataset);
+            }
+        }
+    }
+
+    /// <summary>
+    /// 删除数据集
+    /// </summary>
+    /// <param name="index"></param>
+    /// <returns></returns>
+    public async Task RemoveDatasetAt(int index)
+    {
+        if (_ds == null)
+        {
+            if (OnInitAsync != null)
+            {
+                _ds = await OnInitAsync();
+                UpdateOptions(_ds);
+            }
+        }
+
+        if (_ds != null)
+        {
+            _ds.Data.RemoveAt(index);
+        }
+        await InvokeVoidAsync("update", Id, _ds, ChartAction.RemoveDataset.ToDescriptionString());
+
+        if (OnAfterUpdateAsync != null)
+        {
+            await OnAfterUpdateAsync(ChartAction.RemoveDataset);
+        }
+    }
+
     /// <summary>
     /// 更新图表方法
     /// </summary>
@@ -210,7 +275,7 @@ public async Task Update(ChartAction action)
             var ds = await OnInitAsync();
             UpdateOptions(ds);
 
-            await InvokeVoidAsync("update", Id, Interop, ds, action.ToDescriptionString(), Angle);
+            await InvokeVoidAsync("update", Id, ds, action.ToDescriptionString(), Angle);
 
             if (OnAfterUpdateAsync != null)
             {

src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js

@@ -414,10 +414,10 @@ const getChartOption = function (option) {
 
 const updateChart = function (config, option) {
     if (option.updateMethod === "addDataset") {
-        config.data.datasets.push(option.data.datasets.pop())
+        config.data.datasets = option.data.datasets;
     }
     else if (option.updateMethod === "removeDataset") {
-        config.data.datasets.pop()
+        config.data.datasets = option.data.datasets;
     }
     else if (option.updateMethod === "addData") {
         if (config.data.datasets.length > 0) {
@@ -472,7 +472,7 @@ export function init(id, invoke, method, option) {
     }
     const el = document.getElementById(id);
     const chart = new Chart(el.getElementsByTagName('canvas'), op)
-    Data.set(id, chart)
+    Data.set(id, { invoke, chart })
 
     if (op.options.height !== null) {
         chart.canvas.parentNode.style.height = op.options.height
@@ -490,8 +490,8 @@ export function init(id, invoke, method, option) {
     EventHandler.on(window, 'resize', chart.resizeHandler)
 }
 
-export function update(id, invoke, option, method, angle) {
-    const chart = Data.get(id)
+export function update(id, option, method, angle) {
+    const { invoke, chart } = Data.get(id)
     let op = getChartOption(option);
     handlerClickData(invoke, op, option.options.onClickDataMethod);
     op.angle = angle

src/components/BootstrapBlazor.Chart/Components/Chart/ChartDataSource.cs

@@ -1,4 +1,4 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
@@ -26,7 +26,7 @@ public class ChartDataSource
     /// 传递给 JS 的配置装箱实例，内部使用，添加数据集请使用 <see cref="Data"/> 属性。
     /// </summary>
     [JsonPropertyName("data")]
-    public IEnumerable<object> DataJS { get => Data.Cast<object>().ToList(); }
+    public IEnumerable<object> DataJS => Data.Cast<object>().ToList();
 
     /// <summary>
     /// 获得 组件配置项 设置标题 轴坐标等