From 52bab6f7262f46c11b4c80a7c329db671ad90850 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Tue, 28 Oct 2025 00:44:42 +0800
Subject: [PATCH] change the outflows/inflows by account trend charts to
 non-stacked charts and hide the total amount for these charts

---
 src/components/base/MonthlyTrendsChartBase.ts |  1 +
 src/components/desktop/MonthlyTrendsChart.vue |  9 ++++--
 .../mobile/MonthlyTrendsBarChart.vue          | 32 ++++++++++++++++---
 src/styles/mobile/global.scss                 |  4 +++
 .../StatisticsTransactionPageBase.ts          | 10 +++++-
 .../desktop/statistics/TransactionPage.vue    |  2 ++
 .../mobile/statistics/TransactionPage.vue     |  2 ++
 7 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/components/base/MonthlyTrendsChartBase.ts b/src/components/base/MonthlyTrendsChartBase.ts
index 973ee620..c24a3f6a 100644
--- a/src/components/base/MonthlyTrendsChartBase.ts
+++ b/src/components/base/MonthlyTrendsChartBase.ts
@@ -17,6 +17,7 @@ import { getAllDateRangesFromItems } from '@/lib/statistics.ts';
 
 export interface CommonMonthlyTrendsChartProps<T extends Year1BasedMonth> {
     items: YearMonthItems<T>[];
+    stacked?: boolean;
     startYearMonth: TextualYearMonth | '';
     endYearMonth: TextualYearMonth | '';
     fiscalYearStart: number;
diff --git a/src/components/desktop/MonthlyTrendsChart.vue b/src/components/desktop/MonthlyTrendsChart.vue
index 3b753738..301a5221 100644
--- a/src/components/desktop/MonthlyTrendsChart.vue
+++ b/src/components/desktop/MonthlyTrendsChart.vue
@@ -58,7 +58,7 @@ interface MonthlyTrendsChartDataItem {
     selected: boolean;
     type: string;
     areaStyle?: object;
-    stack: string;
+    stack?: string;
     animation: boolean;
     data: number[];
 }
@@ -219,11 +219,16 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
             },
             selected: true,
             type: 'line',
-            stack: 'a',
             animation: !props.skeleton,
             data: allAmounts
         };
 
+        if (props.stacked) {
+            finalItem.stack = 'a';
+        } else if (props.idField && item[props.idField]) {
+            finalItem.stack = item[props.idField] as string;
+        }
+
         if (props.type === TrendChartType.Area.type) {
             finalItem.areaStyle = {};
         } else if (props.type === TrendChartType.Column.type) {
diff --git a/src/components/mobile/MonthlyTrendsBarChart.vue b/src/components/mobile/MonthlyTrendsBarChart.vue
index 083ea24d..3ad7241b 100644
--- a/src/components/mobile/MonthlyTrendsBarChart.vue
+++ b/src/components/mobile/MonthlyTrendsBarChart.vue
@@ -43,9 +43,9 @@
                 </div>
             </div>
         </f7-list-item>
-        <f7-list-item class="statistics-list-item"
-                      link="#"
+        <f7-list-item link="#"
                       :key="idx"
+                      :class="{ 'statistics-list-item': true, 'statistics-list-item-stacked': stacked, 'statistics-list-item-non-stacked': !stacked }"
                       v-for="(item, idx) in allDisplayDataItems.data"
                       @click="clickItem(item)"
         >
@@ -61,14 +61,31 @@
                 <div class="statistics-list-item-text">
                     <span>{{ item.displayDateRange }}</span>
                 </div>
+                <div class="full-line statistics-percent-line statistics-multi-percent-line display-flex flex-direction-column" v-if="!stacked">
+                    <div class="display-flex flex-direction-column"
+                         style="margin-top: 4px"
+                         :key="dataIdx"
+                         v-for="(data, dataIdx) in item.items"
+                         v-show="data.totalAmount > 0">
+                        <div class="full-line display-flex flex-direction-row">
+                            <div class="display-inline-flex" :style="{ 'width': (item.percent * data.totalAmount / item.maxAmount) + '%' }">
+                                <f7-progressbar :progress="100" :style="{ '--f7-progressbar-progress-color': (data.color ? data.color : '') } "></f7-progressbar>
+                            </div>
+                            <div class="display-inline-flex" :style="{ 'width': (100.0 - item.percent * data.totalAmount / item.maxAmount) + '%' }"
+                                 v-if="item.percent * data.totalAmount / item.maxAmount < 100.0">
+                                <f7-progressbar :progress="0"></f7-progressbar>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </template>
 
             <template #after>
-                <span>{{ formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, defaultCurrency) }}</span>
+                <span v-if="stacked">{{ formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, defaultCurrency) }}</span>
             </template>
 
             <template #inner-end>
-                <div class="statistics-item-end">
+                <div class="statistics-item-end" v-if="stacked">
                     <div class="statistics-percent-line statistics-multi-percent-line display-flex">
                         <div class="display-inline-flex" :style="{ 'width': (item.percent * data.totalAmount / item.totalPositiveAmount) + '%' }"
                              :key="dataIdx"
@@ -137,6 +154,7 @@ interface MonthlyTrendsBarChartDataItem {
     items: MonthlyTrendsBarChartDataAmount[];
     totalAmount: number;
     totalPositiveAmount: number;
+    maxAmount: number;
     percent: number;
 }
 
@@ -259,6 +277,7 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
         const dataItems = allDateRangeItemsMap[dateRangeKey] || [];
         let totalAmount = 0;
         let totalPositiveAmount = 0;
+        let maxAmount = 0;
 
         sortStatisticsItems(dataItems, props.sortingType);
 
@@ -268,6 +287,10 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
             }
 
             totalAmount += dataItem.totalAmount;
+
+            if (dataItem.totalAmount > maxAmount) {
+                maxAmount = dataItem.totalAmount;
+            }
         }
 
         if (totalAmount > maxTotalAmount) {
@@ -280,6 +303,7 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
             items: dataItems,
             totalAmount: totalAmount,
             totalPositiveAmount: totalPositiveAmount,
+            maxAmount: maxAmount,
             percent: 0.0
         };
 
diff --git a/src/styles/mobile/global.scss b/src/styles/mobile/global.scss
index a4f43c42..4af63c6f 100644
--- a/src/styles/mobile/global.scss
+++ b/src/styles/mobile/global.scss
@@ -775,6 +775,10 @@ html[dir="rtl"] .dp__main .dp__btn.dp--arrow-btn-nav {
     margin-bottom: 12px;
 }
 
+.statistics-list-item-non-stacked .item-inner > .item-title {
+    width: 100%;
+}
+
 .statistics-icon {
     margin-bottom: -2px;
 }
diff --git a/src/views/base/statistics/StatisticsTransactionPageBase.ts b/src/views/base/statistics/StatisticsTransactionPageBase.ts
index cba51eac..87e5e169 100644
--- a/src/views/base/statistics/StatisticsTransactionPageBase.ts
+++ b/src/views/base/statistics/StatisticsTransactionPageBase.ts
@@ -218,7 +218,9 @@ export function useStatisticsTransactionPageBase() {
     });
 
     const showTotalAmountInTrendsChart = computed<boolean>(() => {
-        return query.value.chartDataType !== ChartDataType.TotalOutflows.type &&
+        return query.value.chartDataType !== ChartDataType.OutflowsByAccount.type &&
+            query.value.chartDataType !== ChartDataType.InflowsByAccount.type &&
+            query.value.chartDataType !== ChartDataType.TotalOutflows.type &&
             query.value.chartDataType !== ChartDataType.TotalExpense.type &&
             query.value.chartDataType !== ChartDataType.TotalInflows.type &&
             query.value.chartDataType !== ChartDataType.TotalIncome.type &&
@@ -226,6 +228,11 @@ export function useStatisticsTransactionPageBase() {
             query.value.chartDataType !== ChartDataType.NetIncome.type;
     });
 
+    const showStackedInTrendsChart = computed<boolean>(() => {
+        return query.value.chartDataType !== ChartDataType.OutflowsByAccount.type &&
+            query.value.chartDataType !== ChartDataType.InflowsByAccount.type;
+    });
+
     const translateNameInTrendsChart = computed<boolean>(() => {
         return query.value.chartDataType === ChartDataType.TotalOutflows.type ||
             query.value.chartDataType === ChartDataType.TotalExpense.type ||
@@ -307,6 +314,7 @@ export function useStatisticsTransactionPageBase() {
         totalAmountName,
         showPercentInCategoricalChart,
         showTotalAmountInTrendsChart,
+        showStackedInTrendsChart,
         translateNameInTrendsChart,
         categoricalAnalysisData,
         categoricalAllAnalysisData,
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index cbcb5433..0cd743cd 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -349,6 +349,7 @@
                                             :show-value="showAmountInChart"
                                             :enable-click-item="true"
                                             :default-currency="defaultCurrency"
+                                            :stacked="showStackedInTrendsChart"
                                             :show-total-amount-in-tooltip="showTotalAmountInTrendsChart"
                                             ref="monthlyTrendsChart"
                                             id-field="id"
@@ -522,6 +523,7 @@ const {
     totalAmountName,
     showPercentInCategoricalChart,
     showTotalAmountInTrendsChart,
+    showStackedInTrendsChart,
     translateNameInTrendsChart,
     categoricalAnalysisData,
     categoricalAllAnalysisData,
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index bfda05bb..f18ab967 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -211,6 +211,7 @@
                     :date-aggregation-type="trendDateAggregationType"
                     :fiscal-year-start="fiscalYearStart"
                     :items="trendsAnalysisData && trendsAnalysisData.items && trendsAnalysisData.items.length ? trendsAnalysisData.items : []"
+                    :stacked="showStackedInTrendsChart"
                     :translate-name="translateNameInTrendsChart"
                     :default-currency="defaultCurrency"
                     id-field="id"
@@ -405,6 +406,7 @@ const {
     showAmountInChart,
     totalAmountName,
     showPercentInCategoricalChart,
+    showStackedInTrendsChart,
     translateNameInTrendsChart,
     categoricalAnalysisData,
     trendsAnalysisData,