diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index d82bb68..138920a 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -128,10 +128,48 @@ options: { responsive: true, maintainAspectRatio: false, - plugins: { legend: { display: false } }, + // --- NOUVELLES OPTIONS DE PRÉCISION --- + interaction: { + mode: 'index', // Détecte le point le plus proche sur l'axe X + intersect: false, // Pas besoin d'être pile sur le point pour l'activer + }, + hover: { + mode: 'index', + intersect: false + }, + // --------------------------------------- + plugins: { + legend: { display: false }, + tooltip: { + enabled: true, + backgroundColor: '#1f2937', + titleColor: '#9ca3af', + bodyColor: '#3b82f6', + bodyFont: { weight: 'bold', size: 14 }, + borderColor: '#374151', + borderWidth: 1, + padding: 12, + displayColors: false, + callbacks: { + label: function(context) { + return context.parsed.y + ' €'; + } + } + } + }, scales: { - y: { display: false, beginAtZero: false }, - x: { grid: { display: false }, ticks: { color: '#4b5563', font: {size: 9} } } + y: { + display: false, + beginAtZero: false + }, + x: { + grid: { display: false }, + ticks: { + color: '#4b5563', + font: { size: 9 }, + maxRotation: 0 + } + } } } }); @@ -146,7 +184,6 @@ .then(data => { if (!data.length) return; fullData = data; - // Maj des stats const prices = data.map(d => d.price); document.getElementById('price-now-' + pid).innerText = prices[prices.length-1] + ' €';