show account outstanding balance for liability account in account balance trends chart

src/components/base/AccountBalanceTrendsChartBase.ts

@@ -11,6 +11,7 @@ import {
 } from '@/core/datetime.ts';
 import type { FiscalYearUnixTime } from '@/core/fiscalyear.ts';
 import { ChartDateAggregationType } from '@/core/statistics.ts';
+import type { AccountInfoResponse } from '@/models/account.ts';
 import type { TransactionReconciliationStatementResponseItem } from '@/models/transaction.ts';
 
 import { isDefined, isArray } from '@/lib/common.ts';
@@ -39,7 +40,7 @@ export interface CommonAccountBalanceTrendsChartProps {
     items: TransactionReconciliationStatementResponseItem[] | undefined;
     dateAggregationType?: number;
     fiscalYearStart: number;
-    accountCurrency: string;
+    account: AccountInfoResponse;
 }
 
 export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTrendsChartProps) {
@@ -152,7 +153,14 @@ export function useAccountBalanceTrendsChartBase(props: CommonAccountBalanceTren
 
                     if (dataItem.time >= lastUnixTime) {
                         lastUnixTime = dataItem.time;
-                        lastAmount = dataItem.accountBalance;
+
+                        if (props.account.isAsset) {
+                            lastAmount = dataItem.accountBalance;
+                        } else if (props.account.isLiability) {
+                            lastAmount = -dataItem.accountBalance;
+                        } else {
+                            lastAmount = dataItem.accountBalance;
+                        }
                     }
                 }
             }

src/components/desktop/AccountBalanceTrendsChart.vue

@@ -94,8 +94,8 @@ const yAxisWidth = computed<number>(() => {
         }
     }
 
-    const maxValueText = formatAmountWithCurrency(maxValue, props.accountCurrency);
+    const maxValueText = formatAmountWithCurrency(maxValue, props.account.currency);
-    const minValueText = formatAmountWithCurrency(minValue, props.accountCurrency);
+    const minValueText = formatAmountWithCurrency(minValue, props.account.currency);
     const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
 
     const canvas = document.createElement('canvas');
@@ -135,7 +135,7 @@ const chartOptions = computed<object>(() => {
             },
             formatter: (params: CallbackDataParams[]) => {
                 const amount = params[0].data as number;
-                const value = formatAmountWithCurrency(amount, props.accountCurrency);
+                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>'
@@ -158,13 +158,13 @@ const chartOptions = computed<object>(() => {
                 type: 'value',
                 axisLabel: {
                     formatter: (value: string) => {
-                        return formatAmountWithCurrency(value, props.accountCurrency);
+                        return formatAmountWithCurrency(value, props.account.currency);
                     }
                 },
                 axisPointer: {
                     label: {
                         formatter: (params: CallbackDataParams) => {
-                            return formatAmountWithCurrency(Math.floor(params.value as number), props.accountCurrency);
+                            return formatAmountWithCurrency(Math.floor(params.value as number), props.account.currency);
                         }
                     }
                 }

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, accountCurrency)"
+                          :after="formatAmountWithCurrency(item.amount, account.currency)"
                           v-for="item in virtualDataItems.items"
             >
                 <template #media>

src/views/desktop/accounts/list/dialogs/ReconciliationStatementDialog.vue

@@ -230,7 +230,7 @@
                 :fiscal-year-start="fiscalYearStart"
                 :items="[]"
                 :legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
-                :account-currency="currentAccountCurrency"
+                :account="currentAccount"
                 :skeleton="true"
                 v-if="showAccountBalanceTrendsCharts && loading"
             />
@@ -241,7 +241,7 @@
                 :fiscal-year-start="fiscalYearStart"
                 :items="reconciliationStatements?.transactions"
                 :legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
-                :account-currency="currentAccountCurrency"
+                :account="currentAccount"
                 v-if="showAccountBalanceTrendsCharts && !loading"
             />
 
@@ -329,6 +329,7 @@ const {
     fiscalYearStart,
     allChartTypes,
     allDateAggregationTypes,
+    currentAccount,
     currentAccountCurrency,
     isCurrentLiabilityAccount,
     allAccountsMap,

src/views/mobile/accounts/ReconciliationStatementPage.vue

@@ -247,7 +247,7 @@
                     :date-aggregation-type="chartDataDateAggregationType"
                     :fiscal-year-start="fiscalYearStart"
                     :items="reconciliationStatements?.transactions"
-                    :account-currency="currentAccountCurrency"
+                    :account="currentAccount"
                 />
             </f7-card-content>
         </f7-card>