# 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

```bash
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 :

```markdown
---
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 :
```bash
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](./developpement.md)
- [Guide de déploiement](./deploiement.md)
- [Guide de dépannage](./troubleshooting.md)
- Documentation Cytoscape.js : https://js.cytoscape.org/
- Documentation ECharts : https://echarts.apache.org/