From e90cb697311f0c500dfcbbe0d1a096de11040d3b Mon Sep 17 00:00:00 2001 From: MaysWind Date: Mon, 27 May 2024 00:50:50 +0800 Subject: [PATCH] add chart date type settings for trend analysis --- src/consts/datetime.js | 112 ++++++++++++-- src/consts/statistics.js | 3 +- src/lib/common.js | 14 ++ src/lib/datetime.js | 25 +++- src/lib/i18n.js | 8 +- src/lib/settings.js | 27 ++-- src/locales/en.js | 6 + src/locales/zh_Hans.js | 6 + src/stores/setting.js | 15 +- src/stores/statistics.js | 141 ++++++++++++------ .../settings/tabs/AppStatisticsSettingTab.vue | 77 ++++++---- .../desktop/statistics/TransactionPage.vue | 55 +++---- src/views/desktop/transactions/ListPage.vue | 2 +- src/views/mobile/statistics/SettingsPage.vue | 71 ++++++--- .../mobile/statistics/TransactionPage.vue | 51 ++++--- src/views/mobile/transactions/ListPage.vue | 9 +- 16 files changed, 439 insertions(+), 183 deletions(-) diff --git a/src/consts/datetime.js b/src/consts/datetime.js index 5ec9c1e4..a52d19bd 100644 --- a/src/consts/datetime.js +++ b/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, - name: 'Custom Date' + type: 255, + 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, diff --git a/src/consts/statistics.js b/src/consts/statistics.js index 383656dd..0cfbb6eb 100644 --- a/src/consts/statistics.js +++ b/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, diff --git a/src/lib/common.js b/src/lib/common.js index 21d524b8..a92e7775 100644 --- a/src/lib/common.js +++ b/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; diff --git a/src/lib/datetime.js b/src/lib/datetime.js index bdf5e444..b19b4db9 100644 --- a/src/lib/datetime.js +++ b/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; } diff --git a/src/lib/i18n.js b/src/lib/i18n.js index dbf4b7db..0a2a5957 100644 --- a/src/lib/i18n.js +++ b/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), diff --git a/src/lib/settings.js b/src/lib/settings.js index d2f2eb60..6e3870ca 100644 --- a/src/lib/settings.js +++ b/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'); } diff --git a/src/locales/en.js b/src/locales/en.js index 4a12368e..ee0d7cd2 100644 --- a/src/locales/en.js +++ b/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', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index 1ed053aa..f9b52ce9 100644 --- a/src/locales/zh_Hans.js +++ b/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': '结束时间', diff --git a/src/stores/setting.js b/src/stores/setting.js index 3de8bdb9..6bcf3e82 100644 --- a/src/stores/setting.js +++ b/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; diff --git a/src/stores/statistics.js b/src/stores/statistics.js index 0dfb1ee0..cbf58496 100644 --- a/src/stores/statistics.js +++ b/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,67 +437,83 @@ 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, + chartDataType: defaultChartDataType, categoricalChartType: defaultCategoricalChartType, + categoricalChartDateType: categoricalChartDateRange ? categoricalChartDateRange.dateType : undefined, + categoricalChartStartTime: categoricalChartDateRange ? categoricalChartDateRange.minTime : undefined, + categoricalChartEndTime: categoricalChartDateRange ? categoricalChartDateRange.maxTime : undefined, trendChartType: defaultTrendChartType, - chartDataType: defaultChartDataType, + 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)) { - this.transactionStatisticsFilter.dateType = filter.dateType; + if (filter && isNumber(filter.chartDataType)) { + 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; + if (filter && isNumber(filter.categoricalChartType)) { + this.transactionStatisticsFilter.categoricalChartType = filter.categoricalChartType; } else { - this.transactionStatisticsFilter.startTime = 0; + this.transactionStatisticsFilter.categoricalChartType = statisticsConstants.defaultCategoricalChartType; } - if (filter && isNumber(filter.endTime)) { - this.transactionStatisticsFilter.endTime = filter.endTime; + if (filter && isNumber(filter.categoricalChartDateType)) { + this.transactionStatisticsFilter.categoricalChartDateType = filter.categoricalChartDateType; } else { - this.transactionStatisticsFilter.endTime = 0; + this.transactionStatisticsFilter.categoricalChartDateType = statisticsConstants.defaultCategoricalChartDataRangeType; } - if (filter && isNumber(filter.categoricalChartType)) { - this.transactionStatisticsFilter.categoricalChartType = filter.categoricalChartType; + if (filter && isNumber(filter.categoricalChartStartTime)) { + this.transactionStatisticsFilter.categoricalChartStartTime = filter.categoricalChartStartTime; } else { - this.transactionStatisticsFilter.categoricalChartType = statisticsConstants.defaultCategoricalChartType; + this.transactionStatisticsFilter.categoricalChartStartTime = 0; + } + + if (filter && isNumber(filter.categoricalChartEndTime)) { + this.transactionStatisticsFilter.categoricalChartEndTime = filter.categoricalChartEndTime; + } else { + this.transactionStatisticsFilter.categoricalChartEndTime = 0; } if (filter && isNumber(filter.trendChartType)) { @@ -499,10 +522,22 @@ export const useStatisticsStore = defineStore('statistics', { this.transactionStatisticsFilter.trendChartType = statisticsConstants.defaultTrendChartType; } - if (filter && isNumber(filter.chartDataType)) { - this.transactionStatisticsFilter.chartDataType = filter.chartDataType; + if (filter && isNumber(filter.trendChartDateType)) { + 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)) { - this.transactionStatisticsFilter.dateType = filter.dateType; + if (filter && isNumber(filter.chartDataType)) { + this.transactionStatisticsFilter.chartDataType = filter.chartDataType; } - if (filter && isNumber(filter.startTime)) { - this.transactionStatisticsFilter.startTime = filter.startTime; + if (filter && isNumber(filter.categoricalChartType)) { + this.transactionStatisticsFilter.categoricalChartType = filter.categoricalChartType; } - if (filter && isNumber(filter.endTime)) { - this.transactionStatisticsFilter.endTime = filter.endTime; + if (filter && isNumber(filter.categoricalChartDateType)) { + this.transactionStatisticsFilter.categoricalChartDateType = filter.categoricalChartDateType; } - if (filter && isNumber(filter.categoricalChartType)) { - this.transactionStatisticsFilter.categoricalChartType = filter.categoricalChartType; + 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)) { - this.transactionStatisticsFilter.chartDataType = filter.chartDataType; + if (filter && isNumber(filter.trendChartDateType)) { + 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('maxTime=' + this.transactionStatisticsFilter.endTime); + querys.push('minTime=' + this.transactionStatisticsFilter.categoricalChartStartTime); + 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, - endTime: self.transactionStatisticsFilter.endTime, + startTime: self.transactionStatisticsFilter.categoricalChartStartTime, + endTime: self.transactionStatisticsFilter.categoricalChartEndTime, useTransactionTimezone: settingsStore.appSettings.statistics.defaultTimezoneType }).then(response => { const data = response.data; diff --git a/src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue b/src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue index b8e1d4e0..571adcb7 100644 --- a/src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue +++ b/src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue @@ -17,18 +17,6 @@ /> - - - - + + + + @@ -96,6 +96,18 @@ v-model="defaultTrendChartType" /> + + + + @@ -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() { - return this.$locale.getAllDateRanges(false); - }, - allTimezoneTypesUsedForStatistics() { - return this.$locale.getAllTimezoneTypesUsedForStatistics(); + allTrendChartDateRanges() { + return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.TrendAnalysis, false); }, 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); + } + }, } }; diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue index 7e7da321..ba7902bf 100644 --- a/src/views/desktop/statistics/TransactionPage.vue +++ b/src/views/desktop/statistics/TransactionPage.vue @@ -58,8 +58,8 @@ + :disabled="loading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type" + @click="shiftDateRange(query.categoricalChartStartTime, query.categoricalChartEndTime, -1)"/> @@ -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() { - return this.$locale.getAllDateRanges(false); - }, - allTimezoneTypesUsedForStatistics() { - return this.$locale.getAllTimezoneTypesUsedForStatistics(); + allTrendChartDateRanges() { + return this.$locale.getAllDateRanges(datetimeConstants.allDateRangeScenes.TrendAnalysis, false); }, 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); + } + }, } }; diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue index b968e3d4..db1ec34f 100644 --- a/src/views/mobile/statistics/TransactionPage.vue +++ b/src/views/mobile/statistics/TransactionPage.vue @@ -187,13 +187,13 @@ - + {{ dateRangeName(query) }} - + -