Upload templates/index.html with huggingface_hub

templates/index.html

@@ -1650,7 +1650,7 @@ textarea:focus {
 
       <!-- HEATMAP COMPACTE -->
       <div class="compact-heatmap-and-indicators">
-        <h3>🔥 Heatmap d'activité - Analyse de la persistance et du management de l'effort</h3>
+        <h3>🔥 Heatmap d'activité - Analyse de Persévérance</h3>
         
         <div class="compact-heatmap-container">
           <!-- Colonne gauche : Heatmap et contrôles -->
@@ -1703,7 +1703,7 @@ textarea:focus {
           <!-- Colonne droite : Indicateurs de persévérance -->
           <div class="compact-heatmap-right">
             <div class="compact-persistence-analysis" id="compact-persistenceAnalysis">
-              <h5>🧭 Indicateurs de persistance et de management de l'effort</h5>
+              <h5>🎯 Indicateurs de Persévérance</h5>
               <div class="compact-persistence-indicators">
                 <div class="compact-indicator">
                   <span class="compact-indicator-dot" style="background:#FF6B6B;"></span>
@@ -2860,12 +2860,24 @@ function drawRadar() {
 
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-  // Dessiner le radar
+  // Dessiner les cercles concentriques avec pourcentages
   for (let i = 1; i <= 5; i++) {
     ctx.beginPath();
     ctx.arc(cx, cy, (radius / 5) * i, 0, 2 * Math.PI);
     ctx.strokeStyle = "#e0e0e0";
     ctx.stroke();
+    
+    // Ajouter les pourcentages sur les cercles
+    if (i % 2 === 0 || i === 1 || i === 5) { // Afficher 0%, 20%, 40%, 60%, 80%, 100%
+      const percent = (i * 20) + "%";
+      ctx.save();
+      ctx.font = "10px Arial";
+      ctx.fillStyle = "#666";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(percent, cx, cy - (radius / 5) * i - 5);
+      ctx.restore();
+    }
   }
 
   // Dessiner les axes
@@ -2912,17 +2924,39 @@ function drawRadar() {
   ctx.lineWidth = 2;
   ctx.stroke();
 
-  // Dessiner les points
+  // Dessiner les points avec les pourcentages
   radarMetrics.forEach((m, i) => {
     const angle = (2 * Math.PI * i) / n - Math.PI / 2;
     const r = radius * (m.value / 100);
     const x = cx + r * Math.cos(angle);
     const y = cy + r * Math.sin(angle);
 
+    // Dessiner le point
     ctx.beginPath();
     ctx.arc(x, y, 4, 0, 2 * Math.PI);
     ctx.fillStyle = "#1976D2";
     ctx.fill();
+    
+    // Ajouter le pourcentage à côté du point
+    ctx.save();
+    ctx.font = "bold 11px Arial";
+    ctx.fillStyle = "#1976D2";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    
+    // Positionner le pourcentage légèrement décalé
+    const labelOffset = 15;
+    const labelX = x + labelOffset * Math.cos(angle);
+    const labelY = y + labelOffset * Math.sin(angle);
+    
+    // Ajouter un fond pour une meilleure lisibilité
+    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+    ctx.fillRect(labelX - 15, labelY - 8, 30, 16);
+    
+    // Écrire le pourcentage
+    ctx.fillStyle = "#1976D2";
+    ctx.fillText(m.value + "%", labelX, labelY);
+    ctx.restore();
   });
 }