From 7283b724b124b1dcb6a6cfe14d90ee4609a7b660 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 5 Aug 2025 23:29:49 +0800
Subject: [PATCH] add candlestick chart for account balance trends

---
 pkg/api/transactions.go                       |   9 +-
 pkg/models/transaction.go                     |   6 +-
 pkg/services/transactions.go                  |   8 +-
 .../base/AccountBalanceTrendsChartBase.ts     |  89 +++++++++++----
 .../desktop/AccountBalanceTrendsChart.vue     | 102 +++++++++++++++---
 .../mobile/AccountBalanceTrendsBarChart.vue   |  19 ++--
 src/core/statistics.ts                        |  24 +++++
 src/desktop-main.ts                           |   3 +-
 src/lib/numeral.ts                            |  12 ++-
 src/locales/de.json                           |   5 +
 src/locales/en.json                           |   5 +
 src/locales/es.json                           |   5 +
 src/locales/helpers.ts                        |   2 +
 src/locales/it.json                           |   5 +
 src/locales/ja.json                           |   5 +
 src/locales/pt_BR.json                        |   5 +
 src/locales/ru.json                           |   5 +
 src/locales/uk.json                           |   5 +
 src/locales/vi.json                           |   5 +
 src/locales/zh_Hans.json                      |   5 +
 src/locales/zh_Hant.json                      |   5 +
 src/models/transaction.ts                     |   3 +-
 .../ReconciliationStatementPageBase.ts        |  12 +--
 .../dialogs/ReconciliationStatementDialog.vue |  12 ++-
 24 files changed, 292 insertions(+), 64 deletions(-)

diff --git a/pkg/api/transactions.go b/pkg/api/transactions.go
index 8581abec..025871a9 100644
--- a/pkg/api/transactions.go
+++ b/pkg/api/transactions.go
@@ -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,
 		}
 	}
 
diff --git a/pkg/models/transaction.go b/pkg/models/transaction.go
index 46271e6b..7f427535 100644
--- a/pkg/models/transaction.go
+++ b/pkg/models/transaction.go
@@ -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
diff --git a/pkg/services/transactions.go b/pkg/services/transactions.go
index 2d452606..ad7a6488 100644
--- a/pkg/services/transactions.go
+++ b/pkg/services/transactions.go
@@ -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)
 	}
 
diff --git a/src/components/base/AccountBalanceTrendsChartBase.ts b/src/components/base/AccountBalanceTrendsChartBase.ts
index 52c7ca41..d0f67dde 100644
--- a/src/components/base/AccountBalanceTrendsChartBase.ts
+++ b/src/components/base/AccountBalanceTrendsChartBase.ts
@@ -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;
diff --git a/src/components/desktop/AccountBalanceTrendsChart.vue b/src/components/desktop/AccountBalanceTrendsChart.vue
index 266cc059..da5f755e 100644
--- a/src/components/desktop/AccountBalanceTrendsChart.vue
+++ b/src/components/desktop/AccountBalanceTrendsChart.vue
@@ -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: {
diff --git a/src/components/mobile/AccountBalanceTrendsBarChart.vue b/src/components/mobile/AccountBalanceTrendsBarChart.vue
index 966935f7..e2597b8a 100644
--- a/src/components/mobile/AccountBalanceTrendsBarChart.vue
+++ b/src/components/mobile/AccountBalanceTrendsBarChart.vue
@@ -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;
         }
diff --git a/src/core/statistics.ts b/src/core/statistics.ts
index bb8a6bfa..6def1dec 100644
--- a/src/core/statistics.ts
+++ b/src/core/statistics.ts
@@ -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> = {};
diff --git a/src/desktop-main.ts b/src/desktop-main.ts
index 00ec71d7..f3abf206 100644
--- a/src/desktop-main.ts
+++ b/src/desktop-main.ts
@@ -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
diff --git a/src/lib/numeral.ts b/src/lib/numeral.ts
index 247216b4..f45710a2 100644
--- a/src/lib/numeral.ts
+++ b/src/lib/numeral.ts
@@ -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 = '';
diff --git a/src/locales/de.json b/src/locales/de.json
index 6e21c8f9..ad1f4742 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -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",
diff --git a/src/locales/en.json b/src/locales/en.json
index be4bb815..a316b2ab 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -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",
diff --git a/src/locales/es.json b/src/locales/es.json
index 3b5b6cd2..d09e361a 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -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",
diff --git a/src/locales/helpers.ts b/src/locales/helpers.ts
index 6cf913da..01028026 100644
--- a/src/locales/helpers.ts
+++ b/src/locales/helpers.ts
@@ -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),
diff --git a/src/locales/it.json b/src/locales/it.json
index 94922247..bee605f8 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -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",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index a407ae32..0cc38333 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -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": "二次カテゴリ別の支出",
diff --git a/src/locales/pt_BR.json b/src/locales/pt_BR.json
index 60098f3e..936c238f 100644
--- a/src/locales/pt_BR.json
+++ b/src/locales/pt_BR.json
@@ -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",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 828f7e69..3d8591b5 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -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": "Расходы по вторичной категории",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index e3c386be..3b857314 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -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": "Витрати за другорядними категоріями",
diff --git a/src/locales/vi.json b/src/locales/vi.json
index b3ee1abc..1d158ea4 100644
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@@ -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ụ",
diff --git a/src/locales/zh_Hans.json b/src/locales/zh_Hans.json
index af3d8007..324bd37a 100644
--- a/src/locales/zh_Hans.json
+++ b/src/locales/zh_Hans.json
@@ -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": "二级分类支出",
diff --git a/src/locales/zh_Hant.json b/src/locales/zh_Hant.json
index 7b403310..cfd86de5 100644
--- a/src/locales/zh_Hant.json
+++ b/src/locales/zh_Hant.json
@@ -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": "二級分類支出",
diff --git a/src/models/transaction.ts b/src/models/transaction.ts
index 5d64c658..6b0c04e2 100644
--- a/src/models/transaction.ts
+++ b/src/models/transaction.ts
@@ -662,7 +662,8 @@ export interface TransactionInfoPageWrapperResponse2 {
 }
 
 export interface TransactionReconciliationStatementResponseItem extends TransactionInfoResponse {
-    readonly accountBalance: number;
+    readonly accountOpeningBalance: number;
+    readonly accountClosingBalance: number;
 }
 
 export interface TransactionReconciliationStatementResponse {
diff --git a/src/views/base/accounts/ReconciliationStatementPageBase.ts b/src/views/base/accounts/ReconciliationStatementPageBase.ts
index 5ce4d23f..d247af31 100644
--- a/src/views/base/accounts/ReconciliationStatementPageBase.ts
+++ b/src/views/base/accounts/ReconciliationStatementPageBase.ts
@@ -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 || '';
diff --git a/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue b/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue
index 88e1df30..9f675580 100644
--- a/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue
+++ b/src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue
@@ -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;