feat: add heatmap to resultat
This commit is contained in:
@@ -62,6 +62,51 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Heatmap par compétences -->
|
||||
{% if heatmap_competences %}
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-medium text-gray-900">Performance par compétence</h2>
|
||||
<p class="text-sm text-gray-600 mt-1">Heatmap des scores moyens de chaque élève par compétence</p>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
<div class="overflow-x-auto">
|
||||
<canvas id="competencesHeatmap" width="800" height="400"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Heatmap par domaines -->
|
||||
{% if heatmap_domains %}
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-medium text-gray-900">Performance par domaine</h2>
|
||||
<p class="text-sm text-gray-600 mt-1">Heatmap des scores moyens de chaque élève par domaine</p>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
<div class="overflow-x-auto">
|
||||
<canvas id="domainsHeatmap" width="800" height="400"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Heatmap par éléments de notation -->
|
||||
{% if heatmap_grading_elements %}
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-medium text-gray-900">Performance par élément de notation</h2>
|
||||
<p class="text-sm text-gray-600 mt-1">Heatmap détaillée des scores de chaque élève sur chaque question/compétence</p>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
<div class="overflow-x-auto">
|
||||
<canvas id="gradingElementsHeatmap" width="1200" height="600"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Tableau des résultats -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
@@ -123,6 +168,16 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const ctx = document.getElementById('scoresChart').getContext('2d');
|
||||
const scores = {{ scores_json | tojson }};
|
||||
|
||||
// Récupérer les données des élèves avec leurs noms et scores
|
||||
const studentsData = [
|
||||
{% for student_data in students_scores %}
|
||||
{
|
||||
name: "{{ student_data.student.last_name }} {{ student_data.student.first_name }}",
|
||||
score: {{ student_data.total_score }}
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
// Créer les intervalles pour l'histogramme
|
||||
const totalMaxPoints = {{ total_max_points }};
|
||||
const minScore = 0;
|
||||
@@ -132,19 +187,24 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const bins = [];
|
||||
const labels = [];
|
||||
const studentsInBins = []; // Nouveau: stocker les élèves pour chaque bin
|
||||
|
||||
for (let i = 0; i < numBins; i++) {
|
||||
const binStart = minScore + i * binWidth;
|
||||
const binEnd = minScore + (i + 1) * binWidth;
|
||||
bins.push(0);
|
||||
labels.push(`${binStart.toFixed(0)} - ${binEnd.toFixed(0)}`);
|
||||
studentsInBins.push([]); // Initialiser la liste d'élèves pour ce bin
|
||||
}
|
||||
|
||||
// Compter les scores dans chaque intervalle
|
||||
scores.forEach(score => {
|
||||
let binIndex = Math.floor((score - minScore) / binWidth);
|
||||
// Compter les scores dans chaque intervalle et stocker les noms des élèves
|
||||
studentsData.forEach(student => {
|
||||
let binIndex = Math.floor((student.score - minScore) / binWidth);
|
||||
if (binIndex >= numBins) binIndex = numBins - 1; // Pour le score maximum
|
||||
if (binIndex >= 0) bins[binIndex]++;
|
||||
if (binIndex >= 0) {
|
||||
bins[binIndex]++;
|
||||
studentsInBins[binIndex].push(`${student.name} (${student.score.toFixed(1)})`);
|
||||
}
|
||||
});
|
||||
|
||||
new Chart(ctx, {
|
||||
@@ -168,6 +228,35 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title: function(tooltipItems) {
|
||||
const binIndex = tooltipItems[0].dataIndex;
|
||||
return labels[binIndex];
|
||||
},
|
||||
label: function(tooltipItem) {
|
||||
const binIndex = tooltipItem.dataIndex;
|
||||
const count = bins[binIndex];
|
||||
const students = studentsInBins[binIndex];
|
||||
|
||||
if (count === 0) {
|
||||
return 'Aucun élève';
|
||||
} else if (count === 1) {
|
||||
return '1 élève : ' + students[0];
|
||||
} else {
|
||||
return `${count} élèves : ${students.join(', ')}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
maxWidth: 400,
|
||||
bodyFont: {
|
||||
size: 12
|
||||
},
|
||||
titleFont: {
|
||||
size: 13,
|
||||
weight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
@@ -190,6 +279,490 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// === HEATMAPS ===
|
||||
|
||||
// === HEATMAPS DATA ===
|
||||
{% if heatmap_competences %}
|
||||
const competencesData = {{ heatmap_competences | tojson }};
|
||||
{% endif %}
|
||||
|
||||
{% if heatmap_domains %}
|
||||
const domainsData = {{ heatmap_domains | tojson }};
|
||||
{% endif %}
|
||||
|
||||
{% if heatmap_grading_elements %}
|
||||
const gradingElementsData = {{ heatmap_grading_elements | tojson }};
|
||||
{% endif %}
|
||||
|
||||
// Fonctions utilitaires pour l'interpolation HSL (globales pour être réutilisables)
|
||||
function hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
function rgbToHex(r, g, b) {
|
||||
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||||
}
|
||||
|
||||
function rgbToHsl(r, g, b) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
let h, s, l = (max + min) / 2;
|
||||
|
||||
if (max === min) {
|
||||
h = s = 0; // achromatic
|
||||
} else {
|
||||
const d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
|
||||
switch (max) {
|
||||
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
||||
case g: h = (b - r) / d + 2; break;
|
||||
case b: h = (r - g) / d + 4; break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
|
||||
return { h: h * 360, s: s * 100, l: l * 100 };
|
||||
}
|
||||
|
||||
function hslToRgb(h, s, l) {
|
||||
h /= 360;
|
||||
s /= 100;
|
||||
l /= 100;
|
||||
|
||||
const hue2rgb = (p, q, t) => {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
|
||||
let r, g, b;
|
||||
|
||||
if (s === 0) {
|
||||
r = g = b = l; // achromatic
|
||||
} else {
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1/3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1/3);
|
||||
}
|
||||
|
||||
return {
|
||||
r: Math.round(r * 255),
|
||||
g: Math.round(g * 255),
|
||||
b: Math.round(b * 255)
|
||||
};
|
||||
}
|
||||
|
||||
function interpolateColorHSL(color1, color2, factor) {
|
||||
const rgb1 = hexToRgb(color1);
|
||||
const rgb2 = hexToRgb(color2);
|
||||
|
||||
if (!rgb1 || !rgb2) return color1;
|
||||
|
||||
const hsl1 = rgbToHsl(rgb1.r, rgb1.g, rgb1.b);
|
||||
const hsl2 = rgbToHsl(rgb2.r, rgb2.g, rgb2.b);
|
||||
|
||||
// Interpolation en HSL
|
||||
let h1 = hsl1.h;
|
||||
let h2 = hsl2.h;
|
||||
|
||||
// Gérer la transition des teintes (éviter le long chemin autour du cercle)
|
||||
let deltaH = h2 - h1;
|
||||
if (deltaH > 180) {
|
||||
h2 -= 360;
|
||||
} else if (deltaH < -180) {
|
||||
h2 += 360;
|
||||
}
|
||||
|
||||
const h = h1 + (h2 - h1) * factor;
|
||||
const s = hsl1.s + (hsl2.s - hsl1.s) * factor;
|
||||
const l = hsl1.l + (hsl2.l - hsl1.l) * factor;
|
||||
|
||||
// Normaliser la teinte
|
||||
const normalizedH = ((h % 360) + 360) % 360;
|
||||
|
||||
const rgb = hslToRgb(normalizedH, s, l);
|
||||
return rgbToHex(rgb.r, rgb.g, rgb.b);
|
||||
}
|
||||
|
||||
function createHeatmap(canvasId, data, type) {
|
||||
const canvas = document.getElementById(canvasId);
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const students = data.students;
|
||||
const categories = type === 'compétence' ? data.competences :
|
||||
(type === 'domaine' ? data.domains : data.elements);
|
||||
const scores = data.scores;
|
||||
const colors = data.colors;
|
||||
|
||||
if (!categories || categories.length === 0) return;
|
||||
|
||||
// Dimensions adaptées selon le type
|
||||
const padding = type === 'élément' ? 120 : 80; // Plus d'espace pour les libellés longs
|
||||
const minCellWidth = type === 'élément' ? 50 : 60;
|
||||
const minCellHeight = type === 'élément' ? 30 : 40; // Plus compact pour les éléments
|
||||
|
||||
const cellWidth = Math.max(minCellWidth, (canvas.width - padding * 2) / students.length);
|
||||
const cellHeight = Math.max(minCellHeight, (canvas.height - padding * 2) / categories.length);
|
||||
|
||||
// Ajuster la taille du canvas si nécessaire
|
||||
canvas.width = cellWidth * students.length + padding * 2;
|
||||
canvas.height = cellHeight * categories.length + padding * 2;
|
||||
|
||||
// Effacer le canvas
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.font = '12px Arial';
|
||||
|
||||
// Fonction pour convertir un score en couleur avec dégradé continu HSL
|
||||
function getScoreColor(score) {
|
||||
if (score === null || score === undefined) {
|
||||
return '#f3f4f6'; // Gris clair pour les données manquantes
|
||||
}
|
||||
|
||||
// Dégradé continu du rouge (0%) au vert (100%) en utilisant l'interpolation HSL
|
||||
const percentage = Math.max(0, Math.min(100, score));
|
||||
const factor = percentage / 100;
|
||||
|
||||
// Couleurs de début et fin (rouge vers vert)
|
||||
const redColor = '#ef4444'; // Rouge (même que dans la config)
|
||||
const greenColor = '#22c55e'; // Vert (même que dans la config)
|
||||
|
||||
return interpolateColorHSL(redColor, greenColor, factor);
|
||||
}
|
||||
|
||||
// Dessiner les cellules
|
||||
for (let studentIndex = 0; studentIndex < students.length; studentIndex++) {
|
||||
for (let categoryIndex = 0; categoryIndex < categories.length; categoryIndex++) {
|
||||
const score = scores[studentIndex][categoryIndex];
|
||||
const x = padding + studentIndex * cellWidth;
|
||||
const y = padding + categoryIndex * cellHeight;
|
||||
|
||||
// Couleur de fond basée sur le score
|
||||
ctx.fillStyle = getScoreColor(score);
|
||||
ctx.fillRect(x, y, cellWidth - 1, cellHeight - 1);
|
||||
|
||||
// Bordure
|
||||
ctx.strokeStyle = '#d1d5db';
|
||||
ctx.strokeRect(x, y, cellWidth - 1, cellHeight - 1);
|
||||
|
||||
// Texte du score
|
||||
ctx.font = type === 'élément' ? '10px Arial' : '12px Arial'; // Police adaptée
|
||||
if (score !== null && score !== undefined) {
|
||||
ctx.fillStyle = score > 60 ? '#ffffff' : '#000000'; // Blanc sur foncé, noir sur clair
|
||||
ctx.textAlign = 'center';
|
||||
// Affichage simplifié pour les éléments (sans %)
|
||||
const displayText = type === 'élément' ? score.toFixed(0) : score.toFixed(1) + '%';
|
||||
ctx.fillText(displayText, x + cellWidth/2, y + cellHeight/2 + 4);
|
||||
} else {
|
||||
ctx.fillStyle = '#6b7280';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('-', x + cellWidth/2, y + cellHeight/2 + 4);
|
||||
}
|
||||
|
||||
// Remettre la police normale après
|
||||
ctx.font = '12px Arial';
|
||||
}
|
||||
}
|
||||
|
||||
// Labels des étudiants (vertical, en haut)
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.textAlign = 'left';
|
||||
for (let i = 0; i < students.length; i++) {
|
||||
const x = padding + i * cellWidth + cellWidth/2;
|
||||
const y = padding - 10;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(-Math.PI/4); // Rotation de -45 degrés
|
||||
ctx.fillText(students[i], 0, 0);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Labels des catégories (à gauche)
|
||||
ctx.textAlign = 'right';
|
||||
ctx.font = type === 'élément' ? '10px Arial' : '12px Arial'; // Police plus petite pour les éléments
|
||||
|
||||
for (let i = 0; i < categories.length; i++) {
|
||||
const x = padding - 10;
|
||||
const y = padding + i * cellHeight + cellHeight/2 + 4;
|
||||
|
||||
// Utiliser la couleur de la catégorie si disponible
|
||||
const category = categories[i];
|
||||
ctx.fillStyle = colors[category] || '#374151';
|
||||
|
||||
// Tronquer le texte si trop long pour les éléments
|
||||
let displayText = category;
|
||||
if (type === 'élément' && category.length > 25) {
|
||||
displayText = category.substring(0, 22) + '...';
|
||||
}
|
||||
|
||||
ctx.fillText(displayText, x, y);
|
||||
}
|
||||
|
||||
// Légende (échelle de couleur continue)
|
||||
const legendY = canvas.height - 40;
|
||||
const legendHeight = 20;
|
||||
const legendWidth = 200;
|
||||
const legendX = (canvas.width - legendWidth) / 2;
|
||||
|
||||
// Dessiner la barre de légende avec dégradé continu
|
||||
for (let i = 0; i <= 100; i++) {
|
||||
const x = legendX + (i / 100) * legendWidth;
|
||||
ctx.fillStyle = getScoreColor(i);
|
||||
ctx.fillRect(x, legendY, 2, legendHeight);
|
||||
}
|
||||
|
||||
// Bordure de la légende
|
||||
ctx.strokeStyle = '#d1d5db';
|
||||
ctx.strokeRect(legendX, legendY, legendWidth, legendHeight);
|
||||
|
||||
// Labels de la légende
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('0%', legendX, legendY + legendHeight + 15);
|
||||
ctx.fillText('50%', legendX + legendWidth/2, legendY + legendHeight + 15);
|
||||
ctx.fillText('100%', legendX + legendWidth, legendY + legendHeight + 15);
|
||||
|
||||
// Titre de la légende
|
||||
ctx.fillText('Score moyen (%)', legendX + legendWidth/2, legendY - 10);
|
||||
}
|
||||
|
||||
function createGradingElementsHeatmap(canvasId, data) {
|
||||
const canvas = document.getElementById(canvasId);
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const students = data.students;
|
||||
const elements = data.elements;
|
||||
const detailedScores = data.detailed_scores;
|
||||
const colors = data.colors;
|
||||
const scaleColors = data.scale_colors;
|
||||
|
||||
if (!elements || elements.length === 0) return;
|
||||
|
||||
// Dimensions adaptées pour les éléments
|
||||
const padding = 120;
|
||||
const minCellWidth = 50;
|
||||
const minCellHeight = 30;
|
||||
|
||||
const cellWidth = Math.max(minCellWidth, (canvas.width - padding * 2) / students.length);
|
||||
const cellHeight = Math.max(minCellHeight, (canvas.height - padding * 2) / elements.length);
|
||||
|
||||
// Ajuster la taille du canvas si nécessaire
|
||||
canvas.width = cellWidth * students.length + padding * 2;
|
||||
canvas.height = cellHeight * elements.length + padding * 2;
|
||||
|
||||
// Effacer le canvas
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.font = '10px Arial';
|
||||
|
||||
// Fonction pour obtenir la couleur selon le type et la valeur
|
||||
function getGradeColor(gradeData) {
|
||||
if (!gradeData) {
|
||||
return '#f3f4f6'; // Gris clair pour les données manquantes
|
||||
}
|
||||
|
||||
const { value, grading_type, max_points } = gradeData;
|
||||
|
||||
// Pour les valeurs spéciales définies en base (., d, a, etc.)
|
||||
if (scaleColors[value]) {
|
||||
return scaleColors[value].color;
|
||||
}
|
||||
|
||||
if (grading_type === 'score') {
|
||||
// Pour les scores (0-3), utiliser directement les couleurs de base
|
||||
if (scaleColors[value]) {
|
||||
return scaleColors[value].color;
|
||||
}
|
||||
// Fallback si la valeur n'existe pas dans l'échelle
|
||||
return '#6b7280';
|
||||
} else if (grading_type === 'notes') {
|
||||
// Pour les notes numériques, calculer le pourcentage et utiliser un dégradé
|
||||
try {
|
||||
const numericValue = parseFloat(value.toString().replace(',', '.'));
|
||||
const percentage = (numericValue / max_points) * 100;
|
||||
|
||||
// Utiliser le même dégradé HSL que les autres heatmaps pour les notes
|
||||
const factor = Math.max(0, Math.min(100, percentage)) / 100;
|
||||
return interpolateColorHSL('#ef4444', '#22c55e', factor);
|
||||
} catch (e) {
|
||||
return '#6b7280'; // Gris si erreur de parsing
|
||||
}
|
||||
}
|
||||
|
||||
return '#6b7280'; // Couleur par défaut
|
||||
}
|
||||
|
||||
// Dessiner les cellules
|
||||
for (let studentIndex = 0; studentIndex < students.length; studentIndex++) {
|
||||
for (let elementIndex = 0; elementIndex < elements.length; elementIndex++) {
|
||||
const gradeData = detailedScores[studentIndex][elementIndex];
|
||||
const x = padding + studentIndex * cellWidth;
|
||||
const y = padding + elementIndex * cellHeight;
|
||||
|
||||
// Couleur de fond basée sur la vraie valeur et le type
|
||||
ctx.fillStyle = getGradeColor(gradeData);
|
||||
ctx.fillRect(x, y, cellWidth - 1, cellHeight - 1);
|
||||
|
||||
// Bordure
|
||||
ctx.strokeStyle = '#d1d5db';
|
||||
ctx.strokeRect(x, y, cellWidth - 1, cellHeight - 1);
|
||||
|
||||
// Texte de la valeur originale
|
||||
ctx.font = '10px Arial';
|
||||
if (gradeData) {
|
||||
// Déterminer la couleur du texte selon la luminosité du fond
|
||||
const bgColor = getGradeColor(gradeData);
|
||||
const isLightBackground = isColorLight(bgColor);
|
||||
ctx.fillStyle = isLightBackground ? '#000000' : '#ffffff';
|
||||
ctx.textAlign = 'center';
|
||||
|
||||
// Afficher la valeur originale (pas de conversion en %)
|
||||
ctx.fillText(gradeData.value.toString(), x + cellWidth/2, y + cellHeight/2 + 4);
|
||||
} else {
|
||||
ctx.fillStyle = '#6b7280';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('-', x + cellWidth/2, y + cellHeight/2 + 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Labels des étudiants (vertical, en haut)
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.font = '12px Arial';
|
||||
for (let i = 0; i < students.length; i++) {
|
||||
const x = padding + i * cellWidth + cellWidth/2;
|
||||
const y = padding - 10;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(-Math.PI/4);
|
||||
ctx.fillText(students[i], 0, 0);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Labels des éléments (à gauche)
|
||||
ctx.textAlign = 'right';
|
||||
ctx.font = '10px Arial';
|
||||
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
const x = padding - 10;
|
||||
const y = padding + i * cellHeight + cellHeight/2 + 4;
|
||||
|
||||
// Utiliser la couleur de l'élément si disponible
|
||||
const element = elements[i];
|
||||
ctx.fillStyle = colors[element] || '#374151';
|
||||
|
||||
// Tronquer le texte si trop long
|
||||
let displayText = element;
|
||||
if (element.length > 25) {
|
||||
displayText = element.substring(0, 22) + '...';
|
||||
}
|
||||
|
||||
ctx.fillText(displayText, x, y);
|
||||
}
|
||||
|
||||
// Légende spéciale pour les éléments de notation
|
||||
drawGradingElementsLegend(ctx, canvas, scaleColors);
|
||||
}
|
||||
|
||||
// Fonction pour déterminer si une couleur est claire ou foncée
|
||||
function isColorLight(hexColor) {
|
||||
const rgb = hexToRgb(hexColor);
|
||||
if (!rgb) return true;
|
||||
|
||||
// Calcul de la luminance relative
|
||||
const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
|
||||
return luminance > 0.5;
|
||||
}
|
||||
|
||||
// Fonction pour dessiner la légende spécialisée
|
||||
function drawGradingElementsLegend(ctx, canvas, scaleColors) {
|
||||
const legendY = canvas.height - 80;
|
||||
const legendItemHeight = 15;
|
||||
const legendItemWidth = 15;
|
||||
const legendSpacing = 5;
|
||||
|
||||
ctx.font = '11px Arial';
|
||||
ctx.textAlign = 'left';
|
||||
|
||||
// Titre de la légende
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.fillText('Échelle de notation :', 20, legendY - 10);
|
||||
|
||||
let currentX = 20;
|
||||
let currentY = legendY;
|
||||
|
||||
// Afficher les valeurs de l'échelle configurée
|
||||
const sortedScaleItems = Object.entries(scaleColors).sort((a, b) => {
|
||||
// Trier les valeurs numériques avant les valeurs spéciales
|
||||
const aIsNum = !isNaN(parseInt(a[0]));
|
||||
const bIsNum = !isNaN(parseInt(b[0]));
|
||||
|
||||
if (aIsNum && bIsNum) return parseInt(a[0]) - parseInt(b[0]);
|
||||
if (aIsNum && !bIsNum) return -1;
|
||||
if (!aIsNum && bIsNum) return 1;
|
||||
return a[0].localeCompare(b[0]);
|
||||
});
|
||||
|
||||
for (const [value, config] of sortedScaleItems) {
|
||||
// Rectangle de couleur
|
||||
ctx.fillStyle = config.color;
|
||||
ctx.fillRect(currentX, currentY, legendItemWidth, legendItemHeight);
|
||||
|
||||
// Bordure
|
||||
ctx.strokeStyle = '#d1d5db';
|
||||
ctx.strokeRect(currentX, currentY, legendItemWidth, legendItemHeight);
|
||||
|
||||
// Texte
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.fillText(`${value}: ${config.label}`, currentX + legendItemWidth + legendSpacing, currentY + legendItemHeight - 3);
|
||||
|
||||
// Passer à la ligne après quelques éléments pour éviter le débordement
|
||||
currentX += 120;
|
||||
if (currentX > canvas.width - 150) {
|
||||
currentX = 20;
|
||||
currentY += legendItemHeight + legendSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
// Note explicative pour les notes numériques
|
||||
ctx.fillStyle = '#6b7280';
|
||||
ctx.font = '10px Arial';
|
||||
ctx.fillText('Notes numériques : dégradé rouge (0%) → vert (100%)', 20, currentY + 25);
|
||||
}
|
||||
|
||||
// === APPELS AUX HEATMAPS (après toutes les définitions de fonctions) ===
|
||||
|
||||
{% if heatmap_competences %}
|
||||
// Heatmap des compétences
|
||||
createHeatmap('competencesHeatmap', competencesData, 'compétence');
|
||||
{% endif %}
|
||||
|
||||
{% if heatmap_domains %}
|
||||
// Heatmap des domaines
|
||||
createHeatmap('domainsHeatmap', domainsData, 'domaine');
|
||||
{% endif %}
|
||||
|
||||
{% if heatmap_grading_elements %}
|
||||
// Heatmap des éléments de notation avec couleurs de base
|
||||
createGradingElementsHeatmap('gradingElementsHeatmap', gradingElementsData);
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user