TechradarDev/docs/app/guide-page-equipe.md

Guide de la Page Équipe & Technologies

Introduction

La page Équipe & Technologies (/team) est une interface de visualisation interactive qui permet d'analyser les compétences de l'équipe, d'identifier les congestions (technologies avec peu de personnes) et de composer une équipe de genèse pour un MVP.

Cette page est accessible depuis le radar via le lien "👥 Équipe" dans le header de navigation.

Architecture Technique

La page utilise une architecture hybride :

• Page Next.js : /team (route Next.js générée automatiquement par Dockerfile.business)
• Contenu HTML : Chargé via iframe depuis /team.html (fichier statique)
• Navigation : Lien intégré directement dans le composant React Navigation.tsx (modifié par script Python)

Cette approche combine les avantages de Next.js (routing, intégration native) avec la flexibilité d'un HTML statique autonome.

Fichiers impliqués

• Page Next.js : .techradar/src/pages/team.tsx (créée par Dockerfile.business)
• Page HTML : public/team.html (fichier statique avec visualisations)
• Données JSON : public/team-visualization-data.json (généré par scripts/generate-team-visualization-data.js)
• Navigation : .techradar/src/components/Navigation/Navigation.tsx (modifiée par script Python)

Accès

• URL : /team (route Next.js)
• Fichier HTML source : /team.html (servi statiquement)
• Lien de navigation : Disponible dans le header du radar (bouton "👥 Équipe")
• Authentification : Même protection que le radar (mot de passe laplank-radar)

Fonctionnalités

La page propose trois visualisations complémentaires :

1. Graphe Réseau

Objectif : Visualiser les connexions entre technologies et membres de l'équipe.

Fonctionnalités :

• Nœuds technologies :
  • Couleur selon le ring (Adopt=vert, Trial=bleu, Assess=orange, Hold=rouge)
  • Taille proportionnelle au nombre de personnes maîtrisant la technologie
  • Label avec le nom de la technologie
• Nœuds membres :
  • Couleur verte
  • Taille proportionnelle à la disponibilité
  • Label avec le nom du membre
• Liens :
  • Connectent les technologies aux membres qui les maîtrisent
  • Épaisseur selon le niveau de compétence

Utilisation :

• Zoom : Molette de la souris ou pincement sur mobile
• Pan : Clic gauche + glisser
• Tooltip : Survol d'un nœud pour voir les détails

Technologie : Cytoscape.js avec le layout CoSE-Bilkent

2. Matrice de Congestion

Objectif : Identifier les technologies avec faible couverture d'équipe (congestions).

Fonctionnalités :

• Axe X : Membres de l'équipe
• Axe Y : Technologies (uniquement les technologies "adopt" - anciennement "core")
• Couleurs :
  • Vert : Technologie maîtrisée par le membre
  • Rouge : Technologie non maîtrisée
  • Intensité selon le niveau de compétence

Utilisation :

• Cliquer sur une cellule pour voir les détails
• Filtrer par technologie ou membre
• Identifier visuellement les technologies avec peu de personnes

Note : Seules les technologies avec ring: adopt sont affichées dans la matrice, car ce sont les technologies fondamentales en production (anciennement classées comme "core").

Technologie : ECharts (heatmap)

3. Équipe de Genèse MVP

Objectif : Composer automatiquement une équipe minimale pour un MVP en 2 mois avec mobilisation quotidienne.

Fonctionnalités :

• Sélection automatique : Algorithme qui sélectionne les membres selon :
  • Disponibilité >= 50%
  • Couverture maximale des technologies critiques (technologies avec ring: adopt - anciennement "core")
  • Équilibre des compétences
• Statistiques :
  • Nombre de membres sélectionnés
  • Pourcentage de technologies couvertes
  • Technologies critiques non couvertes
• Recommandations :
  • Technologies à former
  • Compétences manquantes
  • Risques identifiés

Technologie : Algorithme JavaScript avec affichage HTML/CSS

Données

Sources de données

1. Profils équipe : docs/data/team/*.md (fichiers Markdown avec métadonnées YAML)
2. Technologies : radar-business/2025-01-15/*.md (blips avec métadonnées)

Génération des données

Le script scripts/generate-team-visualization-data.js :

1. Lit les profils équipe depuis docs/data/team/*.md
2. Lit les technologies depuis radar-business/2025-01-15/*.md
3. Génère public/team-visualization-data.json avec :
   • network : Données réseau (nodes/edges) pour Cytoscape.js
   • congestionMatrix : Matrice de congestion pour ECharts
   • genesisTeam : Équipe de genèse MVP avec statistiques
   • technologies : Liste des technologies avec métadonnées
   • members : Liste des membres avec compétences

Exécuter la génération

node scripts/generate-team-visualization-data.js

Important : Régénérer les données après chaque modification des profils équipe ou des technologies.

Structure des profils équipe

Les profils sont stockés dans docs/data/team/*.md avec le format suivant :

---
name: "pseudo"
fullName: "Nom complet"
role: "Rôle"
availability: 50
seniorityLevel: expert
yearsExperience: 8
joinDate: "2016-01"
interests: ["Mobile", "Infrastructure"]
skills:
  - name: "Flutter"
    level: expert
    years: 4
    lastUsed: "2024-12"
  - name: "Python"
    level: intermediate
    years: 5
    lastUsed: "2024-11"
softSkills:
  - "Autonomie"
  - "Pédagogie"
projects:
  - "Projet1"
  - "Projet2"
---

Description du membre de l'équipe.

Métadonnées

• name : Pseudo unique (utilisé comme identifiant)
• fullName : Nom complet
• role : Rôle dans l'équipe
• availability : Disponibilité en pourcentage (0-100)
• seniorityLevel : Niveau de séniorité (junior, intermediate, senior, expert)
• yearsExperience : Années d'expérience totales
• joinDate : Date d'arrivée (format YYYY-MM)
• interests : Centres d'intérêt
• skills : Liste des compétences techniques avec niveau, années et dernière utilisation
• softSkills : Compétences comportementales
• projects : Projets sur lesquels le membre a travaillé

Processus de build

Dans le Dockerfile

1. Création de la page Next.js : Génère .techradar/src/pages/team.tsx
2. Modification de Navigation : Ajoute le lien "👥 Équipe" dans .techradar/src/components/Navigation/Navigation.tsx via script Python
3. Copie des fichiers : Copie public/team.html et public/team-visualization-data.json vers .techradar/public/
4. Build Next.js : Génère les fichiers statiques dans out/
5. Vérification : Le script start-business.sh vérifie que les fichiers sont dans out/ et les copie si nécessaire

Script Python pour Navigation.tsx

Le script /tmp/add_team_link.py dans le Dockerfile :

1. Supprime tous les liens Équipe existants : Évite les doublons
2. Ajoute un seul lien Équipe : Après le lien "Vue d'ensemble"
3. Vérifie le résultat : S'assure qu'il n'y a qu'un seul lien

Important : Les scripts JavaScript (strategie-script.js, strategie-link.js) qui ajoutaient des liens dans le header ont été désactivés pour éviter les doublons.

Technologies utilisées

Bibliothèques JavaScript

• Cytoscape.js : Graphique réseau interactif
• Cytoscape CoSE-Bilkent : Layout algorithm pour le graphique
• ECharts : Matrice de congestion (heatmap)
• Vanilla JavaScript : Logique de l'équipe de genèse MVP

Chargement des données

Les données sont chargées depuis /team-visualization-data.json via fetch() au chargement de la page.

Utilisation

Visualiser les compétences

1. Ouvrir l'onglet "Graphe Réseau"
2. Explorer les connexions entre technologies et membres
3. Identifier les technologies avec beaucoup de personnes (gros nœuds)
4. Identifier les technologies avec peu de personnes (petits nœuds = congestions)

Identifier les congestions

1. Ouvrir l'onglet "Matrice Congestion"
2. Repérer les colonnes (technologies) avec beaucoup de cases rouges
3. Ces technologies ont une faible couverture d'équipe
4. Actions recommandées :
   • Former l'équipe
   • Recruter
   • Documenter

Composer une Équipe pour un Projet

1. Ouvrir l'onglet "Équipe Genèse MVP"
2. L'équipe est automatiquement sélectionnée selon :
   • Disponibilité >= 50%
   • Couverture maximale des technologies
3. Consulter les statistiques :
   • Technologies couvertes
   • Technologies manquantes
   • Recommandations

Personnalisation

Modifier le seuil de disponibilité

Pour l'équipe de genèse MVP, le seuil est fixé à 50%. Pour le modifier :

1. Ouvrir scripts/generate-team-visualization-data.js
2. Modifier le filtre m.availability >= 50 dans les fonctions generateCongestionMatrix() et generateGenesisTeam()
3. Régénérer les données : node scripts/generate-team-visualization-data.js

Note : Les technologies critiques utilisées pour la sélection sont celles avec ring: adopt (anciennement "core"). Pour modifier ce critère, changer le filtre t.ring === 'adopt' dans generateGenesisTeam().

Ajouter de nouvelles visualisations

1. Modifier public/team.html
2. Ajouter un nouvel onglet dans la section .tabs
3. Ajouter le contenu dans une nouvelle section .tab-content
4. Implémenter la logique JavaScript pour charger et afficher les données

Maintenance

Mettre à jour les profils équipe

1. Modifier les fichiers dans docs/data/team/*.md
2. Régénérer les données : node scripts/generate-team-visualization-data.js
3. Commiter les deux fichiers (profils + données JSON)

Ajouter un nouveau membre

1. Créer un fichier docs/data/team/pseudo.md
2. Remplir toutes les métadonnées
3. Régénérer les données
4. Vérifier que le membre apparaît dans les visualisations

Mettre à jour les compétences

1. Modifier la section skills dans le profil équipe
2. Régénérer les données
3. Vérifier que les connexions sont mises à jour dans le graphe

Troubleshooting

Le lien "👥 Équipe" n'apparaît pas dans le header

Causes possibles :

• Le script Python n'a pas été exécuté
• Le fichier Navigation.tsx n'a pas été trouvé
• Erreur dans le script Python

Solutions :

1. Vérifier les logs Docker lors du build
2. Vérifier que le fichier .techradar/src/components/Navigation/Navigation.tsx existe
3. Rebuild avec --no-cache pour forcer l'exécution du script

La page /team retourne 404

Causes possibles :

• Le fichier team.html n'est pas dans out/
• La page Next.js team.tsx n'a pas été créée

Solutions :

1. Vérifier que public/team.html existe
2. Vérifier que le Dockerfile a bien créé .techradar/src/pages/team.tsx
3. Vérifier que team.html a été copié dans out/

Les visualisations sont vides

Causes possibles :

• Le fichier team-visualization-data.json n'a pas été généré
• Le fichier n'est pas accessible depuis /team.html

Solutions :

1. Générer les données : node scripts/generate-team-visualization-data.js
2. Vérifier que le fichier existe dans public/team-visualization-data.json
3. Vérifier que le fichier a été copié dans out/
4. Vérifier la console du navigateur pour les erreurs JavaScript

Les données ne sont pas à jour

Solution : Régénérer les données après chaque modification :

node scripts/generate-team-visualization-data.js

Fichiers associés

• Page HTML : public/team.html (interface utilisateur)
• Données JSON : public/team-visualization-data.json (généré)
• Script de génération : scripts/generate-team-visualization-data.js
• Profils équipe : docs/data/team/*.md (fichiers Markdown avec métadonnées YAML)
• Technologies : radar-business/2025-01-15/*.md (blips avec métadonnées)
• Page Next.js : .techradar/src/pages/team.tsx (générée par le Dockerfile)
• Navigation modifiée : .techradar/src/components/Navigation/Navigation.tsx (modifiée par le Dockerfile)

Ressources

• Guide de développement
• Guide de déploiement
• Guide de dépannage
• Documentation Cytoscape.js : https://js.cytoscape.org/
• Documentation ECharts : https://echarts.apache.org/