|
|
|
|
@@ -1,141 +1,146 @@
|
|
|
|
|
# Guide de la Page Équipe & Technologies
|
|
|
|
|
# Guide de la Page Equipe & 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.
|
|
|
|
|
La page **Equipe & Technologies** (`/team`) est une interface de visualisation interactive qui permet d'analyser les competences de l'equipe, d'identifier les congestions (technologies avec peu de personnes) et de composer une equipe de genese pour un MVP.
|
|
|
|
|
|
|
|
|
|
Cette page est accessible depuis le radar via le lien **"👥 Équipe"** dans le header de navigation.
|
|
|
|
|
Cette page est accessible depuis le radar via le lien **"Equipe"** dans le header de navigation.
|
|
|
|
|
|
|
|
|
|
## Architecture Technique
|
|
|
|
|
|
|
|
|
|
La page utilise une architecture pure React/Next.js :
|
|
|
|
|
- **Page Next.js** : `/team` (vraie page React avec hooks et états)
|
|
|
|
|
- **Import dynamique** : Cytoscape.js et ECharts chargés côté client seulement (évite erreurs SSR)
|
|
|
|
|
- **État React** : Gestion des onglets, données et erreurs via useState/useEffect
|
|
|
|
|
- **Refs React** : Containers pour les graphiques gérés proprement
|
|
|
|
|
- **Navigation** : Lien intégré directement dans le composant React `Navigation.tsx` (modifié par script Python)
|
|
|
|
|
La page utilise une architecture basee sur l'injection de contenu cote client :
|
|
|
|
|
|
|
|
|
|
Cette approche moderne utilise pleinement les capacités de React tout en évitant les problèmes SSR avec les bibliothèques de visualisation.
|
|
|
|
|
- **Script principal** : `public/team-block-script.js` charge par Next.js via `_document.tsx`
|
|
|
|
|
- **Remplacement DOM** : Le script detecte la route `/team` et remplace le contenu du body
|
|
|
|
|
- **Chargement dynamique** : Cytoscape.js et ECharts sont charges depuis CDN
|
|
|
|
|
- **Donnees JSON** : `public/team-visualization-data.json` genere par script Node.js
|
|
|
|
|
- **Navigation** : Lien integre dans `Navigation.tsx` (modifie par script Python lors du build)
|
|
|
|
|
|
|
|
|
|
### Fichiers impliqués
|
|
|
|
|
Cette approche evite les conflits SSR tout en permettant des visualisations interactives riches.
|
|
|
|
|
|
|
|
|
|
- **Page Next.js** : `.techradar/src/pages/team.tsx` (vraie page React créée par `Dockerfile.business`)
|
|
|
|
|
- **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)
|
|
|
|
|
- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement)
|
|
|
|
|
### Fichiers impliques
|
|
|
|
|
|
|
|
|
|
## Accès
|
|
|
|
|
- **Script principal** : `public/team-block-script.js` (injection du contenu et visualisations)
|
|
|
|
|
- **Page Next.js** : `.techradar/src/pages/team.tsx` (page vide, le script remplace le contenu)
|
|
|
|
|
- **Donnees JSON** : `public/team-visualization-data.json` (genere par `scripts/generate-team-visualization-data.js`)
|
|
|
|
|
- **Navigation** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiee par script Python)
|
|
|
|
|
- **Document modifie** : `.techradar/src/pages/_document.tsx` (modifie pour charger le script)
|
|
|
|
|
|
|
|
|
|
- **URL** : `/team` (route Next.js avec vraie page React)
|
|
|
|
|
- **Lien de navigation** : Disponible dans le header du radar (bouton "👥 Équipe")
|
|
|
|
|
- **Authentification** : Même protection que le radar (mot de passe `laplank-radar`)
|
|
|
|
|
## Acces
|
|
|
|
|
|
|
|
|
|
## Fonctionnalités
|
|
|
|
|
- **URL** : `/team` ou `/team/`
|
|
|
|
|
- **Lien de navigation** : Disponible dans le header du radar (bouton "Equipe")
|
|
|
|
|
- **Authentification** : Meme protection que le radar (mot de passe `laplank-radar`)
|
|
|
|
|
|
|
|
|
|
La page propose trois visualisations complémentaires :
|
|
|
|
|
## Fonctionnalites
|
|
|
|
|
|
|
|
|
|
### 1. Graphe Réseau
|
|
|
|
|
La page propose trois visualisations complementaires accessibles via des onglets :
|
|
|
|
|
|
|
|
|
|
**Objectif** : Visualiser les connexions entre technologies et membres de l'équipe.
|
|
|
|
|
### 1. Graphe Reseau
|
|
|
|
|
|
|
|
|
|
**Fonctionnalités** :
|
|
|
|
|
- **Nœuds technologies** :
|
|
|
|
|
**Objectif** : Visualiser les connexions entre technologies et membres de l'equipe.
|
|
|
|
|
|
|
|
|
|
**Fonctionnalites** :
|
|
|
|
|
- **Noeuds technologies** :
|
|
|
|
|
- Couleur selon le ring (Adopt=vert, Trial=bleu, Assess=orange, Hold=rouge)
|
|
|
|
|
- Taille proportionnelle au nombre de personnes maîtrisant la technologie
|
|
|
|
|
- Taille proportionnelle au nombre de personnes maitrisant la technologie
|
|
|
|
|
- Label avec le nom de la technologie
|
|
|
|
|
- **Nœuds membres** :
|
|
|
|
|
- **Noeuds membres** :
|
|
|
|
|
- Couleur verte
|
|
|
|
|
- Taille proportionnelle à la disponibilité
|
|
|
|
|
- Taille proportionnelle a la disponibilite
|
|
|
|
|
- Label avec le nom du membre
|
|
|
|
|
- **Liens** :
|
|
|
|
|
- Connectent les technologies aux membres qui les maîtrisent
|
|
|
|
|
- Épaisseur selon le niveau de compétence
|
|
|
|
|
- Connectent les technologies aux membres qui les maitrisent
|
|
|
|
|
- Epaisseur selon le niveau de competence
|
|
|
|
|
|
|
|
|
|
**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
|
|
|
|
|
- Animation : Le graphe s'organise automatiquement au chargement
|
|
|
|
|
|
|
|
|
|
**Technologie** : Cytoscape.js avec le layout CoSE-Bilkent
|
|
|
|
|
**Technologie** : Cytoscape.js avec le layout CoSE (integre)
|
|
|
|
|
|
|
|
|
|
### 2. Matrice de Congestion
|
|
|
|
|
|
|
|
|
|
**Objectif** : Identifier les technologies avec faible couverture d'équipe (congestions).
|
|
|
|
|
**Objectif** : Identifier les technologies avec faible couverture d'equipe (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
|
|
|
|
|
**Fonctionnalites** :
|
|
|
|
|
- **Axe X** : Membres de l'equipe
|
|
|
|
|
- **Axe Y** : Technologies (uniquement les technologies "adopt")
|
|
|
|
|
- **Points verts** : Indiquent qu'un membre maitrise une technologie
|
|
|
|
|
- **Taille des points** : Proportionnelle a la disponibilite du membre
|
|
|
|
|
|
|
|
|
|
**Utilisation** :
|
|
|
|
|
- Cliquer sur une cellule pour voir les détails
|
|
|
|
|
- Filtrer par technologie ou membre
|
|
|
|
|
- Identifier visuellement les technologies avec peu de personnes
|
|
|
|
|
- Survoler un point pour voir les details (membre, technologie, disponibilite)
|
|
|
|
|
- Identifier visuellement les technologies avec peu de personnes (peu de points sur une ligne)
|
|
|
|
|
|
|
|
|
|
**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").
|
|
|
|
|
**Note** : Seules les technologies avec `ring: adopt` sont affichees dans la matrice, car ce sont les technologies fondamentales en production.
|
|
|
|
|
|
|
|
|
|
**Technologie** : ECharts (heatmap)
|
|
|
|
|
**Technologie** : ECharts (scatter plot)
|
|
|
|
|
|
|
|
|
|
### 3. Équipe de Genèse MVP
|
|
|
|
|
### 3. Equipe de Genese MVP
|
|
|
|
|
|
|
|
|
|
**Objectif** : Composer automatiquement une équipe minimale pour un MVP en 2 mois avec mobilisation quotidienne.
|
|
|
|
|
**Objectif** : Composer automatiquement une equipe 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
|
|
|
|
|
**Fonctionnalites** :
|
|
|
|
|
- **Selection automatique** : Algorithme qui selectionne les membres selon :
|
|
|
|
|
- Disponibilite >= 50%
|
|
|
|
|
- Couverture maximale des technologies critiques (technologies avec `ring: adopt`)
|
|
|
|
|
- Equilibre des competences
|
|
|
|
|
- **Statistiques** :
|
|
|
|
|
- Nombre de membres sélectionnés
|
|
|
|
|
- Pourcentage de technologies couvertes
|
|
|
|
|
- Technologies critiques non couvertes
|
|
|
|
|
- **Recommandations** :
|
|
|
|
|
- Technologies à former
|
|
|
|
|
- Compétences manquantes
|
|
|
|
|
- Risques identifiés
|
|
|
|
|
- Nombre de membres selectionnes
|
|
|
|
|
- Capacite totale (somme des disponibilites)
|
|
|
|
|
- Disponibilite moyenne
|
|
|
|
|
- Technologies couvertes / total
|
|
|
|
|
- **Cartes membres** :
|
|
|
|
|
- Nom et role
|
|
|
|
|
- Niveau de seniorite
|
|
|
|
|
- Disponibilite
|
|
|
|
|
- Technologies maitrisees
|
|
|
|
|
- **Alertes** :
|
|
|
|
|
- Technologies critiques non couvertes (en rouge)
|
|
|
|
|
- Impact business et skill gap pour chaque technologie manquante
|
|
|
|
|
|
|
|
|
|
**Technologie** : Algorithme JavaScript avec affichage HTML/CSS
|
|
|
|
|
**Technologie** : HTML/CSS genere dynamiquement par JavaScript
|
|
|
|
|
|
|
|
|
|
## Données
|
|
|
|
|
## Donnees
|
|
|
|
|
|
|
|
|
|
### Sources de données
|
|
|
|
|
### Sources de donnees
|
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
1. **Profils equipe** : `docs/data/team/*.md` (fichiers Markdown avec metadonnees YAML)
|
|
|
|
|
2. **Technologies** : `radar-business/2025-01-15/*.md` (blips avec metadonnees)
|
|
|
|
|
|
|
|
|
|
### Génération des données
|
|
|
|
|
### Generation des donnees
|
|
|
|
|
|
|
|
|
|
Le script `scripts/generate-team-visualization-data.js` :
|
|
|
|
|
|
|
|
|
|
1. **Lit les profils équipe** depuis `docs/data/team/*.md`
|
|
|
|
|
1. **Lit les profils equipe** 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
|
|
|
|
|
3. **Genere** `public/team-visualization-data.json` avec :
|
|
|
|
|
- `network` : Donnees reseau (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
|
|
|
|
|
- `genesisTeam` : Equipe de genese MVP avec statistiques
|
|
|
|
|
- `technologies` : Liste des technologies avec metadonnees
|
|
|
|
|
- `members` : Liste des membres avec competences
|
|
|
|
|
- `generatedAt` : Date de generation
|
|
|
|
|
|
|
|
|
|
### Exécuter la génération
|
|
|
|
|
### Executer la generation
|
|
|
|
|
|
|
|
|
|
```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.
|
|
|
|
|
**Important** : Regenerer les donnees apres chaque modification des profils equipe ou des technologies.
|
|
|
|
|
|
|
|
|
|
## Structure des profils équipe
|
|
|
|
|
## Structure des profils equipe
|
|
|
|
|
|
|
|
|
|
Les profils sont stockés dans `docs/data/team/*.md` avec le format suivant :
|
|
|
|
|
Les profils sont stockes dans `docs/data/team/*.md` avec le format suivant :
|
|
|
|
|
|
|
|
|
|
```markdown
|
|
|
|
|
---
|
|
|
|
|
name: "pseudo"
|
|
|
|
|
fullName: "Nom complet"
|
|
|
|
|
role: "Rôle"
|
|
|
|
|
role: "Role"
|
|
|
|
|
availability: 50
|
|
|
|
|
seniorityLevel: expert
|
|
|
|
|
yearsExperience: 8
|
|
|
|
|
@@ -152,192 +157,247 @@ skills:
|
|
|
|
|
lastUsed: "2024-11"
|
|
|
|
|
softSkills:
|
|
|
|
|
- "Autonomie"
|
|
|
|
|
- "Pédagogie"
|
|
|
|
|
- "Pedagogie"
|
|
|
|
|
projects:
|
|
|
|
|
- "Projet1"
|
|
|
|
|
- "Projet2"
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
Description du membre de l'équipe.
|
|
|
|
|
Description du membre de l'equipe.
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Métadonnées
|
|
|
|
|
### Metadonnees
|
|
|
|
|
|
|
|
|
|
- **name** : Pseudo unique (utilisé comme identifiant)
|
|
|
|
|
- **name** : Pseudo unique (utilise 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é
|
|
|
|
|
- **role** : Role dans l'equipe
|
|
|
|
|
- **availability** : Disponibilite en pourcentage (0-100)
|
|
|
|
|
- **seniorityLevel** : Niveau de seniorite (junior, intermediate, senior, expert)
|
|
|
|
|
- **yearsExperience** : Annees d'experience totales
|
|
|
|
|
- **joinDate** : Date d'arrivee (format YYYY-MM)
|
|
|
|
|
- **interests** : Centres d'interet
|
|
|
|
|
- **skills** : Liste des competences techniques avec niveau, annees et derniere utilisation
|
|
|
|
|
- **softSkills** : Competences comportementales
|
|
|
|
|
- **projects** : Projets sur lesquels le membre a travaille
|
|
|
|
|
|
|
|
|
|
## Processus de build
|
|
|
|
|
|
|
|
|
|
### Dans le Dockerfile
|
|
|
|
|
|
|
|
|
|
1. **Installation dépendances** : Installe `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react`
|
|
|
|
|
2. **Création de la page Next.js** : Génère `.techradar/src/pages/team.tsx` (vraie page React)
|
|
|
|
|
3. **Modification de Navigation** : Ajoute le lien "👥 Équipe" dans `.techradar/src/components/Navigation/Navigation.tsx` via script Python
|
|
|
|
|
4. **Copie des données** : Copie `public/team-visualization-data.json` vers `.techradar/public/`
|
|
|
|
|
5. **Build Next.js** : Génère les fichiers statiques dans `out/` avec la page React complète
|
|
|
|
|
1. **Copie des fichiers publics** : `public/team-block-script.js` et `public/team-visualization-data.json` vers `.techradar/public/`
|
|
|
|
|
2. **Creation de la page Next.js** : Genere `.techradar/src/pages/team.tsx` (page vide)
|
|
|
|
|
3. **Modification de _document.tsx** : Ajoute le chargement de `team-block-script.js` avec `strategy="beforeInteractive"`
|
|
|
|
|
4. **Modification de Navigation** : Ajoute le lien "Equipe" dans `Navigation.tsx` via script Python
|
|
|
|
|
5. **Build Next.js** : Genere les fichiers statiques dans `out/`
|
|
|
|
|
6. **Copie finale** : S'assure que les fichiers team sont dans `out/`
|
|
|
|
|
|
|
|
|
|
### Script Python pour Navigation.tsx
|
|
|
|
|
|
|
|
|
|
Le script `/tmp/add_team_link.py` dans le Dockerfile :
|
|
|
|
|
Le script `docker/add_team_link.py` :
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
1. **Supprime tous les liens Equipe existants** : Evite les doublons
|
|
|
|
|
2. **Ajoute un seul lien Equipe** : Apres le lien "Vue d'ensemble"
|
|
|
|
|
3. **Verifie le resultat** : 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.
|
|
|
|
|
### Script Python pour _document.tsx
|
|
|
|
|
|
|
|
|
|
## Technologies utilisées
|
|
|
|
|
Le script `docker/patch_document.py` :
|
|
|
|
|
|
|
|
|
|
### Bibliothèques JavaScript
|
|
|
|
|
1. **Ajoute l'import de Script** : Si pas deja present
|
|
|
|
|
2. **Ajoute le chargement du script** : `team-block-script.js` avec `strategy="beforeInteractive"`
|
|
|
|
|
|
|
|
|
|
- **Cytoscape.js** : Graphique réseau interactif (import dynamique)
|
|
|
|
|
- **Cytoscape CoSE-Bilkent** : Layout algorithm pour le graphique (import dynamique)
|
|
|
|
|
- **ECharts pour React** : Matrice de congestion (composant React)
|
|
|
|
|
- **React Hooks** : Gestion d'état (useState, useEffect, useRef)
|
|
|
|
|
- **Next.js dynamic import** : Chargement côté client seulement (évite erreurs SSR)
|
|
|
|
|
## Technologies utilisees
|
|
|
|
|
|
|
|
|
|
### Chargement des données
|
|
|
|
|
### Bibliotheques JavaScript (chargees depuis CDN)
|
|
|
|
|
|
|
|
|
|
Les données sont chargées depuis `/team-visualization-data.json` via `fetch()` au chargement de la page.
|
|
|
|
|
- **Cytoscape.js** : Graphique reseau interactif (v3.26.0)
|
|
|
|
|
- **ECharts** : Matrice de congestion scatter plot (v5.4.3)
|
|
|
|
|
|
|
|
|
|
### Layout du graphe
|
|
|
|
|
|
|
|
|
|
Le graphe reseau utilise le layout **CoSE** (Compound Spring Embedder) integre a Cytoscape.js. Ce layout :
|
|
|
|
|
- Organise les noeuds avec un algorithme force-directed
|
|
|
|
|
- Prend en compte les labels pour eviter les chevauchements
|
|
|
|
|
- S'anime lors du chargement initial
|
|
|
|
|
|
|
|
|
|
### Chargement des donnees
|
|
|
|
|
|
|
|
|
|
Les donnees sont chargees depuis `/team-visualization-data.json` via `fetch()` au chargement de la page.
|
|
|
|
|
|
|
|
|
|
## Fonctionnement du script
|
|
|
|
|
|
|
|
|
|
Le script `team-block-script.js` fonctionne ainsi :
|
|
|
|
|
|
|
|
|
|
1. **Detection de la route** : Verifie si le chemin commence par `/team`
|
|
|
|
|
2. **Remplacement du DOM** : Injecte le HTML de la page (header, onglets, containers)
|
|
|
|
|
3. **Injection du CSS** : Ajoute les styles pour la page
|
|
|
|
|
4. **Chargement des bibliotheques** : Charge Cytoscape et ECharts depuis CDN
|
|
|
|
|
5. **Chargement des donnees** : Fetch `/team-visualization-data.json`
|
|
|
|
|
6. **Initialisation des visualisations** : Cree le graphe, la matrice et l'equipe de genese
|
|
|
|
|
7. **Gestion des onglets** : Permet de basculer entre les trois visualisations
|
|
|
|
|
|
|
|
|
|
## Utilisation
|
|
|
|
|
|
|
|
|
|
### Visualiser les compétences
|
|
|
|
|
### Visualiser les competences
|
|
|
|
|
|
|
|
|
|
1. Ouvrir l'onglet **"Graphe Réseau"**
|
|
|
|
|
1. Ouvrir l'onglet **"Graphe Reseau"**
|
|
|
|
|
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)
|
|
|
|
|
3. Identifier les technologies avec beaucoup de personnes (gros noeuds)
|
|
|
|
|
4. Identifier les technologies avec peu de personnes (petits noeuds = 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
|
|
|
|
|
2. Reperer les lignes (technologies) avec peu de points verts
|
|
|
|
|
3. Ces technologies ont une faible couverture d'equipe
|
|
|
|
|
4. Actions recommandees :
|
|
|
|
|
- Former l'equipe
|
|
|
|
|
- Recruter
|
|
|
|
|
- Documenter
|
|
|
|
|
|
|
|
|
|
### Composer une Équipe pour un Projet
|
|
|
|
|
### Composer une Equipe pour un Projet
|
|
|
|
|
|
|
|
|
|
1. Ouvrir l'onglet **"Équipe Genèse MVP"**
|
|
|
|
|
2. L'équipe est automatiquement sélectionnée selon :
|
|
|
|
|
- Disponibilité >= 50%
|
|
|
|
|
1. Ouvrir l'onglet **"Equipe Genese MVP"**
|
|
|
|
|
2. L'equipe est automatiquement selectionnee selon :
|
|
|
|
|
- Disponibilite >= 50%
|
|
|
|
|
- Couverture maximale des technologies
|
|
|
|
|
3. Consulter les statistiques :
|
|
|
|
|
- Technologies couvertes
|
|
|
|
|
- Technologies manquantes
|
|
|
|
|
- Recommandations
|
|
|
|
|
3. Consulter les statistiques et les cartes membres
|
|
|
|
|
4. Verifier les technologies non couvertes (en rouge)
|
|
|
|
|
|
|
|
|
|
## Personnalisation
|
|
|
|
|
|
|
|
|
|
### Modifier le seuil de disponibilité
|
|
|
|
|
### Modifier le seuil de disponibilite
|
|
|
|
|
|
|
|
|
|
Pour l'équipe de genèse MVP, le seuil est fixé à **50%**. Pour le modifier :
|
|
|
|
|
Pour l'equipe de genese MVP, le seuil est fixe a **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`
|
|
|
|
|
3. Regenerer les donnees : `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()`.
|
|
|
|
|
**Note** : Les technologies critiques utilisees pour la selection sont celles avec `ring: adopt`. Pour modifier ce critere, changer le filtre `t.ring === 'adopt'` dans `generateGenesisTeam()`.
|
|
|
|
|
|
|
|
|
|
### Ajouter de nouvelles visualisations
|
|
|
|
|
### Modifier le layout du graphe
|
|
|
|
|
|
|
|
|
|
1. Modifier `.techradar/src/pages/team.tsx` (généré par le Dockerfile)
|
|
|
|
|
2. Ajouter un nouvel état dans `useState` pour l'onglet
|
|
|
|
|
3. Ajouter un bouton dans la section des onglets
|
|
|
|
|
4. Implémenter la logique React pour charger et afficher les données
|
|
|
|
|
5. Utiliser des refs React pour les containers des nouvelles visualisations
|
|
|
|
|
Le layout est configure dans `public/team-block-script.js` dans la fonction `initNetwork()` :
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
layout: {
|
|
|
|
|
name: 'cose',
|
|
|
|
|
nodeDimensionsIncludeLabels: true,
|
|
|
|
|
idealEdgeLength: 100,
|
|
|
|
|
nodeRepulsion: 4500,
|
|
|
|
|
gravity: 0.25,
|
|
|
|
|
numIter: 1000,
|
|
|
|
|
animate: true,
|
|
|
|
|
animationDuration: 800
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Parametres disponibles :
|
|
|
|
|
- `nodeRepulsion` : Force de repulsion entre noeuds (plus eleve = plus espaces)
|
|
|
|
|
- `gravity` : Force de gravite vers le centre
|
|
|
|
|
- `numIter` : Nombre d'iterations de l'algorithme
|
|
|
|
|
- `animationDuration` : Duree de l'animation en ms
|
|
|
|
|
|
|
|
|
|
## Maintenance
|
|
|
|
|
|
|
|
|
|
### Mettre à jour les profils équipe
|
|
|
|
|
### Mettre a jour les profils equipe
|
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
2. Regenerer les donnees : `node scripts/generate-team-visualization-data.js`
|
|
|
|
|
3. Commiter les deux fichiers (profils + donnees JSON)
|
|
|
|
|
4. Rebuild Docker pour deployer
|
|
|
|
|
|
|
|
|
|
### 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
|
|
|
|
|
1. Creer un fichier `docs/data/team/pseudo.md`
|
|
|
|
|
2. Remplir toutes les metadonnees (voir format ci-dessus)
|
|
|
|
|
3. Regenerer les donnees
|
|
|
|
|
4. Verifier que le membre apparait dans les visualisations
|
|
|
|
|
|
|
|
|
|
### Mettre à jour les compétences
|
|
|
|
|
### Mettre a jour les competences
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
1. Modifier la section `skills` dans le profil equipe
|
|
|
|
|
2. Regenerer les donnees
|
|
|
|
|
3. Verifier que les connexions sont mises a jour dans le graphe
|
|
|
|
|
|
|
|
|
|
## Troubleshooting
|
|
|
|
|
|
|
|
|
|
### Le lien "👥 Équipe" n'apparaît pas dans le header
|
|
|
|
|
### Le lien "Equipe" n'apparait pas dans le header
|
|
|
|
|
|
|
|
|
|
**Causes possibles** :
|
|
|
|
|
- Le script Python n'a pas été exécuté
|
|
|
|
|
- Le fichier Navigation.tsx n'a pas été trouvé
|
|
|
|
|
- Le script Python n'a pas ete execute
|
|
|
|
|
- Le fichier Navigation.tsx n'a pas ete trouve
|
|
|
|
|
- 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
|
|
|
|
|
1. Verifier les logs Docker lors du build
|
|
|
|
|
2. Verifier que le fichier `.techradar/src/components/Navigation/Navigation.tsx` existe
|
|
|
|
|
3. Rebuild avec `--no-cache` pour forcer l'execution du script
|
|
|
|
|
|
|
|
|
|
### La page `/team` retourne 404
|
|
|
|
|
### La page `/team` affiche le radar au lieu des visualisations
|
|
|
|
|
|
|
|
|
|
**Causes possibles** :
|
|
|
|
|
- Le fichier `team.html` n'est pas dans `out/`
|
|
|
|
|
- La page Next.js `team.tsx` n'a pas été créée
|
|
|
|
|
- Le script `team-block-script.js` n'est pas charge
|
|
|
|
|
- Le script n'est pas modifie dans `_document.tsx`
|
|
|
|
|
|
|
|
|
|
**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/`
|
|
|
|
|
1. Verifier la console du navigateur (F12) pour les erreurs
|
|
|
|
|
2. Verifier que le script `patch_document.py` a ete execute lors du build
|
|
|
|
|
3. Rebuild avec `--no-cache`
|
|
|
|
|
|
|
|
|
|
### Les visualisations sont vides
|
|
|
|
|
### Les visualisations sont vides ou affichent une erreur
|
|
|
|
|
|
|
|
|
|
**Causes possibles** :
|
|
|
|
|
- Le fichier `team-visualization-data.json` n'a pas été généré
|
|
|
|
|
- Le fichier n'est pas accessible depuis `/team.html`
|
|
|
|
|
- Le fichier `team-visualization-data.json` n'a pas ete genere
|
|
|
|
|
- Le fichier n'est pas accessible depuis le navigateur
|
|
|
|
|
- Erreur dans les donnees
|
|
|
|
|
|
|
|
|
|
**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
|
|
|
|
|
1. Generer les donnees : `node scripts/generate-team-visualization-data.js`
|
|
|
|
|
2. Verifier que le fichier existe dans `public/team-visualization-data.json`
|
|
|
|
|
3. Verifier la console du navigateur pour les erreurs JavaScript
|
|
|
|
|
4. Tester l'acces direct : `http://localhost:3006/team-visualization-data.json`
|
|
|
|
|
|
|
|
|
|
### Les données ne sont pas à jour
|
|
|
|
|
### Le graphe ne s'affiche pas
|
|
|
|
|
|
|
|
|
|
**Solution** : Régénérer les données après chaque modification :
|
|
|
|
|
**Causes possibles** :
|
|
|
|
|
- Cytoscape.js n'a pas pu etre charge depuis CDN
|
|
|
|
|
- Erreur dans la configuration du layout
|
|
|
|
|
|
|
|
|
|
**Solutions** :
|
|
|
|
|
1. Verifier la connexion internet (CDN)
|
|
|
|
|
2. Verifier la console pour les erreurs de chargement
|
|
|
|
|
3. Verifier que le layout `cose` est bien utilise (pas `cose-bilkent`)
|
|
|
|
|
|
|
|
|
|
### Les donnees ne sont pas a jour
|
|
|
|
|
|
|
|
|
|
**Solution** : Regenerer les donnees apres chaque modification :
|
|
|
|
|
```bash
|
|
|
|
|
node scripts/generate-team-visualization-data.js
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Fichiers associés
|
|
|
|
|
Puis rebuild Docker :
|
|
|
|
|
```bash
|
|
|
|
|
docker compose -f docker-compose.business.yml build --no-cache
|
|
|
|
|
docker compose -f docker-compose.business.yml up -d
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
- **Page React** : `.techradar/src/pages/team.tsx` (vraie page React avec hooks et états)
|
|
|
|
|
- **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)
|
|
|
|
|
- **Navigation modifiée** : `.techradar/src/components/Navigation/Navigation.tsx` (modifiée par script Python)
|
|
|
|
|
- **Bibliothèques** : `cytoscape`, `cytoscape-cose-bilkent`, `echarts-for-react` (installées automatiquement)
|
|
|
|
|
## Fichiers associes
|
|
|
|
|
|
|
|
|
|
- **Script principal** : `public/team-block-script.js` (injection et visualisations)
|
|
|
|
|
- **Page Next.js** : `docker/team-page.tsx` (page vide copiee vers `.techradar/src/pages/team.tsx`)
|
|
|
|
|
- **Donnees JSON** : `public/team-visualization-data.json` (genere)
|
|
|
|
|
- **Script de generation** : `scripts/generate-team-visualization-data.js`
|
|
|
|
|
- **Profils equipe** : `docs/data/team/*.md` (fichiers Markdown avec metadonnees YAML)
|
|
|
|
|
- **Technologies** : `radar-business/2025-01-15/*.md` (blips avec metadonnees)
|
|
|
|
|
- **Script Navigation** : `docker/add_team_link.py` (ajoute le lien dans Navigation.tsx)
|
|
|
|
|
- **Script Document** : `docker/patch_document.py` (ajoute le chargement du script)
|
|
|
|
|
|
|
|
|
|
## Ressources
|
|
|
|
|
|
|
|
|
|
- [Guide de développement](./developpement.md)
|
|
|
|
|
- [Guide de déploiement](./deploiement.md)
|
|
|
|
|
- [Guide de dépannage](./troubleshooting.md)
|
|
|
|
|
- [Guide de developpement](./developpement.md)
|
|
|
|
|
- [Guide de deploiement](./deploiement.md)
|
|
|
|
|
- [Guide de depannage](./troubleshooting.md)
|
|
|
|
|
- Documentation Cytoscape.js : https://js.cytoscape.org/
|
|
|
|
|
- Documentation ECharts : https://echarts.apache.org/
|
|
|
|
|
|
syoul