support modifying statistics page default settings

src/consts/statistics.js

@@ -1,3 +1,5 @@
+import datetime from './datetime.js';
+
 const allChartTypes = {
     Pie: 0,
     Bar: 1
@@ -21,4 +23,5 @@ export default {
     defaultChartType: defaultChartType,
     allChartDataTypes: allChartDataTypes,
     defaultChartDataType: defaultChartDataType,
+    defaultDataRangeType: datetime.allDateRanges.ThisMonth.type,
 };

src/lib/settings.js

@@ -1,5 +1,7 @@
 import Cookies from 'js-cookie';
 
+import statisticsConstants from '../consts/statistics.js';
+
 const settingsLocalStorageKey = 'lab_app_settings';
 const serverSettingsCookieKey = 'lab_server_settings';
 
@@ -13,6 +15,11 @@ const defaultSettings = {
     currencyDisplayMode: 'symbol', // or 'none' or 'code' or 'name'
     showAmountInHomePage: true,
     showAccountBalance: true,
+    statistics: {
+        defaultChartType: statisticsConstants.defaultChartType,
+        defaultChartDataType: statisticsConstants.defaultChartDataType,
+        defaultDataRangeType: statisticsConstants.defaultDataRangeType
+    },
     animate: true,
     autoDarkMode: true
 };
@@ -44,6 +51,11 @@ function getOption(key) {
     return getFinalSettings()[key];
 }
 
+function getSubOption(key, subKey) {
+    const options = getFinalSettings()[key] || {};
+    return options[subKey];
+}
+
 function setOption(key, value) {
     if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
         return;
@@ -55,6 +67,28 @@ function setOption(key, value) {
     return setSettings(settings);
 }
 
+function setSubOption(key, subKey, value) {
+    if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
+        return;
+    }
+
+    if (!Object.prototype.hasOwnProperty.call(defaultSettings[key], subKey)) {
+        return;
+    }
+
+    const settings = getFinalSettings();
+    let options = settings[key];
+
+    if (!options) {
+        options = {};
+    }
+
+    options[subKey] = value;
+    settings[key] = options;
+
+    return setSettings(settings);
+}
+
 function getServerSetting(key) {
     const settings = Cookies.get(serverSettingsCookieKey) || '';
     const settingsArr = settings.split('_');
@@ -93,6 +127,12 @@ export default {
     setShowAmountInHomePage: value => setOption('showAmountInHomePage', value),
     isShowAccountBalance: () => getOption('showAccountBalance'),
     setShowAccountBalance: value => setOption('showAccountBalance', value),
+    getStatisticsDefaultChartType: () => getSubOption('statistics', 'defaultChartType'),
+    setStatisticsDefaultChartType: value => setSubOption('statistics', 'defaultChartType', value),
+    getStatisticsDefaultChartDataType: () => getSubOption('statistics', 'defaultChartDataType'),
+    setStatisticsDefaultChartDataType: value => setSubOption('statistics', 'defaultChartDataType', value),
+    getStatisticsDefaultDateRange: () => getSubOption('statistics', 'defaultDataRangeType'),
+    setStatisticsDefaultDateRange: value => setSubOption('statistics', 'defaultDataRangeType', value),
     isEnableAnimate: () => getOption('animate'),
     setEnableAnimate: value => setOption('animate', value),
     isEnableAutoDarkMode: () => getOption('autoDarkMode'),

src/locales/en.js

@@ -657,6 +657,10 @@ export default {
     'Income By Account': 'Income By Account',
     'Income By Primary Category': 'Income By Primary Category',
     'Income By Secondary Category': 'Income By Secondary Category',
+    'Statistics Settings': 'Statistics Settings',
+    'Default Chart Type': 'Default Chart Type',
+    'Default Chart Data Type': 'Default Chart Data Type',
+    'Default Date Range': 'Default Date Range',
     'User Profile': 'User Profile',
     'Language': 'Language',
     'Auto Update Exchange Rates Data': 'Auto Update Exchange Rates Data',

src/locales/zh_Hans.js

@@ -657,6 +657,10 @@ export default {
     'Income By Account': '账号收入',
     'Income By Primary Category': '一级分类收入',
     'Income By Secondary Category': '二级分类收入',
+    'Statistics Settings': '统计设置',
+    'Default Chart Type': '默认图表类型',
+    'Default Chart Data Type': '默认图表数据类型',
+    'Default Date Range': '默认时间范围',
     'User Profile': '用户信息',
     'Language': '语言',
     'Auto Update Exchange Rates Data': '自动更新汇率数据',

src/router/mobile.js

@@ -12,6 +12,7 @@ import AccountListPage from '../views/mobile/accounts/List.vue';
 import AccountEditPage from '../views/mobile/accounts/Edit.vue';
 
 import StatisticsTransactionPage from '../views/mobile/statistics/Transaction.vue';
+import StatisticsSettingsPage from '../views/mobile/statistics/Settings.vue';
 
 import SettingsPage from '../views/mobile/Settings.vue';
 import ApplicationLockPage from '../views/mobile/ApplicationLock.vue';
@@ -175,6 +176,11 @@ const routes = [
         component: StatisticsTransactionPage,
         beforeEnter: checkLogin
     },
+    {
+        path: '/statistic/settings',
+        component: StatisticsSettingsPage,
+        beforeEnter: checkLogin
+    },
     {
         path: '/settings',
         component: SettingsPage,

src/store/index.js

@@ -179,7 +179,7 @@ const stores = {
         transactionOverview: {},
         transactionOverviewStateInvalid: true,
         transactionStatisticsFilter: {
-            dateType: datetimeConstants.allDateRanges.ThisMonth.type,
+            dateType: statisticsConstants.defaultDataRangeType,
             startTime: 0,
             endTime: 0,
             chartType: statisticsConstants.defaultChartType,
@@ -239,7 +239,7 @@ const stores = {
             state.transactionOverview = {};
             state.transactionOverviewStateInvalid = true;
 
-            state.transactionStatisticsFilter.dateType = datetimeConstants.allDateRanges.ThisMonth.type;
+            state.transactionStatisticsFilter.dateType = statisticsConstants.defaultDataRangeType;
             state.transactionStatisticsFilter.startTime = 0;
             state.transactionStatisticsFilter.endTime = 0;
             state.transactionStatisticsFilter.chartType = statisticsConstants.defaultChartType;
@@ -801,7 +801,7 @@ const stores = {
             if (filter && utils.isNumber(filter.dateType)) {
                 state.transactionStatisticsFilter.dateType = filter.dateType;
             } else {
-                state.transactionStatisticsFilter.dateType = datetimeConstants.allDateRanges.ThisMonth.type;
+                state.transactionStatisticsFilter.dateType = statisticsConstants.defaultDataRangeType;
             }
 
             if (filter && utils.isNumber(filter.startTime)) {

src/views/mobile/Settings.vue

@@ -68,6 +68,8 @@
                         <f7-toggle :checked="showAccountBalance" @toggle:change="showAccountBalance = $event"></f7-toggle>
                     </f7-list-item>
 
+                    <f7-list-item :title="$t('Statistics Settings')" link="/statistic/settings"></f7-list-item>
+
                     <f7-list-item>
                         <span>{{ $t('Enable Animate') }}</span>
                         <f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>

src/views/mobile/statistics/Settings.vue

@@ -0,0 +1,116 @@
+<template>
+    <f7-page>
+        <f7-navbar :title="$t('Statistics Settings')" :back-link="$t('Back')"></f7-navbar>
+
+        <f7-card>
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list>
+                    <f7-list-item
+                        :title="$t('Default Chart Type')"
+                        smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
+                        <select v-model="defaultChartType">
+                            <option :value="$constants.statistics.allChartTypes.Pie">{{ $t('Pie Chart') }}</option>
+                            <option :value="$constants.statistics.allChartTypes.Bar">{{ $t('Bar Chart') }}</option>
+                        </select>
+                    </f7-list-item>
+
+                    <f7-list-item
+                        :title="$t('Default Chart Data Type')"
+                        smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
+                        <select v-model="defaultChartDataType">
+                            <option v-for="chartDataType in allChartDataTypes"
+                                    :key="chartDataType.type"
+                                    :value="chartDataType.type">{{ chartDataType.name | localized }}</option>
+                        </select>
+                    </f7-list-item>
+
+                    <f7-list-item
+                        :title="$t('Default Date Range')"
+                        smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
+                        <select v-model="defaultDateRange">
+                            <option v-for="dateRange in allDateRanges"
+                                    :key="dateRange.type"
+                                    :value="dateRange.type">{{ dateRange.name | localized }}</option>
+                        </select>
+                    </f7-list-item>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+    </f7-page>
+</template>
+
+<script>
+export default {
+    computed: {
+        allChartDataTypes() {
+            return [
+                {
+                    type: this.$constants.statistics.allChartDataTypes.ExpenseByAccount,
+                    name: 'Expense By Account'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory,
+                    name: 'Expense By Primary Category'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory,
+                    name: 'Expense By Secondary Category'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.IncomeByAccount,
+                    name: 'Income By Account'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.IncomeByPrimaryCategory,
+                    name: 'Income By Primary Category'
+                },
+                {
+                    type: this.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory,
+                    name: 'Income By Secondary Category'
+                },
+            ];
+        },
+        allDateRanges() {
+            const allDateRanges = [];
+
+            for (let dateRangeField in this.$constants.datetime.allDateRanges) {
+                if (!Object.prototype.hasOwnProperty.call(this.$constants.datetime.allDateRanges, dateRangeField)) {
+                    continue;
+                }
+
+                const dateRangeType = this.$constants.datetime.allDateRanges[dateRangeField];
+
+                if (dateRangeType.type !== this.$constants.datetime.allDateRanges.Custom.type) {
+                    allDateRanges.push(dateRangeType);
+                }
+            }
+
+            return allDateRanges;
+        },
+        defaultChartType: {
+            get: function () {
+                return this.$settings.getStatisticsDefaultChartType();
+            },
+            set: function (value) {
+                this.$settings.setStatisticsDefaultChartType(value);
+            }
+        },
+        defaultChartDataType: {
+            get: function () {
+                return this.$settings.getStatisticsDefaultChartDataType();
+            },
+            set: function (value) {
+                this.$settings.setStatisticsDefaultChartDataType(value);
+            }
+        },
+        defaultDateRange: {
+            get: function () {
+                return this.$settings.getStatisticsDefaultDateRange();
+            },
+            set: function (value) {
+                this.$settings.setStatisticsDefaultDateRange(value);
+            }
+        }
+    }
+};
+</script>

src/views/mobile/statistics/Transaction.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page ptr @ptr:refresh="reload">
+    <f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
         <f7-navbar>
             <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
             <f7-nav-title>
@@ -8,6 +8,9 @@
                     <f7-icon size="14px" :f7="showChartDataTypePopover ? 'arrowtriangle_up_fill' : 'arrowtriangle_down_fill'"></f7-icon>
                 </f7-link>
             </f7-nav-title>
+            <f7-nav-right>
+                <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
+            </f7-nav-right>
         </f7-navbar>
 
         <f7-popover class="chart-data-type-popover-menu" :opened="showChartDataTypePopover"
@@ -213,6 +216,15 @@
                                     :max-time="query.endTime"
                                     @dateRange:change="setCustomDateFilter">
         </date-range-selection-sheet>
+
+        <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
+            <f7-actions-group>
+                <f7-actions-button @click="settings">{{ $t('Settings') }}</f7-actions-button>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+            </f7-actions-group>
+        </f7-actions>
     </f7-page>
 </template>
 
@@ -223,7 +235,8 @@ export default {
             loading: true,
             showChartDataTypePopover: false,
             showDatePopover: false,
-            showCustomDateRangeSheet: false
+            showCustomDateRangeSheet: false,
+            showMoreActionSheet: false
         };
     },
     computed: {
@@ -405,12 +418,32 @@ export default {
         const self = this;
         const router = self.$f7router;
 
-        const dateRange = self.$utilities.getDateRangeByDateType(self.query.dateType, self.firstDayOfWeek);
+        let defaultChartType = self.$settings.getStatisticsDefaultChartType();
+
+        if (defaultChartType !== self.$constants.statistics.allChartTypes.Pie && defaultChartType !== self.$constants.statistics.allChartTypes.Bar) {
+            defaultChartType = self.$constants.statistics.defaultChartType;
+        }
+
+        let defaultChartDataType = self.$settings.getStatisticsDefaultChartDataType();
+
+        if (defaultChartDataType < self.$constants.statistics.allChartDataTypes.ExpenseByAccount || defaultChartDataType > self.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory) {
+            defaultChartDataType = self.$constants.statistics.defaultChartDataType;
+        }
+
+        let defaultDateRange = self.$settings.getStatisticsDefaultDateRange();
+
+        if (defaultDateRange < self.$constants.datetime.allDateRanges.All.type || defaultDateRange >= self.$constants.datetime.allDateRanges.Custom.type) {
+            defaultDateRange = self.$constants.statistics.defaultDataRangeType;
+        }
+
+        const dateRange = self.$utilities.getDateRangeByDateType(defaultDateRange, self.firstDayOfWeek);
 
         self.$store.dispatch('initTransactionStatisticsFilter', {
             dateType: dateRange ? dateRange.dateType : undefined,
             startTime: dateRange ? dateRange.minTime : undefined,
             endTime: dateRange ? dateRange.maxTime : undefined,
+            chartType: defaultChartType,
+            chartDataType: defaultChartDataType,
         });
 
         Promise.all([
@@ -432,6 +465,11 @@ export default {
         });
     },
     methods: {
+        onPageAfterIn() {
+            if (this.$store.state.transactionStatisticsStateInvalid && !this.loading) {
+                this.reload(null);
+            }
+        },
         reload(done) {
             const self = this;
 
@@ -576,6 +614,9 @@ export default {
             }
 
             return `${displayStartTime} ~ ${displayEndTime}`;
+        },
+        settings() {
+            this.$f7router.navigate('/statistic/settings');
         }
     },
     filters: {