|
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="640" viewBox="0 0 900 640" font-family="Geist, system-ui, sans-serif">
|
|
<rect width="900" height="640" fill="#f8fafc"/>
|
|
<text x="32" y="40" font-size="20" font-weight="700" fill="#0f172a">#66 — Section « Tendances du marché » (outils d'analyse)</text>
|
|
|
|
<!-- POPULATED -->
|
|
<text x="32" y="74" font-size="13" font-weight="600" fill="#64748b">État RENSEIGNÉ</text>
|
|
<rect x="32" y="88" width="430" height="430" rx="16" fill="#ffffff" stroke="#e2e8f0"/>
|
|
<text x="52" y="120" font-size="14" font-weight="600" fill="#475569">📈 TENDANCES DU MARCHÉ</text>
|
|
<text x="52" y="138" font-size="11" fill="#94a3b8">Périmètre : Frontend · France</text>
|
|
|
|
<text x="52" y="172" font-size="11" font-weight="600" fill="#94a3b8">COMPÉTENCES LES PLUS DEMANDÉES</text>
|
|
<!-- skill bar 1 -->
|
|
<text x="52" y="198" font-size="12" fill="#0f172a">Java</text>
|
|
<rect x="52" y="206" width="330" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="52" y="206" width="330" height="10" rx="5" fill="#50a7af"/>
|
|
<text x="392" y="215" font-size="11" font-weight="600" fill="#475569">8 974</text>
|
|
<text x="52" y="238" font-size="12" fill="#0f172a">Kubernetes</text>
|
|
<rect x="52" y="246" width="260" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="52" y="246" width="260" height="10" rx="5" fill="#50a7af"/>
|
|
<text x="392" y="255" font-size="11" font-weight="600" fill="#475569">7 086</text>
|
|
<text x="52" y="278" font-size="12" fill="#0f172a">React</text>
|
|
<rect x="52" y="286" width="210" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="52" y="286" width="210" height="10" rx="5" fill="#50a7af"/>
|
|
<text x="392" y="295" font-size="11" font-weight="600" fill="#475569">5 612</text>
|
|
|
|
<line x1="52" y1="318" x2="442" y2="318" stroke="#f1f5f9"/>
|
|
<text x="52" y="344" font-size="11" font-weight="600" fill="#94a3b8">LOCALISATION</text>
|
|
<rect x="52" y="356" width="20" height="20" rx="4" fill="#dcedef"/>
|
|
<text x="62" y="370" font-size="11" text-anchor="middle">📍</text>
|
|
<text x="84" y="364" font-size="12" fill="#475569">Paris concentre le plus d'offres Frontend</text>
|
|
<text x="84" y="380" font-size="11" fill="#94a3b8">puis Lyon, Nantes</text>
|
|
|
|
<line x1="52" y1="402" x2="442" y2="402" stroke="#f1f5f9"/>
|
|
<text x="52" y="428" font-size="11" font-weight="600" fill="#94a3b8">MODE DE TRAVAIL</text>
|
|
<rect x="52" y="440" width="312" height="14" rx="7" fill="#f1f5f9"/>
|
|
<rect x="52" y="440" width="250" height="14" rx="7" fill="#78c738"/>
|
|
<text x="52" y="476" font-size="12" fill="#475569">80 % des rôles Frontend sont en hybride</text>
|
|
<text x="52" y="496" font-size="10" font-style="italic" fill="#94a3b8">Source : agrégat MatchingAgent · ne pas inventer de chiffre</text>
|
|
|
|
<!-- LOADING -->
|
|
<text x="490" y="74" font-size="13" font-weight="600" fill="#64748b">CHARGEMENT (skeleton)</text>
|
|
<rect x="490" y="88" width="378" height="180" rx="16" fill="#ffffff" stroke="#e2e8f0"/>
|
|
<rect x="510" y="112" width="160" height="12" rx="6" fill="#e2e8f0"/>
|
|
<rect x="510" y="140" width="338" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="510" y="160" width="290" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="510" y="180" width="320" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="510" y="210" width="200" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="510" y="230" width="250" height="10" rx="5" fill="#f1f5f9"/>
|
|
|
|
<!-- EMPTY -->
|
|
<text x="490" y="300" font-size="13" font-weight="600" fill="#64748b">VIDE (aucun agrégat pour ce périmètre)</text>
|
|
<rect x="490" y="314" width="378" height="90" rx="16" fill="#ffffff" stroke="#e2e8f0"/>
|
|
<text x="679" y="356" font-size="12" fill="#64748b" text-anchor="middle">Aucune tendance disponible pour ce rôle</text>
|
|
<text x="679" y="376" font-size="11" fill="#94a3b8" text-anchor="middle">pour le moment.</text>
|
|
|
|
<!-- ERROR -->
|
|
<text x="490" y="436" font-size="13" font-weight="600" fill="#64748b">ERREUR</text>
|
|
<rect x="490" y="450" width="378" height="80" rx="16" fill="#fef2f2" stroke="#fecaca"/>
|
|
<text x="510" y="484" font-size="12" fill="#b91c1c">Tendances indisponibles</text>
|
|
<text x="510" y="504" font-size="11" fill="#ef4444" text-decoration="underline">Réessayer</text>
|
|
|
|
<text x="32" y="560" font-size="11" fill="#94a3b8">Barres = TimeSeriesChart non requis (barres statiques CSS) ; si chart temporel ajouté plus tard → wrapper recharts unique uniquement.</text>
|
|
<text x="32" y="578" font-size="11" fill="#94a3b8">Couleurs : secondary (Pacific Blue) pour compétences, primary (Willow Green) pour mode de travail, neutres slate. Aucune couleur nouvelle.</text>
|
|
<text x="32" y="596" font-size="11" fill="#94a3b8">Règle données : jamais de chiffre inventé — chaque compteur vient de #61/#63 ; sinon « donnée indisponible » / section masquée.</text>
|
|
</svg>
|
