From 77de17a784a072428eeb02c9008ca726f503a9bc Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Fri, 16 Feb 2024 12:18:02 +0800
Subject: [PATCH] update feat(DateTime): add Chart datalabel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 更改命名空间

* test: 移除命名空间

* refactor: 移除命名空间

* feat: 增加扩展方法

* refactor: 使用扩展方法

* test: 更新单元测试
---
 .../BootstrapBlazor.Server.csproj             |  3 +-
 .../Components/Samples/Charts/Bar.razor       | 11 +++++
 .../Components/Samples/Charts/Bar.razor.cs    | 48 ++++++++++++++++++-
 src/BootstrapBlazor.Server/Locales/en-US.json |  6 ++-
 src/BootstrapBlazor.Server/Locales/zh-CN.json |  6 ++-
 .../DateTimePicker/DatePickerBody.razor.cs    | 40 ++--------------
 .../InputNumber/BootstrapInputNumber.razor.cs |  1 -
 .../BootstrapBlazorOptionsExtensions.cs       |  2 +-
 .../Extensions/DateTimeExtensions.cs          | 42 ++++++++++++++++
 .../Components/Chart/Chart.razor.js           | 31 ++++++++++--
 .../Chart/ChartDataLabelPosition.cs           | 31 ++++++++++++
 .../Components/Chart/ChartDataset.cs          | 10 +++-
 .../Components/Chart/ChartOptions.cs          | 22 +++++++++
 .../wwwroot/js/chartjs-plugin-datalabels.js   |  7 +++
 .../UnitTest/Components/DateTimePickerTest.cs | 19 ++------
 .../Options/BootstrapBlazorOptionsTest.cs     |  2 -
 16 files changed, 213 insertions(+), 68 deletions(-)
 create mode 100644 src/BootstrapBlazor/Extensions/DateTimeExtensions.cs
 create mode 100644 src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartDataLabelPosition.cs
 create mode 100644 src/Extensions/Components/BootstrapBlazor.Chart/wwwroot/js/chartjs-plugin-datalabels.js

diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index dc5ae4040..f3d280b87 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -34,7 +34,7 @@
     <PackageReference Include="BootstrapBlazor.BarCode" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.BarcodeGenerator" Version="0.1.1" />
     <PackageReference Include="BootstrapBlazor.Bluetooth" Version="8.0.1" />
-    <PackageReference Include="BootstrapBlazor.Chart" Version="8.0.1" />
+    <!--<PackageReference Include="BootstrapBlazor.Chart" Version="8.0.1" />-->
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.CodeEditor" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="8.0.0" />
@@ -64,6 +64,7 @@
 
   <ItemGroup>
     <ProjectReference Include="..\BootstrapBlazor\BootstrapBlazor.csproj" />
+    <ProjectReference Include="..\Extensions\Components\BootstrapBlazor.Chart\BootstrapBlazor.Chart.csproj" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor b/src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor
index 556df7c7a..2a24339d3 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor
@@ -47,3 +47,14 @@
            Name="BarAspectRatio">
     <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitAspectRatio(true)" Title="Aspect Ratio Demo" Height="500px" Width="500px" />
 </DemoBlock>
+<DemoBlock Title="@Localizer["BarShowDataLabelTitle"]"
+           Introduction="@Localizer["BarShowDataLabelIntro"]"
+           Name="BarShowDataLabel">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitShowDataLabel(true)" Title="ShowDataLabel Demo" Height="500px" Width="500px" />
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["BarColorSeparatelyTitle"]"
+           Introduction="@Localizer["BarColorSeparatelyIntro"]"
+           Name="BarColorSeparately">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitBarColorSeparately(true)" Title="BarColorSeparately Demo" Height="500px" Width="500px" />
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs
index 53deddaf9..aae27d225 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs
@@ -2,6 +2,8 @@
 // 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/
 
+using DocumentFormat.OpenXml.Office2010.Excel;
+
 namespace BootstrapBlazor.Server.Components.Samples.Charts;
 
 /// <summary>
@@ -53,7 +55,6 @@ public partial class Bar
         {
             ds.Options.Title = "Bar Histogram";
         }
-
         ds.Options.X.Title = "days";
         ds.Options.Y.Title = "Numerical value";
         ds.Options.X.Stacked = stacked;
@@ -177,4 +178,49 @@ public partial class Bar
         }
         return Task.FromResult(ds);
     }
+
+    private Task<ChartDataSource> OnInitShowDataLabel(bool showDataLabel, bool setTitle = true)
+    {
+        var ds = new ChartDataSource();
+        if (setTitle)
+        {
+            ds.Options.Title = "Bar Histogram";
+        }
+        ds.Options.ShowLegend = false;
+        ds.Options.ShowDataLabel = showDataLabel;
+        ds.Options.Align = ChartDataLabelPosition.Start;
+        ds.Options.Anchor = ChartDataLabelPosition.End;
+        ds.Options.ChartDataLabelColor = "black";
+        ds.Options.X.Title = "days";
+        ds.Options.Y.Title = "Numerical value";
+        ds.Labels = Enumerable.Range(1, BarDataCount).Select(i => i.ToString());
+        ds.Data.Add(new ChartDataset()
+        {
+            Label = $"Set {0}",
+            Data = Enumerable.Range(1, BarDataCount).Select(i => Randomer.Next(20, 37)).Cast<object>()
+        });
+        return Task.FromResult(ds);
+    }
+
+    private Task<ChartDataSource> OnInitBarColorSeparately(bool barColorSeparately, bool setTitle = true)
+    {
+        var ds = new ChartDataSource();
+        if (setTitle)
+        {
+            ds.Options.Title = "Bar Histogram";
+        }
+        ds.Options.ShowLegend = false;
+        ds.Options.BarColorSeparately = barColorSeparately;
+        ds.Options.X.Title = "days";
+        ds.Options.Y.Title = "Numerical value";
+        ds.Labels = Enumerable.Range(1, BarDataCount).Select(i => i.ToString());
+        ds.Data.Add(new ChartDataset()
+        {
+            Label = $"Set {0}",
+            Data = Enumerable.Range(1, BarDataCount).Select(i => Randomer.Next(20, 37)).Cast<object>(),
+            BackgroundColor = ["rgb(54, 162, 235, 0.5)", "rgb(75, 192, 192, 0.5)", "rgb(255, 99, 132, 0.5)", "rgb(255, 159, 64, 0.5)", "rgb(255, 205, 86, 0.5)", "rgb(255, 99, 71, 0.5)", "rgb(255, 192, 203, 0.5)"],
+            BorderColor = ["rgb(54, 162, 235)", "rgb(75, 192, 192)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(255, 99, 71)", "rgb(255, 192, 203)"]
+        });
+        return Task.FromResult(ds);
+    }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index f92839a87..e0ad46b09 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -566,7 +566,11 @@
     "BarTwoYAxesTitle": "Double Y axis",
     "BarTwoYAxesIntro": "Show secondary Y axis: alignment, title and data group",
     "BarAspectRatioTitle": "Chart ratio",
-    "BarAspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container"
+    "BarAspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container",
+    "BarShowDataLabelTitle": "Display chart data values",
+    "BarShowDataLabelIntro": "By setting <code>ShowDataLabel</code> property，control whether to display chart data values",
+    "BarColorSeparatelyTitle": "Set bar chart colors separately",
+    "BarColorSeparatelyIntro": "By setting <code>BarColorSeparately</code> property，control whether to Set bar chart colors separately，and By setting <code>BackgroundColor</code> property, set bar chart color"
   },
   "BootstrapBlazor.Server.Components.Samples.Transitions": {
     "TransitionsTitle": "Transition effect",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index fc370a707..e242f50b5 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -566,7 +566,11 @@
     "BarTwoYAxesTitle": "双Y轴",
     "BarTwoYAxesIntro": "显示第二Y轴:对齐方式,标题和对应数据组",
     "BarAspectRatioTitle": "图表比例",
-    "BarAspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器"
+    "BarAspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器",
+    "BarShowDataLabelTitle": "显示图表数据值",
+    "BarShowDataLabelIntro": "通过设置<code>ShowDataLabel</code> 属性，控制是否显示数据值",
+    "BarColorSeparatelyTitle": "单独设置柱状图颜色",
+    "BarColorSeparatelyIntro": "通过设置<code>BarColorSeparately</code>属性，控制是否单独设置柱状图颜色，以及通过<code>BackgroundColor</code> 集合设置柱状图颜色"
   },
   "BootstrapBlazor.Server.Components.Samples.Transitions": {
     "TransitionsTitle": "Transition 过渡效果",
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
index 21511d83a..d657b1c40 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
@@ -452,7 +452,7 @@ public partial class DatePickerBody
     private void OnClickPrevMonth()
     {
         ShowTimePicker = false;
-        CurrentDate = GetSafeMonthDateTime(CurrentDate, -1);
+        CurrentDate = CurrentDate.GetSafeMonthDateTime(-1);
         Ranger?.UpdateStart(CurrentDate);
     }
 
@@ -472,7 +472,7 @@ public partial class DatePickerBody
     private void OnClickNextMonth()
     {
         ShowTimePicker = false;
-        CurrentDate = GetSafeMonthDateTime(CurrentDate, 1);
+        CurrentDate = CurrentDate.GetSafeMonthDateTime(1);
         Ranger?.UpdateEnd(CurrentDate);
     }
 
@@ -567,7 +567,7 @@ public partial class DatePickerBody
     /// </summary>
     /// <param name="month"></param>
     /// <returns></returns>
-    private DateTime GetMonth(int month) => GetSafeMonthDateTime(CurrentDate, month - CurrentDate.Month);
+    private DateTime GetMonth(int month) => CurrentDate.GetSafeMonthDateTime(month - CurrentDate.Month);
 
     /// <summary>
     /// 获取 月视图下的月份单元格样式
@@ -686,40 +686,6 @@ public partial class DatePickerBody
         return @base;
     }
 
-    /// <summary>
-    /// 
-    /// </summary>
-    /// <param name="dt"></param>
-    /// <param name="month"></param>
-    /// <returns></returns>
-    protected static DateTime GetSafeMonthDateTime(DateTime dt, int month)
-    {
-        var @base = dt;
-        if (month < 0)
-        {
-            if (DateTime.MinValue.AddMonths(0 - month) < dt)
-            {
-                @base = dt.AddMonths(month);
-            }
-            else
-            {
-                @base = DateTime.MinValue.Date;
-            }
-        }
-        else if (month > 0)
-        {
-            if (DateTime.MaxValue.AddMonths(0 - month) > dt)
-            {
-                @base = dt.AddMonths(month);
-            }
-            else
-            {
-                @base = DateTime.MaxValue.Date;
-            }
-        }
-        return @base;
-    }
-
     /// <summary>
     /// 
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
index 772a458be..3c7761b3a 100644
--- a/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
+++ b/src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor.cs
@@ -2,7 +2,6 @@
 // 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/
 
-using BootstrapBlazor.Extensions;
 using Microsoft.Extensions.Localization;
 using System.Globalization;
 
diff --git a/src/BootstrapBlazor/Extensions/BootstrapBlazorOptionsExtensions.cs b/src/BootstrapBlazor/Extensions/BootstrapBlazorOptionsExtensions.cs
index 96be72754..1224db8b1 100644
--- a/src/BootstrapBlazor/Extensions/BootstrapBlazorOptionsExtensions.cs
+++ b/src/BootstrapBlazor/Extensions/BootstrapBlazorOptionsExtensions.cs
@@ -2,7 +2,7 @@
 // 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.Extensions;
+namespace BootstrapBlazor.Components;
 
 /// <summary>
 /// BootstrapBlazorOptions 配置类扩展方法
diff --git a/src/BootstrapBlazor/Extensions/DateTimeExtensions.cs b/src/BootstrapBlazor/Extensions/DateTimeExtensions.cs
new file mode 100644
index 000000000..5572c4fed
--- /dev/null
+++ b/src/BootstrapBlazor/Extensions/DateTimeExtensions.cs
@@ -0,0 +1,42 @@
+// 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.Components;
+
+internal static class DateTimeExtensions
+{
+    /// <summary>
+    /// 获得安全的月份时间
+    /// </summary>
+    /// <param name="dt"></param>
+    /// <param name="month"></param>
+    /// <returns></returns>
+    public static DateTime GetSafeMonthDateTime(this DateTime dt, int month)
+    {
+        var @base = dt;
+        if (month < 0)
+        {
+            if (DateTime.MinValue.AddMonths(0 - month) < dt)
+            {
+                @base = dt.AddMonths(month);
+            }
+            else
+            {
+                @base = DateTime.MinValue.Date;
+            }
+        }
+        else if (month > 0)
+        {
+            if (DateTime.MaxValue.AddMonths(0 - month) > dt)
+            {
+                @base = dt.AddMonths(month);
+            }
+            else
+            {
+                @base = DateTime.MaxValue.Date;
+            }
+        }
+        return @base;
+    }
+}
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
index 2db78cbf4..70c73281f 100644
--- a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
@@ -1,6 +1,8 @@
 import '../../js/chart.js'
+import '../../js/chartjs-plugin-datalabels.js'
 import Data from '../../../BootstrapBlazor/modules/data.js'
 import EventHandler from "../../../BootstrapBlazor/modules/event-handler.js"
+Chart.register(ChartDataLabels) //注册插件
 
 const chartOption = {
     options: {
@@ -165,12 +167,18 @@ const getChartOption = function (option) {
         config = {
             ...chartOption
         }
-        colorFunc = function (data) {
-            const color = chartColors[colors.shift()]
+        if (option.options.barColorSeparately) {
+            colorFunc = function (data) {
+                data.borderWidth = 1
+            }
+        } else {
+            colorFunc = function (data) {
+                const color = chartColors[colors.shift()]
 
-            data.backgroundColor = Chart.helpers.color(color).alpha(0.5).rgbString()
-            data.borderColor = color
-            data.borderWidth = 1
+                data.backgroundColor = Chart.helpers.color(color).alpha(0.5).rgbString()
+                data.borderColor = color
+                data.borderWidth = 1
+            }
         }
     }
     else if (option.type === 'pie' || option.type === 'doughnut') {
@@ -193,6 +201,7 @@ const getChartOption = function (option) {
             data.backgroundColor = colors.slice(0, data.data.length).map(function (name) {
                 return chartColors[name]
             })
+            data.borderColor = 'white'
         }
 
         if (option.type === 'doughnut') {
@@ -285,6 +294,18 @@ const getChartOption = function (option) {
                     title: {
                         display: option.options.title != null,
                         text: option.options.title
+
+                    },
+                    //配置datalabel显示
+                    datalabels: {
+                        anchor: option.options.anchor,
+                        align: option.options.align,
+                        formatter: Math.round,
+                        display: option.options.showDataLabel,
+                        color: option.options.chartDataLabelColor,
+                        font: {
+                            weight: 'bold'
+                        }
                     }
                 },
                 scales: scale
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartDataLabelPosition.cs b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartDataLabelPosition.cs
new file mode 100644
index 000000000..f5aa83aa4
--- /dev/null
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartDataLabelPosition.cs
@@ -0,0 +1,31 @@
+// 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/
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Chart DataLabel 对齐方式
+/// </summary>
+public enum ChartDataLabelPosition
+{
+    /// <summary>
+    /// 上
+    /// </summary>
+    [Description("start")]
+    Start = 1,
+
+    /// <summary>
+    /// 下
+    /// </summary>
+    [Description("center")]
+    Center = 2,
+
+    /// <summary>
+    /// 左
+    /// </summary>
+    [Description("end")]
+    End = 3,
+}
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartDataset.cs b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartDataset.cs
index 4cab654c0..47ebcd658 100644
--- a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartDataset.cs
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartDataset.cs
@@ -68,6 +68,12 @@ public class ChartDataset
     /// 获得/设置 折线图(Line) 宽度 默认 3 个像素
     /// </summary>
     public double BorderWidth { get; set; } = 3;
-
-
+    /// <summary>
+    /// 获得/设置 柱状图的颜色数组
+    /// </summary>
+    public string[] BackgroundColor { get; set; } = { "rgb(255, 205, 86, 0)" };
+    /// <summary>
+    /// 获得/设置 柱状图的边框颜色数组
+    /// </summary>
+    public string[] BorderColor { get; set; } = { "rgb(255, 205, 86, 0)" };
 }
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs
index c723f2182..7cb6b698a 100644
--- a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs
@@ -153,4 +153,26 @@ public class ChartOptions
     /// 获得/设置 X轴网格刻度线颜色
     /// </summary>
     public string? YScalesGridTickColor { get; set; }
+    /// <summary>
+    /// 获得/设置 是否显示柱状图数据值
+    /// </summary>
+    public bool ShowDataLabel { get; set; }
+    /// <summary>
+    /// 获得/设置 是否单独设置柱状图颜色
+    /// </summary>
+    public bool BarColorSeparately { get; set; }
+    /// <summary>
+    /// 获得/设置 柱状图数据值的对齐方式 默认中间对齐
+    /// </summary>
+    [JsonConverter(typeof(ChartEnumDescriptionConverter<ChartDataLabelPosition>))]
+    public ChartDataLabelPosition Align { get; set; } = ChartDataLabelPosition.Center;
+    /// <summary>
+    /// 获得/设置 柱状图数据值的位置 默认显示在顶部
+    /// </summary>
+    [JsonConverter(typeof(ChartEnumDescriptionConverter<ChartDataLabelPosition>))]
+    public ChartDataLabelPosition Anchor { get; set; } = ChartDataLabelPosition.End;
+    /// <summary>
+    /// 获得/设置 柱状图数据值的颜色
+    /// </summary>
+    public string ChartDataLabelColor { get; set; } = "rgb(75, 192, 192, 0.9)";
 }
diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/wwwroot/js/chartjs-plugin-datalabels.js b/src/Extensions/Components/BootstrapBlazor.Chart/wwwroot/js/chartjs-plugin-datalabels.js
new file mode 100644
index 000000000..77a0d51d0
--- /dev/null
+++ b/src/Extensions/Components/BootstrapBlazor.Chart/wwwroot/js/chartjs-plugin-datalabels.js
@@ -0,0 +1,7 @@
+/*!
+ * chartjs-plugin-datalabels v2.2.0
+ * https://chartjs-plugin-datalabels.netlify.app
+ * (c) 2017-2022 chartjs-plugin-datalabels contributors
+ * Released under the MIT license
+ */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chart.js/helpers"),require("chart.js")):"function"==typeof define&&define.amd?define(["chart.js/helpers","chart.js"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).ChartDataLabels=e(t.Chart.helpers,t.Chart)}(this,(function(t,e){"use strict";var r=function(){if("undefined"!=typeof window){if(window.devicePixelRatio)return window.devicePixelRatio;var t=window.screen;if(t)return(t.deviceXDPI||1)/(t.logicalXDPI||1)}return 1}(),a=function(e){var r,a=[];for(e=[].concat(e);e.length;)"string"==typeof(r=e.pop())?a.unshift.apply(a,r.split("\n")):Array.isArray(r)?e.push.apply(e,r):t.isNullOrUndef(e)||a.unshift(""+r);return a},o=function(t,e,r){var a,o=[].concat(e),n=o.length,i=t.font,l=0;for(t.font=r.string,a=0;a<n;++a)l=Math.max(t.measureText(o[a]).width,l);return t.font=i,{height:n*r.lineHeight,width:l}},n=function(t,e,r){return Math.max(t,Math.min(e,r))},i=function(t,e){var r,a,o,n,i=t.slice(),l=[];for(r=0,o=e.length;r<o;++r)n=e[r],-1===(a=i.indexOf(n))?l.push([n,1]):i.splice(a,1);for(r=0,o=i.length;r<o;++r)l.push([i[r],-1]);return l};function l(t,e){var r=e.x,a=e.y;if(null===r)return{x:0,y:-1};if(null===a)return{x:1,y:0};var o=t.x-r,n=t.y-a,i=Math.sqrt(o*o+n*n);return{x:i?o/i:0,y:i?n/i:-1}}function s(t,e,r){var a=0;return t<r.left?a|=1:t>r.right&&(a|=2),e<r.top?a|=8:e>r.bottom&&(a|=4),a}function u(t,e){var r,a,o=e.anchor,n=t;return e.clamp&&(n=function(t,e){for(var r,a,o,n=t.x0,i=t.y0,l=t.x1,u=t.y1,d=s(n,i,e),c=s(l,u,e);d|c&&!(d&c);)8&(r=d||c)?(a=n+(l-n)*(e.top-i)/(u-i),o=e.top):4&r?(a=n+(l-n)*(e.bottom-i)/(u-i),o=e.bottom):2&r?(o=i+(u-i)*(e.right-n)/(l-n),a=e.right):1&r&&(o=i+(u-i)*(e.left-n)/(l-n),a=e.left),r===d?d=s(n=a,i=o,e):c=s(l=a,u=o,e);return{x0:n,x1:l,y0:i,y1:u}}(n,e.area)),"start"===o?(r=n.x0,a=n.y0):"end"===o?(r=n.x1,a=n.y1):(r=(n.x0+n.x1)/2,a=(n.y0+n.y1)/2),function(t,e,r,a,o){switch(o){case"center":r=a=0;break;case"bottom":r=0,a=1;break;case"right":r=1,a=0;break;case"left":r=-1,a=0;break;case"top":r=0,a=-1;break;case"start":r=-r,a=-a;break;case"end":break;default:o*=Math.PI/180,r=Math.cos(o),a=Math.sin(o)}return{x:t,y:e,vx:r,vy:a}}(r,a,t.vx,t.vy,e.align)}var d=function(t,e){var r=(t.startAngle+t.endAngle)/2,a=Math.cos(r),o=Math.sin(r),n=t.innerRadius,i=t.outerRadius;return u({x0:t.x+a*n,y0:t.y+o*n,x1:t.x+a*i,y1:t.y+o*i,vx:a,vy:o},e)},c=function(t,e){var r=l(t,e.origin),a=r.x*t.options.radius,o=r.y*t.options.radius;return u({x0:t.x-a,y0:t.y-o,x1:t.x+a,y1:t.y+o,vx:r.x,vy:r.y},e)},h=function(t,e){var r=l(t,e.origin),a=t.x,o=t.y,n=0,i=0;return t.horizontal?(a=Math.min(t.x,t.base),n=Math.abs(t.base-t.x)):(o=Math.min(t.y,t.base),i=Math.abs(t.base-t.y)),u({x0:a,y0:o+i,x1:a+n,y1:o,vx:r.x,vy:r.y},e)},f=function(t,e){var r=l(t,e.origin);return u({x0:t.x,y0:t.y,x1:t.x+(t.width||0),y1:t.y+(t.height||0),vx:r.x,vy:r.y},e)},x=function(t){return Math.round(t*r)/r};function y(t,e){var r=e.chart.getDatasetMeta(e.datasetIndex).vScale;if(!r)return null;if(void 0!==r.xCenter&&void 0!==r.yCenter)return{x:r.xCenter,y:r.yCenter};var a=r.getBasePixel();return t.horizontal?{x:a,y:null}:{x:null,y:a}}function v(t,e,r){var a=r.backgroundColor,o=r.borderColor,n=r.borderWidth;(a||o&&n)&&(t.beginPath(),function(t,e,r,a,o,n){var i=Math.PI/2;if(n){var l=Math.min(n,o/2,a/2),s=e+l,u=r+l,d=e+a-l,c=r+o-l;t.moveTo(e,u),s<d&&u<c?(t.arc(s,u,l,-Math.PI,-i),t.arc(d,u,l,-i,0),t.arc(d,c,l,0,i),t.arc(s,c,l,i,Math.PI)):s<d?(t.moveTo(s,r),t.arc(d,u,l,-i,i),t.arc(s,u,l,i,Math.PI+i)):u<c?(t.arc(s,u,l,-Math.PI,0),t.arc(s,c,l,0,Math.PI)):t.arc(s,u,l,-Math.PI,Math.PI),t.closePath(),t.moveTo(e,r)}else t.rect(e,r,a,o)}(t,x(e.x)+n/2,x(e.y)+n/2,x(e.w)-n,x(e.h)-n,r.borderRadius),t.closePath(),a&&(t.fillStyle=a,t.fill()),o&&n&&(t.strokeStyle=o,t.lineWidth=n,t.lineJoin="miter",t.stroke()))}function b(t,e,r){var a=t.shadowBlur,o=r.stroked,n=x(r.x),i=x(r.y),l=x(r.w);o&&t.strokeText(e,n,i,l),r.filled&&(a&&o&&(t.shadowBlur=0),t.fillText(e,n,i,l),a&&o&&(t.shadowBlur=a))}var _=function(t,e,r,a){var o=this;o._config=t,o._index=a,o._model=null,o._rects=null,o._ctx=e,o._el=r};t.merge(_.prototype,{_modelize:function(r,a,n,i){var l,s=this,u=s._index,x=t.toFont(t.resolve([n.font,{}],i,u)),v=t.resolve([n.color,e.defaults.color],i,u);return{align:t.resolve([n.align,"center"],i,u),anchor:t.resolve([n.anchor,"center"],i,u),area:i.chart.chartArea,backgroundColor:t.resolve([n.backgroundColor,null],i,u),borderColor:t.resolve([n.borderColor,null],i,u),borderRadius:t.resolve([n.borderRadius,0],i,u),borderWidth:t.resolve([n.borderWidth,0],i,u),clamp:t.resolve([n.clamp,!1],i,u),clip:t.resolve([n.clip,!1],i,u),color:v,display:r,font:x,lines:a,offset:t.resolve([n.offset,4],i,u),opacity:t.resolve([n.opacity,1],i,u),origin:y(s._el,i),padding:t.toPadding(t.resolve([n.padding,4],i,u)),positioner:(l=s._el,l instanceof e.ArcElement?d:l instanceof e.PointElement?c:l instanceof e.BarElement?h:f),rotation:t.resolve([n.rotation,0],i,u)*(Math.PI/180),size:o(s._ctx,a,x),textAlign:t.resolve([n.textAlign,"start"],i,u),textShadowBlur:t.resolve([n.textShadowBlur,0],i,u),textShadowColor:t.resolve([n.textShadowColor,v],i,u),textStrokeColor:t.resolve([n.textStrokeColor,v],i,u),textStrokeWidth:t.resolve([n.textStrokeWidth,0],i,u)}},update:function(e){var r,o,n,i=this,l=null,s=null,u=i._index,d=i._config,c=t.resolve([d.display,!0],e,u);c&&(r=e.dataset.data[u],o=t.valueOrDefault(t.callback(d.formatter,[r,e]),r),(n=t.isNullOrUndef(o)?[]:a(o)).length&&(s=function(t){var e=t.borderWidth||0,r=t.padding,a=t.size.height,o=t.size.width,n=-o/2,i=-a/2;return{frame:{x:n-r.left-e,y:i-r.top-e,w:o+r.width+2*e,h:a+r.height+2*e},text:{x:n,y:i,w:o,h:a}}}(l=i._modelize(c,n,d,e)))),i._model=l,i._rects=s},geometry:function(){return this._rects?this._rects.frame:{}},rotation:function(){return this._model?this._model.rotation:0},visible:function(){return this._model&&this._model.opacity},model:function(){return this._model},draw:function(t,e){var r,a=t.ctx,o=this._model,i=this._rects;this.visible()&&(a.save(),o.clip&&(r=o.area,a.beginPath(),a.rect(r.left,r.top,r.right-r.left,r.bottom-r.top),a.clip()),a.globalAlpha=n(0,o.opacity,1),a.translate(x(e.x),x(e.y)),a.rotate(o.rotation),v(a,i.frame,o),function(t,e,r,a){var o,n=a.textAlign,i=a.color,l=!!i,s=a.font,u=e.length,d=a.textStrokeColor,c=a.textStrokeWidth,h=d&&c;if(u&&(l||h))for(r=function(t,e,r){var a=r.lineHeight,o=t.w,n=t.x;return"center"===e?n+=o/2:"end"!==e&&"right"!==e||(n+=o),{h:a,w:o,x:n,y:t.y+a/2}}(r,n,s),t.font=s.string,t.textAlign=n,t.textBaseline="middle",t.shadowBlur=a.textShadowBlur,t.shadowColor=a.textShadowColor,l&&(t.fillStyle=i),h&&(t.lineJoin="round",t.lineWidth=c,t.strokeStyle=d),o=0,u=e.length;o<u;++o)b(t,e[o],{stroked:h,filled:l,w:r.w,x:r.x,y:r.y+r.h*o})}(a,o.lines,i.text,o),a.restore())}});var p=Number.MIN_SAFE_INTEGER||-9007199254740991,g=Number.MAX_SAFE_INTEGER||9007199254740991;function m(t,e,r){var a=Math.cos(r),o=Math.sin(r),n=e.x,i=e.y;return{x:n+a*(t.x-n)-o*(t.y-i),y:i+o*(t.x-n)+a*(t.y-i)}}function w(t,e){var r,a,o,n,i,l=g,s=p,u=e.origin;for(r=0;r<t.length;++r)o=(a=t[r]).x-u.x,n=a.y-u.y,i=e.vx*o+e.vy*n,l=Math.min(l,i),s=Math.max(s,i);return{min:l,max:s}}function M(t,e){var r=e.x-t.x,a=e.y-t.y,o=Math.sqrt(r*r+a*a);return{vx:(e.x-t.x)/o,vy:(e.y-t.y)/o,origin:t,ln:o}}var k=function(){this._rotation=0,this._rect={x:0,y:0,w:0,h:0}};function $(t,e,r){var a=e.positioner(t,e),o=a.vx,n=a.vy;if(!o&&!n)return{x:a.x,y:a.y};var i=r.w,l=r.h,s=e.rotation,u=Math.abs(i/2*Math.cos(s))+Math.abs(l/2*Math.sin(s)),d=Math.abs(i/2*Math.sin(s))+Math.abs(l/2*Math.cos(s)),c=1/Math.max(Math.abs(o),Math.abs(n));return u*=o*c,d*=n*c,u+=e.offset*o,d+=e.offset*n,{x:a.x+u,y:a.y+d}}t.merge(k.prototype,{center:function(){var t=this._rect;return{x:t.x+t.w/2,y:t.y+t.h/2}},update:function(t,e,r){this._rotation=r,this._rect={x:e.x+t.x,y:e.y+t.y,w:e.w,h:e.h}},contains:function(t){var e=this,r=e._rect;return!((t=m(t,e.center(),-e._rotation)).x<r.x-1||t.y<r.y-1||t.x>r.x+r.w+2||t.y>r.y+r.h+2)},intersects:function(t){var e,r,a,o=this._points(),n=t._points(),i=[M(o[0],o[1]),M(o[0],o[3])];for(this._rotation!==t._rotation&&i.push(M(n[0],n[1]),M(n[0],n[3])),e=0;e<i.length;++e)if(r=w(o,i[e]),a=w(n,i[e]),r.max<a.min||a.max<r.min)return!1;return!0},_points:function(){var t=this,e=t._rect,r=t._rotation,a=t.center();return[m({x:e.x,y:e.y},a,r),m({x:e.x+e.w,y:e.y},a,r),m({x:e.x+e.w,y:e.y+e.h},a,r),m({x:e.x,y:e.y+e.h},a,r)]}});var C={prepare:function(t){var e,r,a,o,n,i=[];for(e=0,a=t.length;e<a;++e)for(r=0,o=t[e].length;r<o;++r)n=t[e][r],i.push(n),n.$layout={_box:new k,_hidable:!1,_visible:!0,_set:e,_idx:n._index};return i.sort((function(t,e){var r=t.$layout,a=e.$layout;return r._idx===a._idx?a._set-r._set:a._idx-r._idx})),this.update(i),i},update:function(t){var e,r,a,o,n,i=!1;for(e=0,r=t.length;e<r;++e)o=(a=t[e]).model(),(n=a.$layout)._hidable=o&&"auto"===o.display,n._visible=a.visible(),i|=n._hidable;i&&function(t){var e,r,a,o,n,i,l;for(e=0,r=t.length;e<r;++e)(o=(a=t[e]).$layout)._visible&&(l=new Proxy(a._el,{get:(t,e)=>t.getProps([e],!0)[e]}),n=a.geometry(),i=$(l,a.model(),n),o._box.update(i,n,a.rotation()));(function(t,e){var r,a,o,n;for(r=t.length-1;r>=0;--r)for(o=t[r].$layout,a=r-1;a>=0&&o._visible;--a)(n=t[a].$layout)._visible&&o._box.intersects(n._box)&&e(o,n)})(t,(function(t,e){var r=t._hidable,a=e._hidable;r&&a||a?e._visible=!1:r&&(t._visible=!1)}))}(t)},lookup:function(t,e){var r,a;for(r=t.length-1;r>=0;--r)if((a=t[r].$layout)&&a._visible&&a._box.contains(e))return t[r];return null},draw:function(t,e){var r,a,o,n,i,l;for(r=0,a=e.length;r<a;++r)(n=(o=e[r]).$layout)._visible&&(i=o.geometry(),l=$(o._el,o.model(),i),n._box.update(l,i,o.rotation()),o.draw(t,l))}},P="$default";function S(e,r,a,o){if(r){var n,i=a.$context,l=a.$groups;r[l._set]&&(n=r[l._set][l._key])&&!0===t.callback(n,[i,o])&&(e.$datalabels._dirty=!0,a.update(i))}}function I(t,e){var r,a,o=t.$datalabels,n=o._listeners;if(n.enter||n.leave){if("mousemove"===e.type)a=C.lookup(o._labels,e);else if("mouseout"!==e.type)return;r=o._hovered,o._hovered=a,function(t,e,r,a,o){var n,i;(r||a)&&(r?a?r!==a&&(i=n=!0):i=!0:n=!0,i&&S(t,e.leave,r,o),n&&S(t,e.enter,a,o))}(t,n,r,a,e)}}return{id:"datalabels",defaults:{align:"center",anchor:"center",backgroundColor:null,borderColor:null,borderRadius:0,borderWidth:0,clamp:!1,clip:!1,color:void 0,display:!0,font:{family:void 0,lineHeight:1.2,size:void 0,style:void 0,weight:null},formatter:function(e){if(t.isNullOrUndef(e))return null;var r,a,o,n=e;if(t.isObject(e))if(t.isNullOrUndef(e.label))if(t.isNullOrUndef(e.r))for(n="",o=0,a=(r=Object.keys(e)).length;o<a;++o)n+=(0!==o?", ":"")+r[o]+": "+e[r[o]];else n=e.r;else n=e.label;return""+n},labels:void 0,listeners:{},offset:4,opacity:1,padding:{top:4,right:4,bottom:4,left:4},rotation:0,textAlign:"start",textStrokeColor:void 0,textStrokeWidth:0,textShadowBlur:0,textShadowColor:void 0},beforeInit:function(t){t.$datalabels={_actives:[]}},beforeUpdate:function(t){var e=t.$datalabels;e._listened=!1,e._listeners={},e._datasets=[],e._labels=[]},afterDatasetUpdate:function(e,r,a){var o,n,i,l,s,u,d,c,h=r.index,f=e.$datalabels,x=f._datasets[h]=[],y=e.isDatasetVisible(h),v=e.data.datasets[h],b=function(e,r){var a,o,n,i=e.datalabels,l=[];return!1===i?null:(!0===i&&(i={}),r=t.merge({},[r,i]),o=r.labels||{},n=Object.keys(o),delete r.labels,n.length?n.forEach((function(e){o[e]&&l.push(t.merge({},[r,o[e],{_key:e}]))})):l.push(r),a=l.reduce((function(e,r){return t.each(r.listeners||{},(function(t,a){e[a]=e[a]||{},e[a][r._key||P]=t})),delete r.listeners,e}),{}),{labels:l,listeners:a})}(v,a),p=r.meta.data||[],g=e.ctx;for(g.save(),o=0,i=p.length;o<i;++o)if((d=p[o]).$datalabels=[],y&&d&&e.getDataVisibility(o)&&!d.skip)for(n=0,l=b.labels.length;n<l;++n)u=(s=b.labels[n])._key,(c=new _(s,g,d,o)).$groups={_set:h,_key:u||P},c.$context={active:!1,chart:e,dataIndex:o,dataset:v,datasetIndex:h},c.update(c.$context),d.$datalabels.push(c),x.push(c);g.restore(),t.merge(f._listeners,b.listeners,{merger:function(t,e,a){e[t]=e[t]||{},e[t][r.index]=a[t],f._listened=!0}})},afterUpdate:function(t){t.$datalabels._labels=C.prepare(t.$datalabels._datasets)},afterDatasetsDraw:function(t){C.draw(t,t.$datalabels._labels)},beforeEvent:function(t,e){if(t.$datalabels._listened){var r=e.event;switch(r.type){case"mousemove":case"mouseout":I(t,r);break;case"click":!function(t,e){var r=t.$datalabels,a=r._listeners.click,o=a&&C.lookup(r._labels,e);o&&S(t,a,o,e)}(t,r)}}},afterEvent:function(t){var e,r,a,o,n,l,s,u=t.$datalabels,d=u._actives,c=u._actives=t.getActiveElements(),h=i(d,c);for(e=0,r=h.length;e<r;++e)if((n=h[e])[1])for(a=0,o=(s=n[0].element.$datalabels||[]).length;a<o;++a)(l=s[a]).$context.active=1===n[1],l.update(l.$context);(u._dirty||h.length)&&(C.update(u._labels),t.render()),delete u._dirty}}}));
\ No newline at end of file
diff --git a/test/UnitTest/Components/DateTimePickerTest.cs b/test/UnitTest/Components/DateTimePickerTest.cs
index bb28b5698..a7e36574b 100644
--- a/test/UnitTest/Components/DateTimePickerTest.cs
+++ b/test/UnitTest/Components/DateTimePickerTest.cs
@@ -633,7 +633,7 @@ public class DateTimePickerTest : BootstrapBlazorTestBase
         });
 
         var ele = cut.Find(".time-panel-content .has-seconds");
-        Assert.NotNull(ele); 
+        Assert.NotNull(ele);
     }
 
     [Fact]
@@ -649,7 +649,7 @@ public class DateTimePickerTest : BootstrapBlazorTestBase
         });
 
         var ele = cut.Find(".time-panel-content .havenot-seconds");
-        Assert.NotNull(ele); 
+        Assert.NotNull(ele);
     }
     #endregion
 
@@ -775,12 +775,6 @@ public class DateTimePickerTest : BootstrapBlazorTestBase
         Assert.True(MockDateTimePicker.GetSafeYearDateTime_Ok());
     }
 
-    [Fact]
-    public void GetSafeMonthDateTime_Ok()
-    {
-        Assert.True(MockDateTimePicker.GetSafeMonthDateTime_Ok());
-    }
-
     [Fact]
     public void PickerBodyShowFooter_Ok()
     {
@@ -857,15 +851,8 @@ public class DateTimePickerTest : BootstrapBlazorTestBase
     {
         public static bool GetSafeYearDateTime_Ok()
         {
-            var dtm = DatePickerBody.GetSafeYearDateTime(DateTime.MaxValue, 1);
+            var dtm = GetSafeYearDateTime(DateTime.MaxValue, 1);
             return dtm == DateTime.MaxValue.Date;
         }
-
-        public static bool GetSafeMonthDateTime_Ok()
-        {
-            var v1 = DatePickerBody.GetSafeMonthDateTime(DateTime.MaxValue, 1);
-            var v2 = DatePickerBody.GetSafeMonthDateTime(DateTime.MinValue, -1);
-            return v1 == DateTime.MaxValue.Date && v2 == DateTime.MinValue.Date;
-        }
     }
 }
diff --git a/test/UnitTest/Options/BootstrapBlazorOptionsTest.cs b/test/UnitTest/Options/BootstrapBlazorOptionsTest.cs
index 90638e6f8..a237a64f2 100644
--- a/test/UnitTest/Options/BootstrapBlazorOptionsTest.cs
+++ b/test/UnitTest/Options/BootstrapBlazorOptionsTest.cs
@@ -2,8 +2,6 @@
 // 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/
 
-using BootstrapBlazor.Extensions;
-
 namespace UnitTest.Options;
 
 public class BootstrapBlazorOptionsTest
-- 
Gitee