ajout du graph aux details restos

views/resto.ejs

@@ -11,7 +11,9 @@
         </div>
       </div>
       <div class="chart">
-        <div class="chart-placeholder">Graph radar</div>
+        <div class="chart-placeholder">
+          <canvas id="radarChart"></canvas>
+        </div>
       </div>
     </div>
 
@@ -140,8 +142,8 @@
     }
 
     .chart-placeholder {
-      width: 150px;
+      width: 200px;
-      height: 150px;
+      height: 200px;
       background: #eee;
       display: flex;
       align-items: center;
@@ -216,3 +218,69 @@
     }
   </style>
 </body>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const ctx = document.getElementById('radarChart').getContext('2d');
+    const radarChart = new Chart(ctx, {
+      type: 'radar',
+      data: {
+        labels: ['Qualité des plats', 'Ambiance', 'Accessibilité', 'Service', 'Tradition'],
+        datasets: [
+          {
+            label: 'Moyenne des notes',
+            data: [4.7, 4.6, 4.4, 4.3, 4.8],
+            fill: true,
+            backgroundColor: 'rgba(25, 80, 233, 0.2)',
+            borderColor: 'rgb(25, 80, 233, 10)',
+            pointBackgroundColor: 'rgb(55, 99, 132)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: 'rgb(255, 99, 132)',
+            pointStyle: 'circle',
+            pointRadius: 5,
+            pointRotation: 0,
+          },
+        ]
+      },
+      options: {
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            callbacks: {
+              label: function(context) {
+                let label = context.dataset.label || '';
+                if (label) {
+                  label += ': ';
+                }
+                label += context.formattedValue;
+                return label;
+              }
+            }
+          }
+        },
+        scales: {
+          r: {
+            max: 5,
+            min: 0,
+            ticks: {
+              stepSize: 1,
+              display: false,
+              callback: function(value, index, values) {
+                return value.toFixed(1);
+              }
+            }
+          }
+        },
+        elements: {
+          line: {
+            borderWidth: 3
+          }
+        }
+      }
+    });
+  });
+</script>