code refactor
This commit is contained in:
MaysWind
@@ -62,6 +62,12 @@ const allSortingTypes = {
|
||||
}
|
||||
};
|
||||
|
||||
const allSortingTypesArray = [
|
||||
allSortingTypes.Amount,
|
||||
allSortingTypes.DisplayOrder,
|
||||
allSortingTypes.Name
|
||||
]
|
||||
|
||||
const defaultSortingType = allSortingTypes.Amount.type;
|
||||
|
||||
export default {
|
||||
@@ -71,5 +77,6 @@ export default {
|
||||
defaultChartDataType: defaultChartDataType,
|
||||
defaultDataRangeType: datetime.allDateRanges.ThisMonth.type,
|
||||
allSortingTypes: allSortingTypes,
|
||||
allSortingTypesArray: allSortingTypesArray,
|
||||
defaultSortingType: defaultSortingType,
|
||||
};
|
||||
|
||||
@@ -996,6 +996,7 @@ export default {
|
||||
'Amount value exceeds limitation': 'Amount value exceeds limitation',
|
||||
'Unable to delete this transaction': 'Unable to delete this transaction',
|
||||
'Unable to get transaction statistics': 'Unable to get transaction statistics',
|
||||
'Categorical Analysis': 'Categorical Analysis',
|
||||
'Total Amount': 'Total Amount',
|
||||
'Total Assets': 'Total Assets',
|
||||
'Total Liabilities': 'Total Liabilities',
|
||||
|
||||
@@ -996,6 +996,7 @@ export default {
|
||||
'Amount value exceeds limitation': '金额数值超出限制',
|
||||
'Unable to delete this transaction': '无法删除该交易',
|
||||
'Unable to get transaction statistics': '无法获取交易统计数据',
|
||||
'Categorical Analysis': '分类分析',
|
||||
'Total Amount': '总金额',
|
||||
'Total Assets': '总资产',
|
||||
'Total Liabilities': '总负债',
|
||||
|
||||
@@ -6,13 +6,53 @@
|
||||
<v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
|
||||
<div class="mx-6 my-4">
|
||||
<btn-vertical-group :disabled="loading" :buttons="[
|
||||
{ name: $t('Pie Chart'), value: allChartTypes.Pie },
|
||||
{ name: $t('Bar Chart'), value: allChartTypes.Bar }
|
||||
]" v-model="query.chartType" @update:model-value="setChartType" />
|
||||
{ name: $t('Categorical Analysis'), value: 'categoricalAnalysis' },
|
||||
]" v-model="activeTab" />
|
||||
</div>
|
||||
<v-divider />
|
||||
<div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
|
||||
<small>{{ $t('Chart Type') }}</small>
|
||||
<v-select
|
||||
item-title="name"
|
||||
item-value="type"
|
||||
class="mt-2"
|
||||
density="compact"
|
||||
:disabled="loading"
|
||||
:items="allChartTypesArray"
|
||||
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 class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
|
||||
<small>{{ $t('Sort By') }}</small>
|
||||
<v-select
|
||||
item-title="name"
|
||||
item-value="type"
|
||||
class="mt-2"
|
||||
density="compact"
|
||||
:disabled="loading"
|
||||
:items="allSortingTypesArray"
|
||||
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>
|
||||
<v-tabs show-arrows class="my-4" direction="vertical"
|
||||
:disabled="loading" v-model="query.chartDataType">
|
||||
:disabled="loading" v-model="query.chartDataType"
|
||||
v-if="activeTab === 'categoricalAnalysis'">
|
||||
<v-tab class="tab-text-truncate" :key="dataType.type" :value="dataType.type"
|
||||
v-for="dataType in allChartDataTypes">
|
||||
<span class="text-truncate">{{ $t(dataType.name) }}</span>
|
||||
@@ -22,7 +62,7 @@
|
||||
</v-navigation-drawer>
|
||||
<v-main>
|
||||
<v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
|
||||
<v-window-item value="statisticsPage">
|
||||
<v-window-item value="categoricalAnalysis">
|
||||
<v-card variant="flat" min-height="680">
|
||||
<template #title>
|
||||
<div class="title-and-toolbar d-flex align-center">
|
||||
@@ -63,24 +103,6 @@
|
||||
@click="shiftDateRange(query.startTime, query.endTime, 1)"/>
|
||||
</v-btn-group>
|
||||
|
||||
<v-menu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<v-btn class="ml-3" color="default" variant="outlined"
|
||||
:prepend-icon="icons.sort" :disabled="loading"
|
||||
v-bind="props">{{ querySortingTypeName }}</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item :key="sortingType.type" :value="sortingType.type"
|
||||
:append-icon="(query.sortingType === sortingType.type ? icons.check : null)"
|
||||
v-for="sortingType in allSortingTypes">
|
||||
<v-list-item-title
|
||||
class="cursor-pointer"
|
||||
@click="setSortingType(sortingType.type)">
|
||||
{{ $t(sortingType.fullName) }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn density="compact" color="default" variant="text"
|
||||
class="ml-2" :icon="true" :disabled="loading"
|
||||
v-if="!loading" @click="reload">
|
||||
@@ -255,7 +277,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
|
||||
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
import statisticsConstants from '@/consts/statistics.js';
|
||||
import { getNameByKeyValue, limitText, formatPercent } from '@/lib/common.js'
|
||||
import { limitText, formatPercent } from '@/lib/common.js'
|
||||
import {
|
||||
getShiftedDateRangeAndDateType,
|
||||
getDateRangeByDateType
|
||||
@@ -287,7 +309,7 @@ export default {
|
||||
const { mdAndUp } = useDisplay();
|
||||
|
||||
return {
|
||||
activeTab: 'statisticsPage',
|
||||
activeTab: 'categoricalAnalysis',
|
||||
initing: true,
|
||||
loading: true,
|
||||
alwaysShowNav: mdAndUp.value,
|
||||
@@ -327,9 +349,21 @@ export default {
|
||||
queryChartDataCategory() {
|
||||
return this.statisticsStore.transactionStatisticsChartDataCategory;
|
||||
},
|
||||
querySortingTypeName() {
|
||||
const querySortingTypeName = getNameByKeyValue(this.allSortingTypes, this.query.sortingType, 'type', 'fullName', 'System Default');
|
||||
return this.$t(querySortingTypeName);
|
||||
queryChartType: {
|
||||
get: function () {
|
||||
return this.query.chartType;
|
||||
},
|
||||
set: function(value) {
|
||||
this.setChartType(value);
|
||||
}
|
||||
},
|
||||
querySortingType: {
|
||||
get: function () {
|
||||
return this.query.sortingType;
|
||||
},
|
||||
set: function(value) {
|
||||
this.setSortingType(value);
|
||||
}
|
||||
},
|
||||
queryStartTime() {
|
||||
return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.startTime);
|
||||
@@ -340,12 +374,27 @@ export default {
|
||||
allChartTypes() {
|
||||
return statisticsConstants.allChartTypes;
|
||||
},
|
||||
allChartTypesArray() {
|
||||
return [
|
||||
{
|
||||
name: 'Pie Chart',
|
||||
type: this.allChartTypes.Pie
|
||||
},
|
||||
{
|
||||
name: 'Bar Chart',
|
||||
type: this.allChartTypes.Bar
|
||||
}
|
||||
];
|
||||
},
|
||||
allChartDataTypes() {
|
||||
return statisticsConstants.allChartDataTypes;
|
||||
},
|
||||
allSortingTypes() {
|
||||
return statisticsConstants.allSortingTypes;
|
||||
},
|
||||
allSortingTypesArray() {
|
||||
return statisticsConstants.allSortingTypesArray;
|
||||
},
|
||||
allDateRanges() {
|
||||
return datetimeConstants.allDateRanges;
|
||||
},
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<f7-popover class="chart-data-type-popover-menu"
|
||||
v-model:opened="showChartDataTypePopover">
|
||||
<f7-list dividers>
|
||||
<f7-list-item group-title :title="$t('Categorical Analysis')" />
|
||||
<f7-list-item :title="$t(dataType.name)"
|
||||
:key="dataType.type"
|
||||
v-for="dataType in allChartDataTypes"
|
||||
|
||||
Reference in New Issue
Block a user