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

code refactor

Browse Source
This commit is contained in:
MaysWind
2024-05-26 19:42:30 +08:00
parent 0884af038d
commit a917d16c26
8 changed files with 111 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/consts/statistics.js
+16 -4
View File
@@ -1,11 +1,22 @@
import datetime from './datetime.js'; import datetime from './datetime.js';
const allChartTypes = { const allCategoricalChartTypes = {
Pie: 0, Pie: 0,
Bar: 1 Bar: 1
}; };
const defaultChartType = allChartTypes.Pie; const allCategoricalChartTypesArray = [
{
name: 'Pie Chart',
type: allCategoricalChartTypes.Pie
},
{
name: 'Bar Chart',
type: allCategoricalChartTypes.Bar
}
];
const defaultCategoricalChartType = allCategoricalChartTypes.Pie;
const allChartDataTypes = { const allChartDataTypes = {
ExpenseByAccount: { ExpenseByAccount: {
@@ -71,8 +82,9 @@ const allSortingTypesArray = [
const defaultSortingType = allSortingTypes.Amount.type; const defaultSortingType = allSortingTypes.Amount.type;
export default { export default {
allChartTypes: allChartTypes, allCategoricalChartTypes: allCategoricalChartTypes,
defaultChartType: defaultChartType, allCategoricalChartTypesArray: allCategoricalChartTypesArray,
defaultCategoricalChartType: defaultCategoricalChartType,
allChartDataTypes: allChartDataTypes, allChartDataTypes: allChartDataTypes,
defaultChartDataType: defaultChartDataType, defaultChartDataType: defaultChartDataType,
defaultDataRangeType: datetime.allDateRanges.ThisMonth.type, defaultDataRangeType: datetime.allDateRanges.ThisMonth.type,
src/lib/i18n.js
+16
View File
@@ -808,6 +808,21 @@ function getAllAccountTypes(translateFn) {
return allAccountTypes; return allAccountTypes;
} }
function getAllCategoricalChartTypes(translateFn) {
const allChartTypes = [];
for (let i = 0; i < statistics.allCategoricalChartTypesArray.length; i++) {
const chartType = statistics.allCategoricalChartTypesArray[i];
allChartTypes.push({
type: chartType.type,
displayName: translateFn(chartType.name)
});
}
return allChartTypes;
}
function getAllStatisticsChartDataTypes(translateFn) { function getAllStatisticsChartDataTypes(translateFn) {
const allChartDataTypes = []; const allChartDataTypes = [];
@@ -1351,6 +1366,7 @@ export function i18nFunctions(i18nGlobal) {
getAllTimezoneTypesUsedForStatistics: (currentTimezone) => getAllTimezoneTypesUsedForStatistics(currentTimezone, i18nGlobal.t), getAllTimezoneTypesUsedForStatistics: (currentTimezone) => getAllTimezoneTypesUsedForStatistics(currentTimezone, i18nGlobal.t),
getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t), getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),
getAllAccountTypes: () => getAllAccountTypes(i18nGlobal.t), getAllAccountTypes: () => getAllAccountTypes(i18nGlobal.t),
getAllCategoricalChartTypes: () => getAllCategoricalChartTypes(i18nGlobal.t),
getAllStatisticsChartDataTypes: () => getAllStatisticsChartDataTypes(i18nGlobal.t), getAllStatisticsChartDataTypes: () => getAllStatisticsChartDataTypes(i18nGlobal.t),
getAllStatisticsSortingTypes: () => getAllStatisticsSortingTypes(i18nGlobal.t), getAllStatisticsSortingTypes: () => getAllStatisticsSortingTypes(i18nGlobal.t),
getAllTransactionEditScopeTypes: () => getAllTransactionEditScopeTypes(i18nGlobal.t), getAllTransactionEditScopeTypes: () => getAllTransactionEditScopeTypes(i18nGlobal.t),
src/lib/settings.js
+1 -1
View File
@@ -21,7 +21,7 @@ const defaultSettings = {
showTotalAmountInTransactionListPage: true, showTotalAmountInTransactionListPage: true,
showAccountBalance: true, showAccountBalance: true,
statistics: { statistics: {
defaultChartType: statisticsConstants.defaultChartType, defaultChartType: statisticsConstants.defaultCategoricalChartType,
defaultChartDataType: statisticsConstants.defaultChartDataType, defaultChartDataType: statisticsConstants.defaultChartDataType,
defaultDataRangeType: statisticsConstants.defaultDataRangeType, defaultDataRangeType: statisticsConstants.defaultDataRangeType,
defaultTimezoneType: timezoneConstants.defaultTimezoneTypesUsedForStatistics, defaultTimezoneType: timezoneConstants.defaultTimezoneTypesUsedForStatistics,
src/stores/statistics.js
+21 -21
View File
@@ -28,16 +28,16 @@ export const useStatisticsStore = defineStore('statistics', {
dateType: statisticsConstants.defaultDataRangeType, dateType: statisticsConstants.defaultDataRangeType,
startTime: 0, startTime: 0,
endTime: 0, endTime: 0,
chartType: statisticsConstants.defaultChartType, chartType: statisticsConstants.defaultCategoricalChartType,
chartDataType: statisticsConstants.defaultChartDataType, chartDataType: statisticsConstants.defaultChartDataType,
filterAccountIds: {}, filterAccountIds: {},
filterCategoryIds: {} filterCategoryIds: {}
}, },
transactionStatisticsData: {}, transactionCategoryStatisticsData: {},
transactionStatisticsStateInvalid: true transactionStatisticsStateInvalid: true
}), }),
getters: { getters: {
transactionStatisticsChartDataCategory(state) { categoricalAnalysisChartDataCategory(state) {
if (state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.ExpenseByAccount.type || if (state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.ExpenseByAccount.type ||
state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByAccount.type || state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByAccount.type ||
state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalAssets.type || state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalAssets.type ||
@@ -52,8 +52,8 @@ export const useStatisticsStore = defineStore('statistics', {
return ''; return '';
} }
}, },
transactionStatistics(state) { transactionCategoryStatisticsDataWithCategoryAndAccountInfo(state) {
const statistics = state.transactionStatisticsData; const statistics = state.transactionCategoryStatisticsData;
const finalStatistics = { const finalStatistics = {
startTime: statistics.startTime, startTime: statistics.startTime,
endTime: statistics.endTime, endTime: statistics.endTime,
@@ -114,8 +114,8 @@ export const useStatisticsStore = defineStore('statistics', {
return finalStatistics; return finalStatistics;
}, },
statisticsItemsByTransactionStatisticsData(state) { transactionCategoryTotalAmountAnalysisData(state) {
if (!state.transactionStatistics || !state.transactionStatistics.items) { if (!state.transactionCategoryStatisticsDataWithCategoryAndAccountInfo || !state.transactionCategoryStatisticsDataWithCategoryAndAccountInfo.items) {
return null; return null;
} }
@@ -123,8 +123,8 @@ export const useStatisticsStore = defineStore('statistics', {
let totalAmount = 0; let totalAmount = 0;
let totalNonNegativeAmount = 0; let totalNonNegativeAmount = 0;
for (let i = 0; i < state.transactionStatistics.items.length; i++) { for (let i = 0; i < state.transactionCategoryStatisticsDataWithCategoryAndAccountInfo.items.length; i++) {
const item = state.transactionStatistics.items[i]; const item = state.transactionCategoryStatisticsDataWithCategoryAndAccountInfo.items[i];
if (!item.primaryAccount || !item.account || !item.primaryCategory || !item.category) { if (!item.primaryAccount || !item.account || !item.primaryCategory || !item.category) {
continue; continue;
@@ -247,7 +247,7 @@ export const useStatisticsStore = defineStore('statistics', {
items: allDataItems items: allDataItems
} }
}, },
statisticsItemsByAccountsData(state) { accountTotalAmountAnalysisData(state) {
const userStore = useUserStore(); const userStore = useUserStore();
const accountsStore = useAccountsStore(); const accountsStore = useAccountsStore();
const exchangeRatesStore = useExchangeRatesStore(); const exchangeRatesStore = useExchangeRatesStore();
@@ -323,7 +323,7 @@ export const useStatisticsStore = defineStore('statistics', {
items: allDataItems items: allDataItems
} }
}, },
statisticsData(state) { categoricalAnalysisData(state) {
let combinedData = { let combinedData = {
items: [], items: [],
totalAmount: 0 totalAmount: 0
@@ -335,10 +335,10 @@ export const useStatisticsStore = defineStore('statistics', {
state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByAccount.type || state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByAccount.type ||
state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByPrimaryCategory.type || state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeByPrimaryCategory.type ||
state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeBySecondaryCategory.type) { state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.IncomeBySecondaryCategory.type) {
combinedData = state.statisticsItemsByTransactionStatisticsData; combinedData = state.transactionCategoryTotalAmountAnalysisData;
} else if (state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalAssets.type || } else if (state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalAssets.type ||
state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalLiabilities.type) { state.transactionStatisticsFilter.chartDataType === statisticsConstants.allChartDataTypes.AccountTotalLiabilities.type) {
combinedData = state.statisticsItemsByAccountsData; combinedData = state.accountTotalAmountAnalysisData;
} }
const allStatisticsItems = []; const allStatisticsItems = [];
@@ -410,11 +410,11 @@ export const useStatisticsStore = defineStore('statistics', {
this.transactionStatisticsFilter.dateType = statisticsConstants.defaultDataRangeType; this.transactionStatisticsFilter.dateType = statisticsConstants.defaultDataRangeType;
this.transactionStatisticsFilter.startTime = 0; this.transactionStatisticsFilter.startTime = 0;
this.transactionStatisticsFilter.endTime = 0; this.transactionStatisticsFilter.endTime = 0;
this.transactionStatisticsFilter.chartType = statisticsConstants.defaultChartType; this.transactionStatisticsFilter.chartType = statisticsConstants.defaultCategoricalChartType;
this.transactionStatisticsFilter.chartDataType = statisticsConstants.defaultChartDataType; this.transactionStatisticsFilter.chartDataType = statisticsConstants.defaultChartDataType;
this.transactionStatisticsFilter.filterAccountIds = {}; this.transactionStatisticsFilter.filterAccountIds = {};
this.transactionStatisticsFilter.filterCategoryIds = {}; this.transactionStatisticsFilter.filterCategoryIds = {};
this.transactionStatisticsData = {}; this.transactionCategoryStatisticsData = {};
this.transactionStatisticsStateInvalid = true; this.transactionStatisticsStateInvalid = true;
}, },
initTransactionStatisticsFilter(filter) { initTransactionStatisticsFilter(filter) {
@@ -424,8 +424,8 @@ export const useStatisticsStore = defineStore('statistics', {
let defaultChartType = settingsStore.appSettings.statistics.defaultChartType; let defaultChartType = settingsStore.appSettings.statistics.defaultChartType;
if (defaultChartType !== statisticsConstants.allChartTypes.Pie && defaultChartType !== statisticsConstants.allChartTypes.Bar) { if (defaultChartType !== statisticsConstants.allCategoricalChartTypes.Pie && defaultChartType !== statisticsConstants.allCategoricalChartTypes.Bar) {
defaultChartType = statisticsConstants.defaultChartType; defaultChartType = statisticsConstants.defaultCategoricalChartType;
} }
let defaultChartDataType = settingsStore.appSettings.statistics.defaultChartDataType; let defaultChartDataType = settingsStore.appSettings.statistics.defaultChartDataType;
@@ -481,7 +481,7 @@ export const useStatisticsStore = defineStore('statistics', {
if (filter && isNumber(filter.chartType)) { if (filter && isNumber(filter.chartType)) {
this.transactionStatisticsFilter.chartType = filter.chartType; this.transactionStatisticsFilter.chartType = filter.chartType;
} else { } else {
this.transactionStatisticsFilter.chartType = statisticsConstants.defaultChartType; this.transactionStatisticsFilter.chartType = statisticsConstants.defaultCategoricalChartType;
} }
if (filter && isNumber(filter.chartDataType)) { if (filter && isNumber(filter.chartDataType)) {
@@ -578,7 +578,7 @@ export const useStatisticsStore = defineStore('statistics', {
return querys.join('&'); return querys.join('&');
}, },
loadTransactionStatistics({ force }) { loadCategoricalAnalysis({ force }) {
const self = this; const self = this;
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
@@ -599,12 +599,12 @@ export const useStatisticsStore = defineStore('statistics', {
self.updateTransactionStatisticsInvalidState(false); self.updateTransactionStatisticsInvalidState(false);
} }
if (force && data.result && isEquals(self.transactionStatisticsData, data.result)) { if (force && data.result && isEquals(self.transactionCategoryStatisticsData, data.result)) {
reject({ message: 'Data is up to date' }); reject({ message: 'Data is up to date' });
return; return;
} }
self.transactionStatisticsData = data.result; self.transactionCategoryStatisticsData = data.result;
resolve(data.result); resolve(data.result);
}).catch(error => { }).catch(error => {
src/views/desktop/app/settings/tabs/AppStatisticsSettingTab.vue
+3 -6
View File
@@ -12,10 +12,7 @@
persistent-placeholder persistent-placeholder
:label="$t('Default Chart Type')" :label="$t('Default Chart Type')"
:placeholder="$t('Default Chart Type')" :placeholder="$t('Default Chart Type')"
:items="[ :items="allCategoricalChartTypes"
{ type: allChartTypes.Pie, displayName: $t('Pie Chart') },
{ type: allChartTypes.Bar, displayName: $t('Bar Chart') }
]"
v-model="defaultChartType" v-model="defaultChartType"
/> />
</v-col> </v-col>
@@ -99,8 +96,8 @@ export default {
}, },
computed: { computed: {
...mapStores(useSettingsStore), ...mapStores(useSettingsStore),
allChartTypes() { allCategoricalChartTypes() {
return statisticsConstants.allChartTypes; return this.$locale.getAllCategoricalChartTypes();
}, },
allChartDataTypes() { allChartDataTypes() {
return this.$locale.getAllStatisticsChartDataTypes(); return this.$locale.getAllStatisticsChartDataTypes();
src/views/desktop/statistics/TransactionPage.vue
+24 -49
View File
@@ -13,42 +13,26 @@
<div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'"> <div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
<span class="text-subtitle-2">{{ $t('Chart Type') }}</span> <span class="text-subtitle-2">{{ $t('Chart Type') }}</span>
<v-select <v-select
item-title="name" item-title="displayName"
item-value="type" item-value="type"
class="mt-2" class="mt-2"
density="compact" density="compact"
:disabled="loading" :disabled="loading"
:items="allChartTypesArray" :items="allChartTypes"
v-model="queryChartType" v-model="queryChartType"
> />
<template #selection="{ item }">
<span class="cursor-pointer">{{ $t(item.title) }}</span>
</template>
<template #item="{ props, item }">
<v-list-item v-bind="props" :title="$t(item.title)"></v-list-item>
</template>
</v-select>
</div> </div>
<div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'"> <div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
<span class="text-subtitle-2">{{ $t('Sort Order') }}</span> <span class="text-subtitle-2">{{ $t('Sort Order') }}</span>
<v-select <v-select
item-title="name" item-title="displayName"
item-value="type" item-value="type"
class="mt-2" class="mt-2"
density="compact" density="compact"
:disabled="loading" :disabled="loading"
:items="allSortingTypesArray" :items="allSortingTypesArray"
v-model="querySortingType" v-model="querySortingType"
> />
<template #selection="{ item }">
<span class="cursor-pointer">{{ $t(item.title) }}</span>
</template>
<template #item="{ props, item }">
<v-list-item v-bind="props" :title="$t(item.title)"></v-list-item>
</template>
</v-select>
</div> </div>
<v-tabs show-arrows class="my-4" direction="vertical" <v-tabs show-arrows class="my-4" direction="vertical"
:disabled="loading" v-model="query.chartDataType" :disabled="loading" v-model="query.chartDataType"
@@ -134,12 +118,12 @@
</template> </template>
<v-card-text class="statistics-overview-title pt-0" :class="{ 'disabled': loading }" <v-card-text class="statistics-overview-title pt-0" :class="{ 'disabled': loading }"
v-if="initing || (statisticsData && statisticsData.items && statisticsData.items.length)"> v-if="initing || (categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length)">
<span class="statistics-subtitle">{{ totalAmountName }}</span> <span class="statistics-subtitle">{{ totalAmountName }}</span>
<span class="statistics-overview-amount ml-3" <span class="statistics-overview-amount ml-3"
:class="statisticsTextColor" :class="statisticsTextColor"
v-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length"> v-if="!initing && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
{{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }} {{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency) }}
</span> </span>
<v-skeleton-loader class="skeleton-no-margin ml-3 mb-2" <v-skeleton-loader class="skeleton-no-margin ml-3 mb-2"
width="120px" type="text" :loading="true" width="120px" type="text" :loading="true"
@@ -147,11 +131,11 @@
</v-card-text> </v-card-text>
<v-card-text class="statistics-overview-title pt-0" <v-card-text class="statistics-overview-title pt-0"
v-else-if="!initing && (!statisticsData || !statisticsData.items || !statisticsData.items.length)"> v-else-if="!initing && (!categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length)">
<span class="statistics-subtitle statistics-overview-empty-tip">{{ $t('No transaction data') }}</span> <span class="statistics-subtitle statistics-overview-empty-tip">{{ $t('No transaction data') }}</span>
</v-card-text> </v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Pie"> <v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allCategoricalChartTypes.Pie">
<pie-chart <pie-chart
:items="[ :items="[
{id: '1', name: '---', value: 60, color: '7c7c7f'}, {id: '1', name: '---', value: 60, color: '7c7c7f'},
@@ -166,7 +150,7 @@
v-if="initing" v-if="initing"
></pie-chart> ></pie-chart>
<pie-chart <pie-chart
:items="statisticsData && statisticsData.items && statisticsData.items.length ? statisticsData.items : []" :items="categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length ? categoricalAnalysisData.items : []"
:min-valid-percent="0.0001" :min-valid-percent="0.0001"
:show-value="showAmountInChart" :show-value="showAmountInChart"
:enable-click-item="true" :enable-click-item="true"
@@ -182,7 +166,7 @@
/> />
</v-card-text> </v-card-text>
<v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Bar"> <v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allCategoricalChartTypes.Bar">
<v-list rounded lines="two" v-if="initing"> <v-list rounded lines="two" v-if="initing">
<template :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"> <template :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
<v-list-item class="pl-0"> <v-list-item class="pl-0">
@@ -204,9 +188,9 @@
<v-divider v-if="itemIdx < 3"/> <v-divider v-if="itemIdx < 3"/>
</template> </template>
</v-list> </v-list>
<v-list class="py-0" rounded lines="two" v-else-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length"> <v-list class="py-0" rounded lines="two" v-else-if="!initing && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
<template :key="idx" <template :key="idx"
v-for="(item, idx) in statisticsData.items"> v-for="(item, idx) in categoricalAnalysisData.items">
<v-list-item class="pl-0" v-if="!item.hidden"> <v-list-item class="pl-0" v-if="!item.hidden">
<template #prepend> <template #prepend>
<router-link class="statistics-list-item" :to="getItemLinkUrl(item)"> <router-link class="statistics-list-item" :to="getItemLinkUrl(item)">
@@ -232,7 +216,7 @@
</div> </div>
</router-link> </router-link>
</v-list-item> </v-list-item>
<v-divider v-if="!item.hidden && idx !== statisticsData.items.length - 1"/> <v-divider v-if="!item.hidden && idx !== categoricalAnalysisData.items.length - 1"/>
</template> </template>
</v-list> </v-list>
</v-card-text> </v-card-text>
@@ -348,7 +332,7 @@ export default {
return this.statisticsStore.transactionStatisticsFilter; return this.statisticsStore.transactionStatisticsFilter;
}, },
queryChartDataCategory() { queryChartDataCategory() {
return this.statisticsStore.transactionStatisticsChartDataCategory; return this.statisticsStore.categoricalAnalysisChartDataCategory;
}, },
queryChartType: { queryChartType: {
get: function () { get: function () {
@@ -373,19 +357,10 @@ export default {
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime); return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime);
}, },
allChartTypes() { allChartTypes() {
return statisticsConstants.allChartTypes; return this.$locale.getAllCategoricalChartTypes();
}, },
allChartTypesArray() { allCategoricalChartTypes() {
return [ return statisticsConstants.allCategoricalChartTypes;
{
name: 'Pie Chart',
type: this.allChartTypes.Pie
},
{
name: 'Bar Chart',
type: this.allChartTypes.Bar
}
];
}, },
allChartDataTypes() { allChartDataTypes() {
return statisticsConstants.allChartDataTypes; return statisticsConstants.allChartDataTypes;
@@ -394,7 +369,7 @@ export default {
return statisticsConstants.allSortingTypes; return statisticsConstants.allSortingTypes;
}, },
allSortingTypesArray() { allSortingTypesArray() {
return statisticsConstants.allSortingTypesArray; return this.$locale.getAllStatisticsSortingTypes();
}, },
allDateRanges() { allDateRanges() {
return datetimeConstants.allDateRanges; return datetimeConstants.allDateRanges;
@@ -419,8 +394,8 @@ export default {
return this.$t('Total Amount'); return this.$t('Total Amount');
}, },
statisticsData() { categoricalAnalysisData() {
return this.statisticsStore.statisticsData; return this.statisticsStore.categoricalAnalysisData;
}, },
statisticsTextColor() { statisticsTextColor() {
if (this.query.chartDataType === this.allChartDataTypes.ExpenseByAccount.type || if (this.query.chartDataType === this.allChartDataTypes.ExpenseByAccount.type ||
@@ -467,7 +442,7 @@ export default {
self.accountsStore.loadAllAccounts({ force: false }), self.accountsStore.loadAllAccounts({ force: false }),
self.transactionCategoriesStore.loadAllCategories({ force: false }) self.transactionCategoriesStore.loadAllCategories({ force: false })
]).then(() => { ]).then(() => {
return self.statisticsStore.loadTransactionStatistics({ return self.statisticsStore.loadCategoricalAnalysis({
force: false force: false
}); });
}).then(() => { }).then(() => {
@@ -504,7 +479,7 @@ export default {
self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type || self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type || self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) { self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) {
dispatchPromise = self.statisticsStore.loadTransactionStatistics({ dispatchPromise = self.statisticsStore.loadCategoricalAnalysis({
force: force force: force
}); });
} else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type || } else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type ||
src/views/mobile/statistics/SettingsPage.vue
+5 -4
View File
@@ -7,8 +7,9 @@
:title="$t('Default Chart Type')" :title="$t('Default Chart Type')"
smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Chart Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }"> smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Chart Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
<select v-model="defaultChartType"> <select v-model="defaultChartType">
<option :value="allChartTypes.Pie">{{ $t('Pie Chart') }}</option> <option :value="chartType.type"
<option :value="allChartTypes.Bar">{{ $t('Bar Chart') }}</option> :key="chartType.type"
v-for="chartType in allCategoricalChartTypes">{{ chartType.displayName }}</option>
</select> </select>
</f7-list-item> </f7-list-item>
@@ -68,8 +69,8 @@ import statisticsConstants from '@/consts/statistics.js';
export default { export default {
computed: { computed: {
...mapStores(useSettingsStore), ...mapStores(useSettingsStore),
allChartTypes() { allCategoricalChartTypes() {
return statisticsConstants.allChartTypes; return this.$locale.getAllCategoricalChartTypes();
}, },
allChartDataTypes() { allChartDataTypes() {
return this.$locale.getAllStatisticsChartDataTypes(); return this.$locale.getAllStatisticsChartDataTypes();
src/views/mobile/statistics/TransactionPage.vue
+25 -24
View File
@@ -28,7 +28,7 @@
</f7-list> </f7-list>
</f7-popover> </f7-popover>
<f7-card v-if="query.chartType === allChartTypes.Pie"> <f7-card v-if="query.chartType === allCategoricalChartTypes.Pie">
<f7-card-header class="no-border display-block"> <f7-card-header class="no-border display-block">
<div class="statistics-chart-header full-line text-align-right"> <div class="statistics-chart-header full-line text-align-right">
<span style="margin-right: 4px;">{{ $t('Sort by') }}</span> <span style="margin-right: 4px;">{{ $t('Sort by') }}</span>
@@ -48,7 +48,7 @@
v-if="loading" v-if="loading"
></pie-chart> ></pie-chart>
<pie-chart <pie-chart
:items="statisticsData.items" :items="categoricalAnalysisData.items"
:min-valid-percent="0.0001" :min-valid-percent="0.0001"
:show-value="showAmountInChart" :show-value="showAmountInChart"
:show-center-text="true" :show-center-text="true"
@@ -64,20 +64,20 @@
v-else-if="!loading" v-else-if="!loading"
@click="clickPieChartItem" @click="clickPieChartItem"
> >
<text class="statistics-pie-chart-total-amount-title" v-if="statisticsData.items && statisticsData.items.length"> <text class="statistics-pie-chart-total-amount-title" v-if="categoricalAnalysisData.items && categoricalAnalysisData.items.length">
{{ totalAmountName }} {{ totalAmountName }}
</text> </text>
<text class="statistics-pie-chart-total-amount-value" v-if="statisticsData.items && statisticsData.items.length"> <text class="statistics-pie-chart-total-amount-value" v-if="categoricalAnalysisData.items && categoricalAnalysisData.items.length">
{{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency, 16) }} {{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency, 16) }}
</text> </text>
<text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!statisticsData.items || !statisticsData.items.length"> <text class="statistics-pie-chart-total-no-data" cy="50%" v-if="!categoricalAnalysisData.items || !categoricalAnalysisData.items.length">
{{ $t('No data') }} {{ $t('No data') }}
</text> </text>
</pie-chart> </pie-chart>
</f7-card-content> </f7-card-content>
</f7-card> </f7-card>
<f7-card v-else-if="query.chartType === allChartTypes.Bar"> <f7-card v-else-if="query.chartType === allCategoricalChartTypes.Bar">
<f7-card-header class="no-border display-block"> <f7-card-header class="no-border display-block">
<div class="statistics-chart-header display-flex full-line justify-content-space-between"> <div class="statistics-chart-header display-flex full-line justify-content-space-between">
<div> <div>
@@ -90,10 +90,10 @@
</div> </div>
<div class="display-flex full-line"> <div class="display-flex full-line">
<div :class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-color-red': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }"> <div :class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-color-red': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
<span v-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length"> <span v-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
{{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }} {{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency) }}
</span> </span>
<span :class="{ 'skeleton-text': loading }" v-else-if="loading || !statisticsData || !statisticsData.items || !statisticsData.items.length"> <span :class="{ 'skeleton-text': loading }" v-else-if="loading || !categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length">
{{ loading ? '***.**' : '---' }} {{ loading ? '***.**' : '---' }}
</span> </span>
</div> </div>
@@ -128,15 +128,15 @@
</f7-list-item> </f7-list-item>
</f7-list> </f7-list>
<f7-list v-else-if="!loading && (!statisticsData || !statisticsData.items || !statisticsData.items.length)"> <f7-list v-else-if="!loading && (!categoricalAnalysisData || !categoricalAnalysisData.items || !categoricalAnalysisData.items.length)">
<f7-list-item :title="$t('No transaction data')"></f7-list-item> <f7-list-item :title="$t('No transaction data')"></f7-list-item>
</f7-list> </f7-list>
<f7-list v-else-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length"> <f7-list v-else-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
<f7-list-item class="statistics-list-item" <f7-list-item class="statistics-list-item"
:link="getItemLinkUrl(item)" :link="getItemLinkUrl(item)"
:key="idx" :key="idx"
v-for="(item, idx) in statisticsData.items" v-for="(item, idx) in categoricalAnalysisData.items"
v-show="!item.hidden" v-show="!item.hidden"
> >
<template #media> <template #media>
@@ -196,11 +196,9 @@
<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.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, 1)">
<f7-icon f7="arrow_right_square"></f7-icon> <f7-icon f7="arrow_right_square"></f7-icon>
</f7-link> </f7-link>
<f7-link class="tabbar-text-with-ellipsis" @click="setChartType(allChartTypes.Pie)"> <f7-link class="tabbar-text-with-ellipsis" :key="chartType.type"
<span :class="{ 'tabbar-item-changed': query.chartType === allChartTypes.Pie }">{{ $t('Pie Chart') }}</span> v-for="chartType in allChartTypes" @click="setChartType(chartType.type)">
</f7-link> <span :class="{ 'tabbar-item-changed': query.chartType === chartType.type }">{{ chartType.displayName }}</span>
<f7-link class="tabbar-text-with-ellipsis" @click="setChartType(allChartTypes.Bar)">
<span :class="{ 'tabbar-item-changed': query.chartType === allChartTypes.Bar }">{{ $t('Bar Chart') }}</span>
</f7-link> </f7-link>
</f7-toolbar> </f7-toolbar>
@@ -295,7 +293,7 @@ export default {
return this.statisticsStore.transactionStatisticsFilter; return this.statisticsStore.transactionStatisticsFilter;
}, },
queryChartDataCategory() { queryChartDataCategory() {
return this.statisticsStore.transactionStatisticsChartDataCategory; return this.statisticsStore.categoricalAnalysisChartDataCategory;
}, },
queryChartDataTypeName() { queryChartDataTypeName() {
const queryChartDataTypeName = getNameByKeyValue(this.allChartDataTypes, this.query.chartDataType, 'type', 'name', 'Statistics'); const queryChartDataTypeName = getNameByKeyValue(this.allChartDataTypes, this.query.chartDataType, 'type', 'name', 'Statistics');
@@ -312,7 +310,10 @@ export default {
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime); return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.endTime);
}, },
allChartTypes() { allChartTypes() {
return statisticsConstants.allChartTypes; return this.$locale.getAllCategoricalChartTypes();
},
allCategoricalChartTypes() {
return statisticsConstants.allCategoricalChartTypes;
}, },
allChartDataTypes() { allChartDataTypes() {
return statisticsConstants.allChartDataTypes; return statisticsConstants.allChartDataTypes;
@@ -343,8 +344,8 @@ export default {
return this.$t('Total Amount'); return this.$t('Total Amount');
}, },
statisticsData() { categoricalAnalysisData() {
return this.statisticsStore.statisticsData; return this.statisticsStore.categoricalAnalysisData;
}, },
showAmountInChart() { showAmountInChart() {
if (!this.showAccountBalance if (!this.showAccountBalance
@@ -364,7 +365,7 @@ export default {
self.accountsStore.loadAllAccounts({ force: false }), self.accountsStore.loadAllAccounts({ force: false }),
self.transactionCategoriesStore.loadAllCategories({ force: false }) self.transactionCategoriesStore.loadAllCategories({ force: false })
]).then(() => { ]).then(() => {
return self.statisticsStore.loadTransactionStatistics({ return self.statisticsStore.loadCategoricalAnalysis({
force: false force: false
}); });
}).then(() => { }).then(() => {
@@ -399,7 +400,7 @@ export default {
self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type || self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type || self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) { self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) {
dispatchPromise = self.statisticsStore.loadTransactionStatistics({ dispatchPromise = self.statisticsStore.loadCategoricalAnalysis({
force: force force: force
}); });
} else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type || } else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type ||