From c3a9971df62f366aca783bd7d198fdcb984228ad Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Sat, 2 Jul 2022 12:44:29 +0200
Subject: [PATCH 01/14] Frontend.XF: Replaced circle chart with hoop chart
 https://github.com/nblockchain/geewallet/issues/172

(cherry picked from commit bfeb0b790034e281fc69cdf52a9e1136635aafe8)
---
 src/GWallet.Frontend.XF/BalancesPage.xaml    |   8 +-
 src/GWallet.Frontend.XF/BalancesPage.xaml.fs |  20 +--
 src/GWallet.Frontend.XF/HoopChart.fs         | 164 ++++++++++++++-----
 3 files changed, 133 insertions(+), 59 deletions(-)

diff --git a/src/GWallet.Frontend.XF/BalancesPage.xaml b/src/GWallet.Frontend.XF/BalancesPage.xaml
index d255e34a0..9cc772d3f 100644
--- a/src/GWallet.Frontend.XF/BalancesPage.xaml
+++ b/src/GWallet.Frontend.XF/BalancesPage.xaml
@@ -2,7 +2,7 @@
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:GWallet.Frontend.XF"
-             xmlns:controls="clr-namespace:GWallet.Frontend.XF.Controls"
+             xmlns:fsharp="clr-namespace:Frontend.FSharp"
              x:Class="GWallet.Frontend.XF.BalancesPage">
     <StackLayout x:Name="mainLayout"
                  Padding="0,0,0,0"
@@ -61,11 +61,11 @@
                 </StackLayout>
             </Frame>
 
-            <controls:CircleChartView x:Name="normalChartView"
+            <fsharp:HoopChartView x:Name="normalChartView"
                                      HorizontalOptions="FillAndExpand"
                                      VerticalOptions="FillAndExpand"/>
-            
-            <controls:CircleChartView x:Name="readonlyChartView"
+
+            <fsharp: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 40efd2c67..0ec5a672e 100644
--- a/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
+++ b/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
@@ -9,9 +9,9 @@ open Xamarin.Forms
 open Xamarin.Forms.Xaml
 open Xamarin.Essentials
 
-open GWallet.Frontend.XF.Controls
 open GWallet.Backend
 open GWallet.Backend.FSharpUtil.UwpHacks
+open Frontend.FSharp
 
 
 // this type allows us to represent the idea that if we have, for example, 3 LTC and an unknown number of ETC (might
@@ -45,8 +45,8 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
     let totalFiatAmountFrame = mainLayout.FindByName<Frame> "totalFiatAmountFrame"
     let totalReadOnlyFiatAmountFrame = mainLayout.FindByName<Frame> "totalReadOnlyFiatAmountFrame"
     let contentLayout = base.FindByName<StackLayout> "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
@@ -164,18 +164,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
@@ -408,8 +402,8 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
             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 _ ->
diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index d5ea30cbb..6a9b308ba 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -11,16 +11,20 @@ open System.Threading.Tasks
 open System.ComponentModel
 open Microsoft.FSharp.Collections
 
-type Wallet = { CryptoValue: double ; Stroke: Brush }
+type SegmentInfo = 
+    {
+        Color: Color
+        Amount: decimal
+    }
 type Percentage =  { mutable Percent: double;  Stroke: Brush } 
 
 
 module HoopChart =
 
-    let computeCartesianCoordinate (angle:double) (radius:double) = 
+    let centerX = 50.
+    let centerY = 50.
 
-        let centerX = 50.
-        let centerY = 50.
+    let computeCartesianCoordinate (angle:double) (radius:double) = 
 
         let angleRad = (Math.PI / 180.) * (angle - 90.)
 
@@ -64,32 +68,32 @@ module HoopChart =
                 arcAngle + lengthOfArc
         arcAngle
 
-    let Normalize (wallets: seq<Wallet>)  =
+    let Normalize (segments: seq<SegmentInfo>)  =
         
         let minimumShowablePercentage =  2.
         let visiblePercentageLimit = 1.
         let fullPie = 100.
 
-        let total = wallets |> Seq.sumBy(fun x -> x.CryptoValue)
+        let total = segments |> Seq.sumBy(fun x -> x.Amount) |> float
 
         
-        let innerNormalize (wallet: Wallet) : Option<Percentage> =
+        let innerNormalize (segments: SegmentInfo) : Option<Percentage> =
             
-            let percent = wallet.CryptoValue * fullPie / total
+            let percent = float(segments.Amount) * fullPie / total
             
             if fullPie  >= percent && percent >= minimumShowablePercentage then        
       
-                {Percentage.Percent = percent; Stroke = wallet.Stroke} |> Some
+                {Percentage.Percent = percent; Stroke = SolidColorBrush(segments.Color)} |> Some
             
             elif minimumShowablePercentage > percent && percent >= visiblePercentageLimit then
             
-                {Percentage.Percent = minimumShowablePercentage; Stroke = wallet.Stroke} |> Some
+                {Percentage.Percent = minimumShowablePercentage; Stroke = SolidColorBrush(segments.Color)} |> Some
             
             else 
                 None
 
         let pies =  
-            wallets |> Seq.choose innerNormalize//List.choose innerNormalize
+            segments |> Seq.choose innerNormalize//List.choose innerNormalize
 
 
         
@@ -114,34 +118,22 @@ module HoopChart =
 
         result
 
-    let beautifyAmount (wallet:seq<Wallet>) =
+    let beautifyAmount (wallet:seq<SegmentInfo>) =
         
         let total = 
-            wallet |> Seq.sumBy(fun x -> x.CryptoValue)
-        
-        let value = total.ToString()
-        let mutable balance = value
-        let mutable digits = balance.Length
-
-        let place = 4 
+            wallet |> Seq.sumBy(fun x -> x.Amount)
+        let format = if total - floor(total) < 0.01m then "N0" else "N2"
         
+        total.ToString(format, CultureInfo.InvariantCulture)
 
 
-        for digit in 1..digits do
-            if place*digit <= digits then
-                
-                balance <- balance.Insert(digits+1-place*digit,",")
-                digits <- balance.Length
-
-        balance
-
 
-
-    let makePies (grid:Grid) (wallet:seq<Wallet>) =
+    let makePies (segments: seq<SegmentInfo>) : Grid =
     
         let mutable arcAngle = 0.
-        let slices = Seq.length(wallet)
-        let pies  = Normalize wallet
+        let slices = Seq.length(segments)
+        let pies  = Normalize segments
+        let grid = Grid(HorizontalOptions = LayoutOptions.Center)
         
         for pie in pies do
 
@@ -188,25 +180,113 @@ module HoopChart =
 
                 grid.Children.Add(path)                          
 
+        grid
 
 
 
 
-
-    let create (wallet:seq<Wallet>) = 
-          
-   
+    let create (wallet:seq<SegmentInfo>) = 
+        
         let beautifiedAmount = beautifyAmount wallet
         let grid = Grid()
-        let approx = Label( Text = "~", FontSize = 25., HorizontalOptions = LayoutOptions.Center, TranslationY = 160., TranslationX = -40.)
-        let balance = Label( Text = beautifiedAmount, FontSize = 25., HorizontalOptions = LayoutOptions.Center, TranslationY = 160., TranslationX = 0.)            
-        let currency = Label( Text = "U.S.D.", FontSize = 24., HorizontalOptions = LayoutOptions.Center, TranslationY = 160., TranslationX = 65.)        
-        let total_tag = Label( Text = "Amount Balance", FontSize = 15., HorizontalOptions = LayoutOptions.Center, TranslationY = 200.)
+        let balanceString = "~ " + beautifiedAmount + " U.S.D."
+        let balance = 
+            Label( 
+                Text = balanceString, 
+                FontSize = 25., 
+                HorizontalOptions = LayoutOptions.Center, 
+                VerticalOptions = LayoutOptions.Center,
+                TranslationX = centerX / 2.0)            
+        let total_tag = 
+            Label( 
+                Text = "Amount Balance", 
+                FontSize = 15., 
+                HorizontalOptions = LayoutOptions.Center,
+                VerticalOptions = LayoutOptions.Center,
+                TranslationY = 40.0, 
+                TranslationX = centerX / 2.0)
 
-        grid.Children.Add(approx)
         grid.Children.Add(balance)
-        grid.Children.Add(currency)
         grid.Children.Add(total_tag)
 
-        makePies grid wallet
+        let pies = makePies wallet
+        grid.Children.Add(pies)
+
         grid
+
+
+
+type HoopChartView() =
+    inherit ContentView()
+
+    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 private self.CreateAndSetImageSource (imageSource : ImageSource) =
+        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 self.SegmentsSource <> null then
+                    self.SegmentsSource.Where(fun s -> s.Amount > 0.0m) |> Some
+                else
+                    None
+
+            match nonZeroItems with
+            | None -> ()
+            | Some items when items.Any() ->
+                let chart = HoopChart.create items
+                chart.MinimumWidthRequest <- width
+                chart.MinimumHeightRequest <- height
+                self.Content <- chart
+            | 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 = HoopChartView.SegmentsSourceProperty.PropertyName ||
+           propertyName = HoopChartView.DefaultImageSourceProperty.PropertyName then
+            self.Draw()

From bb061c390f396f5f897a7a9553fa2e6dd09a800c Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Sun, 3 Jul 2022 14:08:34 +0200
Subject: [PATCH 02/14] Frontend.XF: Moved total amount label inside new hoop
 chart Also removed no longer used CircleChartView.fs file
 https://github.com/nblockchain/geewallet/issues/172

(cherry picked from commit f4219b9a223008ffb64a71819cee9cf51ae0b851)
---
 src/GWallet.Frontend.XF/BalancesPage.xaml     |  47 ---
 src/GWallet.Frontend.XF/BalancesPage.xaml.fs  |  32 +-
 .../Controls/CircleChartView.fs               | 303 ------------------
 .../GWallet.Frontend.XF.fsproj                |   1 -
 src/GWallet.Frontend.XF/HoopChart.fs          |  95 +++---
 5 files changed, 57 insertions(+), 421 deletions(-)
 delete mode 100644 src/GWallet.Frontend.XF/Controls/CircleChartView.fs

diff --git a/src/GWallet.Frontend.XF/BalancesPage.xaml b/src/GWallet.Frontend.XF/BalancesPage.xaml
index 9cc772d3f..d75dbe9cc 100644
--- a/src/GWallet.Frontend.XF/BalancesPage.xaml
+++ b/src/GWallet.Frontend.XF/BalancesPage.xaml
@@ -14,53 +14,6 @@
                      VerticalOptions="FillAndExpand"
                      HorizontalOptions="FillAndExpand">         
 
-            <!-- 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="CenterAndExpand"
-                   HorizontalOptions="End"
-                   Padding="0"
-                   Margin="0,0,0,0">
-                <StackLayout x:Name="totalFiatAmountLayout"
-                             Orientation="Horizontal"
-                             VerticalOptions="CenterAndExpand"
-                             HorizontalOptions="Center"
-                             Margin="0,0,0,0">
-                    <Label Text="..." x:Name="totalFiatAmountLabel"
-                           VerticalOptions="CenterAndExpand"
-                           HorizontalOptions="Center"
-                           Margin="0,0,0,0"
-                           FontSize="22" />
-                </StackLayout>
-            </Frame>
-
-            <!-- keep this frame&stacklayout&label below almost same as previous! -->
-            <Frame x:Name="totalReadOnlyFiatAmountFrame"
-                   HasShadow="false"
-                   IsVisible="false"
-                   BackgroundColor="Transparent"
-                   BorderColor="Transparent"
-                   VerticalOptions="CenterAndExpand"
-                   HorizontalOptions="End"
-                   Padding="0"
-                   Margin="0,0,0,0">
-                <StackLayout x:Name="totalReadOnlyFiatAmountLayout"
-                             Orientation="Horizontal"
-                             VerticalOptions="CenterAndExpand"
-                             HorizontalOptions="Center"
-                             Margin="0,0,0,0">
-                    <Label Text="..." x:Name="totalReadOnlyFiatAmountLabel"
-                           VerticalOptions="CenterAndExpand"
-                           HorizontalOptions="Center"
-                           Margin="0,0,0,0"
-                           FontSize="22"
-                           TextColor="DarkBlue" />
-                </StackLayout>
-            </Frame>
-
             <fsharp:HoopChartView x:Name="normalChartView"
                                      HorizontalOptions="FillAndExpand"
                                      VerticalOptions="FillAndExpand"/>
diff --git a/src/GWallet.Frontend.XF/BalancesPage.xaml.fs b/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
index 0ec5a672e..648fac1ef 100644
--- a/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
+++ b/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
@@ -40,10 +40,6 @@ 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<StackLayout>("mainLayout")
-    let totalFiatAmountLabel = mainLayout.FindByName<Label> "totalFiatAmountLabel"
-    let totalReadOnlyFiatAmountLabel = mainLayout.FindByName<Label> "totalReadOnlyFiatAmountLabel"
-    let totalFiatAmountFrame = mainLayout.FindByName<Frame> "totalFiatAmountFrame"
-    let totalReadOnlyFiatAmountFrame = mainLayout.FindByName<Frame> "totalReadOnlyFiatAmountFrame"
     let contentLayout = base.FindByName<StackLayout> "contentLayout"
     let normalChartView = base.FindByName<HoopChartView> "normalChartView"
     let readonlyChartView = base.FindByName<HoopChartView> "readonlyChartView"
@@ -75,7 +71,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>>)
@@ -296,7 +292,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                                                 None
 
         let readOnlyAccountsBalanceUpdate =
-            this.UpdateGlobalBalance state readOnlyBalancesJob totalReadOnlyFiatAmountLabel true
+            this.UpdateGlobalBalance state readOnlyBalancesJob readonlyChartView.BalanceLabel true
 
         let allCancelSources,allBalanceUpdates =
             if (not onlyReadOnlyAccounts) then
@@ -307,7 +303,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                                                         None
 
                 let normalAccountsBalanceUpdate =
-                    this.UpdateGlobalBalance state normalBalancesJob totalFiatAmountLabel false
+                    this.UpdateGlobalBalance state normalBalancesJob normalChartView.BalanceLabel false
 
                 let allCancelSources = Seq.append readOnlyCancelSources normalCancelSources
 
@@ -383,12 +379,6 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
             cancelSource.Dispose()
 
     member private this.ConfigureFiatAmountFrame (readOnly: bool): TapGestureRecognizer =
-        let totalCurrentFiatAmountFrameName,totalOtherFiatAmountFrameName =
-            if readOnly then
-                "totalReadOnlyFiatAmountFrame","totalFiatAmountFrame"
-            else
-                "totalFiatAmountFrame","totalReadOnlyFiatAmountFrame"
-
         let currentChartViewName,otherChartViewName =
             if readOnly then
                 "readonlyChartView","normalChartView"
@@ -397,10 +387,6 @@ 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<HoopChartView> currentChartViewName,
             mainLayout.FindByName<HoopChartView> otherChartViewName
@@ -416,9 +402,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
 
             if shouldNotOpenNewPage then
                 Device.BeginInvokeOnMainThread(fun _ ->
-                    totalCurrentFiatAmountFrame.IsVisible <- false
                     currentChartView.IsVisible <- false
-                    totalOtherFiatAmountFrame.IsVisible <- true
                     otherChartView.IsVisible <- true
                 )
                 let balancesStatesToPopulate =
@@ -455,7 +439,7 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
                         FrontendHelpers.SwitchToNewPage this page true
 
         )
-        totalCurrentFiatAmountFrame.GestureRecognizers.Add tapGestureRecognizer
+        currentChartView.BalanceFrame.GestureRecognizers.Add tapGestureRecognizer
         tapGestureRecognizer
 
     member this.PopulateGridInitially () =
@@ -473,11 +457,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
@@ -518,8 +502,8 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
 
             this.PopulateGridInitially ()
 
-            this.UpdateGlobalFiatBalanceSum allNormalAccountFiatBalances totalFiatAmountLabel
-            this.UpdateGlobalFiatBalanceSum allReadOnlyAccountFiatBalances totalReadOnlyFiatAmountLabel
+            this.UpdateGlobalFiatBalanceSum allNormalAccountFiatBalances normalChartView.BalanceLabel
+            this.UpdateGlobalFiatBalanceSum allReadOnlyAccountFiatBalances readonlyChartView.BalanceLabel
         )
 
         this.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 e2f62b983..000000000
--- a/src/GWallet.Frontend.XF/Controls/CircleChartView.fs
+++ /dev/null
@@ -1,303 +0,0 @@
-namespace GWallet.Frontend.XF.Controls
-
-open System
-open System.Text
-open System.Linq
-open System.Globalization
-open System.IO
-
-open Xamarin.Forms
-open Xamarin.Forms.Shapes
-
-open GWallet.Frontend.XF
-open GWallet.Backend.FSharpUtil.UwpHacks
-
-type SegmentInfo = 
-    {
-        Color: Color
-        Percentage: float
-    }
-
-type CircleChartView () =
-    inherit ContentView () 
-
-    let svgMainImagePattern = @"<?xml version=""1.0"" encoding=""utf-8""?>
-    <svg version=""1.1"" id=""Layer_1"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" x=""0px"" y=""0px""
-    width=""{0}px"" height=""{0}px"" viewBox=""0 0 {0} {0}"" enable-background=""new 0 0 {0} {0}"" xml:space=""preserve"">
-    {1}
-    {2}
-    </svg>"
-    let svgSegmentPattern = @"<path fill=""{0}"" d=""M{1},{2} L{1},0 A{1},{1} 1 {3},1 {4},{5} L{6},{7} A{8},{8} 1 {3},0 {1},{2} z"" transform=""rotate({9}, {1}, {1})"" />"
-    let svgCirclePattern = @"<circle cx=""{0}"" cy=""{0}"" r=""{1}"" fill=""{2}""/>"
-    let degree360 = 360.
-    let degree180 = 180.
-    let degree90 = 90.
-    let shapesPath = @"M{0},{1} A{2},{2} 0 {3} 1 {4} {5} L {6} {7}"
-
-    let mutable firstWidth = None
-    let mutable firstHeight = None
-
-    let BuildColorPart(part: float): int =
-        int(part * 255.)
-
-    let GetHexColor(color: Color): string =
-        let red =  BuildColorPart color.R
-        let green = BuildColorPart color.G
-        let blue = BuildColorPart color.B
-        let alpha = BuildColorPart color.A
-        String.Format("{0:X2}{1:X2}{2:X2}{3:X2}", alpha, red, green, blue)
-
-    let GetArcCoordinates radius angle shift =
-        let angleCalculated = 
-            if angle > degree180 then 
-                degree360 - angle 
-            else 
-                angle
-
-        let angleRad = angleCalculated * Math.PI / degree180
-
-        let perpendicularDistance = 
-            if angleCalculated > degree90 then 
-                float(radius) * Math.Sin((degree180 - angleCalculated) * Math.PI / degree180) 
-            else 
-                float(radius) * Math.Sin(angleRad)
-
-        let topPointDistance =
-            Math.Sqrt(float(2 * radius * radius) - (float (2 * radius * radius) * Math.Cos(angleRad)))
-        let arcEndY = Math.Sqrt(topPointDistance * topPointDistance - perpendicularDistance * perpendicularDistance)
-        let arcEndX = 
-            if angle > degree180 then 
-                float(radius) - perpendicularDistance 
-            else 
-                float(radius) + perpendicularDistance
-
-        arcEndX + shift, arcEndY + shift
-
-    let CollectSegment color startX startY radius innerRadius angle rotation (segmentsBuilder: StringBuilder) =
-        let bigArcEndX, bigArcEndY = GetArcCoordinates radius angle 0.
-        let shift = float(radius - innerRadius)
-        let smallArcEndX, smallArcEndY = GetArcCoordinates innerRadius angle shift
-
-        let obtuseAngleFlag = 
-            if angle > degree180 then
-                1 
-            else 
-                0
-
-        segmentsBuilder.AppendLine(
-            String.Format(svgSegmentPattern, 
-                          color, 
-                          startX, 
-                          startY, 
-                          obtuseAngleFlag, 
-                          bigArcEndX, 
-                          bigArcEndY, 
-                          smallArcEndX, 
-                          smallArcEndY, 
-                          innerRadius, 
-                          rotation)
-        ) |> ignore
-
-    let PrepareSegmentsSvgBuilder segmentsToDraw rotation startY radius innerRadius: StringBuilder =
-        let rec prepareSegmentsSvgBuilderInner segmentsToDraw rotation startY radius innerRadius segmentsBuilder =
-            match segmentsToDraw with
-            | [] ->
-                ()
-            | item::tail ->
-                let angle = degree360 * item.Percentage
-                if item.Color.A > 0. then
-                    let color = GetHexColor item.Color
-                    let startX = radius
-
-                    if angle >= 360. then
-                        CollectSegment color startX startY radius innerRadius 180. rotation segmentsBuilder
-                        CollectSegment color startX startY radius innerRadius 180. 180. segmentsBuilder
-                    else
-                        CollectSegment color startX startY radius innerRadius angle rotation segmentsBuilder
-
-                let newRotation = rotation + angle
-                prepareSegmentsSvgBuilderInner tail newRotation startY radius innerRadius segmentsBuilder
-
-        let segmentsBuilder = StringBuilder()
-        prepareSegmentsSvgBuilderInner segmentsToDraw rotation startY radius innerRadius segmentsBuilder
-        segmentsBuilder
-            
-    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 total = items.Sum(fun i -> i.Percentage) |> 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) =
-        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 self.SegmentsSource <> null then
-                    self.SegmentsSource.Where(fun s -> s.Percentage > 0.) |> Some
-                else
-                    None
-
-            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/GWallet.Frontend.XF.fsproj b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
index 8b02d3138..744c1782a 100644
--- a/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
+++ b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
@@ -94,7 +94,6 @@
     </Compile>
     <Compile Include="FrontendHelpers.fs" />
     <Compile Include="GlobalState.fs" />
-    <Compile Include="Controls\CircleChartView.fs" />
     <Compile Include="HoopChart.fs" />
     <Compile Include="PairingFromPage.xaml.fs">
       <DependentUpon>PairingFromPage.xaml</DependentUpon>
diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index 6a9b308ba..42af2eadf 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -94,10 +94,7 @@ module HoopChart =
 
         let pies =  
             segments |> Seq.choose innerNormalize//List.choose innerNormalize
-
-
         
-
         let wholePie = 
             pies |> Seq.sumBy(fun x -> x.Percent)
 
@@ -118,15 +115,6 @@ module HoopChart =
 
         result
 
-    let beautifyAmount (wallet:seq<SegmentInfo>) =
-        
-        let total = 
-            wallet |> Seq.sumBy(fun x -> x.Amount)
-        let format = if total - floor(total) < 0.01m then "N0" else "N2"
-        
-        total.ToString(format, CultureInfo.InvariantCulture)
-
-
 
     let makePies (segments: seq<SegmentInfo>) : Grid =
     
@@ -185,40 +173,48 @@ module HoopChart =
 
 
 
-    let create (wallet:seq<SegmentInfo>) = 
-        
-        let beautifiedAmount = beautifyAmount wallet
-        let grid = Grid()
-        let balanceString = "~ " + beautifiedAmount + " U.S.D."
-        let balance = 
-            Label( 
-                Text = balanceString, 
-                FontSize = 25., 
-                HorizontalOptions = LayoutOptions.Center, 
-                VerticalOptions = LayoutOptions.Center,
-                TranslationX = centerX / 2.0)            
-        let total_tag = 
-            Label( 
-                Text = "Amount Balance", 
-                FontSize = 15., 
-                HorizontalOptions = LayoutOptions.Center,
-                VerticalOptions = LayoutOptions.Center,
-                TranslationY = 40.0, 
-                TranslationX = centerX / 2.0)
-
-        grid.Children.Add(balance)
-        grid.Children.Add(total_tag)
-
-        let pies = makePies wallet
-        grid.Children.Add(pies)
-
-        grid
-
-
-
 type HoopChartView() =
     inherit ContentView()
 
+    let balanceLabel = 
+        Label( 
+            Text = "...", 
+            HorizontalTextAlignment = TextAlignment.Center,
+            FontSize = 25.)
+            
+    let balanceTagLabel = 
+        Label( 
+            Text = "Amount Balance", 
+            FontSize = 15., 
+            HorizontalOptions = LayoutOptions.Center,
+            VerticalOptions = LayoutOptions.Center)
+    
+    let balanceFrame = 
+        let frame = 
+            // we add {V|H}Options=Center* not only to the Label, as a workaround to
+            // https://github.com/xamarin/Xamarin.Forms/issues/4655
+            Frame(
+                HasShadow=false,
+                BackgroundColor=Color.Transparent,
+                BorderColor=Color.Transparent,
+                HorizontalOptions = LayoutOptions.Center, 
+                VerticalOptions = LayoutOptions.Center,
+                TranslationX = HoopChart.centerX / 2.0,
+                TranslationY = HoopChart.centerY / 2.0,
+                Padding=Thickness(0.0),
+                Margin=Thickness(0.0))
+        let stackLayout = 
+            StackLayout(
+                Orientation=StackOrientation.Vertical,
+                VerticalOptions=LayoutOptions.CenterAndExpand,
+                HorizontalOptions=LayoutOptions.Center,
+                Margin=Thickness(0.0))
+        stackLayout.Children.Add(balanceLabel)
+        stackLayout.Children.Add(balanceTagLabel)
+        frame.Content <- stackLayout
+
+        frame
+
     static let segmentsSourceProperty =
         BindableProperty.Create("SegmentsSource",
                                 typeof<seq<SegmentInfo>>, typeof<HoopChartView>, null) 
@@ -237,6 +233,9 @@ type HoopChartView() =
         with get () = self.GetValue defaultImageSourceProperty :?> ImageSource
         and set (value: ImageSource) = self.SetValue(defaultImageSourceProperty, value)
 
+    member self.BalanceLabel = balanceLabel
+    member self.BalanceFrame = balanceFrame
+
     member private self.CreateAndSetImageSource (imageSource : ImageSource) =
         let image =
             Image (
@@ -273,9 +272,13 @@ type HoopChartView() =
             match nonZeroItems with
             | None -> ()
             | Some items when items.Any() ->
-                let chart = HoopChart.create items
-                chart.MinimumWidthRequest <- width
-                chart.MinimumHeightRequest <- height
+                let chart = Grid(MinimumWidthRequest = width, MinimumHeightRequest = height)
+                let pies = HoopChart.makePies items
+                // It's important that balanceFrame is added after pie chart, 
+                // because otherwise balanceFrame's input events are blocked
+                chart.Children.Add(pies)
+                chart.Children.Add(balanceFrame)
+
                 self.Content <- chart
             | Some _ ->
                 self.CreateAndSetImageSource self.DefaultImageSource

From aa1f1e0e2562a2138ce5d193003e1e76ecb3361d Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Sun, 3 Jul 2022 14:58:42 +0200
Subject: [PATCH 03/14] Frontend.XF: minor refactoring in HoopChart Made
 Percent field of Percentage record immutable

(cherry picked from commit 761484c64df7f4367304ca7bda4e65c49f19b1c3)
---
 src/GWallet.Frontend.XF/HoopChart.fs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index 42af2eadf..5221abfcb 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -16,7 +16,7 @@ type SegmentInfo =
         Color: Color
         Amount: decimal
     }
-type Percentage =  { mutable Percent: double;  Stroke: Brush } 
+type Percentage =  { Percent: double;  Stroke: Brush } 
 
 
 module HoopChart =

From 1d4c352e199f2c03dde477eb6a96e8e15e5bb312 Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Mon, 4 Jul 2022 11:44:09 +0200
Subject: [PATCH 04/14] Frontend.XF: changed label text inside hoop chart

(cherry picked from commit 690cec117055555916c754bfc51679136f51a870)
---
 src/GWallet.Frontend.XF/HoopChart.fs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index 5221abfcb..8a9703406 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -184,7 +184,7 @@ type HoopChartView() =
             
     let balanceTagLabel = 
         Label( 
-            Text = "Amount Balance", 
+            Text = "Total Assets:", 
             FontSize = 15., 
             HorizontalOptions = LayoutOptions.Center,
             VerticalOptions = LayoutOptions.Center)
@@ -209,8 +209,8 @@ type HoopChartView() =
                 VerticalOptions=LayoutOptions.CenterAndExpand,
                 HorizontalOptions=LayoutOptions.Center,
                 Margin=Thickness(0.0))
-        stackLayout.Children.Add(balanceLabel)
         stackLayout.Children.Add(balanceTagLabel)
+        stackLayout.Children.Add(balanceLabel)
         frame.Content <- stackLayout
 
         frame

From 78e4fb7fb9c5f9e2741765d9f6bb2e7585c4755a Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Mon, 18 Jul 2022 10:28:44 +0200
Subject: [PATCH 05/14] Frontend.XF: Removed HoopChart.fs

---
 .../GWallet.Frontend.XF.fsproj                |   1 -
 src/GWallet.Frontend.XF/HoopChart.fs          | 295 ------------------
 2 files changed, 296 deletions(-)
 delete mode 100644 src/GWallet.Frontend.XF/HoopChart.fs

diff --git a/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
index 744c1782a..065a6f954 100644
--- a/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
+++ b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
@@ -94,7 +94,6 @@
     </Compile>
     <Compile Include="FrontendHelpers.fs" />
     <Compile Include="GlobalState.fs" />
-    <Compile Include="HoopChart.fs" />
     <Compile Include="PairingFromPage.xaml.fs">
       <DependentUpon>PairingFromPage.xaml</DependentUpon>
       <SubType>Code</SubType>
diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
deleted file mode 100644
index 8a9703406..000000000
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ /dev/null
@@ -1,295 +0,0 @@
-namespace Frontend.FSharp
-
-open System
-open System.Linq
-open System.Text
-open System.Globalization
-open System.IO
-open Xamarin.Forms
-open Xamarin.Forms.Shapes
-open System.Threading.Tasks
-open System.ComponentModel
-open Microsoft.FSharp.Collections
-
-type SegmentInfo = 
-    {
-        Color: Color
-        Amount: decimal
-    }
-type Percentage =  { Percent: double;  Stroke: Brush } 
-
-
-module HoopChart =
-
-    let centerX = 50.
-    let centerY = 50.
-
-    let computeCartesianCoordinate (angle:double) (radius:double) = 
-
-        let angleRad = (Math.PI / 180.) * (angle - 90.)
-
-        let x = radius *  Math.Cos(angleRad) + (radius + centerX)
-        
-        let y = radius *  Math.Sin(angleRad) + (radius + centerY)
-
-        Point(x,y)
-
-    let renderArc (pathRoot:Path) (pathFigure:PathFigure) (arc:ArcSegment) (startAngle:double) (endAngle:double) = 
-        
-        let radius = 150.
-        let angle =  0.
-        let largeArc = 
-            if endAngle > 180. then
-                true
-            else
-                false
-
-        pathRoot.StrokeLineCap <- PenLineCap.Round
-        pathRoot.StrokeThickness <- 12.
-        
-        arc.SweepDirection <- SweepDirection.Clockwise
-        arc.Size <- Size(radius, radius)
-        arc.RotationAngle <- angle
-        arc.IsLargeArc <- largeArc
-
-        pathFigure.StartPoint <- computeCartesianCoordinate startAngle  radius
-        arc.Point <- computeCartesianCoordinate (startAngle + endAngle) radius
-        ()
-
-    let setArcAngle (lengthOfArc:double) (gap:double) (arcAngle:double) (path:Path) (pathFigure:PathFigure) (arcSegment:ArcSegment) =
-    
-        let lowestNaturalNumber = 1.
-        let arcAngle =
-            if lengthOfArc > lowestNaturalNumber then
-                renderArc path pathFigure arcSegment (arcAngle + gap) (lengthOfArc - gap * 2.)
-                arcAngle + lengthOfArc                            
-            else
-                renderArc path pathFigure arcSegment (arcAngle - gap) (lengthOfArc + gap * 2.)
-                arcAngle + lengthOfArc
-        arcAngle
-
-    let Normalize (segments: seq<SegmentInfo>)  =
-        
-        let minimumShowablePercentage =  2.
-        let visiblePercentageLimit = 1.
-        let fullPie = 100.
-
-        let total = segments |> Seq.sumBy(fun x -> x.Amount) |> float
-
-        
-        let innerNormalize (segments: SegmentInfo) : Option<Percentage> =
-            
-            let percent = float(segments.Amount) * fullPie / total
-            
-            if fullPie  >= percent && percent >= minimumShowablePercentage then        
-      
-                {Percentage.Percent = percent; Stroke = SolidColorBrush(segments.Color)} |> Some
-            
-            elif minimumShowablePercentage > percent && percent >= visiblePercentageLimit then
-            
-                {Percentage.Percent = minimumShowablePercentage; Stroke = SolidColorBrush(segments.Color)} |> Some
-            
-            else 
-                None
-
-        let pies =  
-            segments |> Seq.choose innerNormalize//List.choose innerNormalize
-        
-        let wholePie = 
-            pies |> Seq.sumBy(fun x -> x.Percent)
-
-        let sortedPies = 
-            pies |> Seq.sortByDescending(fun x -> x.Percent)
-            
-        let result = 
-            sortedPies |> Seq.mapi (fun index  x -> 
-
-                if index = 0 && wholePie > fullPie then
-                    {x with Percent =  x.Percent - (wholePie - fullPie)}
-                elif index = (Seq.length(sortedPies)-1) && wholePie < fullPie then
-                    {x with Percent = x.Percent + (fullPie - wholePie)}
-                else
-                    x
-            )
-
-
-        result
-
-
-    let makePies (segments: seq<SegmentInfo>) : Grid =
-    
-        let mutable arcAngle = 0.
-        let slices = Seq.length(segments)
-        let pies  = Normalize segments
-        let grid = Grid(HorizontalOptions = LayoutOptions.Center)
-        
-        for pie in pies do
-
-            if slices > 1 then
-
-                
-                let lengthOfArc = ( pie.Percent ) * 360. / 100.
-                let gap = 2.5    
-
-                let path = Path(Stroke = pie.Stroke)
-                let pathG = PathGeometry ()
-                let pathFC = PathFigureCollection()
-                let pathF =  PathFigure()
-                let pathSC = PathSegmentCollection()
-                let arcS = ArcSegment()
-
-                arcAngle <- setArcAngle lengthOfArc gap arcAngle path pathF arcS
-                    
-                path.Data <- pathG
-                pathG.Figures <- pathFC
-                pathFC.Add(pathF)
-                pathF.Segments.Add(arcS)
-
-                grid.Children.Add(path)
-            
-            else
-                
-                let lengthOfArc = 360.
-                let gap = 0.
-                
-                let path = Path(Stroke = pie.Stroke)
-                let pathG = PathGeometry ()
-                let pathFC = PathFigureCollection()
-                let pathF =  PathFigure()
-                let pathSC = PathSegmentCollection()
-                let arcS = ArcSegment()
-                
-                renderArc path pathF arcS (arcAngle + gap) (lengthOfArc - gap * 2.)
-                
-                path.Data <- pathG
-                pathG.Figures <- pathFC
-                pathFC.Add(pathF)
-                pathF.Segments.Add(arcS)
-
-                grid.Children.Add(path)                          
-
-        grid
-
-
-
-
-type HoopChartView() =
-    inherit ContentView()
-
-    let balanceLabel = 
-        Label( 
-            Text = "...", 
-            HorizontalTextAlignment = TextAlignment.Center,
-            FontSize = 25.)
-            
-    let balanceTagLabel = 
-        Label( 
-            Text = "Total Assets:", 
-            FontSize = 15., 
-            HorizontalOptions = LayoutOptions.Center,
-            VerticalOptions = LayoutOptions.Center)
-    
-    let balanceFrame = 
-        let frame = 
-            // we add {V|H}Options=Center* not only to the Label, as a workaround to
-            // https://github.com/xamarin/Xamarin.Forms/issues/4655
-            Frame(
-                HasShadow=false,
-                BackgroundColor=Color.Transparent,
-                BorderColor=Color.Transparent,
-                HorizontalOptions = LayoutOptions.Center, 
-                VerticalOptions = LayoutOptions.Center,
-                TranslationX = HoopChart.centerX / 2.0,
-                TranslationY = HoopChart.centerY / 2.0,
-                Padding=Thickness(0.0),
-                Margin=Thickness(0.0))
-        let stackLayout = 
-            StackLayout(
-                Orientation=StackOrientation.Vertical,
-                VerticalOptions=LayoutOptions.CenterAndExpand,
-                HorizontalOptions=LayoutOptions.Center,
-                Margin=Thickness(0.0))
-        stackLayout.Children.Add(balanceTagLabel)
-        stackLayout.Children.Add(balanceLabel)
-        frame.Content <- stackLayout
-
-        frame
-
-    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 self.BalanceLabel = balanceLabel
-    member self.BalanceFrame = balanceFrame
-
-    member private self.CreateAndSetImageSource (imageSource : ImageSource) =
-        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 self.SegmentsSource <> null then
-                    self.SegmentsSource.Where(fun s -> s.Amount > 0.0m) |> Some
-                else
-                    None
-
-            match nonZeroItems with
-            | None -> ()
-            | Some items when items.Any() ->
-                let chart = Grid(MinimumWidthRequest = width, MinimumHeightRequest = height)
-                let pies = HoopChart.makePies items
-                // It's important that balanceFrame is added after pie chart, 
-                // because otherwise balanceFrame's input events are blocked
-                chart.Children.Add(pies)
-                chart.Children.Add(balanceFrame)
-
-                self.Content <- chart
-            | 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 = HoopChartView.SegmentsSourceProperty.PropertyName ||
-           propertyName = HoopChartView.DefaultImageSourceProperty.PropertyName then
-            self.Draw()

From bd8ceb98fa4465bbc12869ff5c21827d2f2ef0e1 Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Mon, 18 Jul 2022 15:10:23 +0200
Subject: [PATCH 06/14] Frontend.XF (WIP): began (re-)implementing Hoop chart

---
 .../GWallet.Frontend.XF.fsproj                |   1 +
 src/GWallet.Frontend.XF/HoopChart.fs          | 179 ++++++++++++++++++
 2 files changed, 180 insertions(+)
 create mode 100644 src/GWallet.Frontend.XF/HoopChart.fs

diff --git a/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
index 065a6f954..2b61f15c9 100644
--- a/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
+++ b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
@@ -93,6 +93,7 @@
       <Link>Properties\CommonAssemblyInfo.fs</Link>
     </Compile>
     <Compile Include="FrontendHelpers.fs" />
+    <Compile Include="HoopChart.fs" />
     <Compile Include="GlobalState.fs" />
     <Compile Include="PairingFromPage.xaml.fs">
       <DependentUpon>PairingFromPage.xaml</DependentUpon>
diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
new file mode 100644
index 000000000..2a824e343
--- /dev/null
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -0,0 +1,179 @@
+namespace Frontend.FSharp
+
+
+open Xamarin.Forms
+open Xamarin.Forms.Shapes
+
+
+
+type SegmentInfo = 
+    {
+        Color: Color
+        Amount: decimal
+    }
+
+
+type private HoopChartState =
+    | Uninitialized
+    | Empty
+    | NonEmpty of seq<SegmentInfo>
+
+
+type HoopChartView() =
+    inherit Layout<View>()
+
+    let mutable state = Uninitialized
+
+    let referenceHoopRadius = 100.0
+    let hoopStrokeThickness = 5.0 // make a property?
+
+    // Child UI elements
+    let balanceLabel = Label(HorizontalTextAlignment = TextAlignment.Center, FontSize = 25.0)
+    let balanceTagLabel = 
+        Label( 
+            Text = "Account Balance", 
+            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)
+            )
+        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 = AbsoluteLayout()
+
+    // 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
+    
+    // Chart shapes
+    member private this.GetHoopShapes(segments: seq<SegmentInfo>) : seq<Shape> =
+        // not using actual data for now
+        let deg2rad angle = System.Math.PI * (angle / 180.0)
+        let rSmall = hoopStrokeThickness/2.0
+        let r = referenceHoopRadius - rSmall
+        let angleToPoint angle =
+            Point(cos (deg2rad angle) * r + r + rSmall, sin (deg2rad angle) * r + r + rSmall)
+        seq { 
+            for angle in 0.0 .. 90.0 .. 360.0 do
+                let startPoint = angleToPoint angle
+                let endPoint = angleToPoint (angle + 90.0)
+                let path = Path()
+                let geom = PathGeometry()
+                let figure = PathFigure()
+                figure.StartPoint <- startPoint
+                let segment = ArcSegment(endPoint, Size(r, r), 90.0, SweepDirection.Clockwise, false)
+                figure.Segments.Add(segment)
+                geom.Figures.Add(figure)
+                path.Data <- geom
+                path.Stroke <- SolidColorBrush(Color.FromHsv(angle/360.0, 0.7, 0.8))
+                path.StrokeThickness <- hoopStrokeThickness
+                yield path 
+        }
+
+    // Layout
+    override this.LayoutChildren(x, y, width, height) = 
+        match state with
+        | Uninitialized -> ()
+        | Empty -> 
+            let bounds = Rectangle.FromLTRB(x, y, x + width, y + height)
+            defaultImage.Layout(bounds)
+        | NonEmpty(_) -> 
+            let smallerSide = min width height
+            let dx = (max 0.0 (width - smallerSide)) / 2.0
+            let dy = (max 0.0 (height - smallerSide)) / 2.0
+            let bounds = Rectangle.FromLTRB(x + dx, y + dy, x + dx + smallerSide, y + dy + smallerSide)
+
+            balanceFrame.Layout(bounds)
+
+            hoop.AnchorX <- 0.0
+            hoop.AnchorY <- 0.0
+            hoop.Scale <- smallerSide / (referenceHoopRadius * 2.0)
+            hoop.Layout(bounds)
+
+    override this.OnMeasure(widthConstraint, heightConstraint) =
+        let smallerRequestedSize = min widthConstraint heightConstraint |> min 200.0
+        let minWidth = 
+            match state with
+            | Uninitialized -> 0.0
+            | Empty -> 50.0
+            | NonEmpty(_) -> 
+                let sizeFactor = 1.1 // maybe calculate actual factor based on geometry?
+                balanceFrame.Measure(smallerRequestedSize, smallerRequestedSize).Request.Width * sizeFactor
+        let sizeToRequest = max smallerRequestedSize minWidth
+        SizeRequest(Size(sizeToRequest, sizeToRequest), Size(minWidth, minWidth))
+    
+    // Updates
+    member private this.SetState(newState: HoopChartState) =
+        if newState <> state then
+            state <- newState
+            match state with
+            | Uninitialized -> failwith "Invalid state"
+            | Empty ->
+                this.Children.Clear()
+                this.Children.Add(defaultImage)
+            | NonEmpty(segments) ->
+                this.Children.Clear()
+                hoop.Children.Clear()
+                this.GetHoopShapes(segments) |> Seq.iter hoop.Children.Add
+                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 x -> x.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
\ No newline at end of file

From afd2690ffe5cc6c82f84709ee5d329018bbba46f Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Tue, 19 Jul 2022 11:47:42 +0200
Subject: [PATCH 07/14] Frontend.XF (WIP): fixed layout in Hoop chart

---
 src/GWallet.Frontend.XF/HoopChart.fs | 52 ++++++++++++++++------------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index 2a824e343..f1dd630d9 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -24,11 +24,8 @@ type HoopChartView() =
 
     let mutable state = Uninitialized
 
-    let referenceHoopRadius = 100.0
-    let hoopStrokeThickness = 5.0 // make a property?
-
     // Child UI elements
-    let balanceLabel = Label(HorizontalTextAlignment = TextAlignment.Center, FontSize = 25.0)
+    let balanceLabel = Label(HorizontalTextAlignment = TextAlignment.Center, FontSize = 25.0, MaxLines=1)
     let balanceTagLabel = 
         Label( 
             Text = "Account Balance", 
@@ -65,7 +62,7 @@ type HoopChartView() =
             Aspect = Aspect.AspectFit
         )
 
-    let hoop = AbsoluteLayout()
+    let hoop = Grid()
 
     // Properties
     static let segmentsSourceProperty =
@@ -86,15 +83,20 @@ type HoopChartView() =
 
     member this.BalanceLabel = balanceLabel
     member this.BalanceFrame = balanceFrame
+
+    // Layout properties
+    member this.MinimumChartSize = 200.0
+    member this.MinimumLogoSize = 50.0
+    member this.HoopStrokeThickness = 5.0
     
     // Chart shapes
-    member private this.GetHoopShapes(segments: seq<SegmentInfo>) : seq<Shape> =
+    member private this.GetHoopShapes(segments: seq<SegmentInfo>, radius: float) : seq<Shape> =
         // not using actual data for now
         let deg2rad angle = System.Math.PI * (angle / 180.0)
-        let rSmall = hoopStrokeThickness/2.0
-        let r = referenceHoopRadius - rSmall
+        let minorRadius = this.HoopStrokeThickness/2.0
+        let r = radius - minorRadius
         let angleToPoint angle =
-            Point(cos (deg2rad angle) * r + r + rSmall, sin (deg2rad angle) * r + r + rSmall)
+            Point(cos (deg2rad angle) * r + radius, sin (deg2rad angle) * r + radius)
         seq { 
             for angle in 0.0 .. 90.0 .. 360.0 do
                 let startPoint = angleToPoint angle
@@ -108,9 +110,13 @@ type HoopChartView() =
                 geom.Figures.Add(figure)
                 path.Data <- geom
                 path.Stroke <- SolidColorBrush(Color.FromHsv(angle/360.0, 0.7, 0.8))
-                path.StrokeThickness <- hoopStrokeThickness
+                path.StrokeThickness <- this.HoopStrokeThickness
                 yield path 
         }
+    
+    member private this.RepopulateHoop(segments, sideLength) =
+        hoop.Children.Clear()
+        this.GetHoopShapes(segments, sideLength / 2.0) |> Seq.iter hoop.Children.Add
 
     // Layout
     override this.LayoutChildren(x, y, width, height) = 
@@ -119,7 +125,7 @@ type HoopChartView() =
         | Empty -> 
             let bounds = Rectangle.FromLTRB(x, y, x + width, y + height)
             defaultImage.Layout(bounds)
-        | NonEmpty(_) -> 
+        | NonEmpty(segments) -> 
             let smallerSide = min width height
             let dx = (max 0.0 (width - smallerSide)) / 2.0
             let dy = (max 0.0 (height - smallerSide)) / 2.0
@@ -127,22 +133,22 @@ type HoopChartView() =
 
             balanceFrame.Layout(bounds)
 
-            hoop.AnchorX <- 0.0
-            hoop.AnchorY <- 0.0
-            hoop.Scale <- smallerSide / (referenceHoopRadius * 2.0)
+            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 200.0
-        let minWidth = 
+        let smallerRequestedSize = min widthConstraint heightConstraint |> min this.MinimumChartSize
+        let minSize = 
             match state with
             | Uninitialized -> 0.0
-            | Empty -> 50.0
+            | Empty -> this.MinimumLogoSize
             | NonEmpty(_) -> 
-                let sizeFactor = 1.1 // maybe calculate actual factor based on geometry?
-                balanceFrame.Measure(smallerRequestedSize, smallerRequestedSize).Request.Width * sizeFactor
-        let sizeToRequest = max smallerRequestedSize minWidth
-        SizeRequest(Size(sizeToRequest, sizeToRequest), Size(minWidth, minWidth))
+                let size = balanceLabel.Measure(smallerRequestedSize, smallerRequestedSize).Request
+                (sqrt(size.Width*size.Width + size.Height*size.Height) + this.HoopStrokeThickness) * 1.1
+        let sizeToRequest = max smallerRequestedSize minSize
+        SizeRequest(Size(sizeToRequest, sizeToRequest), Size(minSize, minSize))
     
     // Updates
     member private this.SetState(newState: HoopChartState) =
@@ -155,8 +161,8 @@ type HoopChartView() =
                 this.Children.Add(defaultImage)
             | NonEmpty(segments) ->
                 this.Children.Clear()
-                hoop.Children.Clear()
-                this.GetHoopShapes(segments) |> Seq.iter hoop.Children.Add
+                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)
 

From 7d8b6bc122ccac4397d7587055c186c9efb88243 Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Tue, 19 Jul 2022 13:05:05 +0200
Subject: [PATCH 08/14] Frontend.XF: made working Hoop chart

---
 src/GWallet.Frontend.XF/HoopChart.fs | 57 ++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index f1dd630d9..9c21a3deb 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -19,6 +19,13 @@ type private HoopChartState =
     | NonEmpty of seq<SegmentInfo>
 
 
+type private HoopSector =
+    {
+        Fraction: float
+        Color: Color
+    }
+
+
 type HoopChartView() =
     inherit Layout<View>()
 
@@ -87,32 +94,58 @@ type HoopChartView() =
     // Layout properties
     member this.MinimumChartSize = 200.0
     member this.MinimumLogoSize = 50.0
-    member this.HoopStrokeThickness = 5.0
+    member this.HoopStrokeThickness = 7.5
     
     // Chart shapes
     member private this.GetHoopShapes(segments: seq<SegmentInfo>, radius: float) : seq<Shape> =
-        // not using actual data for now
         let deg2rad angle = System.Math.PI * (angle / 180.0)
-        let minorRadius = this.HoopStrokeThickness/2.0
+        let t = this.HoopStrokeThickness
+        let minorRadius = t/2.0
         let r = radius - minorRadius
         let angleToPoint angle =
             Point(cos (deg2rad angle) * r + radius, sin (deg2rad angle) * r + radius)
-        seq { 
-            for angle in 0.0 .. 90.0 .. 360.0 do
-                let startPoint = angleToPoint angle
-                let endPoint = angleToPoint (angle + 90.0)
+        
+        let l = r * System.Math.PI * 2.0
+        let spacingFraction = t / l * 0.75
+
+        let visibleSectors =
+            let sum = segments |> Seq.sumBy (fun x -> x.Amount)
+            segments |> Seq.choose (fun x -> 
+                let fraction = float(x.Amount / sum)
+                if fraction >= spacingFraction then
+                    Some({ Fraction=fraction; Color=x.Color })
+                else 
+                    None)
+
+        let normalizedSectors =
+            let sum = visibleSectors |> Seq.sumBy (fun x -> x.Fraction)
+            visibleSectors |> Seq.map (fun x -> { x with Fraction=x.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.append (Seq.pairwise angles) (Seq.singleton ((Seq.last angles), 360.0))
+        
+        Seq.map2
+            (fun sector (startAngle, endAngle) ->
+                let startPoint = angleToPoint (startAngle + spacingAngle)
+                let endPoint = angleToPoint (endAngle - spacingAngle)
+                let arcAngle = endAngle - startAngle - spacingAngle*2.0
                 let path = Path()
                 let geom = PathGeometry()
                 let figure = PathFigure()
                 figure.StartPoint <- startPoint
-                let segment = ArcSegment(endPoint, Size(r, r), 90.0, SweepDirection.Clockwise, false)
+                let segment = ArcSegment(endPoint, Size(r, r), arcAngle, SweepDirection.Clockwise, arcAngle > 180.0)
                 figure.Segments.Add(segment)
                 geom.Figures.Add(figure)
                 path.Data <- geom
-                path.Stroke <- SolidColorBrush(Color.FromHsv(angle/360.0, 0.7, 0.8))
-                path.StrokeThickness <- this.HoopStrokeThickness
-                yield path 
-        }
+                path.Stroke <- SolidColorBrush(sector.Color)
+                path.StrokeThickness <- t
+                path.StrokeLineCap <- PenLineCap.Round
+                path :> Shape)
+            normalizedSectors
+            anglePairs
     
     member private this.RepopulateHoop(segments, sideLength) =
         hoop.Children.Clear()

From 5d453dd95aa78d4a08d4352351faf23da8f1305b Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Tue, 19 Jul 2022 13:35:19 +0200
Subject: [PATCH 09/14] Frontend.XF: Hoop chart: minor refactoring - renamed
 some variables

---
 src/GWallet.Frontend.XF/HoopChart.fs | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index 9c21a3deb..5aed140b6 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -99,21 +99,21 @@ type HoopChartView() =
     // Chart shapes
     member private this.GetHoopShapes(segments: seq<SegmentInfo>, radius: float) : seq<Shape> =
         let deg2rad angle = System.Math.PI * (angle / 180.0)
-        let t = this.HoopStrokeThickness
-        let minorRadius = t/2.0
-        let r = radius - minorRadius
+        let thickness = this.HoopStrokeThickness
+        let minorRadius = thickness/2.0
+        let circleRadius = radius - minorRadius
         let angleToPoint angle =
-            Point(cos (deg2rad angle) * r + radius, sin (deg2rad angle) * r + radius)
+            Point(cos (deg2rad angle) * circleRadius + radius, sin (deg2rad angle) * circleRadius + radius)
         
-        let l = r * System.Math.PI * 2.0
-        let spacingFraction = t / l * 0.75
+        let circleLength = circleRadius * System.Math.PI * 2.0
+        let spacingFraction = thickness / circleLength * 0.75
 
         let visibleSectors =
-            let sum = segments |> Seq.sumBy (fun x -> x.Amount)
-            segments |> Seq.choose (fun x -> 
-                let fraction = float(x.Amount / sum)
+            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({ Fraction=fraction; Color=x.Color })
+                    Some({ Fraction=fraction; Color=segment.Color })
                 else 
                     None)
 
@@ -136,12 +136,12 @@ type HoopChartView() =
                 let geom = PathGeometry()
                 let figure = PathFigure()
                 figure.StartPoint <- startPoint
-                let segment = ArcSegment(endPoint, Size(r, r), arcAngle, SweepDirection.Clockwise, arcAngle > 180.0)
+                let segment = ArcSegment(endPoint, Size(circleRadius, circleRadius), arcAngle, SweepDirection.Clockwise, arcAngle > 180.0)
                 figure.Segments.Add(segment)
                 geom.Figures.Add(figure)
                 path.Data <- geom
                 path.Stroke <- SolidColorBrush(sector.Color)
-                path.StrokeThickness <- t
+                path.StrokeThickness <- thickness
                 path.StrokeLineCap <- PenLineCap.Round
                 path :> Shape)
             normalizedSectors

From 4f31f1527d443e298a42487c6a9f09180e2c52b1 Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Wed, 20 Jul 2022 12:04:52 +0200
Subject: [PATCH 10/14] Frontend.XF: Hoop chart: fixed minor bug with small
 sectors showing incorrectly

---
 src/GWallet.Frontend.XF/HoopChart.fs | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index 5aed140b6..572cf2f9d 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -106,7 +106,7 @@ type HoopChartView() =
             Point(cos (deg2rad angle) * circleRadius + radius, sin (deg2rad angle) * circleRadius + radius)
         
         let circleLength = circleRadius * System.Math.PI * 2.0
-        let spacingFraction = thickness / circleLength * 0.75
+        let spacingFraction = thickness / circleLength * 1.5
 
         let visibleSectors =
             let sum = segments |> Seq.sumBy (fun each -> each.Amount)
@@ -125,13 +125,13 @@ type HoopChartView() =
         let angles =
             normalizedSectors
             |> Seq.scan (fun currAngle sector -> currAngle + (360.0 * sector.Fraction)) 0.0
-        let anglePairs = Seq.append (Seq.pairwise angles) (Seq.singleton ((Seq.last angles), 360.0))
+        let anglePairs = Seq.pairwise angles
         
         Seq.map2
             (fun sector (startAngle, endAngle) ->
-                let startPoint = angleToPoint (startAngle + spacingAngle)
-                let endPoint = angleToPoint (endAngle - spacingAngle)
-                let arcAngle = endAngle - startAngle - spacingAngle*2.0
+                let startPoint = angleToPoint (startAngle + spacingAngle/2.0)
+                let endPoint = angleToPoint (endAngle - spacingAngle/2.0)
+                let arcAngle = endAngle - startAngle - spacingAngle
                 let path = Path()
                 let geom = PathGeometry()
                 let figure = PathFigure()
@@ -202,7 +202,7 @@ type HoopChartView() =
     member private this.UpdateChart() =
         let nonZeroSegments =
             match this.SegmentsSource with
-            | null ->  Seq.empty
+            | null -> Seq.empty
             | segments -> segments |> Seq.filter (fun x -> x.Amount > 0.0m)
 
         if nonZeroSegments |> Seq.isEmpty |> not then

From 931bb9194f60346e87dad86390f6eda0995f823b Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Wed, 20 Jul 2022 12:56:23 +0200
Subject: [PATCH 11/14] Frontend.XF: Hoop chart: show total balance label
 alongside with logo when balance is empty

---
 src/GWallet.Frontend.XF/HoopChart.fs | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/HoopChart.fs
index 572cf2f9d..59aae491b 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/HoopChart.fs
@@ -48,7 +48,8 @@ type HoopChartView() =
                 HasShadow = false,
                 BackgroundColor = Color.Transparent,
                 BorderColor = Color.Transparent,
-                Padding = Thickness(0.0)
+                Padding = Thickness(0.0),
+                HorizontalOptions = LayoutOptions.CenterAndExpand
             )
         let stackLayout = 
             StackLayout(
@@ -70,6 +71,7 @@ type HoopChartView() =
         )
 
     let hoop = Grid()
+    let emptyStateWidget = StackLayout(Orientation = StackOrientation.Horizontal)
 
     // Properties
     static let segmentsSourceProperty =
@@ -157,7 +159,7 @@ type HoopChartView() =
         | Uninitialized -> ()
         | Empty -> 
             let bounds = Rectangle.FromLTRB(x, y, x + width, y + height)
-            defaultImage.Layout(bounds)
+            emptyStateWidget.Layout(bounds)
         | NonEmpty(segments) -> 
             let smallerSide = min width height
             let dx = (max 0.0 (width - smallerSide)) / 2.0
@@ -191,7 +193,10 @@ type HoopChartView() =
             | Uninitialized -> failwith "Invalid state"
             | Empty ->
                 this.Children.Clear()
-                this.Children.Add(defaultImage)
+                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

From 7cd5d62cf5b99c666439a7f56dcd2c30dd83eb03 Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Wed, 20 Jul 2022 14:27:04 +0200
Subject: [PATCH 12/14] Frontend.XF: Hoop chart: refactoring

---
 src/GWallet.Frontend.XF/BalancesPage.xaml     |  8 +--
 src/GWallet.Frontend.XF/BalancesPage.xaml.fs  |  2 +-
 .../{ => Controls}/HoopChart.fs               | 71 ++++++++++---------
 .../GWallet.Frontend.XF.fsproj                |  3 +-
 4 files changed, 44 insertions(+), 40 deletions(-)
 rename src/GWallet.Frontend.XF/{ => Controls}/HoopChart.fs (76%)

diff --git a/src/GWallet.Frontend.XF/BalancesPage.xaml b/src/GWallet.Frontend.XF/BalancesPage.xaml
index d75dbe9cc..9d1776b88 100644
--- a/src/GWallet.Frontend.XF/BalancesPage.xaml
+++ b/src/GWallet.Frontend.XF/BalancesPage.xaml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:local="clr-namespace:GWallet.Frontend.XF"
-             xmlns:fsharp="clr-namespace:Frontend.FSharp"
+             xmlns:local="clr-namespace:GWallet.Frontend.XF" 
+             xmlns:controls="clr-namespace:GWallet.Frontend.XF.Controls"
              x:Class="GWallet.Frontend.XF.BalancesPage">
     <StackLayout x:Name="mainLayout"
                  Padding="0,0,0,0"
@@ -14,11 +14,11 @@
                      VerticalOptions="FillAndExpand"
                      HorizontalOptions="FillAndExpand">         
 
-            <fsharp:HoopChartView x:Name="normalChartView"
+            <controls:HoopChartView x:Name="normalChartView"
                                      HorizontalOptions="FillAndExpand"
                                      VerticalOptions="FillAndExpand"/>
 
-            <fsharp:HoopChartView 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 648fac1ef..402f50c8f 100644
--- a/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
+++ b/src/GWallet.Frontend.XF/BalancesPage.xaml.fs
@@ -11,7 +11,7 @@ open Xamarin.Essentials
 
 open GWallet.Backend
 open GWallet.Backend.FSharpUtil.UwpHacks
-open Frontend.FSharp
+open GWallet.Frontend.XF.Controls
 
 
 // this type allows us to represent the idea that if we have, for example, 3 LTC and an unknown number of ETC (might
diff --git a/src/GWallet.Frontend.XF/HoopChart.fs b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
similarity index 76%
rename from src/GWallet.Frontend.XF/HoopChart.fs
rename to src/GWallet.Frontend.XF/Controls/HoopChart.fs
index 59aae491b..1872353de 100644
--- a/src/GWallet.Frontend.XF/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
@@ -1,11 +1,10 @@
-namespace Frontend.FSharp
+namespace GWallet.Frontend.XF.Controls
 
 
 open Xamarin.Forms
 open Xamarin.Forms.Shapes
 
 
-
 type SegmentInfo = 
     {
         Color: Color
@@ -24,6 +23,10 @@ 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() =
@@ -35,7 +38,7 @@ type HoopChartView() =
     let balanceLabel = Label(HorizontalTextAlignment = TextAlignment.Center, FontSize = 25.0, MaxLines=1)
     let balanceTagLabel = 
         Label( 
-            Text = "Account Balance", 
+            Text = "Total Assets:", 
             FontSize = 15.0, 
             HorizontalOptions = LayoutOptions.Center,
             VerticalOptions = LayoutOptions.Center,
@@ -57,8 +60,8 @@ type HoopChartView() =
                 VerticalOptions = LayoutOptions.CenterAndExpand,
                 HorizontalOptions = LayoutOptions.Center
             )
-        stackLayout.Children.Add(balanceTagLabel)
-        stackLayout.Children.Add(balanceLabel)
+        stackLayout.Children.Add balanceTagLabel
+        stackLayout.Children.Add balanceLabel
         frame.Content <- stackLayout
 
         frame
@@ -115,13 +118,13 @@ type HoopChartView() =
             segments |> Seq.choose (fun segment -> 
                 let fraction = float(segment.Amount / sum)
                 if fraction >= spacingFraction then
-                    Some({ Fraction=fraction; Color=segment.Color })
+                    Some(HoopSector.Create(fraction, segment.Color))
                 else 
                     None)
 
         let normalizedSectors =
-            let sum = visibleSectors |> Seq.sumBy (fun x -> x.Fraction)
-            visibleSectors |> Seq.map (fun x -> { x with Fraction=x.Fraction/sum })
+            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 =
@@ -134,17 +137,18 @@ type HoopChartView() =
                 let startPoint = angleToPoint (startAngle + spacingAngle/2.0)
                 let endPoint = angleToPoint (endAngle - spacingAngle/2.0)
                 let arcAngle = endAngle - startAngle - spacingAngle
-                let path = Path()
                 let geom = PathGeometry()
-                let figure = PathFigure()
-                figure.StartPoint <- startPoint
+                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
-                path.Stroke <- SolidColorBrush(sector.Color)
-                path.StrokeThickness <- thickness
-                path.StrokeLineCap <- PenLineCap.Round
+                let path = 
+                    Path(
+                        Data = geom, 
+                        Stroke = SolidColorBrush(sector.Color), 
+                        StrokeThickness = thickness, 
+                        StrokeLineCap = PenLineCap.Round
+                    )
                 path :> Shape)
             normalizedSectors
             anglePairs
@@ -154,24 +158,24 @@ type HoopChartView() =
         this.GetHoopShapes(segments, sideLength / 2.0) |> Seq.iter hoop.Children.Add
 
     // Layout
-    override this.LayoutChildren(x, y, width, height) = 
+    override this.LayoutChildren(xCoord, yCoord, width, height) = 
         match state with
         | Uninitialized -> ()
         | Empty -> 
-            let bounds = Rectangle.FromLTRB(x, y, x + width, y + height)
-            emptyStateWidget.Layout(bounds)
+            let bounds = Rectangle.FromLTRB(xCoord, yCoord, xCoord + width, yCoord + height)
+            emptyStateWidget.Layout bounds
         | NonEmpty(segments) -> 
             let smallerSide = min width height
-            let dx = (max 0.0 (width - smallerSide)) / 2.0
-            let dy = (max 0.0 (height - smallerSide)) / 2.0
-            let bounds = Rectangle.FromLTRB(x + dx, y + dy, x + dx + smallerSide, y + dy + smallerSide)
+            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)
+            balanceFrame.Layout bounds
 
             if abs(hoop.Height - smallerSide) > 0.1 then
                 this.RepopulateHoop(segments, smallerSide)
             
-            hoop.Layout(bounds)
+            hoop.Layout bounds
 
     override this.OnMeasure(widthConstraint, heightConstraint) =
         let smallerRequestedSize = min widthConstraint heightConstraint |> min this.MinimumChartSize
@@ -179,9 +183,10 @@ type HoopChartView() =
             match state with
             | Uninitialized -> 0.0
             | Empty -> this.MinimumLogoSize
-            | NonEmpty(_) -> 
+            | NonEmpty _ -> 
                 let size = balanceLabel.Measure(smallerRequestedSize, smallerRequestedSize).Request
-                (sqrt(size.Width*size.Width + size.Height*size.Height) + this.HoopStrokeThickness) * 1.1
+                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))
     
@@ -194,21 +199,21 @@ type HoopChartView() =
             | Empty ->
                 this.Children.Clear()
                 emptyStateWidget.Children.Clear()
-                emptyStateWidget.Children.Add(balanceFrame)
-                emptyStateWidget.Children.Add(defaultImage)
-                this.Children.Add(emptyStateWidget)
+                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)
+                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 x -> x.Amount > 0.0m)
+            | segments -> segments |> Seq.filter (fun segment -> segment.Amount > 0.0m)
 
         if nonZeroSegments |> Seq.isEmpty |> not then
             this.SetState(NonEmpty(nonZeroSegments))
@@ -216,8 +221,8 @@ type HoopChartView() =
             this.SetState(Empty)
 
     override this.OnPropertyChanged(propertyName: string) =
-        base.OnPropertyChanged(propertyName)
+        base.OnPropertyChanged propertyName
         if propertyName = HoopChartView.SegmentsSourceProperty.PropertyName then
             this.UpdateChart()
         elif propertyName = HoopChartView.DefaultImageSourceProperty.PropertyName then
-            defaultImage.Source <- this.DefaultImageSource
\ No newline at end of file
+            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 2b61f15c9..fe57773e7 100644
--- a/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
+++ b/src/GWallet.Frontend.XF/GWallet.Frontend.XF.fsproj
@@ -9,8 +9,8 @@
   </PropertyGroup>
   <ItemGroup>
     <Folder Include="Properties\" />
+    <Compile Include="Controls\HoopChart.fs" />
     <Folder Include="img\" />
-    <Folder Include="Controls\" />
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="..\..\img\btc_grey_60x60.png">
@@ -93,7 +93,6 @@
       <Link>Properties\CommonAssemblyInfo.fs</Link>
     </Compile>
     <Compile Include="FrontendHelpers.fs" />
-    <Compile Include="HoopChart.fs" />
     <Compile Include="GlobalState.fs" />
     <Compile Include="PairingFromPage.xaml.fs">
       <DependentUpon>PairingFromPage.xaml</DependentUpon>

From 65248ae3c47fcebfc6c92535325120db995044a2 Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Thu, 21 Jul 2022 13:01:20 +0200
Subject: [PATCH 13/14] Frontend.XF: Hoop chart: fixed bug in Adnroid when
 certain small arcs wouldn't render

---
 src/GWallet.Frontend.XF/Controls/HoopChart.fs | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/GWallet.Frontend.XF/Controls/HoopChart.fs b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
index 1872353de..8164c2570 100644
--- a/src/GWallet.Frontend.XF/Controls/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
@@ -137,18 +137,23 @@ 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 =
+                    if arcAngle / 360.0 * circleLength < 1.0 then // Workaround for Android where very small arcs wouldn't render
+                        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 3bb82627c755cfc86bd1c73a5eb4dbb33c0516aa Mon Sep 17 00:00:00 2001
From: webwarrior <mail@webwarrior.ws>
Date: Mon, 25 Jul 2022 10:22:51 +0200
Subject: [PATCH 14/14] Frontend.XF: minor refactoring in HoopChart.fs

---
 src/GWallet.Frontend.XF/Controls/HoopChart.fs | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/GWallet.Frontend.XF/Controls/HoopChart.fs b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
index 8164c2570..20c87f364 100644
--- a/src/GWallet.Frontend.XF/Controls/HoopChart.fs
+++ b/src/GWallet.Frontend.XF/Controls/HoopChart.fs
@@ -138,19 +138,20 @@ type HoopChartView() =
                 let endPoint = angleToPoint (endAngle - spacingAngle/2.0)
                 let arcAngle = endAngle - startAngle - spacingAngle
                 let path =
-                    if arcAngle / 360.0 * circleLength < 1.0 then // Workaround for Android where very small arcs wouldn't render
+                    // 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))
+                        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)
+                        figure.Segments.Add segment
+                        geom.Figures.Add figure
                         Path(
                             Data = geom, 
-                            Stroke = SolidColorBrush(sector.Color), 
+                            Stroke = SolidColorBrush sector.Color, 
                             StrokeThickness = thickness, 
                             StrokeLineCap = PenLineCap.Round
                         )