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

components/statistics/monthly-chart.tsx

@@ -44,20 +44,35 @@ export function MonthlyChart({
 }: MonthlyChartProps) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
+  // Calculer l'intervalle dynamiquement selon le nombre de données
+  const getXAxisInterval = () => {
+    if (data.length <= 6) return 0; // Afficher tous les labels pour 6 mois ou moins
+    if (data.length <= 12) return 1; // Afficher un label sur deux pour 7-12 mois
+    return Math.floor(data.length / 12); // Pour plus de 12 mois, afficher environ 12 labels
+  };
+
+  // Formater les labels de manière plus compacte
+  const formatMonthLabel = (month: string) => {
+    // Format: "janv. 24" -> "janv 24" (enlever le point)
+    return month.replace('.', '');
+  };
+
   const chartContent = (
     <>
       {data.length > 0 ? (
         <div className="h-[400px] sm:h-[300px]">
           <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={data} margin={{ left: 0, right: 10, top: 10, bottom: 5 }}>
+            <LineChart data={data} margin={{ left: 0, right: 10, top: 10, bottom: data.length > 6 ? 80 : 60 }}>
               <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
               <XAxis 
                 dataKey="month" 
                 className="text-xs"
-                angle={-45}
+                angle={data.length > 6 ? -45 : 0}
-                textAnchor="end"
+                textAnchor={data.length > 6 ? "end" : "middle"}
-                height={60}
+                height={data.length > 6 ? 80 : 60}
-                interval={0}
+                interval={getXAxisInterval()}
+                tickFormatter={formatMonthLabel}
+                tick={{ fontSize: 11 }}
               />
               <YAxis
                 className="text-xs"

hooks/use-transactions-chart-data.ts

@@ -139,19 +139,29 @@ export function useTransactionsChartData({
       monthlyMap.set(monthKey, current);
     });
 
-    const monthlyChartData: MonthlyChartData[] = Array.from(
+    // Format months with year: use short format for better readability
-      monthlyMap.entries()
+    const sortedMonths = Array.from(monthlyMap.entries()).sort((a, b) =>
-    )
+      a[0].localeCompare(b[0])
-      .sort((a, b) => a[0].localeCompare(b[0]))
+    );
-      .map(([month, values]) => ({
+
-        month: new Date(month + "-01").toLocaleDateString("fr-FR", {
+    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",
+        });
-        }),
+        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]);