support changing chart data source type

src/consts/statistics.js

@@ -5,17 +5,20 @@ const allChartTypes = {
 
 const defaultChartType = allChartTypes.Pie;
 
-const allChartLegendTypes = {
-    Account: 0,
-    PrimaryCategory: 1,
-    SecondaryCategory: 1
+const allChartDataTypes = {
+    ExpenseByAccount: 0,
+    ExpenseByPrimaryCategory: 1,
+    ExpenseBySecondaryCategory: 2,
+    IncomeByAccount: 3,
+    IncomeByPrimaryCategory: 4,
+    IncomeBySecondaryCategory: 5
 };
 
-const defaultChartLegendType = allChartLegendTypes.SecondaryCategory;
+const defaultChartDataType = allChartDataTypes.ExpenseBySecondaryCategory;
 
 export default {
     allChartTypes: allChartTypes,
     defaultChartType: defaultChartType,
-    allChartLegendTypes: allChartLegendTypes,
-    defaultChartLegendType: defaultChartLegendType,
+    allChartDataTypes: allChartDataTypes,
+    defaultChartDataType: defaultChartDataType,
 };

src/locales/en.js

@@ -624,6 +624,14 @@ export default {
     'No transaction data': 'No transaction data',
     'Are you sure you want to delete this transaction?': 'Are you sure you want to delete this transaction?',
     'Unable to delete this transaction': 'Unable to delete this transaction',
+    'Expense Chart': 'Expense Chart',
+    'Expense By Account': 'Expense By Account',
+    'Expense By Primary Category': 'Expense By Primary Category',
+    'Expense By Secondary Category': 'Expense By Secondary Category',
+    'Income Chart': 'Income Chart',
+    'Income By Account': 'Income By Account',
+    'Income By Primary Category': 'Income By Primary Category',
+    'Income By Secondary Category': 'Income By Secondary Category',
     'User Profile': 'User Profile',
     'Language': 'Language',
     'Auto Update Exchange Rates Data': 'Auto Update Exchange Rates Data',

src/locales/zh_Hans.js

@@ -624,6 +624,14 @@ export default {
     'No transaction data': '没有交易数据',
     'Are you sure you want to delete this transaction?': '您确定要删除该交易？',
     'Unable to delete this transaction': '无法删除该交易',
+    'Expense Chart': '支出图表',
+    'Expense By Account': '账号支出',
+    'Expense By Primary Category': '一级分类支出',
+    'Expense By Secondary Category': '二级分类支出',
+    'Income Chart': '收入图表',
+    'Income By Account': '账号收入',
+    'Income By Primary Category': '一级分类收入',
+    'Income By Secondary Category': '二级分类收入',
     'User Profile': '用户信息',
     'Language': '语言',
     'Auto Update Exchange Rates Data': '自动更新汇率数据',

src/store/index.js

@@ -181,7 +181,7 @@ const stores = {
             startTime: -1,
             endTime: -1,
             chartType: statisticsConstants.defaultChartType,
-            chartLegendType: statisticsConstants.defaultChartLegendType,
+            chartDataType: statisticsConstants.defaultChartDataType,
         },
         transactionStatistics: [],
         transactionStatisticsStateInvalid: true,
@@ -239,7 +239,7 @@ const stores = {
             state.transactionStatisticsFilter.startTime = -1;
             state.transactionStatisticsFilter.endTime = -1;
             state.transactionStatisticsFilter.chartType = statisticsConstants.defaultChartType;
-            state.transactionStatisticsFilter.chartLegendType = statisticsConstants.defaultChartLegendType;
+            state.transactionStatisticsFilter.chartDataType = statisticsConstants.defaultChartDataType;
             state.transactionStatistics = {};
             state.transactionStatisticsStateInvalid = true;
 
@@ -802,10 +802,10 @@ const stores = {
                 state.transactionStatisticsFilter.chartType = statisticsConstants.defaultChartType;
             }
 
-            if (filter && utils.isNumber(filter.chartLegendType)) {
-                state.transactionStatisticsFilter.chartLegendType = filter.chartLegendType;
+            if (filter && utils.isNumber(filter.chartDataType)) {
+                state.transactionStatisticsFilter.chartDataType = filter.chartDataType;
             } else {
-                state.transactionStatisticsFilter.chartLegendType = statisticsConstants.defaultChartLegendType;
+                state.transactionStatisticsFilter.chartDataType = statisticsConstants.defaultChartDataType;
             }
         },
         [UPDATE_TRANSACTION_STATISTICS_FILTER] (state, filter) {
@@ -821,8 +821,8 @@ const stores = {
                 state.transactionStatisticsFilter.chartType = filter.chartType;
             }
 
-            if (filter && utils.isNumber(filter.chartLegendType)) {
-                state.transactionStatisticsFilter.chartLegendType = filter.chartLegendType;
+            if (filter && utils.isNumber(filter.chartDataType)) {
+                state.transactionStatisticsFilter.chartDataType = filter.chartDataType;
             }
         },
         [UPDATE_TRANSACTION_STATISTICS_INVALID_STATE] (state, invalidState) {

src/views/mobile/statistics/Transaction.vue

@@ -1,6 +1,12 @@
 <template>
     <f7-page>
-        <f7-navbar :title="$t('Statistics')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t('Statistics')"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
 
         <f7-card>
             <f7-card-content class="no-safe-areas chart-container" :padding="false">
@@ -25,6 +31,22 @@
                 <span :class="{ 'tabbar-item-changed': query.chartType === $constants.statistics.allChartTypes.Bar }">{{ $t('Bar Chart') }}</span>
             </f7-link>
         </f7-toolbar>
+
+        <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
+            <f7-actions-group>
+                <f7-actions-label>{{ $t('Expense Chart') }}</f7-actions-label>
+                <f7-actions-button @click="setChartDataType($constants.statistics.allChartDataTypes.ExpenseByAccount)">{{ $t('Expense By Account') }}</f7-actions-button>
+                <f7-actions-button @click="setChartDataType($constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory)">{{ $t('Expense By Secondary Category') }}</f7-actions-button>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-label>{{ $t('Income Chart') }}</f7-actions-label>
+                <f7-actions-button @click="setChartDataType($constants.statistics.allChartDataTypes.IncomeByAccount)">{{ $t('Income By Account') }}</f7-actions-button>
+                <f7-actions-button @click="setChartDataType($constants.statistics.allChartDataTypes.IncomeBySecondaryCategory)">{{ $t('Income By Secondary Category') }}</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>
 
@@ -32,7 +54,8 @@
 export default {
     data() {
         return {
-            loading: true
+            loading: true,
+            showMoreActionSheet: false
         };
     },
     computed: {
@@ -69,11 +92,24 @@ export default {
                     continue;
                 }
 
-                if (item.category.type !== self.$constants.category.allCategoryTypes.Expense) {
+                if (self.query.chartDataType === self.$constants.statistics.allChartDataTypes.ExpenseByAccount ||
+                    self.query.chartDataType === self.$constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory ||
+                    self.query.chartDataType === self.$constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory) {
+                    if (item.category.type !== self.$constants.category.allCategoryTypes.Expense) {
+                        continue;
+                    }
+                } else if (self.query.chartDataType === self.$constants.statistics.allChartDataTypes.IncomeByAccount ||
+                    self.query.chartDataType === self.$constants.statistics.allChartDataTypes.IncomeByPrimaryCategory ||
+                    self.query.chartDataType === self.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory) {
+                    if (item.category.type !== self.$constants.category.allCategoryTypes.Income) {
+                        continue;
+                    }
+                } else {
                     continue;
                 }
 
-                if (self.query.chartLegendType === self.$constants.statistics.allChartLegendTypes.Account) {
+                if (self.query.chartDataType === self.$constants.statistics.allChartDataTypes.ExpenseByAccount ||
+                    self.query.chartDataType === self.$constants.statistics.allChartDataTypes.IncomeByAccount) {
                     if (self.$utilities.isNumber(item.amountInDefaultCurrency)) {
                         let data = combinedData[item.account.name];
 
@@ -88,7 +124,8 @@ export default {
 
                         combinedData[item.account.name] = data;
                     }
-                } else if (self.query.chartLegendType === self.$constants.statistics.allChartLegendTypes.SecondaryCategory) {
+                } else if (self.query.chartDataType === self.$constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory ||
+                    self.query.chartDataType === self.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory) {
                     if (self.$utilities.isNumber(item.amountInDefaultCurrency)) {
                         let data = combinedData[item.category.name];
 
@@ -255,6 +292,11 @@ export default {
                 chartType: chartType
             });
         },
+        setChartDataType(chartDataType) {
+            this.$store.dispatch('updateTransactionStatisticsFilter', {
+                chartDataType: chartDataType
+            });
+        },
         skeletonChart() {
             const skeletonChartData = {
                 series: [{