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

show legend in trend analysis for mobile version

Browse Source
This commit is contained in:
MaysWind
2024-12-03 00:03:11 +08:00
parent 9888efe437
commit 70da228dcc
9 changed files with 95 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/TrendsBarChart.vue
+67 -14
View File
@@ -26,15 +26,25 @@
</f7-list-item>
</f7-list>
<f7-list v-else-if="!loading && (!allDisplayDataItems || !allDisplayDataItems.length)">
<f7-list v-else-if="!loading && (!allDisplayDataItems || !allDisplayDataItems.data || !allDisplayDataItems.data.length)">
<f7-list-item :title="$t('No transaction data')"></f7-list-item>
</f7-list>
<f7-list v-else-if="!loading && allDisplayDataItems && allDisplayDataItems.length">
<f7-list v-else-if="!loading && allDisplayDataItems && allDisplayDataItems.data && allDisplayDataItems.data.length">
<f7-list-item v-if="allDisplayDataItems.legends && allDisplayDataItems.legends.length > 1">
<div class="display-flex" style="flex-wrap: wrap">
<div class="display-flex align-items-center" style="margin-right: 4px"
:key="idx"
v-for="(legend, idx) in allDisplayDataItems.legends">
<f7-icon f7="app_fill" class="trends-bar-chart-legend-icon" :style="{ 'color': legend.color }"></f7-icon>
<span class="trends-bar-chart-legend-text">{{ legend.name }}</span>
</div>
</div>
</f7-list-item>
<f7-list-item class="statistics-list-item"
link="#"
:key="idx"
v-for="(item, idx) in allDisplayDataItems"
v-for="(item, idx) in allDisplayDataItems.data"
v-show="!item.hidden"
@click="clickItem(item)"
>
@@ -58,8 +68,17 @@
<template #inner-end>
<div class="statistics-item-end">
<div class="statistics-percent-line">
<f7-progressbar :progress="0" :style="{ '--f7-progressbar-progress-color': (item.color ? '#' + item.color : '') } "></f7-progressbar>
<div class="statistics-percent-line statistics-multi-percent-line display-flex">
<div class="display-inline-flex" :style="{ 'width': (item.percent * data.totalAmount / item.totalAmount) + '%' }"
:key="dataIdx"
v-for="(data, dataIdx) in item.items"
v-show="data.totalAmount > 0">
<f7-progressbar :progress="100" :style="{ '--f7-progressbar-progress-color': (data.color ? data.color : '') } "></f7-progressbar>
</div>
<div class="display-inline-flex" :style="{ 'width': (100.0 - item.percent) + '%' }"
v-if="item.percent < 100.0">
<f7-progressbar :progress="0"></f7-progressbar>
</div>
</div>
</div>
</template>
@@ -114,6 +133,7 @@ export default {
},
allDisplayDataItems: function () {
const dateRangeItemsMap = {};
const legends = [];
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
@@ -122,6 +142,14 @@ export default {
continue;
}
const id = (this.idField && item[this.idField]) ? item[this.idField] : this.getItemName(item[this.nameField]);
const legend = {
id: id,
name: (this.nameField && item[this.nameField]) ? this.getItemName(item[this.nameField]) : id,
color: this.getColor(item[this.colorField] ? item[this.colorField] : colorConstants.defaultChartColors[i % colorConstants.defaultChartColors.length]),
displayOrders: (this.displayOrdersField && item[this.displayOrdersField]) ? item[this.displayOrdersField] : [0]
};
for (let j = 0; j < item.items.length; j++) {
const dataItem = item.items[j];
let dateRangeKey = '';
@@ -135,21 +163,19 @@ export default {
}
const dataItems = dateRangeItemsMap[dateRangeKey] || [];
const id = (this.idField && item[this.idField]) ? item[this.idField] : this.getItemName(item[this.nameField]);
dataItems.push({
id: id,
name: (this.nameField && item[this.nameField]) ? this.getItemName(item[this.nameField]) : id,
color: this.getColor(item[this.colorField] ? item[this.colorField] : colorConstants.defaultChartColors[i % colorConstants.defaultChartColors.length]),
displayOrders: (this.displayOrdersField && item[this.displayOrdersField]) ? item[this.displayOrdersField] : [0],
dataItems.push(Object.assign({}, legend, {
totalAmount: (this.valueField && isNumber(dataItem[this.valueField])) ? dataItem[this.valueField] : 0
});
}));
dateRangeItemsMap[dateRangeKey] = dataItems;
}
legends.push(legend);
}
const finalDataItems = [];
let maxTotalAmount = 0;
for (let i = 0; i < this.allDateRanges.length; i++) {
const dateRange = this.allDateRanges[i];
@@ -179,7 +205,13 @@ export default {
sortStatisticsItems(dataItems, this.sortingType);
for (let j = 0; j < dataItems.length; j++) {
totalAmount += dataItems[j].totalAmount;
if (dataItems[j].totalAmount > 0) {
totalAmount += dataItems[j].totalAmount;
}
}
if (totalAmount > maxTotalAmount) {
maxTotalAmount = totalAmount;
}
finalDataItems.push({
@@ -190,7 +222,18 @@ export default {
});
}
return finalDataItems;
for (let i = 0; i < finalDataItems.length; i++) {
if (maxTotalAmount > 0) {
finalDataItems[i].percent = 100.0 * finalDataItems[i].totalAmount / maxTotalAmount;
} else {
finalDataItems[i].percent = 100.0;
}
}
return {
data: finalDataItems,
legends: legends
};
}
},
methods: {
@@ -241,3 +284,13 @@ export default {
}
}
</script>
<style>
.trends-bar-chart-legend-icon.f7-icons {
font-size: var(--ebk-trends-bar-chart-legend-icon-font-size);
}
.trends-bar-chart-legend-text {
font-size: var(--ebk-trends-bar-chart-legend-text-font-size);
}
</style>
src/styles/mobile/font-size-default.css
+2
View File
@@ -68,6 +68,8 @@
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 18px;
--ebk-pie-chart-toolbox-text-font-size: 16px;
--ebk-trends-bar-chart-legend-icon-font-size: 18px;
--ebk-trends-bar-chart-legend-text-font-size: 14px;
--ebk-account-list-group-title-height: 36px;
--ebk-category-separate-icon-font-size: 18px;
--ebk-transaction-date-width: 25px;
src/styles/mobile/font-size-large.css
+2
View File
@@ -68,6 +68,8 @@
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 19px;
--ebk-pie-chart-toolbox-text-font-size: 17px;
--ebk-trends-bar-chart-legend-icon-font-size: 19px;
--ebk-trends-bar-chart-legend-text-font-size: 15px;
--ebk-account-list-group-title-height: 37px;
--ebk-category-separate-icon-font-size: 18px;
--ebk-transaction-date-width: 28px;
src/styles/mobile/font-size-small.css
+2
View File
@@ -68,6 +68,8 @@
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 18px;
--ebk-pie-chart-toolbox-text-font-size: 16px;
--ebk-trends-bar-chart-legend-icon-font-size: 16px;
--ebk-trends-bar-chart-legend-text-font-size: 12px;
--ebk-account-list-group-title-height: 36px;
--ebk-category-separate-icon-font-size: 18px;
--ebk-transaction-date-width: 25px;
src/styles/mobile/font-size-x-large.css
+2
View File
@@ -68,6 +68,8 @@
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 20px;
--ebk-pie-chart-toolbox-text-font-size: 18px;
--ebk-trends-bar-chart-legend-icon-font-size: 20px;
--ebk-trends-bar-chart-legend-text-font-size: 16px;
--ebk-account-list-group-title-height: 38px;
--ebk-category-separate-icon-font-size: 18px;
--ebk-transaction-date-width: 30px;
src/styles/mobile/font-size-xx-large.css
+2
View File
@@ -68,6 +68,8 @@
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 22px;
--ebk-pie-chart-toolbox-text-font-size: 20px;
--ebk-trends-bar-chart-legend-icon-font-size: 22px;
--ebk-trends-bar-chart-legend-text-font-size: 18px;
--ebk-account-list-group-title-height: 40px;
--ebk-category-separate-icon-font-size: 20px;
--ebk-transaction-date-width: 32px;
src/styles/mobile/font-size-xxx-large.css
+2
View File
@@ -68,6 +68,8 @@
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 24px;
--ebk-pie-chart-toolbox-text-font-size: 22px;
--ebk-trends-bar-chart-legend-icon-font-size: 24px;
--ebk-trends-bar-chart-legend-text-font-size: 20px;
--ebk-account-list-group-title-height: 42px;
--ebk-category-separate-icon-font-size: 20px;
--ebk-transaction-date-width: 36px;
src/styles/mobile/font-size-xxxx-large.css
+2
View File
@@ -68,6 +68,8 @@
--ebk-pie-chart-toolbox-percentage-height: 30px;
--ebk-pie-chart-toolbox-percentage-font-size: 26px;
--ebk-pie-chart-toolbox-text-font-size: 24px;
--ebk-trends-bar-chart-legend-icon-font-size: 26px;
--ebk-trends-bar-chart-legend-text-font-size: 22px;
--ebk-account-list-group-title-height: 44px;
--ebk-category-separate-icon-font-size: 22px;
--ebk-transaction-date-width: 40px;
src/styles/mobile/global.css
+14
View File
@@ -653,3 +653,17 @@ i.icon.la, i.icon.las, i.icon.lab {
height: 4px;
--f7-progressbar-bg-color: #f8f8f8;
}
.statistics-multi-percent-line > div > .progressbar {
border-radius: unset;
}
.statistics-multi-percent-line > div:first-child > .progressbar {
border-top-left-radius: var(--f7-progressbar-border-radius);
border-bottom-left-radius: var(--f7-progressbar-border-radius);
}
.statistics-multi-percent-line > div:last-child > .progressbar {
border-top-right-radius: var(--f7-progressbar-border-radius);
border-bottom-right-radius: var(--f7-progressbar-border-radius);
}