feat: page de visualisation équipe/technologies avec graphe réseau et équipe de genèse MVP
- Création du script generate-team-visualization-data.js pour générer les données JSON
- Page /team.html avec 3 visualisations :
* Graphe réseau (Cytoscape.js) : technologies ↔ membres
* Matrice de congestion : technologies core et disponibilité
* Équipe de genèse MVP : sélection automatique pour MVP 2 mois
- Ajout du lien '👥 Équipe' dans le header du radar
- Données JSON générées pour visualisations interactives
- Identification des congestions et technologies non couvertes
This commit is contained in:
syoul
@@ -916,6 +916,19 @@ Interface de pilotage pour les responsables sécurité des PME.
|
|||||||
container = linkContainer;
|
container = linkContainer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Ajouter le lien vers la page Équipe
|
||||||
|
if (!document.getElementById('link-team')) {
|
||||||
|
const teamLink = document.createElement('a');
|
||||||
|
teamLink.id = 'link-team';
|
||||||
|
teamLink.className = 'custom-nav-link';
|
||||||
|
teamLink.href = '/team.html';
|
||||||
|
teamLink.textContent = '👥 Équipe';
|
||||||
|
teamLink.style.cssText = 'color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer; font-size: 14px; padding: 5px 8px; border-radius: 4px; transition: background 0.2s;';
|
||||||
|
teamLink.addEventListener('mouseenter', () => teamLink.style.background = 'rgba(46, 204, 113, 0.1)');
|
||||||
|
teamLink.addEventListener('mouseleave', () => teamLink.style.background = 'transparent');
|
||||||
|
container.appendChild(teamLink);
|
||||||
|
}
|
||||||
|
|
||||||
// Ajouter les liens
|
// Ajouter les liens
|
||||||
Object.keys(pageTitles).forEach(key => {
|
Object.keys(pageTitles).forEach(key => {
|
||||||
if (document.getElementById(`link-${key}`)) return;
|
if (document.getElementById(`link-${key}`)) return;
|
||||||
|
|||||||
1749
public/team-visualization-data.json
Normal file
1749
public/team-visualization-data.json
Normal file
File diff suppressed because it is too large
Load Diff
584
public/team.html
Normal file
584
public/team.html
Normal file
@@ -0,0 +1,584 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Équipe & Technologies - Laplank</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cose-bilkent@4.1.0/cytoscape-cose-bilkent.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
background: #1a4d3a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(26, 77, 58, 0.5);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #4ade80;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button {
|
||||||
|
padding: 12px 24px;
|
||||||
|
background: rgba(74, 222, 128, 0.2);
|
||||||
|
border: 2px solid #4ade80;
|
||||||
|
color: #4ade80;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button:hover {
|
||||||
|
background: rgba(74, 222, 128, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-button.active {
|
||||||
|
background: #4ade80;
|
||||||
|
color: #1a4d3a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: none;
|
||||||
|
background: rgba(26, 77, 58, 0.3);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#network-graph {
|
||||||
|
width: 100%;
|
||||||
|
height: 700px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
#congestion-matrix {
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#genesis-team {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.genesis-stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: rgba(74, 222, 128, 0.1);
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #a0a0a0;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card {
|
||||||
|
background: rgba(26, 77, 58, 0.5);
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-availability {
|
||||||
|
background: rgba(74, 222, 128, 0.2);
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tech-tag {
|
||||||
|
background: rgba(74, 222, 128, 0.2);
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.4);
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-box {
|
||||||
|
background: rgba(255, 68, 68, 0.2);
|
||||||
|
border: 1px solid rgba(255, 68, 68, 0.5);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-title {
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uncovered-tech {
|
||||||
|
background: rgba(255, 68, 68, 0.1);
|
||||||
|
border-left: 3px solid #ff6b6b;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 8px 0;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-color {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<h1>👥 Équipe & Technologies</h1>
|
||||||
|
<p>Visualisation des compétences et identification de l'équipe de genèse MVP</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="tabs">
|
||||||
|
<button class="tab-button active" onclick="showTab('network')">Graphe Réseau</button>
|
||||||
|
<button class="tab-button" onclick="showTab('congestion')">Matrice Congestion</button>
|
||||||
|
<button class="tab-button" onclick="showTab('genesis')">Équipe Genèse MVP</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="network-tab" class="tab-content active">
|
||||||
|
<div class="legend">
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background: #ff4444;"></div>
|
||||||
|
<span>Core (Critique)</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background: #ff8800;"></div>
|
||||||
|
<span>Strategic</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background: #4488ff;"></div>
|
||||||
|
<span>Support</span>
|
||||||
|
</div>
|
||||||
|
<div class="legend-item">
|
||||||
|
<div class="legend-color" style="background: #88ff88;"></div>
|
||||||
|
<span>Membres</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="network-graph"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="congestion-tab" class="tab-content">
|
||||||
|
<h2 style="margin-bottom: 20px;">Matrice de Congestion - Technologies Core</h2>
|
||||||
|
<div id="congestion-matrix"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="genesis-tab" class="tab-content">
|
||||||
|
<div id="genesis-team">
|
||||||
|
<div class="loading">Chargement des données...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let data = null;
|
||||||
|
let networkCy = null;
|
||||||
|
let congestionChart = null;
|
||||||
|
|
||||||
|
// Charger les données
|
||||||
|
async function loadData() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/team-visualization-data.json');
|
||||||
|
data = await response.json();
|
||||||
|
initVisualizations();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du chargement des données:', error);
|
||||||
|
document.getElementById('genesis-team').innerHTML =
|
||||||
|
'<div class="warning-box">Erreur lors du chargement des données. Assurez-vous que le script generate-team-visualization-data.js a été exécuté.</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialiser les visualisations
|
||||||
|
function initVisualizations() {
|
||||||
|
initNetworkGraph();
|
||||||
|
initCongestionMatrix();
|
||||||
|
initGenesisTeam();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Graphe réseau
|
||||||
|
function initNetworkGraph() {
|
||||||
|
if (!data || !data.network) return;
|
||||||
|
|
||||||
|
networkCy = cytoscape({
|
||||||
|
container: document.getElementById('network-graph'),
|
||||||
|
elements: data.network,
|
||||||
|
style: [
|
||||||
|
{
|
||||||
|
selector: 'node[type="technology"]',
|
||||||
|
style: {
|
||||||
|
'background-color': 'data(color)',
|
||||||
|
'label': 'data(label)',
|
||||||
|
'width': function(ele) {
|
||||||
|
const coverage = ele.data('coverage') || 0;
|
||||||
|
return Math.max(30, 30 + (coverage * 8));
|
||||||
|
},
|
||||||
|
'height': function(ele) {
|
||||||
|
const coverage = ele.data('coverage') || 0;
|
||||||
|
return Math.max(30, 30 + (coverage * 8));
|
||||||
|
},
|
||||||
|
'color': '#fff',
|
||||||
|
'font-size': '12px',
|
||||||
|
'text-outline-width': 2,
|
||||||
|
'text-outline-color': '#000',
|
||||||
|
'text-wrap': 'wrap',
|
||||||
|
'text-max-width': 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: 'node[type="member"]',
|
||||||
|
style: {
|
||||||
|
'background-color': '#88ff88',
|
||||||
|
'label': 'data(label)',
|
||||||
|
'width': function(ele) {
|
||||||
|
const availability = ele.data('availability') || 0;
|
||||||
|
return Math.max(25, 25 + (availability / 3));
|
||||||
|
},
|
||||||
|
'height': function(ele) {
|
||||||
|
const availability = ele.data('availability') || 0;
|
||||||
|
return Math.max(25, 25 + (availability / 3));
|
||||||
|
},
|
||||||
|
'color': '#1a4d3a',
|
||||||
|
'font-size': '11px',
|
||||||
|
'font-weight': 'bold',
|
||||||
|
'shape': 'ellipse'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
selector: 'edge',
|
||||||
|
style: {
|
||||||
|
'width': function(ele) {
|
||||||
|
return 1 + (ele.data('weight') || 0.5);
|
||||||
|
},
|
||||||
|
'line-color': '#999',
|
||||||
|
'opacity': 0.6,
|
||||||
|
'curve-style': 'bezier'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
layout: {
|
||||||
|
name: 'cose-bilkent',
|
||||||
|
nodeDimensionsIncludeLabels: true,
|
||||||
|
idealEdgeLength: 100,
|
||||||
|
nodeRepulsion: 4500,
|
||||||
|
nestingFactor: 0.1,
|
||||||
|
gravity: 0.25,
|
||||||
|
numIter: 2500,
|
||||||
|
tile: true,
|
||||||
|
animate: true,
|
||||||
|
animationDuration: 1000
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tooltip sur survol
|
||||||
|
networkCy.on('mouseover', 'node', function(evt) {
|
||||||
|
const node = evt.target;
|
||||||
|
const data = node.data();
|
||||||
|
let tooltip = '';
|
||||||
|
|
||||||
|
if (data.type === 'technology') {
|
||||||
|
tooltip = `${data.label}\n` +
|
||||||
|
`Ring: ${data.ring}\n` +
|
||||||
|
`Couverture: ${data.coverage} personne(s)\n` +
|
||||||
|
`Impact: ${data.businessImpact}\n` +
|
||||||
|
`Gap: ${data.skillGap}`;
|
||||||
|
} else {
|
||||||
|
tooltip = `${data.label}\n` +
|
||||||
|
`Disponibilité: ${data.availability}%\n` +
|
||||||
|
`Niveau: ${data.seniority}\n` +
|
||||||
|
(data.role ? `Rôle: ${data.role}` : '');
|
||||||
|
}
|
||||||
|
|
||||||
|
node.tooltip = tooltip;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Matrice de congestion
|
||||||
|
function initCongestionMatrix() {
|
||||||
|
if (!data || !data.congestionMatrix) return;
|
||||||
|
|
||||||
|
const chart = echarts.init(document.getElementById('congestion-matrix'));
|
||||||
|
congestionChart = chart;
|
||||||
|
|
||||||
|
const techs = data.congestionMatrix.map(r => r.technology);
|
||||||
|
const members = data.congestionMatrix[0]?.members.map(m => m.fullName || m.member) || [];
|
||||||
|
|
||||||
|
const heatmapData = [];
|
||||||
|
const scatterData = [];
|
||||||
|
|
||||||
|
data.congestionMatrix.forEach((row, i) => {
|
||||||
|
row.members.forEach((member, j) => {
|
||||||
|
if (member.hasSkill) {
|
||||||
|
heatmapData.push([j, i, member.availability]);
|
||||||
|
scatterData.push({
|
||||||
|
value: [j, i],
|
||||||
|
member: member.fullName || member.member,
|
||||||
|
tech: row.technology,
|
||||||
|
availability: member.availability
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: 'Disponibilité des membres sur les technologies Core',
|
||||||
|
left: 'center',
|
||||||
|
textStyle: { color: '#e0e0e0' }
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function(params) {
|
||||||
|
if (params.data && params.data.member) {
|
||||||
|
return `${params.data.member}<br/>` +
|
||||||
|
`Technologie: ${params.data.tech}<br/>` +
|
||||||
|
`Disponibilité: ${params.data.availability}%`;
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
height: '60%',
|
||||||
|
top: '15%'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: members,
|
||||||
|
axisLabel: {
|
||||||
|
rotate: 45,
|
||||||
|
color: '#e0e0e0',
|
||||||
|
fontSize: 11
|
||||||
|
},
|
||||||
|
axisLine: { lineStyle: { color: '#4ade80' } }
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: techs,
|
||||||
|
axisLabel: { color: '#e0e0e0' },
|
||||||
|
axisLine: { lineStyle: { color: '#4ade80' } }
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
calculable: true,
|
||||||
|
orient: 'horizontal',
|
||||||
|
left: 'center',
|
||||||
|
bottom: '5%',
|
||||||
|
inRange: {
|
||||||
|
color: ['#1a4d3a', '#4ade80', '#86efac']
|
||||||
|
},
|
||||||
|
textStyle: { color: '#e0e0e0' }
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'Disponibilité',
|
||||||
|
type: 'scatter',
|
||||||
|
data: scatterData,
|
||||||
|
symbolSize: function(data) {
|
||||||
|
return 15 + (data[2] || 0) / 2;
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#4ade80',
|
||||||
|
borderColor: '#1a4d3a',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: function(params) {
|
||||||
|
return params.data.availability + '%';
|
||||||
|
},
|
||||||
|
color: '#1a4d3a',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
chart.setOption(option);
|
||||||
|
|
||||||
|
// Redimensionner au resize
|
||||||
|
window.addEventListener('resize', () => chart.resize());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Équipe de genèse
|
||||||
|
function initGenesisTeam() {
|
||||||
|
if (!data || !data.genesisTeam) return;
|
||||||
|
|
||||||
|
const genesis = data.genesisTeam;
|
||||||
|
const html = `
|
||||||
|
<div class="genesis-stats">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${genesis.totalMembers}</div>
|
||||||
|
<div class="stat-label">Membres sélectionnés</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${genesis.totalCapacity}%</div>
|
||||||
|
<div class="stat-label">Capacité totale</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${genesis.averageAvailability}%</div>
|
||||||
|
<div class="stat-label">Disponibilité moyenne</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${genesis.coveredTechnologies}/${genesis.totalCoreTechnologies}</div>
|
||||||
|
<div class="stat-label">Technologies couvertes</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 style="margin-bottom: 20px; color: #4ade80;">Membres de l'équipe de genèse</h2>
|
||||||
|
|
||||||
|
${genesis.team.length > 0 ? genesis.team.map(member => `
|
||||||
|
<div class="member-card">
|
||||||
|
<div class="member-header">
|
||||||
|
<div>
|
||||||
|
<div class="member-name">${member.fullName || member.member}</div>
|
||||||
|
<div style="font-size: 12px; color: #a0a0a0; margin-top: 4px;">
|
||||||
|
${member.role || ''} • ${member.seniority} • ${member.coverage} technologie(s)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-availability">${member.availability}% dispo</div>
|
||||||
|
</div>
|
||||||
|
<div class="tech-list">
|
||||||
|
${member.technologies.map(tech => `
|
||||||
|
<span class="tech-tag">${tech.title}</span>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('') : '<p style="color: #a0a0a0;">Aucun membre ne répond aux critères (disponibilité >= 50%).</p>'}
|
||||||
|
|
||||||
|
${genesis.uncoveredTechnologies.length > 0 ? `
|
||||||
|
<div class="warning-box">
|
||||||
|
<div class="warning-title">⚠️ Technologies Core non couvertes</div>
|
||||||
|
<p style="margin-bottom: 10px;">Ces technologies critiques ne sont pas maîtrisées par l'équipe de genèse :</p>
|
||||||
|
${genesis.uncoveredTechnologies.map(tech => `
|
||||||
|
<div class="uncovered-tech">
|
||||||
|
<strong>${tech.title}</strong>
|
||||||
|
<div style="font-size: 12px; color: #a0a0a0; margin-top: 4px;">
|
||||||
|
Impact: ${tech.businessImpact} • Gap: ${tech.skillGap} • Couverture actuelle: ${tech.teamCoverage} personne(s)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.getElementById('genesis-team').innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigation par onglets
|
||||||
|
function showTab(tabName) {
|
||||||
|
// Désactiver tous les onglets
|
||||||
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||||
|
tab.classList.remove('active');
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.tab-button').forEach(btn => {
|
||||||
|
btn.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Activer l'onglet sélectionné
|
||||||
|
document.getElementById(`${tabName}-tab`).classList.add('active');
|
||||||
|
event.target.classList.add('active');
|
||||||
|
|
||||||
|
// Redimensionner les graphiques si nécessaire
|
||||||
|
if (tabName === 'congestion' && congestionChart) {
|
||||||
|
setTimeout(() => congestionChart.resize(), 100);
|
||||||
|
}
|
||||||
|
if (tabName === 'network' && networkCy) {
|
||||||
|
setTimeout(() => networkCy.resize(), 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Charger au démarrage
|
||||||
|
loadData();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
376
scripts/generate-team-visualization-data.js
Executable file
376
scripts/generate-team-visualization-data.js
Executable file
@@ -0,0 +1,376 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Script pour générer les données de visualisation équipe/technologies
|
||||||
|
* Génère un fichier JSON pour les visualisations Cytoscape.js et ECharts
|
||||||
|
*/
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// Extraire une valeur YAML
|
||||||
|
function extractYaml(yamlContent, key) {
|
||||||
|
const regex = new RegExp(`^${key}:\\s*["']?([^"'\n]+)["']?`, 'm');
|
||||||
|
const match = yamlContent.match(regex);
|
||||||
|
return match ? match[1].trim() : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Extraire les compétences depuis le YAML
|
||||||
|
function extractSkills(yamlContent) {
|
||||||
|
const skills = [];
|
||||||
|
const lines = yamlContent.split('\n');
|
||||||
|
let inSkillsSection = false;
|
||||||
|
|
||||||
|
for (let i = 0; i < lines.length; i++) {
|
||||||
|
const line = lines[i];
|
||||||
|
|
||||||
|
if (line.match(/^skills:\s*$/)) {
|
||||||
|
inSkillsSection = true;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inSkillsSection && line.match(/^\w+:/) && !line.match(/^\s+/)) {
|
||||||
|
inSkillsSection = false;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inSkillsSection) {
|
||||||
|
const nameMatch = line.match(/^\s+-\s+name:\s*["']?([^"'\n]+)["']?/);
|
||||||
|
if (nameMatch) {
|
||||||
|
skills.push(nameMatch[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return skills;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Charger les technologies depuis les blips
|
||||||
|
function loadTechnologies() {
|
||||||
|
const techDir = path.join(__dirname, '../radar-business/2025-01-15');
|
||||||
|
const technologies = [];
|
||||||
|
|
||||||
|
if (!fs.existsSync(techDir)) {
|
||||||
|
console.warn(`⚠️ Dossier ${techDir} introuvable`);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const files = fs.readdirSync(techDir).filter(f => f.endsWith('.md'));
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
const filePath = path.join(techDir, file);
|
||||||
|
const content = fs.readFileSync(filePath, 'utf-8');
|
||||||
|
const yamlMatch = content.match(/^---\n([\s\S]*?)\n---/);
|
||||||
|
if (!yamlMatch) continue;
|
||||||
|
|
||||||
|
const yaml = yamlMatch[1];
|
||||||
|
|
||||||
|
// Extraire les membres depuis la section "Compétences"
|
||||||
|
let members = [];
|
||||||
|
const compSection = content.match(/## Compétences\s*\n([\s\S]*?)(?=\n## |$)/);
|
||||||
|
if (compSection) {
|
||||||
|
const membersMatch = compSection[1].match(/Membres de l'équipe\s*:\s*([^\n]+)/);
|
||||||
|
if (membersMatch) {
|
||||||
|
members = membersMatch[1].split(',').map(m => m.trim()).filter(m => m && m !== 'Aucun');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const tech = {
|
||||||
|
id: file.replace('.md', ''),
|
||||||
|
title: extractYaml(yaml, 'title') || file.replace('.md', ''),
|
||||||
|
ring: extractYaml(yaml, 'ring') || 'support',
|
||||||
|
quadrant: extractYaml(yaml, 'quadrant') || 'technologies-commodite',
|
||||||
|
businessImpact: extractYaml(yaml, 'businessImpact') || 'medium',
|
||||||
|
teamCoverage: parseInt(extractYaml(yaml, 'teamCoverage') || '0'),
|
||||||
|
skillGap: extractYaml(yaml, 'skillGap') || 'medium',
|
||||||
|
competencyLevel: extractYaml(yaml, 'competencyLevel') || 'beginner',
|
||||||
|
members: members
|
||||||
|
};
|
||||||
|
|
||||||
|
technologies.push(tech);
|
||||||
|
}
|
||||||
|
|
||||||
|
return technologies;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Charger les membres de l'équipe
|
||||||
|
function loadTeamMembers() {
|
||||||
|
const teamDir = path.join(__dirname, '../docs/data/team');
|
||||||
|
const members = [];
|
||||||
|
|
||||||
|
if (!fs.existsSync(teamDir)) {
|
||||||
|
console.warn(`⚠️ Dossier ${teamDir} introuvable`);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const files = fs.readdirSync(teamDir).filter(f => f.endsWith('.md'));
|
||||||
|
|
||||||
|
for (const file of files) {
|
||||||
|
const filePath = path.join(teamDir, file);
|
||||||
|
const content = fs.readFileSync(filePath, 'utf-8');
|
||||||
|
const yamlMatch = content.match(/^---\n([\s\S]*?)\n---/);
|
||||||
|
if (!yamlMatch) continue;
|
||||||
|
|
||||||
|
const yaml = yamlMatch[1];
|
||||||
|
const member = {
|
||||||
|
id: extractYaml(yaml, 'name') || file.replace('.md', ''),
|
||||||
|
fullName: extractYaml(yaml, 'fullName') || extractYaml(yaml, 'name'),
|
||||||
|
role: extractYaml(yaml, 'role') || '',
|
||||||
|
availability: parseInt(extractYaml(yaml, 'availability') || '0'),
|
||||||
|
seniorityLevel: extractYaml(yaml, 'seniorityLevel') || 'beginner',
|
||||||
|
yearsExperience: parseInt(extractYaml(yaml, 'yearsExperience') || '0'),
|
||||||
|
skills: extractSkills(yaml)
|
||||||
|
};
|
||||||
|
|
||||||
|
members.push(member);
|
||||||
|
}
|
||||||
|
|
||||||
|
return members;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Générer les données pour le graphe réseau (Cytoscape.js)
|
||||||
|
function generateNetworkData(technologies, members) {
|
||||||
|
const nodes = [];
|
||||||
|
const edges = [];
|
||||||
|
|
||||||
|
// Nœuds technologies
|
||||||
|
technologies.forEach(tech => {
|
||||||
|
const ringColor = {
|
||||||
|
'core': '#ff4444',
|
||||||
|
'strategic': '#ff8800',
|
||||||
|
'support': '#4488ff',
|
||||||
|
'legacy': '#888888'
|
||||||
|
}[tech.ring] || '#999999';
|
||||||
|
|
||||||
|
nodes.push({
|
||||||
|
data: {
|
||||||
|
id: `tech-${tech.id}`,
|
||||||
|
label: tech.title,
|
||||||
|
type: 'technology',
|
||||||
|
ring: tech.ring,
|
||||||
|
quadrant: tech.quadrant,
|
||||||
|
coverage: tech.teamCoverage,
|
||||||
|
businessImpact: tech.businessImpact,
|
||||||
|
skillGap: tech.skillGap,
|
||||||
|
color: ringColor
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Nœuds membres
|
||||||
|
members.forEach(member => {
|
||||||
|
nodes.push({
|
||||||
|
data: {
|
||||||
|
id: `member-${member.id}`,
|
||||||
|
label: member.fullName || member.id,
|
||||||
|
type: 'member',
|
||||||
|
availability: member.availability,
|
||||||
|
seniority: member.seniorityLevel,
|
||||||
|
role: member.role
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Liens technologies ↔ membres
|
||||||
|
technologies.forEach(tech => {
|
||||||
|
tech.members.forEach(memberName => {
|
||||||
|
const member = members.find(m => {
|
||||||
|
const mId = m.id.toLowerCase();
|
||||||
|
const mFullName = (m.fullName || '').toLowerCase();
|
||||||
|
const memberNameLower = memberName.toLowerCase();
|
||||||
|
return mId === memberNameLower || mFullName === memberNameLower;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (member) {
|
||||||
|
// Vérifier si le membre a vraiment cette compétence
|
||||||
|
const hasSkill = member.skills.some(skill => {
|
||||||
|
const skillLower = skill.toLowerCase();
|
||||||
|
const techTitleLower = tech.title.toLowerCase();
|
||||||
|
return skillLower.includes(techTitleLower) ||
|
||||||
|
techTitleLower.includes(skillLower) ||
|
||||||
|
tech.title.toLowerCase().split(/[\s\/-]/).some(word =>
|
||||||
|
skillLower.includes(word) || word.length > 3 && skillLower.includes(word)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (hasSkill || tech.members.includes(member.id) || tech.members.includes(member.fullName)) {
|
||||||
|
edges.push({
|
||||||
|
data: {
|
||||||
|
id: `edge-${tech.id}-${member.id}`,
|
||||||
|
source: `tech-${tech.id}`,
|
||||||
|
target: `member-${member.id}`,
|
||||||
|
weight: hasSkill ? 1 : 0.5
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return { nodes, edges };
|
||||||
|
}
|
||||||
|
|
||||||
|
// Générer la matrice de congestion
|
||||||
|
function generateCongestionMatrix(technologies, members) {
|
||||||
|
// Filtrer technologies core uniquement
|
||||||
|
const coreTechs = technologies.filter(t => t.ring === 'core').sort((a, b) => {
|
||||||
|
// Trier par businessImpact puis par coverage
|
||||||
|
const impactOrder = { 'high': 3, 'medium': 2, 'low': 1 };
|
||||||
|
const impactDiff = (impactOrder[b.businessImpact] || 0) - (impactOrder[a.businessImpact] || 0);
|
||||||
|
if (impactDiff !== 0) return impactDiff;
|
||||||
|
return a.teamCoverage - b.teamCoverage; // Moins de couverture = plus critique
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filtrer membres avec disponibilité >= 50%
|
||||||
|
const availableMembers = members.filter(m => m.availability >= 50)
|
||||||
|
.sort((a, b) => b.availability - a.availability);
|
||||||
|
|
||||||
|
const matrix = [];
|
||||||
|
|
||||||
|
coreTechs.forEach(tech => {
|
||||||
|
const row = {
|
||||||
|
technology: tech.title,
|
||||||
|
technologyId: tech.id,
|
||||||
|
businessImpact: tech.businessImpact,
|
||||||
|
coverage: tech.teamCoverage,
|
||||||
|
skillGap: tech.skillGap,
|
||||||
|
members: []
|
||||||
|
};
|
||||||
|
|
||||||
|
availableMembers.forEach(member => {
|
||||||
|
const hasSkill = tech.members.some(m => {
|
||||||
|
const mId = m.toLowerCase();
|
||||||
|
return mId === member.id.toLowerCase() ||
|
||||||
|
mId === (member.fullName || '').toLowerCase();
|
||||||
|
});
|
||||||
|
|
||||||
|
row.members.push({
|
||||||
|
member: member.id,
|
||||||
|
fullName: member.fullName,
|
||||||
|
hasSkill: hasSkill,
|
||||||
|
availability: member.availability,
|
||||||
|
seniority: member.seniorityLevel
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
matrix.push(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
return matrix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Générer l'équipe de genèse MVP
|
||||||
|
function generateGenesisTeam(technologies, members) {
|
||||||
|
const coreTechs = technologies.filter(t => t.ring === 'core');
|
||||||
|
const availableMembers = members.filter(m => m.availability >= 50);
|
||||||
|
|
||||||
|
const genesisTeam = [];
|
||||||
|
const coveredTechs = new Set();
|
||||||
|
const memberTechMap = new Map();
|
||||||
|
|
||||||
|
// Pour chaque membre, lister les technos core qu'il maîtrise
|
||||||
|
availableMembers.forEach(member => {
|
||||||
|
const memberTechs = coreTechs.filter(tech => {
|
||||||
|
return tech.members.some(m => {
|
||||||
|
const mId = m.toLowerCase();
|
||||||
|
return mId === member.id.toLowerCase() ||
|
||||||
|
mId === (member.fullName || '').toLowerCase();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (memberTechs.length > 0) {
|
||||||
|
memberTechMap.set(member.id, {
|
||||||
|
member: member,
|
||||||
|
technologies: memberTechs,
|
||||||
|
coverage: memberTechs.length
|
||||||
|
});
|
||||||
|
|
||||||
|
memberTechs.forEach(t => coveredTechs.add(t.id));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sélectionner les membres qui couvrent le plus de technos
|
||||||
|
const sortedMembers = Array.from(memberTechMap.entries())
|
||||||
|
.sort((a, b) => b[1].coverage - a[1].coverage);
|
||||||
|
|
||||||
|
sortedMembers.forEach(([memberId, data]) => {
|
||||||
|
genesisTeam.push({
|
||||||
|
member: data.member.id,
|
||||||
|
fullName: data.member.fullName,
|
||||||
|
role: data.member.role,
|
||||||
|
availability: data.member.availability,
|
||||||
|
seniority: data.member.seniorityLevel,
|
||||||
|
technologies: data.technologies.map(t => ({
|
||||||
|
id: t.id,
|
||||||
|
title: t.title,
|
||||||
|
businessImpact: t.businessImpact
|
||||||
|
})),
|
||||||
|
coverage: data.coverage
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Identifier les technos non couvertes
|
||||||
|
const uncoveredTechs = coreTechs.filter(t => !coveredTechs.has(t.id));
|
||||||
|
|
||||||
|
return {
|
||||||
|
team: genesisTeam,
|
||||||
|
totalMembers: genesisTeam.length,
|
||||||
|
coveredTechnologies: coveredTechs.size,
|
||||||
|
totalCoreTechnologies: coreTechs.length,
|
||||||
|
uncoveredTechnologies: uncoveredTechs.map(t => ({
|
||||||
|
id: t.id,
|
||||||
|
title: t.title,
|
||||||
|
businessImpact: t.businessImpact,
|
||||||
|
skillGap: t.skillGap,
|
||||||
|
teamCoverage: t.teamCoverage
|
||||||
|
})),
|
||||||
|
totalCapacity: genesisTeam.reduce((sum, m) => sum + m.availability, 0),
|
||||||
|
averageAvailability: genesisTeam.length > 0
|
||||||
|
? Math.round(genesisTeam.reduce((sum, m) => sum + m.availability, 0) / genesisTeam.length)
|
||||||
|
: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main
|
||||||
|
function main() {
|
||||||
|
console.log('📊 Génération des données de visualisation équipe/technologies...\n');
|
||||||
|
|
||||||
|
const technologies = loadTechnologies();
|
||||||
|
const members = loadTeamMembers();
|
||||||
|
|
||||||
|
console.log(`✅ ${technologies.length} technologies chargées`);
|
||||||
|
console.log(`✅ ${members.length} membres chargés`);
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
network: generateNetworkData(technologies, members),
|
||||||
|
congestionMatrix: generateCongestionMatrix(technologies, members),
|
||||||
|
genesisTeam: generateGenesisTeam(technologies, members),
|
||||||
|
technologies: technologies,
|
||||||
|
members: members,
|
||||||
|
generatedAt: new Date().toISOString()
|
||||||
|
};
|
||||||
|
|
||||||
|
const outputPath = path.join(__dirname, '../public/team-visualization-data.json');
|
||||||
|
fs.writeFileSync(outputPath, JSON.stringify(data, null, 2), 'utf-8');
|
||||||
|
|
||||||
|
console.log(`\n✅ Données générées: ${outputPath}`);
|
||||||
|
console.log(`📊 Graphe réseau: ${data.network.nodes.length} nœuds, ${data.network.edges.length} liens`);
|
||||||
|
console.log(`🔥 Matrice congestion: ${data.congestionMatrix.length} technologies core`);
|
||||||
|
console.log(`👥 Équipe de genèse: ${data.genesisTeam.totalMembers} membres`);
|
||||||
|
console.log(` - Capacité totale: ${data.genesisTeam.totalCapacity}%`);
|
||||||
|
console.log(` - Disponibilité moyenne: ${data.genesisTeam.averageAvailability}%`);
|
||||||
|
console.log(` - Technologies couvertes: ${data.genesisTeam.coveredTechnologies}/${data.genesisTeam.totalCoreTechnologies}`);
|
||||||
|
if (data.genesisTeam.uncoveredTechnologies.length > 0) {
|
||||||
|
console.log(`⚠️ Technologies non couvertes: ${data.genesisTeam.uncoveredTechnologies.length}`);
|
||||||
|
data.genesisTeam.uncoveredTechnologies.forEach(t => {
|
||||||
|
console.log(` - ${t.title} (${t.businessImpact} impact, ${t.skillGap} gap)`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (require.main === module) {
|
||||||
|
main();
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { loadTechnologies, loadTeamMembers, generateNetworkData, generateCongestionMatrix, generateGenesisTeam };
|
||||||
|
|
||||||
Reference in New Issue
Block a user