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

src/models/transaction.ts

@@ -677,20 +677,20 @@ export const ALL_TRANSACTION_AMOUNTS_REQUEST_TYPE = [
 
 export type TransactionAmountsRequestType = typeof ALL_TRANSACTION_AMOUNTS_REQUEST_TYPE[number];
 
-export const LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES: TransactionAmountsRequestType[] = [
+export const LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES: PartialRecord<TransactionAmountsRequestType, number> = {
-    'monthBeforeLast10Months',
+    'monthBeforeLast10Months': 11,
-    'monthBeforeLast9Months',
+    'monthBeforeLast9Months': 10,
-    'monthBeforeLast8Months',
+    'monthBeforeLast8Months': 9,
-    'monthBeforeLast7Months',
+    'monthBeforeLast7Months': 8,
-    'monthBeforeLast6Months',
+    'monthBeforeLast6Months': 7,
-    'monthBeforeLast5Months',
+    'monthBeforeLast5Months': 6,
-    'monthBeforeLast4Months',
+    'monthBeforeLast4Months': 5,
-    'monthBeforeLast3Months',
+    'monthBeforeLast3Months': 4,
-    'monthBeforeLast2Months',
+    'monthBeforeLast2Months': 3,
-    'monthBeforeLastMonth',
+    'monthBeforeLastMonth': 2,
-    'lastMonth',
+    'lastMonth': 1,
-    'thisMonth'
+    'thisMonth': 0
-];
+};
 
 export interface TransactionAmountsRequestParams extends PartialRecord<TransactionAmountsRequestType, StartEndTime> {
     readonly useTransactionTimezone: boolean;
@@ -1009,6 +1009,7 @@ export interface TransactionOverviewResponseItem {
 
 export interface TransactionMonthlyIncomeAndExpenseData {
     readonly monthStartTime: number;
+    readonly monthsBeforeCurrentMonth: number;
     readonly incomeAmount: number;
     readonly expenseAmount: number;
     readonly incompleteIncomeAmount: boolean;

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 => {
+    for (const [type, monthDiff] of entries(LATEST_12MONTHS_TRANSACTION_AMOUNTS_REQUEST_TYPES)) {
-        if (!Object.prototype.hasOwnProperty.call(transactionOverview.value, amountRequestType)) {
+        const amountRequestType = type as TransactionAmountsRequestType;
-            return;
-        }
-
         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);