Refactor data label enums and update chart properties

Updated the `Anchor` and `Alignment` enums to `DataLabelAnchor` and `DataLabelAlignment`.
Modified related properties and methods across various files to utilize the new enums.
Added a `BackgroundColor` property to the `Datalabels` in chart datasets and adjusted default values for alignment and anchor properties.
Increased the width of the `LineChart` component from 700 to 800 pixels.

NOTE: This commit message is auto-generated using GitHub Copilot.

Author: gvreddy04

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/DoughnutChart/DoughnutChart_Demo_02_Datalabels.razor

@@ -95,11 +95,11 @@
             var dataset = GetRandomDoughnutChartDataset();
 
             if (index == 0)
-                dataset.Datalabels.Anchor = Anchor.End;
+                dataset.Datalabels.Anchor = DataLabelAnchor.End;
             else if (index == numberOfDatasets - 1)
-                dataset.Datalabels.Anchor = Anchor.Start;
+                dataset.Datalabels.Anchor = DataLabelAnchor.Start;
             else
-                dataset.Datalabels.Anchor = Anchor.Center;
+                dataset.Datalabels.Anchor = DataLabelAnchor.Center;
 
             datasets.Add(dataset);
         }

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChart_Demo_02_Datalabels.razor

@@ -1,4 +1,4 @@
-<LineChart @ref="lineChart" Width="700" />
+<LineChart @ref="lineChart" Width="800" />
 
 @code {
     private LineChart lineChart = default!;
@@ -25,7 +25,7 @@
                 // PointHoverRadius = 4,
 
                 // datalabels
-                Datalabels = new() { Alignment = Alignment.End, Anchor = Anchor.End }
+            Datalabels = new() { Alignment = DataLabelAlignment.End, Anchor = DataLabelAnchor.End, BackgroundColor = colors[0] }
             };
         datasets.Add(dataset1);
 
@@ -42,7 +42,7 @@
                 // PointHoverRadius = 4,
 
                 // datalabels
-                Datalabels = new() { Alignment = Alignment.End, Anchor = Anchor.End }
+            Datalabels = new() { Alignment = DataLabelAlignment.End, Anchor = DataLabelAnchor.End, BackgroundColor = colors[1] }
             };
         datasets.Add(dataset2);
 
@@ -59,7 +59,7 @@
                 // PointHoverRadius = 4,
 
                 // datalabels
-                Datalabels = new() { Alignment = Alignment.Start, Anchor = Anchor.Start }
+            Datalabels = new() { Alignment = DataLabelAlignment.Start, Anchor = DataLabelAnchor.Start, BackgroundColor = colors[2] }
             };
         datasets.Add(dataset3);
 

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChart_Demo_02_Datalabels.razor

@@ -98,11 +98,11 @@
             var dataset = GetRandomPieChartDataset();
 
             if (index == 0)
-                dataset.Datalabels.Anchor = Anchor.End;
+                dataset.Datalabels.Anchor = DataLabelAnchor.End;
             else if (index == numberOfDatasets - 1)
-                dataset.Datalabels.Anchor = Anchor.End;
+                dataset.Datalabels.Anchor = DataLabelAnchor.End;
             else
-                dataset.Datalabels.Anchor = Anchor.Center;
+                dataset.Datalabels.Anchor = DataLabelAnchor.Center;
 
             datasets.Add(dataset);
         }

BlazorExpress.ChartJS/Enums/Alignment.cs

@@ -0,0 +1,45 @@
+namespace BlazorExpress.ChartJS;
+
+/// <summary>
+/// The align option defines the position of the label relative to the anchor point position and orientation.
+/// <para>
+/// <see href="https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#alignment-and-offset" />
+/// </para>
+/// </summary>
+public enum DataLabelAlignment
+{
+    /// <summary>
+    /// 'center' (default): the label is centered on the anchor point
+    /// </summary>
+    Center,
+
+    /// <summary>
+    /// 'start': the label is positioned before the anchor point, following the same direction
+    /// </summary>
+    Start,
+
+    /// <summary>
+    /// 'end': the label is positioned after the anchor point, following the same direction
+    /// </summary>
+    End,
+
+    /// <summary>
+    /// 'left': the label is positioned to the left of the anchor point (180°)
+    /// </summary>
+    Left,
+
+    /// <summary>
+    /// 'top': the label is positioned to the top of the anchor point (270°)
+    /// </summary>
+    Top,
+
+    /// <summary>
+    /// 'right': the label is positioned to the right of the anchor point (0°)
+    /// </summary>
+    Right,
+
+    /// <summary>
+    /// 'bottom': the label is positioned to the bottom of the anchor point (90°)
+    /// </summary>
+    Bottom
+}

BlazorExpress.ChartJS/Enums/Anchor.cs

@@ -0,0 +1,27 @@
+namespace BlazorExpress.ChartJS;
+
+/// <summary>
+/// An anchor point is defined by an orientation vector and a position on the data element. 
+/// The orientation depends on the scale type (vertical, horizontal or radial). 
+/// The position is calculated based on the anchor option and the orientation vector.
+/// <para>
+/// <see href="https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#anchoring" />
+/// </para>
+/// </summary>
+public enum DataLabelAnchor
+{
+    /// <summary>
+    /// 'center' (default): element center
+    /// </summary>
+    Center,
+
+    /// <summary>
+    /// 'start': lowest element boundary
+    /// </summary>
+    Start,
+
+    /// <summary>
+    /// 'end': highest element boundary
+    /// </summary>
+    End
+}

BlazorExpress.ChartJS/Enums/DataLabelAlignment.cs

@@ -4,39 +4,21 @@ public static class EnumExtensions
 {
     #region Methods
 
-    public static string? ToAlignmentString(this Alignment alignment) =>
+    public static string? ToChartDatasetDataLabelAlignmentString(this DataLabelAlignment alignment) =>
         alignment switch
         {
-            Alignment.Start => "start",
-            Alignment.Center or Alignment.None => "center", // default
-            Alignment.End => "end",
+            DataLabelAlignment.Start => "start",
+            DataLabelAlignment.Center => "center", // default
+            DataLabelAlignment.End => "end",
             _ => null
         };
 
-    public static string? ToAnchorString(this Anchor anchor) =>
+    public static string? ToChartDatasetDataLabelAnchorString(this DataLabelAnchor anchor) =>
         anchor switch
         {
-            Anchor.Start => "start",
-            Anchor.Center or Anchor.None => "center", // default
-            Anchor.End => "end",
-            _ => null
-        };
-
-    public static string? ToChartDatasetDataLabelAlignmentString(this Alignment alignment) =>
-        alignment switch
-        {
-            Alignment.Start => "start",
-            Alignment.Center or Alignment.None => "center", // default
-            Alignment.End => "end",
-            _ => null
-        };
-
-    public static string? ToChartDatasetDataLabelAnchorString(this Anchor anchor) =>
-        anchor switch
-        {
-            Anchor.Start => "start",
-            Anchor.Center or Anchor.None => "center", // default
-            Anchor.End => "end",
+            DataLabelAnchor.Start => "start",
+            DataLabelAnchor.Center => "center", // default
+            DataLabelAnchor.End => "end",
             _ => null
         };
 

BlazorExpress.ChartJS/Enums/DataLabelAnchor.cs

@@ -8,9 +8,9 @@ public class ChartDatasetDataLabels
 {
     #region Fields and Constants
 
-    private Alignment alignment;
+    private DataLabelAlignment alignment;
 
-    private Anchor anchor;
+    private DataLabelAnchor anchor;
 
     #endregion
 
@@ -19,75 +19,103 @@ public class ChartDatasetDataLabels
     /// <summary>
     /// Gets or sets the data labels alignment. 
     /// <para>
-    /// Default value is <see cref="Alignment.Center"/>.
+    /// Default value is <see cref="DataLabelAlignment.Center"/>.
     /// </para>
     /// </summary>
     [AddedVersion("1.0.0")]
-    [DefaultValue(Alignment.Center)]
+    [DefaultValue(DataLabelAlignment.Center)]
     [Description("Gets or sets the data labels alignment.")]
     [JsonIgnore]
-    public Alignment Alignment
+    public DataLabelAlignment Alignment
     {
         get => alignment;
         set
         {
             alignment = value;
-            DataLabelsAlignment = value.ToAlignmentString();
+            DataLabelsAlignmentAsString = value.ToChartDatasetDataLabelAlignmentString();
         }
     }
 
     /// <summary>
     /// Gets or sets the data labels anchor.
     /// <para>
-    /// Default value is <see cref="Anchor.None"/>.
+    /// Default value is <see cref="DataLabelAnchor.None"/>.
     /// </para>
     /// </summary>
     [AddedVersion("1.0.0")]
-    [DefaultValue(Anchor.None)]
+    [DefaultValue(DataLabelAnchor.Center)]
     [Description("Gets or sets the data labels anchor.")]
     [JsonIgnore]
-    public Anchor Anchor
+    public DataLabelAnchor Anchor
     {
         get => anchor;
         set
         {
             anchor = value;
-            DataLabelsAnchor = value.ToAnchorString();
+            DataLabelsAnchorAsString = value.ToChartDatasetDataLabelAnchorString();
         }
     }
 
-    //public string? BackgroundColor { get; set; }
+    /// <summary>
+    /// Gets or sets the data label background color.
+    /// <para>
+    /// Default value is <see langword="null"/>.
+    /// </para>
+    /// </summary>
+    [AddedVersion("1.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the data label background color.")]
+    public string? BackgroundColor { get; set; }
+
+
+    /// <summary>
+    /// Gets or sets the data label border color.
+    /// <para>
+    /// Default value is <see langword="null"/>.
+    /// </para>
+    /// </summary>
+    [AddedVersion("1.0.0")]
+    [DefaultValue(null)]
+    [Description("Gets or sets the data label border color.")]
+    public string? BorderColor { get; set; }
 
+    /// <summary>
+    /// Gets or sets the width of the border.
+    /// <para>
+    /// Default value is 2.
+    /// </para>
+    /// </summary>
+    [AddedVersion("1.0.0")]
+    [DefaultValue(2)]
+    [Description("Gets or sets the width of the border.")]
     public double BorderWidth { get; set; } = 2;
 
     /// <summary>
-    /// Gets or sets the data labels alignment.
-    /// Possible values: start, center, and end.
+    /// Gets the data labels alignment as a string.
     /// <para>
     /// Default value is <see langword="null"/>.
     /// </para>
     /// </summary>
     [AddedVersion("1.0.0")]
     [DefaultValue(null)]
-    [Description("Gets or sets the data labels alignment. Possible values: start, center, and end.")]
+    [Description("Gets the data labels alignment as a string.")]
     [ParameterTypeName("string?")]
     [JsonPropertyName("align")]
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
-    public string? DataLabelsAlignment { get; private set; }
+    public string? DataLabelsAlignmentAsString { get; private set; }
 
     /// <summary>
-    /// Gets or sets the data labels anchor.
-    /// Possible values: start, center, and end.
+    /// Gets the data labels anchor as a string.
     /// <para>
     /// Default value is <see langword="null"/>.
     /// </para>
     /// </summary>
     [AddedVersion("1.0.0")]
     [DefaultValue(null)]
-    [Description("Gets or sets the data labels anchor. Possible values: start, center, and end.")]
+    [Description("Gets the data labels anchor as a string.")]
     [ParameterTypeName("string?")]
     [JsonPropertyName("anchor")]
-    public string? DataLabelsAnchor { get; private set; }
+    public string? DataLabelsAnchorAsString { get; private set; }
 
     #endregion
 }