From f6113f55ec8ad812e4cb5299ced9c93bb4ca3b99 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 2 Feb 2021 00:36:42 +0800
Subject: [PATCH] hide hidden account/category in statistics page

---
 src/components/mobile/PieChart.vue          | 20 ++++++++------
 src/store/index.js                          |  6 +++++
 src/views/mobile/statistics/Transaction.vue | 29 +++++++++++++--------
 3 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/components/mobile/PieChart.vue b/src/components/mobile/PieChart.vue
index fd7a5482..6ce9b105 100644
--- a/src/components/mobile/PieChart.vue
+++ b/src/components/mobile/PieChart.vue
@@ -33,7 +33,7 @@
                             <span class="skeleton-text">Percent</span>
                         </f7-chip>
                         <f7-chip outline
-                                 :text="(selectedItem.percent * 100) | percent(2, '&lt;0.01')"
+                                 :text="(selectedItem.percent) | percent(2, '&lt;0.01')"
                                  :style="(selectedItem ? selectedItem.color : '') | iconStyle('default', 'var(--default-icon-color)', '--f7-chip-outline-border-color')"
                                  v-else-if="!skeleton"></f7-chip>
                     </p>
@@ -67,7 +67,9 @@ export default {
         'items',
         'nameField',
         'valueField',
+        'percentField',
         'colorField',
+        'hiddenField',
         'minValidPercent',
         'defaultCurrency',
         'showCenterText',
@@ -91,7 +93,7 @@ export default {
             for (let i = 0; i < this.items.length; i++) {
                 const item = this.items[i];
 
-                if (item[this.valueField] && item[this.valueField] > 0) {
+                if (item[this.valueField] && item[this.valueField] > 0 && (!this.hiddenField || !item[this.hiddenField])) {
                     totalValidValue += item[this.valueField];
                 }
             }
@@ -102,11 +104,13 @@ export default {
                 const item = this.items[i];
 
                 if (item[this.valueField] && item[this.valueField] > 0 &&
+                    (!this.hiddenField || !item[this.hiddenField]) &&
                     (!this.minValidPercent || item[this.valueField] / totalValidValue > this.minValidPercent)) {
                     validItems.push({
                         name: item[this.nameField],
                         value: item[this.valueField],
-                        percent: item[this.valueField] / totalValidValue,
+                        percent: (item[this.percentField] > 0 || item[this.percentField] === 0 || item[this.percentField] === '0') ? item[this.percentField] : (item[this.valueField] / totalValidValue * 100),
+                        actualPercent: item[this.valueField] / totalValidValue,
                         color: item[this.colorField] ? item[this.colorField] : 'c8c8c8',
                         sourceItem: item
                     });
@@ -134,11 +138,11 @@ export default {
             for (let i = 0; i < Math.min(this.selectedIndex + 1, this.validItems.length); i++) {
                 const item = this.validItems[i];
 
-                if (item.percent > 0) {
+                if (item.actualPercent > 0) {
                     if (i === this.selectedIndex) {
-                        offset += -this.circumference * (1 - item.percent) / 2;
+                        offset += -this.circumference * (1 - item.actualPercent) / 2;
                     } else {
-                        offset += -this.circumference * (1 - item.percent);
+                        offset += -this.circumference * (1 - item.actualPercent);
                     }
                 }
             }
@@ -182,7 +186,7 @@ export default {
     },
     filters: {
         itemStrokeDash(item, circumference) {
-            const length = item.percent * circumference;
+            const length = item.actualPercent * circumference;
             return `${length} ${circumference - length}`;
         },
         itemDashOffset(item, items, circumference, offset) {
@@ -195,7 +199,7 @@ export default {
                     break;
                 }
 
-                allPreviousPercent += curItem.percent;
+                allPreviousPercent += curItem.actualPercent;
             }
 
             if (offset) {
diff --git a/src/store/index.js b/src/store/index.js
index 30edada7..4a063078 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -771,6 +771,12 @@ const stores = {
                         item.account = state.allAccountsMap[item.accountId];
                     }
 
+                    if (item.account && item.account.parentId !== '0') {
+                        item.primaryAccount = state.allAccountsMap[item.account.parentId];
+                    } else {
+                        item.primaryAccount = item.account;
+                    }
+
                     if (item.categoryId) {
                         item.category = state.allTransactionCategoriesMap[item.categoryId];
                     }
diff --git a/src/views/mobile/statistics/Transaction.vue b/src/views/mobile/statistics/Transaction.vue
index 93d32730..63e6a527 100644
--- a/src/views/mobile/statistics/Transaction.vue
+++ b/src/views/mobile/statistics/Transaction.vue
@@ -47,7 +47,9 @@
                     class="statistics-pie-chart"
                     name-field="name"
                     value-field="totalAmount"
+                    percent-field="percent"
                     color-field="color"
+                    hidden-field="hidden"
                     v-else-if="!loading"
                     @click="clickPieChartItem"
                 >
@@ -145,33 +147,35 @@
                             {{ statisticsData.totalAmount | currency(defaultCurrency) }}
                         </div>
                     </f7-list-item>
-                    <f7-list-item v-for="(data, idx) in statisticsData.items" :key="idx"
+                    <f7-list-item v-for="(item, idx) in statisticsData.items" :key="idx"
                                   class="statistics-list-item"
-                                  :link="data | itemLinkUrl(query, $constants.statistics.allChartDataTypes)">
+                                  :link="item | itemLinkUrl(query, $constants.statistics.allChartDataTypes)"
+                                  v-show="!item.hidden"
+                    >
                         <div slot="media" class="display-flex no-padding-horizontal">
                             <div class="display-flex align-items-center statistics-icon">
-                                <f7-icon v-if="data.icon"
-                                         :icon="data.icon | icon(data.type)"
-                                         :style="data.color | iconStyle(data.type, 'var(--category-icon-color)')">
+                                <f7-icon v-if="item.icon"
+                                         :icon="item.icon | icon(item.type)"
+                                         :style="item.color | iconStyle(item.type, 'var(--category-icon-color)')">
                                 </f7-icon>
-                                <f7-icon v-else-if="!data.icon"
+                                <f7-icon v-else-if="!item.icon"
                                          f7="pencil_ellipsis_rectangle">
                                 </f7-icon>
                             </div>
                         </div>
 
                         <div slot="title">
-                            <span>{{ data.name }}</span>
-                            <small class="statistics-percent" v-if="data.percent >= 0">{{ data.percent | percent(2, '&lt;0.01') }}</small>
+                            <span>{{ item.name }}</span>
+                            <small class="statistics-percent" v-if="item.percent >= 0">{{ item.percent | percent(2, '&lt;0.01') }}</small>
                         </div>
 
                         <div slot="after">
-                            <span>{{ data.totalAmount | currency(defaultCurrency) }}</span>
+                            <span>{{ item.totalAmount | currency(defaultCurrency) }}</span>
                         </div>
 
                         <div slot="inner-end" class="statistics-item-end">
                             <div class="statistics-percent-line">
-                                <f7-progressbar :progress="data.percent >= 0 ? data.percent : 0" :style="{ '--f7-progressbar-progress-color': (data.color ? '#' + data.color : '') } "></f7-progressbar>
+                                <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? '#' + item.color : '') } "></f7-progressbar>
                             </div>
                         </div>
                     </f7-list-item>
@@ -311,7 +315,7 @@ export default {
             for (let i = 0; i < self.$store.state.transactionStatistics.items.length; i++) {
                 const item = self.$store.state.transactionStatistics.items[i];
 
-                if (!item.account || !item.primaryCategory || !item.category) {
+                if (!item.primaryAccount || !item.account || !item.primaryCategory || !item.category) {
                     continue;
                 }
 
@@ -345,6 +349,7 @@ export default {
                                 id: item.account.id,
                                 icon: item.account.icon || self.$constants.icons.defaultAccountIcon.icon,
                                 color: item.account.color || self.$constants.colors.defaultAccountColor,
+                                hidden: item.primaryAccount.hidden || item.account.hidden,
                                 totalAmount: item.amountInDefaultCurrency
                             }
                         }
@@ -366,6 +371,7 @@ export default {
                                 id: item.primaryCategory.id,
                                 icon: item.primaryCategory.icon || self.$constants.icons.defaultCategoryIcon.icon,
                                 color: item.primaryCategory.color || self.$constants.colors.defaultCategoryColor,
+                                hidden: item.primaryCategory.hidden,
                                 totalAmount: item.amountInDefaultCurrency
                             }
                         }
@@ -387,6 +393,7 @@ export default {
                                 id: item.category.id,
                                 icon: item.category.icon || self.$constants.icons.defaultCategoryIcon.icon,
                                 color: item.category.color || self.$constants.colors.defaultCategoryColor,
+                                hidden: item.primaryCategory.hidden || item.category.hidden,
                                 totalAmount: item.amountInDefaultCurrency
                             }
                         }