add chart date type settings for trend analysis

src/consts/datetime.js

@@ -166,54 +166,139 @@ const allShortTimeFormatArray = [
     allShortTimeFormat.HHMMA
 ];
 
+const allDateRangeScenes = {
+    Normal: 0,
+    TrendAnalysis: 1
+};
+
 const allDateRanges = {
     All: {
         type: 0,
-        name: 'All'
+        name: 'All',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true,
+            [allDateRangeScenes.TrendAnalysis]: true
+        }
     },
     Today: {
         type: 1,
-        name: 'Today'
+        name: 'Today',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     Yesterday: {
         type: 2,
-        name: 'Yesterday'
+        name: 'Yesterday',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     LastSevenDays: {
         type: 3,
-        name: 'Recent 7 days'
+        name: 'Recent 7 days',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     LastThirtyDays: {
         type: 4,
-        name: 'Recent 30 days'
+        name: 'Recent 30 days',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     ThisWeek: {
         type: 5,
-        name: 'This week'
+        name: 'This week',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     LastWeek: {
         type: 6,
-        name: 'Last week'
+        name: 'Last week',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     ThisMonth: {
         type: 7,
-        name: 'This month'
+        name: 'This month',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     LastMonth: {
         type: 8,
-        name: 'Last month'
+        name: 'Last month',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     ThisYear: {
         type: 9,
-        name: 'This year'
+        name: 'This year',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
     },
     LastYear: {
         type: 10,
-        name: 'Last year'
+        name: 'Last year',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true
+        }
+    },
+    RecentTwelveMonths: {
+        type: 101,
+        name: 'Recent 12 months',
+        availableScenes: {
+            [allDateRangeScenes.TrendAnalysis]: true
+        }
+    },
+    RecentTwentyFourMonths: {
+        type: 102,
+        name: 'Recent 24 months',
+        availableScenes: {
+            [allDateRangeScenes.TrendAnalysis]: true
+        }
+    },
+    RecentThirtySixMonths: {
+        type: 103,
+        name: 'Recent 36 months',
+        availableScenes: {
+            [allDateRangeScenes.TrendAnalysis]: true
+        }
+    },
+    RecentTwoYears: {
+        type: 104,
+        name: 'Recent 2 years',
+        availableScenes: {
+            [allDateRangeScenes.TrendAnalysis]: true
+        }
+    },
+    RecentThreeYears: {
+        type: 105,
+        name: 'Recent 3 years',
+        availableScenes: {
+            [allDateRangeScenes.TrendAnalysis]: true
+        }
+    },
+    RecentFiveYears: {
+        type: 106,
+        name: 'Recent 5 years',
+        availableScenes: {
+            [allDateRangeScenes.TrendAnalysis]: true
+        }
     },
     Custom: {
-        type: 11,
+        type: 255,
-        name: 'Custom Date'
+        name: 'Custom Date',
+        availableScenes: {
+            [allDateRangeScenes.Normal]: true,
+            [allDateRangeScenes.TrendAnalysis]: true
+        }
     }
 };
 
@@ -238,6 +323,7 @@ export default {
     allLongTimeFormatArray: allLongTimeFormatArray,
     allShortTimeFormat: allShortTimeFormat,
     allShortTimeFormatArray: allShortTimeFormatArray,
+    allDateRangeScenes: allDateRangeScenes,
     allDateRanges: allDateRanges,
     defaultFirstDayOfWeek: defaultFirstDayOfWeek,
     defaultLongDateFormat: defaultLongDateFormat,

src/consts/statistics.js

@@ -144,7 +144,8 @@ export default {
     defaultTrendChartType: defaultTrendChartType,
     allChartDataTypes: allChartDataTypes,
     defaultChartDataType: defaultChartDataType,
-    defaultDataRangeType: datetime.allDateRanges.ThisMonth.type,
+    defaultCategoricalChartDataRangeType: datetime.allDateRanges.ThisMonth.type,
+    defaultTrendChartDataRangeType: datetime.allDateRanges.RecentTwelveMonths.type,
     allSortingTypes: allSortingTypes,
     allSortingTypesArray: allSortingTypesArray,
     defaultSortingType: defaultSortingType,

src/lib/common.js

@@ -26,6 +26,20 @@ export function isBoolean(val) {
     return typeof(val) === 'boolean';
 }
 
+export function isYearMonth(val) {
+    if (typeof(val) !== 'string') {
+        return false;
+    }
+
+    const items = val.split('-');
+
+    if (items.length !== 2) {
+        return false;
+    }
+
+    return isNumber(items[0]) && isNumber(items[1]);
+}
+
 export function isEquals(obj1, obj2) {
     if (obj1 === obj2) {
         return true;

src/lib/datetime.js

@@ -298,7 +298,7 @@ export function getShiftedDateRange(minTime, maxTime, scale) {
     };
 }
 
-export function getShiftedDateRangeAndDateType(minTime, maxTime, scale, firstDayOfWeek) {
+export function getShiftedDateRangeAndDateType(minTime, maxTime, scale, firstDayOfWeek, scene) {
     const newDateRange = getShiftedDateRange(minTime, maxTime, scale);
     let newDateType = dateTimeConstants.allDateRanges.Custom.type;
 
@@ -308,6 +308,11 @@ export function getShiftedDateRangeAndDateType(minTime, maxTime, scale, firstDay
         }
 
         const dateRangeType = dateTimeConstants.allDateRanges[dateRangeField];
+
+        if (!dateRangeType.availableScenes[scene]) {
+            continue;
+        }
+
         const dateRange = getDateRangeByDateType(dateRangeType.type, firstDayOfWeek);
 
         if (dateRange && dateRange.minTime === newDateRange.minTime && dateRange.maxTime === newDateRange.maxTime) {
@@ -360,6 +365,24 @@ export function getDateRangeByDateType(dateType, firstDayOfWeek) {
     } else if (dateType === dateTimeConstants.allDateRanges.LastYear.type) { // Last year
         maxTime = getUnixTimeBeforeUnixTime(getThisYearLastUnixTime(), 1, 'years');
         minTime = getUnixTimeBeforeUnixTime(getThisYearFirstUnixTime(), 1, 'years');
+    } else if (dateType === dateTimeConstants.allDateRanges.RecentTwelveMonths.type) { // Recent 12 months
+        maxTime = getThisMonthLastUnixTime();
+        minTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 11, 'months');
+    } else if (dateType === dateTimeConstants.allDateRanges.RecentTwentyFourMonths.type) { // Recent 24 months
+        maxTime = getThisMonthLastUnixTime();
+        minTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 23, 'months');
+    } else if (dateType === dateTimeConstants.allDateRanges.RecentThirtySixMonths.type) { // Recent 36 months
+        maxTime = getThisMonthLastUnixTime();
+        minTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 35, 'months');
+    } else if (dateType === dateTimeConstants.allDateRanges.RecentTwoYears.type) { // Recent 2 years
+        maxTime = getThisYearLastUnixTime();
+        minTime = getUnixTimeBeforeUnixTime(getThisYearFirstUnixTime(), 1, 'years');
+    } else if (dateType === dateTimeConstants.allDateRanges.RecentThreeYears.type) { // Recent 3 years
+        maxTime = getThisYearLastUnixTime();
+        minTime = getUnixTimeBeforeUnixTime(getThisYearFirstUnixTime(), 2, 'years');
+    } else if (dateType === dateTimeConstants.allDateRanges.RecentFiveYears.type) { // Recent 5 years
+        maxTime = getThisYearLastUnixTime();
+        minTime = getUnixTimeBeforeUnixTime(getThisYearFirstUnixTime(), 4, 'years');
     } else {
         return null;
     }

src/lib/i18n.js

@@ -655,7 +655,7 @@ function getAllWeekDays(translateFn) {
     return allWeekDays;
 }
 
-function getAllDateRanges(includeCustom, translateFn) {
+function getAllDateRanges(scene, includeCustom, translateFn) {
     const allDateRanges = [];
 
     for (let dateRangeField in datetime.allDateRanges) {
@@ -665,6 +665,10 @@ function getAllDateRanges(includeCustom, translateFn) {
 
         const dateRangeType = datetime.allDateRanges[dateRangeField];
 
+        if (!dateRangeType.availableScenes[scene]) {
+            continue;
+        }
+
         if (includeCustom || dateRangeType.type !== datetime.allDateRanges.Custom.type) {
             allDateRanges.push({
                 type: dateRangeType.type,
@@ -1376,7 +1380,7 @@ export function i18nFunctions(i18nGlobal) {
         getTimezoneDifferenceDisplayText: (utcOffset) => getTimezoneDifferenceDisplayText(utcOffset, i18nGlobal.t),
         getAllCurrencies: () => getAllCurrencies(i18nGlobal.t),
         getAllWeekDays: () => getAllWeekDays(i18nGlobal.t),
-        getAllDateRanges: (includeCustom) => getAllDateRanges(includeCustom, i18nGlobal.t),
+        getAllDateRanges: (scene, includeCustom) => getAllDateRanges(scene, includeCustom, i18nGlobal.t),
         getAllRecentMonthDateRanges: (userStore, includeAll, includeCustom) => getAllRecentMonthDateRanges(userStore, includeAll, includeCustom, i18nGlobal.t),
         getDateRangeDisplayName: (userStore, dateType, startTime, endTime) => getDateRangeDisplayName(userStore, dateType, startTime, endTime, i18nGlobal.t),
         getAllTimezoneTypesUsedForStatistics: (currentTimezone) => getAllTimezoneTypesUsedForStatistics(currentTimezone, i18nGlobal.t),

src/lib/settings.js

@@ -22,13 +22,14 @@ const defaultSettings = {
     showAccountBalance: true,
     statistics: {
         defaultChartDataType: statisticsConstants.defaultChartDataType,
-        defaultDataRangeType: statisticsConstants.defaultDataRangeType,
         defaultTimezoneType: timezoneConstants.defaultTimezoneTypesUsedForStatistics,
         defaultAccountFilter: {},
         defaultTransactionCategoryFilter: {},
         defaultSortingType: statisticsConstants.defaultSortingType,
         defaultCategoricalChartType: statisticsConstants.defaultCategoricalChartType,
+        defaultCategoricalChartDataRangeType: statisticsConstants.defaultCategoricalChartDataRangeType,
         defaultTrendChartType: statisticsConstants.defaultTrendChartType,
+        defaultTrendChartDataRangeType: statisticsConstants.defaultTrendChartDataRangeType,
     },
     animate: true
 };
@@ -230,10 +231,6 @@ export function setStatisticsDefaultChartDataType(value) {
     setSubOption('statistics', 'defaultChartDataType', value);
 }
 
-export function getStatisticsDefaultDateRange() {
-    return getSubOption('statistics', 'defaultDataRangeType');
-}
-
 export function getStatisticsDefaultTimezoneType() {
     return getSubOption('statistics', 'defaultTimezoneType');
 }
@@ -242,10 +239,6 @@ export function setStatisticsDefaultTimezoneType(value) {
     setSubOption('statistics', 'defaultTimezoneType', value);
 }
 
-export function setStatisticsDefaultDateRange(value) {
-    setSubOption('statistics', 'defaultDataRangeType', value);
-}
-
 export function getStatisticsDefaultAccountFilter() {
     return getSubOption('statistics', 'defaultAccountFilter');
 }
@@ -278,6 +271,14 @@ export function setStatisticsDefaultCategoricalChartType(value) {
     setSubOption('statistics', 'defaultCategoricalChartType', value);
 }
 
+export function getStatisticsDefaultCategoricalChartDataRange() {
+    return getSubOption('statistics', 'defaultCategoricalChartDataRangeType');
+}
+
+export function setStatisticsDefaultCategoricalChartDataRange(value) {
+    setSubOption('statistics', 'defaultCategoricalChartDataRangeType', value);
+}
+
 export function getStatisticsDefaultTrendChartType() {
     return getSubOption('statistics', 'defaultTrendChartType');
 }
@@ -286,6 +287,14 @@ export function setStatisticsDefaultTrendChartType(value) {
     setSubOption('statistics', 'defaultTrendChartType', value);
 }
 
+export function getStatisticsDefaultTrendChartDataRange() {
+    return getSubOption('statistics', 'defaultTrendChartDataRangeType');
+}
+
+export function setStatisticsDefaultTrendChartDataRange(value) {
+    setSubOption('statistics', 'defaultTrendChartDataRangeType', value);
+}
+
 export function isEnableAnimate() {
     return getOption('animate');
 }

src/locales/en.js

@@ -759,6 +759,12 @@ export default {
     'Last month': 'Last month',
     'This year': 'This year',
     'Last year': 'Last year',
+    'Recent 12 months': 'Recent 12 months',
+    'Recent 24 months': 'Recent 24 months',
+    'Recent 36 months': 'Recent 36 months',
+    'Recent 2 years': 'Recent 2 years',
+    'Recent 3 years': 'Recent 3 years',
+    'Recent 5 years': 'Recent 5 years',
     'Custom Date': 'Custom Date',
     'Start Time': 'Start Time',
     'End Time': 'End Time',

src/locales/zh_Hans.js

@@ -759,6 +759,12 @@ export default {
     'Last month': '上月',
     'This year': '今年',
     'Last year': '去年',
+    'Recent 12 months': '最近12个月',
+    'Recent 24 months': '最近24个月',
+    'Recent 36 months': '最近36个月',
+    'Recent 2 years': '最近2年',
+    'Recent 3 years': '最近3年',
+    'Recent 5 years': '最近5年',
     'Custom Date': '自定义日期',
     'Start Time': '开始时间',
     'End Time': '结束时间',

src/stores/setting.js

@@ -23,13 +23,14 @@ export const useSettingsStore = defineStore('settings', {
             showAccountBalance: settings.isShowAccountBalance(),
             statistics: {
                 defaultChartDataType: settings.getStatisticsDefaultChartDataType(),
-                defaultDataRangeType: settings.getStatisticsDefaultDateRange(),
                 defaultTimezoneType: settings.getStatisticsDefaultTimezoneType(),
                 defaultAccountFilter: settings.getStatisticsDefaultAccountFilter(),
                 defaultTransactionCategoryFilter: settings.getStatisticsDefaultTransactionCategoryFilter(),
                 defaultSortingType: settings.getStatisticsSortingType(),
                 defaultCategoricalChartType: settings.getStatisticsDefaultCategoricalChartType(),
+                defaultCategoricalChartDataRangeType: settings.getStatisticsDefaultCategoricalChartDataRange(),
                 defaultTrendChartType: settings.getStatisticsDefaultTrendChartType(),
+                defaultTrendChartDataRangeType: settings.getStatisticsDefaultTrendChartDataRange(),
             },
             animate: settings.isEnableAnimate()
         },
@@ -99,10 +100,6 @@ export const useSettingsStore = defineStore('settings', {
             settings.setStatisticsDefaultChartDataType(value);
             this.appSettings.statistics.defaultChartDataType = value;
         },
-        setStatisticsDefaultDateRange(value) {
-            settings.setStatisticsDefaultDateRange(value);
-            this.appSettings.statistics.defaultDataRangeType = value;
-        },
         setStatisticsDefaultTimezoneType(value) {
             settings.setStatisticsDefaultTimezoneType(value);
             this.appSettings.statistics.defaultTimezoneType = value;
@@ -123,10 +120,18 @@ export const useSettingsStore = defineStore('settings', {
             settings.setStatisticsDefaultCategoricalChartType(value);
             this.appSettings.statistics.defaultCategoricalChartType = value;
         },
+        setStatisticsDefaultCategoricalChartDateRange(value) {
+            settings.setStatisticsDefaultCategoricalChartDataRange(value);
+            this.appSettings.statistics.defaultCategoricalChartDataRangeType = value;
+        },
         setStatisticsDefaultTrendChartType(value) {
             settings.setStatisticsDefaultTrendChartType(value);
             this.appSettings.statistics.defaultTrendChartType = value;
         },
+        setStatisticsDefaultTrendChartDateRange(value) {
+            settings.setStatisticsDefaultTrendChartDataRange(value);
+            this.appSettings.statistics.defaultTrendChartDataRangeType = value;
+        },
         setEnableAnimate(value) {
             settings.setEnableAnimate(value);
             this.appSettings.animate = value;

src/stores/statistics.js

@@ -16,6 +16,7 @@ import logger from '@/lib/logger.js';
 import {
     isEquals,
     isNumber,
+    isYearMonth,
     isObject
 } from '@/lib/common.js';
 import {
@@ -25,12 +26,15 @@ import {
 export const useStatisticsStore = defineStore('statistics', {
     state: () => ({
         transactionStatisticsFilter: {
-            dateType: statisticsConstants.defaultDataRangeType,
-            startTime: 0,
-            endTime: 0,
             chartDataType: statisticsConstants.defaultChartDataType,
             categoricalChartType: statisticsConstants.defaultCategoricalChartType,
+            categoricalChartDateType: statisticsConstants.defaultCategoricalChartDataRangeType,
+            categoricalChartStartTime: 0,
+            categoricalChartEndTime: 0,
             trendChartType: statisticsConstants.defaultTrendChartType,
+            trendChartDateType: statisticsConstants.defaultTrendChartDataRangeType,
+            trendChartStartYearMonth: '',
+            trendChartEndYearMonth: '',
             filterAccountIds: {},
             filterCategoryIds: {}
         },
@@ -408,12 +412,15 @@ export const useStatisticsStore = defineStore('statistics', {
             this.transactionStatisticsStateInvalid = invalidState;
         },
         resetTransactionStatistics() {
-            this.transactionStatisticsFilter.dateType = statisticsConstants.defaultDataRangeType;
-            this.transactionStatisticsFilter.startTime = 0;
-            this.transactionStatisticsFilter.endTime = 0;
             this.transactionStatisticsFilter.chartDataType = statisticsConstants.defaultChartDataType;
             this.transactionStatisticsFilter.categoricalChartType = statisticsConstants.defaultCategoricalChartType;
+            this.transactionStatisticsFilter.categoricalChartDateType = statisticsConstants.defaultCategoricalChartDataRangeType;
+            this.transactionStatisticsFilter.categoricalChartStartTime = 0;
+            this.transactionStatisticsFilter.categoricalChartEndTime = 0;
             this.transactionStatisticsFilter.trendChartType = statisticsConstants.defaultTrendChartType;
+            this.transactionStatisticsFilter.trendChartDateType = statisticsConstants.defaultTrendChartDataRangeType;
+            this.transactionStatisticsFilter.trendChartStartYearMonth = '';
+            this.transactionStatisticsFilter.trendChartEndYearMonth = '';
             this.transactionStatisticsFilter.filterAccountIds = {};
             this.transactionStatisticsFilter.filterCategoryIds = {};
             this.transactionCategoryStatisticsData = {};
@@ -430,61 +437,59 @@ export const useStatisticsStore = defineStore('statistics', {
                     defaultChartDataType = statisticsConstants.defaultChartDataType;
                 }
 
-                let defaultDateRange = settingsStore.appSettings.statistics.defaultDataRangeType;
-
-                if (defaultDateRange < datetimeConstants.allDateRanges.All.type || defaultDateRange >= datetimeConstants.allDateRanges.Custom.type) {
-                    defaultDateRange = statisticsConstants.defaultDataRangeType;
-                }
-
                 let defaultCategoricalChartType = settingsStore.appSettings.statistics.defaultCategoricalChartType;
 
                 if (defaultCategoricalChartType !== statisticsConstants.allCategoricalChartTypes.Pie && defaultCategoricalChartType !== statisticsConstants.allCategoricalChartTypes.Bar) {
                     defaultCategoricalChartType = statisticsConstants.defaultCategoricalChartType;
                 }
 
+                let defaultCategoricalChartDateRange = settingsStore.appSettings.statistics.defaultCategoricalChartDataRangeType;
+
+                if (defaultCategoricalChartDateRange < datetimeConstants.allDateRanges.All.type || defaultCategoricalChartDateRange >= datetimeConstants.allDateRanges.Custom.type) {
+                    defaultCategoricalChartDateRange = statisticsConstants.defaultCategoricalChartDataRangeType;
+                }
+
                 let defaultTrendChartType = settingsStore.appSettings.statistics.defaultTrendChartType;
 
                 if (defaultTrendChartType !== statisticsConstants.allTrendChartTypes.Area && defaultTrendChartType !== statisticsConstants.allTrendChartTypes.Column) {
                     defaultTrendChartType = statisticsConstants.defaultTrendChartType;
                 }
 
+                let defaultTrendChartDateRange = settingsStore.appSettings.statistics.defaultTrendChartDataRangeType;
+
+                if (defaultTrendChartDateRange < datetimeConstants.allDateRanges.All.type || defaultTrendChartDateRange >= datetimeConstants.allDateRanges.Custom.type) {
+                    defaultTrendChartDateRange = statisticsConstants.defaultTrendChartDataRangeType;
+                }
+
                 let defaultSortType = settingsStore.appSettings.statistics.defaultSortingType;
 
                 if (defaultSortType < statisticsConstants.allSortingTypes.Amount.type || defaultSortType > statisticsConstants.allSortingTypes.Name.type) {
                     defaultSortType = statisticsConstants.defaultSortingType;
                 }
 
-                const dateRange = getDateRangeByDateType(defaultDateRange, userStore.currentUserFirstDayOfWeek);
+                const categoricalChartDateRange = getDateRangeByDateType(defaultCategoricalChartDateRange, userStore.currentUserFirstDayOfWeek);
+                const trendChartDateRange = getDateRangeByDateType(defaultTrendChartDateRange, userStore.currentUserFirstDayOfWeek);
 
                 filter = {
-                    dateType: dateRange ? dateRange.dateType : undefined,
-                    startTime: dateRange ? dateRange.minTime : undefined,
-                    endTime: dateRange ? dateRange.maxTime : undefined,
-                    categoricalChartType: defaultCategoricalChartType,
-                    trendChartType: defaultTrendChartType,
                     chartDataType: defaultChartDataType,
+                    categoricalChartType: defaultCategoricalChartType,
+                    categoricalChartDateType: categoricalChartDateRange ? categoricalChartDateRange.dateType : undefined,
+                    categoricalChartStartTime: categoricalChartDateRange ? categoricalChartDateRange.minTime : undefined,
+                    categoricalChartEndTime: categoricalChartDateRange ? categoricalChartDateRange.maxTime : undefined,
+                    trendChartType: defaultTrendChartType,
+                    trendChartDateType: trendChartDateRange ? trendChartDateRange.dateType : undefined,
+                    trendChartStartYearMonth: trendChartDateRange ? trendChartDateRange.minTime : undefined,
+                    trendChartEndYearMonth: trendChartDateRange ? trendChartDateRange.maxTime : undefined,
                     filterAccountIds: settingsStore.appSettings.statistics.defaultAccountFilter || {},
                     filterCategoryIds: settingsStore.appSettings.statistics.defaultTransactionCategoryFilter || {},
                     sortingType: defaultSortType,
                 };
             }
 
-            if (filter && isNumber(filter.dateType)) {
+            if (filter && isNumber(filter.chartDataType)) {
-                this.transactionStatisticsFilter.dateType = filter.dateType;
+                this.transactionStatisticsFilter.chartDataType = filter.chartDataType;
             } else {
-                this.transactionStatisticsFilter.dateType = statisticsConstants.defaultDataRangeType;
+                this.transactionStatisticsFilter.chartDataType = statisticsConstants.defaultChartDataType;
-            }
-
-            if (filter && isNumber(filter.startTime)) {
-                this.transactionStatisticsFilter.startTime = filter.startTime;
-            } else {
-                this.transactionStatisticsFilter.startTime = 0;
-            }
-
-            if (filter && isNumber(filter.endTime)) {
-                this.transactionStatisticsFilter.endTime = filter.endTime;
-            } else {
-                this.transactionStatisticsFilter.endTime = 0;
             }
 
             if (filter && isNumber(filter.categoricalChartType)) {
@@ -493,16 +498,46 @@ export const useStatisticsStore = defineStore('statistics', {
                 this.transactionStatisticsFilter.categoricalChartType = statisticsConstants.defaultCategoricalChartType;
             }
 
+            if (filter && isNumber(filter.categoricalChartDateType)) {
+                this.transactionStatisticsFilter.categoricalChartDateType = filter.categoricalChartDateType;
+            } else {
+                this.transactionStatisticsFilter.categoricalChartDateType = statisticsConstants.defaultCategoricalChartDataRangeType;
+            }
+
+            if (filter && isNumber(filter.categoricalChartStartTime)) {
+                this.transactionStatisticsFilter.categoricalChartStartTime = filter.categoricalChartStartTime;
+            } else {
+                this.transactionStatisticsFilter.categoricalChartStartTime = 0;
+            }
+
+            if (filter && isNumber(filter.categoricalChartEndTime)) {
+                this.transactionStatisticsFilter.categoricalChartEndTime = filter.categoricalChartEndTime;
+            } else {
+                this.transactionStatisticsFilter.categoricalChartEndTime = 0;
+            }
+
             if (filter && isNumber(filter.trendChartType)) {
                 this.transactionStatisticsFilter.trendChartType = filter.trendChartType;
             } else {
                 this.transactionStatisticsFilter.trendChartType = statisticsConstants.defaultTrendChartType;
             }
 
-            if (filter && isNumber(filter.chartDataType)) {
+            if (filter && isNumber(filter.trendChartDateType)) {
-                this.transactionStatisticsFilter.chartDataType = filter.chartDataType;
+                this.transactionStatisticsFilter.trendChartDateType = filter.trendChartDateType;
             } else {
-                this.transactionStatisticsFilter.chartDataType = statisticsConstants.defaultChartDataType;
+                this.transactionStatisticsFilter.trendChartDateType = statisticsConstants.defaultTrendChartDataRangeType;
+            }
+
+            if (filter && isYearMonth(filter.trendChartStartYearMonth)) {
+                this.transactionStatisticsFilter.trendChartStartYearMonth = filter.trendChartStartYearMonth;
+            } else {
+                this.transactionStatisticsFilter.trendChartStartYearMonth = '';
+            }
+
+            if (filter && isYearMonth(filter.trendChartEndYearMonth)) {
+                this.transactionStatisticsFilter.trendChartEndYearMonth = filter.trendChartEndYearMonth;
+            } else {
+                this.transactionStatisticsFilter.trendChartEndYearMonth = '';
             }
 
             if (filter && isObject(filter.filterAccountIds)) {
@@ -524,28 +559,40 @@ export const useStatisticsStore = defineStore('statistics', {
             }
         },
         updateTransactionStatisticsFilter(filter) {
-            if (filter && isNumber(filter.dateType)) {
+            if (filter && isNumber(filter.chartDataType)) {
-                this.transactionStatisticsFilter.dateType = filter.dateType;
+                this.transactionStatisticsFilter.chartDataType = filter.chartDataType;
-            }
-
-            if (filter && isNumber(filter.startTime)) {
-                this.transactionStatisticsFilter.startTime = filter.startTime;
-            }
-
-            if (filter && isNumber(filter.endTime)) {
-                this.transactionStatisticsFilter.endTime = filter.endTime;
             }
 
             if (filter && isNumber(filter.categoricalChartType)) {
                 this.transactionStatisticsFilter.categoricalChartType = filter.categoricalChartType;
             }
 
+            if (filter && isNumber(filter.categoricalChartDateType)) {
+                this.transactionStatisticsFilter.categoricalChartDateType = filter.categoricalChartDateType;
+            }
+
+            if (filter && isNumber(filter.categoricalChartStartTime)) {
+                this.transactionStatisticsFilter.categoricalChartStartTime = filter.categoricalChartStartTime;
+            }
+
+            if (filter && isNumber(filter.categoricalChartEndTime)) {
+                this.transactionStatisticsFilter.categoricalChartEndTime = filter.categoricalChartEndTime;
+            }
+
             if (filter && isNumber(filter.trendChartType)) {
                 this.transactionStatisticsFilter.trendChartType = filter.trendChartType;
             }
 
-            if (filter && isNumber(filter.chartDataType)) {
+            if (filter && isNumber(filter.trendChartDateType)) {
-                this.transactionStatisticsFilter.chartDataType = filter.chartDataType;
+                this.transactionStatisticsFilter.trendChartDateType = filter.trendChartDateType;
+            }
+
+            if (filter && isYearMonth(filter.trendChartStartYearMonth)) {
+                this.transactionStatisticsFilter.trendChartStartYearMonth = filter.trendChartStartYearMonth;
+            }
+
+            if (filter && isYearMonth(filter.trendChartEndYearMonth)) {
+                this.transactionStatisticsFilter.trendChartEndYearMonth = filter.trendChartEndYearMonth;
             }
 
             if (filter && isObject(filter.filterAccountIds)) {
@@ -587,11 +634,11 @@ export const useStatisticsStore = defineStore('statistics', {
 
             if (this.transactionStatisticsFilter.chartDataType !== statisticsConstants.allChartDataTypes.AccountTotalAssets.type
                 && this.transactionStatisticsFilter.chartDataType !== statisticsConstants.allChartDataTypes.AccountTotalLiabilities.type) {
-                querys.push('dateType=' + this.transactionStatisticsFilter.dateType);
+                querys.push('dateType=' + this.transactionStatisticsFilter.categoricalChartDateType);
 
                 if (this.transactionStatisticsFilter.dateType === datetimeConstants.allDateRanges.Custom.type) {
-                    querys.push('minTime=' + this.transactionStatisticsFilter.startTime);
+                    querys.push('minTime=' + this.transactionStatisticsFilter.categoricalChartStartTime);
-                    querys.push('maxTime=' + this.transactionStatisticsFilter.endTime);
+                    querys.push('maxTime=' + this.transactionStatisticsFilter.categoricalChartEndTime);
                 }
             }
 
@@ -603,8 +650,8 @@ export const useStatisticsStore = defineStore('statistics', {
 
             return new Promise((resolve, reject) => {
                 services.getTransactionStatistics({
-                    startTime: self.transactionStatisticsFilter.startTime,
+                    startTime: self.transactionStatisticsFilter.categoricalChartStartTime,
-                    endTime: self.transactionStatisticsFilter.endTime,
+                    endTime: self.transactionStatisticsFilter.categoricalChartEndTime,
                     useTransactionTimezone: settingsStore.appSettings.statistics.defaultTimezoneType
                 }).then(response => {
                     const data = response.data;
@@ -639,7 +686,7 @@ export const useStatisticsStore = defineStore('statistics', {
                 });
             });
         },
-        loadTrendAnalysis({ force }) {
+        loadTrendAnalysis() {
             return Promise.resolve(true);
         },
     }

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

@@ -17,18 +17,6 @@
                                 />
                             </v-col>
 
-                            <v-col cols="12" md="6">
-                                <v-select
-                                    item-title="displayName"
-                                    item-value="type"
-                                    persistent-placeholder
-                                    :label="$t('Default Date Range')"
-                                    :placeholder="$t('Default Date Range')"
-                                    :items="allDateRanges"
-                                    v-model="defaultDateRange"
-                                />
-                            </v-col>
-
                             <v-col cols="12" md="6">
                                 <v-select
                                     item-title="displayName"
@@ -74,6 +62,18 @@
                                     v-model="defaultCategoricalChartType"
                                 />
                             </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :label="$t('Default Date Range')"
+                                    :placeholder="$t('Default Date Range')"
+                                    :items="allCategoricalChartDateRanges"
+                                    v-model="defaultCategoricalChartDateRange"
+                                />
+                            </v-col>
                         </v-row>
                     </v-card-text>
                 </v-form>
@@ -96,6 +96,18 @@
                                     v-model="defaultTrendChartType"
                                 />
                             </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :label="$t('Default Date Range')"
+                                    :placeholder="$t('Default Date Range')"
+                                    :items="allTrendChartDateRanges"
+                                    v-model="defaultTrendChartDateRange"
+                                />
+                            </v-col>
                         </v-row>
                     </v-card-text>
                 </v-form>
@@ -116,7 +128,7 @@
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 
-import statisticsConstants from '@/consts/statistics.js';
+import datetimeConstants from '@/consts/datetime.js';
 
 import AccountFilterSettingsCard from '@/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue';
 import CategoryFilterSettingsCard from '@/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue';
@@ -131,20 +143,23 @@ export default {
         allChartDataTypes() {
             return this.$locale.getAllStatisticsChartDataTypes();
         },
+        allTimezoneTypesUsedForStatistics() {
+            return this.$locale.getAllTimezoneTypesUsedForStatistics();
+        },
         allSortingTypes() {
             return this.$locale.getAllStatisticsSortingTypes();
         },
         allCategoricalChartTypes() {
             return this.$locale.getAllCategoricalChartTypes();
         },
+        allCategoricalChartDateRanges() {
+            return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, false);
+        },
         allTrendChartTypes() {
             return this.$locale.getAllTrendChartTypes();
         },
-        allDateRanges() {
+        allTrendChartDateRanges() {
-            return this.$locale.getAllDateRanges(false);
+            return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.TrendAnalysis, false);
-        },
-        allTimezoneTypesUsedForStatistics() {
-            return this.$locale.getAllTimezoneTypesUsedForStatistics();
         },
         defaultChartDataType: {
             get: function () {
@@ -154,14 +169,6 @@ export default {
                 this.settingsStore.setStatisticsDefaultChartDataType(value);
             }
         },
-        defaultDateRange: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultDataRangeType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultDateRange(value);
-            }
-        },
         defaultTimezoneType: {
             get: function () {
                 return this.settingsStore.appSettings.statistics.defaultTimezoneType;
@@ -186,6 +193,14 @@ export default {
                 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;
@@ -193,7 +208,15 @@ export default {
             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/desktop/statistics/TransactionPage.vue

@@ -58,8 +58,8 @@
                                             <v-btn-group class="ml-4" color="default" density="comfortable" variant="outlined" divided
                                                          v-if="analysisType === allAnalysisTypes.CategoricalAnalysis">
                                                 <v-btn :icon="icons.left"
-                                                       :disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
+                                                       :disabled="loading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
-                                                       @click="shiftDateRange(query.startTime, query.endTime, -1)"/>
+                                                       @click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, -1)"/>
                                                 <v-menu location="bottom">
                                                     <template #activator="{ props }">
                                                         <v-btn :disabled="loading || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
@@ -67,13 +67,13 @@
                                                     </template>
                                                     <v-list>
                                                         <v-list-item :key="dateRange.type" :value="dateRange.type"
-                                                                     :append-icon="(query.dateType === dateRange.type ? icons.check : null)"
+                                                                     :append-icon="(query.categoricalChartDateType === dateRange.type ? icons.check : null)"
-                                                                     v-for="dateRange in allDateRanges">
+                                                                     v-for="dateRange in allDateRangesArray">
                                                             <v-list-item-title
                                                                 class="cursor-pointer"
                                                                 @click="setDateFilter(dateRange.type)">
-                                                                {{ $t(dateRange.name) }}
+                                                                {{ dateRange.displayName }}
-                                                                <div class="statistics-custom-datetime-range" v-if="dateRange.type === allDateRanges.Custom.type && query.dateType === allDateRanges.Custom.type && query.startTime && query.endTime">
+                                                                <div class="statistics-custom-datetime-range" v-if="dateRange.type === allDateRanges.Custom.type && query.categoricalChartDateType === allDateRanges.Custom.type && query.categoricalChartStartTime && query.categoricalChartEndTime">
                                                                     <span>{{ queryStartTime }}</span>
                                                                     <span>&nbsp;-&nbsp;</span>
                                                                     <br/>
@@ -84,8 +84,8 @@
                                                     </v-list>
                                                 </v-menu>
                                                 <v-btn :icon="icons.right"
-                                                       :disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
+                                                       :disabled="loading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
-                                                       @click="shiftDateRange(query.startTime, query.endTime, 1)"/>
+                                                       @click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, 1)"/>
                                             </v-btn-group>
 
                                             <v-btn density="compact" color="default" variant="text" size="24"
@@ -231,8 +231,8 @@
     </v-row>
 
     <date-range-selection-dialog :title="$t('Custom Date Range')"
-                                  :min-time="query.startTime"
+                                  :min-time="query.categoricalChartStartTime"
-                                  :max-time="query.endTime"
+                                  :max-time="query.categoricalChartEndTime"
                                   v-model:show="showCustomDateRangeDialog"
                                   @dateRange:change="setCustomDateFilter" />
 
@@ -263,7 +263,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
 
 import datetimeConstants from '@/consts/datetime.js';
 import statisticsConstants from '@/consts/statistics.js';
-import { isArray, limitText, formatPercent } from '@/lib/common.js'
+import { limitText, formatPercent } from '@/lib/common.js'
 import {
     getShiftedDateRangeAndDateType,
     getDateRangeByDateType
@@ -360,10 +360,10 @@ export default {
             }
         },
         queryStartTime() {
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.startTime);
+            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartStartTime);
         },
         queryEndTime() {
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime);
+            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartEndTime);
         },
         allAnalysisTypes() {
             return statisticsConstants.allAnalysisTypes;
@@ -392,6 +392,9 @@ export default {
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
+        allDateRangesArray() {
+            return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, true);
+        },
         showAccountBalance() {
             return this.settingsStore.appSettings.showAccountBalance;
         },
@@ -566,7 +569,7 @@ export default {
             if (dateType === this.allDateRanges.Custom.type) { // Custom
                 this.showCustomDateRangeDialog = true;
                 return;
-            } else if (this.query.dateType === dateType) {
+            } else if (this.query.categoricalChartDateType === dateType) {
                 return;
             }
 
@@ -577,9 +580,9 @@ export default {
             }
 
             this.statisticsStore.updateTransactionStatisticsFilter({
-                dateType: dateRange.dateType,
+                categoricalChartDateType: dateRange.dateType,
-                startTime: dateRange.minTime,
+                categoricalChartStartTime: dateRange.minTime,
-                endTime: dateRange.maxTime
+                categoricalChartEndTime: dateRange.maxTime
             });
 
             this.reload(null);
@@ -590,9 +593,9 @@ export default {
             }
 
             this.statisticsStore.updateTransactionStatisticsFilter({
-                dateType: this.allDateRanges.Custom.type,
+                categoricalChartDateType: this.allDateRanges.Custom.type,
-                startTime: startTime,
+                categoricalChartStartTime: startTime,
-                endTime: endTime
+                categoricalChartEndTime: endTime
             });
 
             this.showCustomDateRangeDialog = false;
@@ -600,16 +603,16 @@ export default {
             this.reload(null);
         },
         shiftDateRange(startTime, endTime, scale) {
-            if (this.query.dateType === this.allDateRanges.All.type) {
+            if (this.query.categoricalChartDateType === this.allDateRanges.All.type) {
                 return;
             }
 
-            const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek);
+            const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
 
             this.statisticsStore.updateTransactionStatisticsFilter({
-                dateType: newDateRange.dateType,
+                categoricalChartDateType: newDateRange.dateType,
-                startTime: newDateRange.minTime,
+                categoricalChartStartTime: newDateRange.minTime,
-                endTime: newDateRange.maxTime
+                categoricalChartEndTime: newDateRange.maxTime
             });
 
             this.reload(null);
@@ -620,7 +623,7 @@ export default {
                 return this.$t(this.allDateRanges.All.name);
             }
 
-            return this.$locale.getDateRangeDisplayName(this.userStore, query.dateType, query.startTime, query.endTime);
+            return this.$locale.getDateRangeDisplayName(this.userStore, query.categoricalChartDateType, query.categoricalChartStartTime, query.categoricalChartEndTime);
         },
         clickPieChartItem(item) {
             this.$router.push(this.getItemLinkUrl(item));

src/views/desktop/transactions/ListPage.vue

@@ -753,7 +753,7 @@ export default {
                 return;
             }
 
-            const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek);
+            const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
 
             this.transactionsStore.updateTransactionListFilter({
                 dateType: newDateRange.dateType,

src/views/mobile/statistics/SettingsPage.vue

@@ -14,16 +14,6 @@
                 </select>
             </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') }">
-                <select v-model="defaultDateRange">
-                    <option :value="dateRange.type"
-                            :key="dateRange.type"
-                            v-for="dateRange in allDateRanges">{{ dateRange.displayName }}</option>
-                </select>
-            </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') }">
@@ -60,6 +50,16 @@
                             v-for="chartType in allCategoricalChartTypes">{{ chartType.displayName }}</option>
                 </select>
             </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') }">
+                <select v-model="defaultCategoricalChartDateRange">
+                    <option :value="dateRange.type"
+                            :key="dateRange.type"
+                            v-for="dateRange in allCategoricalChartDateRanges">{{ dateRange.displayName }}</option>
+                </select>
+            </f7-list-item>
         </f7-list>
 
         <f7-block-title>{{ $t('Trend Analysis Settings') }}</f7-block-title>
@@ -73,6 +73,16 @@
                             v-for="chartType in allTrendChartTypes">{{ chartType.displayName }}</option>
                 </select>
             </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') }">
+                <select v-model="defaultTrendChartDateRange">
+                    <option :value="dateRange.type"
+                            :key="dateRange.type"
+                            v-for="dateRange in allTrendChartDateRanges">{{ dateRange.displayName }}</option>
+                </select>
+            </f7-list-item>
         </f7-list>
     </f7-page>
 </template>
@@ -81,26 +91,31 @@
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 
+import datetimeConstants from '@/consts/datetime.js';
+
 export default {
     computed: {
         ...mapStores(useSettingsStore),
         allChartDataTypes() {
             return this.$locale.getAllStatisticsChartDataTypes();
         },
+        allTimezoneTypesUsedForStatistics() {
+            return this.$locale.getAllTimezoneTypesUsedForStatistics();
+        },
         allSortingTypes() {
             return this.$locale.getAllStatisticsSortingTypes();
         },
         allCategoricalChartTypes() {
             return this.$locale.getAllCategoricalChartTypes();
         },
+        allCategoricalChartDateRanges() {
+            return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, false);
+        },
         allTrendChartTypes() {
             return this.$locale.getAllTrendChartTypes();
         },
-        allDateRanges() {
+        allTrendChartDateRanges() {
-            return this.$locale.getAllDateRanges(false);
+            return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.TrendAnalysis, false);
-        },
-        allTimezoneTypesUsedForStatistics() {
-            return this.$locale.getAllTimezoneTypesUsedForStatistics();
         },
         defaultChartDataType: {
             get: function () {
@@ -110,14 +125,6 @@ export default {
                 this.settingsStore.setStatisticsDefaultChartDataType(value);
             }
         },
-        defaultDateRange: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultDataRangeType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultDateRange(value);
-            }
-        },
         defaultTimezoneType: {
             get: function () {
                 return this.settingsStore.appSettings.statistics.defaultTimezoneType;
@@ -142,6 +149,14 @@ export default {
                 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;
@@ -149,7 +164,15 @@ export default {
             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/TransactionPage.vue

@@ -187,13 +187,13 @@
         </f7-popover>
 
         <f7-toolbar tabbar bottom class="toolbar-item-auto-size">
-            <f7-link :class="{ 'disabled': reloading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, -1)">
+            <f7-link :class="{ 'disabled': reloading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, -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>
-            <f7-link :class="{ 'disabled': reloading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, 1)">
+            <f7-link :class="{ 'disabled': reloading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, 1)">
                 <f7-icon f7="arrow_right_square"></f7-icon>
             </f7-link>
             <f7-link class="tabbar-text-with-ellipsis" :key="chartType.type"
@@ -206,16 +206,16 @@
                     v-model:opened="showDatePopover"
                     @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers>
-                <f7-list-item :title="$t(dateRange.name)"
+                <f7-list-item :title="dateRange.displayName"
-                              :class="{ 'list-item-selected': query.dateType === dateRange.type }"
+                              :class="{ 'list-item-selected': query.categoricalChartDateType === dateRange.type }"
                               :key="dateRange.type"
-                              v-for="dateRange in allDateRanges"
+                              v-for="dateRange in allDateRangesArray"
                               @click="setDateFilter(dateRange.type)">
                     <template #after>
-                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
+                        <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoricalChartDateType === dateRange.type"></f7-icon>
                     </template>
                     <template #footer>
-                        <div v-if="dateRange.type === allDateRanges.Custom.type && query.dateType === allDateRanges.Custom.type && query.startTime && query.endTime">
+                        <div v-if="dateRange.type === allDateRanges.Custom.type && query.categoricalChartDateType === allDateRanges.Custom.type && query.categoricalChartStartTime && query.categoricalChartEndTime">
                             <span>{{ queryStartTime }}</span>
                             <span>&nbsp;-&nbsp;</span>
                             <br/>
@@ -227,8 +227,8 @@
         </f7-popover>
 
         <date-range-selection-sheet :title="$t('Custom Date Range')"
-                                    :min-time="query.startTime"
+                                    :min-time="query.categoricalChartStartTime"
-                                    :max-time="query.endTime"
+                                    :max-time="query.categoricalChartEndTime"
                                     v-model:show="showCustomDateRangeSheet"
                                     @dateRange:change="setCustomDateFilter">
         </date-range-selection-sheet>
@@ -304,10 +304,10 @@ export default {
             return this.$t(querySortingTypeName);
         },
         queryStartTime() {
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.startTime);
+            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartStartTime);
         },
         queryEndTime() {
-            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime);
+            return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartEndTime);
         },
         allChartTypes() {
             return this.$locale.getAllCategoricalChartTypes();
@@ -324,6 +324,9 @@ export default {
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
+        allDateRangesArray() {
+            return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, true);
+        },
         showAccountBalance() {
             return this.settingsStore.appSettings.showAccountBalance;
         },
@@ -465,7 +468,7 @@ export default {
                 this.showCustomDateRangeSheet = true;
                 this.showDatePopover = false;
                 return;
-            } else if (this.query.dateType === dateType) {
+            } else if (this.query.categoricalChartDateType === dateType) {
                 return;
             }
 
@@ -476,9 +479,9 @@ export default {
             }
 
             this.statisticsStore.updateTransactionStatisticsFilter({
-                dateType: dateRange.dateType,
+                categoricalChartDateType: dateRange.dateType,
-                startTime: dateRange.minTime,
+                categoricalChartStartTime: dateRange.minTime,
-                endTime: dateRange.maxTime
+                categoricalChartEndTime: dateRange.maxTime
             });
 
             this.showDatePopover = false;
@@ -490,9 +493,9 @@ export default {
             }
 
             this.statisticsStore.updateTransactionStatisticsFilter({
-                dateType: this.allDateRanges.Custom.type,
+                categoricalChartDateType: this.allDateRanges.Custom.type,
-                startTime: startTime,
+                categoricalChartStartTime: startTime,
-                endTime: endTime
+                categoricalChartEndTime: endTime
             });
 
             this.showCustomDateRangeSheet = false;
@@ -500,16 +503,16 @@ export default {
             this.reload(null);
         },
         shiftDateRange(startTime, endTime, scale) {
-            if (this.query.dateType === this.allDateRanges.All.type) {
+            if (this.query.categoricalChartDateType === this.allDateRanges.All.type) {
                 return;
             }
 
-            const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek);
+            const newDateRange = getShiftedDateRangeAndDateType(startTime, endTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
 
             this.statisticsStore.updateTransactionStatisticsFilter({
-                dateType: newDateRange.dateType,
+                categoricalChartDateType: newDateRange.dateType,
-                startTime: newDateRange.minTime,
+                categoricalChartStartTime: newDateRange.minTime,
-                endTime: newDateRange.maxTime
+                categoricalChartEndTime: newDateRange.maxTime
             });
 
             this.reload(null);
@@ -520,7 +523,7 @@ export default {
                 return this.$t(this.allDateRanges.All.name);
             }
 
-            return this.$locale.getDateRangeDisplayName(this.userStore, query.dateType, query.startTime, query.endTime);
+            return this.$locale.getDateRangeDisplayName(this.userStore, query.categoricalChartDateType, query.categoricalChartStartTime, query.categoricalChartEndTime);
         },
         clickPieChartItem(item) {
             this.f7router.navigate(this.getItemLinkUrl(item));

src/views/mobile/transactions/ListPage.vue

@@ -253,10 +253,10 @@
                     v-model:opened="showDatePopover"
                     @popover:open="scrollPopoverToSelectedItem">
             <f7-list dividers>
-                <f7-list-item :title="$t(dateRange.name)"
+                <f7-list-item :title="dateRange.displayName"
                               :class="{ 'list-item-selected': query.dateType === dateRange.type }"
                               :key="dateRange.type"
-                              v-for="dateRange in allDateRanges"
+                              v-for="dateRange in allDateRangesArray"
                               @click="changeDateFilter(dateRange.type)">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
@@ -562,6 +562,9 @@ export default {
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
+        allDateRangesArray() {
+            return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.Normal, true);
+        },
         showTotalAmountInTransactionListPage() {
             return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
         }
@@ -830,7 +833,7 @@ export default {
                 return;
             }
 
-            const newDateRange = getShiftedDateRangeAndDateType(minTime, maxTime, scale, this.firstDayOfWeek);
+            const newDateRange = getShiftedDateRangeAndDateType(minTime, maxTime, scale, this.firstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
 
             this.transactionsStore.updateTransactionListFilter({
                 dateType: newDateRange.dateType,