diff --git a/src/core/statistics.ts b/src/core/statistics.ts
index c6a4a57b..43511e0b 100644
--- a/src/core/statistics.ts
+++ b/src/core/statistics.ts
@@ -119,7 +119,7 @@ export class ChartDataType implements TypeAndName {
         return this.availableAnalysisTypes[analysisType] || false;
     }
 
-    public static values(analysisType: StatisticsAnalysisType | undefined): ChartDataType[] {
+    public static values(analysisType?: StatisticsAnalysisType): ChartDataType[] {
         if (analysisType === undefined) {
             return ChartDataType.allInstances;
         }
diff --git a/src/lib/common.ts b/src/lib/common.ts
index a7ab849b..676f2f54 100644
--- a/src/lib/common.ts
+++ b/src/lib/common.ts
@@ -1,4 +1,4 @@
-import type { TypeAndDisplayName } from '@/core/base.ts';
+import type { TypeAndName, TypeAndDisplayName } from '@/core/base.ts';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function isFunction(val: unknown): val is Function {
@@ -37,7 +37,7 @@ export function isBoolean(val: unknown): val is boolean {
     return typeof(val) === 'boolean';
 }
 
-export function isYearMonth(val: unknown): boolean {
+export function isYearMonth(val: unknown): val is string {
     if (!isString(val)) {
         return false;
     }
@@ -312,6 +312,16 @@ export function getItemByKeyValue<T>(src: Record<string, T>[] | Record<string, R
     return null;
 }
 
+export function findNameByType(items: TypeAndName[], type: number): string | null {
+    for (const item of items) {
+        if (item.type === type) {
+            return item.name;
+        }
+    }
+
+    return null;
+}
+
 export function findDisplayNameByType(items: TypeAndDisplayName[], type: number): string | null {
     for (const item of items) {
         if (item.type === type) {
diff --git a/src/locales/helpers.ts b/src/locales/helpers.ts
index 85ff229c..7b72aad4 100644
--- a/src/locales/helpers.ts
+++ b/src/locales/helpers.ts
@@ -105,13 +105,17 @@ import {
     isPM,
     formatUnixTime,
     formatCurrentTime,
+    parseDateFromUnixTime,
+    getYear,
     getTimezoneOffset,
     getTimezoneOffsetMinutes,
     getBrowserTimezoneOffset,
     getBrowserTimezoneOffsetMinutes,
     getTimeDifferenceHoursAndMinutes,
     getDateTimeFormatType,
-    getRecentMonthDateRanges
+    getRecentMonthDateRanges,
+    isDateRangeMatchFullYears,
+    isDateRangeMatchFullMonths
 } from '@/lib/datetime.ts';
 
 import {
@@ -1206,6 +1210,54 @@ export function useI18n() {
         }
     }
 
+    function formatDateRange(dateType: number, startTime: number, endTime: number): string {
+        if (dateType === DateRange.All.type) {
+            return t(DateRange.All.name);
+        }
+
+        const allDateRanges = DateRange.values();
+
+        for (let i = 0; i < allDateRanges.length; i++) {
+            const dateRange = allDateRanges[i];
+
+            if (dateRange && dateRange.type !== DateRange.Custom.type && dateRange.type === dateType && dateRange.name) {
+                return t(dateRange.name);
+            }
+        }
+
+        if (isDateRangeMatchFullYears(startTime, endTime)) {
+            const format = getLocalizedShortYearFormat();
+            const displayStartTime = formatUnixTime(startTime, format);
+            const displayEndTime = formatUnixTime(endTime, format);
+
+            return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
+        }
+
+        if (isDateRangeMatchFullMonths(startTime, endTime)) {
+            const format = getLocalizedShortYearMonthFormat();
+            const displayStartTime = formatUnixTime(startTime, format);
+            const displayEndTime = formatUnixTime(endTime, format);
+
+            return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
+        }
+
+        const startTimeYear = getYear(parseDateFromUnixTime(startTime));
+        const endTimeYear = getYear(parseDateFromUnixTime(endTime));
+
+        const format = getLocalizedShortDateFormat();
+        const displayStartTime = formatUnixTime(startTime, format);
+        const displayEndTime = formatUnixTime(endTime, format);
+
+        if (displayStartTime === displayEndTime) {
+            return displayStartTime;
+        } else if (startTimeYear === endTimeYear) {
+            const displayShortEndTime = formatUnixTime(endTime, getLocalizedShortMonthDayFormat());
+            return `${displayStartTime} ~ ${displayShortEndTime}`;
+        }
+
+        return `${displayStartTime} ~ ${displayEndTime}`;
+    }
+
     function getTimezoneDifferenceDisplayText(utcOffset: number): string {
         const defaultTimezoneOffset = getTimezoneOffsetMinutes();
         const offsetTime = getTimeDifferenceHoursAndMinutes(utcOffset - defaultTimezoneOffset);
@@ -1486,6 +1538,7 @@ export function useI18n() {
         formatUnixTimeToLongTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongTimeFormat(), utcOffset, currentUtcOffset),
         formatUnixTimeToShortTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortTimeFormat(), utcOffset, currentUtcOffset),
         formatYearQuarter,
+        formatDateRange,
         getTimezoneDifferenceDisplayText,
         appendDigitGroupingSymbol: getNumberWithDigitGroupingSymbol,
         parseAmount: getParsedAmountNumber,
diff --git a/src/stores/statistics.ts b/src/stores/statistics.ts
index b8befaa2..7deef649 100644
--- a/src/stores/statistics.ts
+++ b/src/stores/statistics.ts
@@ -101,7 +101,24 @@ interface WritableTransactioTrendsAnalysisDataItem {
     items: TransactionTrendsAnalysisDataAmount[];
 }
 
-export interface TransactionStatisticsFilter {
+export interface TransactionStatisticsPartialFilter {
+    chartDataType?: number;
+    categoricalChartType?: number;
+    categoricalChartDateType?: number;
+    categoricalChartStartTime?: number;
+    categoricalChartEndTime?: number;
+    trendChartType?: number;
+    trendChartDateType?: number;
+    trendChartStartYearMonth?: string;
+    trendChartEndYearMonth?: string;
+    filterAccountIds?: Record<string, boolean>;
+    filterCategoryIds?: Record<string, boolean>;
+    tagIds?: string;
+    tagFilterType?: number;
+    sortingType?: number;
+}
+
+export interface TransactionStatisticsFilter extends TransactionStatisticsPartialFilter {
     chartDataType: number;
     categoricalChartType: number;
     categoricalChartDateType: number;
@@ -672,7 +689,7 @@ export const useStatisticsStore = defineStore('statistics', () => {
         transactionStatisticsStateInvalid.value = true;
     }
 
-    function initTransactionStatisticsFilter(analysisType: StatisticsAnalysisType, filter?: TransactionStatisticsFilter): void {
+    function initTransactionStatisticsFilter(analysisType: StatisticsAnalysisType, filter?: TransactionStatisticsPartialFilter): void {
         if (filter && isInteger(filter.chartDataType)) {
             transactionStatisticsFilter.value.chartDataType = filter.chartDataType;
         } else {
@@ -810,7 +827,7 @@ export const useStatisticsStore = defineStore('statistics', () => {
         }
     }
 
-    function updateTransactionStatisticsFilter(filter: TransactionStatisticsFilter): boolean {
+    function updateTransactionStatisticsFilter(filter: TransactionStatisticsPartialFilter): boolean {
         let changed = false;
 
         if (filter && isInteger(filter.chartDataType) && transactionStatisticsFilter.value.chartDataType !== filter.chartDataType) {
@@ -943,7 +960,7 @@ export const useStatisticsStore = defineStore('statistics', () => {
         return querys.join('&');
     }
 
-    function getTransactionListPageParams(analysisType: StatisticsAnalysisType, itemId: string, dateRange: TimeRangeAndDateType): string {
+    function getTransactionListPageParams(analysisType: StatisticsAnalysisType, itemId: string, dateRange?: TimeRangeAndDateType): string {
         const querys: string[] = [];
 
         if (transactionStatisticsFilter.value.chartDataType === ChartDataType.IncomeByAccount.type
diff --git a/src/views/base/statistics/StatisticsTransactionPageBase.ts b/src/views/base/statistics/StatisticsTransactionPageBase.ts
new file mode 100644
index 00000000..ad7e6c56
--- /dev/null
+++ b/src/views/base/statistics/StatisticsTransactionPageBase.ts
@@ -0,0 +1,243 @@
+import { ref, computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+import { useUserStore } from '@/stores/user.ts';
+import { type TransactionStatisticsFilter, useStatisticsStore } from '@/stores/statistics.ts';
+
+import type { TypeAndDisplayName } from '@/core/base.ts';
+import { type LocalizedDateRange, DateRangeScene, DateRange } from '@/core/datetime.ts';
+import { StatisticsAnalysisType, ChartDataType, ChartSortingType, ChartDateAggregationType } from '@/core/statistics.ts';
+import type { TransactionCategoricalAnalysisData, TransactionTrendsAnalysisData } from '@/models/transaction.ts';
+
+import { limitText, findNameByType, findDisplayNameByType } from '@/lib/common.ts';
+import { getYearMonthFirstUnixTime, getYearMonthLastUnixTime } from '@/lib/datetime.ts';
+
+export function useStatisticsTransactionPageBase() {
+    const {
+        tt,
+        getAllDateRanges,
+        getAllStatisticsSortingTypes,
+        getAllStatisticsDateAggregationTypes,
+        formatUnixTimeToLongDateTime,
+        formatUnixTimeToLongYearMonth,
+        formatDateRange,
+        formatAmountWithCurrency
+    } = useI18n();
+
+    const settingsStore = useSettingsStore();
+    const userStore = useUserStore();
+    const statisticsStore = useStatisticsStore();
+
+    const loading = ref<boolean>(true);
+    const analysisType = ref<StatisticsAnalysisType>(StatisticsAnalysisType.CategoricalAnalysis);
+    const trendDateAggregationType = ref<number>(ChartDateAggregationType.Default.type);
+
+    const showAccountBalance = computed<boolean>(() => settingsStore.appSettings.showAccountBalance);
+    const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
+    const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
+
+    const allDateRanges = computed<LocalizedDateRange[]>(() => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return getAllDateRanges(DateRangeScene.Normal, true);
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return getAllDateRanges(DateRangeScene.TrendAnalysis, true);
+        } else {
+            return [];
+        }
+    });
+    const allSortingTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsSortingTypes());
+    const allDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypes());
+
+    const query = computed<TransactionStatisticsFilter>(() => statisticsStore.transactionStatisticsFilter);
+    const queryChartDataCategory = computed<string>(() => statisticsStore.categoricalAnalysisChartDataCategory);
+    const queryDateType = computed<number | null>(() => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return query.value.categoricalChartDateType;
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return query.value.trendChartDateType;
+        } else {
+            return null;
+        }
+    });
+
+    const queryStartTime = computed<string>(() => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return formatUnixTimeToLongDateTime(query.value.categoricalChartStartTime);
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return formatUnixTimeToLongYearMonth(getYearMonthFirstUnixTime(query.value.trendChartStartYearMonth));
+        } else {
+            return '';
+        }
+    });
+
+    const queryEndTime = computed<string>(() => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return formatUnixTimeToLongDateTime(query.value.categoricalChartEndTime);
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return formatUnixTimeToLongYearMonth(getYearMonthLastUnixTime(query.value.trendChartEndYearMonth));
+        } else {
+            return '';
+        }
+    });
+
+    const queryDateRangeName = computed<string>(() => {
+        if (query.value.chartDataType === ChartDataType.AccountTotalAssets.type ||
+            query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
+            return tt(DateRange.All.name);
+        }
+
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return formatDateRange(query.value.categoricalChartDateType, query.value.categoricalChartStartTime, query.value.categoricalChartEndTime);
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return formatDateRange(query.value.trendChartDateType, getYearMonthFirstUnixTime(query.value.trendChartStartYearMonth), getYearMonthLastUnixTime(query.value.trendChartEndYearMonth));
+        } else {
+            return '';
+        }
+    });
+
+    const queryChartDataTypeName = computed<string>(() => {
+        const queryChartDataTypeName = findNameByType(ChartDataType.values(), query.value.chartDataType) || 'Statistics';
+        return tt(queryChartDataTypeName);
+    });
+
+    const querySortingTypeName = computed<string>(() => {
+        const querySortingTypeName = findNameByType(ChartSortingType.values(), query.value.sortingType) || 'System Default';
+        return tt(querySortingTypeName);
+    });
+
+    const queryTrendDateAggregationTypeName = computed<string>(() => findDisplayNameByType(allDateAggregationTypes.value, trendDateAggregationType.value) || '');
+
+    const isQueryDateRangeChanged = computed<boolean>(() => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            if (query.value.chartDataType === ChartDataType.AccountTotalAssets.type ||
+                query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
+                return false;
+            }
+
+            return !!query.value.categoricalChartStartTime || !!query.value.categoricalChartEndTime;
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return !!query.value.trendChartStartYearMonth || !!query.value.trendChartEndYearMonth;
+        } else {
+            return false;
+        }
+    });
+
+    const canShiftDateRange = computed<boolean>(() => {
+        if (query.value.chartDataType === ChartDataType.AccountTotalAssets.type || query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
+            return false;
+        }
+
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return query.value.categoricalChartDateType !== DateRange.All.type;
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return query.value.trendChartDateType !== DateRange.All.type;
+        } else {
+            return false;
+        }
+    });
+
+    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)) {
+            return false;
+        }
+
+        return true;
+    });
+
+    const totalAmountName = computed<string>(() => {
+        if (query.value.chartDataType === ChartDataType.IncomeByAccount.type
+            || query.value.chartDataType === ChartDataType.IncomeByPrimaryCategory.type
+            || query.value.chartDataType === ChartDataType.IncomeBySecondaryCategory.type) {
+            return tt('Total Income');
+        } else if (query.value.chartDataType === ChartDataType.ExpenseByAccount.type
+            || query.value.chartDataType === ChartDataType.ExpenseByPrimaryCategory.type
+            || query.value.chartDataType === ChartDataType.ExpenseBySecondaryCategory.type) {
+            return tt('Total Expense');
+        } else if (query.value.chartDataType === ChartDataType.AccountTotalAssets.type) {
+            return tt('Total Assets');
+        } else if (query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
+            return tt('Total Liabilities');
+        }
+
+        return tt('Total Amount');
+    });
+
+    const showTotalAmountInTrendsChart = computed<boolean>(() => {
+        return query.value.chartDataType !== ChartDataType.TotalExpense.type &&
+            query.value.chartDataType !== ChartDataType.TotalIncome.type &&
+            query.value.chartDataType !== ChartDataType.TotalBalance.type;
+    });
+
+    const translateNameInTrendsChart = computed<boolean>(() => {
+        return query.value.chartDataType === ChartDataType.TotalExpense.type ||
+            query.value.chartDataType === ChartDataType.TotalIncome.type ||
+            query.value.chartDataType === ChartDataType.TotalBalance.type;
+    });
+
+    const categoricalAnalysisData = computed<TransactionCategoricalAnalysisData>(() => statisticsStore.categoricalAnalysisData);
+    const trendsAnalysisData = computed<TransactionTrendsAnalysisData | null>(() => statisticsStore.trendsAnalysisData);
+
+    function getDisplayAmount(amount: number, currency: string, textLimit?: number): string {
+        const finalAmount = formatAmountWithCurrency(amount, currency) as string;
+
+        if (!showAccountBalance.value
+            && (query.value.chartDataType === ChartDataType.AccountTotalAssets.type
+                || query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type)
+        ) {
+            return '***';
+        }
+
+        if (textLimit) {
+            return limitText(finalAmount, textLimit);
+        }
+
+        return finalAmount;
+    }
+
+    return {
+        // states
+        loading,
+        analysisType,
+        trendDateAggregationType,
+        // computed states
+        showAccountBalance,
+        defaultCurrency,
+        firstDayOfWeek,
+        allDateRanges,
+        allSortingTypes,
+        allDateAggregationTypes,
+        query,
+        queryChartDataCategory,
+        queryDateType,
+        queryStartTime,
+        queryEndTime,
+        queryDateRangeName,
+        queryChartDataTypeName,
+        querySortingTypeName,
+        queryTrendDateAggregationTypeName,
+        isQueryDateRangeChanged,
+        canShiftDateRange,
+        showCustomDateRange,
+        showAmountInChart,
+        totalAmountName,
+        showTotalAmountInTrendsChart,
+        translateNameInTrendsChart,
+        categoricalAnalysisData,
+        trendsAnalysisData,
+        // functions
+        getDisplayAmount
+    };
+}
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 0074d005..ea4b8f29 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -6,13 +6,13 @@
                     <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
                             <btn-vertical-group :disabled="loading" :buttons="[
-                                { name: $t('Categorical Analysis'), value: allAnalysisTypes.CategoricalAnalysis },
-                                { name: $t('Trend Analysis'), value: allAnalysisTypes.TrendAnalysis }
+                                { name: tt('Categorical Analysis'), value: StatisticsAnalysisType.CategoricalAnalysis },
+                                { name: tt('Trend Analysis'), value: StatisticsAnalysisType.TrendAnalysis }
                             ]" v-model="queryAnalysisType" />
                         </div>
                         <v-divider />
                         <div class="mx-6 mt-4">
-                            <span class="text-subtitle-2">{{ $t('Chart Type') }}</span>
+                            <span class="text-subtitle-2">{{ tt('Chart Type') }}</span>
                             <v-select
                                 item-title="displayName"
                                 item-value="type"
@@ -24,7 +24,7 @@
                             />
                         </div>
                         <div class="mx-6 mt-4">
-                            <span class="text-subtitle-2">{{ $t('Sort Order') }}</span>
+                            <span class="text-subtitle-2">{{ tt('Sort Order') }}</span>
                             <v-select
                                 item-title="displayName"
                                 item-value="type"
@@ -38,9 +38,9 @@
                         <v-tabs show-arrows class="my-4" direction="vertical"
                                 :disabled="loading" v-model="queryChartDataType">
                             <v-tab class="tab-text-truncate" :key="dataType.type" :value="dataType.type"
-                                   v-for="dataType in allChartDataTypes" v-show="dataType.isAvailableAnalysisType(queryAnalysisType)">
-                                <span class="text-truncate">{{ $t(dataType.name) }}</span>
-                                <v-tooltip activator="parent" location="right">{{ $t(dataType.name) }}</v-tooltip>
+                                   v-for="dataType in ChartDataType.all()" v-show="dataType.isAvailableAnalysisType(queryAnalysisType)">
+                                <span class="text-truncate">{{ tt(dataType.name) }}</span>
+                                <v-tooltip activator="parent" location="right">{{ tt(dataType.name) }}</v-tooltip>
                             </v-tab>
                         </v-tabs>
                     </v-navigation-drawer>
@@ -54,25 +54,25 @@
                                                    :ripple="false" :icon="true" @click="showNav = !showNav">
                                                 <v-icon :icon="icons.menu" size="24" />
                                             </v-btn>
-                                            <span>{{ $t('Statistics & Analysis') }}</span>
+                                            <span>{{ tt('Statistics & Analysis') }}</span>
                                             <v-btn-group class="ml-4" color="default" density="comfortable" variant="outlined" divided>
                                                 <v-btn :icon="icons.left"
-                                                       :disabled="loading || !canShiftDateRange()"
+                                                       :disabled="loading || !canShiftDateRange"
                                                        @click="shiftDateRange(-1)"/>
                                                 <v-menu location="bottom">
                                                     <template #activator="{ props }">
-                                                        <v-btn :disabled="loading || queryChartDataType === allChartDataTypes.AccountTotalAssets.type || queryChartDataType === allChartDataTypes.AccountTotalLiabilities.type"
-                                                               v-bind="props">{{ dateRangeName() }}</v-btn>
+                                                        <v-btn :disabled="loading || queryChartDataType === ChartDataType.AccountTotalAssets.type || queryChartDataType === ChartDataType.AccountTotalLiabilities.type"
+                                                               v-bind="props">{{ queryDateRangeName }}</v-btn>
                                                     </template>
                                                     <v-list :selected="[queryDateType]">
                                                         <v-list-item :key="dateRange.type" :value="dateRange.type"
-                                                                     :append-icon="(queryDateType === dateRange.type ? icons.check : null)"
-                                                                     v-for="dateRange in allDateRangesArray">
+                                                                     :append-icon="(queryDateType === dateRange.type ? icons.check : undefined)"
+                                                                     v-for="dateRange in allDateRanges">
                                                             <v-list-item-title
                                                                 class="cursor-pointer"
                                                                 @click="setDateFilter(dateRange.type)">
                                                                 {{ dateRange.displayName }}
-                                                                <div class="statistics-custom-datetime-range" v-if="dateRange.type === allDateRanges.Custom.type && showCustomDateRange()">
+                                                                <div class="statistics-custom-datetime-range" v-if="dateRange.type === DateRange.Custom.type && showCustomDateRange">
                                                                     <span>{{ queryStartTime }}</span>
                                                                     <span>&nbsp;-&nbsp;</span>
                                                                     <br/>
@@ -83,11 +83,11 @@
                                                     </v-list>
                                                 </v-menu>
                                                 <v-btn :icon="icons.right"
-                                                       :disabled="loading || !canShiftDateRange()"
+                                                       :disabled="loading || !canShiftDateRange"
                                                        @click="shiftDateRange(1)"/>
                                             </v-btn-group>
 
-                                            <v-menu location="bottom" v-if="queryAnalysisType === allAnalysisTypes.TrendAnalysis">
+                                            <v-menu location="bottom" v-if="queryAnalysisType === StatisticsAnalysisType.TrendAnalysis">
                                                 <template #activator="{ props }">
                                                     <v-btn class="ml-3" color="default" variant="outlined"
                                                            :prepend-icon="icons.dateAggregation" :disabled="loading"
@@ -95,7 +95,7 @@
                                                 </template>
                                                 <v-list>
                                                     <v-list-item class="cursor-pointer" :key="aggregationType.type" :value="aggregationType.type"
-                                                                 :append-icon="(trendDateAggregationType === aggregationType.type ? icons.check : null)"
+                                                                 :append-icon="(trendDateAggregationType === aggregationType.type ? icons.check : undefined)"
                                                                  :title="aggregationType.displayName"
                                                                  v-for="aggregationType in allDateAggregationTypes"
                                                                  @click="setTrendDateAggregationType(aggregationType.type)">
@@ -104,12 +104,12 @@
                                             </v-menu>
 
                                             <v-btn density="compact" color="default" variant="text" size="24"
-                                                   class="ml-2" :icon="true" :loading="loading" @click="reload">
+                                                   class="ml-2" :icon="true" :loading="loading" @click="reload(true)">
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
-                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                                <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                                             </v-btn>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
@@ -118,18 +118,18 @@
                                                 <v-menu activator="parent">
                                                     <v-list>
                                                         <v-list-item :prepend-icon="icons.filter"
-                                                                     :title="$t('Filter Accounts')"
+                                                                     :title="tt('Filter Accounts')"
                                                                      @click="showFilterAccountDialog = true"></v-list-item>
                                                         <v-list-item :prepend-icon="icons.filter"
-                                                                     :title="$t('Filter Transaction Categories')"
+                                                                     :title="tt('Filter Transaction Categories')"
                                                                      @click="showFilterCategoryDialog = true"></v-list-item>
                                                         <v-list-item :prepend-icon="icons.filter"
-                                                                     :title="$t('Filter Transaction Tags')"
+                                                                     :title="tt('Filter Transaction Tags')"
                                                                      @click="showFilterTagDialog = true"></v-list-item>
                                                         <v-divider class="my-2"/>
                                                         <v-list-item to="/app/settings?tab=statisticsSetting"
                                                                      :prepend-icon="icons.filterSettings"
-                                                                     :title="$t('Settings')"></v-list-item>
+                                                                     :title="tt('Settings')"></v-list-item>
                                                     </v-list>
                                                 </v-menu>
                                             </v-btn>
@@ -137,7 +137,7 @@
                                     </template>
 
                                     <v-card-text class="statistics-overview-title pt-0" :class="{ 'disabled': loading }"
-                                                 v-if="queryAnalysisType === allAnalysisTypes.CategoricalAnalysis && (initing || (categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length))">
+                                                 v-if="queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis && (initing || (categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length))">
                                         <span class="statistics-subtitle">{{ totalAmountName }}</span>
                                         <span class="statistics-overview-amount ml-3"
                                               :class="statisticsTextColor"
@@ -150,12 +150,12 @@
                                     </v-card-text>
 
                                     <v-card-text class="statistics-overview-title pt-0"
-                                                 v-else-if="!initing && ((queryAnalysisType === allAnalysisTypes.CategoricalAnalysis && (!categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length))
-                                                  || (queryAnalysisType === allAnalysisTypes.TrendAnalysis && (!trendsAnalysisData || !trendsAnalysisData.items || !trendsAnalysisData.items.length)))">
-                                        <span class="statistics-subtitle statistics-overview-empty-tip">{{ $t('No transaction data') }}</span>
+                                                 v-else-if="!initing && ((queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis && (!categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length))
+                                                  || (queryAnalysisType === StatisticsAnalysisType.TrendAnalysis && (!trendsAnalysisData || !trendsAnalysisData.items || !trendsAnalysisData.items.length)))">
+                                        <span class="statistics-subtitle statistics-overview-empty-tip">{{ tt('No transaction data') }}</span>
                                     </v-card-text>
 
-                                    <v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === allAnalysisTypes.CategoricalAnalysis && query.categoricalChartType === allCategoricalChartTypes.Pie.type">
+                                    <v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis && query.categoricalChartType === CategoricalChartType.Pie.type">
                                         <pie-chart
                                             :items="[
                                                 {id: '1', name: '---', value: 60, color: '7c7c7f'},
@@ -181,11 +181,11 @@
                                             percent-field="percent"
                                             hidden-field="hidden"
                                             v-else-if="!initing"
-                                            @click="clickPieChartItem"
+                                            @click="onClickPieChartItem"
                                         />
                                     </v-card-text>
 
-                                    <v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === allAnalysisTypes.CategoricalAnalysis && query.categoricalChartType === allCategoricalChartTypes.Bar.type">
+                                    <v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis && query.categoricalChartType === CategoricalChartType.Bar.type">
                                         <v-list rounded lines="two" v-if="initing">
                                             <template :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
                                                 <v-list-item class="pl-0">
@@ -222,9 +222,9 @@
                                                         <div class="d-flex flex-column ml-2">
                                                             <div class="d-flex">
                                                                 <span>{{ item.name }}</span>
-                                                                <small class="statistics-percent" v-if="item.percent >= 0">{{ getDisplayPercent(item.percent, 2, '&lt;0.01') }}</small>
+                                                                <small class="statistics-percent" v-if="item.percent >= 0">{{ formatPercent(item.percent, 2, '&lt;0.01') }}</small>
                                                                 <v-spacer/>
-                                                                <span class="statistics-amount">{{ getDisplayAmount(item.totalAmount, (item.currency || defaultCurrency)) }}</span>
+                                                                <span class="statistics-amount">{{ getDisplayAmount(item.totalAmount, defaultCurrency) }}</span>
                                                             </div>
                                                             <div>
                                                                 <v-progress-linear :color="item.color ? '#' + item.color : 'primary'"
@@ -240,7 +240,7 @@
                                         </v-list>
                                     </v-card-text>
 
-                                    <v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === allAnalysisTypes.TrendAnalysis">
+                                    <v-card-text :class="{ 'readonly': loading }" v-if="queryAnalysisType === StatisticsAnalysisType.TrendAnalysis">
                                         <trends-chart
                                             :type="queryChartType"
                                             :start-year-month="query.trendChartStartYearMonth"
@@ -271,7 +271,7 @@
                                             hidden-field="hidden"
                                             display-orders-field="displayOrders"
                                             v-else-if="!initing && trendsAnalysisData && trendsAnalysisData.items && trendsAnalysisData.items.length"
-                                            @click="clickTrendChartItem"
+                                            @click="onClickTrendChartItem"
                                         />
                                     </v-card-text>
                                 </v-card>
@@ -283,19 +283,19 @@
         </v-col>
     </v-row>
 
-    <date-range-selection-dialog :title="$t('Custom Date Range')"
+    <date-range-selection-dialog :title="tt('Custom Date Range')"
                                   :min-time="query.categoricalChartStartTime"
                                   :max-time="query.categoricalChartEndTime"
                                   v-model:show="showCustomDateRangeDialog"
                                   @dateRange:change="setCustomDateFilter"
-                                  @error="showError" />
+                                  @error="onShowDateRangeError" />
 
-    <month-range-selection-dialog :title="$t('Custom Date Range')"
+    <month-range-selection-dialog :title="tt('Custom Date Range')"
                                   :min-time="query.trendChartStartYearMonth"
                                   :max-time="query.trendChartEndYearMonth"
                                   v-model:show="showCustomMonthRangeDialog"
                                   @dateRange:change="setCustomDateFilter"
-                                  @error="showError" />
+                                  @error="onShowDateRangeError" />
 
     <v-dialog width="800" v-model="showFilterAccountDialog">
         <account-filter-settings-card type="statisticsCurrent" :dialog-mode="true"
@@ -315,17 +315,25 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
+<script setup lang="ts">
+import SnackBar from '@/components/desktop/SnackBar.vue';
+import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
+import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
+import TransactionTagFilterSettingsCard from '@/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue';
+
+import { ref, computed, useTemplateRef, watch } from 'vue';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useDisplay, useTheme } from 'vuetify';
 
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
+import { useI18n } from '@/locales/helpers.ts';
+import { useStatisticsTransactionPageBase } from '@/views/base/statistics/StatisticsTransactionPageBase.ts';
+
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
-import { useStatisticsStore } from '@/stores/statistics.ts';
+import { type TransactionStatisticsPartialFilter, useStatisticsStore } from '@/stores/statistics.ts';
 
-import { DateRangeScene, DateRange } from '@/core/datetime.ts';
+import type { TypeAndDisplayName } from '@/core/base.ts';
+import { type TimeRangeAndDateType, DateRangeScene, DateRange } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
 import {
     StatisticsAnalysisType,
@@ -334,13 +342,16 @@ import {
     ChartSortingType,
     ChartDateAggregationType
 } from '@/core/statistics.ts';
+
 import {
     isDefined,
-    limitText,
-    getNameByKeyValue,
+    isString,
+    isNumber,
     arrayItemToObjectField
 } from '@/lib/common.ts'
-import { formatPercent } from '@/lib/numeral.ts';
+import {
+    formatPercent
+} from '@/lib/numeral.ts';
 import {
     getYearAndMonthFromUnixTime,
     getYearMonthFirstUnixTime,
@@ -364,719 +375,561 @@ import {
     mdiDotsVertical
 } from '@mdi/js';
 
-import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
-import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
-import TransactionTagFilterSettingsCard from '@/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue';
+type SnackBarType = InstanceType<typeof SnackBar>;
 
-export default {
-    components: {
-        AccountFilterSettingsCard,
-        CategoryFilterSettingsCard,
-        TransactionTagFilterSettingsCard
-    },
-    props: [
-        'initAnalysisType',
-        'initChartDataType',
-        'initChartType',
-        'initChartDateType',
-        'initStartTime',
-        'initEndTime',
-        'initFilterAccountIds',
-        'initFilterCategoryIds',
-        'initTagIds',
-        'initTagFilterType',
-        'initSortingType',
-        'initTrendDateAggregationType'
-    ],
-    data() {
-        const { mdAndUp } = useDisplay();
+interface TransactionStatisticsProps {
+    initAnalysisType?: string,
+    initChartDataType?: string,
+    initChartType?: string,
+    initChartDateType?: string,
+    initStartTime?: string,
+    initEndTime?: string,
+    initFilterAccountIds?: string,
+    initFilterCategoryIds?: string,
+    initTagIds?: string,
+    initTagFilterType?: string,
+    initSortingType?: string,
+    initTrendDateAggregationType?: string
+}
 
-        return {
-            activeTab: 'statisticsPage',
-            initing: true,
-            loading: true,
-            alwaysShowNav: mdAndUp.value,
-            showNav: mdAndUp.value,
-            analysisType: StatisticsAnalysisType.CategoricalAnalysis,
-            trendDateAggregationType: ChartDateAggregationType.Default.type,
-            showCustomDateRangeDialog: false,
-            showCustomMonthRangeDialog: false,
-            showFilterAccountDialog: false,
-            showFilterCategoryDialog: false,
-            showFilterTagDialog: false,
-            icons: {
-                check: mdiCheck,
-                left: mdiArrowLeft,
-                right: mdiArrowRight,
-                dateAggregation: mdiCalendarRangeOutline,
-                refresh: mdiRefresh,
-                square: mdiSquareRounded,
-                menu: mdiMenu,
-                filter: mdiFilterOutline,
-                filterSettings: mdiFilterCogOutline,
-                pencil: mdiPencilOutline,
-                more: mdiDotsVertical
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useStatisticsStore),
-        isDarkMode() {
-            return this.globalTheme.global.name.value === ThemeType.Dark;
-        },
-        defaultCurrency() {
-            return this.userStore.currentUserDefaultCurrency;
-        },
-        firstDayOfWeek() {
-            return this.userStore.currentUserFirstDayOfWeek;
-        },
-        queryAnalysisType: {
-            get: function () {
-                return this.analysisType;
-            },
-            set: function(value) {
-                this.setAnalysisType(value);
-            }
-        },
-        query() {
-            return this.statisticsStore.transactionStatisticsFilter;
-        },
-        queryChartDataCategory() {
-            return this.statisticsStore.categoricalAnalysisChartDataCategory;
-        },
-        queryChartType: {
-            get: function () {
-                if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                    return this.query.categoricalChartType;
-                } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                    return this.query.trendChartType;
-                } else {
-                    return null;
-                }
-            },
-            set: function(value) {
-                this.setChartType(value);
-            }
-        },
-        queryChartDataType: {
-            get: function () {
-                return this.query.chartDataType;
-            },
-            set: function(value) {
-                this.setChartDataType(value);
-            }
-        },
-        querySortingType: {
-            get: function () {
-                return this.query.sortingType;
-            },
-            set: function(value) {
-                this.setSortingType(value);
-            }
-        },
-        queryDateType() {
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.query.categoricalChartDateType;
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.query.trendChartDateType;
-            } else {
-                return null;
-            }
-        },
-        queryTrendDateAggregationTypeName() {
-            return getNameByKeyValue(this.allDateAggregationTypes, this.trendDateAggregationType, 'type', 'displayName', '');
-        },
-        queryStartTime() {
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartStartTime);
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthFirstUnixTime(this.query.trendChartStartYearMonth));
-            } else {
-                return '';
-            }
-        },
-        queryEndTime() {
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartEndTime);
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthLastUnixTime(this.query.trendChartEndYearMonth));
-            } else {
-                return '';
-            }
-        },
-        allAnalysisTypes() {
-            return StatisticsAnalysisType;
-        },
-        allChartTypes() {
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.getAllCategoricalChartTypes();
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.getAllTrendChartTypes();
-            } else {
-                return [];
-            }
-        },
-        allCategoricalChartTypes() {
-            return CategoricalChartType.all();
-        },
-        allChartDataTypes() {
-            return ChartDataType.all();
-        },
-        allSortingTypes() {
-            return this.$locale.getAllStatisticsSortingTypes();
-        },
-        allDateAggregationTypes() {
-            return this.$locale.getAllStatisticsDateAggregationTypes();
-        },
-        allDateRanges() {
-            return DateRange.all();
-        },
-        allDateRangesArray() {
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.getAllDateRanges(DateRangeScene.Normal, true);
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.getAllDateRanges(DateRangeScene.TrendAnalysis, true);
-            } else {
-                return [];
-            }
-        },
-        showAccountBalance() {
-            return this.settingsStore.appSettings.showAccountBalance;
-        },
-        totalAmountName() {
-            if (this.queryChartDataType === ChartDataType.IncomeByAccount.type
-                || this.queryChartDataType === ChartDataType.IncomeByPrimaryCategory.type
-                || this.queryChartDataType === ChartDataType.IncomeBySecondaryCategory.type) {
-                return this.$t('Total Income');
-            } else if (this.queryChartDataType === ChartDataType.ExpenseByAccount.type
-                || this.queryChartDataType === ChartDataType.ExpenseByPrimaryCategory.type
-                || this.queryChartDataType === ChartDataType.ExpenseBySecondaryCategory.type) {
-                return this.$t('Total Expense');
-            } else if (this.queryChartDataType === ChartDataType.AccountTotalAssets.type) {
-                return this.$t('Total Assets');
-            } else if (this.queryChartDataType === ChartDataType.AccountTotalLiabilities.type) {
-                return this.$t('Total Liabilities');
-            }
+const props = defineProps<TransactionStatisticsProps>();
 
-            return this.$t('Total Amount');
-        },
-        categoricalAnalysisData() {
-            return this.statisticsStore.categoricalAnalysisData;
-        },
-        trendsAnalysisData() {
-            return this.statisticsStore.trendsAnalysisData;
-        },
-        translateNameInTrendsChart() {
-            return this.queryChartDataType === ChartDataType.TotalExpense.type ||
-                this.queryChartDataType === ChartDataType.TotalIncome.type ||
-                this.queryChartDataType === ChartDataType.TotalBalance.type;
-        },
-        showTotalAmountInTrendsChart() {
-            return this.queryChartDataType !== ChartDataType.TotalExpense.type &&
-                this.queryChartDataType !== ChartDataType.TotalIncome.type &&
-                this.queryChartDataType !== ChartDataType.TotalBalance.type;
-        },
-        statisticsTextColor() {
-            if (this.queryChartDataType === ChartDataType.ExpenseByAccount.type ||
-                this.queryChartDataType === ChartDataType.ExpenseByPrimaryCategory.type ||
-                this.queryChartDataType === ChartDataType.ExpenseBySecondaryCategory.type) {
-                return 'text-expense';
-            } else if (this.queryChartDataType === ChartDataType.IncomeByAccount.type ||
-                this.queryChartDataType === ChartDataType.IncomeByPrimaryCategory.type ||
-                this.queryChartDataType === ChartDataType.IncomeBySecondaryCategory.type) {
-                return 'text-income';
-            } else {
-                return 'text-default';
-            }
-        },
-        showAmountInChart() {
-            if (!this.showAccountBalance
-                && (this.queryChartDataType === ChartDataType.AccountTotalAssets.type || this.queryChartDataType === ChartDataType.AccountTotalLiabilities.type)) {
-                return false;
-            }
+const router = useRouter();
+const display = useDisplay();
+const theme = useTheme();
+const { tt, getAllCategoricalChartTypes, getAllTrendChartTypes } = useI18n();
 
-            return true;
-        }
-    },
-    watch: {
-        'display.mdAndUp.value': function (newValue) {
-            this.alwaysShowNav = newValue;
+const {
+    loading,
+    analysisType,
+    trendDateAggregationType,
+    defaultCurrency,
+    firstDayOfWeek,
+    allDateRanges,
+    allSortingTypes,
+    allDateAggregationTypes,
+    query,
+    queryChartDataCategory,
+    queryDateType,
+    queryStartTime,
+    queryEndTime,
+    queryDateRangeName,
+    queryTrendDateAggregationTypeName,
+    canShiftDateRange,
+    showCustomDateRange,
+    showAmountInChart,
+    totalAmountName,
+    showTotalAmountInTrendsChart,
+    translateNameInTrendsChart,
+    categoricalAnalysisData,
+    trendsAnalysisData,
+    getDisplayAmount
+} = useStatisticsTransactionPageBase();
 
-            if (!this.showNav) {
-                this.showNav = newValue;
-            }
-        }
-    },
-    created() {
-        this.init({
-            analysisType: this.initAnalysisType,
-            chartDataType: this.initChartDataType,
-            chartType: this.initChartType,
-            chartDateType: this.initChartDateType,
-            startTime: this.initStartTime,
-            endTime: this.initEndTime,
-            filterAccountIds: this.initFilterAccountIds,
-            filterCategoryIds: this.initFilterCategoryIds,
-            tagIds: this.initTagIds,
-            tagFilterType: this.initTagFilterType,
-            sortingType: this.initSortingType,
-            trendDateAggregationType: this.initTrendDateAggregationType,
-        });
-    },
-    setup() {
-        const display = useDisplay();
-        const theme = useTheme();
+const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
+const statisticsStore = useStatisticsStore();
 
-        return {
-            display: display,
-            globalTheme: theme
-        };
-    },
-    beforeRouteUpdate(to) {
-        if (to.query) {
-            this.init({
-                analysisType: to.query.analysisType,
-                chartDataType: to.query.chartDataType,
-                chartType: to.query.chartType,
-                chartDateType: to.query.chartDateType,
-                startTime: to.query.startTime,
-                endTime: to.query.endTime,
-                filterAccountIds: to.query.filterAccountIds,
-                filterCategoryIds: to.query.filterCategoryIds,
-                tagIds: to.query.tagIds,
-                tagFilterType: to.query.tagFilterType,
-                sortingType: to.query.sortingType,
-                trendDateAggregationType: to.query.trendDateAggregationType
-            });
+const icons = {
+    check: mdiCheck,
+    left: mdiArrowLeft,
+    right: mdiArrowRight,
+    dateAggregation: mdiCalendarRangeOutline,
+    refresh: mdiRefresh,
+    square: mdiSquareRounded,
+    menu: mdiMenu,
+    filter: mdiFilterOutline,
+    filterSettings: mdiFilterCogOutline,
+    pencil: mdiPencilOutline,
+    more: mdiDotsVertical
+};
+
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const activeTab = ref<string>('statisticsPage');
+const initing = ref<boolean>(true);
+const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
+const showNav = ref<boolean>(display.mdAndUp.value);
+const showCustomDateRangeDialog = ref<boolean>(false);
+const showCustomMonthRangeDialog = ref<boolean>(false);
+const showFilterAccountDialog = ref<boolean>(false);
+const showFilterCategoryDialog = ref<boolean>(false);
+const showFilterTagDialog = ref<boolean>(false);
+
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+
+const allChartTypes = computed<TypeAndDisplayName[]>(() => {
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        return getAllCategoricalChartTypes();
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        return getAllTrendChartTypes();
+    } else {
+        return [];
+    }
+});
+
+const queryAnalysisType = computed<StatisticsAnalysisType>({
+    get: () => analysisType.value,
+    set: (value: number) => {
+        setAnalysisType(value);
+    }
+});
+
+const queryChartType = computed<number | undefined>({
+    get: () => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return query.value.categoricalChartType;
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return query.value.trendChartType;
         } else {
-            this.init({});
+            return undefined;
         }
     },
-    methods: {
-        init(query) {
-            const self = this;
-            let needReload = !isDefined(query.analysisType);
+    set: (value: number | undefined) => {
+        setChartType(value);
+    }
+});
 
-            let filter = {
-                chartDataType: query.chartDataType ? parseInt(query.chartDataType) : undefined,
-                filterAccountIds: query.filterAccountIds ? arrayItemToObjectField(query.filterAccountIds.split(','), true) : {},
-                filterCategoryIds: query.filterCategoryIds ? arrayItemToObjectField(query.filterCategoryIds.split(','), true) : {},
-                tagIds: query.tagIds,
-                tagFilterType: query.tagFilterType && parseInt(query.tagFilterType) >= 0 ? parseInt(query.tagFilterType) : undefined,
-                sortingType: query.sortingType ? parseInt(query.sortingType) : undefined
-            };
+const queryChartDataType = computed<number>({
+    get: () => query.value.chartDataType,
+    set: (value: number) => {
+        setChartDataType(value);
+    }
+});
 
-            if (query.analysisType === StatisticsAnalysisType.CategoricalAnalysis.toString()) {
-                filter.categoricalChartType = query.chartType ? parseInt(query.chartType) : undefined;
-                filter.categoricalChartDateType = query.chartDateType ? parseInt(query.chartDateType) : undefined;
-                filter.categoricalChartStartTime = query.startTime ? parseInt(query.startTime) : undefined;
-                filter.categoricalChartEndTime = query.endTime ? parseInt(query.endTime) : undefined;
+const querySortingType = computed<number>({
+    get: () => query.value.sortingType,
+    set: (value: number) => {
+        setSortingType(value);
+    }
+});
 
-                if (filter.categoricalChartDateType !== self.query.categoricalChartDateType) {
-                    needReload = true;
-                } else if (filter.categoricalChartDateType === DateRange.Custom.type) {
-                    if (filter.categoricalChartStartTime !== self.query.categoricalChartStartTime
-                        || filter.categoricalChartEndTime !== self.query.categoricalChartEndTime) {
-                        needReload = true;
-                    }
-                }
+const statisticsTextColor = computed<string>(() => {
+    if (query.value.chartDataType === ChartDataType.ExpenseByAccount.type ||
+        query.value.chartDataType === ChartDataType.ExpenseByPrimaryCategory.type ||
+        query.value.chartDataType === ChartDataType.ExpenseBySecondaryCategory.type) {
+        return 'text-expense';
+    } else if (query.value.chartDataType === ChartDataType.IncomeByAccount.type ||
+        query.value.chartDataType === ChartDataType.IncomeByPrimaryCategory.type ||
+        query.value.chartDataType === ChartDataType.IncomeBySecondaryCategory.type) {
+        return 'text-income';
+    } else {
+        return 'text-default';
+    }
+});
 
-                if (query.analysisType !== self.queryAnalysisType.toString()) {
-                    self.analysisType = StatisticsAnalysisType.CategoricalAnalysis;
-                    needReload = true;
-                }
-            } else if (query.analysisType === StatisticsAnalysisType.TrendAnalysis.toString()) {
-                filter.trendChartType = query.chartType ? parseInt(query.chartType) : undefined;
-                filter.trendChartDateType = query.chartDateType ? parseInt(query.chartDateType) : undefined;
-                filter.trendChartStartYearMonth = query.startTime;
-                filter.trendChartEndYearMonth = query.endTime;
+function getFilterLinkUrl(): string {
+    return `/statistics/transaction?${statisticsStore.getTransactionStatisticsPageParams(analysisType.value, trendDateAggregationType.value)}`;
+}
 
-                if (filter.trendChartDateType !== self.query.trendChartDateType) {
-                    needReload = true;
-                } else if (filter.trendChartDateType === DateRange.Custom.type) {
-                    if (filter.trendChartStartYearMonth !== self.query.trendChartStartYearMonth
-                        || filter.trendChartEndYearMonth !== self.query.trendChartEndYearMonth) {
-                        needReload = true;
-                    }
-                }
+function getTransactionItemLinkUrl(itemId: string, dateRange?: TimeRangeAndDateType): string {
+    return `/transaction/list?${statisticsStore.getTransactionListPageParams(analysisType.value, itemId, dateRange)}`;
+}
 
-                if (query.analysisType !== self.queryAnalysisType.toString()) {
-                    self.analysisType = StatisticsAnalysisType.TrendAnalysis;
-                    needReload = true;
-                }
+function init(initProps: TransactionStatisticsProps): void {
+    let needReload = !isDefined(initProps.initAnalysisType);
 
-                if (query.trendDateAggregationType) {
-                    self.trendDateAggregationType = parseInt(query.trendDateAggregationType);
-                }
+    let filter: TransactionStatisticsPartialFilter | undefined = {
+        chartDataType: initProps.initChartDataType ? parseInt(initProps.initChartDataType) : undefined,
+        filterAccountIds: initProps.initFilterAccountIds ? arrayItemToObjectField(initProps.initFilterAccountIds.split(','), true) : {},
+        filterCategoryIds: initProps.initFilterCategoryIds ? arrayItemToObjectField(initProps.initFilterCategoryIds.split(','), true) : {},
+        tagIds: initProps.initTagIds,
+        tagFilterType: initProps.initTagFilterType && parseInt(initProps.initTagFilterType) >= 0 ? parseInt(initProps.initTagFilterType) : undefined,
+        sortingType: initProps.initSortingType ? parseInt(initProps.initSortingType) : undefined
+    };
+
+    if (initProps.initAnalysisType === StatisticsAnalysisType.CategoricalAnalysis.toString()) {
+        filter.categoricalChartType = initProps.initChartType ? parseInt(initProps.initChartType) : undefined;
+        filter.categoricalChartDateType = initProps.initChartDateType ? parseInt(initProps.initChartDateType) : undefined;
+        filter.categoricalChartStartTime = initProps.initStartTime ? parseInt(initProps.initStartTime) : undefined;
+        filter.categoricalChartEndTime = initProps.initEndTime ? parseInt(initProps.initEndTime) : undefined;
+
+        if (filter.categoricalChartDateType !== query.value.categoricalChartDateType) {
+            needReload = true;
+        } else if (filter.categoricalChartDateType === DateRange.Custom.type) {
+            if (filter.categoricalChartStartTime !== query.value.categoricalChartStartTime
+                || filter.categoricalChartEndTime !== query.value.categoricalChartEndTime) {
+                needReload = true;
             }
+        }
 
-            if (!isDefined(query.analysisType)) {
-                self.analysisType = StatisticsAnalysisType.CategoricalAnalysis;
-                filter = null;
+        if (initProps.initAnalysisType !== analysisType.value.toString()) {
+            analysisType.value = StatisticsAnalysisType.CategoricalAnalysis;
+            needReload = true;
+        }
+    } else if (initProps.initAnalysisType === StatisticsAnalysisType.TrendAnalysis.toString()) {
+        filter.trendChartType = initProps.initChartType ? parseInt(initProps.initChartType) : undefined;
+        filter.trendChartDateType = initProps.initChartDateType ? parseInt(initProps.initChartDateType) : undefined;
+        filter.trendChartStartYearMonth = initProps.initStartTime;
+        filter.trendChartEndYearMonth = initProps.initEndTime;
+
+        if (filter.trendChartDateType !== query.value.trendChartDateType) {
+            needReload = true;
+        } else if (filter.trendChartDateType === DateRange.Custom.type) {
+            if (filter.trendChartStartYearMonth !== query.value.trendChartStartYearMonth
+                || filter.trendChartEndYearMonth !== query.value.trendChartEndYearMonth) {
+                needReload = true;
             }
+        }
 
-            self.statisticsStore.initTransactionStatisticsFilter(self.queryAnalysisType, filter);
+        if (initProps.initAnalysisType !== analysisType.value.toString()) {
+            analysisType.value = StatisticsAnalysisType.TrendAnalysis;
+            needReload = true;
+        }
 
-            if (!needReload && !self.statisticsStore.transactionStatisticsStateInvalid) {
-                self.loading = false;
-                self.initing = false;
-                return;
-            }
-
-            Promise.all([
-                self.accountsStore.loadAllAccounts({force: false}),
-                self.transactionCategoriesStore.loadAllCategories({force: false})
-            ]).then(() => {
-                if (self.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                    return self.statisticsStore.loadCategoricalAnalysis({
-                        force: false
-                    });
-                } else if (self.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                    return self.statisticsStore.loadTrendAnalysis({
-                        force: false
-                    });
-                }
-            }).then(() => {
-                self.loading = false;
-                self.initing = false;
-            }).catch(error => {
-                self.loading = false;
-                self.initing = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        reload(force) {
-            const self = this;
-            let dispatchPromise = null;
-
-            self.loading = true;
-
-            if (self.queryChartDataType === ChartDataType.ExpenseByAccount.type ||
-                self.queryChartDataType === ChartDataType.ExpenseByPrimaryCategory.type ||
-                self.queryChartDataType === ChartDataType.ExpenseBySecondaryCategory.type ||
-                self.queryChartDataType === ChartDataType.IncomeByAccount.type ||
-                self.queryChartDataType === ChartDataType.IncomeByPrimaryCategory.type ||
-                self.queryChartDataType === ChartDataType.IncomeBySecondaryCategory.type ||
-                self.queryChartDataType === ChartDataType.TotalExpense.type ||
-                self.queryChartDataType === ChartDataType.TotalIncome.type ||
-                self.queryChartDataType === ChartDataType.TotalBalance.type) {
-                if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                    dispatchPromise = self.statisticsStore.loadCategoricalAnalysis({
-                        force: force
-                    });
-                } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                    dispatchPromise = self.statisticsStore.loadTrendAnalysis({
-                        force: force
-                    });
-                }
-            } else if (self.queryChartDataType === ChartDataType.AccountTotalAssets.type ||
-                self.queryChartDataType === ChartDataType.AccountTotalLiabilities.type) {
-                dispatchPromise = self.accountsStore.loadAllAccounts({
-                    force: force
-                });
-            }
-
-            if (dispatchPromise) {
-                dispatchPromise.then(() => {
-                    self.loading = false;
-
-                    if (force) {
-                        self.$refs.snackbar.showMessage('Data has been updated');
-                    }
-                }).catch(error => {
-                    self.loading = false;
-
-                    if (!error.processed) {
-                        self.$refs.snackbar.showError(error);
-                    }
-                });
-            }
-
-            return dispatchPromise;
-        },
-        setAnalysisType(analysisType) {
-            if (this.analysisType === analysisType) {
-                return;
-            }
-
-            if (!ChartDataType.isAvailableForAnalysisType(this.queryChartDataType, analysisType)) {
-                this.statisticsStore.updateTransactionStatisticsFilter({
-                    chartDataType: ChartDataType.Default.type
-                });
-            }
-
-            if (this.analysisType !== StatisticsAnalysisType.TrendAnalysis) {
-                this.trendDateAggregationType = ChartDateAggregationType.Month.type;
-            }
-
-            this.analysisType = analysisType;
-            this.loading = true;
-            this.statisticsStore.updateTransactionStatisticsInvalidState(true);
-            this.$router.push(this.getFilterLinkUrl());
-        },
-        setChartType(chartType) {
-            let changed = false;
-
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    categoricalChartType: chartType
-                });
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    trendChartType: chartType
-                });
-            }
-
-            if (changed) {
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        setChartDataType(chartDataType) {
-            const changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                chartDataType: chartDataType
-            });
-
-            if (changed) {
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        setSortingType(sortingType) {
-            if (sortingType < ChartSortingType.Amount.type || sortingType > ChartSortingType.Name.type) {
-                return;
-            }
-
-            const changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                sortingType: sortingType
-            });
-
-            if (changed) {
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        setTrendDateAggregationType(aggregationType) {
-            const changed = this.trendDateAggregationType !== aggregationType;
-            this.trendDateAggregationType = aggregationType;
-
-            if (changed) {
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        setDateFilter(dateType) {
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                if (dateType === this.allDateRanges.Custom.type) { // Custom
-                    this.showCustomDateRangeDialog = true;
-                    return;
-                } else if (this.query.categoricalChartDateType === dateType) {
-                    return;
-                }
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                if (dateType === this.allDateRanges.Custom.type) { // Custom
-                    this.showCustomMonthRangeDialog = true;
-                    return;
-                } else if (this.query.trendChartDateType === dateType) {
-                    return;
-                }
-            }
-
-            const dateRange = getDateRangeByDateType(dateType, this.firstDayOfWeek);
-
-            if (!dateRange) {
-                return;
-            }
-
-            let changed = false;
-
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    categoricalChartDateType: dateRange.dateType,
-                    categoricalChartStartTime: dateRange.minTime,
-                    categoricalChartEndTime: dateRange.maxTime
-                });
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    trendChartDateType: dateRange.dateType,
-                    trendChartStartYearMonth: getYearAndMonthFromUnixTime(dateRange.minTime),
-                    trendChartEndYearMonth: getYearAndMonthFromUnixTime(dateRange.maxTime)
-                });
-            }
-
-            if (changed) {
-                this.loading = true;
-                this.statisticsStore.updateTransactionStatisticsInvalidState(true);
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        setCustomDateFilter(startTime, endTime) {
-            if (!startTime || !endTime) {
-                return;
-            }
-
-            let changed = false;
-
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                const chartDateType = getDateTypeByDateRange(startTime, endTime, this.firstDayOfWeek, DateRangeScene.Normal);
-
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    categoricalChartDateType: chartDateType,
-                    categoricalChartStartTime: startTime,
-                    categoricalChartEndTime: endTime
-                });
-
-                this.showCustomDateRangeDialog = false;
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                const chartDateType = getDateTypeByDateRange(getYearMonthFirstUnixTime(startTime), getYearMonthLastUnixTime(endTime), this.firstDayOfWeek, DateRangeScene.TrendAnalysis);
-
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    trendChartDateType: chartDateType,
-                    trendChartStartYearMonth: startTime,
-                    trendChartEndYearMonth: endTime
-                });
-
-                this.showCustomMonthRangeDialog = false;
-            }
-
-            if (changed) {
-                this.loading = true;
-                this.statisticsStore.updateTransactionStatisticsInvalidState(true);
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        showCustomDateRange() {
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.query.categoricalChartDateType === this.allDateRanges.Custom.type && this.query.categoricalChartStartTime && this.query.categoricalChartEndTime;
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.query.trendChartDateType === this.allDateRanges.Custom.type && this.query.trendChartStartYearMonth && this.query.trendChartEndYearMonth;
-            } else {
-                return false;
-            }
-        },
-        canShiftDateRange() {
-            if (this.queryChartDataType === ChartDataType.AccountTotalAssets.type || this.queryChartDataType === ChartDataType.AccountTotalLiabilities.type) {
-                return false;
-            }
-
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.query.categoricalChartDateType !== this.allDateRanges.All.type;
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.query.trendChartDateType !== this.allDateRanges.All.type;
-            } else {
-                return false;
-            }
-        },
-        shiftDateRange(scale) {
-            if (this.query.categoricalChartDateType === this.allDateRanges.All.type) {
-                return;
-            }
-
-            let changed = false;
-
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                const newDateRange = getShiftedDateRangeAndDateType(this.query.categoricalChartStartTime, this.query.categoricalChartEndTime, scale, this.firstDayOfWeek, DateRangeScene.Normal);
-
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    categoricalChartDateType: newDateRange.dateType,
-                    categoricalChartStartTime: newDateRange.minTime,
-                    categoricalChartEndTime: newDateRange.maxTime
-                });
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                const newDateRange = getShiftedDateRangeAndDateType(getYearMonthFirstUnixTime(this.query.trendChartStartYearMonth), getYearMonthLastUnixTime(this.query.trendChartEndYearMonth), scale, this.firstDayOfWeek, DateRangeScene.TrendAnalysis);
-
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    trendChartDateType: newDateRange.dateType,
-                    trendChartStartYearMonth: getYearAndMonthFromUnixTime(newDateRange.minTime),
-                    trendChartEndYearMonth: getYearAndMonthFromUnixTime(newDateRange.maxTime)
-                });
-            }
-
-            if (changed) {
-                this.loading = true;
-                this.statisticsStore.updateTransactionStatisticsInvalidState(true);
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        dateRangeName() {
-            if (this.queryChartDataType === ChartDataType.AccountTotalAssets.type ||
-                this.queryChartDataType === ChartDataType.AccountTotalLiabilities.type) {
-                return this.$t(this.allDateRanges.All.name);
-            }
-
-            if (this.queryAnalysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.getDateRangeDisplayName(this.userStore, this.query.categoricalChartDateType, this.query.categoricalChartStartTime, this.query.categoricalChartEndTime);
-            } else if (this.queryAnalysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.getDateRangeDisplayName(this.userStore, this.query.trendChartDateType, getYearMonthFirstUnixTime(this.query.trendChartStartYearMonth), getYearMonthLastUnixTime(this.query.trendChartEndYearMonth));
-            } else {
-                return '';
-            }
-        },
-        setAccountFilter(changed) {
-            this.showFilterAccountDialog = false;
-
-            if (changed) {
-                this.loading = true;
-                this.statisticsStore.updateTransactionStatisticsInvalidState(true);
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        setCategoryFilter(changed) {
-            this.showFilterCategoryDialog = false;
-
-            if (changed) {
-                this.loading = true;
-                this.statisticsStore.updateTransactionStatisticsInvalidState(true);
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        setTagFilter(changed) {
-            this.showFilterTagDialog = false;
-
-            if (changed) {
-                this.loading = true;
-                this.statisticsStore.updateTransactionStatisticsInvalidState(true);
-                this.$router.push(this.getFilterLinkUrl());
-            }
-        },
-        clickPieChartItem(item) {
-            this.$router.push(this.getTransactionItemLinkUrl(item.id));
-        },
-        clickTrendChartItem(item) {
-            this.$router.push(this.getTransactionItemLinkUrl(item.itemId, item.dateRange));
-        },
-        showError(message) {
-            this.$refs.snackbar.showError(message);
-        },
-        getDisplayAmount(amount, currency, textLimit) {
-            amount = this.getDisplayCurrency(amount, currency);
-
-            if (!this.showAccountBalance
-                && (this.queryChartDataType === ChartDataType.AccountTotalAssets.type
-                    || this.queryChartDataType === ChartDataType.AccountTotalLiabilities.type)
-            ) {
-                return '***';
-            }
-
-            if (textLimit) {
-                return limitText(amount, textLimit);
-            }
-
-            return amount;
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
-        },
-        getDisplayPercent(value, precision, lowPrecisionValue) {
-            return formatPercent(value, precision, lowPrecisionValue);
-        },
-        getFilterLinkUrl() {
-            return `/statistics/transaction?${this.statisticsStore.getTransactionStatisticsPageParams(this.queryAnalysisType, this.trendDateAggregationType)}`;
-        },
-        getTransactionItemLinkUrl(itemId, dateRange) {
-            return `/transaction/list?${this.statisticsStore.getTransactionListPageParams(this.queryAnalysisType, itemId, dateRange)}`;
+        if (initProps.initTrendDateAggregationType) {
+            trendDateAggregationType.value = parseInt(initProps.initTrendDateAggregationType);
         }
     }
+
+    if (!isDefined(initProps.initAnalysisType)) {
+        analysisType.value = StatisticsAnalysisType.CategoricalAnalysis;
+        filter = undefined;
+    }
+
+    statisticsStore.initTransactionStatisticsFilter(analysisType.value, filter);
+
+    if (!needReload && !statisticsStore.transactionStatisticsStateInvalid) {
+        loading.value = false;
+        initing.value = false;
+        return;
+    }
+
+    Promise.all([
+        accountsStore.loadAllAccounts({force: false}),
+        transactionCategoriesStore.loadAllCategories({force: false})
+    ]).then(() => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return statisticsStore.loadCategoricalAnalysis({
+                force: false
+            }) as Promise<unknown>;
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return statisticsStore.loadTrendAnalysis({
+                force: false
+            }) as Promise<unknown>;
+        } else {
+            return Promise.reject('An error occurred');
+        }
+    }).then(() => {
+        loading.value = false;
+        initing.value = false;
+    }).catch(error => {
+        loading.value = false;
+        initing.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
 }
+
+function reload(force: boolean): Promise<unknown> | null {
+    let dispatchPromise: Promise<unknown> | null = null;
+
+    loading.value = true;
+
+    if (query.value.chartDataType === ChartDataType.ExpenseByAccount.type ||
+        query.value.chartDataType === ChartDataType.ExpenseByPrimaryCategory.type ||
+        query.value.chartDataType === ChartDataType.ExpenseBySecondaryCategory.type ||
+        query.value.chartDataType === ChartDataType.IncomeByAccount.type ||
+        query.value.chartDataType === ChartDataType.IncomeByPrimaryCategory.type ||
+        query.value.chartDataType === ChartDataType.IncomeBySecondaryCategory.type ||
+        query.value.chartDataType === ChartDataType.TotalExpense.type ||
+        query.value.chartDataType === ChartDataType.TotalIncome.type ||
+        query.value.chartDataType === ChartDataType.TotalBalance.type) {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            dispatchPromise = statisticsStore.loadCategoricalAnalysis({
+                force: force
+            });
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            dispatchPromise = statisticsStore.loadTrendAnalysis({
+                force: force
+            });
+        }
+    } else if (query.value.chartDataType === ChartDataType.AccountTotalAssets.type ||
+        query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
+        dispatchPromise = accountsStore.loadAllAccounts({
+            force: force
+        });
+    }
+
+    if (dispatchPromise) {
+        dispatchPromise.then(() => {
+            loading.value = false;
+
+            if (force) {
+                snackbar.value?.showMessage('Data has been updated');
+            }
+        }).catch(error => {
+            loading.value = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    }
+
+    return dispatchPromise;
+}
+
+function setAnalysisType(type: StatisticsAnalysisType): void {
+    if (analysisType.value === type) {
+        return;
+    }
+
+    if (!ChartDataType.isAvailableForAnalysisType(query.value.chartDataType, type)) {
+        statisticsStore.updateTransactionStatisticsFilter({
+            chartDataType: ChartDataType.Default.type
+        });
+    }
+
+    if (analysisType.value !== StatisticsAnalysisType.TrendAnalysis) {
+        trendDateAggregationType.value = ChartDateAggregationType.Month.type;
+    }
+
+    analysisType.value = type;
+    loading.value = true;
+    statisticsStore.updateTransactionStatisticsInvalidState(true);
+    router.push(getFilterLinkUrl());
+}
+
+function setChartType(type?: number): void {
+    let changed = false;
+
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            categoricalChartType: type
+        });
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            trendChartType: type
+        });
+    }
+
+    if (changed) {
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function setChartDataType(type: number): void {
+    const changed = statisticsStore.updateTransactionStatisticsFilter({
+        chartDataType: type
+    });
+
+    if (changed) {
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function setSortingType(type: number): void {
+    if (type < ChartSortingType.Amount.type || type > ChartSortingType.Name.type) {
+        return;
+    }
+
+    const changed = statisticsStore.updateTransactionStatisticsFilter({
+        sortingType: type
+    });
+
+    if (changed) {
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function setTrendDateAggregationType(type: number): void {
+    const changed = trendDateAggregationType.value !== type;
+    trendDateAggregationType.value = type;
+
+    if (changed) {
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function setDateFilter(dateType: number): void {
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        if (dateType === DateRange.Custom.type) { // Custom
+            showCustomDateRangeDialog.value = true;
+            return;
+        } else if (query.value.categoricalChartDateType === dateType) {
+            return;
+        }
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        if (dateType === DateRange.Custom.type) { // Custom
+            showCustomMonthRangeDialog.value = true;
+            return;
+        } else if (query.value.trendChartDateType === dateType) {
+            return;
+        }
+    }
+
+    const dateRange = getDateRangeByDateType(dateType, firstDayOfWeek.value);
+
+    if (!dateRange) {
+        return;
+    }
+
+    let changed = false;
+
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            categoricalChartDateType: dateRange.dateType,
+            categoricalChartStartTime: dateRange.minTime,
+            categoricalChartEndTime: dateRange.maxTime
+        });
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            trendChartDateType: dateRange.dateType,
+            trendChartStartYearMonth: getYearAndMonthFromUnixTime(dateRange.minTime),
+            trendChartEndYearMonth: getYearAndMonthFromUnixTime(dateRange.maxTime)
+        });
+    }
+
+    if (changed) {
+        loading.value = true;
+        statisticsStore.updateTransactionStatisticsInvalidState(true);
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function setCustomDateFilter(startTime: number | string, endTime: number | string): void {
+    if (!startTime || !endTime) {
+        return;
+    }
+
+    let changed = false;
+
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis && isNumber(startTime) && isNumber(endTime)) {
+        const chartDateType = getDateTypeByDateRange(startTime, endTime, firstDayOfWeek.value, DateRangeScene.Normal);
+
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            categoricalChartDateType: chartDateType,
+            categoricalChartStartTime: startTime,
+            categoricalChartEndTime: endTime
+        });
+
+        showCustomDateRangeDialog.value = false;
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis && isString(startTime) && isString(endTime)) {
+        const chartDateType = getDateTypeByDateRange(getYearMonthFirstUnixTime(startTime), getYearMonthLastUnixTime(endTime), firstDayOfWeek.value, DateRangeScene.TrendAnalysis);
+
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            trendChartDateType: chartDateType,
+            trendChartStartYearMonth: startTime,
+            trendChartEndYearMonth: endTime
+        });
+
+        showCustomMonthRangeDialog.value = false;
+    }
+
+    if (changed) {
+        loading.value = true;
+        statisticsStore.updateTransactionStatisticsInvalidState(true);
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function shiftDateRange(scale: number): void {
+    if (query.value.categoricalChartDateType === DateRange.All.type) {
+        return;
+    }
+
+    let changed = false;
+
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        const newDateRange = getShiftedDateRangeAndDateType(query.value.categoricalChartStartTime, query.value.categoricalChartEndTime, scale, firstDayOfWeek.value, DateRangeScene.Normal);
+
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            categoricalChartDateType: newDateRange.dateType,
+            categoricalChartStartTime: newDateRange.minTime,
+            categoricalChartEndTime: newDateRange.maxTime
+        });
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        const newDateRange = getShiftedDateRangeAndDateType(getYearMonthFirstUnixTime(query.value.trendChartStartYearMonth), getYearMonthLastUnixTime(query.value.trendChartEndYearMonth), scale, firstDayOfWeek.value, DateRangeScene.TrendAnalysis);
+
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            trendChartDateType: newDateRange.dateType,
+            trendChartStartYearMonth: getYearAndMonthFromUnixTime(newDateRange.minTime),
+            trendChartEndYearMonth: getYearAndMonthFromUnixTime(newDateRange.maxTime)
+        });
+    }
+
+    if (changed) {
+        loading.value = true;
+        statisticsStore.updateTransactionStatisticsInvalidState(true);
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function setAccountFilter(changed: boolean): void {
+    showFilterAccountDialog.value = false;
+
+    if (changed) {
+        loading.value = true;
+        statisticsStore.updateTransactionStatisticsInvalidState(true);
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function setCategoryFilter(changed: boolean): void {
+    showFilterCategoryDialog.value = false;
+
+    if (changed) {
+        loading.value = true;
+        statisticsStore.updateTransactionStatisticsInvalidState(true);
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function setTagFilter(changed: boolean): void {
+    showFilterTagDialog.value = false;
+
+    if (changed) {
+        loading.value = true;
+        statisticsStore.updateTransactionStatisticsInvalidState(true);
+        router.push(getFilterLinkUrl());
+    }
+}
+
+function onClickPieChartItem(item: Record<string, unknown>): void {
+    router.push(getTransactionItemLinkUrl(item['id'] as string));
+}
+
+function onClickTrendChartItem(item: { itemId: string, dateRange: TimeRangeAndDateType }): void {
+    router.push(getTransactionItemLinkUrl(item.itemId, item.dateRange));
+}
+
+function onShowDateRangeError(message: string): void {
+    snackbar.value?.showError(message);
+}
+
+onBeforeRouteUpdate((to) => {
+    if (to.query) {
+        init({
+            initAnalysisType: to.query['analysisType'],
+            initChartDataType: to.query['chartDataType'],
+            initChartType: to.query['chartType'],
+            initChartDateType: to.query['chartDateType'],
+            initStartTime: to.query['startTime'],
+            initEndTime: to.query['endTime'],
+            initFilterAccountIds: to.query['filterAccountIds'],
+            initFilterCategoryIds: to.query['filterCategoryIds'],
+            initTagIds: to.query['tagIds'],
+            initTagFilterType: to.query['tagFilterType'],
+            initSortingType: to.query['sortingType'],
+            initTrendDateAggregationType: to.query['trendDateAggregationType']
+        });
+    } else {
+        init({});
+    }
+});
+
+watch(() => display.mdAndUp.value, (newValue) => {
+    alwaysShowNav.value = newValue;
+
+    if (!showNav.value) {
+        showNav.value = newValue;
+    }
+});
+
+init(props);
 </script>
 
 <style>
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index 615681ae..42ebbfb5 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -1,7 +1,7 @@
 <template>
     <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
             <f7-nav-title>
                 <f7-link popover-open=".chart-data-type-popover-menu">
                     <span>{{ queryChartDataTypeName }}</span>
@@ -18,38 +18,38 @@
                     @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers>
                 <f7-list-group>
-                    <f7-list-item group-title :title="$t('Categorical Analysis')" />
-                    <f7-list-item :title="$t(dataType.name)"
-                                  :class="{ 'list-item-selected': analysisType === allAnalysisTypes.CategoricalAnalysis && query.chartDataType === dataType.type }"
+                    <f7-list-item group-title :title="tt('Categorical Analysis')" />
+                    <f7-list-item :title="tt(dataType.name)"
+                                  :class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type }"
                                   :key="dataType.type"
-                                  v-for="dataType in allChartDataTypes"
-                                  v-show="dataType.isAvailableAnalysisType(allAnalysisTypes.CategoricalAnalysis)"
-                                  @click="setChartDataType(allAnalysisTypes.CategoricalAnalysis, dataType.type)">
+                                  v-for="dataType in ChartDataType.all()"
+                                  v-show="dataType.isAvailableAnalysisType(StatisticsAnalysisType.CategoricalAnalysis)"
+                                  @click="setChartDataType(StatisticsAnalysisType.CategoricalAnalysis, dataType.type)">
                         <template #after>
-                            <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === allAnalysisTypes.CategoricalAnalysis && query.chartDataType === dataType.type"></f7-icon>
+                            <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.chartDataType === dataType.type"></f7-icon>
                         </template>
                     </f7-list-item>
                 </f7-list-group>
                 <f7-list-group>
-                    <f7-list-item group-title :title="$t('Trend Analysis')" />
-                    <f7-list-item :title="$t(dataType.name)"
-                                  :class="{ 'list-item-selected': analysisType === allAnalysisTypes.TrendAnalysis && query.chartDataType === dataType.type }"
+                    <f7-list-item group-title :title="tt('Trend Analysis')" />
+                    <f7-list-item :title="tt(dataType.name)"
+                                  :class="{ 'list-item-selected': analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type }"
                                   :key="dataType.type"
-                                  v-for="dataType in allChartDataTypes"
-                                  v-show="dataType.isAvailableAnalysisType(allAnalysisTypes.TrendAnalysis)"
-                                  @click="setChartDataType(allAnalysisTypes.TrendAnalysis, dataType.type)">
+                                  v-for="dataType in ChartDataType.all()"
+                                  v-show="dataType.isAvailableAnalysisType(StatisticsAnalysisType.TrendAnalysis)"
+                                  @click="setChartDataType(StatisticsAnalysisType.TrendAnalysis, dataType.type)">
                         <template #after>
-                            <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === allAnalysisTypes.TrendAnalysis && query.chartDataType === dataType.type"></f7-icon>
+                            <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="analysisType === StatisticsAnalysisType.TrendAnalysis && query.chartDataType === dataType.type"></f7-icon>
                         </template>
                     </f7-list-item>
                 </f7-list-group>
             </f7-list>
         </f7-popover>
 
-        <f7-card v-if="analysisType === allAnalysisTypes.CategoricalAnalysis && query.categoricalChartType === allCategoricalChartTypes.Pie.type">
+        <f7-card v-if="analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.categoricalChartType === CategoricalChartType.Pie.type">
             <f7-card-header class="no-border display-block">
                 <div class="statistics-chart-header full-line text-align-right">
-                    <span style="margin-right: 4px;">{{ $t('Sort by') }}</span>
+                    <span style="margin-right: 4px;">{{ tt('Sort by') }}</span>
                     <f7-link href="#" popover-open=".sorting-type-popover-menu">{{ querySortingTypeName }}</f7-link>
                 </div>
             </f7-card-header>
@@ -80,7 +80,7 @@
                     percent-field="percent"
                     hidden-field="hidden"
                     v-else-if="!loading"
-                    @click="clickPieChartItem"
+                    @click="onClickPieChartItem"
                 >
                     <text class="statistics-pie-chart-total-amount-title" v-if="categoricalAnalysisData.items && categoricalAnalysisData.items.length">
                         {{ totalAmountName }}
@@ -89,25 +89,25 @@
                         {{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency, 16) }}
                     </text>
                     <text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!categoricalAnalysisData.items || !categoricalAnalysisData.items.length">
-                        {{ $t('No data') }}
+                        {{ tt('No data') }}
                     </text>
                 </pie-chart>
             </f7-card-content>
         </f7-card>
 
-        <f7-card v-else-if="analysisType === allAnalysisTypes.CategoricalAnalysis && query.categoricalChartType === allCategoricalChartTypes.Bar.type">
+        <f7-card v-else-if="analysisType === StatisticsAnalysisType.CategoricalAnalysis && query.categoricalChartType === CategoricalChartType.Bar.type">
             <f7-card-header class="no-border display-block">
                 <div class="statistics-chart-header display-flex full-line justify-content-space-between">
                     <div>
                         {{ totalAmountName }}
                     </div>
                     <div class="align-self-flex-end">
-                        <span style="margin-right: 4px;">{{ $t('Sort by') }}</span>
+                        <span style="margin-right: 4px;">{{ tt('Sort by') }}</span>
                         <f7-link href="#" popover-open=".sorting-type-popover-menu">{{ querySortingTypeName }}</f7-link>
                     </div>
                 </div>
                 <div class="display-flex full-line">
-                    <div :class="{ 'statistics-list-item-overview-amount': true, 'text-expense': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-income': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
+                    <div :class="{ 'statistics-list-item-overview-amount': true, 'text-expense': query.chartDataType === ChartDataType.ExpenseByAccount.type || query.chartDataType === ChartDataType.ExpenseByPrimaryCategory.type || query.chartDataType === ChartDataType.ExpenseBySecondaryCategory.type, 'text-income': query.chartDataType === ChartDataType.IncomeByAccount.type || query.chartDataType === ChartDataType.IncomeByPrimaryCategory.type || query.chartDataType === ChartDataType.IncomeBySecondaryCategory.type }">
                         <span v-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
                             {{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency) }}
                         </span>
@@ -147,7 +147,7 @@
                 </f7-list>
 
                 <f7-list v-else-if="!loading && (!categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length)">
-                    <f7-list-item :title="$t('No transaction data')"></f7-list-item>
+                    <f7-list-item :title="tt('No transaction data')"></f7-list-item>
                 </f7-list>
 
                 <f7-list v-else-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
@@ -169,12 +169,12 @@
                         <template #title>
                             <div class="statistics-list-item-text">
                                 <span>{{ item.name }}</span>
-                                <small class="statistics-percent" v-if="item.percent >= 0">{{ getDisplayPercent(item.percent, 2, '&lt;0.01') }}</small>
+                                <small class="statistics-percent" v-if="item.percent >= 0">{{ formatPercent(item.percent, 2, '&lt;0.01') }}</small>
                             </div>
                         </template>
 
                         <template #after>
-                            <span>{{ getDisplayAmount(item.totalAmount, (item.currency || defaultCurrency)) }}</span>
+                            <span>{{ getDisplayAmount(item.totalAmount, defaultCurrency) }}</span>
                         </template>
 
                         <template #inner-end>
@@ -189,12 +189,12 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-card v-else-if="analysisType === allAnalysisTypes.TrendAnalysis">
+        <f7-card v-else-if="analysisType === StatisticsAnalysisType.TrendAnalysis">
             <f7-card-header class="no-border display-block">
                 <div class="statistics-chart-header display-flex full-line justify-content-space-between">
                     <div></div>
                     <div class="align-self-flex-end">
-                        <span style="margin-right: 4px;">{{ $t('Sort by') }}</span>
+                        <span style="margin-right: 4px;">{{ tt('Sort by') }}</span>
                         <f7-link href="#" popover-open=".sorting-type-popover-menu">{{ querySortingTypeName }}</f7-link>
                     </div>
                 </div>
@@ -214,7 +214,7 @@
                     value-field="totalAmount"
                     hidden-field="hidden"
                     display-orders-field="displayOrders"
-                    @click="clickTrendChartItem"
+                    @click="onClickTrendChartItem"
                 />
             </f7-card-content>
         </f7-card>
@@ -235,18 +235,18 @@
         </f7-popover>
 
         <f7-toolbar tabbar bottom class="toolbar-item-auto-size">
-            <f7-link :class="{ 'disabled': reloading || !canShiftDateRange(query) }" @click="shiftDateRange(query, -1)">
+            <f7-link :class="{ 'disabled': reloading || !canShiftDateRange }" @click="shiftDateRange(-1)">
                 <f7-icon f7="arrow_left_square"></f7-icon>
             </f7-link>
-            <f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': reloading || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" popover-open=".date-popover-menu">
-                <span :class="{ 'tabbar-item-changed': query.maxTime > 0 || query.minTime > 0 }">{{ dateRangeName(query) }}</span>
+            <f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': reloading || query.chartDataType === ChartDataType.AccountTotalAssets.type || query.chartDataType === ChartDataType.AccountTotalLiabilities.type }" popover-open=".date-popover-menu">
+                <span :class="{ 'tabbar-item-changed': isQueryDateRangeChanged }">{{ queryDateRangeName }}</span>
             </f7-link>
-            <f7-link :class="{ 'disabled': reloading || !canShiftDateRange(query) }" @click="shiftDateRange(query, 1)">
+            <f7-link :class="{ 'disabled': reloading || !canShiftDateRange }" @click="shiftDateRange(1)">
                 <f7-icon f7="arrow_right_square"></f7-icon>
             </f7-link>
             <f7-link :class="{ 'tabbar-text-with-ellipsis': true, 'disabled': reloading }" popover-open=".date-aggregation-popover-menu"
-                     v-if="analysisType === allAnalysisTypes.TrendAnalysis">
-                <span :class="{ 'tabbar-item-changed': trendDateAggregationType !== defaultTrendDateAggregationType }">{{ queryTrendDateAggregationTypeName }}</span>
+                     v-if="analysisType === StatisticsAnalysisType.TrendAnalysis">
+                <span :class="{ 'tabbar-item-changed': trendDateAggregationType !== ChartDateAggregationType.Default.type }">{{ queryTrendDateAggregationTypeName }}</span>
             </f7-link>
             <f7-link class="tabbar-text-with-ellipsis" :key="chartType.type"
                      v-for="chartType in allChartTypes" @click="setChartType(chartType.type)">
@@ -261,13 +261,13 @@
                 <f7-list-item :title="dateRange.displayName"
                               :class="{ 'list-item-selected': queryDateType === dateRange.type }"
                               :key="dateRange.type"
-                              v-for="dateRange in allDateRangesArray"
+                              v-for="dateRange in allDateRanges"
                               @click="setDateFilter(dateRange.type)">
                     <template #after>
                         <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 === allDateRanges.Custom.type && showCustomDateRange()">
+                        <div v-if="dateRange.type === DateRange.Custom.type && showCustomDateRange">
                             <span>{{ queryStartTime }}</span>
                             <span>&nbsp;-&nbsp;</span>
                             <br/>
@@ -294,14 +294,14 @@
             </f7-list>
         </f7-popover>
 
-        <date-range-selection-sheet :title="$t('Custom Date Range')"
+        <date-range-selection-sheet :title="tt('Custom Date Range')"
                                     :min-time="query.categoricalChartStartTime"
                                     :max-time="query.categoricalChartEndTime"
                                     v-model:show="showCustomDateRangeSheet"
                                     @dateRange:change="setCustomDateFilter">
         </date-range-selection-sheet>
 
-        <month-range-selection-sheet :title="$t('Custom Date Range')"
+        <month-range-selection-sheet :title="tt('Custom Date Range')"
                                      :min-time="query.trendChartStartYearMonth"
                                      :max-time="query.trendChartEndYearMonth"
                                      v-model:show="showCustomMonthRangeSheet"
@@ -310,29 +310,33 @@
 
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
-                <f7-actions-button @click="filterAccounts">{{ $t('Filter Accounts') }}</f7-actions-button>
-                <f7-actions-button @click="filterCategories">{{ $t('Filter Transaction Categories') }}</f7-actions-button>
-                <f7-actions-button @click="filterTags">{{ $t('Filter Transaction Tags') }}</f7-actions-button>
+                <f7-actions-button @click="filterAccounts">{{ tt('Filter Accounts') }}</f7-actions-button>
+                <f7-actions-button @click="filterCategories">{{ tt('Filter Transaction Categories') }}</f7-actions-button>
+                <f7-actions-button @click="filterTags">{{ tt('Filter Transaction Tags') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button @click="settings">{{ $t('Settings') }}</f7-actions-button>
+                <f7-actions-button @click="settings">{{ tt('Settings') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
-                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+                <f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
             </f7-actions-group>
         </f7-actions>
     </f7-page>
 </template>
 
-<script>
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
-import { useUserStore } from '@/stores/user.ts';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { Router } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useStatisticsTransactionPageBase } from '@/views/base/statistics/StatisticsTransactionPageBase.ts';
+
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
 
-import { DateRangeScene, DateRange } from '@/core/datetime.ts';
+import type { TypeAndDisplayName } from '@/core/base.ts';
+import { type TimeRangeAndDateType, DateRangeScene, DateRange } from '@/core/datetime.ts';
 import {
     StatisticsAnalysisType,
     CategoricalChartType,
@@ -340,7 +344,8 @@ import {
     ChartSortingType,
     ChartDateAggregationType
 } from '@/core/statistics.ts';
-import { getNameByKeyValue, limitText } from '@/lib/common.ts';
+
+import { isString, isNumber } from '@/lib/common.ts';
 import { formatPercent } from '@/lib/numeral.ts';
 import {
     getYearAndMonthFromUnixTime,
@@ -350,511 +355,374 @@ import {
     getDateTypeByDateRange,
     getDateRangeByDateType
 } from '@/lib/datetime.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { type Framework7Dom, useI18nUIComponents, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
-export default {
-    props: [
-        'f7router'
-    ],
-    data() {
-        return {
-            loading: true,
-            loadingError: null,
-            reloading: false,
-            analysisType: StatisticsAnalysisType.CategoricalAnalysis,
-            trendDateAggregationType: ChartDateAggregationType.Default.type,
-            showChartDataTypePopover: false,
-            showSortingTypePopover: false,
-            showDatePopover: false,
-            showDateAggregationPopover: false,
-            showCustomDateRangeSheet: false,
-            showCustomMonthRangeSheet: false,
-            showMoreActionSheet: false
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useStatisticsStore),
-        defaultCurrency() {
-            return this.userStore.currentUserDefaultCurrency;
-        },
-        defaultTrendDateAggregationType() {
-            return ChartDateAggregationType.Default.type;
-        },
-        firstDayOfWeek() {
-            return this.userStore.currentUserFirstDayOfWeek;
-        },
-        query() {
-            return this.statisticsStore.transactionStatisticsFilter;
-        },
-        queryChartDataCategory() {
-            return this.statisticsStore.categoricalAnalysisChartDataCategory;
-        },
-        queryChartType: {
-            get: function () {
-                if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                    return this.query.categoricalChartType;
-                } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                    return this.query.trendChartType;
-                } else {
-                    return null;
-                }
-            },
-            set: function(value) {
-                this.setChartType(value);
-            }
-        },
-        queryChartDataTypeName() {
-            const queryChartDataTypeName = getNameByKeyValue(ChartDataType.values(), this.query.chartDataType, 'type', 'name', 'Statistics');
-            return this.$t(queryChartDataTypeName);
-        },
-        querySortingTypeName() {
-            const querySortingTypeName = getNameByKeyValue(ChartSortingType.values(), this.query.sortingType, 'type', 'name', 'System Default');
-            return this.$t(querySortingTypeName);
-        },
-        queryDateType() {
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.query.categoricalChartDateType;
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.query.trendChartDateType;
-            } else {
-                return null;
-            }
-        },
-        queryTrendDateAggregationTypeName() {
-            return getNameByKeyValue(this.allDateAggregationTypes, this.trendDateAggregationType, 'type', 'displayName', '');
-        },
-        queryStartTime() {
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartStartTime);
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthFirstUnixTime(this.query.trendChartStartYearMonth));
-            } else {
-                return '';
-            }
-        },
-        queryEndTime() {
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartEndTime);
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthLastUnixTime(this.query.trendChartEndYearMonth));
-            } else {
-                return '';
-            }
-        },
-        allAnalysisTypes() {
-            return StatisticsAnalysisType;
-        },
-        allChartTypes() {
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.getAllCategoricalChartTypes();
-            } else {
-                return [];
-            }
-        },
-        allCategoricalChartTypes() {
-            return CategoricalChartType.all();
-        },
-        allChartDataTypes() {
-            return ChartDataType.all();
-        },
-        allSortingTypes() {
-            return this.$locale.getAllStatisticsSortingTypes();
-        },
-        allDateAggregationTypes() {
-            return this.$locale.getAllStatisticsDateAggregationTypes();
-        },
-        allDateRanges() {
-            return DateRange.all();
-        },
-        allDateRangesArray() {
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.getAllDateRanges(DateRangeScene.Normal, true);
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.getAllDateRanges(DateRangeScene.TrendAnalysis, true);
-            } else {
-                return [];
-            }
-        },
-        showAccountBalance() {
-            return this.settingsStore.appSettings.showAccountBalance;
-        },
-        totalAmountName() {
-            if (this.query.chartDataType === ChartDataType.IncomeByAccount.type
-                || this.query.chartDataType === ChartDataType.IncomeByPrimaryCategory.type
-                || this.query.chartDataType === ChartDataType.IncomeBySecondaryCategory.type) {
-                return this.$t('Total Income');
-            } else if (this.query.chartDataType === ChartDataType.ExpenseByAccount.type
-                || this.query.chartDataType === ChartDataType.ExpenseByPrimaryCategory.type
-                || this.query.chartDataType === ChartDataType.ExpenseBySecondaryCategory.type) {
-                return this.$t('Total Expense');
-            } else if (this.query.chartDataType === ChartDataType.AccountTotalAssets.type) {
-                return this.$t('Total Assets');
-            } else if (this.query.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
-                return this.$t('Total Liabilities');
-            }
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
 
-            return this.$t('Total Amount');
-        },
-        categoricalAnalysisData() {
-            return this.statisticsStore.categoricalAnalysisData;
-        },
-        trendsAnalysisData() {
-            return this.statisticsStore.trendsAnalysisData;
-        },
-        translateNameInTrendsChart() {
-            return this.query.chartDataType === ChartDataType.TotalExpense.type ||
-                this.query.chartDataType === ChartDataType.TotalIncome.type ||
-                this.query.chartDataType === ChartDataType.TotalBalance.type;
-        },
-        showAmountInChart() {
-            if (!this.showAccountBalance
-                && (this.query.chartDataType === ChartDataType.AccountTotalAssets.type || this.query.chartDataType === ChartDataType.AccountTotalLiabilities.type)) {
-                return false;
-            }
+const { tt, getAllCategoricalChartTypes } = useI18n();
+const { showToast, routeBackOnError } = useI18nUIComponents();
 
-            return true;
+const {
+    loading,
+    analysisType,
+    trendDateAggregationType,
+    defaultCurrency,
+    firstDayOfWeek,
+    allDateRanges,
+    allSortingTypes,
+    allDateAggregationTypes,
+    query,
+    queryChartDataCategory,
+    queryDateType,
+    queryStartTime,
+    queryEndTime,
+    queryDateRangeName,
+    queryChartDataTypeName,
+    querySortingTypeName,
+    queryTrendDateAggregationTypeName,
+    isQueryDateRangeChanged,
+    canShiftDateRange,
+    showCustomDateRange,
+    showAmountInChart,
+    totalAmountName,
+    translateNameInTrendsChart,
+    categoricalAnalysisData,
+    trendsAnalysisData,
+    getDisplayAmount
+} = useStatisticsTransactionPageBase();
+
+const accountsStore = useAccountsStore();
+const transactionCategoriesStore = useTransactionCategoriesStore();
+const statisticsStore = useStatisticsStore();
+
+const loadingError = ref<unknown | null>(null);
+const reloading = ref<boolean>(false);
+const showChartDataTypePopover = ref<boolean>(false);
+const showSortingTypePopover = ref<boolean>(false);
+const showDatePopover = ref<boolean>(false);
+const showDateAggregationPopover = ref<boolean>(false);
+const showCustomDateRangeSheet = ref<boolean>(false);
+const showCustomMonthRangeSheet = ref<boolean>(false);
+const showMoreActionSheet = ref<boolean>(false);
+
+const allChartTypes = computed<TypeAndDisplayName[]>(() => {
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        return getAllCategoricalChartTypes();
+    } else {
+        return [];
+    }
+});
+
+const queryChartType = computed<number | undefined>({
+    get: () => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return query.value.categoricalChartType;
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return query.value.trendChartType;
+        } else {
+            return undefined;
         }
     },
-    created() {
-        const self = this;
+    set: (value: number | undefined) => {
+        setChartType(value);
+    }
+});
 
-        self.statisticsStore.initTransactionStatisticsFilter(self.analysisType);
+function getTransactionItemLinkUrl(itemId: string, dateRange?: TimeRangeAndDateType): string {
+    return `/transaction/list?${statisticsStore.getTransactionListPageParams(analysisType.value, itemId, dateRange)}`;
+}
 
-        Promise.all([
-            self.accountsStore.loadAllAccounts({ force: false }),
-            self.transactionCategoriesStore.loadAllCategories({ force: false })
-        ]).then(() => {
-            if (self.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return self.statisticsStore.loadCategoricalAnalysis({
-                    force: false
-                });
-            } else if (self.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return self.statisticsStore.loadTrendAnalysis({
-                    force: false
-                });
+function init(): void {
+    statisticsStore.initTransactionStatisticsFilter(analysisType.value);
+
+    Promise.all([
+        accountsStore.loadAllAccounts({ force: false }),
+        transactionCategoriesStore.loadAllCategories({ force: false })
+    ]).then(() => {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            return statisticsStore.loadCategoricalAnalysis({
+                force: false
+            }) as Promise<unknown>;
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            return statisticsStore.loadTrendAnalysis({
+                force: false
+            }) as Promise<unknown>;
+        } else {
+            return Promise.reject('An error occurred');
+        }
+    }).then(() => {
+        loading.value = false;
+    }).catch(error => {
+        if (error.processed) {
+            loading.value = false;
+        } else {
+            loadingError.value = error;
+            showToast(error.message || error);
+        }
+    });
+}
+
+function reload(done?: () => void): void {
+    const force = !!done;
+    let dispatchPromise: Promise<unknown> | null = null;
+
+    reloading.value = true;
+
+    if (query.value.chartDataType === ChartDataType.ExpenseByAccount.type ||
+        query.value.chartDataType === ChartDataType.ExpenseByPrimaryCategory.type ||
+        query.value.chartDataType === ChartDataType.ExpenseBySecondaryCategory.type ||
+        query.value.chartDataType === ChartDataType.IncomeByAccount.type ||
+        query.value.chartDataType === ChartDataType.IncomeByPrimaryCategory.type ||
+        query.value.chartDataType === ChartDataType.IncomeBySecondaryCategory.type ||
+        query.value.chartDataType === ChartDataType.TotalExpense.type ||
+        query.value.chartDataType === ChartDataType.TotalIncome.type ||
+        query.value.chartDataType === ChartDataType.TotalBalance.type) {
+        if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+            dispatchPromise = statisticsStore.loadCategoricalAnalysis({
+                force: force
+            });
+        } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+            dispatchPromise = statisticsStore.loadTrendAnalysis({
+                force: force
+            });
+        }
+    } else if (query.value.chartDataType === ChartDataType.AccountTotalAssets.type ||
+        query.value.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
+        dispatchPromise = accountsStore.loadAllAccounts({
+            force: force
+        });
+    }
+
+    if (dispatchPromise) {
+        dispatchPromise.then(() => {
+            reloading.value = false;
+
+            done?.();
+
+            if (force) {
+                showToast('Data has been updated');
             }
-        }).then(() => {
-            self.loading = false;
         }).catch(error => {
-            if (error.processed) {
-                self.loading = false;
-            } else {
-                self.loadingError = error;
-                self.$toast(error.message || error);
+            reloading.value = false;
+
+            done?.();
+
+            if (!error.processed) {
+                showToast(error.message || error);
             }
         });
-    },
-    methods: {
-        onPageAfterIn() {
-            if (this.statisticsStore.transactionStatisticsStateInvalid && !this.loading) {
-                this.reload(null);
-            }
+    } else {
+        reloading.value = false;
+    }
+}
 
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        reload(done) {
-            const self = this;
-            const force = !!done;
-            let dispatchPromise = null;
+function setChartType(type?: number): void {
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        statisticsStore.updateTransactionStatisticsFilter({
+            categoricalChartType: type
+        });
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        statisticsStore.updateTransactionStatisticsFilter({
+            trendChartType: type
+        });
+    }
+}
 
-            self.reloading = true;
+function setChartDataType(type: number, chartDataType: number): void {
+    let analysisTypeChanged = false;
 
-            if (self.query.chartDataType === ChartDataType.ExpenseByAccount.type ||
-                self.query.chartDataType === ChartDataType.ExpenseByPrimaryCategory.type ||
-                self.query.chartDataType === ChartDataType.ExpenseBySecondaryCategory.type ||
-                self.query.chartDataType === ChartDataType.IncomeByAccount.type ||
-                self.query.chartDataType === ChartDataType.IncomeByPrimaryCategory.type ||
-                self.query.chartDataType === ChartDataType.IncomeBySecondaryCategory.type ||
-                self.query.chartDataType === ChartDataType.TotalExpense.type ||
-                self.query.chartDataType === ChartDataType.TotalIncome.type ||
-                self.query.chartDataType === ChartDataType.TotalBalance.type) {
-                if (self.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                    dispatchPromise = self.statisticsStore.loadCategoricalAnalysis({
-                        force: force
-                    });
-                } else if (self.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                    dispatchPromise = self.statisticsStore.loadTrendAnalysis({
-                        force: force
-                    });
-                }
-            } else if (self.query.chartDataType === ChartDataType.AccountTotalAssets.type ||
-                self.query.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
-                dispatchPromise = self.accountsStore.loadAllAccounts({
-                    force: force
-                });
-            }
-
-            if (dispatchPromise) {
-                dispatchPromise.then(() => {
-                    self.reloading = false;
-
-                    if (done) {
-                        done();
-                    }
-
-                    if (force) {
-                        self.$toast('Data has been updated');
-                    }
-                }).catch(error => {
-                    self.reloading = false;
-
-                    if (done) {
-                        done();
-                    }
-
-                    if (!error.processed) {
-                        self.$toast(error.message || error);
-                    }
-                });
-            } else {
-                self.reloading = false;
-            }
-        },
-        setChartType(chartType) {
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                this.statisticsStore.updateTransactionStatisticsFilter({
-                    categoricalChartType: chartType
-                });
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                this.statisticsStore.updateTransactionStatisticsFilter({
-                    trendChartType: chartType
-                });
-            }
-        },
-        setChartDataType(analysisType, chartDataType) {
-            let analysisTypeChanged = false;
-
-            if (this.analysisType !== analysisType) {
-                if (!ChartDataType.isAvailableForAnalysisType(this.queryChartDataType, analysisType)) {
-                    this.statisticsStore.updateTransactionStatisticsFilter({
-                        chartDataType: ChartDataType.Default.type
-                    });
-                }
-
-                this.analysisType = analysisType;
-                this.statisticsStore.updateTransactionStatisticsInvalidState(true);
-                analysisTypeChanged = true;
-            }
-
-            this.statisticsStore.updateTransactionStatisticsFilter({
-                chartDataType: chartDataType
+    if (analysisType.value !== type) {
+        if (!ChartDataType.isAvailableForAnalysisType(query.value.chartDataType, type)) {
+            statisticsStore.updateTransactionStatisticsFilter({
+                chartDataType: ChartDataType.Default.type
             });
+        }
 
-            this.showChartDataTypePopover = false;
+        analysisType.value = type;
+        statisticsStore.updateTransactionStatisticsInvalidState(true);
+        analysisTypeChanged = true;
+    }
 
-            if (analysisTypeChanged) {
-                this.reload(null);
-            }
-        },
-        setSortingType(sortingType) {
-            if (sortingType < ChartSortingType.Amount.type || sortingType > ChartSortingType.Name.type) {
-                this.showSortingTypePopover = false;
-                return;
-            }
+    statisticsStore.updateTransactionStatisticsFilter({
+        chartDataType: chartDataType
+    });
 
-            this.statisticsStore.updateTransactionStatisticsFilter({
-                sortingType: sortingType
-            });
+    showChartDataTypePopover.value = false;
 
-            this.showSortingTypePopover = false;
-        },
-        setTrendDateAggregationType(aggregationType) {
-            this.trendDateAggregationType = aggregationType;
-            this.showDateAggregationPopover = false;
-        },
-        setDateFilter(dateType) {
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                if (dateType === this.allDateRanges.Custom.type) { // Custom
-                    this.showCustomDateRangeSheet = true;
-                    this.showDatePopover = false;
-                    return;
-                } else if (this.query.categoricalChartDateType === dateType) {
-                    return;
-                }
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                if (dateType === this.allDateRanges.Custom.type) { // Custom
-                    this.showCustomMonthRangeSheet = true;
-                    this.showDatePopover = false;
-                    return;
-                } else if (this.query.trendChartDateType === dateType) {
-                    return;
-                }
-            }
+    if (analysisTypeChanged) {
+        reload();
+    }
+}
 
-            const dateRange = getDateRangeByDateType(dateType, this.firstDayOfWeek);
+function setSortingType(type: number): void {
+    if (type < ChartSortingType.Amount.type || type > ChartSortingType.Name.type) {
+        showSortingTypePopover.value = false;
+        return;
+    }
 
-            if (!dateRange) {
-                return;
-            }
+    statisticsStore.updateTransactionStatisticsFilter({
+        sortingType: type
+    });
 
-            let changed = false;
+    showSortingTypePopover.value = false;
+}
 
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    categoricalChartDateType: dateRange.dateType,
-                    categoricalChartStartTime: dateRange.minTime,
-                    categoricalChartEndTime: dateRange.maxTime
-                });
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    trendChartDateType: dateRange.dateType,
-                    trendChartStartYearMonth: getYearAndMonthFromUnixTime(dateRange.minTime),
-                    trendChartEndYearMonth: getYearAndMonthFromUnixTime(dateRange.maxTime)
-                });
-            }
+function setTrendDateAggregationType(type: number): void {
+    trendDateAggregationType.value = type;
+    showDateAggregationPopover.value = false;
+}
 
-            this.showDatePopover = false;
-
-            if (changed) {
-                this.reload(null);
-            }
-        },
-        setCustomDateFilter(startTime, endTime) {
-            if (!startTime || !endTime) {
-                return;
-            }
-
-            let changed = false;
-
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                const chartDateType = getDateTypeByDateRange(startTime, endTime, this.firstDayOfWeek, DateRangeScene.Normal);
-
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    categoricalChartDateType: chartDateType,
-                    categoricalChartStartTime: startTime,
-                    categoricalChartEndTime: endTime
-                });
-
-                this.showCustomDateRangeSheet = false;
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                const chartDateType = getDateTypeByDateRange(getYearMonthFirstUnixTime(startTime), getYearMonthLastUnixTime(endTime), this.firstDayOfWeek, DateRangeScene.TrendAnalysis);
-
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    trendChartDateType: chartDateType,
-                    trendChartStartYearMonth: startTime,
-                    trendChartEndYearMonth: endTime
-                });
-
-                this.showCustomMonthRangeSheet = false;
-            }
-
-            if (changed) {
-                this.reload(null);
-            }
-        },
-        showCustomDateRange() {
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.query.categoricalChartDateType === this.allDateRanges.Custom.type && this.query.categoricalChartStartTime && this.query.categoricalChartEndTime;
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.query.trendChartDateType === this.allDateRanges.Custom.type && this.query.trendChartStartYearMonth && this.query.trendChartEndYearMonth;
-            } else {
-                return false;
-            }
-        },
-        canShiftDateRange(query) {
-            if (query.chartDataType === ChartDataType.AccountTotalAssets.type || query.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
-                return false;
-            }
-
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return query.categoricalChartDateType !== this.allDateRanges.All.type;
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return query.trendChartDateType !== this.allDateRanges.All.type;
-            } else {
-                return false;
-            }
-        },
-        shiftDateRange(query, scale) {
-            if (this.query.categoricalChartDateType === this.allDateRanges.All.type) {
-                return;
-            }
-
-            let changed = false;
-
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                const newDateRange = getShiftedDateRangeAndDateType(query.categoricalChartStartTime, query.categoricalChartEndTime, scale, this.firstDayOfWeek, DateRangeScene.Normal);
-
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    categoricalChartDateType: newDateRange.dateType,
-                    categoricalChartStartTime: newDateRange.minTime,
-                    categoricalChartEndTime: newDateRange.maxTime
-                });
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                const newDateRange = getShiftedDateRangeAndDateType(getYearMonthFirstUnixTime(query.trendChartStartYearMonth), getYearMonthLastUnixTime(query.trendChartEndYearMonth), scale, this.firstDayOfWeek, DateRangeScene.TrendAnalysis);
-
-                changed = this.statisticsStore.updateTransactionStatisticsFilter({
-                    trendChartDateType: newDateRange.dateType,
-                    trendChartStartYearMonth: getYearAndMonthFromUnixTime(newDateRange.minTime),
-                    trendChartEndYearMonth: getYearAndMonthFromUnixTime(newDateRange.maxTime)
-                });
-            }
-
-            if (changed) {
-                this.reload(null);
-            }
-        },
-        dateRangeName(query) {
-            if (this.query.chartDataType === ChartDataType.AccountTotalAssets.type ||
-                this.query.chartDataType === ChartDataType.AccountTotalLiabilities.type) {
-                return this.$t(this.allDateRanges.All.name);
-            }
-
-            if (this.analysisType === StatisticsAnalysisType.CategoricalAnalysis) {
-                return this.$locale.getDateRangeDisplayName(this.userStore, query.categoricalChartDateType, query.categoricalChartStartTime, query.categoricalChartEndTime);
-            } else if (this.analysisType === StatisticsAnalysisType.TrendAnalysis) {
-                return this.$locale.getDateRangeDisplayName(this.userStore, query.trendChartDateType, getYearMonthFirstUnixTime(query.trendChartStartYearMonth), getYearMonthLastUnixTime(query.trendChartEndYearMonth));
-            } else {
-                return '';
-            }
-        },
-        clickPieChartItem(item) {
-            this.f7router.navigate(this.getTransactionItemLinkUrl(item.id));
-        },
-        clickTrendChartItem(item) {
-            this.f7router.navigate(this.getTransactionItemLinkUrl(item.itemId, item.dateRange));
-        },
-        filterAccounts() {
-            this.f7router.navigate('/settings/filter/account?type=statisticsCurrent');
-        },
-        filterCategories() {
-            this.f7router.navigate('/settings/filter/category?type=statisticsCurrent');
-        },
-        filterTags() {
-            this.f7router.navigate('/settings/filter/tag?type=statisticsCurrent');
-        },
-        settings() {
-            this.f7router.navigate('/statistic/settings');
-        },
-        scrollPopoverToSelectedItem(event) {
-            scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected');
-        },
-        getDisplayAmount(amount, currency, textLimit) {
-            amount = this.getDisplayCurrency(amount, currency);
-
-            if (!this.showAccountBalance
-                && (this.query.chartDataType === ChartDataType.AccountTotalAssets.type
-                    || this.query.chartDataType === ChartDataType.AccountTotalLiabilities.type)
-            ) {
-                return '***';
-            }
-
-            if (textLimit) {
-                return limitText(amount, textLimit);
-            }
-
-            return amount;
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
-        },
-        getDisplayPercent(value, precision, lowPrecisionValue) {
-            return formatPercent(value, precision, lowPrecisionValue);
-        },
-        getTransactionItemLinkUrl(itemId, dateRange) {
-            return `/transaction/list?${this.statisticsStore.getTransactionListPageParams(this.analysisType, itemId, dateRange)}`;
+function setDateFilter(dateType: number): void {
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        if (dateType === DateRange.Custom.type) { // Custom
+            showCustomDateRangeSheet.value = true;
+            showDatePopover.value = false;
+            return;
+        } else if (query.value.categoricalChartDateType === dateType) {
+            return;
+        }
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        if (dateType === DateRange.Custom.type) { // Custom
+            showCustomMonthRangeSheet.value = true;
+            showDatePopover.value = false;
+            return;
+        } else if (query.value.trendChartDateType === dateType) {
+            return;
         }
     }
-};
+
+    const dateRange = getDateRangeByDateType(dateType, firstDayOfWeek.value);
+
+    if (!dateRange) {
+        return;
+    }
+
+    let changed = false;
+
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            categoricalChartDateType: dateRange.dateType,
+            categoricalChartStartTime: dateRange.minTime,
+            categoricalChartEndTime: dateRange.maxTime
+        });
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            trendChartDateType: dateRange.dateType,
+            trendChartStartYearMonth: getYearAndMonthFromUnixTime(dateRange.minTime),
+            trendChartEndYearMonth: getYearAndMonthFromUnixTime(dateRange.maxTime)
+        });
+    }
+
+    showDatePopover.value = false;
+
+    if (changed) {
+        reload();
+    }
+}
+
+function setCustomDateFilter(startTime: number | string, endTime: number | string): void {
+    if (!startTime || !endTime) {
+        return;
+    }
+
+    let changed = false;
+
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis && isNumber(startTime) && isNumber(endTime)) {
+        const chartDateType = getDateTypeByDateRange(startTime, endTime, firstDayOfWeek.value, DateRangeScene.Normal);
+
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            categoricalChartDateType: chartDateType,
+            categoricalChartStartTime: startTime,
+            categoricalChartEndTime: endTime
+        });
+
+        showCustomDateRangeSheet.value = false;
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis && isString(startTime) && isString(endTime)) {
+        const chartDateType = getDateTypeByDateRange(getYearMonthFirstUnixTime(startTime), getYearMonthLastUnixTime(endTime), firstDayOfWeek.value, DateRangeScene.TrendAnalysis);
+
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            trendChartDateType: chartDateType,
+            trendChartStartYearMonth: startTime,
+            trendChartEndYearMonth: endTime
+        });
+
+        showCustomMonthRangeSheet.value = false;
+    }
+
+    if (changed) {
+        reload();
+    }
+}
+
+function shiftDateRange(scale: number): void {
+    if (query.value.categoricalChartDateType === DateRange.All.type) {
+        return;
+    }
+
+    let changed = false;
+
+    if (analysisType.value === StatisticsAnalysisType.CategoricalAnalysis) {
+        const newDateRange = getShiftedDateRangeAndDateType(query.value.categoricalChartStartTime, query.value.categoricalChartEndTime, scale, firstDayOfWeek.value, DateRangeScene.Normal);
+
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            categoricalChartDateType: newDateRange.dateType,
+            categoricalChartStartTime: newDateRange.minTime,
+            categoricalChartEndTime: newDateRange.maxTime
+        });
+    } else if (analysisType.value === StatisticsAnalysisType.TrendAnalysis) {
+        const newDateRange = getShiftedDateRangeAndDateType(getYearMonthFirstUnixTime(query.value.trendChartStartYearMonth), getYearMonthLastUnixTime(query.value.trendChartEndYearMonth), scale, firstDayOfWeek.value, DateRangeScene.TrendAnalysis);
+
+        changed = statisticsStore.updateTransactionStatisticsFilter({
+            trendChartDateType: newDateRange.dateType,
+            trendChartStartYearMonth: getYearAndMonthFromUnixTime(newDateRange.minTime),
+            trendChartEndYearMonth: getYearAndMonthFromUnixTime(newDateRange.maxTime)
+        });
+    }
+
+    if (changed) {
+        reload();
+    }
+}
+
+function filterAccounts(): void {
+    props.f7router.navigate('/settings/filter/account?type=statisticsCurrent');
+}
+
+function filterCategories(): void {
+    props.f7router.navigate('/settings/filter/category?type=statisticsCurrent');
+}
+
+function filterTags(): void {
+    props.f7router.navigate('/settings/filter/tag?type=statisticsCurrent');
+}
+
+function settings(): void {
+    props.f7router.navigate('/statistic/settings');
+}
+
+function scrollPopoverToSelectedItem(event: { $el: Framework7Dom }): void {
+    scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected');
+}
+
+function onClickPieChartItem(item: Record<string, unknown>): void {
+    props.f7router.navigate(getTransactionItemLinkUrl(item['id'] as string));
+}
+
+function onClickTrendChartItem(item: { itemId: string, dateRange: TimeRangeAndDateType }): void {
+    props.f7router.navigate(getTransactionItemLinkUrl(item.itemId, item.dateRange));
+}
+
+function onPageAfterIn(): void {
+    if (statisticsStore.transactionStatisticsStateInvalid && !loading.value) {
+        reload();
+    }
+
+    routeBackOnError(props.f7router, loadingError);
+}
+
+init();
 </script>
 
 <style>