mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-16 16:07:33 +08:00
add trend analysis for mobile version
This commit is contained in:
MaysWind
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="month-range-selection-sheet" style="height:auto"
|
||||
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
||||
<div class="swipe-handler" style="z-index: 10"></div>
|
||||
<f7-page-content>
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div class="ebk-sheet-title" v-if="title"><b>{{ title }}</b></div>
|
||||
</div>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin-top" v-if="hint">{{ hint }}</p>
|
||||
<p class="no-margin-top margin-bottom" v-if="beginDateTime && endDateTime">
|
||||
<span>{{ beginDateTime }}</span>
|
||||
<span> - </span>
|
||||
<span>{{ endDateTime }}</span>
|
||||
</p>
|
||||
<slot></slot>
|
||||
<vue-date-picker inline month-picker auto-apply
|
||||
month-name-format="long"
|
||||
class="justify-content-center margin-bottom"
|
||||
:clearable="false"
|
||||
:dark="isDarkMode"
|
||||
:year-range="yearRange"
|
||||
:year-first="isYearFirst"
|
||||
:range="{ partialRange: false }"
|
||||
v-model="dateRange">
|
||||
<template #month="{ text }">
|
||||
{{ getMonthShortName(text) }}
|
||||
</template>
|
||||
<template #month-overlay-value="{ text }">
|
||||
{{ getMonthShortName(text) }}
|
||||
</template>
|
||||
</vue-date-picker>
|
||||
<f7-button large fill
|
||||
:class="{ 'disabled': !dateRange[0] || !dateRange[1] }"
|
||||
:text="$t('Continue')"
|
||||
@click="confirm">
|
||||
</f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="cancel" :text="$t('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
</f7-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
|
||||
import {
|
||||
getYearMonthObjectFromString,
|
||||
getYearMonthStringFromObject,
|
||||
getCurrentUnixTime,
|
||||
getCurrentYear,
|
||||
getThisYearFirstUnixTime,
|
||||
getYearMonthFirstUnixTime,
|
||||
getYearMonthLastUnixTime
|
||||
} from '@/lib/datetime.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'minTime',
|
||||
'maxTime',
|
||||
'title',
|
||||
'hint',
|
||||
'show'
|
||||
],
|
||||
emits: [
|
||||
'update:show',
|
||||
'dateRange:change'
|
||||
],
|
||||
data() {
|
||||
const self = this;
|
||||
let minDate = getThisYearFirstUnixTime();
|
||||
let maxDate = getCurrentUnixTime();
|
||||
|
||||
if (self.minTime) {
|
||||
minDate = getYearMonthObjectFromString(self.minTime);
|
||||
}
|
||||
|
||||
if (self.maxTime) {
|
||||
maxDate = getYearMonthObjectFromString(self.maxTime);
|
||||
}
|
||||
|
||||
return {
|
||||
yearRange: [
|
||||
2000,
|
||||
getCurrentYear() + 1
|
||||
],
|
||||
dateRange: [
|
||||
minDate,
|
||||
maxDate
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUserStore),
|
||||
isDarkMode() {
|
||||
return this.$root.isDarkMode;
|
||||
},
|
||||
firstDayOfWeek() {
|
||||
return this.userStore.currentUserFirstDayOfWeek;
|
||||
},
|
||||
isYearFirst() {
|
||||
return this.$locale.isLongDateMonthAfterYear(this.userStore);
|
||||
},
|
||||
is24Hour() {
|
||||
return this.$locale.isLongTime24HourFormat(this.userStore);
|
||||
},
|
||||
beginDateTime() {
|
||||
return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthFirstUnixTime(this.dateRange[0]));
|
||||
},
|
||||
endDateTime() {
|
||||
return this.$locale.formatUnixTimeToLongYearMonth(this.userStore, getYearMonthLastUnixTime(this.dateRange[1]));
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSheetOpen() {
|
||||
if (this.minTime) {
|
||||
this.dateRange[0] = getYearMonthObjectFromString(this.minTime);
|
||||
}
|
||||
|
||||
if (this.maxTime) {
|
||||
this.dateRange[1] = getYearMonthObjectFromString(this.maxTime);
|
||||
}
|
||||
},
|
||||
onSheetClosed() {
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
confirm() {
|
||||
if (!this.dateRange[0] || !this.dateRange[1]) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.dateRange[0].year <= 0 || this.dateRange[0].month < 0 || this.dateRange[1].year <= 0 || this.dateRange[1].month < 0) {
|
||||
this.$toast('Date is too early');
|
||||
return;
|
||||
}
|
||||
|
||||
const minYearMonth = getYearMonthStringFromObject(this.dateRange[0]);
|
||||
const maxYearMonth = getYearMonthStringFromObject(this.dateRange[1]);
|
||||
|
||||
this.$emit('dateRange:change', minYearMonth, maxYearMonth);
|
||||
},
|
||||
cancel() {
|
||||
this.$emit('update:show', false);
|
||||
},
|
||||
getMonthShortName(month) {
|
||||
return this.$locale.getMonthShortName(month);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.month-range-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.month-range-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative .dp__selection_grid_header .dp--year-mode-picker .dp--arrow-btn-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.month-range-selection-sheet .dp__main .dp__instance_calendar .dp__overlay.dp--overlay-relative .dp__selection_grid_header .dp--year-mode-picker .dp--year-select+.dp--arrow-btn-nav {
|
||||
justify-content: end;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<f7-list class="statistics-list-item skeleton-text" v-if="loading">
|
||||
<f7-list-item link="#" :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]">
|
||||
<template #media>
|
||||
<div class="display-flex no-padding-horizontal">
|
||||
<div class="display-flex align-items-center statistics-icon">
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="statistics-list-item-text">
|
||||
<span>Date Range</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #after>
|
||||
<span>0.00 USD</span>
|
||||
</template>
|
||||
<template #inner-end>
|
||||
<div class="statistics-item-end">
|
||||
<div class="statistics-percent-line">
|
||||
<f7-progressbar></f7-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list v-else-if="!loading && (!allDisplayDataItems || !allDisplayDataItems.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-item class="statistics-list-item"
|
||||
link="#"
|
||||
:key="idx"
|
||||
v-for="(item, idx) in allDisplayDataItems"
|
||||
v-show="!item.hidden"
|
||||
@click="clickItem(item)"
|
||||
>
|
||||
<template #media>
|
||||
<div class="display-flex no-padding-horizontal">
|
||||
<div class="display-flex align-items-center statistics-icon">
|
||||
<f7-icon f7="calendar"></f7-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
<div class="statistics-list-item-text">
|
||||
<span>{{ item.displayDateRange }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #after>
|
||||
<span>{{ getDisplayCurrency(item.totalAmount, defaultCurrency) }}</span>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.js';
|
||||
import { useUserStore } from '@/stores/user.js';
|
||||
|
||||
import colorConstants from '@/consts/color.js';
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
import statisticsConstants from '@/consts/statistics.js';
|
||||
import { isNumber } from '@/lib/common.js';
|
||||
import {
|
||||
getYearMonthFirstUnixTime,
|
||||
getYearMonthLastUnixTime,
|
||||
getDateTypeByDateRange
|
||||
} from '@/lib/datetime.js';
|
||||
import {
|
||||
sortStatisticsItems,
|
||||
getAllDateRanges
|
||||
} from '@/lib/statistics.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'loading',
|
||||
'items',
|
||||
'startYearMonth',
|
||||
'endYearMonth',
|
||||
'sortingType',
|
||||
'dateAggregationType',
|
||||
'idField',
|
||||
'nameField',
|
||||
'valueField',
|
||||
'colorField',
|
||||
'hiddenField',
|
||||
'displayOrdersField',
|
||||
'translateName',
|
||||
'defaultCurrency',
|
||||
'enableClickItem'
|
||||
],
|
||||
emits: [
|
||||
'click'
|
||||
],
|
||||
computed: {
|
||||
...mapStores(useSettingsStore, useUserStore),
|
||||
allDateRanges: function () {
|
||||
return getAllDateRanges(this.items, this.startYearMonth, this.endYearMonth, this.dateAggregationType);
|
||||
},
|
||||
allDisplayDataItems: function () {
|
||||
const dateRangeItemsMap = {};
|
||||
|
||||
for (let i = 0; i < this.items.length; i++) {
|
||||
const item = this.items[i];
|
||||
|
||||
if (!this.hiddenField || item[this.hiddenField]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let j = 0; j < item.items.length; j++) {
|
||||
const dataItem = item.items[j];
|
||||
let dateRangeKey = '';
|
||||
|
||||
if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Year.type) {
|
||||
dateRangeKey = dataItem.year;
|
||||
} else if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Quarter.type) {
|
||||
dateRangeKey = `${dataItem.year}-${Math.floor((dataItem.month - 1) / 3) + 1}`;
|
||||
} else { // if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Month.type) {
|
||||
dateRangeKey = `${dataItem.year}-${dataItem.month}`;
|
||||
}
|
||||
|
||||
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],
|
||||
totalAmount: (this.valueField && isNumber(dataItem[this.valueField])) ? dataItem[this.valueField] : 0
|
||||
});
|
||||
|
||||
dateRangeItemsMap[dateRangeKey] = dataItems;
|
||||
}
|
||||
}
|
||||
|
||||
const finalDataItems = [];
|
||||
|
||||
for (let i = 0; i < this.allDateRanges.length; i++) {
|
||||
const dateRange = this.allDateRanges[i];
|
||||
let dateRangeKey = '';
|
||||
|
||||
if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Year.type) {
|
||||
dateRangeKey = dateRange.year;
|
||||
} else if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Quarter.type) {
|
||||
dateRangeKey = `${dateRange.year}-${dateRange.quarter}`;
|
||||
} else { // if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Month.type) {
|
||||
dateRangeKey = `${dateRange.year}-${dateRange.month + 1}`;
|
||||
}
|
||||
|
||||
let displayDateRange = '';
|
||||
|
||||
if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Year.type) {
|
||||
displayDateRange = this.$locale.formatUnixTimeToShortYear(this.userStore, dateRange.minUnixTime);
|
||||
} else if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Quarter.type) {
|
||||
displayDateRange = this.$locale.formatYearQuarter(dateRange.year, dateRange.quarter);
|
||||
} else { // if (this.dateAggregationType === statisticsConstants.allDateAggregationTypes.Month.type) {
|
||||
displayDateRange = this.$locale.formatUnixTimeToShortYearMonth(this.userStore, dateRange.minUnixTime);
|
||||
}
|
||||
|
||||
const dataItems = dateRangeItemsMap[dateRangeKey] || [];
|
||||
let totalAmount = 0;
|
||||
|
||||
sortStatisticsItems(dataItems, this.sortingType);
|
||||
|
||||
for (let j = 0; j < dataItems.length; j++) {
|
||||
totalAmount += dataItems[j].totalAmount;
|
||||
}
|
||||
|
||||
finalDataItems.push({
|
||||
dateRange: dateRange,
|
||||
displayDateRange: displayDateRange,
|
||||
items: dataItems,
|
||||
totalAmount: totalAmount
|
||||
});
|
||||
}
|
||||
|
||||
return finalDataItems;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickItem: function (item) {
|
||||
const dateRange = item.dateRange;
|
||||
let minUnixTime = dateRange.minUnixTime;
|
||||
let maxUnixTime = dateRange.maxUnixTime;
|
||||
|
||||
if (this.startYearMonth) {
|
||||
const startMinUnixTime = getYearMonthFirstUnixTime(this.startYearMonth);
|
||||
|
||||
if (startMinUnixTime > minUnixTime) {
|
||||
minUnixTime = startMinUnixTime;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.endYearMonth) {
|
||||
const endMaxUnixTime = getYearMonthLastUnixTime(this.endYearMonth);
|
||||
|
||||
if (endMaxUnixTime < maxUnixTime) {
|
||||
maxUnixTime = endMaxUnixTime;
|
||||
}
|
||||
}
|
||||
|
||||
const dateRangeType = getDateTypeByDateRange(minUnixTime, maxUnixTime, this.userStore.currentUserFirstDayOfWeek, datetimeConstants.allDateRangeScenes.Normal);
|
||||
|
||||
this.$emit('click', {
|
||||
dateRange: {
|
||||
minTime: minUnixTime,
|
||||
maxTime: maxUnixTime,
|
||||
type: dateRangeType
|
||||
}
|
||||
});
|
||||
},
|
||||
getColor: function (color) {
|
||||
if (color && color !== colorConstants.defaultColor) {
|
||||
color = '#' + color;
|
||||
}
|
||||
|
||||
return color;
|
||||
},
|
||||
getItemName(name) {
|
||||
return this.translateName ? this.$t(name) : name;
|
||||
},
|
||||
getDisplayCurrency(value, currencyCode) {
|
||||
return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user