add chart date type settings for trend analysis

2026-05-17 16:24:25 +08:00 · 2024-05-27 00:50:50 +08:00
parent 5eca777891
commit f041e7cb7d
16 changed files with 446 additions and 190 deletions
@@ -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() {
-            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);
+            }
+        },
    }
 };
 </script>
@@ -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)"
-                              :class="{ 'list-item-selected': query.dateType === dateRange.type }"
+                <f7-list-item :title="dateRange.displayName"
+                              :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"
-                                    :max-time="query.endTime"
+                                    :min-time="query.categoricalChartStartTime"
+                                    :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,
-                startTime: dateRange.minTime,
-                endTime: dateRange.maxTime
+                categoricalChartDateType: dateRange.dateType,
+                categoricalChartStartTime: dateRange.minTime,
+                categoricalChartEndTime: dateRange.maxTime
            });

            this.showDatePopover = false;
@@ -490,9 +493,9 @@ export default {
            }

            this.statisticsStore.updateTransactionStatisticsFilter({
-                dateType: this.allDateRanges.Custom.type,
-                startTime: startTime,
-                endTime: endTime
+                categoricalChartDateType: this.allDateRanges.Custom.type,
+                categoricalChartStartTime: startTime,
+                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,
-                startTime: newDateRange.minTime,
-                endTime: newDateRange.maxTime
+                categoricalChartDateType: newDateRange.dateType,
+                categoricalChartStartTime: newDateRange.minTime,
+                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));
@@ -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,