add graph

src/main/resources/templates/index.html

@@ -29,5 +29,50 @@
         </script>
     </div>
 </div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<div class="p-4 bg-gray-800 rounded-lg shadow-md mb-4">
+    <h3 th:text="${product.name}" class="text-xl font-bold mb-2"></h3>
+
+    <div style="height: 200px;">
+        <canvas th:id="'chart-' + ${product.id}"></canvas>
+    </div>
+
+    <script th:inline="javascript">
+        (function() {
+            const productId = [[${product.id}]];
+            const ctx = document.getElementById('chart-' + productId).getContext('2d');
+
+            // On va chercher les données via l'API qu'on a créée
+            fetch('/api/prices/' + productId)
+                .then(response => response.json())
+                .then(data => {
+                    const labels = data.map(entry => new Date(entry.dateCheck).toLocaleDateString());
+                    const prices = data.map(entry => entry.price);
+
+                    new Chart(ctx, {
+                        type: 'line',
+                        data: {
+                            labels: labels,
+                            datasets: [{
+                                label: 'Prix (€)',
+                                data: prices,
+                                borderColor: '#3b82f6', // Bleu Tailwind
+                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                                fill: true,
+                                tension: 0.4 // Courbe arrondie
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            plugins: { legend: { display: false } }
+                        }
+                    });
+                });
+        })();
+    </script>
+</div>
 </body>
 </html>