Wip/hoop chart

src/GWallet.Frontend.XF/BalancesPage.xaml

@@ -1,7 +1,7 @@
 <?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:local="clr-namespace:GWallet.Frontend.XF" 
              xmlns:controls="clr-namespace:GWallet.Frontend.XF.Controls"
              x:Class="GWallet.Frontend.XF.BalancesPage">
     <StackLayout x:Name="mainLayout"
@@ -14,58 +14,11 @@
                      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>
-
-            <controls:CircleChartView x:Name="normalChartView"
+            <controls:HoopChartView x:Name="normalChartView"
                                      HorizontalOptions="FillAndExpand"
                                      VerticalOptions="FillAndExpand"/>
-            
-            <controls:CircleChartView x:Name="readonlyChartView"
+
+            <controls:HoopChartView x:Name="readonlyChartView"
                                      IsVisible="False"
                                      HorizontalOptions="FillAndExpand"
                                      VerticalOptions="FillAndExpand"/>

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 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
@@ -40,13 +40,9 @@ 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<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
@@ -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>>)
@@ -164,18 +160,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
@@ -302,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
@@ -313,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
 
@@ -389,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"
@@ -403,13 +387,9 @@ type BalancesPage(state: FrontendHelpers.IGlobalAppState,
 
         let switchingToReadOnly = not readOnly
 
-        let totalCurrentFiatAmountFrame,totalOtherFiatAmountFrame =
-            mainLayout.FindByName<Frame> totalCurrentFiatAmountFrameName,
-            mainLayout.FindByName<Frame> totalOtherFiatAmountFrameName
-
         let currentChartView,otherChartView =
-            mainLayout.FindByName<CircleChartView> currentChartViewName,
-            mainLayout.FindByName<CircleChartView> otherChartViewName
+            mainLayout.FindByName<HoopChartView> currentChartViewName,
+            mainLayout.FindByName<HoopChartView> otherChartViewName
 
         let tapGestureRecognizer = TapGestureRecognizer()
         tapGestureRecognizer.Tapped.Add(fun _ ->
@@ -422,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 =
@@ -461,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 () =
@@ -479,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
@@ -524,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