mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-19 17:24:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

hide hidden account/category in statistics page

Browse Source
This commit is contained in:
MaysWind
2021-02-02 00:36:42 +08:00
parent f94f556896
commit f6113f55ec
3 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/PieChart.vue
+12 -8
View File
@@ -33,7 +33,7 @@
<span class="skeleton-text">Percent</span> <span class="skeleton-text">Percent</span>
</f7-chip> </f7-chip>
<f7-chip outline <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')" :style="(selectedItem ? selectedItem.color : '') | iconStyle('default', 'var(--default-icon-color)', '--f7-chip-outline-border-color')"
v-else-if="!skeleton"></f7-chip> v-else-if="!skeleton"></f7-chip>
</p> </p>
@@ -67,7 +67,9 @@ export default {
'items', 'items',
'nameField', 'nameField',
'valueField', 'valueField',
'percentField',
'colorField', 'colorField',
'hiddenField',
'minValidPercent', 'minValidPercent',
'defaultCurrency', 'defaultCurrency',
'showCenterText', 'showCenterText',
@@ -91,7 +93,7 @@ export default {
for (let i = 0; i < this.items.length; i++) { for (let i = 0; i < this.items.length; i++) {
const item = this.items[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]; totalValidValue += item[this.valueField];
} }
} }
@@ -102,11 +104,13 @@ export default {
const item = this.items[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]) &&
(!this.minValidPercent || item[this.valueField] / totalValidValue > this.minValidPercent)) { (!this.minValidPercent || item[this.valueField] / totalValidValue > this.minValidPercent)) {
validItems.push({ validItems.push({
name: item[this.nameField], name: item[this.nameField],
value: item[this.valueField], 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', color: item[this.colorField] ? item[this.colorField] : 'c8c8c8',
sourceItem: item sourceItem: item
}); });
@@ -134,11 +138,11 @@ export default {
for (let i = 0; i < Math.min(this.selectedIndex + 1, this.validItems.length); i++) { for (let i = 0; i < Math.min(this.selectedIndex + 1, this.validItems.length); i++) {
const item = this.validItems[i]; const item = this.validItems[i];
if (item.percent > 0) { if (item.actualPercent > 0) {
if (i === this.selectedIndex) { if (i === this.selectedIndex) {
offset += -this.circumference * (1 - item.percent) / 2; offset += -this.circumference * (1 - item.actualPercent) / 2;
} else { } else {
offset += -this.circumference * (1 - item.percent); offset += -this.circumference * (1 - item.actualPercent);
} }
} }
} }
@@ -182,7 +186,7 @@ export default {
}, },
filters: { filters: {
itemStrokeDash(item, circumference) { itemStrokeDash(item, circumference) {
const length = item.percent * circumference; const length = item.actualPercent * circumference;
return `${length} ${circumference - length}`; return `${length} ${circumference - length}`;
}, },
itemDashOffset(item, items, circumference, offset) { itemDashOffset(item, items, circumference, offset) {
@@ -195,7 +199,7 @@ export default {
break; break;
} }
allPreviousPercent += curItem.percent; allPreviousPercent += curItem.actualPercent;
} }
if (offset) { if (offset) {
src/store/index.js
+6
View File
@@ -771,6 +771,12 @@ const stores = {
item.account = state.allAccountsMap[item.accountId]; 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) { if (item.categoryId) {
item.category = state.allTransactionCategoriesMap[item.categoryId]; item.category = state.allTransactionCategoriesMap[item.categoryId];
} }
src/views/mobile/statistics/Transaction.vue
+18 -11
View File
@@ -47,7 +47,9 @@
class="statistics-pie-chart" class="statistics-pie-chart"
name-field="name" name-field="name"
value-field="totalAmount" value-field="totalAmount"
percent-field="percent"
color-field="color" color-field="color"
hidden-field="hidden"
v-else-if="!loading" v-else-if="!loading"
@click="clickPieChartItem" @click="clickPieChartItem"
> >
@@ -145,33 +147,35 @@
{{ statisticsData.totalAmount | currency(defaultCurrency) }} {{ statisticsData.totalAmount | currency(defaultCurrency) }}
</div> </div>
</f7-list-item> </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" 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 slot="media" class="display-flex no-padding-horizontal">
<div class="display-flex align-items-center statistics-icon"> <div class="display-flex align-items-center statistics-icon">
<f7-icon v-if="data.icon" <f7-icon v-if="item.icon"
:icon="data.icon | icon(data.type)" :icon="item.icon | icon(item.type)"
:style="data.color | iconStyle(data.type, 'var(--category-icon-color)')"> :style="item.color | iconStyle(item.type, 'var(--category-icon-color)')">
</f7-icon> </f7-icon>
<f7-icon v-else-if="!data.icon" <f7-icon v-else-if="!item.icon"
f7="pencil_ellipsis_rectangle"> f7="pencil_ellipsis_rectangle">
</f7-icon> </f7-icon>
</div> </div>
</div> </div>
<div slot="title"> <div slot="title">
<span>{{ data.name }}</span> <span>{{ item.name }}</span>
<small class="statistics-percent" v-if="data.percent >= 0">{{ data.percent | percent(2, '&lt;0.01') }}</small> <small class="statistics-percent" v-if="item.percent >= 0">{{ item.percent | percent(2, '&lt;0.01') }}</small>
</div> </div>
<div slot="after"> <div slot="after">
<span>{{ data.totalAmount | currency(defaultCurrency) }}</span> <span>{{ item.totalAmount | currency(defaultCurrency) }}</span>
</div> </div>
<div slot="inner-end" class="statistics-item-end"> <div slot="inner-end" class="statistics-item-end">
<div class="statistics-percent-line"> <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>
</div> </div>
</f7-list-item> </f7-list-item>
@@ -311,7 +315,7 @@ export default {
for (let i = 0; i < self.$store.state.transactionStatistics.items.length; i++) { for (let i = 0; i < self.$store.state.transactionStatistics.items.length; i++) {
const item = self.$store.state.transactionStatistics.items[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; continue;
} }
@@ -345,6 +349,7 @@ export default {
id: item.account.id, id: item.account.id,
icon: item.account.icon || self.$constants.icons.defaultAccountIcon.icon, icon: item.account.icon || self.$constants.icons.defaultAccountIcon.icon,
color: item.account.color || self.$constants.colors.defaultAccountColor, color: item.account.color || self.$constants.colors.defaultAccountColor,
hidden: item.primaryAccount.hidden || item.account.hidden,
totalAmount: item.amountInDefaultCurrency totalAmount: item.amountInDefaultCurrency
} }
} }
@@ -366,6 +371,7 @@ export default {
id: item.primaryCategory.id, id: item.primaryCategory.id,
icon: item.primaryCategory.icon || self.$constants.icons.defaultCategoryIcon.icon, icon: item.primaryCategory.icon || self.$constants.icons.defaultCategoryIcon.icon,
color: item.primaryCategory.color || self.$constants.colors.defaultCategoryColor, color: item.primaryCategory.color || self.$constants.colors.defaultCategoryColor,
hidden: item.primaryCategory.hidden,
totalAmount: item.amountInDefaultCurrency totalAmount: item.amountInDefaultCurrency
} }
} }
@@ -387,6 +393,7 @@ export default {
id: item.category.id, id: item.category.id,
icon: item.category.icon || self.$constants.icons.defaultCategoryIcon.icon, icon: item.category.icon || self.$constants.icons.defaultCategoryIcon.icon,
color: item.category.color || self.$constants.colors.defaultCategoryColor, color: item.category.color || self.$constants.colors.defaultCategoryColor,
hidden: item.primaryCategory.hidden || item.category.hidden,
totalAmount: item.amountInDefaultCurrency totalAmount: item.amountInDefaultCurrency
} }
} }