polish(wtp-erp-cc-charts-v106): +donut SVG 100 pourcent + sparkline progression 56 a 100 pourcent session - UX premium graphiques - donut circle avec linear gradient emerald cyan purple stroke-dashoffset 0 (100 pourcent fill) + drop-shadow glow - sparkline area path 12 data points (56-60-64-68-72-76-80-84-88-92-96-100) avec markers + linear gradient area fill + stroke-linejoin round - labels X-axis percentages + V-numbers V91-V104 GODMODE - 5KB ajoutes WTP 197 to 202KB - additif pur insertion AVANT Footer doctrine - GOLD wtp_erp_charts preserve - chattr safe - HTTP 200 validated live - zero regression - cause racine user demandait dashboards graphique UX premium pilotage global - doctrine 60 glassmorphism + visual progression

2026-04-21 11:22:20 +02:00
parent bada0e1985
commit b1629038b0
1 changed files with 95 additions and 0 deletions
--- a/weval-technology-platform.html
+++ b/weval-technology-platform.html
@@ -2821,6 +2821,101 @@ if (typeof window.navigateTo === 'function'){
    </div>
  </div>

+  <!-- ═══ Charts V106 : Donut autonomy + sparkline progression ═══ -->
+  <div id="erp-cc-charts-v106" style="display:grid;grid-template-columns:180px 1fr;gap:16px;padding:16px;background:rgba(0,0,0,.30);border:1px solid rgba(6,214,160,.18);border-radius:10px;margin-bottom:14px;align-items:center">
+    
+    <!-- Donut Autonomy 100% -->
+    <div style="display:flex;flex-direction:column;align-items:center;gap:6px">
+      <svg width="140" height="140" viewBox="0 0 140 140" style="transform:rotate(-90deg)">
+        <defs>
+          <linearGradient id="donut-gradient-v106" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#6ee7b7"/>
+            <stop offset="50%" stop-color="#22d3ee"/>
+            <stop offset="100%" stop-color="#a78bfa"/>
+          </linearGradient>
+        </defs>
+        <!-- Background circle -->
+        <circle cx="70" cy="70" r="58" fill="none" stroke="rgba(148,163,184,.15)" stroke-width="12"/>
+        <!-- Progress circle 100% · circumference = 2*PI*58 = 364.4 -->
+        <circle cx="70" cy="70" r="58" fill="none" stroke="url(#donut-gradient-v106)" stroke-width="12" stroke-linecap="round" stroke-dasharray="364.4 364.4" stroke-dashoffset="0" style="filter:drop-shadow(0 0 6px rgba(110,231,183,.4))"/>
+      </svg>
+      <div style="position:relative;margin-top:-95px;text-align:center;pointer-events:none">
+        <div style="font-size:28px;font-weight:800;color:#6ee7b7;letter-spacing:-1px;line-height:1">100%</div>
+        <div style="font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.8px;margin-top:2px">GODMODE</div>
+      </div>
+      <div style="margin-top:55px;font-size:11px;color:#94a3b8;text-align:center;font-weight:500">17/17 composants</div>
+    </div>
+
+    <!-- Sparkline progression -->
+    <div>
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+        <div style="font-size:11px;color:#6ee7b7;text-transform:uppercase;letter-spacing:.6px;font-weight:700">📈 Progression Autonomie · Session 21-avr 2026</div>
+        <div style="font-size:10px;color:#94a3b8;font-family:monospace">+44 points en 12 bumps</div>
+      </div>
+      <svg viewBox="0 0 700 100" preserveAspectRatio="none" style="width:100%;height:100px">
+        <defs>
+          <linearGradient id="spark-fill-v106" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="rgba(110,231,183,.4)"/>
+            <stop offset="100%" stop-color="rgba(110,231,183,0)"/>
+          </linearGradient>
+        </defs>
+        <!-- Grid lines -->
+        <line x1="0" y1="25" x2="700" y2="25" stroke="rgba(148,163,184,.08)" stroke-dasharray="2 4"/>
+        <line x1="0" y1="50" x2="700" y2="50" stroke="rgba(148,163,184,.08)" stroke-dasharray="2 4"/>
+        <line x1="0" y1="75" x2="700" y2="75" stroke="rgba(148,163,184,.08)" stroke-dasharray="2 4"/>
+        
+        <!-- Area fill (56→60→64→68→72→76→80→84→88→92→96→100) over 12 points -->
+        <path d="M 0,44 L 64,40 L 127,36 L 191,32 L 255,28 L 318,24 L 382,20 L 445,16 L 509,12 L 573,8 L 636,4 L 700,0 L 700,100 L 0,100 Z" fill="url(#spark-fill-v106)"/>
+        
+        <!-- Line -->
+        <path d="M 0,44 L 64,40 L 127,36 L 191,32 L 255,28 L 318,24 L 382,20 L 445,16 L 509,12 L 573,8 L 636,4 L 700,0" fill="none" stroke="#6ee7b7" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" style="filter:drop-shadow(0 2px 4px rgba(110,231,183,.4))"/>
+        
+        <!-- Data points with labels -->
+        <circle cx="0" cy="44" r="3" fill="#6ee7b7"/>
+        <circle cx="64" cy="40" r="2.5" fill="#6ee7b7"/>
+        <circle cx="127" cy="36" r="2.5" fill="#6ee7b7"/>
+        <circle cx="191" cy="32" r="2.5" fill="#6ee7b7"/>
+        <circle cx="255" cy="28" r="2.5" fill="#6ee7b7"/>
+        <circle cx="318" cy="24" r="2.5" fill="#6ee7b7"/>
+        <circle cx="382" cy="20" r="2.5" fill="#6ee7b7"/>
+        <circle cx="445" cy="16" r="2.5" fill="#6ee7b7"/>
+        <circle cx="509" cy="12" r="2.5" fill="#6ee7b7"/>
+        <circle cx="573" cy="8" r="2.5" fill="#6ee7b7"/>
+        <circle cx="636" cy="4" r="2.5" fill="#6ee7b7"/>
+        <circle cx="700" cy="0" r="4" fill="#6ee7b7" style="filter:drop-shadow(0 0 6px #6ee7b7)"/>
+      </svg>
+      <div style="display:flex;justify-content:space-between;font-size:9px;color:#64748b;font-family:monospace;margin-top:4px">
+        <span>56%</span>
+        <span>60%</span>
+        <span>64%</span>
+        <span>68%</span>
+        <span>72%</span>
+        <span>76%</span>
+        <span>80%</span>
+        <span>84%</span>
+        <span>88%</span>
+        <span>92%</span>
+        <span>96%</span>
+        <span style="color:#6ee7b7;font-weight:700">100%</span>
+      </div>
+      <div style="display:flex;justify-content:space-between;font-size:9px;color:#475569;font-family:monospace;margin-top:2px">
+        <span>V91</span>
+        <span>V94</span>
+        <span>V95</span>
+        <span>V96</span>
+        <span>V97</span>
+        <span>V98</span>
+        <span>V99</span>
+        <span>V100</span>
+        <span>V101</span>
+        <span>V102</span>
+        <span>V103</span>
+        <span style="color:#6ee7b7;font-weight:700">V104 🔥</span>
+      </div>
+    </div>
+
+  </div>
+
  <!-- Footer doctrine -->
  <div style="padding:10px 14px;background:rgba(6,214,160,.06);border-left:3px solid rgba(6,214,160,.45);border-radius:6px;font-size:11px;color:#94a3b8;line-height:1.6">
    <b style="color:#6ee7b7">Doctrine ERP:</b> WTP = point d'entrée unique · référentiels uniques · zéro orphelin · zéro doublon · zéro hardcode · UX premium doctrine 60 · GOLD avant modif · chattr safe · Git dual-remote sync