From e5dcc05ac5ab330b8df783a002560a783dfb8740 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Fri, 26 Dec 2025 09:45:20 +0000
Subject: [PATCH] =?UTF-8?q?Graphique=20=C3=A9volution=20mensuels=20avec=20?=
 =?UTF-8?q?courbe=20et=20barre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Vue/Accueil/index.php | 38 ++++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/Vue/Accueil/index.php b/Vue/Accueil/index.php
index ab42d55..0fa97d0 100644
--- a/Vue/Accueil/index.php
+++ b/Vue/Accueil/index.php
@@ -273,36 +273,54 @@
     const dataClaimsMonth = <?= $dataTabClaimsMonth ?>;
 
     new Chart(document.getElementById('claimsLine'), {
-        type: 'line',
         data: {
             labels: dataClaimsMonth.months,
             datasets: [
                 {
+                    type: 'line',
                     label: "Cumulés",
                     data: dataClaimsMonth.monthlyClaims, // cumulés
-                    tension: 0.4,
-                    fill: true,
                     borderColor: "blue",
-                    backgroundColor: "rgba(0,0,255,0.2)"
+                    backgroundColor: "rgba(0,0,255,0.2)",
+                    tension: 0.4,
+                    yAxisID: 'y'
                 },
                 {
+                    type: 'bar',
                     label: "Mensuels",
-                    data: dataClaimsMonth.singleClaims, // valeurs brutes du mois
-                    tension: 0.4,
-                    fill: false,
+                    data: dataClaimsMonth.singleClaims, // valeurs brutes
+                    backgroundColor: "rgba(255,0,0,0.5)",
                     borderColor: "red",
-                    backgroundColor: "rgba(255,0,0,0.2)"
+                    borderWidth: 1,
+                    yAxisID: 'y'
                 }
             ]
         },
         options: {
+            responsive: true,
+            interaction: {
+                mode: 'index',
+                intersect: false
+            },
+            stacked: false,
             scales: {
-                y: { beginAtZero: false }
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: "Montant des sinistres"
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: "Mois"
+                    }
+                }
             }
         }
     });
 
-
     // Sinistralité
     new Chart(document.getElementById('lossRatioBar'), {
         type: 'bar',