support credit card billing cycles as a time granularity option in the account balance trend chart on the account reconciliation statements page

src/views/base/accounts/ReconciliationStatementPageBase.ts

@@ -63,11 +63,12 @@ export function useReconciliationStatementPageBase() {
     const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
 
     const allChartTypes = computed<TypeAndDisplayName[]>(() => getAllAccountBalanceTrendChartTypes());
-    const allDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypesWithShortName(StatisticsAnalysisType.AssetTrends));
+    const allDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypesWithShortName(StatisticsAnalysisType.AssetTrends, !!currentAccountStatementDate.value));
     const allTimezoneTypesUsedForDateRange = computed<TypeAndDisplayName[]>(() => getAllTimezoneTypesUsedForStatistics());
 
     const currentAccount = computed(() => allAccountsMap.value[accountId.value]);
     const currentAccountCurrency = computed<string>(() => currentAccount.value?.currency ?? defaultCurrency.value);
+    const currentAccountStatementDate = computed<number | undefined>(() => accountsStore.getAccountStatementDate(accountId.value) || undefined);
     const isCurrentLiabilityAccount = computed<boolean>(() => currentAccount.value?.isLiability ?? false);
 
     const exportFileName = computed<string>(() => {
@@ -309,6 +310,7 @@ export function useReconciliationStatementPageBase() {
         allTimezoneTypesUsedForDateRange,
         currentAccount,
         currentAccountCurrency,
+        currentAccountStatementDate,
         isCurrentLiabilityAccount,
         exportFileName,
         displayStartDateTime,

src/views/base/statistics/StatisticsTransactionPageBase.ts

@@ -73,8 +73,8 @@ export function useStatisticsTransactionPageBase() {
         }
     });
     const allSortingTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsSortingTypes());
-    const allTrendAnalysisDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypes(StatisticsAnalysisType.TrendAnalysis));
-    const allAssetTrendsDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypes(StatisticsAnalysisType.AssetTrends));
+    const allTrendAnalysisDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypes(StatisticsAnalysisType.TrendAnalysis, false));
+    const allAssetTrendsDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypes(StatisticsAnalysisType.AssetTrends, false));
 
     const query = computed<TransactionStatisticsFilter>(() => statisticsStore.transactionStatisticsFilter);
     const queryChartDataCategory = computed<string>(() => statisticsStore.categoricalAnalysisChartDataCategory);

src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue

@@ -246,6 +246,7 @@
                         :items="[]"
                         :legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
                         :account="currentAccount"
+                        :statement-date="currentAccountStatementDate"
                         :skeleton="true"
                         v-if="showAccountBalanceTrendsCharts && loading"
                     />
@@ -258,6 +259,7 @@
                         :items="reconciliationStatements?.transactions"
                         :legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
                         :account="currentAccount"
+                        :statement-date="currentAccountStatementDate"
                         v-if="showAccountBalanceTrendsCharts && !loading"
                     />
                 </div>
@@ -320,6 +322,7 @@ import {
     mdiChartWaterfall,
     mdiCalendarTodayOutline,
     mdiCalendarMonthOutline,
+    mdiCalendarTextOutline,
     mdiHomeClockOutline,
     mdiInvoiceTextClockOutline,
     mdiLayersTripleOutline,
@@ -353,6 +356,7 @@ const {
     allTimezoneTypesUsedForDateRange,
     currentAccount,
     currentAccountCurrency,
+    currentAccountStatementDate,
     isCurrentLiabilityAccount,
     exportFileName,
     displayStartDateTime,
@@ -391,6 +395,7 @@ const chartDataDateAggregationTypeIconMap = {
     [ChartDateAggregationType.Quarter.type]: mdiLayersTripleOutline,
     [ChartDateAggregationType.Year.type]: mdiLayersTripleOutline,
     [ChartDateAggregationType.FiscalYear.type]: mdiLayersTripleOutline,
+    [ChartDateAggregationType.BillingCycle.type]: mdiCalendarTextOutline,
 };
 
 const timezoneTypeIconMap = {

src/views/mobile/accounts/ReconciliationStatementPage.vue

@@ -277,6 +277,7 @@
                     :fiscal-year-start="fiscalYearStart"
                     :items="reconciliationStatements?.transactions"
                     :account="currentAccount"
+                    :statement-date="currentAccountStatementDate"
                 />
             </f7-card-content>
         </f7-card>
@@ -424,6 +425,7 @@ const {
     isCurrentLiabilityAccount,
     currentAccount,
     currentAccountCurrency,
+    currentAccountStatementDate,
     displayStartDateTime,
     displayEndDateTime,
     displayTotalInflows,