add total expense/income amount in statistics page

src/locales/en.js

@@ -626,6 +626,8 @@ 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',
+    'Total Expense': 'Total Expense',
+    'Total Income': 'Total Income',
     'Expense Chart': 'Expense Chart',
     'Expense By Account': 'Expense By Account',
     'Expense By Primary Category': 'Expense By Primary Category',

src/locales/zh_Hans.js

@@ -626,6 +626,8 @@ export default {
     'No transaction data': '没有交易数据',
     'Are you sure you want to delete this transaction?': '您确定要删除该交易？',
     'Unable to delete this transaction': '无法删除该交易',
+    'Total Expense': '总支出',
+    'Total Income': '总收入',
     'Expense Chart': '支出图表',
     'Expense By Account': '账号支出',
     'Expense By Primary Category': '一级分类支出',

src/views/mobile/statistics/Transaction.vue

@@ -97,8 +97,19 @@
                         </div>
                     </f7-list-item>
                 </f7-list>
-                <f7-list v-else-if="!loading">
+                <f7-list v-else-if="!loading && (!statisticsData || !statisticsData.items || !statisticsData.items.length)">
-                    <f7-list-item v-for="(data, idx) in statisticsData" :key="idx"
+                    <f7-list-item :title="$t('No transaction data')"></f7-list-item>
+                </f7-list>
+                <f7-list v-else-if="!loading && statisticsData && statisticsData.items && statisticsData.items.length">
+                    <f7-list-item class="statistics-list-item-overview">
+                        <div slot="header" v-if="query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory">{{ $t('Total Expense') }}</div>
+                        <div slot="header" v-if="query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory">{{ $t('Total Income') }}</div>
+                        <div slot="title"
+                             :class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory, 'text-color-red': query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByAccount || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeByPrimaryCategory || query.chartDataType === $constants.statistics.allChartDataTypes.IncomeBySecondaryCategory }">
+                            {{ statisticsData.totalAmount | currency(defaultCurrency) }}
+                        </div>
+                    </f7-list-item>
+                    <f7-list-item v-for="(data, idx) in statisticsData.items" :key="idx"
                                   class="statistics-list-item"
                                   :link="`/transaction/list?${data.type}Id=${data.id}`">
                         <div slot="media" class="display-flex no-padding-horizontal">
@@ -329,7 +340,7 @@ export default {
                 }
             }
 
-            const allStatisticsData = [];
+            const allStatisticsItems = [];
 
             for (let id in combinedData) {
                 if (!Object.prototype.hasOwnProperty.call(combinedData, id)) {
@@ -339,14 +350,17 @@ export default {
                 const data = combinedData[id];
                 data.percent = data.totalAmount * 100 / allAmount;
 
-                allStatisticsData.push(data);
+                allStatisticsItems.push(data);
             }
 
-            allStatisticsData.sort(function (data1, data2) {
+            allStatisticsItems.sort(function (data1, data2) {
                 return data2.totalAmount - data1.totalAmount;
             });
 
-            return allStatisticsData;
+            return {
+                totalAmount: allAmount,
+                items: allStatisticsItems
+            };
         },
         chartData() {
             const self = this;
@@ -359,8 +373,8 @@ export default {
 
             const allData = [];
 
-            for (let i = 0; i < this.statisticsData.length; i++) {
+            for (let i = 0; i < this.statisticsData.items.length; i++) {
-                const data = this.statisticsData[i];
+                const data = this.statisticsData.items[i];
 
                 allData.push({
                     name: data.name,
@@ -657,11 +671,22 @@ export default {
 </script>
 
 <style>
+.statistics-list-item-overview {
+    padding-top: 12px;
+    margin-bottom: 6px;
+}
+
+.statistics-list-item-overview-amount {
+    margin-top: 2px;
+    font-size: 1.5em;
+}
+
 .statistics-list-item .item-content {
     margin-top: 8px;
     margin-bottom: 12px;
 }
-.statistics-list-item .item-inner:after {
+
+.statistics-list-item-overview .item-inner:after, .statistics-list-item .item-inner:after {
     background-color: transparent;
 }