add "sort by" drop down list in statistics page

src/components/mobile/PieChart.vue

@@ -260,7 +260,7 @@ export default {
 }
 
 .pie-chart {
-    margin: 24px 24px 0 24px;
+    margin: 0 24px 0 24px;
 }
 
 .pie-chart-toolbox-container {

src/consts/statistics.js

@@ -45,12 +45,21 @@ const allChartDataTypes = {
 const defaultChartDataType = allChartDataTypes.ExpenseByPrimaryCategory.type;
 
 const allSortingTypes = {
-    ByAmount: 0,
+    Amount: {
-    ByDisplayOrder: 1,
+        type: 0,
-    ByName: 2
+        name: 'Amount'
+    },
+    DisplayOrder: {
+        type: 1,
+        name: 'Display Order'
+    },
+    Name: {
+        type: 2,
+        name: 'Name'
+    }
 };
 
-const defaultSortingType = allSortingTypes.ByAmount;
+const defaultSortingType = allSortingTypes.Amount.type;
 
 export default {
     allChartTypes: allChartTypes,

src/lib/settings.js

@@ -24,7 +24,7 @@ const defaultSettings = {
         defaultDataRangeType: statisticsConstants.defaultDataRangeType,
         defaultAccountFilter: {},
         defaultTransactionCategoryFilter: {},
-        sortingType: statisticsConstants.defaultSortingType
+        defaultSortingType: statisticsConstants.defaultSortingType
     },
     animate: true,
     autoDarkMode: true
@@ -160,8 +160,8 @@ export default {
     setStatisticsDefaultAccountFilter: value => setSubOption('statistics', 'defaultAccountFilter', value),
     getStatisticsDefaultTransactionCategoryFilter: () => getSubOption('statistics', 'defaultTransactionCategoryFilter'),
     setStatisticsDefaultTransactionCategoryFilter: value => setSubOption('statistics', 'defaultTransactionCategoryFilter', value),
-    getStatisticsSortingType: () => getSubOption('statistics', 'sortingType'),
+    getStatisticsSortingType: () => getSubOption('statistics', 'defaultSortingType'),
-    setStatisticsSortingType: value => setSubOption('statistics', 'sortingType', value),
+    setStatisticsSortingType: value => setSubOption('statistics', 'defaultSortingType', value),
     isEnableAnimate: () => getOption('animate'),
     setEnableAnimate: value => setOption('animate', value),
     isEnableAutoDarkMode: () => getOption('autoDarkMode'),

src/locales/en.js

@@ -687,6 +687,7 @@ export default {
     'Custom': 'Custom',
     'Pie Chart': 'Pie Chart',
     'Bar Chart': 'Bar Chart',
+    'Sort By': 'Sort By',
     'User': 'User',
     'Application': 'Application',
     'Details': 'Details',
@@ -862,10 +863,10 @@ export default {
     'Default Date Range': 'Default Date Range',
     'Default Account Filter': 'Default Account Filter',
     'Default Transaction Category Filter': 'Default Transaction Category Filter',
-    'Sort By': 'Sort By',
+    'Default Sort By': 'Default Sort By',
-    'By Amount': 'By Amount',
+    'Amount': 'Amount',
-    'By Display Order': 'By Display Order',
+    'Display Order': 'Display Order',
-    'By Name': 'By Name',
+    'Name': 'Name',
     'Filter Accounts': 'Filter Accounts',
     'Filter Transaction Categories': 'Filter Transaction Categories',
     'User Profile': 'User Profile',

src/locales/zh_Hans.js

@@ -687,6 +687,7 @@ export default {
     'Custom': '自定义',
     'Pie Chart': '饼图',
     'Bar Chart': '条形图',
+    'Sort By': '排序方式',
     'User': '用户',
     'Application': '应用',
     'Details': '详情',
@@ -862,10 +863,10 @@ export default {
     'Default Date Range': '默认时间范围',
     'Default Account Filter': '默认账号过滤',
     'Default Transaction Category Filter': '默认交易分类过滤',
-    'Sort By': '排序方式',
+    'Default Sort By': '默认排序方式',
-    'By Amount': '金额',
+    'Amount': '金额',
-    'By Display Order': '显示顺序',
+    'Display Order': '显示顺序',
-    'By Name': '名称',
+    'Name': '名称',
     'Filter Accounts': '过滤账户',
     'Filter Transaction Categories': '过滤交易类型',
     'User Profile': '用户信息',

src/store/index.js

@@ -890,6 +890,12 @@ const stores = {
             } else {
                 state.transactionStatisticsFilter.filterCategoryIds = {};
             }
+
+            if (filter && utils.isNumber(filter.sortingType)) {
+                state.transactionStatisticsFilter.sortingType = filter.sortingType;
+            } else {
+                state.transactionStatisticsFilter.sortingType = statisticsConstants.defaultSortingType;
+            }
         },
         [UPDATE_TRANSACTION_STATISTICS_FILTER] (state, filter) {
             if (filter && utils.isNumber(filter.dateType)) {
@@ -919,6 +925,10 @@ const stores = {
             if (filter && utils.isObject(filter.filterCategoryIds)) {
                 state.transactionStatisticsFilter.filterCategoryIds = filter.filterCategoryIds;
             }
+
+            if (filter && utils.isNumber(filter.sortingType)) {
+                state.transactionStatisticsFilter.sortingType = filter.sortingType;
+            }
         },
         [UPDATE_TRANSACTION_STATISTICS_INVALID_STATE] (state, invalidState) {
             state.transactionStatisticsStateInvalid = invalidState;

src/views/mobile/statistics/Settings.vue

@@ -20,7 +20,7 @@
                         <select v-model="defaultChartDataType">
                             <option v-for="chartDataType in allChartDataTypes"
                                     :key="chartDataType.type"
-                                    :value="chartDataType.type">{{ chartDataType.name | localized }}</option>
+                                    :value="chartDataType.type">{{ $t(chartDataType.name) }}</option>
                         </select>
                     </f7-list-item>
 
@@ -30,7 +30,7 @@
                         <select v-model="defaultDateRange">
                             <option v-for="dateRange in allDateRanges"
                                     :key="dateRange.type"
-                                    :value="dateRange.type">{{ dateRange.name | localized }}</option>
+                                    :value="dateRange.type">{{ $t(dateRange.name) }}</option>
                         </select>
                     </f7-list-item>
 
@@ -39,12 +39,12 @@
                     <f7-list-item :title="$t('Default Transaction Category Filter')" link="/statistic/filter/category?modifyDefault=1"></f7-list-item>
 
                     <f7-list-item
-                        :title="$t('Sort By')"
+                        :title="$t('Default Sort By')"
                         smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
-                        <select v-model="sortBy">
+                        <select v-model="defaultSortingType">
-                            <option :value="$constants.statistics.allSortingTypes.ByAmount">{{ $t('By Amount') }}</option>
+                            <option v-for="sortingType in allSortingTypes"
-                            <option :value="$constants.statistics.allSortingTypes.ByDisplayOrder">{{ $t('By Display Order') }}</option>
+                                    :key="sortingType.type"
-                            <option :value="$constants.statistics.allSortingTypes.ByName">{{ $t('By Name') }}</option>
+                                    :value="sortingType.type">{{ $t(sortingType.name) }}</option>
                         </select>
                     </f7-list-item>
                 </f7-list>
@@ -59,6 +59,9 @@ export default {
         allChartDataTypes() {
             return this.$constants.statistics.allChartDataTypes;
         },
+        allSortingTypes() {
+            return this.$constants.statistics.allSortingTypes;
+        },
         allDateRanges() {
             const allDateRanges = [];
 
@@ -100,7 +103,7 @@ export default {
                 this.$settings.setStatisticsDefaultDateRange(value);
             }
         },
-        sortBy: {
+        defaultSortingType: {
             get: function () {
                 return this.$settings.getStatisticsSortingType();
             },

src/views/mobile/statistics/Transaction.vue

@@ -25,7 +25,13 @@
         </f7-popover>
 
         <f7-card v-if="query.chartType === $constants.statistics.allChartTypes.Pie">
-            <f7-card-content class="pie-chart-container" :padding="false">
+            <f7-card-header class="no-border">
+                <small class="full-line text-align-right">
+                    <span style="margin-right: 4px;">{{ $t('Sort By') }}</span>
+                    <f7-link href="#" popover-open=".sorting-type-popover-menu">{{ query.sortingType | optionName(allSortingTypes, 'type', 'name', 'System Default') | localized }}</f7-link>
+                </small>
+            </f7-card-header>
+            <f7-card-content class="pie-chart-container" style="margin-top: -6px" :padding="false">
                 <pie-chart
                     :items="[{value: 60, color: '7c7c7f'}, {value: 20, color: 'a5a5aa'}, {value: 20, color: 'c5c5c9'}]"
                     :skeleton="true"
@@ -68,7 +74,13 @@
         </f7-card>
 
         <f7-card v-else-if="query.chartType === $constants.statistics.allChartTypes.Bar">
-            <f7-card-content class="no-safe-areas" :padding="false">
+            <f7-card-header class="no-border">
+                <small class="full-line text-align-right">
+                    <span style="margin-right: 4px;">{{ $t('Sort By') }}</span>
+                    <f7-link href="#" popover-open=".sorting-type-popover-menu">{{ query.sortingType | optionName(allSortingTypes, 'type', 'name', 'System Default') | localized }}</f7-link>
+                </small>
+            </f7-card-header>
+            <f7-card-content class="no-safe-areas" style="margin-top: -14px" :padding="false">
                 <f7-list class="statistics-list-item skeleton-text" v-if="loading">
                     <f7-list-item link="#">
                         <div slot="media" class="display-flex no-padding-horizontal">
@@ -186,6 +198,20 @@
             </f7-card-content>
         </f7-card>
 
+        <f7-popover class="sorting-type-popover-menu" :opened="showSortingTypePopover"
+                    @popover:open="scrollPopoverToSelectedItem"
+                    @popover:opened="showSortingTypePopover = true" @popover:closed="showSortingTypePopover = false">
+            <f7-list>
+                <f7-list-item v-for="sortingType in allSortingTypes"
+                              :key="sortingType.type"
+                              :class="{ 'list-item-selected': query.sortingType === sortingType.type }"
+                              :title="$t(sortingType.name)"
+                              @click="setSortingType(sortingType.type)">
+                    <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.sortingType === sortingType.type"></f7-icon>
+                </f7-list-item>
+            </f7-list>
+        </f7-popover>
+
         <f7-toolbar tabbar bottom class="toolbar-item-auto-size">
             <f7-link :class="{ 'disabled': 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_left_square"></f7-icon>
@@ -211,7 +237,7 @@
                 <f7-list-item v-for="dateRange in allDateRanges"
                               :key="dateRange.type"
                               :class="{ 'list-item-selected': query.dateType === dateRange.type }"
-                              :title="dateRange.name | localized"
+                              :title="$t(dateRange.name)"
                               @click="setDateFilter(dateRange.type)">
                     <f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
                     <div slot="footer"
@@ -255,9 +281,9 @@ export default {
         return {
             loading: true,
             loadingError: null,
-            sortBy: self.$settings.getStatisticsSortingType(),
             showAccountBalance: self.$settings.isShowAccountBalance(),
             showChartDataTypePopover: false,
+            showSortingTypePopover: false,
             showDatePopover: false,
             showCustomDateRangeSheet: false,
             showMoreActionSheet: false
@@ -276,6 +302,9 @@ export default {
         allChartDataTypes() {
             return this.$constants.statistics.allChartDataTypes;
         },
+        allSortingTypes() {
+            return this.$constants.statistics.allSortingTypes;
+        },
         allDateRanges() {
             return this.$constants.datetime.allDateRanges;
         },
@@ -320,7 +349,7 @@ export default {
                 allStatisticsItems.push(data);
             }
 
-            if (this.sortBy === this.$constants.statistics.allSortingTypes.ByDisplayOrder) {
+            if (self.query.sortingType === this.allSortingTypes.DisplayOrder.type) {
                 allStatisticsItems.sort(function (data1, data2) {
                     for (let i = 0; i < Math.min(data1.displayOrders.length, data2.displayOrders.length); i++) {
                         if (data1.displayOrders[i] !== data2.displayOrders[i]) {
@@ -333,7 +362,7 @@ export default {
                         sensitivity: 'base'
                     });
                 });
-            } else if (this.sortBy === this.$constants.statistics.allSortingTypes.ByName) {
+            } else if (self.query.sortingType === this.allSortingTypes.Name.type) {
                 allStatisticsItems.sort(function (data1, data2) {
                     return data1.name.localeCompare(data2.name, undefined, { // asc
                         numeric: true,
@@ -388,6 +417,12 @@ export default {
             defaultDateRange = self.$constants.statistics.defaultDataRangeType;
         }
 
+        let defaultSortType = self.$settings.getStatisticsSortingType();
+
+        if (defaultSortType < self.allSortingTypes.Amount.type || defaultSortType > self.allSortingTypes.Name.type) {
+            defaultSortType = self.$constants.statistics.defaultSortingType;
+        }
+
         const dateRange = self.$utilities.getDateRangeByDateType(defaultDateRange, self.firstDayOfWeek);
 
         self.$store.dispatch('initTransactionStatisticsFilter', {
@@ -398,6 +433,7 @@ export default {
             chartDataType: defaultChartDataType,
             filterAccountIds: self.$settings.getStatisticsDefaultAccountFilter() || {},
             filterCategoryIds: self.$settings.getStatisticsDefaultTransactionCategoryFilter() || {},
+            sortingType: defaultSortType,
         });
 
         Promise.all([
@@ -420,10 +456,6 @@ export default {
     },
     methods: {
         onPageAfterIn() {
-            if (this.sortBy !== this.$settings.getStatisticsSortingType()) {
-                this.sortBy = this.$settings.getStatisticsSortingType();
-            }
-
             if (this.$store.state.transactionStatisticsStateInvalid && !this.loading) {
                 this.reload(null);
             }
@@ -432,22 +464,39 @@ export default {
         },
         reload(done) {
             const self = this;
+            let dispatchPromise = null;
 
-            self.$store.dispatch('loadTransactionStatistics', {
+            if (self.query.chartDataType === self.allChartDataTypes.ExpenseByAccount.type ||
-                defaultCurrency: self.defaultCurrency
+                self.query.chartDataType === self.allChartDataTypes.ExpenseByPrimaryCategory.type ||
-            }).then(() => {
+                self.query.chartDataType === self.allChartDataTypes.ExpenseBySecondaryCategory.type ||
-                if (done) {
+                self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type ||
-                    done();
+                self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type ||
-                }
+                self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) {
-            }).catch(error => {
+                dispatchPromise = self.$store.dispatch('loadTransactionStatistics', {
-                if (done) {
+                    defaultCurrency: self.defaultCurrency
-                    done();
+                });
-                }
+            } else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type ||
+                self.query.chartDataType === self.allChartDataTypes.AccountTotalLiabilities.type) {
+                dispatchPromise = self.$store.dispatch('loadAllAccounts', {
+                    force: true
+                });
+            }
 
-                if (!error.processed) {
+            if (dispatchPromise) {
-                    self.$toast(error.message || error);
+                dispatchPromise.then(() => {
-                }
+                    if (done) {
-            });
+                        done();
+                    }
+                }).catch(error => {
+                    if (done) {
+                        done();
+                    }
+
+                    if (!error.processed) {
+                        self.$toast(error.message || error);
+                    }
+                });
+            }
         },
         setChartType(chartType) {
             this.$store.dispatch('updateTransactionStatisticsFilter', {
@@ -460,6 +509,19 @@ export default {
             });
             this.showChartDataTypePopover = false;
         },
+        setSortingType(sortingType) {
+            if (sortingType < this.allSortingTypes.Amount.type || sortingType > this.allSortingTypes.Name.type) {
+                this.showSortingTypePopover = false;
+                return;
+            }
+
+            this.$store.dispatch('updateTransactionStatisticsFilter', {
+                sortingType: sortingType
+            });
+
+            this.showSortingTypePopover = false;
+            this.reload(null);
+        },
         setDateFilter(dateType) {
             if (dateType === this.allDateRanges.Custom.type) { // Custom
                 this.showCustomDateRangeSheet = true;
@@ -663,6 +725,10 @@ export default {
 </script>
 
 <style>
+.card-header.no-border:after {
+    display: none;
+}
+
 .statistics-pie-chart .pie-chart-text-group {
     fill: #fff;
     text-anchor: middle;
@@ -690,7 +756,6 @@ export default {
 }
 
 .statistics-list-item-overview {
-    padding-top: 12px;
     margin-bottom: 6px;
 }