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)
• Contenu HTML : Chargé via iframe depuis /team.html (fichier statique)
• Navigation : Lien intégré directement dans le composant React Navigation.tsx

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

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 (Core=rouge, Strategic=orange, Support=bleu)
  • 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

Cas d'usage :

• Identifier visuellement qui maîtrise quelles technologies
• Repérer les technologies isolées (peu de connexions)
• Visualiser la polyvalence des membres (nombre de connexions)

2. Matrice de Congestion

Objectif : Identifier les risques de congestion sur les technologies critiques.

Fonctionnalités :

• Affiche uniquement les technologies core (critiques pour le business)
• Filtre les membres avec disponibilité >= 50%
• Visualisation en scatter plot avec :
  • Axe X : Membres de l'équipe
  • Axe Y : Technologies core
  • Points : Disponibilité du membre sur la technologie
  • Taille des points : Disponibilité en pourcentage

Utilisation :

• Survol d'un point pour voir les détails (membre, technologie, disponibilité)
• Zoom possible sur le graphique

Cas d'usage :

• Identifier les technologies core avec peu de couverture
• Repérer les membres disponibles pour les technologies critiques
• Détecter les risques de congestion (1 seule personne sur une techno core)

3. Équipe de Genèse MVP

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

Critères de sélection :

• Technologies : Uniquement ring: core
• Membres : Disponibilité >= 50%
• Priorisation : Membres couvrant le plus de technologies core

Affichage :

• Statistiques :
  • Nombre de membres sélectionnés
  • Capacité totale (somme des disponibilités)
  • Disponibilité moyenne
  • Technologies couvertes / total core
• Liste des membres :
  • Nom, rôle, niveau de séniorité
  • Disponibilité en pourcentage
  • Liste des technologies core maîtrisées
• Alertes :
  • Technologies core non couvertes par l'équipe sélectionnée
  • Impact business et niveau de risque (skillGap)

Cas d'usage :

• Composer une équipe pour un MVP rapide
• Identifier les compétences manquantes
• Estimer la capacité disponible pour le développement

Données Sources

Technologies

Les données des technologies sont extraites depuis :

• Dossier : radar-business/2025-01-15/
• Format : Fichiers Markdown avec métadonnées YAML
• Champs utilisés :
  • title : Nom de la technologie
  • ring : Anneau (core, strategic, support, legacy)
  • quadrant : Quadrant business
  • businessImpact : Impact sur le business
  • teamCoverage : Nombre de personnes maîtrisant
  • skillGap : Risque de compétence manquante
  • Section "Compétences" : Liste des membres

Membres de l'Équipe

Les données des membres sont extraites depuis :

• Dossier : docs/data/team/
• Format : Fichiers Markdown avec métadonnées YAML
• Champs utilisés :
  • name : Identifiant du membre
  • fullName : Nom complet
  • role : Rôle dans l'équipe
  • availability : Disponibilité en pourcentage
  • seniorityLevel : Niveau de séniorité
  • skills : Liste des compétences techniques

Génération des Données

Les visualisations utilisent un fichier JSON généré automatiquement : public/team-visualization-data.json

Régénérer les Données

Si vous modifiez les profils d'équipe ou les technologies, régénérez les données :

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

Ce que fait le script :

1. Charge toutes les technologies depuis radar-business/2025-01-15/
2. Charge tous les membres depuis docs/data/team/
3. Extrait les associations technologies ↔ membres
4. Génère les données pour les 3 visualisations
5. Écrit le fichier JSON dans public/team-visualization-data.json

Structure des données générées :

• network : Nœuds et liens pour le graphe Cytoscape.js
• congestionMatrix : Matrice pour les technologies core
• genesisTeam : Équipe de genèse MVP avec statistiques
• technologies : Liste complète des technologies
• members : Liste complète des membres

Intégration dans le Build

La page est automatiquement créée lors du build Docker via le script scripts/create-team-page.sh :

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
3. Copie des fichiers : Assure que team.html et team-visualization-data.json sont copiés dans out/

Le script est exécuté automatiquement dans Dockerfile.business avant le build Next.js.

Pour régénérer les données de visualisation :

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

Pour tester localement :

# Générer les données
node scripts/generate-team-visualization-data.js

# Créer la page Next.js et modifier Navigation
./scripts/create-team-page.sh

# Démarrer le serveur
npm run serve-business

Technologies Utilisées

Bibliothèques JavaScript

• Cytoscape.js (v3.26.0) : Graphe de réseau interactif
  • Extension : cytoscape-cose-bilkent pour le layout automatique
• ECharts (v5.4.3) : Graphiques interactifs (matrice de congestion)

Chargement

Les bibliothèques sont chargées via CDN dans la page HTML (public/team.html) :

• Pas besoin d'installation locale
• Mise à jour possible en modifiant les URLs dans public/team.html
• Les bibliothèques sont chargées dans l'iframe, isolées du reste de l'application

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 la ligne dans generateCongestionMatrix() :

   const availableMembers = members.filter(m => m.availability >= 50);
   

3. Modifier la ligne dans generateGenesisTeam() :

   const availableMembers = members.filter(m => m.availability >= 50);
   

4. Régénérer les données

Modifier les Couleurs du Graphe

Les couleurs sont définies dans public/team.html dans la fonction initNetworkGraph() :

const ringColor = {
  'core': '#ff4444',
  'strategic': '#ff8800',
  'support': '#4488ff',
  'legacy': '#888888'
}[tech.ring] || '#999999';

Ajouter une Visualisation

Pour ajouter une nouvelle visualisation :

1. Ajouter un onglet dans le HTML
2. Créer la fonction d'initialisation
3. Ajouter les données nécessaires dans generate-team-visualization-data.js
4. Appeler la fonction dans initVisualizations()

Cas d'Usage Concrets

Identifier une Congestion Critique

1. Ouvrir l'onglet "Matrice Congestion"
2. Repérer les technologies core avec peu ou pas de points
3. Vérifier dans l'onglet "Graphe Réseau" qui maîtrise cette technologie
4. Si une seule personne : Risque critique (départ = blocage)

Composer une Équipe pour un Projet

1. Ouvrir l'onglet "Équipe Genèse MVP"
2. Vérifier les technologies couvertes
3. Si des technologies sont non couvertes :
   • Former un membre existant
   • Recruter une compétence
   • Changer de technologie
4. Estimer la capacité disponible (somme des disponibilités)

Analyser la Polyvalence

1. Ouvrir l'onglet "Graphe Réseau"
2. Repérer les membres avec beaucoup de connexions (polyvalents)
3. Repérer les membres avec peu de connexions (spécialisés)
4. Équilibrer l'équipe selon les besoins

Limitations Actuelles

• Seuil fixe : Disponibilité >= 50% pour l'équipe de genèse (non configurable dans l'UI)
• Technologies core uniquement : La matrice de congestion ne montre que les technologies ring: core
• Pas de filtres interactifs : Impossible de filtrer par quadrant, niveau, etc. dans l'interface
• Données statiques : Nécessite de régénérer le JSON après chaque modification

Améliorations Futures Possibles

• Filtres interactifs (quadrant, ring, niveau de compétence)
• Export PDF/PNG des visualisations
• Historique des équipes de genèse
• Calcul automatique de la charge de travail
• Suggestions de formation basées sur les gaps
• Intégration avec un système de planning (Gantt)

Dépannage

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

1. Vérifier que le script create-team-page.sh s'est exécuté correctement
2. Vérifier dans les logs Docker que le script a bien modifié Navigation.tsx
3. Vérifier que le fichier .techradar/src/components/Navigation/Navigation.tsx contient le lien

La page /team retourne une 404

1. Vérifier que team.html est bien copié dans out/ après le build
2. Vérifier les logs du Dockerfile pour voir si la copie a réussi
3. Vérifier que scripts/start-business.sh copie bien les fichiers au démarrage
4. Vérifier que la page Next.js team.tsx a bien été créée dans .techradar/src/pages/

Les visualisations ne se chargent pas

1. Vérifier que team-visualization-data.json est accessible à /team-visualization-data.json
2. Vérifier la console du navigateur pour les erreurs de chargement
3. Régénérer les données avec node scripts/generate-team-visualization-data.js
4. Vérifier que les fichiers Markdown des profils sont bien formatés

Support

Pour toute question ou problème :

• Consulter les logs du script de génération
• Vérifier que les fichiers Markdown sont bien formatés
• Vérifier que le fichier JSON est bien généré et accessible
• Consulter les logs Docker pour voir l'exécution de create-team-page.sh

Fichiers Associés

Fichiers Source

• Page HTML : public/team.html (contenu principal avec visualisations)
• Données JSON : public/team-visualization-data.json (données générées)
• Profils équipe : docs/data/team/*.md (fichiers Markdown avec métadonnées YAML)
• Technologies : radar-business/2025-01-15/*.md (fichiers Markdown du radar)

Scripts

• Génération des données : scripts/generate-team-visualization-data.js
  • Charge les technologies et membres
  • Génère le fichier JSON pour les visualisations
• Création de la page Next.js : scripts/create-team-page.sh
  • Crée .techradar/src/pages/team.tsx (page Next.js avec iframe)
  • Modifie .techradar/src/components/Navigation/Navigation.tsx (ajoute le lien)

Fichiers Générés (pendant le build)

• Page Next.js : .techradar/src/pages/team.tsx (générée par le script)
• Navigation modifiée : .techradar/src/components/Navigation/Navigation.tsx (modifiée par le script)
• Fichiers dans out/ : out/team.html et out/team-visualization-data.json (copiés après build)

Configuration

• Dockerfile : Dockerfile.business (exécute create-team-page.sh avant le build)
• Script de démarrage : scripts/start-business.sh (vérifie et copie les fichiers au démarrage)