Fix animation configuration (fixes #86)

This adds the animation configuration to all options. It now also supports easing options. This closes #74 because it makes it obsolete. The callbacks can only be done after #70 but they're added as todo comments.

Author: Joelius300

src/ChartJs.Blazor/ChartJS/Common/BaseConfigOptions.cs

@@ -46,6 +46,11 @@ public class BaseConfigOptions
         /// </summary>
         public Tooltips Tooltips { get; set; }
 
+        /// <summary>
+        /// Gets or sets the animation-configuration for this chart.
+        /// </summary>
+        public Animation Animation { get; set; }
+
         public IClickHandler OnClick { get; set; }
 
         public Hover Hover { get; set; }

src/ChartJs.Blazor/ChartJS/Common/Enums/Easing.cs

@@ -0,0 +1,52 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace ChartJs.Blazor.ChartJS.Common.Enums
+{
+    /// <summary>
+    /// Represents an easing function supported by chart.js. Details about the different
+    /// functions can be found here: <a href="https://easings.net"/>
+    /// <para>
+    /// As per documentation here: <a href="https://www.chartjs.org/docs/latest/configuration/animations.html#easing"/>
+    /// </para>
+    /// </summary>
+    public sealed class Easing : StringEnum
+    {
+#pragma warning disable CS1591 // Missing XML comment for publicly visible type or member
+        public static Easing Linear => new Easing("linear");
+        public static Easing EaseInQuad => new Easing("easeInQuad");
+        public static Easing EaseOutQuad => new Easing("easeOutQuad");
+        public static Easing EaseInOutQuad => new Easing("easeInOutQuad");
+        public static Easing EaseInCubic => new Easing("easeInCubic");
+        public static Easing EaseOutCubic => new Easing("easeOutCubic");
+        public static Easing EaseInOutCubic => new Easing("easeInOutCubic");
+        public static Easing EaseInQuart => new Easing("easeInQuart");
+        public static Easing EaseOutQuart => new Easing("easeOutQuart");
+        public static Easing EaseInOutQuart => new Easing("easeInOutQuart");
+        public static Easing EaseInQuint => new Easing("easeInQuint");
+        public static Easing EaseOutQuint => new Easing("easeOutQuint");
+        public static Easing EaseInOutQuint => new Easing("easeInOutQuint");
+        public static Easing EaseInSine => new Easing("easeInSine");
+        public static Easing EaseOutSine => new Easing("easeOutSine");
+        public static Easing EaseInOutSine => new Easing("easeInOutSine");
+        public static Easing EaseInExpo => new Easing("easeInExpo");
+        public static Easing EaseOutExpo => new Easing("easeOutExpo");
+        public static Easing EaseInOutExpo => new Easing("easeInOutExpo");
+        public static Easing EaseInCirc => new Easing("easeInCirc");
+        public static Easing EaseOutCirc => new Easing("easeOutCirc");
+        public static Easing EaseInOutCirc => new Easing("easeInOutCirc");
+        public static Easing EaseInElastic => new Easing("easeInElastic");
+        public static Easing EaseOutElastic => new Easing("easeOutElastic");
+        public static Easing EaseInOutElastic => new Easing("easeInOutElastic");
+        public static Easing EaseInBack => new Easing("easeInBack");
+        public static Easing EaseOutBack => new Easing("easeOutBack");
+        public static Easing EaseInOutBack => new Easing("easeInOutBack");
+        public static Easing EaseInBounce => new Easing("easeInBounce");
+        public static Easing EaseOutBounce => new Easing("easeOutBounce");
+        public static Easing EaseInOutBounce => new Easing("easeInOutBounce");
+#pragma warning restore CS1591 // Missing XML comment for publicly visible type or member
+
+        private Easing(string stringRep) : base(stringRep) { }
+    }
+}

src/ChartJs.Blazor/ChartJS/Common/Properties/Animation.cs

@@ -1,13 +1,25 @@
-namespace ChartJs.Blazor.ChartJS.Common.Properties
+using ChartJs.Blazor.ChartJS.Common.Enums;
+
+namespace ChartJs.Blazor.ChartJS.Common.Properties
 {
     /// <summary>
-    /// Defines some animation configurations
+    /// The animation-subconfig of <see cref="BaseConfigOptions"/>.
+    /// Specifies options for the animations in this chart.
     /// </summary>
     public class Animation
     {
         /// <summary>
-        /// Defines the duration of the animation
+        /// Gets or sets the number of milliseconds an animation takes.
         /// </summary>
-        public long Duration { get; set; }
+        public long? Duration { get; set; }
+
+        /// <summary>
+        /// Gets or sets the easing function to use.
+        /// See <a href="https://easings.net"/> for reference.
+        /// </summary>
+        public Easing Easing { get; set; }
+
+        // TODO OnProgress Callback called on each step of an animation.
+        // TODO OnComplete Callback called at the end of an animation.
     }
 }

src/ChartJs.Blazor/ChartJS/Common/Properties/ArcAnimation.cs

@@ -3,16 +3,18 @@
     /// <summary>
     /// The animation-subconfig of the options for a radial chart.
     /// </summary>
-    public class ArcAnimation
+    public class ArcAnimation : Animation
     {
         /// <summary>
-        /// If true, the chart will animate in with a rotation animation.
+        /// Gets or sets a value indicating whether the chart will
+        /// load in with a rotation animation or not.
         /// </summary>
-        public bool AnimateRotate { get; set; } = true;
+        public bool? AnimateRotate { get; set; }
 
         /// <summary>
-        /// If true, will animate scaling the chart from the center outwards.
+        /// Gets or sets a value indicating whether the chart will
+        /// load in with a scaling animation (from the center outwards) or not.
         /// </summary>
-        public bool AnimateScale { get; set; } = false;
+        public bool? AnimateScale { get; set; }
     }
 }

src/ChartJs.Blazor/ChartJS/LineChart/LineOptions.cs

@@ -9,11 +9,6 @@ namespace ChartJs.Blazor.ChartJS.LineChart
     /// </summary>
     public class LineOptions : BaseConfigOptions
     {
-        /// <summary>
-        /// General animation time
-        /// </summary>
-        public Animation Animation { get; set; }
-
         /// <summary>
         /// Hover options for hovering over an item
         /// </summary>

src/ChartJs.Blazor/ChartJS/PieChart/PieOptions.cs

@@ -27,7 +27,7 @@ public PieOptions(bool doughnutCutout = false)
         /// <summary>
         /// Gets or sets the animation-configuration for this chart.
         /// </summary>
-        public ArcAnimation Animation { get; set; }
+        public new ArcAnimation Animation { get; set; }
 
         /// <summary>
         /// Gets or sets the starting angle to draw arcs from.

src/ChartJs.Blazor/ChartJS/PolarAreaChart/PolarAreaOptions.cs

@@ -18,7 +18,7 @@ public class PolarAreaOptions : BaseConfigOptions
         /// <summary>
         /// Gets or sets the animation-configuration for this chart.
         /// </summary>
-        public ArcAnimation Animation { get; set; }
+        public new ArcAnimation Animation { get; set; }
 
         /// <summary>
         /// The scale (axis) for this chart.