mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-18 00:34:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

add chart date type settings for trend analysis

Browse Source
This commit is contained in:
MaysWind
2024-05-27 00:50:50 +08:00
parent 5eca777891
commit f041e7cb7d
16 changed files with 446 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue
+50 -27
View File
@@ -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() {
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);
}
},
}
};
</script>
src/views/desktop/statistics/TransactionPage.vue
+29 -26
View File
@@ -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"
@click="shiftDateRange(query.startTime, query.endTime, -1)"/>
:disabled="loading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
@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)"
v-for="dateRange in allDateRanges">
:append-icon="(query.categoricalChartDateType === dateRange.type ? icons.check : null)"
v-for="dateRange in allDateRangesArray">
<v-list-item-title
class="cursor-pointer"
@click="setDateFilter(dateRange.type)">
{{ $t(dateRange.name) }}
<div class="statistics-custom-datetime-range" v-if="dateRange.type === allDateRanges.Custom.type && query.dateType === allDateRanges.Custom.type && query.startTime && query.endTime">
{{ dateRange.displayName }}
<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"
@click="shiftDateRange(query.startTime, query.endTime, 1)"/>
:disabled="loading || query.categoricalChartDateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
@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"
:max-time="query.endTime"
:min-time="query.categoricalChartStartTime"
: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,
startTime: dateRange.minTime,
endTime: dateRange.maxTime
categoricalChartDateType: dateRange.dateType,
categoricalChartStartTime: dateRange.minTime,
categoricalChartEndTime: dateRange.maxTime
});
this.reload(null);
@@ -590,9 +593,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.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,
startTime: newDateRange.minTime,
endTime: newDateRange.maxTime
categoricalChartDateType: newDateRange.dateType,
categoricalChartStartTime: newDateRange.minTime,
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
+1 -1
View File
@@ -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,