768 lines
31 KiB
HTML
768 lines
31 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Résultats - {{ assessment.title }} - Gestion Scolaire{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<a href="{{ url_for('assessments.detail', id=assessment.id) }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium mb-2 inline-block">
|
|
← Retour à l'évaluation
|
|
</a>
|
|
<h1 class="text-2xl font-bold text-gray-900">Résultats - {{ assessment.title }}</h1>
|
|
<p class="text-gray-600">{{ assessment.class_group.name }} - {{ assessment.date.strftime('%d/%m/%Y') }} - Trimestre {{ assessment.trimester }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistiques générales -->
|
|
<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">Statistiques de l'évaluation</h2>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-blue-600">{{ statistics.count }}</div>
|
|
<div class="text-sm text-gray-500">Élèves</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-green-600">{{ statistics.mean }}</div>
|
|
<div class="text-sm text-gray-500">Moyenne</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-purple-600">{{ statistics.median }}</div>
|
|
<div class="text-sm text-gray-500">Médiane</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-red-600">{{ statistics.min }}</div>
|
|
<div class="text-sm text-gray-500">Minimum</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-green-600">{{ statistics.max }}</div>
|
|
<div class="text-sm text-gray-500">Maximum</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-orange-600">{{ statistics.std_dev }}</div>
|
|
<div class="text-sm text-gray-500">Écart-type</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 text-sm text-gray-600 text-center">
|
|
Total des points de l'évaluation : {{ "%.1f"|format(total_max_points) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Histogramme des notes -->
|
|
<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">Distribution des notes</h2>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<canvas id="scoresChart" width="400" height="200"></canvas>
|
|
</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">
|
|
<h2 class="text-lg font-medium text-gray-900">Résultats par élève</h2>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Élève
|
|
</th>
|
|
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Note totale
|
|
</th>
|
|
{% for exercise in assessment.exercises|sort(attribute='order') %}
|
|
<th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
{{ exercise.title }}
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for student_data in students_scores %}
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm font-medium text-gray-900">
|
|
{{ student_data.student.last_name }} {{ student_data.student.first_name }}
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center">
|
|
<div class="text-sm font-bold text-gray-900">
|
|
{{ "%.1f"|format(student_data.total_score) }} / {{ "%.1f"|format(student_data.total_max_points) }}
|
|
</div>
|
|
</td>
|
|
{% for exercise in assessment.exercises|sort(attribute='order') %}
|
|
<td class="px-6 py-4 whitespace-nowrap text-center">
|
|
<div class="text-sm text-gray-900">
|
|
{% if exercise.id in student_data.exercises %}
|
|
{{ "%.1f"|format(student_data.exercises[exercise.id].score) }} / {{ "%.1f"|format(student_data.exercises[exercise.id].max_points) }}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
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;
|
|
const maxScore = totalMaxPoints;
|
|
const binWidth = 1; // Groupes de 1 point
|
|
const numBins = Math.ceil(maxScore - minScore); // Nombre de bins basé sur le total des points
|
|
|
|
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 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]++;
|
|
studentsInBins[binIndex].push(`${student.name} (${student.score.toFixed(1)})`);
|
|
}
|
|
});
|
|
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'Nombre d\'élèves',
|
|
data: bins,
|
|
backgroundColor: 'rgba(59, 130, 246, 0.5)',
|
|
borderColor: 'rgba(59, 130, 246, 1)',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: 'Distribution des notes'
|
|
},
|
|
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: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
stepSize: 1
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Nombre d\'élèves'
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Intervalles de notes'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// === 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 %} |