fix the month names were displayed incorrectly in the monthly income and expense trends chart when daylight saving time was involved (#392)

src/views/desktop/HomePage.vue

@@ -202,10 +202,15 @@ import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 
+import { entries } from '@/core/base.ts';
 import { type NumeralSystem } from '@/core/numeral.ts';
 import { DateRange } from '@/core/datetime.ts';
 import { ThemeType } from '@/core/theme.ts';
-import { type TransactionMonthlyIncomeAndExpenseData, LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES } from '@/models/transaction.ts';
+import {
+    type TransactionAmountsRequestType,
+    type TransactionMonthlyIncomeAndExpenseData,
+    LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES
+} from '@/models/transaction.ts';
 
 import { getUnixTimeBeforeUnixTime, getUnixTimeAfterUnixTime } from '@/lib/datetime.ts';
 import { isUserLogined, isUserUnlocked } from '@/lib/userstate.ts';
@@ -275,27 +280,25 @@ const monthlyIncomeAndExpenseData = computed<TransactionMonthlyIncomeAndExpenseD
         return data;
     }
 
-    LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES.forEach(amountRequestType => {
-        if (!Object.prototype.hasOwnProperty.call(transactionOverview.value, amountRequestType)) {
-            return;
-        }
-
+    for (const [type, monthDiff] of entries(LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES)) {
+        const amountRequestType = type as TransactionAmountsRequestType;
         const dateRange = overviewStore.transactionDataRange[amountRequestType];
 
         if (!dateRange) {
-            return;
+            continue;
         }
 
         const item = transactionOverview.value[amountRequestType];
 
         data.push({
             monthStartTime: dateRange.startTime,
+            monthsBeforeCurrentMonth: monthDiff,
             incomeAmount: item?.incomeAmount || 0,
             expenseAmount: item?.expenseAmount || 0,
             incompleteIncomeAmount: item ? item.incompleteIncomeAmount : true,
             incompleteExpenseAmount: item ? item.incompleteExpenseAmount : true
         });
-    });
+    }
 
     return data;
 });

src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue

@@ -41,6 +41,7 @@ import { DISPLAY_HIDDEN_AMOUNT, INCOMPLETE_AMOUNT_SUFFIX } from '@/consts/numera
 
 import { type TransactionMonthlyIncomeAndExpenseData } from '@/models/transaction.ts';
 
+import { getUnixTimeBeforeUnixTime, getThisMonthFirstUnixTime } from '@/lib/datetime.ts';
 import { getExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
 export interface MonthlyIncomeAndExpenseCardClickEvent {
@@ -97,8 +98,11 @@ const chartOptions = computed<object>(() => {
     const expenseIncomeAmountColor = getExpenseAndIncomeAmountColor(userStore.currentUserExpenseAmountColor, userStore.currentUserIncomeAmountColor, props.isDarkMode);
 
     if (props.data) {
+        const currentMonthFirstUnixTime = getThisMonthFirstUnixTime();
+
         for (const item of props.data) {
-            const monthShortName = formatUnixTimeToGregorianLikeShortMonth(item.monthStartTime);
+            const monthFirstUnixTime = getUnixTimeBeforeUnixTime(currentMonthFirstUnixTime, item.monthsBeforeCurrentMonth, 'months');
+            const monthShortName = formatUnixTimeToGregorianLikeShortMonth(monthFirstUnixTime);
 
             monthNames.push(monthShortName);
             incomeAmounts.push(item.incomeAmount);