mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 23:17:33 +08:00
reconciliation statement page / dialog supports account balance trends chart (#184)
This commit is contained in:
MaysWind
@@ -0,0 +1,183 @@
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import {
|
||||
type UnixTimeRange,
|
||||
type YearUnixTime,
|
||||
type YearQuarterUnixTime,
|
||||
type YearMonthUnixTime,
|
||||
YearMonthDayUnixTime,
|
||||
} from '@/core/datetime.ts';
|
||||
import type { FiscalYearUnixTime } from '@/core/fiscalyear.ts';
|
||||
import { ChartDateAggregationType } from '@/core/statistics.ts';
|
||||
import type { TransactionReconciliationStatementResponseItem } from '@/models/transaction.ts';
|
||||
|
||||
import { isDefined, isArray } from '@/lib/common.ts';
|
||||
import {
|
||||
getYearAndMonthFromUnixTime,
|
||||
getYearFirstUnixTimeBySpecifiedUnixTime,
|
||||
getQuarterFirstUnixTimeBySpecifiedUnixTime,
|
||||
getMonthFirstUnixTimeBySpecifiedUnixTime,
|
||||
getDayFirstUnixTimeBySpecifiedUnixTime,
|
||||
getAllDaysStartAndEndUnixTimes,
|
||||
getFiscalYearStartUnixTime
|
||||
} from '@/lib/datetime.ts';
|
||||
import { getAllDateRangesByYearMonthRange } from '@/lib/statistics.ts';
|
||||
|
||||
export interface AccountBalanceUnixTimeAndBalanceRange extends UnixTimeRange {
|
||||
minUnixTimeBalance: number;
|
||||
maxUnixTimeBalance: number;
|
||||
}
|
||||
|
||||
export interface AccountBalanceTrendsChartItem {
|
||||
displayDate: string;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export interface CommonAccountBalanceTrendsChartProps {
|
||||
items: TransactionReconciliationStatementResponseItem[] | undefined;
|
||||
dateAggregationType?: number;
|
||||
fiscalYearStart: number;
|
||||
accountCurrency: string;
|
||||
}
|
||||
|
||||
export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTrendsChartProps) {
|
||||
const { formatUnixTimeToShortDate, formatUnixTimeToShortYear, formatUnixTimeToShortYearMonth, formatUnixTimeToYearQuarter, formatUnixTimeToFiscalYear } = useI18n();
|
||||
|
||||
const dataDateRange = computed<AccountBalanceUnixTimeAndBalanceRange | null>(() => {
|
||||
if (!props.items || props.items.length < 1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let minUnixTime = Number.MAX_SAFE_INTEGER, maxUnixTime = 0;
|
||||
let minUnixTimeBalance = 0, maxUnixTimeBalance = 0;
|
||||
|
||||
for (let i = 0; i < props.items.length; i++) {
|
||||
const item = props.items[i];
|
||||
|
||||
if (item.time < minUnixTime) {
|
||||
minUnixTime = item.time;
|
||||
minUnixTimeBalance = item.accountBalance;
|
||||
}
|
||||
|
||||
if (item.time > maxUnixTime) {
|
||||
maxUnixTime = item.time;
|
||||
maxUnixTimeBalance = item.accountBalance;
|
||||
}
|
||||
}
|
||||
|
||||
if (minUnixTime >= Number.MAX_SAFE_INTEGER || maxUnixTime <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
minUnixTime: minUnixTime,
|
||||
maxUnixTime: maxUnixTime,
|
||||
minUnixTimeBalance: minUnixTimeBalance,
|
||||
maxUnixTimeBalance: maxUnixTimeBalance
|
||||
};
|
||||
});
|
||||
|
||||
const allDateRanges = computed<YearUnixTime[] | FiscalYearUnixTime[] | YearQuarterUnixTime[] | YearMonthUnixTime[] | YearMonthDayUnixTime[]>(() => {
|
||||
if (!dataDateRange.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (!isDefined(props.dateAggregationType)) {
|
||||
return getAllDaysStartAndEndUnixTimes(dataDateRange.value.minUnixTime, dataDateRange.value.maxUnixTime);
|
||||
} else {
|
||||
const startYearMonth = getYearAndMonthFromUnixTime(dataDateRange.value.minUnixTime);
|
||||
const endYearMonth = getYearAndMonthFromUnixTime(dataDateRange.value.maxUnixTime);
|
||||
return getAllDateRangesByYearMonthRange(startYearMonth, endYearMonth, props.fiscalYearStart, props.dateAggregationType);
|
||||
}
|
||||
});
|
||||
|
||||
const allDataItems = computed<AccountBalanceTrendsChartItem[]>(() => {
|
||||
const ret: AccountBalanceTrendsChartItem[] = [];
|
||||
|
||||
if (!dataDateRange.value || !allDateRanges.value || allDateRanges.value.length < 1 || !props.items || props.items.length < 1) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
const dayDataItemsMap: Record<number, TransactionReconciliationStatementResponseItem[]> = {};
|
||||
|
||||
for (let i = 0; i < props.items.length; i++) {
|
||||
const dateItem = props.items[i];
|
||||
let dateRangeMinUnixTime = 0;
|
||||
|
||||
if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
|
||||
dateRangeMinUnixTime = getYearFirstUnixTimeBySpecifiedUnixTime(dateItem.time);
|
||||
} else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
|
||||
dateRangeMinUnixTime = getFiscalYearStartUnixTime(dateItem.time, props.fiscalYearStart);
|
||||
} else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
|
||||
dateRangeMinUnixTime = getQuarterFirstUnixTimeBySpecifiedUnixTime(dateItem.time);
|
||||
} else if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
|
||||
dateRangeMinUnixTime = getMonthFirstUnixTimeBySpecifiedUnixTime(dateItem.time);
|
||||
} else {
|
||||
dateRangeMinUnixTime = getDayFirstUnixTimeBySpecifiedUnixTime(dateItem.time);
|
||||
}
|
||||
|
||||
const dataItems: TransactionReconciliationStatementResponseItem[] = dayDataItemsMap[dateRangeMinUnixTime] || [];
|
||||
dataItems.push(dateItem);
|
||||
|
||||
dayDataItemsMap[dateRangeMinUnixTime] = dataItems;
|
||||
}
|
||||
|
||||
let lastAmount = dataDateRange.value.minUnixTimeBalance;
|
||||
|
||||
for (let i = 0; i < allDateRanges.value.length; i++) {
|
||||
const dateRange = allDateRanges.value[i];
|
||||
const dataItems = dayDataItemsMap[dateRange.minUnixTime];
|
||||
|
||||
let displayDate = '';
|
||||
|
||||
if (props.dateAggregationType === ChartDateAggregationType.Year.type) {
|
||||
displayDate = formatUnixTimeToShortYear(dateRange.minUnixTime);
|
||||
} else if (props.dateAggregationType === ChartDateAggregationType.FiscalYear.type) {
|
||||
displayDate = formatUnixTimeToFiscalYear(dateRange.minUnixTime);
|
||||
} else if (props.dateAggregationType === ChartDateAggregationType.Quarter.type) {
|
||||
displayDate = formatUnixTimeToYearQuarter(dateRange.minUnixTime);
|
||||
} else if (props.dateAggregationType === ChartDateAggregationType.Month.type) {
|
||||
displayDate = formatUnixTimeToShortYearMonth(dateRange.minUnixTime);
|
||||
} else {
|
||||
displayDate = formatUnixTimeToShortDate(dateRange.minUnixTime);
|
||||
}
|
||||
|
||||
if (isArray(dataItems)) {
|
||||
let lastUnixTime = 0;
|
||||
|
||||
for (let i = 0; i < dataItems.length; i++) {
|
||||
const dataItem = dataItems[i];
|
||||
|
||||
if (dataItem.time >= lastUnixTime) {
|
||||
lastUnixTime = dataItem.time;
|
||||
lastAmount = dataItem.accountBalance;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ret.push({
|
||||
displayDate: displayDate,
|
||||
amount: lastAmount
|
||||
});
|
||||
}
|
||||
|
||||
return ret;
|
||||
});
|
||||
|
||||
const allDisplayDateRanges = computed<string[]>(() => {
|
||||
if (!allDataItems.value || allDataItems.value.length < 1) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return allDataItems.value.map(item => item.displayDate);
|
||||
});
|
||||
|
||||
return {
|
||||
// computed states
|
||||
allDateRanges,
|
||||
allDataItems,
|
||||
allDisplayDateRanges
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<v-chart autoresize class="account-balance-trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from 'vuetify';
|
||||
import type { CallbackDataParams } from 'echarts/types/dist/shared';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { type CommonAccountBalanceTrendsChartProps, useAccountBalanceTrendsChartBase } from '@/components/base/AccountBalanceTrendsChartBase.ts'
|
||||
|
||||
import type { ColorValue } from '@/core/color.ts';
|
||||
import { ThemeType } from '@/core/theme.ts';
|
||||
import { TrendChartType } from '@/core/statistics.ts';
|
||||
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
|
||||
|
||||
interface DesktopAccountBalanceTrendsChartProps extends CommonAccountBalanceTrendsChartProps {
|
||||
legendName: string;
|
||||
skeleton?: boolean;
|
||||
type?: number;
|
||||
}
|
||||
|
||||
interface AccountBalanceTrendsChartDataItem {
|
||||
id: string;
|
||||
name: string;
|
||||
itemStyle: {
|
||||
color: ColorValue;
|
||||
};
|
||||
selected: boolean;
|
||||
type: string;
|
||||
areaStyle?: object;
|
||||
stack: string;
|
||||
animation: boolean;
|
||||
data: number[];
|
||||
}
|
||||
|
||||
const props = defineProps<DesktopAccountBalanceTrendsChartProps>();
|
||||
|
||||
const theme = useTheme();
|
||||
const { formatAmountWithCurrency } = useI18n();
|
||||
const { allDataItems, allDisplayDateRanges } = useAccountBalanceTrendsChartBase(props);
|
||||
|
||||
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
|
||||
|
||||
const allSeries = computed<AccountBalanceTrendsChartDataItem[]>(() => {
|
||||
const series: AccountBalanceTrendsChartDataItem = {
|
||||
id: 'accountBalance',
|
||||
name: props.legendName,
|
||||
itemStyle: {
|
||||
color: `#${DEFAULT_CHART_COLORS[0]}`
|
||||
},
|
||||
selected: true,
|
||||
type: 'line',
|
||||
stack: 'a',
|
||||
animation: !props.skeleton,
|
||||
data: []
|
||||
};
|
||||
|
||||
if (props.type === TrendChartType.Area.type) {
|
||||
series.areaStyle = {};
|
||||
} else if (props.type === TrendChartType.Column.type) {
|
||||
series.type = 'bar';
|
||||
}
|
||||
|
||||
for (let i = 0; i < allDataItems.value.length; i++) {
|
||||
const item = allDataItems.value[i];
|
||||
series.data.push(item.amount);
|
||||
}
|
||||
|
||||
return [series];
|
||||
});
|
||||
|
||||
const yAxisWidth = computed<number>(() => {
|
||||
let maxValue = Number.MIN_SAFE_INTEGER;
|
||||
let minValue = Number.MAX_SAFE_INTEGER;
|
||||
let width = 90;
|
||||
|
||||
if (!allSeries.value || !allSeries.value.length) {
|
||||
return width;
|
||||
}
|
||||
|
||||
for (let i = 0; i < allSeries.value.length; i++) {
|
||||
for (let j = 0; j < allSeries.value[i].data.length; j++) {
|
||||
const value = allSeries.value[i].data[j];
|
||||
|
||||
if (value > maxValue) {
|
||||
maxValue = value;
|
||||
}
|
||||
|
||||
if (value < minValue) {
|
||||
minValue = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const maxValueText = formatAmountWithCurrency(maxValue, props.accountCurrency);
|
||||
const minValueText = formatAmountWithCurrency(minValue, props.accountCurrency);
|
||||
const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
if (context) {
|
||||
context.font = '12px Arial';
|
||||
|
||||
const textMetrics = context.measureText(maxLengthText);
|
||||
const actualWidth = Math.round(textMetrics.width) + 20;
|
||||
|
||||
if (actualWidth >= 200) {
|
||||
width = 200;
|
||||
} if (actualWidth > 90) {
|
||||
width = actualWidth;
|
||||
}
|
||||
}
|
||||
|
||||
return width;
|
||||
});
|
||||
|
||||
const chartOptions = computed<object>(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: isDarkMode.value ? '#333' : '#fff',
|
||||
color: isDarkMode.value ? '#eee' : '#333'
|
||||
},
|
||||
},
|
||||
backgroundColor: isDarkMode.value ? '#333' : '#fff',
|
||||
borderColor: isDarkMode.value ? '#333' : '#fff',
|
||||
textStyle: {
|
||||
color: isDarkMode.value ? '#eee' : '#333'
|
||||
},
|
||||
formatter: (params: CallbackDataParams[]) => {
|
||||
const amount = params[0].data as number;
|
||||
const value = formatAmountWithCurrency(amount, props.accountCurrency);
|
||||
|
||||
return `${params[0].name}<br/>`
|
||||
+ '<div><span class="chart-pointer" style="background-color: #' + DEFAULT_CHART_COLORS[0] + '"></span>'
|
||||
+ `<span>${props.legendName}</span><span style="margin-left: 20px; float: right">${value}</span><br/>`
|
||||
+ '</div>';
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: yAxisWidth.value,
|
||||
right: 20
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: allDisplayDateRanges.value
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: (value: string) => {
|
||||
return formatAmountWithCurrency(value, props.accountCurrency);
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
formatter: (params: CallbackDataParams) => {
|
||||
return formatAmountWithCurrency(Math.floor(params.value as number), props.accountCurrency);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: allSeries.value
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.account-balance-trends-chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<f7-list class="skeleton-text margin-top-half" media-list v-if="loading">
|
||||
<f7-list-item class="account-balance-trends-list-item" title="Date Range" after="0.00 USD"
|
||||
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]">
|
||||
<template #media>
|
||||
<f7-icon f7="app_fill"></f7-icon>
|
||||
</template>
|
||||
<template #inner>
|
||||
<div class="display-flex padding-top-half">
|
||||
<div class="account-balance-percent-line width-100">
|
||||
<f7-progressbar :progress="0"></f7-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list v-else-if="!loading && (!allVirtualListItems || !allVirtualListItems.length)">
|
||||
<f7-list-item :title="tt('No transaction data')"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<f7-list class="margin-top-half" media-list virtual-list :virtual-list-params="{ items: allVirtualListItems, renderExternal, height: 'auto' }"
|
||||
:key="`account-balance-trends-${dateAggregationType}`"
|
||||
v-else-if="!loading && allVirtualListItems && allVirtualListItems.length > 0">
|
||||
<ul>
|
||||
<f7-list-item class="account-balance-trends-list-item"
|
||||
:key="item.index"
|
||||
:style="`top: ${virtualDataItems.topPosition}px`"
|
||||
:virtual-list-index="item.index"
|
||||
:title="item.displayDate"
|
||||
:after="formatAmountWithCurrency(item.amount, accountCurrency)"
|
||||
v-for="item in virtualDataItems.items"
|
||||
>
|
||||
<template #media>
|
||||
<f7-icon f7="calendar"></f7-icon>
|
||||
</template>
|
||||
<template #inner>
|
||||
<div class="display-flex padding-top-half">
|
||||
<div class="account-balance-percent-line" :style="{ 'width': item.percent + '%' }">
|
||||
<f7-progressbar :progress="100" :style="{ '--f7-progressbar-progress-color': (item.color ? item.color : '') } "></f7-progressbar>
|
||||
</div>
|
||||
<div class="account-balance-percent-line" :style="{ 'width': (100.0 - item.percent) + '%' }"
|
||||
v-if="item.percent < 100.0">
|
||||
<f7-progressbar :progress="0"></f7-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</f7-list-item>
|
||||
</ul>
|
||||
</f7-list>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import {
|
||||
type AccountBalanceTrendsChartItem,
|
||||
type CommonAccountBalanceTrendsChartProps,
|
||||
useAccountBalanceTrendsChartBase
|
||||
} from '@/components/base/AccountBalanceTrendsChartBase.ts'
|
||||
|
||||
import type { ColorValue } from '@/core/color.ts';
|
||||
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
|
||||
|
||||
interface MobileAccountBalanceTrendsChartItem extends AccountBalanceTrendsChartItem {
|
||||
index: number;
|
||||
percent: number;
|
||||
color: ColorValue;
|
||||
}
|
||||
|
||||
interface MobileAccountBalanceTrendsChartProps extends CommonAccountBalanceTrendsChartProps {
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
interface MobileAccountBalanceTrendsChartVirtualListData {
|
||||
items: MobileAccountBalanceTrendsChartItem[],
|
||||
topPosition: number
|
||||
}
|
||||
|
||||
const props = defineProps<MobileAccountBalanceTrendsChartProps>();
|
||||
|
||||
const { tt, formatAmountWithCurrency } = useI18n();
|
||||
const { allDataItems } = useAccountBalanceTrendsChartBase(props);
|
||||
|
||||
const virtualDataItems = ref<MobileAccountBalanceTrendsChartVirtualListData>({
|
||||
items: [],
|
||||
topPosition: 0
|
||||
});
|
||||
|
||||
const allVirtualListItems = computed<MobileAccountBalanceTrendsChartItem[]>(() => {
|
||||
const ret: MobileAccountBalanceTrendsChartItem[] = [];
|
||||
let maxAmount = 0;
|
||||
|
||||
for (let i = 0; i < allDataItems.value.length; i++) {
|
||||
const dataItem = allDataItems.value[i];
|
||||
|
||||
if (dataItem.amount > maxAmount) {
|
||||
maxAmount = dataItem.amount;
|
||||
}
|
||||
|
||||
const finalDataItem: MobileAccountBalanceTrendsChartItem = {
|
||||
index: i,
|
||||
displayDate: dataItem.displayDate,
|
||||
amount: dataItem.amount,
|
||||
color: `#${DEFAULT_CHART_COLORS[0]}`,
|
||||
percent: 0.0
|
||||
};
|
||||
|
||||
ret.push(finalDataItem);
|
||||
}
|
||||
|
||||
for (let i = 0; i < ret.length; i++) {
|
||||
if (maxAmount > 0 && ret[i].amount > 0) {
|
||||
ret[i].percent = 100.0 * ret[i].amount / maxAmount;
|
||||
} else {
|
||||
ret[i].percent = 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
});
|
||||
|
||||
function renderExternal(vl: unknown, vlData: MobileAccountBalanceTrendsChartVirtualListData): void {
|
||||
virtualDataItems.value = vlData;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.account-balance-trends-list-item .account-balance-percent-line {
|
||||
--f7-progressbar-bg-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user