feat: improve MonthlyChart and transaction data formatting; dynamically adjust X-axis intervals and enhance month label presentation for better readability

hooks/use-transactions-chart-data.ts

@@ -139,19 +139,29 @@ export function useTransactionsChartData({
       monthlyMap.set(monthKey, current);
     });
 
-    const monthlyChartData: MonthlyChartData[] = Array.from(
-      monthlyMap.entries()
-    )
-      .sort((a, b) => a[0].localeCompare(b[0]))
-      .map(([month, values]) => ({
-        month: new Date(month + "-01").toLocaleDateString("fr-FR", {
+    // Format months with year: use short format for better readability
+    const sortedMonths = Array.from(monthlyMap.entries()).sort((a, b) =>
+      a[0].localeCompare(b[0])
+    );
+
+    const monthlyChartData: MonthlyChartData[] = sortedMonths.map(
+      ([monthKey, values]) => {
+        const date = new Date(monthKey + "-01");
+        
+        // Format: "janv. 24" instead of "janv. 2024" for compactness
+        const monthLabel = date.toLocaleDateString("fr-FR", {
           month: "short",
-          year: "numeric",
-        }),
-        revenus: values.income,
-        depenses: values.expenses,
-        solde: values.income - values.expenses,
-      }));
+        });
+        const yearShort = date.getFullYear().toString().slice(-2);
+
+        return {
+          month: `${monthLabel} ${yearShort}`,
+          revenus: values.income,
+          depenses: values.expenses,
+          solde: values.income - values.expenses,
+        };
+      }
+    );
 
     return monthlyChartData;
   }, [transactionsData]);