show the time range below the fiscal year option

src/views/base/statistics/StatisticsSettingPageBase.ts

@@ -25,7 +25,7 @@ export function useStatisticsSettingPageBase() {
     const allSortingTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsSortingTypes());
     const allCategoricalChartTypes = computed<TypeAndDisplayName[]>(() => getAllCategoricalChartTypes());
     const allCategoricalChartDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.Normal, false));
-    const allTrendChartTypes = computed<LocalizedDateRange[]>(() => getAllTrendChartTypes());
+    const allTrendChartTypes = computed<TypeAndDisplayName[]>(() => getAllTrendChartTypes());
     const allTrendChartDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.TrendAnalysis, false));
 
     const defaultChartDataType = computed<number>({

src/views/base/statistics/StatisticsTransactionPageBase.ts

@@ -148,16 +148,6 @@ export function useStatisticsTransactionPageBase() {
         }
     });
 
-    const showCustomDateRange = computed<boolean>(() => {
-        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
-            return query.value.categoricalChartDateType === DateRange.Custom.type && !!query.value.categoricalChartStartTime && !!query.value.categoricalChartEndTime;
-        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
-            return query.value.trendChartDateType === DateRange.Custom.type && !!query.value.trendChartStartYearMonth && !!query.value.trendChartEndYearMonth;
-        } else {
-            return false;
-        }
-    });
-
     const showAmountInChart = computed<boolean>(() => {
         if (!showAccountBalance.value
             && (query.value.chartDataType === ChartDataType.AccountTotalAssets.type || query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type)) {
@@ -200,6 +190,16 @@ export function useStatisticsTransactionPageBase() {
     const categoricalAnalysisData = computed<TransactionCategoricalAnalysisData>(() => statisticsStore.categoricalAnalysisData);
     const trendsAnalysisData = computed<TransactionTrendsAnalysisData | null>(() => statisticsStore.trendsAnalysisData);
 
+    function canShowCustomDateRange(dateRangeType: number): boolean {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return query.value.categoricalChartDateType === dateRangeType && !!query.value.categoricalChartStartTime && !!query.value.categoricalChartEndTime;
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return query.value.trendChartDateType === dateRangeType && !!query.value.trendChartStartYearMonth && !!query.value.trendChartEndYearMonth;
+        } else {
+            return false;
+        }
+    }
+
     function getDisplayAmount(amount: number, currency: string, textLimit?: number): string {
         const finalAmount = formatAmountToLocalizedNumeralsWithCurrency(amount, currency);
 
@@ -241,7 +241,6 @@ export function useStatisticsTransactionPageBase() {
         queryTrendDateAggregationTypeName,
         isQueryDateRangeChanged,
         canShiftDateRange,
-        showCustomDateRange,
         showAmountInChart,
         totalAmountName,
         showTotalAmountInTrendsChart,
@@ -249,6 +248,7 @@ export function useStatisticsTransactionPageBase() {
         categoricalAnalysisData,
         trendsAnalysisData,
         // functions
+        canShowCustomDateRange,
         getDisplayAmount
     };
 }

src/views/desktop/statistics/TransactionPage.vue

@@ -73,7 +73,7 @@
                                                                 class="cursor-pointer"
                                                                 @click="setDateFilter(dateRange.type)">
                                                                 {{ dateRange.displayName }}
-                                                                <div class="statistics-custom-datetime-range" v-if="dateRange.type === DateRange.Custom.type && showCustomDateRange">
+                                                                <div class="statistics-custom-datetime-range" v-if="dateRange.isUserCustomRange && canShowCustomDateRange(dateRange.type)">
                                                                     <span>{{ queryStartTime }}</span>
                                                                     <span>&nbsp;-&nbsp;</span>
                                                                     <br/>
@@ -450,13 +450,13 @@ const {
     queryDateRangeName,
     queryTrendDateAggregationTypeName,
     canShiftDateRange,
-    showCustomDateRange,
     showAmountInChart,
     totalAmountName,
     showTotalAmountInTrendsChart,
     translateNameInTrendsChart,
     categoricalAnalysisData,
     trendsAnalysisData,
+    canShowCustomDateRange,
     getDisplayAmount
 } = useStatisticsTransactionPageBase();
 

src/views/desktop/transactions/ListPage.vue

@@ -220,7 +220,7 @@
                                                                         <span class="text-sm ms-3">{{ dateRange.displayName }}</span>
                                                                     </div>
                                                                 </v-list-item-title>
-                                                                <div class="ms-3 smaller" v-if="((dateRange.isBillingCycle || dateRange.type === DateRange.Custom.type) && query.dateType === dateRange.type) && query.minTime && query.maxTime">
+                                                                <div class="ms-3 smaller" v-if="dateRange.isUserCustomRange && query.dateType === dateRange.type && query.minTime && query.maxTime">
                                                                     <span>{{ queryMinTime }}</span>
                                                                     <span>&nbsp;-&nbsp;</span>
                                                                     <br/>

src/views/mobile/accounts/ReconciliationStatementPage.vue

@@ -48,7 +48,7 @@
                     <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="queryDateRangeType === dateRange.type"></f7-icon>
                 </template>
                 <template #footer>
-                    <div v-if="((dateRange.isBillingCycle || dateRange.type === DateRange.Custom.type) && queryDateRangeType === dateRange.type) && startTime && endTime">
+                    <div v-if="dateRange.isUserCustomRange && queryDateRangeType === dateRange.type && startTime && endTime">
                         <span>{{ displayStartTime }}</span>
                         <span>&nbsp;-&nbsp;</span>
                         <br/>

src/views/mobile/statistics/TransactionPage.vue

@@ -270,7 +270,7 @@
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="queryDateType === dateRange.type"></f7-icon>
                     </template>
                     <template #footer>
-                        <div v-if="dateRange.type === DateRange.Custom.type && showCustomDateRange">
+                        <div v-if="dateRange.isUserCustomRange && canShowCustomDateRange(dateRange.type)">
                             <span>{{ queryStartTime }}</span>
                             <span>&nbsp;-&nbsp;</span>
                             <br/>
@@ -398,12 +398,12 @@ const {
     queryTrendDateAggregationTypeName,
     isQueryDateRangeChanged,
     canShiftDateRange,
-    showCustomDateRange,
     showAmountInChart,
     totalAmountName,
     translateNameInTrendsChart,
     categoricalAnalysisData,
     trendsAnalysisData,
+    canShowCustomDateRange,
     getDisplayAmount
 } = useStatisticsTransactionPageBase();
 

src/views/mobile/transactions/ListPage.vue

@@ -333,7 +333,7 @@
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
                     </template>
                     <template #footer>
-                        <div v-if="((dateRange.isBillingCycle || dateRange.type === DateRange.Custom.type) && query.dateType === dateRange.type) && query.minTime && query.maxTime">
+                        <div v-if="dateRange.isUserCustomRange && query.dateType === dateRange.type && query.minTime && query.maxTime">
                             <span>{{ queryMinTime }}</span>
                             <span>&nbsp;-&nbsp;</span>
                             <br/>