Add time selection to balance graph

Prerequisite btcpayserver/btcpayserver#6217. Closes #99.

BTCPayApp.UI/Features/StoreState.cs

@@ -28,12 +28,13 @@ public record StoreState
     private static string[] RateFetchExcludes = ["BTC", "SATS"];
 
     public record SetStoreInfo(AppUserStoreInfo? StoreInfo);
-    public record SetHistogramType(HistogramType? HistogramType);
+    public record SetHistogramType(HistogramType Type);
     public record FetchStore(string StoreId);
     public record FetchOnchainBalance(string StoreId);
     public record FetchLightningBalance(string StoreId);
     public record FetchOnchainHistogram(string StoreId, HistogramType? Type = null);
     public record FetchLightningHistogram(string StoreId, HistogramType? Type = null);
+    public record FetchHistograms(string StoreId, HistogramType? Type = null);
     public record FetchBalances(string StoreId, HistogramType? Type = null);
     public record FetchNotifications(string StoreId);
     public record UpdateNotification(string NotificationId, bool Seen);
@@ -97,7 +98,7 @@ public override StoreState Reduce(StoreState state, SetHistogramType action)
         {
             return state with
             {
-                HistogramType = action.HistogramType,
+                HistogramType = action.Type,
             };
         }
     }
@@ -553,7 +554,7 @@ public override StoreState Reduce(StoreState state, SetPosSalesStats action)
         return histogram;
     }
 
-    public class StoreEffects(IAccountManager accountManager)
+    public class StoreEffects(IState<StoreState> state, IState<UIState> uiState, IAccountManager accountManager)
     {
         [EffectMethod]
         public Task SetStoreInfoEffect(SetStoreInfo action, IDispatcher dispatcher)
@@ -563,8 +564,9 @@ public Task SetStoreInfoEffect(SetStoreInfo action, IDispatcher dispatcher)
             {
                 var storeId = store.Id;
                 var posId = store.PosAppId!;
+                var histogramType = state.Value.HistogramType ?? uiState.Value.HistogramType;
                 dispatcher.Dispatch(new FetchStore(storeId));
-                dispatcher.Dispatch(new FetchBalances(storeId));
+                dispatcher.Dispatch(new FetchBalances(storeId, histogramType));
                 dispatcher.Dispatch(new FetchNotifications(storeId));
                 dispatcher.Dispatch(new FetchInvoices(storeId));
                 dispatcher.Dispatch(new FetchRates(store));
@@ -609,6 +611,13 @@ public Task FetchBalancesEffect(FetchBalances action, IDispatcher dispatcher)
         {
             dispatcher.Dispatch(new FetchOnchainBalance(action.StoreId));
             dispatcher.Dispatch(new FetchLightningBalance(action.StoreId));
+            dispatcher.Dispatch(new FetchHistograms(action.StoreId, action.Type));
+            return Task.CompletedTask;
+        }
+
+        [EffectMethod]
+        public Task FetchHistogramsEffect(FetchHistograms action, IDispatcher dispatcher)
+        {
             dispatcher.Dispatch(new FetchOnchainHistogram(action.StoreId, action.Type));
             dispatcher.Dispatch(new FetchLightningHistogram(action.StoreId, action.Type));
             return Task.CompletedTask;
@@ -833,6 +842,14 @@ public async Task FetchInvoicePaymentMethodsEffect(FetchInvoicePaymentMethods ac
                 dispatcher.Dispatch(new SetInvoicePaymentMethods(null, error, action.InvoiceId));
             }
         }
+
+        [EffectMethod]
+        public async Task SetHistogramTypeEffect(SetHistogramType action, IDispatcher dispatcher)
+        {
+            var storeInfo = state.Value.StoreInfo;
+            if (storeInfo != null)
+                dispatcher.Dispatch(new FetchHistograms(storeInfo.Id, action.Type));
+        }
     }
 }
 

BTCPayApp.UI/Features/UIState.cs

@@ -1,6 +1,7 @@
 using System.Text.Json.Serialization;
 using BTCPayApp.CommonServer.Models;
 using BTCPayApp.Core;
+using BTCPayServer.Client.Models;
 using Fluxor;
 using Microsoft.JSInterop;
 
@@ -24,7 +25,9 @@ public record UIState
 {
     public string SelectedTheme { get; set; } = Themes.System;
     public string SystemTheme { get; set; } = Themes.Light;
-    public string BitcoinUnit{ get; set; }  = CurrencyUnit.SATS;
+    public string BitcoinUnit { get; set; } = CurrencyUnit.SATS;
+    public HistogramType HistogramType { get; set; } = HistogramType.Week;
+
     [JsonIgnore]
     public RemoteData<AppInstanceInfo>? Instance;
 
@@ -33,6 +36,7 @@ public record SetUserTheme(string Theme);
     public record FetchInstanceInfo(string? Url);
     public record SetInstanceInfo(AppInstanceInfo? Instance, string? Error);
     public record ToggleBitcoinUnit(string? BitcoinUnit = null);
+    public record SetHistogramType(HistogramType Type);
 
     protected class SetUserThemeReducer : Reducer<UIState, SetUserTheme>
     {
@@ -92,6 +96,17 @@ public override UIState Reduce(UIState state, ToggleBitcoinUnit action)
         }
     }
 
+    protected class SetHistogramTypeReducer : Reducer<UIState, SetHistogramType>
+    {
+        public override UIState Reduce(UIState state, SetHistogramType action)
+        {
+            return state with
+            {
+                HistogramType = action.Type
+            };
+        }
+    }
+
     public class UIEffects(IJSRuntime jsRuntime, IHttpClientFactory httpClientFactory, IState<UIState> state)
     {
         [EffectMethod]
@@ -137,5 +152,11 @@ public async Task ToggleBitcoinUnitEffect(ToggleBitcoinUnit action, IDispatcher
         {
             await jsRuntime.InvokeVoidAsync("Interop.setBitcoinUnit", state.Value.BitcoinUnit);
         }
+
+        [EffectMethod]
+        public async Task SetHistogramTypeEffect(SetHistogramType action, IDispatcher dispatcher)
+        {
+            dispatcher.Dispatch(new StoreState.SetHistogramType(action.Type));
+        }
     }
 }

BTCPayApp.UI/Pages/DashboardPage.razor

@@ -31,6 +31,22 @@
         <WalletOverview BitcoinBalance="@TotalBalance" BitcoinUnit="@BitcoinUnit" MoneyUnit="@UnitMoney" Histogram="@Histogram"
                         Currency="@Currency" Rate="@Rate" Error="@BalanceError" Loading="@BalanceLoading" OnBalanceClick="ToggleDisplayCurrency"
                         class="my-3"/>
+        <div class="btn-group d-block text-center" role="group" aria-label="Period">
+            <InputRadioGroup Name="HistogramPeriod" @bind-Value="@HistogramPeriod">
+                <InputRadio Name="HistogramPeriod" Value="HistogramType.Day" class="btn-check" id="BalancePeriodDay"/>
+                <label class="btn btn-link" for="BalancePeriodDay">1D</label>
+                <InputRadio Name="HistogramPeriod" Value="HistogramType.Week" class="btn-check" id="BalancePeriodWeek"/>
+                <label class="btn btn-link" for="BalancePeriodWeek">1W</label>
+                <InputRadio Name="HistogramPeriod" Value="HistogramType.Month" class="btn-check" id="BalancePeriodMonth"/>
+                <label class="btn btn-link" for="BalancePeriodMonth">1M</label>
+                <InputRadio Name="HistogramPeriod" Value="HistogramType.YTD" class="btn-check" id="BalancePeriodYTD"/>
+                <label class="btn btn-link" for="BalancePeriodYTD">YTD</label>
+                <InputRadio Name="HistogramPeriod" Value="HistogramType.Year" class="btn-check" id="BalancePeriodYear"/>
+                <label class="btn btn-link" for="BalancePeriodYear">1Y</label>
+                <InputRadio Name="HistogramPeriod" Value="HistogramType.TwoYears" class="btn-check" id="BalancePeriodTwoYears"/>
+                <label class="btn btn-link" for="BalancePeriodTwoYears">2Y</label>
+            </InputRadioGroup>
+        </div>
         @if (TotalBalance is > 0)
         {
             <div class="text-center mt-4 mb-5">
@@ -104,6 +120,12 @@
         : (OnchainConfirmedBalance ?? 0) + (OnchainUnconfirmedBalance ?? 0) + (LightningOnchainBalance ?? 0) + (LightningOffchainBalance ?? 0);
     private decimal? Rate => StoreState.Value.Rates?.Data?.FirstOrDefault()?.Rate;
     private string BitcoinUnit => UIState.Value.BitcoinUnit;
+    private HistogramType HistogramPeriod
+    {
+        get => UIState.Value.HistogramType;
+        set => Dispatcher.Dispatch(new UIState.SetHistogramType(value));
+    }
+
     private HistogramData? Histogram => StoreState.Value.UnifiedHistogram;
     private MoneyUnit UnitMoney => BitcoinUnit == CurrencyUnit.BTC ? MoneyUnit.BTC : MoneyUnit.Satoshi;
     private LightMoneyUnit UnitLightMoney => BitcoinUnit == CurrencyUnit.BTC ? LightMoneyUnit.BTC : LightMoneyUnit.Satoshi;

BTCPayApp.UI/Pages/DashboardPage.razor.css

@@ -2,3 +2,9 @@
   margin-top: var(--btcpay-space-m);
   margin-bottom: var(--btcpay-space-l);
 }
+
+.btn-group label {
+  --btcpay-btn-color: var(--btcpay-body-text-muted);
+  --btcpay-btn-active-color: var(--btcpay-body-text);
+  font-weight: var(--btcpay-font-weight-semibold);
+}