add candlestick chart for account balance trends

This commit is contained in:
MaysWind
2025-08-05 23:29:49 +08:00
parent 0d55912f6c
commit 7283b724b1
24 changed files with 292 additions and 64 deletions
+6 -3
View File
@@ -368,17 +368,20 @@ func (a *TransactionsApi) TransactionReconciliationStatementHandler(c *core.WebC
for i := 0; i < len(transactionResult); i++ {
transactionResult := transactionResult[i]
accountBalance := int64(0)
accountOpeningBalance := int64(0)
accountClosingBalance := int64(0)
if transactionWithBalance, exists := transactionAccountBalanceMap[transactionResult.Id]; exists {
accountBalance = transactionWithBalance.AccountBalance
accountOpeningBalance = transactionWithBalance.AccountOpeningBalance
accountClosingBalance = transactionWithBalance.AccountClosingBalance
} else {
log.Warnf(c, "[transactions.TransactionReconciliationStatementHandler] missing account balance for transaction \"id:%d\" of user \"uid:%d\"", transactionResult.Id, uid)
}
responseItems[i] = &models.TransactionReconciliationStatementResponseItem{
TransactionInfoResponse: transactionResult,
AccountBalance: accountBalance,
AccountOpeningBalance: accountOpeningBalance,
AccountClosingBalance: accountClosingBalance,
}
}
+4 -2
View File
@@ -123,7 +123,8 @@ type Transaction struct {
// TransactionWithAccountBalance represents a transaction item with account balance
type TransactionWithAccountBalance struct {
*Transaction
AccountBalance int64
AccountOpeningBalance int64
AccountClosingBalance int64
}
// TransactionGeoLocationRequest represents all parameters of transaction geographic location info update request
@@ -338,7 +339,8 @@ type TransactionInfoPageWrapperResponse2 struct {
// TransactionReconciliationStatementResponseItem represents a transaction reconciliation statement response
type TransactionReconciliationStatementResponseItem struct {
*TransactionInfoResponse
AccountBalance int64 `json:"accountBalance"`
AccountOpeningBalance int64 `json:"accountOpeningBalance"`
AccountClosingBalance int64 `json:"accountClosingBalance"`
}
// TransactionReconciliationStatementResponse represents the response of all transaction reconciliation statement response
+6 -2
View File
@@ -142,6 +142,7 @@ func (s *TransactionService) GetAllTransactionsWithAccountBalanceByMaxTime(c cor
totalOutflows := int64(0)
openingBalance := int64(0)
accumulatedBalance := int64(0)
lastAccumulatedBalance := int64(0)
for i := len(allTransactions) - 1; i >= 0; i-- {
transaction := allTransactions[i]
@@ -163,6 +164,7 @@ func (s *TransactionService) GetAllTransactionsWithAccountBalanceByMaxTime(c cor
if transaction.TransactionTime < minTransactionTime {
openingBalance = accumulatedBalance
lastAccumulatedBalance = accumulatedBalance
continue
}
@@ -183,10 +185,12 @@ func (s *TransactionService) GetAllTransactionsWithAccountBalanceByMaxTime(c cor
}
transactionsAndAccountBalance := &models.TransactionWithAccountBalance{
Transaction: transaction,
AccountBalance: accumulatedBalance,
Transaction: transaction,
AccountOpeningBalance: lastAccumulatedBalance,
AccountClosingBalance: accumulatedBalance,
}
lastAccumulatedBalance = accumulatedBalance
allTransactionsAndAccountBalance = append(allTransactionsAndAccountBalance, transactionsAndAccountBalance)
}
@@ -15,6 +15,7 @@ import type { AccountInfoResponse } from '@/models/account.ts';
import type { TransactionReconciliationStatementResponseItem } from '@/models/transaction.ts';
import { isDefined, isArray } from '@/lib/common.ts';
import { sumAmounts } from '@/lib/numeral.ts';
import {
getYearAndMonthFromUnixTime,
getYearFirstUnixTimeBySpecifiedUnixTime,
@@ -27,13 +28,19 @@ import {
import { getAllDateRangesByYearMonthRange } from '@/lib/statistics.ts';
export interface AccountBalanceUnixTimeAndBalanceRange extends UnixTimeRange {
minUnixTimeBalance: number;
maxUnixTimeBalance: number;
minUnixTimeOpeningBalance: number;
minUnixTimeClosingBalance: number;
maxUnixTimeClosingBalance: number;
}
export interface AccountBalanceTrendsChartItem {
displayDate: string;
amount: number;
openingBalance: number;
closingBalance: number;
minimumBalance: number;
maximumBalance: number;
medianBalance: number;
averageBalance: number;
}
export interface CommonAccountBalanceTrendsChartProps {
@@ -52,19 +59,22 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
}
let minUnixTime = Number.MAX_SAFE_INTEGER, maxUnixTime = 0;
let minUnixTimeBalance = 0, maxUnixTimeBalance = 0;
let minUnixTimeOpeningBalance = 0;
let minUnixTimeClosingBalance = 0;
let maxUnixTimeClosingBalance = 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;
minUnixTimeOpeningBalance = item.accountOpeningBalance;
minUnixTimeClosingBalance = item.accountClosingBalance;
}
if (item.time > maxUnixTime) {
maxUnixTime = item.time;
maxUnixTimeBalance = item.accountBalance;
maxUnixTimeClosingBalance = item.accountClosingBalance;
}
}
@@ -75,8 +85,9 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
return {
minUnixTime: minUnixTime,
maxUnixTime: maxUnixTime,
minUnixTimeBalance: minUnixTimeBalance,
maxUnixTimeBalance: maxUnixTimeBalance
minUnixTimeOpeningBalance: minUnixTimeOpeningBalance,
minUnixTimeClosingBalance: minUnixTimeClosingBalance,
maxUnixTimeClosingBalance: maxUnixTimeClosingBalance
};
});
@@ -125,7 +136,12 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
dayDataItemsMap[dateRangeMinUnixTime] = dataItems;
}
let lastAmount = dataDateRange.value.minUnixTimeBalance;
let lastOpeningBalance = dataDateRange.value.minUnixTimeOpeningBalance;
let lastClosingBalance = dataDateRange.value.minUnixTimeClosingBalance;
let lastMinimumBalance = lastClosingBalance;
let lastMaximumBalance = lastClosingBalance;
let lastMedianBalance = lastClosingBalance;
let lastAverageBalance = lastClosingBalance;
for (let i = 0; i < allDateRanges.value.length; i++) {
const dateRange = allDateRanges.value[i];
@@ -146,29 +162,56 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
}
if (isArray(dataItems)) {
let lastUnixTime = 0;
if (dataItems.length < 1) {
continue;
}
for (let i = 0; i < dataItems.length; i++) {
const dataItem = dataItems[i];
dataItems.sort(function (data1: TransactionReconciliationStatementResponseItem, data2: TransactionReconciliationStatementResponseItem) {
return data1.time - data2.time;
});
if (dataItem.time >= lastUnixTime) {
lastUnixTime = dataItem.time;
const openingBalance = dataItems[0].accountOpeningBalance;
const closingBalance = dataItems[dataItems.length - 1].accountClosingBalance;
const minimumBalance = Math.min(...dataItems.map(item => item.accountClosingBalance));
const maximumBalance = Math.max(...dataItems.map(item => item.accountClosingBalance));
const medianBalance = dataItems[Math.floor(dataItems.length / 2)].accountClosingBalance;
const averageBalance = Math.floor(sumAmounts(dataItems.map(item => item.accountClosingBalance)) / dataItems.length);
if (props.account.isAsset) {
lastAmount = dataItem.accountBalance;
} else if (props.account.isLiability) {
lastAmount = -dataItem.accountBalance;
} else {
lastAmount = dataItem.accountBalance;
}
}
if (props.account.isAsset) {
lastOpeningBalance = openingBalance;
lastClosingBalance = closingBalance;
lastMinimumBalance = minimumBalance;
lastMaximumBalance = maximumBalance;
lastMedianBalance = medianBalance;
lastAverageBalance = averageBalance;
} else if (props.account.isLiability) {
lastOpeningBalance = -openingBalance;
lastClosingBalance = -closingBalance;
lastMinimumBalance = -minimumBalance;
lastMaximumBalance = -maximumBalance;
lastMedianBalance = -medianBalance;
lastAverageBalance = -averageBalance;
} else {
lastOpeningBalance = openingBalance;
lastClosingBalance = closingBalance;
lastMinimumBalance = minimumBalance;
lastMaximumBalance = maximumBalance;
lastMedianBalance = medianBalance;
lastAverageBalance = averageBalance;
}
}
ret.push({
displayDate: displayDate,
amount: lastAmount
openingBalance: lastOpeningBalance,
closingBalance: lastClosingBalance,
minimumBalance: lastMinimumBalance,
maximumBalance: lastMaximumBalance,
medianBalance: lastMedianBalance,
averageBalance: lastAverageBalance
});
lastOpeningBalance = lastClosingBalance;
}
return ret;
@@ -10,11 +10,17 @@ import type { CallbackDataParams } from 'echarts/types/dist/shared';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonAccountBalanceTrendsChartProps, useAccountBalanceTrendsChartBase } from '@/components/base/AccountBalanceTrendsChartBase.ts'
import { useUserStore } from '@/stores/user.ts';
import type { NameValue } from '@/core/base.ts';
import type { ColorValue } from '@/core/color.ts';
import { ThemeType } from '@/core/theme.ts';
import { TrendChartType } from '@/core/statistics.ts';
import { AccountBalanceTrendChartType } from '@/core/statistics.ts';
import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
import { isArray } from '@/lib/common.ts';
import { getExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
interface DesktopAccountBalanceTrendsChartProps extends CommonAccountBalanceTrendsChartProps {
legendName: string;
skeleton?: boolean;
@@ -26,21 +32,26 @@ interface AccountBalanceTrendsChartDataItem {
name: string;
itemStyle: {
color: ColorValue;
color0?: string;
borderColor?: string;
borderColor0?: string;
};
selected: boolean;
type: string;
areaStyle?: object;
stack: string;
animation: boolean;
data: number[];
data: (number | number[])[];
}
const props = defineProps<DesktopAccountBalanceTrendsChartProps>();
const theme = useTheme();
const { formatAmountWithCurrency } = useI18n();
const { tt, formatAmountWithCurrency } = useI18n();
const { allDataItems, allDisplayDateRanges } = useAccountBalanceTrendsChartBase(props);
const userStore = useUserStore();
const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const allSeries = computed<AccountBalanceTrendsChartDataItem[]>(() => {
@@ -57,15 +68,32 @@ const allSeries = computed<AccountBalanceTrendsChartDataItem[]>(() => {
data: []
};
if (props.type === TrendChartType.Area.type) {
if (props.type === AccountBalanceTrendChartType.Area.type) {
series.areaStyle = {};
} else if (props.type === TrendChartType.Column.type) {
} else if (props.type === AccountBalanceTrendChartType.Column.type) {
series.type = 'bar';
} else if (props.type === AccountBalanceTrendChartType.Candlestick.type) {
const expenseIncomeAmountColor = getExpenseAndIncomeAmountColor(userStore.currentUserExpenseAmountColor, userStore.currentUserIncomeAmountColor, isDarkMode.value);
series.type = 'candlestick';
series.itemStyle.color = expenseIncomeAmountColor.incomeAmountColor;
series.itemStyle.color0 = expenseIncomeAmountColor.expenseAmountColor;
series.itemStyle.borderColor = expenseIncomeAmountColor.incomeAmountColor;
series.itemStyle.borderColor0 = expenseIncomeAmountColor.expenseAmountColor;
}
for (let i = 0; i < allDataItems.value.length; i++) {
const item = allDataItems.value[i];
series.data.push(item.amount);
if (props.type === AccountBalanceTrendChartType.Candlestick.type) {
series.data.push([
item.openingBalance,
item.closingBalance,
item.minimumBalance,
item.maximumBalance
]);
} else {
series.data.push(item.closingBalance);
}
}
return [series];
@@ -82,7 +110,14 @@ const yAxisWidth = computed<number>(() => {
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];
const data = allSeries.value[i].data[j];
let value: number;
if (isArray(data)) {
value = data[1]; // for candlestick, use closing balance
} else {
value = data as number; // for line or bar chart
}
if (value > maxValue) {
maxValue = value;
@@ -134,13 +169,54 @@ const chartOptions = computed<object>(() => {
color: isDarkMode.value ? '#eee' : '#333'
},
formatter: (params: CallbackDataParams[]) => {
const amount = params[0].data as number;
const value = formatAmountWithCurrency(amount, props.account.currency);
if (props.type === AccountBalanceTrendChartType.Candlestick.type) {
const dataIndex = params[0].dataIndex;
const dataItem = allDataItems.value[dataIndex];
const displayItems: NameValue[] = [
{
name: tt('Opening Balance'),
value: formatAmountWithCurrency(dataItem.openingBalance, props.account.currency)
},
{
name: tt('Closing Balance'),
value: formatAmountWithCurrency(dataItem.closingBalance, props.account.currency)
},
{
name: tt('Minimum Balance'),
value: formatAmountWithCurrency(dataItem.minimumBalance, props.account.currency)
},
{
name: tt('Maximum Balance'),
value: formatAmountWithCurrency(dataItem.maximumBalance, props.account.currency)
},
{
name: tt('Median Balance'),
value: formatAmountWithCurrency(dataItem.medianBalance, props.account.currency)
},
{
name: tt('Average Balance'),
value: formatAmountWithCurrency(dataItem.averageBalance, props.account.currency)
}
];
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>';
let tooltip = `${params[0].name} ${props.legendName}<br/>`;
for (let i = 0; i < displayItems.length; i++) {
tooltip += `<div><span class="chart-pointer" style="background-color: #${DEFAULT_CHART_COLORS[i]}"></span>`
+ `<span>${displayItems[i].name}</span><span style="margin-left: 20px; float: right">${displayItems[i].value}</span><br/>`
+ `</div>`;
}
return tooltip;
} else {
const amount = params[0].data as number;
const value = formatAmountWithCurrency(amount, props.account.currency);
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: {
@@ -28,7 +28,7 @@
:style="`top: ${virtualDataItems.topPosition}px`"
:virtual-list-index="item.index"
:title="item.displayDate"
:after="formatAmountWithCurrency(item.amount, account.currency)"
:after="formatAmountWithCurrency(item.closingBalance, account.currency)"
v-for="item in virtualDataItems.items"
>
<template #media>
@@ -90,19 +90,24 @@ const virtualDataItems = ref<MobileAccountBalanceTrendsChartVirtualListData>({
const allVirtualListItems = computed<MobileAccountBalanceTrendsChartItem[]>(() => {
const ret: MobileAccountBalanceTrendsChartItem[] = [];
let maxAmount = 0;
let maxClosingBalance = 0;
for (let i = 0; i < allDataItems.value.length; i++) {
const dataItem = allDataItems.value[i];
if (dataItem.amount > maxAmount) {
maxAmount = dataItem.amount;
if (dataItem.closingBalance > maxClosingBalance) {
maxClosingBalance = dataItem.closingBalance;
}
const finalDataItem: MobileAccountBalanceTrendsChartItem = {
index: i,
displayDate: dataItem.displayDate,
amount: dataItem.amount,
openingBalance: dataItem.openingBalance,
closingBalance: dataItem.closingBalance,
medianBalance: dataItem.medianBalance,
averageBalance: dataItem.averageBalance,
minimumBalance: dataItem.minimumBalance,
maximumBalance: dataItem.maximumBalance,
color: `#${DEFAULT_CHART_COLORS[0]}`,
percent: 0.0
};
@@ -111,8 +116,8 @@ const allVirtualListItems = computed<MobileAccountBalanceTrendsChartItem[]>(() =
}
for (let i = 0; i < ret.length; i++) {
if (maxAmount > 0 && ret[i].amount > 0) {
ret[i].percent = 100.0 * ret[i].amount / maxAmount;
if (maxClosingBalance > 0 && ret[i].closingBalance > 0) {
ret[i].percent = 100.0 * ret[i].closingBalance / maxClosingBalance;
} else {
ret[i].percent = 0.0;
}
+24
View File
@@ -52,6 +52,30 @@ export class TrendChartType implements TypeAndName {
}
}
export class AccountBalanceTrendChartType implements TypeAndName {
private static readonly allInstances: AccountBalanceTrendChartType[] = [];
public static readonly Area = new AccountBalanceTrendChartType(0, 'Area Chart');
public static readonly Column = new AccountBalanceTrendChartType(1, 'Column Chart');
public static readonly Candlestick = new AccountBalanceTrendChartType(2, 'Candlestick Chart');
public static readonly Default = TrendChartType.Column;
public readonly type: number;
public readonly name: string;
private constructor(type: number, name: string) {
this.type = type;
this.name = name;
AccountBalanceTrendChartType.allInstances.push(this);
}
public static values(): TrendChartType[] {
return AccountBalanceTrendChartType.allInstances;
}
}
export class ChartDataType implements TypeAndName {
private static readonly allInstances: ChartDataType[] = [];
private static readonly allInstancesByType: Record<number, ChartDataType> = {};
+2 -1
View File
@@ -52,7 +52,7 @@ import 'vuetify/styles';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import { LineChart, BarChart, PieChart, CandlestickChart } from 'echarts/charts';
import {
GridComponent,
TooltipComponent,
@@ -487,6 +487,7 @@ echarts.use([
LineChart,
BarChart,
PieChart,
CandlestickChart,
GridComponent,
TooltipComponent,
LegendComponent
+11 -1
View File
@@ -1,7 +1,17 @@
import { type NumberFormatOptions, DecimalSeparator, DigitGroupingSymbol, DigitGroupingType } from '@/core/numeral.ts';
import { DEFAULT_DECIMAL_NUMBER_COUNT, MAX_SUPPORTED_DECIMAL_NUMBER_COUNT } from '@/consts/numeral.ts';
import {isString, isNumber, replaceAll, removeAll } from './common.ts';
import { isString, isNumber, replaceAll, removeAll } from './common.ts';
export function sumAmounts(amounts: number[]): number {
let sum = 0;
for (let i = 0; i < amounts.length; i++) {
sum += amounts[i];
}
return sum;
}
export function appendDigitGroupingSymbol(value: number | string, options: NumberFormatOptions): string {
let textualValue = '';
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "Balkendiagramm",
"Area Chart": "Flächendiagramm",
"Column Chart": "Säulendiagramm",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "Sortieren nach",
"Map": "Karte",
"Provider": "Anbieter",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "Ausgaben nach Konto",
"Expense By Primary Category": "Ausgaben nach Primärkategorie",
"Expense By Secondary Category": "Ausgaben nach Sekundärkategorie",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "Bar Chart",
"Area Chart": "Area Chart",
"Column Chart": "Column Chart",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "Sort by",
"Map": "Map",
"Provider": "Provider",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "Expense By Account",
"Expense By Primary Category": "Expense By Primary Category",
"Expense By Secondary Category": "Expense By Secondary Category",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "Gráfico de barras",
"Area Chart": "Gráfico de área",
"Column Chart": "Gráfico de columnas",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "Ordenar por",
"Map": "Mapa",
"Provider": "Proveedor",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "Gasto por cuenta",
"Expense By Primary Category": "Gasto por categoría primaria",
"Expense By Secondary Category": "Gasto por categoría secundaria",
+2
View File
@@ -94,6 +94,7 @@ import {
StatisticsAnalysisType,
CategoricalChartType,
TrendChartType,
AccountBalanceTrendChartType,
ChartDataType,
ChartSortingType,
ChartDateAggregationType
@@ -1934,6 +1935,7 @@ export function useI18n() {
getAllAccountTypes: () => getLocalizedDisplayNameAndType(AccountType.values()),
getAllCategoricalChartTypes: () => getLocalizedDisplayNameAndType(CategoricalChartType.values()),
getAllTrendChartTypes: () => getLocalizedDisplayNameAndType(TrendChartType.values()),
getAllAccountBalanceTrendChartTypes: () => getLocalizedDisplayNameAndType(AccountBalanceTrendChartType.values()),
getAllStatisticsChartDataTypes: (analysisType: StatisticsAnalysisType) => getLocalizedDisplayNameAndType(ChartDataType.values(analysisType)),
getAllStatisticsSortingTypes: () => getLocalizedDisplayNameAndType(ChartSortingType.values()),
getAllStatisticsDateAggregationTypes: () => getLocalizedChartDateAggregationTypeAndDisplayName(true),
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "Grafico a barre",
"Area Chart": "Grafico ad area",
"Column Chart": "Grafico a colonne",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "Ordina per",
"Map": "Mappa",
"Provider": "Fornitore",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "Spesa per conto",
"Expense By Primary Category": "Spesa per categoria principale",
"Expense By Secondary Category": "Spesa per categoria secondaria",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "棒グラフ",
"Area Chart": "エリアチャート",
"Column Chart": "列チャート",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "ソート順",
"Map": "地図",
"Provider": "プロバイダー",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "口座別の支出",
"Expense By Primary Category": "一次カテゴリ別の支出",
"Expense By Secondary Category": "二次カテゴリ別の支出",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "Gráfico de Barras",
"Area Chart": "Gráfico de Área",
"Column Chart": "Gráfico de Colunas",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "Ordenar por",
"Map": "Mapa",
"Provider": "Provedor",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "Despesa por Conta",
"Expense By Primary Category": "Despesa por Categoria Primária",
"Expense By Secondary Category": "Despesa por Categoria Secundária",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "Гистограмма",
"Area Chart": "Диаграмма с областями",
"Column Chart": "Столбчатая диаграмма",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "Сортировать по",
"Map": "Карта",
"Provider": "Провайдер",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "Расходы по счетам",
"Expense By Primary Category": "Расходы по основной категории",
"Expense By Secondary Category": "Расходы по вторичной категории",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "Гістограма",
"Area Chart": "Діаграма з областями",
"Column Chart": "Стовпчикова діаграма",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "Сортувати за",
"Map": "Карта",
"Provider": "Провайдер",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "Витрати за рахунками",
"Expense By Primary Category": "Витрати за основними категоріями",
"Expense By Secondary Category": "Витрати за другорядними категоріями",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "Biểu đồ cột",
"Area Chart": "Biểu đồ diện tích",
"Column Chart": "Biểu đồ cột",
"Candlestick Chart": "Candlestick Chart",
"Sort by": "Sắp xếp theo",
"Map": "Bản đồ",
"Provider": "Nhà cung cấp",
@@ -1849,6 +1850,10 @@
"Total Transactions": "Total Transactions",
"Opening Balance": "Opening Balance",
"Closing Balance": "Closing Balance",
"Minimum Balance": "Minimum Balance",
"Maximum Balance": "Maximum Balance",
"Median Balance": "Median Balance",
"Average Balance": "Average Balance",
"Expense By Account": "Chi phí theo tài khoản",
"Expense By Primary Category": "Chi phí theo danh mục chính",
"Expense By Secondary Category": "Chi phí theo danh mục phụ",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "条形图",
"Area Chart": "面积图",
"Column Chart": "柱状图",
"Candlestick Chart": "K线图",
"Sort by": "排序方式",
"Map": "地图",
"Provider": "提供者",
@@ -1849,6 +1850,10 @@
"Total Transactions": "总交易数",
"Opening Balance": "期初余额",
"Closing Balance": "期末余额",
"Minimum Balance": "最小余额",
"Maximum Balance": "最大余额",
"Median Balance": "中位数余额",
"Average Balance": "平均余额",
"Expense By Account": "账户支出",
"Expense By Primary Category": "一级分类支出",
"Expense By Secondary Category": "二级分类支出",
+5
View File
@@ -1432,6 +1432,7 @@
"Bar Chart": "長條圖",
"Area Chart": "面積圖",
"Column Chart": "柱狀圖",
"Candlestick Chart": "K線圖",
"Sort by": "排序方式",
"Map": "地圖",
"Provider": "提供者",
@@ -1849,6 +1850,10 @@
"Total Transactions": "總交易數",
"Opening Balance": "期初餘額",
"Closing Balance": "期末餘額",
"Minimum Balance": "最小餘額",
"Maximum Balance": "最大餘額",
"Median Balance": "中位數餘額",
"Average Balance": "平均餘額",
"Expense By Account": "帳戶支出",
"Expense By Primary Category": "一級分類支出",
"Expense By Secondary Category": "二級分類支出",
+2 -1
View File
@@ -662,7 +662,8 @@ export interface TransactionInfoPageWrapperResponse2 {
}
export interface TransactionReconciliationStatementResponseItem extends TransactionInfoResponse {
readonly accountBalance: number;
readonly accountOpeningBalance: number;
readonly accountClosingBalance: number;
}
export interface TransactionReconciliationStatementResponse {
@@ -34,7 +34,7 @@ import {
export function useReconciliationStatementPageBase() {
const {
tt,
getAllTrendChartTypes,
getAllAccountBalanceTrendChartTypes,
getAllStatisticsDateAggregationTypesWithShortName,
getCurrentDigitGroupingSymbol,
formatUnixTimeToLongDateTime,
@@ -59,7 +59,7 @@ export function useReconciliationStatementPageBase() {
const currentTimezoneOffsetMinutes = computed<number>(() => getTimezoneOffsetMinutes(settingsStore.appSettings.timeZone));
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
const allChartTypes = computed<TypeAndDisplayName[]>(() => getAllTrendChartTypes());
const allChartTypes = computed<TypeAndDisplayName[]>(() => getAllAccountBalanceTrendChartTypes());
const allDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypesWithShortName());
const currentAccount = computed(() => allAccountsMap.value[accountId.value]);
@@ -187,9 +187,9 @@ export function useReconciliationStatementPageBase() {
}
if (isLiabilityAccount) {
return formatAmountWithCurrency(-transaction.accountBalance, currency);
return formatAmountWithCurrency(-transaction.accountClosingBalance, currency);
} else {
return formatAmountWithCurrency(transaction.accountBalance, currency);
return formatAmountWithCurrency(transaction.accountClosingBalance, currency);
}
}
@@ -234,9 +234,9 @@ export function useReconciliationStatementPageBase() {
let displayAccountBalance = '';
if (isCurrentLiabilityAccount.value) {
displayAccountBalance = removeAll(formatAmount(-transaction.accountBalance), digitGroupingSymbol);
displayAccountBalance = removeAll(formatAmount(-transaction.accountClosingBalance), digitGroupingSymbol);
} else {
displayAccountBalance = removeAll(formatAmount(transaction.accountBalance), digitGroupingSymbol);
displayAccountBalance = removeAll(formatAmount(transaction.accountClosingBalance), digitGroupingSymbol);
}
let description = transaction.comment || '';
@@ -279,7 +279,7 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
import { useTransactionsStore } from '@/stores/transaction.ts';
import { TransactionType } from '@/core/transaction.ts';
import { TrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
import { AccountBalanceTrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
import { KnownFileType } from '@/core/file.ts';
import { Transaction, type TransactionReconciliationStatementResponseItem } from '@/models/transaction.ts';
@@ -295,6 +295,7 @@ import {
mdiCheck,
mdiChartBar,
mdiChartAreasplineVariant,
mdiChartWaterfall,
mdiCalendarTodayOutline,
mdiCalendarMonthOutline,
mdiLayersTripleOutline,
@@ -356,8 +357,9 @@ const transactionCategoriesStore = useTransactionCategoriesStore();
const transactionsStore = useTransactionsStore();
const chartTypeIconMap = {
[TrendChartType.Column.type]: mdiChartBar,
[TrendChartType.Area.type]: mdiChartAreasplineVariant,
[AccountBalanceTrendChartType.Column.type]: mdiChartBar,
[AccountBalanceTrendChartType.Area.type]: mdiChartAreasplineVariant,
[AccountBalanceTrendChartType.Candlestick.type]: mdiChartWaterfall,
};
const chartDataDateAggregationTypeIconMap = {
@@ -376,7 +378,7 @@ const loading = ref<boolean>(false);
const currentPage = ref<number>(1);
const countPerPage = ref<number>(10);
const showAccountBalanceTrendsCharts = ref<boolean>(false);
const chartType = ref<number>(TrendChartType.Default.type);
const chartType = ref<number>(AccountBalanceTrendChartType.Default.type);
const chartDataDateAggregationType = ref<number | undefined>(undefined);
let rejectFunc: ((reason?: unknown) => void) | null = null;
@@ -459,7 +461,7 @@ function open(options: { accountId: string, startTime: number, endTime: number }
currentPage.value = 1;
countPerPage.value = 10;
showAccountBalanceTrendsCharts.value = false;
chartType.value = TrendChartType.Default.type;
chartType.value = AccountBalanceTrendChartType.Default.type;
chartDataDateAggregationType.value = undefined;
showState.value = true;
loading.value = true;