migrate statistics setting page to composition API and typescript

src/core/datetime.ts

@@ -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;

src/core/numeral.ts

@@ -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> = {};

src/locales/helpers.ts

@@ -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

src/views/base/statistics/StatisticsSettingPageBase.ts

@@ -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
+    };
+}

src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue

@@ -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')"
+                                    :label="tt('Default Chart Data Type')"
-                                    :placeholder="$t('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')"
+                                    :label="tt('Timezone Used for Date Range')"
-                                    :placeholder="$t('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')"
+                                    :label="tt('Default Sort Order')"
-                                    :placeholder="$t('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')"
+                                    :label="tt('Default Chart Type')"
-                                    :placeholder="$t('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')"
+                                    :label="tt('Default Date Range')"
-                                    :placeholder="$t('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')"
+                                    :label="tt('Default Chart Type')"
-                                    :placeholder="$t('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')"
+                                    :label="tt('Default Date Range')"
-                                    :placeholder="$t('Default Date Range')"
+                                    :placeholder="tt('Default Date Range')"
                                     :items="allTrendChartDateRanges"
                                     v-model="defaultTrendChartDateRange"
                                 />
@@ -124,101 +124,29 @@
     </v-row>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
-
-import { DateRangeScene } from '@/core/datetime.ts';
-import { StatisticsAnalysisType } from '@/core/statistics.ts';
-
 import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
 import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
 
-export default {
+import { useI18n } from '@/locales/helpers.ts';
-    components: {
+import { useStatisticsSettingPageBase } from '@/views/base/statistics/StatisticsSettingPageBase.ts';
-        AccountFilterSettingsCard,
+
-        CategoryFilterSettingsCard
+const { tt } = useI18n();
-    },
+const {
-    computed: {
+    allChartDataTypes,
-        ...mapStores(useSettingsStore),
+    allTimezoneTypesUsedForStatistics,
-        allChartDataTypes() {
+    allSortingTypes,
-            return this.$locale.getAllStatisticsChartDataTypes(StatisticsAnalysisType.CategoricalAnalysis);
+    allCategoricalChartTypes,
-        },
+    allCategoricalChartDateRanges,
-        allTimezoneTypesUsedForStatistics() {
+    allTrendChartTypes,
-            return this.$locale.getAllTimezoneTypesUsedForStatistics();
+    allTrendChartDateRanges,
-        },
+    defaultChartDataType,
-        allSortingTypes() {
+    defaultTimezoneType,
-            return this.$locale.getAllStatisticsSortingTypes();
+    defaultSortingType,
-        },
+    defaultCategoricalChartType,
-        allCategoricalChartTypes() {
+    defaultCategoricalChartDateRange,
-            return this.$locale.getAllCategoricalChartTypes();
+    defaultTrendChartType,
-        },
+    defaultTrendChartDateRange
-        allCategoricalChartDateRanges() {
+} = useStatisticsSettingPageBase();
-            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);
-            }
-        },
-    }
-};
 </script>
 

src/views/mobile/statistics/SettingsPage.vue

@@ -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')"
+                :title="tt('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') }">
+                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')"
+                :title="tt('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') }">
+                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')"
+                :title="tt('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') }">
+                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')"
+                :title="tt('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') }">
+                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')"
+                :title="tt('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') }">
+                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')"
+                :title="tt('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') }">
+                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>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import { useI18n } from '@/locales/helpers.ts';
-import { useSettingsStore } from '@/stores/setting.ts';
+import { useStatisticsSettingPageBase } from '@/views/base/statistics/StatisticsSettingPageBase.ts';
 
-import { DateRangeScene } from '@/core/datetime.ts';
+const { tt } = useI18n();
-import { StatisticsAnalysisType } from '@/core/statistics.ts';
+const {
-
+    allChartDataTypes,
-export default {
+    allTimezoneTypesUsedForStatistics,
-    computed: {
+    allSortingTypes,
-        ...mapStores(useSettingsStore),
+    allCategoricalChartTypes,
-        allChartDataTypes() {
+    allCategoricalChartDateRanges,
-            return this.$locale.getAllStatisticsChartDataTypes(StatisticsAnalysisType.CategoricalAnalysis);
+    allTrendChartDateRanges,
-        },
+    defaultChartDataType,
-        allTimezoneTypesUsedForStatistics() {
+    defaultTimezoneType,
-            return this.$locale.getAllTimezoneTypesUsedForStatistics();
+    defaultSortingType,
-        },
+    defaultCategoricalChartType,
-        allSortingTypes() {
+    defaultCategoricalChartDateRange,
-            return this.$locale.getAllStatisticsSortingTypes();
+    defaultTrendChartDateRange
-        },
+} = useStatisticsSettingPageBase();
-        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);
-            }
-        },
-    }
-};
 </script>