From 765e64d96f39f46d328bed3651652df3acbba3a0 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 27 Oct 2025 23:47:04 +0800
Subject: [PATCH] hide percent for outflows/inflows by account categorical
 chart

---
 src/components/base/PieChartBase.ts           |  1 +
 src/components/desktop/PieChart.vue           |  6 ++--
 src/components/desktop/RadarChart.vue         |  9 +++--
 src/components/mobile/PieChart.vue            |  4 +--
 src/stores/statistics.ts                      | 35 +++++++++++++++----
 .../StatisticsTransactionPageBase.ts          |  6 ++++
 .../desktop/statistics/TransactionPage.vue    |  5 ++-
 .../mobile/statistics/TransactionPage.vue     |  4 ++-
 8 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/src/components/base/PieChartBase.ts b/src/components/base/PieChartBase.ts
index 92267b16..b0af86b9 100644
--- a/src/components/base/PieChartBase.ts
+++ b/src/components/base/PieChartBase.ts
@@ -33,6 +33,7 @@ export interface CommonPieChartProps {
     minValidPercent?: number;
     defaultCurrency?: string;
     showValue?: boolean;
+    showPercent?: boolean;
     enableClickItem?: boolean;
 }
 
diff --git a/src/components/desktop/PieChart.vue b/src/components/desktop/PieChart.vue
index f740836b..c64f0b5e 100644
--- a/src/components/desktop/PieChart.vue
+++ b/src/components/desktop/PieChart.vue
@@ -142,9 +142,11 @@ const chartOptions = computed<object>(() => {
                     tooltip += `<div class="d-inline-flex">${name}</div><br/>`;
                 }
 
-                if (props.showValue) {
+                if (props.showValue && props.showPercent) {
                     tooltip += `<div class="d-inline-flex"><span>${value}</span><span class="ms-1">(${percent})</span></div>`;
-                } else {
+                } else if (props.showValue && !props.showPercent) {
+                    tooltip += `<div class="d-inline-flex">${value}</div>`;
+                } else if (!props.showValue && props.showPercent) {
                     tooltip += `<div class="d-inline-flex">${percent}</div>`;
                 }
 
diff --git a/src/components/desktop/RadarChart.vue b/src/components/desktop/RadarChart.vue
index 288ff655..bbd7a39f 100644
--- a/src/components/desktop/RadarChart.vue
+++ b/src/components/desktop/RadarChart.vue
@@ -40,6 +40,7 @@ const props = defineProps<{
     minValidPercent?: number;
     defaultCurrency?: string;
     showValue?: boolean;
+    showPercent?: boolean;
 }>();
 
 const theme = useTheme();
@@ -92,11 +93,15 @@ const radarData = computed<RadarChartData>(() => {
 
                 tooltip += '<div><span class="chart-pointer" style="background-color: ' + color + '"></span>';
                 tooltip += `<span>${name}</span>`;
-                if (props.showValue) {
+
+                if (props.showValue && props.showPercent) {
                     tooltip += `<span class="ms-1" style="float: inline-end">(${displayPercent})</span><span class="ms-5" style="float: inline-end">${displayValue}</span>`;
-                } else {
+                } else if (props.showValue && !props.showPercent) {
+                    tooltip += `<span class="ms-5" style="float: inline-end">${displayValue}</span>`;
+                } else if (!props.showValue && props.showPercent) {
                     tooltip += `<span class="ms-5" style="float: inline-end">${displayPercent}</span>`;
                 }
+
                 tooltip += '</div>';
             }
         }
diff --git a/src/components/mobile/PieChart.vue b/src/components/mobile/PieChart.vue
index d55d3ce5..ac355d5a 100644
--- a/src/components/mobile/PieChart.vue
+++ b/src/components/mobile/PieChart.vue
@@ -44,7 +44,7 @@
                 </f7-link>
 
                 <div class="pie-chart-toolbox-info">
-                    <p v-if="selectedItem">
+                    <p v-if="showPercent && selectedItem">
                         <f7-chip class="chip-placeholder" outline v-if="skeleton">
                             <span class="skeleton-text">Percent</span>
                         </f7-chip>
@@ -53,7 +53,7 @@
                                  :style="getColorStyle(selectedItem?.color, '--f7-chip-outline-border-color')"
                                  v-else-if="!skeleton"></f7-chip>
                     </p>
-                    <p v-else-if="!validItems || !validItems.length">
+                    <p v-else-if="showPercent && (!validItems || !validItems.length)">
                         <f7-chip outline text="---"></f7-chip>
                     </p>
                     <f7-link class="pie-chart-selected-item-info" :no-link-class="!enableClickItem" v-if="selectedItem" @click="clickItem(selectedItem)">
diff --git a/src/stores/statistics.ts b/src/stores/statistics.ts
index 125790ba..23339831 100644
--- a/src/stores/statistics.ts
+++ b/src/stores/statistics.ts
@@ -326,17 +326,38 @@ export const useStatisticsStore = defineStore('statistics', () => {
         const allStatisticsItems: TransactionCategoricalAnalysisDataItem[] = [];
 
         if (combinedData && combinedData.items) {
+            let maxTotalAmount = 0;
+
+            for (const dataItem of values(combinedData.items)) {
+                if (dataItem.totalAmount > maxTotalAmount) {
+                    maxTotalAmount = dataItem.totalAmount;
+                }
+            }
+
             for (const dataItem of values(combinedData.items)) {
                 let percent = 0;
 
-                if (dataItem.totalAmount > 0) {
-                    percent = dataItem.totalAmount * 100 / combinedData.totalNonNegativeAmount;
-                } else {
-                    percent = 0;
-                }
+                if (transactionStatisticsFilter.value.chartDataType === ChartDataType.OutflowsByAccount.type ||
+                    transactionStatisticsFilter.value.chartDataType === ChartDataType.InflowsByAccount.type) {
+                    if (maxTotalAmount > 0) {
+                        percent = dataItem.totalAmount * 100 / maxTotalAmount;
+                    } else {
+                        percent = 0;
+                    }
 
-                if (percent < 0) {
-                    percent = 0;
+                    if (percent < 0) {
+                        percent = 0;
+                    }
+                } else {
+                    if (dataItem.totalAmount > 0) {
+                        percent = dataItem.totalAmount * 100 / combinedData.totalNonNegativeAmount;
+                    } else {
+                        percent = 0;
+                    }
+
+                    if (percent < 0) {
+                        percent = 0;
+                    }
                 }
 
                 const statisticDataItem: TransactionCategoricalAnalysisDataItem = {
diff --git a/src/views/base/statistics/StatisticsTransactionPageBase.ts b/src/views/base/statistics/StatisticsTransactionPageBase.ts
index 7b8c7f45..cba51eac 100644
--- a/src/views/base/statistics/StatisticsTransactionPageBase.ts
+++ b/src/views/base/statistics/StatisticsTransactionPageBase.ts
@@ -212,6 +212,11 @@ export function useStatisticsTransactionPageBase() {
         return tt('Total Amount');
     });
 
+    const showPercentInCategoricalChart = computed<boolean>(() => {
+        return query.value.chartDataType !== ChartDataType.OutflowsByAccount.type &&
+            query.value.chartDataType !== ChartDataType.InflowsByAccount.type;
+    });
+
     const showTotalAmountInTrendsChart = computed<boolean>(() => {
         return query.value.chartDataType !== ChartDataType.TotalOutflows.type &&
             query.value.chartDataType !== ChartDataType.TotalExpense.type &&
@@ -300,6 +305,7 @@ export function useStatisticsTransactionPageBase() {
         canUseKeywordFilter,
         showAmountInChart,
         totalAmountName,
+        showPercentInCategoricalChart,
         showTotalAmountInTrendsChart,
         translateNameInTrendsChart,
         categoricalAnalysisData,
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 44d8364b..cbcb5433 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -224,6 +224,7 @@
                                             :items="categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length ? categoricalAnalysisData.items : []"
                                             :min-valid-percent="0.0001"
                                             :show-value="showAmountInChart"
+                                            :show-percent="showPercentInCategoricalChart"
                                             :enable-click-item="true"
                                             :default-currency="defaultCurrency"
                                             id-field="id"
@@ -273,7 +274,7 @@
                                                         <div class="d-flex flex-column ms-2">
                                                             <div class="d-flex">
                                                                 <span>{{ item.name }}</span>
-                                                                <small class="statistics-percent" v-if="item.percent >= 0">{{ formatPercentToLocalizedNumerals(item.percent, 2, '&lt;0.01') }}</small>
+                                                                <small class="statistics-percent" v-if="showPercentInCategoricalChart && item.percent >= 0">{{ formatPercentToLocalizedNumerals(item.percent, 2, '&lt;0.01') }}</small>
                                                                 <v-spacer/>
                                                                 <span class="statistics-amount">{{ getDisplayAmount(item.totalAmount, defaultCurrency) }}</span>
                                                             </div>
@@ -310,6 +311,7 @@
                                             :items="categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length ? categoricalAnalysisData.items : []"
                                             :min-valid-percent="0.0001"
                                             :show-value="showAmountInChart"
+                                            :show-percent="showPercentInCategoricalChart"
                                             :default-currency="defaultCurrency"
                                             name-field="name"
                                             value-field="totalAmount"
@@ -518,6 +520,7 @@ const {
     canUseKeywordFilter,
     showAmountInChart,
     totalAmountName,
+    showPercentInCategoricalChart,
     showTotalAmountInTrendsChart,
     translateNameInTrendsChart,
     categoricalAnalysisData,
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index 080382b6..bfda05bb 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -72,6 +72,7 @@
                     :items="categoricalAnalysisData.items"
                     :min-valid-percent="0.0001"
                     :show-value="showAmountInChart"
+                    :show-percent="showPercentInCategoricalChart"
                     :show-center-text="true"
                     :show-selected-item-info="true"
                     :enable-click-item="true"
@@ -171,7 +172,7 @@
                         <template #title>
                             <div class="statistics-list-item-text">
                                 <span>{{ item.name }}</span>
-                                <small class="statistics-percent" v-if="item.percent >= 0">{{ formatPercentToLocalizedNumerals(item.percent, 2, '&lt;0.01') }}</small>
+                                <small class="statistics-percent" v-if="showPercentInCategoricalChart && item.percent >= 0">{{ formatPercentToLocalizedNumerals(item.percent, 2, '&lt;0.01') }}</small>
                             </div>
                         </template>
 
@@ -403,6 +404,7 @@ const {
     canUseKeywordFilter,
     showAmountInChart,
     totalAmountName,
+    showPercentInCategoricalChart,
     translateNameInTrendsChart,
     categoricalAnalysisData,
     trendsAnalysisData,