doc: update the chart component Bubble demos (#908)

Co-authored-by: Argo Zhang <argo@live.ca>

src/BootstrapBlazor.Shared/Demos/Charts/Bubble/BubbleBarAspectRatio.razor

@@ -0,0 +1,33 @@
+<Chart ChartType="ChartType.Bubble" OnInitAsync="@OnInit" Height="500px" Width="500px" />
+
+@code {
+    private Random Randomer { get; } = new();
+
+    private int BubbleDatasetCount = 2;
+
+    private int BubbleDataCount = 7;
+
+    private Task<ChartDataSource> OnInit()
+    {
+        var ds = new ChartDataSource
+        {
+            Labels = Enumerable.Range(1, BubbleDataCount).Select(i => i.ToString())
+        };
+        ds.Options.Title = "Bubble chart";
+
+        for (var index = 0; index < BubbleDatasetCount; index++)
+        {
+            ds.Data.Add(new ChartDataset()
+            {
+                Label = $"Set {index}",
+                Data = Enumerable.Range(1, BubbleDataCount).Select(i => new
+                {
+                    x = Randomer.Next(10, 40),
+                    y = Randomer.Next(10, 40),
+                    r = Randomer.Next(1, 20)
+                })
+            });
+        }
+        return Task.FromResult(ds);
+    }
+}

src/BootstrapBlazor.Shared/Demos/Charts/Bubble/BubbleNormal.razor

@@ -0,0 +1,83 @@
+@using BootstrapBlazor.Shared.Samples.Charts
+@using Utility = BootstrapBlazor.Shared.Samples.Charts.Utility;
+@inject IStringLocalizer<Bubble> Localizer
+
+<Chart ChartType="ChartType.Bubble" OnInitAsync="@OnInit" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="BubbleChart" />
+<div class="text-center mt-2 chart">
+    <div class="btn-group">
+        <button class="btn btn-primary" @onclick="e => Utility.RandomData(BubbleChart)"><i class="fa-regular fa-snowflake"></i><span>@Localizer["BubbleNormalRandomData"]</span></button>
+        <button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["BubbleNormalReload"]</span></button>
+        <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["BubbleNormalAddDataSet"]</span></button>
+        <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["BubbleNormalRemoveDataset"]</span></button>
+        <button class="btn btn-primary" @onclick="e => Utility.AddData(BubbleChart, ref BubbleDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["BubbleNormalAddData"]</span></button>
+        <button class="btn btn-primary" @onclick="e => Utility.RemoveData(BubbleChart, ref BubbleDataCount)"><i class="fa-solid fa-minus"></i><span>@Localizer["BubbleNormalRemoveData"]</span></button>
+    </div>
+</div>
+<BlockLogger @ref="Logger" class="mt-3" />
+
+@code {
+    private Random Randomer { get; } = new();
+
+    private int BubbleDatasetCount = 2;
+
+    private int BubbleDataCount = 7;
+
+    [NotNull]
+    private Chart? BubbleChart { get; set; }
+
+    [NotNull]
+    private BlockLogger? Logger { get; set; }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        base.OnAfterRender(firstRender);
+
+        if (firstRender)
+        {
+            Logger.Log("Bubble is loading data ...");
+        }
+    }
+
+    private Task OnAfterInit()
+    {
+        Logger.Log("Bubble is initialized");
+        return Task.CompletedTask;
+    }
+
+    private Task OnAfterUpdate(ChartAction action)
+    {
+        Logger.Log($"Bubble graph update data operation completed -- {action}");
+        return Task.CompletedTask;
+    }
+
+    private Task<ChartDataSource> OnInit()
+    {
+        var ds = new ChartDataSource
+        {
+            Labels = Enumerable.Range(1, BubbleDataCount).Select(i => i.ToString())
+        };
+        ds.Options.Title = "Bubble chart";
+
+        for (var index = 0; index < BubbleDatasetCount; index++)
+        {
+            ds.Data.Add(new ChartDataset()
+            {
+                Label = $"Set {index}",
+                Data = Enumerable.Range(1, BubbleDataCount).Select(i => new
+                {
+                    x = Randomer.Next(10, 40),
+                    y = Randomer.Next(10, 40),
+                    r = Randomer.Next(1, 20)
+                })
+            });
+        }
+        return Task.FromResult(ds);
+    }
+
+    private Task OnReloadChart()
+    {
+        BubbleDataCount = Randomer.Next(5, 15);
+        BubbleChart?.Reload();
+        return Task.CompletedTask;
+    }
+}

src/BootstrapBlazor.Shared/Locales/en.json

@@ -443,16 +443,16 @@
     "Tips": "Pay attention to the order of adding reference JS files, otherwise the chart component will always be stuck in the 'loading' interface"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Bubble": {
-    "P1": "Bubble diagram",
-    "P2": "Change the chart to a <code>bubble</code> chart by setting <code>ChartType</code>",
-    "P3": "Random data",
-    "P4": "Add dataset",
-    "P5": "Remove dataset",
-    "P6": "Adding data",
-    "P7": "Remove data",
-    "Reload": "Reload",
-    "AspectRatio": "Chart ratio",
-    "AspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container"
+    "BubbleNormalTitle": "Bubble diagram",
+    "BubbleNormalIntro": "Change the chart to a <code>bubble</code> chart by setting <code>ChartType</code>",
+    "BubbleNormalRandomData": "Random data",
+    "BubbleNormalAddDataSet": "Add dataset",
+    "BubbleNormalRemoveDataset": "Remove dataset",
+    "BubbleNormalAddData": "Adding data",
+    "BubbleNormalRemoveData": "Remove data",
+    "BubbleNormalReload": "Reload",
+    "BubbleBarAspectRatioTitle": "Chart ratio",
+    "BubbleBarAspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Doughnut": {
     "DoughnutNormalTitle": "Doughnut diagram",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -443,16 +443,16 @@
     "Tips": "注意添加引用 JS 文件顺序,否则会导致图表组件一直卡在 '载入中' 界面"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Bubble": {
-    "P1": "Bubble 图",
-    "P2": "通过设置 <code>ChartType</code> 更改图表为 <code>bubble</code> 图",
-    "P3": "随机数据",
-    "P4": "添加数据集",
-    "P5": "移除数据集",
-    "P6": "添加数据",
-    "P7": "移除数据",
-    "Reload": "重载",
-    "AspectRatio": "图表比例",
-    "AspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器"
+    "BubbleNormalTitle": "Bubble 图",
+    "BubbleNormalIntro": "通过设置 <code>ChartType</code> 更改图表为 <code>bubble</code> 图",
+    "BubbleNormalRandomData": "随机数据",
+    "BubbleNormalAddDataSet": "添加数据集",
+    "BubbleNormalRemoveDataset": "移除数据集",
+    "BubbleNormalAddData": "添加数据",
+    "BubbleNormalRemoveData": "移除数据",
+    "BubbleNormalReload": "重载",
+    "BubbleBarAspectRatioTitle": "图表比例",
+    "BubbleBarAspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Doughnut": {
     "DoughnutNormalTitle": "Doughnut 图",

src/BootstrapBlazor.Shared/Samples/Charts/Bubble.razor

@@ -1,21 +1,14 @@
 @page "/charts/bubble"
 @inject IStringLocalizer<Bubble> Localizer
 
-<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Bubble">
-    <Chart ChartType="ChartType.Bubble" OnInitAsync="@OnInit" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="BubbleChart" />
-    <div class="text-center mt-2 chart">
-        <div class="btn-group">
-            <button class="btn btn-primary" @onclick="e => Utility.RandomData(BubbleChart)"><i class="fa-regular fa-snowflake"></i><span>@Localizer["P3"]</span></button>
-            <button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["Reload"]</span></button>
-            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["P4"]</span></button>
-            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["P5"]</span></button>
-            <button class="btn btn-primary" @onclick="e => Utility.AddData(BubbleChart, ref BubbleDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["P6"]</span></button>
-            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(BubbleChart, ref BubbleDataCount)"><i class="fa-solid fa-minus"></i><span>@Localizer["P7"]</span></button>
-        </div>
-    </div>
-    <BlockLogger @ref="Logger" class="mt-3" />
+<DemoBlock Title="@Localizer["BubbleNormalTitle"]"
+           Introduction="@Localizer["BubbleNormalIntro"]"
+           Name="Normal"
+           Demo="typeof(Demos.Charts.Bubble.BubbleNormal)">
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["AspectRatio"]" Introduction="@Localizer["AspectRatioIntro"]" Name="BarAspectRatio">
-    <Chart ChartType="ChartType.Bubble" OnInitAsync="@OnInit" Height="500px" Width="500px" />
+<DemoBlock Title="@Localizer["BubbleBarAspectRatioTitle"]"
+           Introduction="@Localizer["BubbleBarAspectRatioIntro"]"
+           Name="BarAspectRatio"
+           Demo="typeof(Demos.Charts.Bubble.BubbleBarAspectRatio)">
 </DemoBlock>

src/BootstrapBlazor.Shared/Samples/Charts/Bubble.razor.cs

@@ -1,81 +0,0 @@
-// 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/
-
-namespace BootstrapBlazor.Shared.Samples.Charts;
-
-/// <summary>
-/// 
-/// </summary>
-public partial class Bubble
-{
-    private Random Randomer { get; } = new Random();
-    private int BubbleDatasetCount = 2;
-    private int BubbleDataCount = 7;
-
-    [NotNull]
-    private Chart? BubbleChart { get; set; }
-
-    [NotNull]
-    private BlockLogger? Logger { get; set; }
-
-    /// <summary>
-    /// 
-    /// </summary>
-    /// <param name="firstRender"></param>
-    protected override void OnAfterRender(bool firstRender)
-    {
-        base.OnAfterRender(firstRender);
-
-        if (firstRender)
-        {
-            Logger.Log("Bubble is loading data ...");
-        }
-    }
-
-    private Task OnAfterInit()
-    {
-        Logger.Log("Bubble is initialized");
-        return Task.CompletedTask;
-    }
-
-    private Task OnAfterUpdate(ChartAction action)
-    {
-        Logger.Log($"Bubble graph update data operation completed -- {action}");
-        return Task.CompletedTask;
-    }
-
-    private Task<ChartDataSource> OnInit()
-    {
-        var ds = new ChartDataSource
-        {
-            Labels = Enumerable.Range(1, BubbleDataCount).Select(i => i.ToString())
-        };
-        ds.Options.Title = "Bubble chart";
-
-        for (var index = 0; index < BubbleDatasetCount; index++)
-        {
-            ds.Data.Add(new ChartDataset()
-            {
-                Label = $"Set {index}",
-                Data = Enumerable.Range(1, BubbleDataCount).Select(i => new
-                {
-                    x = Randomer.Next(10, 40),
-                    y = Randomer.Next(10, 40),
-                    r = Randomer.Next(1, 20)
-                })
-            });
-        }
-        return Task.FromResult(ds);
-    }
-
-    /// <summary>
-    /// 强刷控件,重新初始化控件外观
-    /// </summary>
-    private Task OnReloadChart()
-    {
-        BubbleDataCount = Randomer.Next(5, 15);
-        BubbleChart?.Reload();
-        return Task.CompletedTask;
-    }
-}