migrate statistics setting page to composition API and typescript

2026-05-14 06:57:35 +08:00 · 2025-01-12 11:48:14 +08:00
parent c3265c5bf6
commit 1414f54a12
6 changed files with 425 additions and 247 deletions
@@ -1,4 +1,4 @@
-import type { TypeAndName } from '@/core/base.ts';
+import type { TypeAndName, TypeAndDisplayName } from '@/core/base.ts';

 export interface YearQuarter {
    readonly year: number;
@@ -57,6 +57,17 @@ export interface PresetDateRange {
    readonly value: Date[];
 }

+export interface LocalizedMeridiemIndicator {
+    readonly values: string[];
+    readonly displayValues: string[];
+}
+
+export interface LocalizedDateRange extends TypeAndDisplayName {
+    readonly type: number;
+    readonly displayName: string;
+    readonly isBillingCycle?: boolean;
+}
+
 export interface LocalizedRecentMonthDateRange {
    readonly dateType: number;
    readonly minTime: number;
@@ -67,11 +78,6 @@ export interface LocalizedRecentMonthDateRange {
    readonly displayName: string;
 }

-export interface LocalizedMeridiemIndicator {
-    readonly values: string[];
-    readonly displayValues: string[];
-}
-
 export class YearUnixTime implements UnixTimeRange {
    public readonly year: number;
    public readonly minUnixTime: number;
@@ -1,4 +1,4 @@
-import type { TypeAndName } from '@/core/base.ts';
+import type { TypeAndName, TypeAndDisplayName } from '@/core/base.ts';

 export interface NumberFormatOptions {
    digitGrouping?: number;
@@ -8,7 +8,25 @@ export interface NumberFormatOptions {
    trimTailZero?: boolean;
 }

-export class DecimalSeparator implements TypeAndName {
+export interface NumeralSymbolType {
+    readonly type: number;
+    readonly name: string;
+    readonly symbol: string;
+}
+
+export interface LocalizedNumeralSymbolType extends TypeAndDisplayName {
+    readonly type: number;
+    readonly symbol: string;
+    readonly displayName: string;
+}
+
+export interface LocalizedDigitGroupingType extends TypeAndDisplayName {
+    readonly type: number;
+    readonly enabled: boolean;
+    readonly displayName: string;
+}
+
+export class DecimalSeparator implements TypeAndName, NumeralSymbolType {
    private static readonly allInstances: DecimalSeparator[] = [];
    private static readonly allInstancesByType: Record<number, DecimalSeparator> = {};
    private static readonly allInstancesByTypeName: Record<string, DecimalSeparator> = {};
@@ -47,7 +65,7 @@ export class DecimalSeparator implements TypeAndName {
    }
 }

-export class DigitGroupingSymbol implements TypeAndName {
+export class DigitGroupingSymbol implements TypeAndName, NumeralSymbolType {
    private static readonly allInstances: DigitGroupingSymbol[] = [];
    private static readonly allInstancesByType: Record<number, DigitGroupingSymbol> = {};
    private static readonly allInstancesByTypeName: Record<string, DigitGroupingSymbol> = {};
@@ -6,20 +6,31 @@ import type { TypeAndName, TypeAndDisplayName } from '@/core/base.ts';
 import { type LanguageInfo, allLanguages, DEFAULT_LANGUAGE } from '@/locales/index.ts';

 import {
-    type LocalizedMeridiemIndicator,
    type DateFormat,
    type TimeFormat,
+    type LocalizedMeridiemIndicator,
+    type LocalizedDateRange,
+    type LocalizedRecentMonthDateRange,
    Month,
    WeekDay,
    MeridiemIndicator,
    LongDateFormat,
    ShortDateFormat,
    LongTimeFormat,
-    ShortTimeFormat
+    ShortTimeFormat,
+    DateRange,
+    DateRangeScene
 } from '@/core/datetime.ts';

+import {
+    TimezoneTypeForStatistics
+} from '@/core/timezone.ts';
+
 import {
    type NumberFormatOptions,
+    type NumeralSymbolType,
+    type LocalizedNumeralSymbolType,
+    type LocalizedDigitGroupingType,
    DecimalSeparator,
    DigitGroupingSymbol,
    DigitGroupingType
@@ -27,7 +38,8 @@ import {

 import {
    type CurrencyPrependAndAppendText,
-    CurrencyDisplayType
+    CurrencyDisplayType,
+    CurrencySortingType
 } from '@/core/currency.ts';

 import {
@@ -71,7 +83,8 @@ import {
    isPM,
    formatUnixTime,
    getTimezoneOffset,
-    getDateTimeFormatType
+    getDateTimeFormatType,
+    getRecentMonthDateRanges
 } from '@/lib/datetime.ts';

 import {
@@ -84,7 +97,8 @@ import {

 import {
    getCurrencyFraction,
-    getAmountPrependAndAppendCurrencySymbol, appendCurrencySymbol
+    appendCurrencySymbol,
+    getAmountPrependAndAppendCurrencySymbol
 } from '@/lib/currency.ts';

 import services from '@/lib/services.ts';
@@ -265,6 +279,40 @@ export function useI18n() {
        return localizedParameters;
    }

+    function getAllCurrencyDisplayTypes(): TypeAndDisplayName[] {
+        const defaultCurrencyDisplayTypeName = t('default.currencyDisplayType');
+        let defaultCurrencyDisplayType = CurrencyDisplayType.parse(defaultCurrencyDisplayTypeName);
+
+        if (!defaultCurrencyDisplayType) {
+            defaultCurrencyDisplayType = CurrencyDisplayType.Default;
+        }
+
+        const defaultCurrency = userStore.currentUserDefaultCurrency;
+
+        const ret = [];
+        const defaultSampleValue = getFormattedAmountWithCurrency(12345, defaultCurrency, false, defaultCurrencyDisplayType);
+
+        ret.push({
+            type: CurrencyDisplayType.LanguageDefaultType,
+            displayName: `${t('Language Default')} (${defaultSampleValue})`
+        });
+
+        const allCurrencyDisplayTypes = CurrencyDisplayType.values();
+
+        for (let i = 0; i < allCurrencyDisplayTypes.length; i++) {
+            const type = allCurrencyDisplayTypes[i];
+            const sampleValue = getFormattedAmountWithCurrency(12345, defaultCurrency, false, type);
+            const displayName = `${t(type.name)} (${sampleValue})`
+
+            ret.push({
+                type: type.type,
+                displayName: displayName
+            });
+        }
+
+        return ret;
+    }
+
    function getLocalizedDisplayNameAndType(typeAndNames: TypeAndName[]): TypeAndDisplayName[] {
        const ret: TypeAndDisplayName[] = [];

@@ -280,6 +328,34 @@ export function useI18n() {
        return ret;
    }

+    function getLocalizedNumeralSeparatorFormats<T extends NumeralSymbolType>(allSeparatorArray: T[], localeDefaultType: T, systemDefaultType: T, languageDefaultValue: number): LocalizedNumeralSymbolType[] {
+        let defaultSeparatorType: T = localeDefaultType;
+
+        if (!defaultSeparatorType) {
+            defaultSeparatorType = systemDefaultType;
+        }
+
+        const ret: LocalizedNumeralSymbolType[] = [];
+
+        ret.push({
+            type: languageDefaultValue,
+            symbol: defaultSeparatorType.symbol,
+            displayName: `${t('Language Default')} (${defaultSeparatorType.symbol})`
+        });
+
+        for (let i = 0; i < allSeparatorArray.length; i++) {
+            const type = allSeparatorArray[i];
+
+            ret.push({
+                type: type.type,
+                symbol: type.symbol,
+                displayName: `${t('numeral.' + type.name)} (${type.symbol})`
+            });
+        }
+
+        return ret;
+    }
+
    function getAllMonthNames(type: string): string[] {
        const ret = [];
        const allMonths = Month.values();
@@ -362,6 +438,20 @@ export function useI18n() {
        };
    }

+    function getCurrencyUnitName(currencyCode: string, isPlural: boolean): string {
+        const currencyInfo = ALL_CURRENCIES[currencyCode];
+
+        if (currencyInfo && currencyInfo.unit) {
+            if (isPlural) {
+                return t(`currency.unit.${currencyInfo.unit}.plural`);
+            } else {
+                return t(`currency.unit.${currencyInfo.unit}.normal`);
+            }
+        }
+
+        return '';
+    }
+
    function getCurrentCurrencyDisplayType(): CurrencyDisplayType {
        let currencyDisplayType = CurrencyDisplayType.valueOf(userStore.currentUserCurrencyDisplayType);

@@ -440,24 +530,6 @@ export function useI18n() {
        return t('default.firstDayOfWeek');
    }

-    function getCurrencyName(currencyCode: string): string {
-        return t(`currency.name.${currencyCode}`);
-    }
-
-    function getCurrencyUnitName(currencyCode: string, isPlural: boolean): string {
-        const currencyInfo = ALL_CURRENCIES[currencyCode];
-
-        if (currencyInfo && currencyInfo.unit) {
-            if (isPlural) {
-                return t(`currency.unit.${currencyInfo.unit}.plural`);
-            } else {
-                return t(`currency.unit.${currencyInfo.unit}.normal`);
-            }
-        }
-
-        return '';
-    }
-
    function getAllMeridiemIndicators(): LocalizedMeridiemIndicator {
        const allMeridiemIndicators = MeridiemIndicator.values();
        const meridiemIndicatorNames = [];
@@ -525,6 +597,125 @@ export function useI18n() {
        return ret;
    }

+    function getAllDateRanges(scene: DateRangeScene, includeCustom?: boolean, includeBillingCycle?: boolean): LocalizedDateRange[] {
+        const ret: LocalizedDateRange[] = [];
+        const allDateRanges = DateRange.values();
+
+        for (let i = 0; i < allDateRanges.length; i++) {
+            const dateRange = allDateRanges[i];
+
+            if (!dateRange.isAvailableForScene(scene)) {
+                continue;
+            }
+
+            if (dateRange.isBillingCycle) {
+                if (includeBillingCycle) {
+                    ret.push({
+                        type: dateRange.type,
+                        displayName: t(dateRange.name),
+                        isBillingCycle: dateRange.isBillingCycle
+                    });
+                }
+
+                continue;
+            }
+
+            if (includeCustom || dateRange.type !== DateRange.Custom.type) {
+                ret.push({
+                    type: dateRange.type,
+                    displayName: t(dateRange.name)
+                });
+            }
+        }
+
+        return ret;
+    }
+
+    function getAllRecentMonthDateRanges(includeAll: boolean, includeCustom: boolean): LocalizedRecentMonthDateRange[] {
+        const allRecentMonthDateRanges: LocalizedRecentMonthDateRange[] = [];
+        const recentDateRanges = getRecentMonthDateRanges(12);
+
+        if (includeAll) {
+            allRecentMonthDateRanges.push({
+                dateType: DateRange.All.type,
+                minTime: 0,
+                maxTime: 0,
+                displayName: t('All')
+            });
+        }
+
+        for (let i = 0; i < recentDateRanges.length; i++) {
+            const recentDateRange = recentDateRanges[i];
+
+            allRecentMonthDateRanges.push({
+                dateType: recentDateRange.dateType,
+                minTime: recentDateRange.minTime,
+                maxTime: recentDateRange.maxTime,
+                year: recentDateRange.year,
+                month: recentDateRange.month,
+                isPreset: true,
+                displayName: formatUnixTime(recentDateRange.minTime, getLocalizedLongYearMonthFormat())
+            });
+        }
+
+        if (includeCustom) {
+            allRecentMonthDateRanges.push({
+                dateType: DateRange.Custom.type,
+                minTime: 0,
+                maxTime: 0,
+                displayName: t('Custom Date')
+            });
+        }
+
+        return allRecentMonthDateRanges;
+    }
+
+    function getAllTimezoneTypesUsedForStatistics(currentTimezone?: string): TypeAndDisplayName[] {
+        const currentTimezoneOffset = getTimezoneOffset(currentTimezone);
+
+        return [
+            {
+                type: TimezoneTypeForStatistics.ApplicationTimezone.type,
+                displayName: t(TimezoneTypeForStatistics.ApplicationTimezone.name) + ` (UTC${currentTimezoneOffset})`
+            },
+            {
+                type: TimezoneTypeForStatistics.TransactionTimezone.type,
+                displayName: t(TimezoneTypeForStatistics.TransactionTimezone.name)
+            }
+        ];
+    }
+
+    function getAllDigitGroupingTypes(): LocalizedDigitGroupingType[] {
+        const defaultDigitGroupingTypeName = t('default.digitGrouping');
+        let defaultDigitGroupingType = DigitGroupingType.parse(defaultDigitGroupingTypeName);
+
+        if (!defaultDigitGroupingType) {
+            defaultDigitGroupingType = DigitGroupingType.Default;
+        }
+
+        const ret: LocalizedDigitGroupingType[] = [];
+
+        ret.push({
+            type: DigitGroupingType.LanguageDefaultType,
+            enabled: defaultDigitGroupingType.enabled,
+            displayName: `${t('Language Default')} (${t('numeral.' + defaultDigitGroupingType.name)})`
+        });
+
+        const allDigitGroupingTypes = DigitGroupingType.values();
+
+        for (let i = 0; i < allDigitGroupingTypes.length; i++) {
+            const type = allDigitGroupingTypes[i];
+
+            ret.push({
+                type: type.type,
+                enabled: type.enabled,
+                displayName: t('numeral.' + type.name)
+            });
+        }
+
+        return ret;
+    }
+
    function getAllAccountCategories(): LocalizedAccountCategory[] {
        const ret: LocalizedAccountCategory[] = [];
        const allCategories = AccountCategory.values();
@@ -657,6 +848,10 @@ export function useI18n() {
        return digitGroupingType.type;
    }

+    function getCurrencyName(currencyCode: string): string {
+        return t(`currency.name.${currencyCode}`);
+    }
+
    function isLongDateMonthAfterYear() {
        return getLocalizedDateTimeType(LongDateFormat.all(), LongDateFormat.values(), userStore.currentUserLongDateFormat, 'longDateFormat', LongDateFormat.Default).isMonthAfterYear;
    }
@@ -850,16 +1045,19 @@ export function useI18n() {
    }

    return {
+        // common functions
        tt: t,
        ti: translateIf,
        te: translateError,
        joinMultiText,
+        // get current language info
        getCurrentLanguageTag,
        getCurrentLanguageInfo,
        getCurrentLanguageDisplayName,
+        // get localization default type
        getDefaultCurrency,
        getDefaultFirstDayOfWeek,
-        getCurrencyName,
+        // get all localized info of specified type
        getAllMeridiemIndicators,
        getAllLongMonthNames,
        getAllShortMonthNames,
@@ -867,7 +1065,15 @@ export function useI18n() {
        getAllShortWeekdayNames,
        getAllMinWeekdayNames,
        getAllWeekDays,
-        getAllAccountCategories: () => getAllAccountCategories(),
+        getAllDateRanges,
+        getAllRecentMonthDateRanges,
+        getAllTimezoneTypesUsedForStatistics,
+        getAllDecimalSeparators: () => getLocalizedNumeralSeparatorFormats(DecimalSeparator.values(), DecimalSeparator.parse(t('default.decimalSeparator')), DecimalSeparator.Default, DecimalSeparator.LanguageDefaultType),
+        getAllDigitGroupingSymbols: () => getLocalizedNumeralSeparatorFormats(DigitGroupingSymbol.values(), DigitGroupingSymbol.parse(t('default.digitGroupingSymbol')), DigitGroupingSymbol.Default, DigitGroupingSymbol.LanguageDefaultType),
+        getAllDigitGroupingTypes,
+        getAllCurrencyDisplayTypes,
+        getAllCurrencySortingTypes: () => getLocalizedDisplayNameAndType(CurrencySortingType.values()),
+        getAllAccountCategories,
        getAllAccountTypes: () => getLocalizedDisplayNameAndType(AccountType.values()),
        getAllCategoricalChartTypes: () => getLocalizedDisplayNameAndType(CategoricalChartType.values()),
        getAllTrendChartTypes: () => getLocalizedDisplayNameAndType(TrendChartType.values()),
@@ -877,6 +1083,7 @@ export function useI18n() {
        getAllTransactionEditScopeTypes: () => getLocalizedDisplayNameAndType(TransactionEditScopeType.values()),
        getAllTransactionTagFilterTypes: () => getLocalizedDisplayNameAndType(TransactionTagFilterType.values()),
        getAllTransactionScheduledFrequencyTypes: () => getLocalizedDisplayNameAndType(ScheduledTemplateFrequencyType.values()),
+        // get localized info
        getMonthShortName,
        getMonthLongName,
        getMonthdayOrdinal,
@@ -888,12 +1095,14 @@ export function useI18n() {
        getCurrentDecimalSeparator,
        getCurrentDigitGroupingSymbol,
        getCurrentDigitGroupingType,
+        getCurrencyName,
        isLongDateMonthAfterYear,
        isShortDateMonthAfterYear,
        isLongTime24HourFormat,
        isLongTimeMeridiemIndicatorFirst,
        isShortTime24HourFormat,
        isShortTimeMeridiemIndicatorFirst,
+        // format functions
        formatUnixTimeToLongDateTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongDateFormat() + ' ' + getLocalizedLongTimeFormat(), utcOffset, currentUtcOffset),
        formatUnixTimeToShortDateTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortDateFormat() + ' ' + getLocalizedShortTimeFormat(), utcOffset, currentUtcOffset),
        formatUnixTimeToLongDate: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongDateFormat(), utcOffset, currentUtcOffset),
@@ -914,6 +1123,7 @@ export function useI18n() {
        formatExchangeRateAmount: getFormattedExchangeRateAmount,
        getAdaptiveAmountRate,
        getAmountPrependAndAppendText,
+        // localization setting functions
        setLanguage,
        setTimeZone,
        initLocale
@@ -0,0 +1,83 @@
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+
+import type { TypeAndDisplayName } from '@/core/base.ts';
+import { type LocalizedDateRange, DateRangeScene } from '@/core/datetime.ts';
+import { StatisticsAnalysisType } from '@/core/statistics.ts';
+
+export function useStatisticsSettingPageBase() {
+    const {
+        getAllDateRanges,
+        getAllTimezoneTypesUsedForStatistics,
+        getAllCategoricalChartTypes,
+        getAllTrendChartTypes,
+        getAllStatisticsChartDataTypes,
+        getAllStatisticsSortingTypes
+    } = useI18n();
+
+    const settingsStore = useSettingsStore();
+
+    const allChartDataTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsChartDataTypes(StatisticsAnalysisType.CategoricalAnalysis));
+    const allTimezoneTypesUsedForStatistics = computed<TypeAndDisplayName[]>(() => getAllTimezoneTypesUsedForStatistics());
+    const allSortingTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsSortingTypes());
+    const allCategoricalChartTypes = computed<TypeAndDisplayName[]>(() => getAllCategoricalChartTypes());
+    const allCategoricalChartDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.Normal, false));
+    const allTrendChartTypes = computed<LocalizedDateRange[]>(() => getAllTrendChartTypes());
+    const allTrendChartDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.TrendAnalysis, false));
+
+    const defaultChartDataType = computed<number>({
+        get: () => settingsStore.appSettings.statistics.defaultChartDataType,
+        set: (value: number) => settingsStore.setStatisticsDefaultChartDataType(value)
+    });
+
+    const defaultTimezoneType = computed<number>({
+        get: () => settingsStore.appSettings.statistics.defaultTimezoneType,
+        set: (value: number) => settingsStore.setStatisticsDefaultTimezoneType(value)
+    });
+
+    const defaultSortingType = computed<number>({
+        get: () => settingsStore.appSettings.statistics.defaultSortingType,
+        set: (value: number) => settingsStore.setStatisticsSortingType(value)
+    });
+
+    const defaultCategoricalChartType = computed<number>({
+        get: () => settingsStore.appSettings.statistics.defaultCategoricalChartType,
+        set: (value: number) => settingsStore.setStatisticsDefaultCategoricalChartType(value)
+    });
+
+    const defaultCategoricalChartDateRange = computed<number>({
+        get: () => settingsStore.appSettings.statistics.defaultCategoricalChartDataRangeType,
+        set: (value: number) => settingsStore.setStatisticsDefaultCategoricalChartDateRange(value)
+    });
+
+    const defaultTrendChartType = computed<number>({
+        get: () => settingsStore.appSettings.statistics.defaultTrendChartType,
+        set: (value: number) => settingsStore.setStatisticsDefaultTrendChartType(value)
+    });
+
+    const defaultTrendChartDateRange = computed<number>({
+        get: () => settingsStore.appSettings.statistics.defaultTrendChartDataRangeType,
+        set: (value: number) => settingsStore.setStatisticsDefaultTrendChartDateRange(value)
+    });
+
+    return {
+        // computed states
+        allChartDataTypes,
+        allTimezoneTypesUsedForStatistics,
+        allSortingTypes,
+        allCategoricalChartTypes,
+        allCategoricalChartDateRanges,
+        allTrendChartTypes,
+        allTrendChartDateRanges,
+        defaultChartDataType,
+        defaultTimezoneType,
+        defaultSortingType,
+        defaultCategoricalChartType,
+        defaultCategoricalChartDateRange,
+        defaultTrendChartType,
+        defaultTrendChartDateRange
+    };
+}
@@ -1,7 +1,7 @@
 <template>
    <v-row>
        <v-col cols="12">
-            <v-card :title="$t('Statistics Settings')">
+            <v-card :title="tt('Statistics Settings')">
                <v-form>
                    <v-card-text>
                        <v-row>
@@ -10,8 +10,8 @@
                                    item-title="displayName"
                                    item-value="type"
                                    persistent-placeholder
-                                    :label="$t('Default Chart Data Type')"
-                                    :placeholder="$t('Default Chart Data Type')"
+                                    :label="tt('Default Chart Data Type')"
+                                    :placeholder="tt('Default Chart Data Type')"
                                    :items="allChartDataTypes"
                                    v-model="defaultChartDataType"
                                />
@@ -22,8 +22,8 @@
                                    item-title="displayName"
                                    item-value="type"
                                    persistent-placeholder
-                                    :label="$t('Timezone Used for Date Range')"
-                                    :placeholder="$t('Timezone Used for Date Range')"
+                                    :label="tt('Timezone Used for Date Range')"
+                                    :placeholder="tt('Timezone Used for Date Range')"
                                    :items="allTimezoneTypesUsedForStatistics"
                                    v-model="defaultTimezoneType"
                                />
@@ -34,8 +34,8 @@
                                    item-title="displayName"
                                    item-value="type"
                                    persistent-placeholder
-                                    :label="$t('Default Sort Order')"
-                                    :placeholder="$t('Default Sort Order')"
+                                    :label="tt('Default Sort Order')"
+                                    :placeholder="tt('Default Sort Order')"
                                    :items="allSortingTypes"
                                    v-model="defaultSortingType"
                                />
@@ -47,7 +47,7 @@
        </v-col>

        <v-col cols="12">
-            <v-card :title="$t('Categorical Analysis Settings')">
+            <v-card :title="tt('Categorical Analysis Settings')">
                <v-form>
                    <v-card-text>
                        <v-row>
@@ -56,8 +56,8 @@
                                    item-title="displayName"
                                    item-value="type"
                                    persistent-placeholder
-                                    :label="$t('Default Chart Type')"
-                                    :placeholder="$t('Default Chart Type')"
+                                    :label="tt('Default Chart Type')"
+                                    :placeholder="tt('Default Chart Type')"
                                    :items="allCategoricalChartTypes"
                                    v-model="defaultCategoricalChartType"
                                />
@@ -68,8 +68,8 @@
                                    item-title="displayName"
                                    item-value="type"
                                    persistent-placeholder
-                                    :label="$t('Default Date Range')"
-                                    :placeholder="$t('Default Date Range')"
+                                    :label="tt('Default Date Range')"
+                                    :placeholder="tt('Default Date Range')"
                                    :items="allCategoricalChartDateRanges"
                                    v-model="defaultCategoricalChartDateRange"
                                />
@@ -81,7 +81,7 @@
        </v-col>

        <v-col cols="12">
-            <v-card :title="$t('Trend Analysis Settings')">
+            <v-card :title="tt('Trend Analysis Settings')">
                <v-form>
                    <v-card-text>
                        <v-row>
@@ -90,8 +90,8 @@
                                    item-title="displayName"
                                    item-value="type"
                                    persistent-placeholder
-                                    :label="$t('Default Chart Type')"
-                                    :placeholder="$t('Default Chart Type')"
+                                    :label="tt('Default Chart Type')"
+                                    :placeholder="tt('Default Chart Type')"
                                    :items="allTrendChartTypes"
                                    v-model="defaultTrendChartType"
                                />
@@ -102,8 +102,8 @@
                                    item-title="displayName"
                                    item-value="type"
                                    persistent-placeholder
-                                    :label="$t('Default Date Range')"
-                                    :placeholder="$t('Default Date Range')"
+                                    :label="tt('Default Date Range')"
+                                    :placeholder="tt('Default Date Range')"
                                    :items="allTrendChartDateRanges"
                                    v-model="defaultTrendChartDateRange"
                                />
@@ -124,101 +124,29 @@
    </v-row>
 </template>

-<script>
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
-
-import { DateRangeScene } from '@/core/datetime.ts';
-import { StatisticsAnalysisType } from '@/core/statistics.ts';
-
+<script setup lang="ts">
 import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
 import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';

-export default {
-    components: {
-        AccountFilterSettingsCard,
-        CategoryFilterSettingsCard
-    },
-    computed: {
-        ...mapStores(useSettingsStore),
-        allChartDataTypes() {
-            return this.$locale.getAllStatisticsChartDataTypes(StatisticsAnalysisType.CategoricalAnalysis);
-        },
-        allTimezoneTypesUsedForStatistics() {
-            return this.$locale.getAllTimezoneTypesUsedForStatistics();
-        },
-        allSortingTypes() {
-            return this.$locale.getAllStatisticsSortingTypes();
-        },
-        allCategoricalChartTypes() {
-            return this.$locale.getAllCategoricalChartTypes();
-        },
-        allCategoricalChartDateRanges() {
-            return this.$locale.getAllDateRanges(DateRangeScene.Normal, false);
-        },
-        allTrendChartTypes() {
-            return this.$locale.getAllTrendChartTypes();
-        },
-        allTrendChartDateRanges() {
-            return this.$locale.getAllDateRanges(DateRangeScene.TrendAnalysis, false);
-        },
-        defaultChartDataType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultChartDataType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultChartDataType(value);
-            }
-        },
-        defaultTimezoneType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTimezoneType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTimezoneType(value);
-            }
-        },
-        defaultSortingType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultSortingType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsSortingType(value);
-            }
-        },
-        defaultCategoricalChartType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultCategoricalChartType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultCategoricalChartType(value);
-            }
-        },
-        defaultCategoricalChartDateRange: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultCategoricalChartDataRangeType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultCategoricalChartDateRange(value);
-            }
-        },
-        defaultTrendChartType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTrendChartType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTrendChartType(value);
-            }
-        },
-        defaultTrendChartDateRange: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTrendChartDataRangeType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTrendChartDateRange(value);
-            }
-        },
-    }
-};
+import { useI18n } from '@/locales/helpers.ts';
+import { useStatisticsSettingPageBase } from '@/views/base/statistics/StatisticsSettingPageBase.ts';
+
+const { tt } = useI18n();
+const {
+    allChartDataTypes,
+    allTimezoneTypesUsedForStatistics,
+    allSortingTypes,
+    allCategoricalChartTypes,
+    allCategoricalChartDateRanges,
+    allTrendChartTypes,
+    allTrendChartDateRanges,
+    defaultChartDataType,
+    defaultTimezoneType,
+    defaultSortingType,
+    defaultCategoricalChartType,
+    defaultCategoricalChartDateRange,
+    defaultTrendChartType,
+    defaultTrendChartDateRange
+} = useStatisticsSettingPageBase();
 </script>

@@ -1,12 +1,12 @@
 <template>
    <f7-page>
-        <f7-navbar :title="$t('Statistics Settings')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar :title="tt('Statistics Settings')" :back-link="tt('Back')"></f7-navbar>

-        <f7-block-title class="margin-top">{{ $t('Common Settings') }}</f7-block-title>
+        <f7-block-title class="margin-top">{{ tt('Common Settings') }}</f7-block-title>
        <f7-list strong inset dividers>
            <f7-list-item
-                :title="$t('Default Chart Data Type')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Chart Data Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Chart Data Type')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Chart Data Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultChartDataType">
                    <option :value="chartDataType.type"
                            :key="chartDataType.type"
@@ -15,8 +15,8 @@
            </f7-list-item>

            <f7-list-item
-                :title="$t('Timezone Used for Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Timezone Used for Date Range')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultTimezoneType">
                    <option :value="timezoneType.type"
                            :key="timezoneType.type"
@@ -24,13 +24,13 @@
                </select>
            </f7-list-item>

-            <f7-list-item :title="$t('Default Account Filter')" link="/settings/filter/account?type=statisticsDefault"></f7-list-item>
+            <f7-list-item :title="tt('Default Account Filter')" link="/settings/filter/account?type=statisticsDefault"></f7-list-item>

-            <f7-list-item :title="$t('Default Transaction Category Filter')" link="/settings/filter/category?type=statisticsDefault"></f7-list-item>
+            <f7-list-item :title="tt('Default Transaction Category Filter')" link="/settings/filter/category?type=statisticsDefault"></f7-list-item>

            <f7-list-item
-                :title="$t('Default Sort Order')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Sort Order'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Sort Order')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Sort Order'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultSortingType">
                    <option :value="sortingType.type"
                            :key="sortingType.type"
@@ -39,11 +39,11 @@
            </f7-list-item>
        </f7-list>

-        <f7-block-title>{{ $t('Categorical Analysis Settings') }}</f7-block-title>
+        <f7-block-title>{{ tt('Categorical Analysis Settings') }}</f7-block-title>
        <f7-list strong inset dividers>
            <f7-list-item
-                :title="$t('Default Chart Type')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Chart Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Chart Type')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Chart Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultCategoricalChartType">
                    <option :value="chartType.type"
                            :key="chartType.type"
@@ -52,8 +52,8 @@
            </f7-list-item>

            <f7-list-item
-                :title="$t('Default Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Date Range')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultCategoricalChartDateRange">
                    <option :value="dateRange.type"
                            :key="dateRange.type"
@@ -62,11 +62,11 @@
            </f7-list-item>
        </f7-list>

-        <f7-block-title>{{ $t('Trend Analysis Settings') }}</f7-block-title>
+        <f7-block-title>{{ tt('Trend Analysis Settings') }}</f7-block-title>
        <f7-list strong inset dividers>
            <f7-list-item
-                :title="$t('Default Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Date Range')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultTrendChartDateRange">
                    <option :value="dateRange.type"
                            :key="dateRange.type"
@@ -77,90 +77,23 @@
    </f7-page>
 </template>

-<script>
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
+<script setup lang="ts">
+import { useI18n } from '@/locales/helpers.ts';
+import { useStatisticsSettingPageBase } from '@/views/base/statistics/StatisticsSettingPageBase.ts';

-import { DateRangeScene } from '@/core/datetime.ts';
-import { StatisticsAnalysisType } from '@/core/statistics.ts';
-
-export default {
-    computed: {
-        ...mapStores(useSettingsStore),
-        allChartDataTypes() {
-            return this.$locale.getAllStatisticsChartDataTypes(StatisticsAnalysisType.CategoricalAnalysis);
-        },
-        allTimezoneTypesUsedForStatistics() {
-            return this.$locale.getAllTimezoneTypesUsedForStatistics();
-        },
-        allSortingTypes() {
-            return this.$locale.getAllStatisticsSortingTypes();
-        },
-        allCategoricalChartTypes() {
-            return this.$locale.getAllCategoricalChartTypes();
-        },
-        allCategoricalChartDateRanges() {
-            return this.$locale.getAllDateRanges(DateRangeScene.Normal, false);
-        },
-        allTrendChartDateRanges() {
-            return this.$locale.getAllDateRanges(DateRangeScene.TrendAnalysis, false);
-        },
-        defaultChartDataType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultChartDataType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultChartDataType(value);
-            }
-        },
-        defaultTimezoneType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTimezoneType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTimezoneType(value);
-            }
-        },
-        defaultSortingType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultSortingType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsSortingType(value);
-            }
-        },
-        defaultCategoricalChartType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultCategoricalChartType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultCategoricalChartType(value);
-            }
-        },
-        defaultCategoricalChartDateRange: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultCategoricalChartDataRangeType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultCategoricalChartDateRange(value);
-            }
-        },
-        defaultTrendChartType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTrendChartType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTrendChartType(value);
-            }
-        },
-        defaultTrendChartDateRange: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTrendChartDataRangeType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTrendChartDateRange(value);
-            }
-        },
-    }
-};
+const { tt } = useI18n();
+const {
+    allChartDataTypes,
+    allTimezoneTypesUsedForStatistics,
+    allSortingTypes,
+    allCategoricalChartTypes,
+    allCategoricalChartDateRanges,
+    allTrendChartDateRanges,
+    defaultChartDataType,
+    defaultTimezoneType,
+    defaultSortingType,
+    defaultCategoricalChartType,
+    defaultCategoricalChartDateRange,
+    defaultTrendChartDateRange
+} = useStatisticsSettingPageBase();
 </script>