Add a bit of smoothness to the rank graph

osu.Game.Tests/Visual/Online/TestSceneRankGraph.cs

@@ -31,6 +31,7 @@ namespace osu.Game.Tests.Visual.Online
             var data = new int[89];
             var dataWithZeros = new int[89];
             var smallData = new int[89];
+            var edgyData = new int[89];
 
             for (int i = 0; i < 89; i++)
                 data[i] = dataWithZeros[i] = (i + 1) * 1000;
@@ -41,6 +42,14 @@ namespace osu.Game.Tests.Visual.Online
             for (int i = 79; i < 89; i++)
                 smallData[i] = 100000 - i * 1000;
 
+            bool edge = true;
+
+            for (int i = 0; i < 20; i++)
+            {
+                edgyData[i] = 100000 + (edge ? 1000 : -1000) * (i + 1);
+                edge = !edge;
+            }
+
             Add(new Container
             {
                 Anchor = Anchor.Centre,
@@ -120,6 +129,22 @@ namespace osu.Game.Tests.Visual.Online
                     }
                 };
             });
+
+            AddStep("graph with edges", () =>
+            {
+                graph.User.Value = new User
+                {
+                    Statistics = new UserStatistics
+                    {
+                        Ranks = new UserStatistics.UserRanks { Global = 12000 },
+                        PP = 12345,
+                    },
+                    RankHistory = new User.RankHistoryData
+                    {
+                        Data = edgyData,
+                    }
+                };
+            });
         }
     }
 }

osu.Game/Overlays/Profile/Header/Components/RankGraph.cs

@@ -96,7 +96,7 @@ namespace osu.Game.Overlays.Profile.Header.Components
             if (ranks?.Length > 1)
             {
                 graph.UpdateBallPosition(e.MousePosition.X);
-                graph.ShowBall();
+                graph.ShowBar();
             }
 
             return base.OnHover(e);
@@ -114,7 +114,7 @@ namespace osu.Game.Overlays.Profile.Header.Components
         {
             if (ranks?.Length > 1)
             {
-                graph.HideBall();
+                graph.HideBar();
             }
 
             base.OnHoverLost(e);
@@ -123,31 +123,41 @@ namespace osu.Game.Overlays.Profile.Header.Components
         private class RankChartLineGraph : LineGraph
         {
             private readonly CircularContainer movingBall;
+            private readonly Container bar;
             private readonly Box ballBg;
-            private readonly Box movingBar;
+            private readonly Box line;
 
             public Action<int> OnBallMove;
 
             public RankChartLineGraph()
             {
-                Add(movingBar = new Box
+                Add(bar = new Container
                 {
                     Origin = Anchor.TopCentre,
                     RelativeSizeAxes = Axes.Y,
-                    Width = 1.5f,
+                    AutoSizeAxes = Axes.X,
                     Alpha = 0,
                     RelativePositionAxes = Axes.Both,
-                });
+                    Children = new Drawable[]
-
+                    {
-                Add(movingBall = new CircularContainer
+                        line = new Box
-                {
+                        {
-                    Origin = Anchor.Centre,
+                            Anchor = Anchor.Centre,
-                    Size = new Vector2(18),
+                            Origin = Anchor.Centre,
-                    Alpha = 0,
+                            RelativeSizeAxes = Axes.Y,
-                    Masking = true,
+                            Width = 1.5f,
-                    BorderThickness = 4,
+                        },
-                    RelativePositionAxes = Axes.Both,
+                        movingBall = new CircularContainer
-                    Child = ballBg = new Box { RelativeSizeAxes = Axes.Both }
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(18),
+                            Masking = true,
+                            BorderThickness = 4,
+                            RelativePositionAxes = Axes.Y,
+                            Child = ballBg = new Box { RelativeSizeAxes = Axes.Both }
+                        }
+                    }
                 });
             }
 
@@ -155,29 +165,22 @@ namespace osu.Game.Overlays.Profile.Header.Components
             private void load(OsuColour colours)
             {
                 ballBg.Colour = colours.GreySeafoamDarker;
-                movingBall.BorderColour = colours.Yellow;
+                movingBall.BorderColour = line.Colour = colours.Yellow;
-                movingBar.Colour = colours.Yellow;
             }
 
             public void UpdateBallPosition(float mouseXPosition)
             {
+                int duration = 200;
                 int index = calculateIndex(mouseXPosition);
-                movingBall.Position = calculateBallPosition(index);
+                Vector2 position = calculateBallPosition(index);
-                movingBar.X = movingBall.X;
+                movingBall.MoveToY(position.Y, duration, Easing.OutQuint);
+                bar.MoveToX(position.X, duration, Easing.OutQuint);
                 OnBallMove.Invoke(index);
             }
 
-            public void ShowBall()
+            public void ShowBar() => bar.FadeIn(fade_duration);
-            {
-                movingBall.FadeIn(fade_duration);
-                movingBar.FadeIn(fade_duration);
-            }
 
-            public void HideBall()
+            public void HideBar() => bar.FadeOut(fade_duration);
-            {
-                movingBall.FadeOut(fade_duration);
-                movingBar.FadeOut(fade_duration);
-            }
 
             private int calculateIndex(float mouseXPosition) => (int)Math.Round(mouseXPosition / DrawWidth * (DefaultValueCount - 1));