modify style

src/components/mobile/AccountBalanceTrendsBarChart.vue

@@ -7,7 +7,7 @@
             </template>
             <template #inner>
                 <div class="display-flex padding-top-half">
-                    <div class="account-balance-percent-line width-100">
+                    <div class="statistics-percent-line width-100 no-margin-horizontal">
                         <f7-progressbar :progress="0"></f7-progressbar>
                     </div>
                 </div>
@@ -36,12 +36,8 @@
                 </template>
                 <template #inner>
                     <div class="display-flex padding-top-half">
-                        <div class="account-balance-percent-line" :style="{ 'width': item.percent + '%' }">
+                        <div class="statistics-percent-line width-100 no-margin-horizontal">
-                            <f7-progressbar :progress="100" :style="{ '--f7-progressbar-progress-color': (item.color ? item.color : '') } "></f7-progressbar>
+                            <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? '#' + item.color : '') } "></f7-progressbar>
-                        </div>
-                        <div class="account-balance-percent-line" :style="{ 'width': (100.0 - item.percent) + '%' }"
-                             v-if="item.percent < 100.0">
-                            <f7-progressbar :progress="0"></f7-progressbar>
                         </div>
                     </div>
                 </template>
@@ -108,7 +104,7 @@ const allVirtualListItems = computed<MobileAccountBalanceTrendsChartItem[]>(() =
             averageBalance: dataItem.averageBalance,
             minimumBalance: dataItem.minimumBalance,
             maximumBalance: dataItem.maximumBalance,
-            color: `#${DEFAULT_CHART_COLORS[0]}`,
+            color: DEFAULT_CHART_COLORS[0],
             percent: 0.0
         };
 
@@ -130,9 +126,3 @@ function renderExternal(vl: unknown, vlData: MobileAccountBalanceTrendsChartVirt
     virtualDataItems.value = vlData;
 }
 </script>
-
-<style>
-.account-balance-trends-list-item .account-balance-percent-line {
-    --f7-progressbar-bg-color: #f8f8f8;
-}
-</style>

src/styles/mobile/global.scss

@@ -792,6 +792,10 @@ html[dir="rtl"] .dp__main .dp__btn.dp--arrow-btn-nav {
     --f7-progressbar-bg-color: #f8f8f8;
 }
 
+.dark .statistics-percent-line .progressbar {
+    --f7-progressbar-bg-color: #444444;
+}
+
 .statistics-multi-percent-line > div > .progressbar {
     border-radius: unset;
 }

src/views/base/statistics/StatisticsTransactionPageBase.ts

@@ -9,8 +9,13 @@ import { type TransactionStatisticsFilter, useStatisticsStore } from '@/stores/s
 import type { TypeAndDisplayName } from '@/core/base.ts';
 import { type LocalizedDateRange, type WeekDayValue, DateRangeScene, DateRange } from '@/core/datetime.ts';
 import { StatisticsAnalysisType, ChartDataType, ChartSortingType, ChartDateAggregationType } from '@/core/statistics.ts';
+import { DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
 import { DISPLAY_HIDDEN_AMOUNT } from '@/consts/numeral.ts';
-import type { TransactionCategoricalAnalysisData, TransactionTrendsAnalysisData } from '@/models/transaction.ts';
+import type {
+    TransactionCategoricalAnalysisData,
+    TransactionCategoricalAnalysisDataItem,
+    TransactionTrendsAnalysisData
+} from '@/models/transaction.ts';
 
 import { limitText, findNameByType, findDisplayNameByType } from '@/lib/common.ts';
 import { getYearMonthFirstUnixTime, getYearMonthLastUnixTime } from '@/lib/datetime.ts';
@@ -200,6 +205,24 @@ export function useStatisticsTransactionPageBase() {
         }
     }
 
+    function getTransactionCategoricalAnalysisDataItemColor(item: TransactionCategoricalAnalysisDataItem): string {
+        if (item.type === 'category') {
+            if (item.color === DEFAULT_CATEGORY_COLOR) {
+                return 'var(--default-icon-color)';
+            } else {
+                return '#' + item.color;
+            }
+        } else if (item.type === 'account') {
+            if (item.color === DEFAULT_ACCOUNT_COLOR) {
+                return 'var(--default-icon-color)';
+            } else {
+                return '#' + item.color;
+            }
+        } else {
+            return item.color;
+        }
+    }
+
     function getDisplayAmount(amount: number, currency: string, textLimit?: number): string {
         const finalAmount = formatAmountToLocalizedNumeralsWithCurrency(amount, currency);
 
@@ -249,6 +272,7 @@ export function useStatisticsTransactionPageBase() {
         trendsAnalysisData,
         // functions
         canShowCustomDateRange,
+        getTransactionCategoricalAnalysisDataItemColor,
         getDisplayAmount
     };
 }

src/views/desktop/statistics/TransactionPage.vue

@@ -244,8 +244,8 @@
                                                                 <span class="statistics-amount">{{ getDisplayAmount(item.totalAmount, defaultCurrency) }}</span>
                                                             </div>
                                                             <div>
-                                                                <v-progress-linear :color="item.color ? '#' + item.color : 'primary'"
+                                                                <v-progress-linear :color="item.color ? getTransactionCategoricalAnalysisDataItemColor(item) : 'primary'"
-                                                                                   :bg-color="isDarkMode ? '#161616' : '#f8f8f8'" :bg-opacity="1"
+                                                                                   :bg-color="isDarkMode ? '#444444' : '#f8f8f8'" :bg-opacity="1"
                                                                                    :model-value="item.percent >= 0 ? item.percent : 0"
                                                                                    :height="4"></v-progress-linear>
                                                             </div>
@@ -458,6 +458,7 @@ const {
     categoricalAnalysisData,
     trendsAnalysisData,
     canShowCustomDateRange,
+    getTransactionCategoricalAnalysisDataItemColor,
     getDisplayAmount
 } = useStatisticsTransactionPageBase();
 

src/views/mobile/statistics/TransactionPage.vue

@@ -182,7 +182,7 @@
                         <template #inner-end>
                             <div class="statistics-item-end">
                                 <div class="statistics-percent-line">
-                                    <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? '#' + item.color : '') } "></f7-progressbar>
+                                    <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? getTransactionCategoricalAnalysisDataItemColor(item) : '') } "></f7-progressbar>
                                 </div>
                             </div>
                         </template>
@@ -404,6 +404,7 @@ const {
     categoricalAnalysisData,
     trendsAnalysisData,
     canShowCustomDateRange,
+    getTransactionCategoricalAnalysisDataItemColor,
     getDisplayAmount
 } = useStatisticsTransactionPageBase();
 
@@ -800,10 +801,6 @@ init();
     transform: translateY(1.5em);
 }
 
-.dark .statistics-percent-line .progressbar {
-    --f7-progressbar-bg-color: #161616;
-}
-
 .chart-data-type-popover-menu .popover-inner{
     max-height: 440px;
     overflow-y: auto;