352 lines
16 KiB
JavaScript
352 lines
16 KiB
JavaScript
// SCRIPT EQUIPE - Remplacement DOM apres chargement
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Fonction pour verifier si on est sur la route team
|
|
function isTeamRoute() {
|
|
var path = window.location.pathname;
|
|
return path === '/team' || path === '/team/' || path.startsWith('/team/');
|
|
}
|
|
|
|
// Fonction pour verifier et initialiser la page team
|
|
function checkAndInitTeamPage() {
|
|
if (!isTeamRoute()) {
|
|
return;
|
|
}
|
|
|
|
// Eviter double initialisation
|
|
if (window.__teamPageInitialized) {
|
|
return;
|
|
}
|
|
window.__teamPageInitialized = true;
|
|
|
|
console.log('EQUIPE: Page team detectee, preparation du remplacement DOM');
|
|
initTeamPage();
|
|
}
|
|
|
|
// Fonction pour charger un script externe
|
|
function loadScript(src) {
|
|
return new Promise(function(resolve, reject) {
|
|
var script = document.createElement('script');
|
|
script.src = src;
|
|
script.onload = resolve;
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
// Fonction pour initialiser la page equipe
|
|
async function initTeamPage() {
|
|
console.log('EQUIPE: Initialisation de la page');
|
|
|
|
// CSS de la page
|
|
var css = '*{margin:0;padding:0;box-sizing:border-box}' +
|
|
'body{font-family:system-ui,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-btn{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}' +
|
|
'.tab-btn:hover{background:rgba(74,222,128,0.3)}' +
|
|
'.tab-btn.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-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-avail{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{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}';
|
|
|
|
// HTML de la page
|
|
var html = '<div class="container">' +
|
|
'<header>' +
|
|
'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">' +
|
|
'<a href="/" style="color:#4ade80;text-decoration:none;font-size:18px;font-weight:bold">← Retour au Radar</a>' +
|
|
'<div></div>' +
|
|
'</div>' +
|
|
'<h1>Equipe & Technologies</h1>' +
|
|
'<p>Visualisation des competences et identification de l\'equipe de genese MVP</p>' +
|
|
'</header>' +
|
|
'<div class="tabs">' +
|
|
'<button class="tab-btn active" data-tab="network">Graphe Reseau</button>' +
|
|
'<button class="tab-btn" data-tab="congestion">Matrice Congestion</button>' +
|
|
'<button class="tab-btn" data-tab="genesis">Equipe Genese MVP</button>' +
|
|
'</div>' +
|
|
'<div id="network-tab" class="tab-content active">' +
|
|
'<div class="legend">' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#4ade80"></div><span>Adopt</span></div>' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#3997d4"></div><span>Trial</span></div>' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#f5b336"></div><span>Assess</span></div>' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#e5695e"></div><span>Hold</span></div>' +
|
|
'<div class="legend-item"><div class="legend-color" style="background:#88ff88"></div><span>Membres</span></div>' +
|
|
'</div>' +
|
|
'<div id="network-graph"><div class="loading">Chargement du graphe...</div></div>' +
|
|
'</div>' +
|
|
'<div id="congestion-tab" class="tab-content">' +
|
|
'<h2 style="margin-bottom:20px">Matrice de Congestion - Technologies Adopt</h2>' +
|
|
'<div id="congestion-matrix"><div class="loading">Chargement de la matrice...</div></div>' +
|
|
'</div>' +
|
|
'<div id="genesis-tab" class="tab-content">' +
|
|
'<div id="genesis-team"><div class="loading">Chargement des donnees...</div></div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
|
|
// Injecter le CSS
|
|
var styleEl = document.createElement('style');
|
|
styleEl.textContent = css;
|
|
document.head.appendChild(styleEl);
|
|
|
|
// Modifier le titre
|
|
document.title = 'Equipe & Technologies - Laplank';
|
|
|
|
// Remplacer le contenu du body
|
|
document.body.innerHTML = html;
|
|
document.body.style.cssText = 'font-family:system-ui,sans-serif;background:#1a4d3a;color:#e0e0e0;padding:20px;margin:0';
|
|
|
|
// Ajouter les gestionnaires d'evenements pour les onglets
|
|
document.querySelectorAll('.tab-btn').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var tabName = this.getAttribute('data-tab');
|
|
document.querySelectorAll('.tab-content').forEach(function(t) { t.classList.remove('active'); });
|
|
document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
|
|
document.getElementById(tabName + '-tab').classList.add('active');
|
|
this.classList.add('active');
|
|
|
|
// Redimensionner les graphiques
|
|
if (tabName === 'congestion' && window.congestionChart) {
|
|
setTimeout(function() { window.congestionChart.resize(); }, 100);
|
|
}
|
|
if (tabName === 'network' && window.networkCy) {
|
|
setTimeout(function() { window.networkCy.resize(); }, 100);
|
|
}
|
|
});
|
|
});
|
|
|
|
console.log('EQUIPE: DOM remplace, chargement des bibliotheques...');
|
|
|
|
// Charger les bibliotheques externes
|
|
try {
|
|
await loadScript('https://cdn.jsdelivr.net/npm/cytoscape@3.26.0/dist/cytoscape.min.js');
|
|
console.log('EQUIPE: Cytoscape charge');
|
|
// Utilisation du layout cose integre (pas de plugin externe necessaire)
|
|
|
|
await loadScript('https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js');
|
|
console.log('EQUIPE: ECharts charge');
|
|
|
|
// Charger les donnees
|
|
var response = await fetch('/team-visualization-data.json');
|
|
if (!response.ok) throw new Error('HTTP ' + response.status);
|
|
var data = await response.json();
|
|
console.log('EQUIPE: Donnees chargees:', Object.keys(data));
|
|
|
|
// Initialiser les visualisations
|
|
initNetwork(data);
|
|
initCongestion(data);
|
|
initGenesis(data);
|
|
|
|
} catch (e) {
|
|
console.error('EQUIPE: Erreur:', e);
|
|
var errorMsg = '<div style="padding:20px;background:rgba(255,152,0,0.2);border:1px solid #ff9800;border-radius:8px"><h3 style="color:#ff9800">Erreur de chargement</h3><p>' + e.message + '</p></div>';
|
|
document.getElementById('network-graph').innerHTML = errorMsg;
|
|
document.getElementById('congestion-matrix').innerHTML = errorMsg;
|
|
document.getElementById('genesis-team').innerHTML = errorMsg;
|
|
}
|
|
}
|
|
|
|
// Graphe reseau avec Cytoscape
|
|
function initNetwork(data) {
|
|
if (!data || !data.network) {
|
|
document.getElementById('network-graph').innerHTML = '<div class="loading">Pas de donnees reseau</div>';
|
|
return;
|
|
}
|
|
|
|
window.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(e) { return 30 + (e.data('coverage') || 0) * 8; },
|
|
'height': function(e) { return 30 + (e.data('coverage') || 0) * 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(e) { return 35 + (e.data('availability') || 0) / 2; },
|
|
'height': function(e) { return 35 + (e.data('availability') || 0) / 2; },
|
|
'color': '#fff',
|
|
'font-size': '14px',
|
|
'font-weight': 'bold',
|
|
'text-outline-width': 2,
|
|
'text-outline-color': '#000',
|
|
'shape': 'ellipse'
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': function(e) { return 1 + (e.data('weight') || 0.5); },
|
|
'line-color': '#999',
|
|
'opacity': 0.6,
|
|
'curve-style': 'bezier'
|
|
}
|
|
}
|
|
],
|
|
layout: {
|
|
name: 'cose',
|
|
nodeDimensionsIncludeLabels: true,
|
|
idealEdgeLength: 100,
|
|
nodeRepulsion: 4500,
|
|
gravity: 0.25,
|
|
numIter: 1000,
|
|
animate: true,
|
|
animationDuration: 800
|
|
}
|
|
});
|
|
console.log('EQUIPE: Graphe reseau initialise');
|
|
}
|
|
|
|
// Matrice de congestion avec ECharts
|
|
function initCongestion(data) {
|
|
if (!data || !data.congestionMatrix || data.congestionMatrix.length === 0) {
|
|
document.getElementById('congestion-matrix').innerHTML = '<div class="loading">Pas de donnees matrice</div>';
|
|
return;
|
|
}
|
|
|
|
var chart = echarts.init(document.getElementById('congestion-matrix'));
|
|
window.congestionChart = chart;
|
|
|
|
var techs = data.congestionMatrix.map(function(r) { return r.technology; });
|
|
var members = data.congestionMatrix[0] ? data.congestionMatrix[0].members.map(function(m) { return m.fullName || m.member; }) : [];
|
|
var scatter = [];
|
|
|
|
data.congestionMatrix.forEach(function(row, i) {
|
|
row.members.forEach(function(m, j) {
|
|
if (m.hasSkill) {
|
|
scatter.push({
|
|
value: [j, i],
|
|
member: m.fullName || m.member,
|
|
tech: row.technology,
|
|
availability: m.availability
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
chart.setOption({
|
|
title: { text: 'Disponibilite des membres sur les technologies Adopt', left: 'center', textStyle: { color: '#e0e0e0' } },
|
|
tooltip: {
|
|
formatter: function(p) {
|
|
return p.data.member + '<br/>Tech: ' + p.data.tech + '<br/>Dispo: ' + p.data.availability + '%';
|
|
}
|
|
},
|
|
grid: { height: '60%', top: '15%' },
|
|
xAxis: { type: 'category', data: members, axisLabel: { rotate: 45, color: '#e0e0e0' }, 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: [{
|
|
type: 'scatter',
|
|
data: scatter,
|
|
symbolSize: function(d) { return 15 + (d[2] || 0) / 2; },
|
|
itemStyle: { color: '#4ade80', borderColor: '#1a4d3a', borderWidth: 2 },
|
|
label: { show: true, formatter: function(p) { return p.data.availability + '%'; }, color: '#1a4d3a' }
|
|
}]
|
|
});
|
|
|
|
window.addEventListener('resize', function() { chart.resize(); });
|
|
console.log('EQUIPE: Matrice de congestion initialisee');
|
|
}
|
|
|
|
// Equipe de genese
|
|
function initGenesis(data) {
|
|
if (!data || !data.genesisTeam) {
|
|
document.getElementById('genesis-team').innerHTML = '<div class="loading">Pas de donnees equipe</div>';
|
|
return;
|
|
}
|
|
|
|
var g = data.genesisTeam;
|
|
var h = '<div class="genesis-stats">' +
|
|
'<div class="stat-card"><div class="stat-value">' + g.totalMembers + '</div><div class="stat-label">Membres selectionnes</div></div>' +
|
|
'<div class="stat-card"><div class="stat-value">' + g.totalCapacity + '%</div><div class="stat-label">Capacite totale</div></div>' +
|
|
'<div class="stat-card"><div class="stat-value">' + g.averageAvailability + '%</div><div class="stat-label">Disponibilite moyenne</div></div>' +
|
|
'<div class="stat-card"><div class="stat-value">' + g.coveredTechnologies + '/' + g.totalCoreTechnologies + '</div><div class="stat-label">Technologies couvertes</div></div>' +
|
|
'</div>' +
|
|
'<h2 style="margin-bottom:20px;color:#4ade80">Membres de l\'equipe de genese</h2>';
|
|
|
|
if (g.team && g.team.length > 0) {
|
|
g.team.forEach(function(m) {
|
|
h += '<div class="member-card">' +
|
|
'<div class="member-header">' +
|
|
'<div><div class="member-name">' + (m.fullName || m.member) + '</div>' +
|
|
'<div style="font-size:12px;color:#a0a0a0;margin-top:4px">' + (m.role || '') + ' - ' + m.seniority + ' - ' + m.coverage + ' technologie(s)</div>' +
|
|
'</div>' +
|
|
'<div class="member-avail">' + m.availability + '% dispo</div>' +
|
|
'</div>' +
|
|
'<div class="tech-list">';
|
|
if (m.technologies) {
|
|
m.technologies.forEach(function(t) {
|
|
h += '<span class="tech-tag">' + t.title + '</span>';
|
|
});
|
|
}
|
|
h += '</div></div>';
|
|
});
|
|
} else {
|
|
h += '<p style="color:#a0a0a0">Aucun membre ne repond aux criteres.</p>';
|
|
}
|
|
|
|
if (g.uncoveredTechnologies && g.uncoveredTechnologies.length > 0) {
|
|
h += '<div class="warning-box"><div class="warning-title">Technologies Adopt non couvertes</div><p style="margin-bottom:10px">Ces technologies critiques ne sont pas maitrisees :</p>';
|
|
g.uncoveredTechnologies.forEach(function(t) {
|
|
h += '<div class="uncovered"><strong>' + t.title + '</strong><div style="font-size:12px;color:#a0a0a0;margin-top:4px">Impact: ' + t.businessImpact + ' - Gap: ' + t.skillGap + ' - Couverture: ' + t.teamCoverage + ' personne(s)</div></div>';
|
|
});
|
|
h += '</div>';
|
|
}
|
|
|
|
document.getElementById('genesis-team').innerHTML = h;
|
|
console.log('EQUIPE: Equipe de genese initialisee');
|
|
}
|
|
|
|
// Demarrer quand le DOM est pret
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', checkAndInitTeamPage);
|
|
} else {
|
|
checkAndInitTeamPage();
|
|
}
|
|
|
|
// Detecter les navigations Next.js (SPA)
|
|
var lastUrl = location.href;
|
|
new MutationObserver(function() {
|
|
if (location.href !== lastUrl) {
|
|
lastUrl = location.href;
|
|
window.__teamPageInitialized = false;
|
|
checkAndInitTeamPage();
|
|
}
|
|
}).observe(document, { subtree: true, childList: true });
|
|
})();
|