From 886f694bdb44a3ee45294263e6d0a278d6e18584 Mon Sep 17 00:00:00 2001
From: webwarrior <reg@webwarrior.ws>
Date: Wed, 20 Jul 2022 12:19:51 +0800
Subject: [PATCH 1/4] Frontend.XF: convert chart to a hoop style

Fixes https://gitlab.com/nblockchain/geewallet/-/issues/172
---
 src/GWallet.Frontend.XF/BalancesPage.xaml     |  40 +--
 src/GWallet.Frontend.XF/BalancesPage.xaml.fs  |  50 ++--
 .../Controls/CircleChartView.fs               | 200 ---------------
 src/GWallet.Frontend.XF/Controls/HoopChart.fs | 228 ++++++++++++++++++
 .../GWallet.Frontend.XF.fsproj                |   2 +-
 5 files changed, 247 insertions(+), 273 deletions(-)
 delete mode 100644 src/GWallet.Frontend.XF/Controls/CircleChartView.fs
 create mode 100644 src/GWallet.Frontend.XF/Controls/HoopChart.fs

diff --git a/src/GWallet.Frontend.XF/BalancesPage.xaml b/src/GWallet.Frontend.XF/BalancesPage.xaml
index c763733f2..9946e3fa6 100644
--- a/src/GWallet.Frontend.XF/BalancesPage.xaml
+++ b/src/GWallet.Frontend.XF/BalancesPage.xaml
@@ -22,45 +22,11 @@
             Grid.Row="0"
         >
 
-            <!-- we add {V|H}Options=Center* not only to the Label, as a workaround to
-            https://github.com/xamarin/Xamarin.Forms/issues/4655 -->
-            <Frame x:Name="totalFiatAmountFrame" 
-                   HasShadow="false"
-                   BackgroundColor="Transparent"
-                   BorderColor="Transparent"
-                   VerticalOptions="Center"
-                   Padding="0"
-                   Margin="0,0,10,0"
-            >
-                <Label Text="..." x:Name="totalFiatAmountLabel"
-                           Margin="0,0,0,0"
-                           FontSize="22" />
-            </Frame>
-
-            <!-- keep this frame&label below almost same as previous! -->
-            <Frame x:Name="totalReadOnlyFiatAmountFrame"
-                   HasShadow="false"
-                   IsVisible="false"
-                   BackgroundColor="Transparent"
-                   BorderColor="Transparent"
-                   VerticalOptions="Center"
-                   Padding="0"
-                   Margin="0,0,10,0"
-            >
-                <Label Text="..." x:Name="totalReadOnlyFiatAmountLabel"
-                           Margin="0,0,0,0"
-                           FontSize="22"
-                           TextColor="DarkBlue" />
-            </Frame>
-
-            <controls:CircleChartView x:Name="normalChartView"
+            <controls:HoopChartView x:Name="normalChartView"
                                      HorizontalOptions="FillAndExpand"
-                                     VerticalOptions="FillAndExpand"
-                                     FlexLayout.Grow="1.0"
-                                     FlexLayout.AlignSelf="Stretch"
-            />
+                                     VerticalOptions="FillAndExpand"/>
 
-            <controls:CircleChartView x:Name="readonlyChartView"
+            <controls:HoopChartView x:Name="readonlyChartView"
                                      IsVisible="False"
                                      HorizontalOptions="FillAndExpand"
                                      VerticalOptions="FillAndExpand"
diff --git a/src/GWallet.Frontend.XF/BalancesPage.xaml.fs b/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
index d81ebc4e4..669c1917d 100644
--- a/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
+++ b/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
@@ -40,12 +40,10 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
 
     let normalAccountsBalanceSets = normalBalanceStates.Select(fun balState -> balState.BalanceSet)
     let readOnlyAccountsBalanceSets = readOnlyBalanceStates.Select(fun balState -> balState.BalanceSet)
-    let mainLayout = base.FindByName<Grid> "mainLayout"
-    let totalFiatAmountLabel = mainLayout.FindByName<Label> "totalFiatAmountLabel"
-    let totalReadOnlyFiatAmountLabel = mainLayout.FindByName<Label> "totalReadOnlyFiatAmountLabel"
+    let mainLayout = base.FindByName<Grid>("mainLayout")
     let contentLayout = base.FindByName<Grid> "contentLayout"
-    let normalChartView = base.FindByName<CircleChartView> "normalChartView"
-    let readonlyChartView = base.FindByName<CircleChartView> "readonlyChartView"
+    let normalChartView = base.FindByName<HoopChartView> "normalChartView"
+    let readonlyChartView = base.FindByName<HoopChartView> "readonlyChartView"
 
     let standardTimeToRefreshBalances = TimeSpan.FromMinutes 5.0
     let standardTimeToRefreshBalancesWhenThereIsImminentIncomingPaymentOrNotEnoughInfoToKnow = TimeSpan.FromMinutes 1.0
@@ -74,7 +72,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                            (Formatting.DecimalAmountRounding CurrencyType.Fiat atLeastAmount)
                            (FrontendHelpers.MaybeReturnOutdatedMarkForOldDate time)
 
-        totalFiatAmountLabel.Text <- SPrintF1 "Total Assets:\n%s" strBalance
+        totalFiatAmountLabel.Text <- strBalance
 
     let rec UpdateGlobalFiatBalance (acc: Option<MaybeCached<TotalBalance>>)
                                     (fiatBalances: List<MaybeCached<decimal>>)
@@ -163,18 +161,12 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                 readonlyChartView
             else
                 normalChartView
-        let fullAmount = balances.Sum(fun b -> GetAmountOrDefault b.FiatAmount)
-
+        
         let chartSourceList = 
             balances |> Seq.map (fun balanceState ->
-                 let percentage = 
-                     if fullAmount = 0m then
-                         0m
-                     else
-                         GetAmountOrDefault balanceState.FiatAmount / fullAmount
                  { 
                      Color = FrontendHelpers.GetCryptoColor balanceState.BalanceSet.Account.Currency
-                     Percentage = float(percentage)
+                     Amount = GetAmountOrDefault balanceState.FiatAmount
                  }
             )
         chartView.SegmentsSource <- chartSourceList
@@ -308,7 +300,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                                                 None
 
         let readOnlyAccountsBalanceUpdate =
-            self.UpdateGlobalBalance readOnlyBalancesJob totalReadOnlyFiatAmountLabel true
+            self.UpdateGlobalBalance readOnlyBalancesJob readonlyChartView.BalanceLabel true
 
         let allCancelSources,allBalanceUpdates =
             if (not onlyReadOnlyAccounts) then
@@ -319,7 +311,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                                                         None
 
                 let normalAccountsBalanceUpdate =
-                    self.UpdateGlobalBalance normalBalancesJob totalFiatAmountLabel false
+                    self.UpdateGlobalBalance normalBalancesJob normalChartView.BalanceLabel false
 
                 let allCancelSources = Seq.append readOnlyCancelSources normalCancelSources
 
@@ -395,12 +387,6 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
             cancelSource.Dispose()
 
     member private self.ConfigureFiatAmountFrame (readOnly: bool): TapGestureRecognizer =
-        let totalCurrentFiatAmountFrameName,totalOtherFiatAmountFrameName =
-            if readOnly then
-                "totalReadOnlyFiatAmountFrame","totalFiatAmountFrame"
-            else
-                "totalFiatAmountFrame","totalReadOnlyFiatAmountFrame"
-
         let currentChartViewName,otherChartViewName =
             if readOnly then
                 "readonlyChartView","normalChartView"
@@ -409,13 +395,9 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
 
         let switchingToReadOnly = not readOnly
 
-        let totalCurrentFiatAmountFrame,totalOtherFiatAmountFrame =
-            mainLayout.FindByName<Frame> totalCurrentFiatAmountFrameName,
-            mainLayout.FindByName<Frame> totalOtherFiatAmountFrameName
-
         let currentChartView,otherChartView =
-            mainLayout.FindByName<CircleChartView> currentChartViewName,
-            mainLayout.FindByName<CircleChartView> otherChartViewName
+            mainLayout.FindByName<HoopChartView> currentChartViewName,
+            mainLayout.FindByName<HoopChartView> otherChartViewName
 
         let tapGestureRecognizer = TapGestureRecognizer()
         tapGestureRecognizer.Tapped.Add(fun _ ->
@@ -428,9 +410,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
 
             if shouldNotOpenNewPage then
                 MainThread.BeginInvokeOnMainThread(fun _ ->
-                    totalCurrentFiatAmountFrame.IsVisible <- false
                     currentChartView.IsVisible <- false
-                    totalOtherFiatAmountFrame.IsVisible <- true
                     otherChartView.IsVisible <- true
                 )
                 let balancesStatesToPopulate =
@@ -467,7 +447,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                         FrontendHelpers.SwitchToNewPage self page true
 
         )
-        totalCurrentFiatAmountFrame.GestureRecognizers.Add tapGestureRecognizer
+        currentChartView.BalanceFrame.GestureRecognizers.Add tapGestureRecognizer
         tapGestureRecognizer
 
     member self.PopulateGridInitially () =
@@ -485,11 +465,11 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
         let labels,color =
             if readOnly then
                 let color = Color.DarkBlue
-                totalReadOnlyFiatAmountLabel.TextColor <- color
+                readonlyChartView.BalanceLabel.TextColor <- color
                 readOnlyAccountsBalanceSets,color
             else
                 let color = Color.DarkRed
-                totalFiatAmountLabel.TextColor <- color
+                normalChartView.BalanceLabel.TextColor <- color
                 normalAccountsBalanceSets,color
 
         for balanceSet in labels do
@@ -536,8 +516,8 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
 
             self.PopulateGridInitially ()
 
-            self.UpdateGlobalFiatBalanceSum allNormalAccountFiatBalances totalFiatAmountLabel
-            self.UpdateGlobalFiatBalanceSum allReadOnlyAccountFiatBalances totalReadOnlyFiatAmountLabel
+            self.UpdateGlobalFiatBalanceSum allNormalAccountFiatBalances normalChartView.BalanceLabel
+            self.UpdateGlobalFiatBalanceSum allReadOnlyAccountFiatBalances readonlyChartView.BalanceLabel
         )
 
         self.RefreshBalances true |> FrontendHelpers.DoubleCheckCompletionAsync false
diff --git a/src/GWallet.Frontend.XF/Controls/CircleChartView.fs b/src/GWallet.Frontend.XF/Controls/CircleChartView.fs
deleted file mode 100644
index 8e72ead6d..000000000
--- a/src/GWallet.Frontend.XF/Controls/CircleChartView.fs
+++ /dev/null
@@ -1,200 +0,0 @@
-namespace GWallet.Frontend.XF.Controls
-
-open System
-open System.Linq
-open System.Globalization
-
-open Xamarin.Forms
-open Xamarin.Forms.Shapes
-
-type SegmentInfo =
-    {
-        Color: Color
-        Percentage: float
-    }
-
-type CircleChartView () =
-    inherit ContentView () 
-
-    let shapesPath = @"M{0},{1} A{2},{2} 0 {3} 1 {4} {5} L {6} {7}"
-
-    static let segmentsSourceProperty =
-        BindableProperty.Create("SegmentsSource",
-                                typeof<seq<SegmentInfo>>, typeof<CircleChartView>, null) 
-    static let separatorPercentageProperty =
-        BindableProperty.Create("SeparatorPercentage",
-                                typeof<float>, typeof<CircleChartView>, 0.)
-    static let centerCirclePercentageProperty =
-        BindableProperty.Create("CenterCirclePercentage",
-                                // NOTE: if this below has a value higher than 0 (and less than 1) it'll be back a donut
-                                typeof<float>, typeof<CircleChartView>, 0.)
-    static let separatorColorProperty =
-        BindableProperty.Create("SeparatorColor",
-                                typeof<Color>, typeof<CircleChartView>, Color.Transparent)
-    static let defaultImageSourceProperty =
-        BindableProperty.Create("DefaultImageSource",
-                                typeof<ImageSource>, typeof<CircleChartView>, null)
-
-    static member SegmentsSourceProperty = segmentsSourceProperty
-    static member SeparatorPercentageProperty = separatorPercentageProperty
-    static member CenterCirclePercentageProperty = centerCirclePercentageProperty
-    static member SeparatorColorProperty = separatorColorProperty
-    static member DefaultImageSourceProperty = defaultImageSourceProperty
-
-    member self.SegmentsSource
-        with get () = self.GetValue segmentsSourceProperty :?> seq<SegmentInfo>
-        and set (value: seq<SegmentInfo>) = self.SetValue(segmentsSourceProperty, value)
-
-    member self.SeparatorPercentage
-        with get () = self.GetValue separatorPercentageProperty :?> float
-        and set (value: float) = self.SetValue(separatorPercentageProperty, value)
-
-    member self.CenterCirclePercentage
-        with get () = self.GetValue centerCirclePercentageProperty :?> float
-        and set (value: float) = self.SetValue(centerCirclePercentageProperty, value)
-
-    member self.SeparatorColor
-        with get () = self.GetValue separatorColorProperty :?> Color
-        and set (value: Color) = self.SetValue(separatorColorProperty, value)
-
-    member self.DefaultImageSource
-        with get () = self.GetValue defaultImageSourceProperty :?> ImageSource
-        and set (value: ImageSource) = self.SetValue(defaultImageSourceProperty, value)
-
-    member self.DrawShapesBasedPie (width: float) (height: float) (items: seq<SegmentInfo>) =
-       if not (items.Any()) then
-           failwith "chart data should not be empty to draw the Shapes-based chart"
-
-       let halfWidth = float32 width / 2.f
-       let halfHeight = float32 height / 2.f
-       let radius = Math.Min(halfWidth, halfHeight) |> float
-
-       let x = float halfWidth
-       let y = float halfHeight
-
-       let converter = PathGeometryConverter ()
-       let nfi = NumberFormatInfo (NumberDecimalSeparator = ".")
-       let gridLayout = Grid ()
-
-       if items.Count() = 1 then
-            // this is a workaround (to create a circle instead) to a Xamarin.Forms' Shapes bug:
-            // https://github.com/xamarin/Xamarin.Forms/issues/13893
-            let size =  radius * 2.
-            let color = (items.ElementAt 0).Color
-            let pieCircle =
-                Ellipse (
-                    HorizontalOptions = LayoutOptions.Center,
-                    VerticalOptions = LayoutOptions.Center,
-                    HeightRequest = size,
-                    WidthRequest = size,
-                    Fill = SolidColorBrush color,
-                    StrokeThickness = 0.,
-                    Stroke = null
-                )
-            gridLayout.Children.Add pieCircle
-       else
-            let rec addSliceToView items cumulativePercent =
-                match items with
-                | [] ->
-                    ()
-                | item::tail ->
-                    let startCoordinatesX = x + (radius * Math.Cos(2.0 * Math.PI * cumulativePercent))
-                    let startCoordinatesY = y + (radius * Math.Sin(2.0 * Math.PI * cumulativePercent))
-
-                    let endPercentage = item.Percentage + cumulativePercent
-
-                    let endCoordinatesX = x + (radius * Math.Cos(2.0 * Math.PI * endPercentage))
-                    let endCoordinatesY = y + (radius * Math.Sin(2.0 * Math.PI * endPercentage))
-                    
-                    let arc =
-                        if item.Percentage > 0.5 then
-                            "1"
-                        else
-                            "0"
-                    
-                    let path =
-                        String.Format (
-                            shapesPath,
-                            startCoordinatesX.ToString nfi,
-                            startCoordinatesY.ToString nfi,
-                            radius.ToString nfi,
-                            arc,
-                            endCoordinatesX.ToString nfi,
-                            endCoordinatesY.ToString nfi,
-                            x.ToString nfi,
-                            y.ToString nfi
-                        )                    
-
-                    let pathGeometry = converter.ConvertFromInvariantString path :?> Geometry
-                    let helperView =
-                        Path (
-                            Data = pathGeometry,
-                            Fill = SolidColorBrush item.Color,
-                            StrokeThickness = 0.,
-                            Stroke = null
-                        )
-                    gridLayout.Children.Add helperView
-
-                    addSliceToView tail endPercentage
-                   
-            let itemsList = items |> Seq.toList
-            addSliceToView itemsList 0.
-
-       self.Content <- gridLayout :> View
-       ()         
-
-    member private self.CreateAndSetImageSource (imageSource : ImageSource) =
-        if not (self.Content :? Image) then
-            let image =
-                Image (
-                    HorizontalOptions = LayoutOptions.FillAndExpand,
-                    VerticalOptions = LayoutOptions.FillAndExpand,
-                    Aspect = Aspect.AspectFit,
-                    Source = imageSource
-                )
-            self.Content <- image
-
-    member self.Draw () =
-        let width = 
-            if base.WidthRequest > 0. then 
-                base.WidthRequest 
-            else 
-                base.Width
-        let height = 
-            if base.HeightRequest > 0. then
-                base.HeightRequest 
-            else 
-                base.Height
-
-        if width <= 0. || 
-           height <= 0. || 
-           not base.IsVisible then
-            ()
-        else
-            let nonZeroItems =
-                if isNull self.SegmentsSource then
-                    None
-                else
-                    self.SegmentsSource.Where(fun s -> s.Percentage > 0.) |> Some
-
-
-            match nonZeroItems with
-            | None -> ()
-            | Some items when items.Any() ->
-                self.DrawShapesBasedPie width height items
-            | Some _ ->
-                self.CreateAndSetImageSource self.DefaultImageSource
-
-    override self.OnPropertyChanged(propertyName: string) =
-        base.OnPropertyChanged(propertyName)
-        if propertyName = VisualElement.HeightProperty.PropertyName ||
-           propertyName = VisualElement.WidthProperty.PropertyName ||
-           propertyName = VisualElement.HeightRequestProperty.PropertyName || 
-           propertyName = VisualElement.WidthRequestProperty.PropertyName || 
-           propertyName = VisualElement.IsVisibleProperty.PropertyName ||
-           propertyName = CircleChartView.SegmentsSourceProperty.PropertyName ||
-           propertyName = CircleChartView.SeparatorPercentageProperty.PropertyName ||
-           propertyName = CircleChartView.CenterCirclePercentageProperty.PropertyName ||
-           propertyName = CircleChartView.SeparatorColorProperty.PropertyName || 
-           propertyName = CircleChartView.DefaultImageSourceProperty.PropertyName then
-            self.Draw()
diff --git a/src/GWallet.Frontend.XF/Controls/HoopChart.fs b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
new file mode 100644
index 000000000..1872353de
--- /dev/null
+++ b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
@@ -0,0 +1,228 @@
+namespace GWallet.Frontend.XF.Controls
+
+
+open Xamarin.Forms
+open Xamarin.Forms.Shapes
+
+
+type SegmentInfo = 
+    {
+        Color: Color
+        Amount: decimal
+    }
+
+
+type private HoopChartState =
+    | Uninitialized
+    | Empty
+    | NonEmpty of seq<SegmentInfo>
+
+
+type private HoopSector =
+    {
+        Fraction: float
+        Color: Color
+    }
+    with
+        static member Create(fraction: float, color: Color) =
+            assert(fraction >= 0.0 && fraction <= 1.0)
+            { Fraction = fraction; Color = color }
+
+
+type HoopChartView() =
+    inherit Layout<View>()
+
+    let mutable state = Uninitialized
+
+    // Child UI elements
+    let balanceLabel = Label(HorizontalTextAlignment = TextAlignment.Center, FontSize = 25.0, MaxLines=1)
+    let balanceTagLabel = 
+        Label( 
+            Text = "Total Assets:", 
+            FontSize = 15.0, 
+            HorizontalOptions = LayoutOptions.Center,
+            VerticalOptions = LayoutOptions.Center,
+            Margin = Thickness(0.0, -7.5)
+        )
+
+    let balanceFrame = 
+        let frame = 
+            Frame(
+                HasShadow = false,
+                BackgroundColor = Color.Transparent,
+                BorderColor = Color.Transparent,
+                Padding = Thickness(0.0),
+                HorizontalOptions = LayoutOptions.CenterAndExpand
+            )
+        let stackLayout = 
+            StackLayout(
+                Orientation = StackOrientation.Vertical,
+                VerticalOptions = LayoutOptions.CenterAndExpand,
+                HorizontalOptions = LayoutOptions.Center
+            )
+        stackLayout.Children.Add balanceTagLabel
+        stackLayout.Children.Add balanceLabel
+        frame.Content <- stackLayout
+
+        frame
+
+    let defaultImage = 
+        Image (
+            HorizontalOptions = LayoutOptions.FillAndExpand,
+            VerticalOptions = LayoutOptions.FillAndExpand,
+            Aspect = Aspect.AspectFit
+        )
+
+    let hoop = Grid()
+    let emptyStateWidget = StackLayout(Orientation = StackOrientation.Horizontal)
+
+    // Properties
+    static let segmentsSourceProperty =
+        BindableProperty.Create("SegmentsSource", typeof<seq<SegmentInfo>>, typeof<HoopChartView>, null) 
+    static let defaultImageSourceProperty =
+        BindableProperty.Create("DefaultImageSource", typeof<ImageSource>, typeof<HoopChartView>, null)
+
+    static member SegmentsSourceProperty = segmentsSourceProperty
+    static member DefaultImageSourceProperty = defaultImageSourceProperty
+
+    member self.SegmentsSource
+        with get () = self.GetValue segmentsSourceProperty :?> seq<SegmentInfo>
+        and set (value: seq<SegmentInfo>) = self.SetValue(segmentsSourceProperty, value)
+
+    member self.DefaultImageSource
+        with get () = self.GetValue defaultImageSourceProperty :?> ImageSource
+        and set (value: ImageSource) = self.SetValue(defaultImageSourceProperty, value)
+
+    member this.BalanceLabel = balanceLabel
+    member this.BalanceFrame = balanceFrame
+
+    // Layout properties
+    member this.MinimumChartSize = 200.0
+    member this.MinimumLogoSize = 50.0
+    member this.HoopStrokeThickness = 7.5
+    
+    // Chart shapes
+    member private this.GetHoopShapes(segments: seq<SegmentInfo>, radius: float) : seq<Shape> =
+        let deg2rad angle = System.Math.PI * (angle / 180.0)
+        let thickness = this.HoopStrokeThickness
+        let minorRadius = thickness/2.0
+        let circleRadius = radius - minorRadius
+        let angleToPoint angle =
+            Point(cos (deg2rad angle) * circleRadius + radius, sin (deg2rad angle) * circleRadius + radius)
+        
+        let circleLength = circleRadius * System.Math.PI * 2.0
+        let spacingFraction = thickness / circleLength * 1.5
+
+        let visibleSectors =
+            let sum = segments |> Seq.sumBy (fun each -> each.Amount)
+            segments |> Seq.choose (fun segment -> 
+                let fraction = float(segment.Amount / sum)
+                if fraction >= spacingFraction then
+                    Some(HoopSector.Create(fraction, segment.Color))
+                else 
+                    None)
+
+        let normalizedSectors =
+            let sum = visibleSectors |> Seq.sumBy (fun each -> each.Fraction)
+            visibleSectors |> Seq.map (fun each -> { each with Fraction = each.Fraction/sum })
+
+        let spacingAngle = 360.0 * spacingFraction
+        let angles =
+            normalizedSectors
+            |> Seq.scan (fun currAngle sector -> currAngle + (360.0 * sector.Fraction)) 0.0
+        let anglePairs = Seq.pairwise angles
+        
+        Seq.map2
+            (fun sector (startAngle, endAngle) ->
+                let startPoint = angleToPoint (startAngle + spacingAngle/2.0)
+                let endPoint = angleToPoint (endAngle - spacingAngle/2.0)
+                let arcAngle = endAngle - startAngle - spacingAngle
+                let geom = PathGeometry()
+                let figure = PathFigure(StartPoint = startPoint)
+                let segment = ArcSegment(endPoint, Size(circleRadius, circleRadius), arcAngle, SweepDirection.Clockwise, arcAngle > 180.0)
+                figure.Segments.Add(segment)
+                geom.Figures.Add(figure)
+                let path = 
+                    Path(
+                        Data = geom, 
+                        Stroke = SolidColorBrush(sector.Color), 
+                        StrokeThickness = thickness, 
+                        StrokeLineCap = PenLineCap.Round
+                    )
+                path :> Shape)
+            normalizedSectors
+            anglePairs
+    
+    member private this.RepopulateHoop(segments, sideLength) =
+        hoop.Children.Clear()
+        this.GetHoopShapes(segments, sideLength / 2.0) |> Seq.iter hoop.Children.Add
+
+    // Layout
+    override this.LayoutChildren(xCoord, yCoord, width, height) = 
+        match state with
+        | Uninitialized -> ()
+        | Empty -> 
+            let bounds = Rectangle.FromLTRB(xCoord, yCoord, xCoord + width, yCoord + height)
+            emptyStateWidget.Layout bounds
+        | NonEmpty(segments) -> 
+            let smallerSide = min width height
+            let xOffset = (max 0.0 (width - smallerSide)) / 2.0
+            let yOffset = (max 0.0 (height - smallerSide)) / 2.0
+            let bounds = Rectangle.FromLTRB(xCoord + xOffset, yCoord + yOffset, xCoord + xOffset + smallerSide, yCoord + yOffset + smallerSide)
+
+            balanceFrame.Layout bounds
+
+            if abs(hoop.Height - smallerSide) > 0.1 then
+                this.RepopulateHoop(segments, smallerSide)
+            
+            hoop.Layout bounds
+
+    override this.OnMeasure(widthConstraint, heightConstraint) =
+        let smallerRequestedSize = min widthConstraint heightConstraint |> min this.MinimumChartSize
+        let minSize = 
+            match state with
+            | Uninitialized -> 0.0
+            | Empty -> this.MinimumLogoSize
+            | NonEmpty _ -> 
+                let size = balanceLabel.Measure(smallerRequestedSize, smallerRequestedSize).Request
+                let factor = 1.1 // to add som visual space between label and chart
+                (sqrt(size.Width*size.Width + size.Height*size.Height) + this.HoopStrokeThickness) * factor
+        let sizeToRequest = max smallerRequestedSize minSize
+        SizeRequest(Size(sizeToRequest, sizeToRequest), Size(minSize, minSize))
+    
+    // Updates
+    member private this.SetState(newState: HoopChartState) =
+        if newState <> state then
+            state <- newState
+            match state with
+            | Uninitialized -> failwith "Invalid state"
+            | Empty ->
+                this.Children.Clear()
+                emptyStateWidget.Children.Clear()
+                emptyStateWidget.Children.Add balanceFrame
+                emptyStateWidget.Children.Add defaultImage
+                this.Children.Add emptyStateWidget
+            | NonEmpty(segments) ->
+                this.Children.Clear()
+                if this.Width > 0.0 && this.Height > 0.0 then
+                    this.RepopulateHoop(segments, min this.Width this.Height)
+                this.Children.Add hoop
+                this.Children.Add balanceFrame
+
+    member private this.UpdateChart() =
+        let nonZeroSegments =
+            match this.SegmentsSource with
+            | null -> Seq.empty
+            | segments -> segments |> Seq.filter (fun segment -> segment.Amount > 0.0m)
+
+        if nonZeroSegments |> Seq.isEmpty |> not then
+            this.SetState(NonEmpty(nonZeroSegments))
+        else
+            this.SetState(Empty)
+
+    override this.OnPropertyChanged(propertyName: string) =
+        base.OnPropertyChanged propertyName
+        if propertyName = HoopChartView.SegmentsSourceProperty.PropertyName then
+            this.UpdateChart()
+        elif propertyName = HoopChartView.DefaultImageSourceProperty.PropertyName then
+            defaultImage.Source <- this.DefaultImageSource
diff --git a/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
index 6fa6d61ba..9c4586117 100644
--- a/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
+++ b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
@@ -94,7 +94,7 @@
     </Compile>
     <Compile Include="FrontendHelpers.fs" />
     <Compile Include="GlobalState.fs" />
-    <Compile Include="Controls\CircleChartView.fs" />
+    <Compile Include="Controls\HoopChart.fs" />
     <Compile Include="PairingFromPage.xaml.fs">
       <DependentUpon>PairingFromPage.xaml</DependentUpon>
       <SubType>Code</SubType>

From b74deef50c4f35d055885cac5ef298c3d0a1ee0e Mon Sep 17 00:00:00 2001
From: webwarrior <reg@webwarrior.ws>
Date: Thu, 21 Jul 2022 13:01:20 +0200
Subject: [PATCH 2/4] Frontend.XF(HoopChart): workaround for Android

Workaround for Android when certain small arcs wouldn't render.
If arc lengthis very small, draw a dot instead.
---
 src/GWallet.Frontend.XF/Controls/HoopChart.fs | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/GWallet.Frontend.XF/Controls/HoopChart.fs b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
index 1872353de..20c87f364 100644
--- a/src/GWallet.Frontend.XF/Controls/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
@@ -137,18 +137,24 @@ type HoopChartView() =
                 let startPoint = angleToPoint (startAngle + spacingAngle/2.0)
                 let endPoint = angleToPoint (endAngle - spacingAngle/2.0)
                 let arcAngle = endAngle - startAngle - spacingAngle
-                let geom = PathGeometry()
-                let figure = PathFigure(StartPoint = startPoint)
-                let segment = ArcSegment(endPoint, Size(circleRadius, circleRadius), arcAngle, SweepDirection.Clockwise, arcAngle > 180.0)
-                figure.Segments.Add(segment)
-                geom.Figures.Add(figure)
-                let path = 
-                    Path(
-                        Data = geom, 
-                        Stroke = SolidColorBrush(sector.Color), 
-                        StrokeThickness = thickness, 
-                        StrokeLineCap = PenLineCap.Round
-                    )
+                let path =
+                    // Workaround for Android where very small arcs wouldn't render
+                    if arcAngle / 360.0 * circleLength < 1.0 then 
+                        let midPoint = Point((startPoint.X + endPoint.X) / 2.0, (startPoint.Y + endPoint.Y) / 2.0)
+                        let geom = EllipseGeometry(midPoint, thickness/2.0, thickness/2.0)
+                        Path(Data = geom, Fill = SolidColorBrush sector.Color)
+                    else
+                        let geom = PathGeometry()
+                        let figure = PathFigure(StartPoint = startPoint)
+                        let segment = ArcSegment(endPoint, Size(circleRadius, circleRadius), arcAngle, SweepDirection.Clockwise, arcAngle > 180.0)
+                        figure.Segments.Add segment
+                        geom.Figures.Add figure
+                        Path(
+                            Data = geom, 
+                            Stroke = SolidColorBrush sector.Color, 
+                            StrokeThickness = thickness, 
+                            StrokeLineCap = PenLineCap.Round
+                        )
                 path :> Shape)
             normalizedSectors
             anglePairs

From 2c9bb630e8a45818bb62fc6e53043e78267c084e Mon Sep 17 00:00:00 2001
From: webwarrior <reg@webwarrior.ws>
Date: Mon, 16 Oct 2023 12:15:45 +0200
Subject: [PATCH 3/4] Frontend.XF: change this to self

Change `this` identifier to `self` to follow coding guidelines.
---
 src/GWallet.Frontend.XF/Controls/HoopChart.fs | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/GWallet.Frontend.XF/Controls/HoopChart.fs b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
index 20c87f364..e628f9429 100644
--- a/src/GWallet.Frontend.XF/Controls/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
@@ -93,18 +93,18 @@ type HoopChartView() =
         with get () = self.GetValue defaultImageSourceProperty :?> ImageSource
         and set (value: ImageSource) = self.SetValue(defaultImageSourceProperty, value)
 
-    member this.BalanceLabel = balanceLabel
-    member this.BalanceFrame = balanceFrame
+    member self.BalanceLabel = balanceLabel
+    member self.BalanceFrame = balanceFrame
 
     // Layout properties
-    member this.MinimumChartSize = 200.0
-    member this.MinimumLogoSize = 50.0
-    member this.HoopStrokeThickness = 7.5
+    member self.MinimumChartSize = 200.0
+    member self.MinimumLogoSize = 50.0
+    member self.HoopStrokeThickness = 7.5
     
     // Chart shapes
-    member private this.GetHoopShapes(segments: seq<SegmentInfo>, radius: float) : seq<Shape> =
+    member private self.GetHoopShapes(segments: seq<SegmentInfo>, radius: float) : seq<Shape> =
         let deg2rad angle = System.Math.PI * (angle / 180.0)
-        let thickness = this.HoopStrokeThickness
+        let thickness = self.HoopStrokeThickness
         let minorRadius = thickness/2.0
         let circleRadius = radius - minorRadius
         let angleToPoint angle =
@@ -159,12 +159,12 @@ type HoopChartView() =
             normalizedSectors
             anglePairs
     
-    member private this.RepopulateHoop(segments, sideLength) =
+    member private self.RepopulateHoop(segments, sideLength) =
         hoop.Children.Clear()
-        this.GetHoopShapes(segments, sideLength / 2.0) |> Seq.iter hoop.Children.Add
+        self.GetHoopShapes(segments, sideLength / 2.0) |> Seq.iter hoop.Children.Add
 
     // Layout
-    override this.LayoutChildren(xCoord, yCoord, width, height) = 
+    override self.LayoutChildren(xCoord, yCoord, width, height) = 
         match state with
         | Uninitialized -> ()
         | Empty -> 
@@ -179,56 +179,56 @@ type HoopChartView() =
             balanceFrame.Layout bounds
 
             if abs(hoop.Height - smallerSide) > 0.1 then
-                this.RepopulateHoop(segments, smallerSide)
+                self.RepopulateHoop(segments, smallerSide)
             
             hoop.Layout bounds
 
-    override this.OnMeasure(widthConstraint, heightConstraint) =
-        let smallerRequestedSize = min widthConstraint heightConstraint |> min this.MinimumChartSize
+    override self.OnMeasure(widthConstraint, heightConstraint) =
+        let smallerRequestedSize = min widthConstraint heightConstraint |> min self.MinimumChartSize
         let minSize = 
             match state with
             | Uninitialized -> 0.0
-            | Empty -> this.MinimumLogoSize
+            | Empty -> self.MinimumLogoSize
             | NonEmpty _ -> 
                 let size = balanceLabel.Measure(smallerRequestedSize, smallerRequestedSize).Request
                 let factor = 1.1 // to add som visual space between label and chart
-                (sqrt(size.Width*size.Width + size.Height*size.Height) + this.HoopStrokeThickness) * factor
+                (sqrt(size.Width*size.Width + size.Height*size.Height) + self.HoopStrokeThickness) * factor
         let sizeToRequest = max smallerRequestedSize minSize
         SizeRequest(Size(sizeToRequest, sizeToRequest), Size(minSize, minSize))
     
     // Updates
-    member private this.SetState(newState: HoopChartState) =
+    member private self.SetState(newState: HoopChartState) =
         if newState <> state then
             state <- newState
             match state with
             | Uninitialized -> failwith "Invalid state"
             | Empty ->
-                this.Children.Clear()
+                self.Children.Clear()
                 emptyStateWidget.Children.Clear()
                 emptyStateWidget.Children.Add balanceFrame
                 emptyStateWidget.Children.Add defaultImage
-                this.Children.Add emptyStateWidget
+                self.Children.Add emptyStateWidget
             | NonEmpty(segments) ->
-                this.Children.Clear()
-                if this.Width > 0.0 && this.Height > 0.0 then
-                    this.RepopulateHoop(segments, min this.Width this.Height)
-                this.Children.Add hoop
-                this.Children.Add balanceFrame
+                self.Children.Clear()
+                if self.Width > 0.0 && self.Height > 0.0 then
+                    self.RepopulateHoop(segments, min self.Width self.Height)
+                self.Children.Add hoop
+                self.Children.Add balanceFrame
 
-    member private this.UpdateChart() =
+    member private self.UpdateChart() =
         let nonZeroSegments =
-            match this.SegmentsSource with
+            match self.SegmentsSource with
             | null -> Seq.empty
             | segments -> segments |> Seq.filter (fun segment -> segment.Amount > 0.0m)
 
         if nonZeroSegments |> Seq.isEmpty |> not then
-            this.SetState(NonEmpty(nonZeroSegments))
+            self.SetState(NonEmpty(nonZeroSegments))
         else
-            this.SetState(Empty)
+            self.SetState(Empty)
 
-    override this.OnPropertyChanged(propertyName: string) =
+    override self.OnPropertyChanged(propertyName: string) =
         base.OnPropertyChanged propertyName
         if propertyName = HoopChartView.SegmentsSourceProperty.PropertyName then
-            this.UpdateChart()
+            self.UpdateChart()
         elif propertyName = HoopChartView.DefaultImageSourceProperty.PropertyName then
-            defaultImage.Source <- this.DefaultImageSource
+            defaultImage.Source <- self.DefaultImageSource

From b720e0f4e43520a981352bae977d23bc40d838c7 Mon Sep 17 00:00:00 2001
From: webwarrior <reg@webwarrior.ws>
Date: Thu, 29 Feb 2024 13:20:02 +0100
Subject: [PATCH 4/4] Forntend.XF: fix wrong balance label layout

Fix wrong total balance label layout on GTK.
---
 src/GWallet.Frontend.XF/Controls/HoopChart.fs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/GWallet.Frontend.XF/Controls/HoopChart.fs b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
index e628f9429..573fe741f 100644
--- a/src/GWallet.Frontend.XF/Controls/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
@@ -190,8 +190,8 @@ type HoopChartView() =
             | Uninitialized -> 0.0
             | Empty -> self.MinimumLogoSize
             | NonEmpty _ -> 
-                let size = balanceLabel.Measure(smallerRequestedSize, smallerRequestedSize).Request
-                let factor = 1.1 // to add som visual space between label and chart
+                let size = balanceLabel.Measure(infinity, smallerRequestedSize).Request
+                let factor = 1.1 // to add some visual space between label and chart
                 (sqrt(size.Width*size.Width + size.Height*size.Height) + self.HoopStrokeThickness) * factor
         let sizeToRequest = max smallerRequestedSize minSize
         SizeRequest(Size(sizeToRequest, sizeToRequest), Size(minSize, minSize))