cleanup: suppression références team-static.html inutiles
- Suppression copie team-static.html du Dockerfile (plus nécessaire) - Suppression vérifications team-static.html des logs de build - Suppression fichier public/team-static.html (intégration directe) Nettoyage suite à l'intégration directe du HTML dans la page React
This commit is contained in:
syoul
@@ -1079,13 +1079,6 @@ RUN if [ -d "out" ]; then \
|
|||||||
echo "📁 Contenu de /app/public/:" && \
|
echo "📁 Contenu de /app/public/:" && \
|
||||||
ls -la /app/public/ 2>/dev/null | head -10 || echo "/app/public/ non accessible"; \
|
ls -la /app/public/ 2>/dev/null | head -10 || echo "/app/public/ non accessible"; \
|
||||||
fi && \
|
fi && \
|
||||||
if [ -f "public/team-static.html" ]; then \
|
|
||||||
cp -v public/team-static.html out/team-static.html && echo "✅ team-static.html copié depuis public/ vers out/"; \
|
|
||||||
elif [ -f "/app/public/team-static.html" ]; then \
|
|
||||||
cp -v /app/public/team-static.html out/team-static.html && echo "✅ team-static.html copié depuis /app/public/ vers out/"; \
|
|
||||||
else \
|
|
||||||
echo "⚠️ team-static.html introuvable dans public/ ou /app/public/"; \
|
|
||||||
fi && \
|
|
||||||
if [ -f "public/team-visualization-data.json" ]; then \
|
if [ -f "public/team-visualization-data.json" ]; then \
|
||||||
cp -v public/team-visualization-data.json out/team-visualization-data.json && echo "✅ team-visualization-data.json copié dans out/"; \
|
cp -v public/team-visualization-data.json out/team-visualization-data.json && echo "✅ team-visualization-data.json copié dans out/"; \
|
||||||
else \
|
else \
|
||||||
@@ -1100,8 +1093,6 @@ RUN if [ -d "out" ]; then \
|
|||||||
fi && \
|
fi && \
|
||||||
echo "🔍 VÉRIFICATION: team.html dans out/:" && \
|
echo "🔍 VÉRIFICATION: team.html dans out/:" && \
|
||||||
ls -la out/team.html 2>/dev/null || echo "❌ team.html absent de out/" && \
|
ls -la out/team.html 2>/dev/null || echo "❌ team.html absent de out/" && \
|
||||||
echo "🔍 VÉRIFICATION: team-static.html dans out/:" && \
|
|
||||||
ls -la out/team-static.html 2>/dev/null || echo "❌ team-static.html absent de out/" && \
|
|
||||||
echo "" && \
|
echo "" && \
|
||||||
echo "📁 Vérification finale dans out/:" && \
|
echo "📁 Vérification finale dans out/:" && \
|
||||||
ls -la out/ | grep -E "(team\.html|team-visualization)" && echo "✅ Fichiers team présents dans out/" || echo "⚠️ Fichiers team non trouvés dans out/"; \
|
ls -la out/ | grep -E "(team\.html|team-visualization)" && echo "✅ Fichiers team présents dans out/" || echo "⚠️ Fichiers team non trouvés dans out/"; \
|
||||||
|
|||||||
@@ -1,558 +0,0 @@
|
|||||||
<!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: 1px solid #4ade80;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #4ade80;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button:hover {
|
|
||||||
background: rgba(74, 222, 128, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-button.active {
|
|
||||||
background: #4ade80;
|
|
||||||
color: #1a4d3a;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
display: none;
|
|
||||||
background: rgba(26, 77, 58, 0.3);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 15px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legend-color {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning-box {
|
|
||||||
background: rgba(255, 152, 0, 0.1);
|
|
||||||
border: 1px solid #ff9800;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 20px 0;
|
|
||||||
color: #ff9800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
||||||
gap: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-card {
|
|
||||||
background: rgba(26, 77, 58, 0.5);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid rgba(74, 222, 128, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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-role {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #a0a0a0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill-tag {
|
|
||||||
background: rgba(74, 222, 128, 0.2);
|
|
||||||
color: #4ade80;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: #4ade80;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<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>👥 É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">
|
|
||||||
<h2 style="margin-bottom: 20px;">Graphe Réseau - Technologies et Compétences</h2>
|
|
||||||
<div class="legend">
|
|
||||||
<div class="legend-item">
|
|
||||||
<div class="legend-color" style="background: #ff4444;"></div>
|
|
||||||
<span>Technologies Core</span>
|
|
||||||
</div>
|
|
||||||
<div class="legend-item">
|
|
||||||
<div class="legend-color" style="background: #ff8800;"></div>
|
|
||||||
<span>Technologies Avancées</span>
|
|
||||||
</div>
|
|
||||||
<div class="legend-item">
|
|
||||||
<div class="legend-color" style="background: #4488ff;"></div>
|
|
||||||
<span>Technologies Utilitaires</span>
|
|
||||||
</div>
|
|
||||||
<div class="legend-item">
|
|
||||||
<div class="legend-color" style="background: #88ff88;"></div>
|
|
||||||
<span>Membres Équipe</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>
|
|
||||||
console.log('🚀 TEAM-STATIC.HTML: Script chargé, initialisation...');
|
|
||||||
|
|
||||||
let data = null;
|
|
||||||
let networkCy = null;
|
|
||||||
let congestionChart = null;
|
|
||||||
|
|
||||||
console.log('🔧 TEAM-STATIC.HTML: Scripts externes chargés');
|
|
||||||
console.log('🔧 Cytoscape disponible:', typeof cytoscape !== 'undefined');
|
|
||||||
console.log('🔧 ECharts disponible:', typeof echarts !== 'undefined');
|
|
||||||
|
|
||||||
// Charger les données
|
|
||||||
async function loadData() {
|
|
||||||
console.log('📋 TEAM-STATIC.HTML: Fonction loadData() appelée');
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log('🔄 Chargement des données équipe depuis /team-visualization-data.json');
|
|
||||||
const response = await fetch('/team-visualization-data.json');
|
|
||||||
console.log('📡 Réponse reçue:', response.status, response.statusText);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
data = await response.json();
|
|
||||||
console.log('✅ Données chargées:', Object.keys(data));
|
|
||||||
console.log('📊 Nombre de nœuds réseau:', data.network?.nodes?.length || 0);
|
|
||||||
console.log('📊 Données matrice congestion:', data.congestionMatrix?.length || 0);
|
|
||||||
console.log('📊 Données équipe genèse:', data.genesisTeam ? 'présentes' : 'absentes');
|
|
||||||
|
|
||||||
initVisualizations();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('❌ Erreur lors du chargement des données:', error);
|
|
||||||
|
|
||||||
// Fallback : afficher un message informatif
|
|
||||||
const fallbackMessage = `
|
|
||||||
<div style="padding: 20px; background: rgba(255, 152, 0, 0.1); border: 1px solid #ff9800; border-radius: 8px; margin: 20px 0;">
|
|
||||||
<h3 style="color: #ff9800; margin-top: 0;">🔄 Chargement des données...</h3>
|
|
||||||
<p>Les visualisations équipe se chargent. Si elles n'apparaissent pas :</p>
|
|
||||||
<ul>
|
|
||||||
<li>Vérifiez la console du navigateur (F12) pour les erreurs</li>
|
|
||||||
<li>Assurez-vous que <code>team-visualization-data.json</code> est accessible</li>
|
|
||||||
<li>Le script <code>generate-team-visualization-data.js</code> doit avoir été exécuté</li>
|
|
||||||
</ul>
|
|
||||||
<p><strong>Erreur détectée :</strong> ${error.message}</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Afficher le message dans toutes les sections
|
|
||||||
document.getElementById('network-graph').innerHTML = fallbackMessage;
|
|
||||||
document.getElementById('congestion-matrix').innerHTML = fallbackMessage;
|
|
||||||
document.getElementById('genesis-team').innerHTML = fallbackMessage;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialiser les visualisations
|
|
||||||
function initVisualizations() {
|
|
||||||
console.log('🎨 TEAM-STATIC.HTML: initVisualizations() appelée');
|
|
||||||
initNetworkGraph();
|
|
||||||
initCongestionMatrix();
|
|
||||||
initGenesisTeam();
|
|
||||||
}
|
|
||||||
|
|
||||||
function initNetworkGraph() {
|
|
||||||
console.log('📊 TEAM-STATIC.HTML: initNetworkGraph() appelée');
|
|
||||||
if (!data || !data.network) {
|
|
||||||
console.log('⚠️ TEAM-STATIC.HTML: Pas de données réseau');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const container = document.getElementById('network-graph');
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
networkCy = cytoscape({
|
|
||||||
container: container,
|
|
||||||
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));
|
|
||||||
},
|
|
||||||
'font-size': '12px',
|
|
||||||
'text-valign': 'center',
|
|
||||||
'text-halign': 'center',
|
|
||||||
'color': '#ffffff',
|
|
||||||
'text-outline-color': '#1a4d3a',
|
|
||||||
'text-outline-width': '2px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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));
|
|
||||||
},
|
|
||||||
'font-size': '10px',
|
|
||||||
'text-valign': 'center',
|
|
||||||
'text-halign': 'center',
|
|
||||||
'color': '#1a4d3a',
|
|
||||||
'text-outline-color': '#ffffff',
|
|
||||||
'text-outline-width': '1px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
selector: 'edge',
|
|
||||||
style: {
|
|
||||||
'width': function(ele) {
|
|
||||||
return 1 + (ele.data('weight') || 0.5);
|
|
||||||
},
|
|
||||||
'line-color': '#4ade80',
|
|
||||||
'target-arrow-color': '#4ade80',
|
|
||||||
'target-arrow-shape': 'triangle',
|
|
||||||
'curve-style': 'bezier'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
layout: {
|
|
||||||
name: 'cose-bilkent',
|
|
||||||
animate: true,
|
|
||||||
animationDuration: 1000,
|
|
||||||
nodeRepulsion: 4500,
|
|
||||||
idealEdgeLength: 100,
|
|
||||||
edgeElasticity: 0.45
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Gestionnaire de clics sur les nœuds
|
|
||||||
networkCy.on('tap', 'node', function(evt) {
|
|
||||||
const node = evt.target;
|
|
||||||
const nodeData = node.data();
|
|
||||||
let tooltip = '';
|
|
||||||
|
|
||||||
if (nodeData.type === 'technology') {
|
|
||||||
tooltip = `${nodeData.label}\n` +
|
|
||||||
`Ring: ${nodeData.ring}\n` +
|
|
||||||
`Couverture: ${nodeData.coverage} personne(s)\n` +
|
|
||||||
`Impact: ${nodeData.businessImpact}\n` +
|
|
||||||
`Gap: ${nodeData.skillGap}`;
|
|
||||||
} else {
|
|
||||||
tooltip = `${nodeData.label}\n` +
|
|
||||||
`Disponibilité: ${nodeData.availability}%\n` +
|
|
||||||
`Niveau: ${nodeData.seniority}\n` +
|
|
||||||
(nodeData.role ? `Rôle: ${nodeData.role}` : '');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Afficher un tooltip simple
|
|
||||||
alert(tooltip);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('✅ TEAM-STATIC.HTML: Graphe réseau initialisé');
|
|
||||||
}
|
|
||||||
|
|
||||||
function initCongestionMatrix() {
|
|
||||||
console.log('📈 TEAM-STATIC.HTML: initCongestionMatrix() appelée');
|
|
||||||
if (!data || !data.congestionMatrix) {
|
|
||||||
console.log('⚠️ TEAM-STATIC.HTML: Pas de données matrice congestion');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const container = document.getElementById('congestion-matrix');
|
|
||||||
if (!container) return;
|
|
||||||
|
|
||||||
const techs = data.congestionMatrix.map(r => r.technology);
|
|
||||||
const members = data.congestionMatrix[0]?.members.map(m => m.fullName || m.member) || [];
|
|
||||||
|
|
||||||
const scatterData = [];
|
|
||||||
data.congestionMatrix.forEach((row, i) => {
|
|
||||||
row.members.forEach((member, j) => {
|
|
||||||
scatterData.push([j, i, member.availability, member]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
congestionChart = echarts.init(container);
|
|
||||||
const option = {
|
|
||||||
title: {
|
|
||||||
text: 'Disponibilité des Technologies Core',
|
|
||||||
left: 'center',
|
|
||||||
textStyle: { color: '#e0e0e0' }
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
formatter: function(params) {
|
|
||||||
if (params.data && params.data[3]) {
|
|
||||||
const member = params.data[3];
|
|
||||||
return `${member.fullName || member.member}<br/>` +
|
|
||||||
`Technologie: ${techs[params.data[1]]}<br/>` +
|
|
||||||
`Disponibilité: ${params.data[2]}%`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '10%',
|
|
||||||
right: '10%',
|
|
||||||
top: '15%',
|
|
||||||
bottom: '15%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: members,
|
|
||||||
axisLabel: {
|
|
||||||
color: '#e0e0e0',
|
|
||||||
rotate: 45
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: techs,
|
|
||||||
axisLabel: { color: '#e0e0e0' }
|
|
||||||
},
|
|
||||||
visualMap: {
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
dimension: 2,
|
|
||||||
orient: 'horizontal',
|
|
||||||
left: 'center',
|
|
||||||
top: 'top',
|
|
||||||
text: ['Élevé', 'Faible'],
|
|
||||||
textStyle: { color: '#e0e0e0' },
|
|
||||||
inRange: {
|
|
||||||
color: ['#ff4444', '#ff8800', '#4488ff', '#88ff88']
|
|
||||||
},
|
|
||||||
outOfRange: {
|
|
||||||
color: '#444444'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: 'Disponibilité',
|
|
||||||
type: 'scatter',
|
|
||||||
data: scatterData,
|
|
||||||
symbolSize: function(data) {
|
|
||||||
return 15 + (data[2] || 0) / 2;
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
congestionChart.setOption(option);
|
|
||||||
|
|
||||||
// Redimensionner au resize
|
|
||||||
window.addEventListener('resize', () => congestionChart.resize());
|
|
||||||
|
|
||||||
console.log('✅ TEAM-STATIC.HTML: Matrice congestion initialisée');
|
|
||||||
}
|
|
||||||
|
|
||||||
function initGenesisTeam() {
|
|
||||||
console.log('👥 TEAM-STATIC.HTML: initGenesisTeam() appelée');
|
|
||||||
if (!data || !data.genesisTeam) {
|
|
||||||
console.log('⚠️ TEAM-STATIC.HTML: Pas de données équipe genèse');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const genesis = data.genesisTeam;
|
|
||||||
const html = `
|
|
||||||
<h2 style="margin-bottom: 20px;">Équipe de Genèse MVP</h2>
|
|
||||||
<div style="background: rgba(74, 222, 128, 0.1); padding: 20px; border-radius: 8px; margin-bottom: 20px;">
|
|
||||||
<h3 style="color: #4ade80; margin-bottom: 10px;">Critères de Sélection</h3>
|
|
||||||
<ul style="margin-left: 20px;">
|
|
||||||
<li>Disponibilité ≥ ${genesis.minAvailability}%</li>
|
|
||||||
<li>Couverture technologique ≥ ${genesis.minCoverage} technologies</li>
|
|
||||||
<li>Taille équipe optimale: ${genesis.targetTeamSize} membres</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-grid">
|
|
||||||
${genesis.selectedMembers.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 style="text-align: right;">
|
|
||||||
<div style="font-size: 24px; color: #4ade80; font-weight: bold;">${member.availability}%</div>
|
|
||||||
<div style="font-size: 12px; color: #a0a0a0;">Disponibilité</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="skills-list">
|
|
||||||
${member.skills.slice(0, 8).map(skill => `<span class="skill-tag">${skill}</span>`).join('')}
|
|
||||||
${member.skills.length > 8 ? `<span class="skill-tag">+${member.skills.length - 8}</span>` : ''}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`).join('')}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.getElementById('genesis-team').innerHTML = html;
|
|
||||||
console.log('✅ TEAM-STATIC.HTML: Équipe genèse affichée');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gestionnaire d'onglets
|
|
||||||
function showTab(tabId) {
|
|
||||||
// Masquer tous les onglets
|
|
||||||
document.querySelectorAll('.tab-content').forEach(tab => {
|
|
||||||
tab.classList.remove('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Désactiver tous les boutons
|
|
||||||
document.querySelectorAll('.tab-button').forEach(btn => {
|
|
||||||
btn.classList.remove('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Afficher l'onglet sélectionné
|
|
||||||
document.getElementById(tabId + '-tab').classList.add('active');
|
|
||||||
|
|
||||||
// Activer le bouton
|
|
||||||
event.target.classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Charger au démarrage
|
|
||||||
console.log('🚀 TEAM-STATIC.HTML: Démarrage - appel loadData()');
|
|
||||||
loadData();
|
|
||||||
|
|
||||||
console.log('✅ TEAM-STATIC.HTML: Initialisation terminée');
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user