templates/classroom/show.html.twig line 1

Open in your IDE?
  1. {% extends "layout/backEndLayout.html.twig" %}
  3. {% block stylesheets %}
  4. {{ parent() }}
  5. <style>
  6. /* ══════════════════════════════════════════════════════
  7. TOKENS
  8. ══════════════════════════════════════════════════════ */
  9. :root {
  10. --bg : #f0f4f8; --s1 : #ffffff; --s2 : #e8edf3;
  11. --bdr : rgba(0,0,0,.09); --bdr-hi: rgba(0,0,0,.18);
  12. --blue : #185fa5; --rose : #a32d2d; --amber: #854f0b;
  13. --teal : #0f6e56; --em : #3b6d11; --vi : #534ab7;
  14. --txt : #1a2535; --dim : #4a5568; --muted: #7a8899;
  15. --r: 14px; --font: 'DM Sans','Segoe UI',sans-serif;
  16. }
  18. /* ── Layout ──────────────────────────────────────────── */
  19. .cr-page { font-family:var(--font); color:var(--txt); }
  20. .cr-page * { box-sizing:border-box; }
  22. /* ── Entête classe ───────────────────────────────────── */
  23. .cr-head {
  24. background:var(--s1); border:1px solid var(--bdr);
  25. border-radius:var(--r); padding:20px 24px; margin-bottom:20px;
  26. display:flex; align-items:center; justify-content:space-between;
  27. flex-wrap:wrap; gap:14px;
  28. }
  29. .cr-head__name { font-size:22px; font-weight:700; letter-spacing:-.02em; }
  30. .cr-head__meta { font-size:13px; color:var(--dim); }
  31. .cr-head__badges { display:flex; gap:8px; flex-wrap:wrap; }
  32. .badge-pill {
  33. display:inline-flex; align-items:center; gap:5px; padding:5px 12px;
  34. border-radius:20px; font-size:12px; font-weight:500; border:1px solid var(--bdr);
  35. }
  36. .bp-blue { background:rgba(59,130,246,.15); color:var(--blue); }
  37. .bp-amber { background:rgba(245,158,11,.15); color:var(--amber); }
  38. .bp-teal { background:rgba(20,184,166,.15); color:var(--teal); }
  40. /* ── Actions ─────────────────────────────────────────── */
  41. .cr-actions {
  42. background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r);
  43. padding:14px 18px; margin-bottom:20px; display:flex; flex-wrap:wrap; gap:8px;
  44. }
  45. .btn-cr {
  46. display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  47. border-radius:8px; font-size:12.5px; font-weight:500; text-decoration:none;
  48. border:1px solid var(--bdr); cursor:pointer; transition:background .18s,transform .12s;
  49. color:var(--txt); background:var(--s2);
  50. }
  51. .btn-cr:hover { transform:translateY(-1px); border-color:var(--bdr-hi); color:var(--txt); }
  52. .btn-cr-blue { background:rgba(59,130,246,.15); color:var(--blue); border-color:rgba(59,130,246,.3); }
  53. .btn-cr-amber { background:rgba(245,158,11,.15); color:var(--amber); border-color:rgba(245,158,11,.3); }
  54. .btn-cr-teal { background:rgba(20,184,166,.15); color:var(--teal); border-color:rgba(20,184,166,.3); }
  55. .btn-cr-rose { background:rgba(244,63,94,.15); color:var(--rose); border-color:rgba(244,63,94,.3); }
  56. .btn-cr-vi { background:rgba(139,92,246,.15); color:var(--vi); border-color:rgba(139,92,246,.3); }
  57. .btn-cr-em { background:rgba(16,185,129,.15); color:var(--em); border-color:rgba(16,185,129,.3); }
  59. /* ── Tables ──────────────────────────────────────────── */
  60. .cr-table-wrap {
  61. background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r);
  62. overflow:hidden; margin-bottom:20px;
  63. }
  64. .cr-table-title {
  65. padding:14px 18px 12px; border-bottom:1px solid var(--bdr);
  66. font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;
  67. }
  68. .cr-table-title .dot { width:7px;height:7px;border-radius:50%; }
  69. .d-bl{background:var(--blue);box-shadow:0 0 5px var(--blue);}
  70. .d-am{background:var(--amber);box-shadow:0 0 5px var(--amber);}
  71. table.cr-tbl { width:100%; border-collapse:collapse; font-size:13px; }
  72. table.cr-tbl th { padding:10px 14px; color:var(--dim); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--bdr); background:var(--s2); }
  73. table.cr-tbl td { padding:9px 14px; border-bottom:1px solid rgba(0,0,0,.05); }
  74. table.cr-tbl tr:last-child td { border-bottom:none; }
  75. table.cr-tbl tr:hover td { background:rgba(0,0,0,.025); }
  76. .tag-exam { display:inline-block; background:rgba(244,63,94,.15); color:var(--rose); padding:2px 8px; border-radius:4px; font-size:11px; }
  78. /* ── Grille graphiques ───────────────────────────────── */
  79. .chart-grid { display:grid; gap:16px; margin-bottom:16px; }
  80. .cg-2 { grid-template-columns:1fr 1fr; }
  81. .cg-1 { grid-template-columns:1fr; }
  82. @media(max-width:900px){ .cg-2 { grid-template-columns:1fr; } }
  84. /* ── Carte graphique ─────────────────────────────────── */
  85. .cc {
  86. background:var(--s1); border:1px solid var(--bdr); border-radius:var(--r);
  87. overflow:hidden; transition:border-color .2s; animation:cIn .4s ease both;
  88. }
  89. .cc:hover { border-color:var(--bdr-hi); }
  90. .cc__hd {
  91. display:flex; align-items:center; justify-content:space-between;
  92. padding:13px 18px 11px; border-bottom:1px solid var(--bdr);
  93. }
  94. .cc__lbl { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
  95. .cc__dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
  96. .d-tl{background:var(--teal);box-shadow:0 0 5px var(--teal);}
  97. .d-rs{background:var(--rose);box-shadow:0 0 5px var(--rose);}
  98. .d-vi{background:var(--vi);box-shadow:0 0 5px var(--vi);}
  99. .d-em{background:var(--em);box-shadow:0 0 5px var(--em);}
  100. .cc__sub { font-size:11px; color:var(--muted); }
  101. .cc__bd { padding:16px 18px 18px; }
  103. /* ── Heatmap ─────────────────────────────────────────── */
  104. .heatmap { overflow-x:auto; }
  105. .heatmap table { width:100%; border-collapse:collapse; font-size:12px; }
  106. .heatmap th { padding:7px 10px; color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.05em; text-align:center; font-weight:500; }
  107. .heatmap th.course-th { text-align:left; min-width:140px; }
  108. .heatmap td { padding:5px 8px; text-align:center; border:1px solid rgba(0,0,0,.05); font-weight:500; font-size:12.5px; border-radius:4px; transition:opacity .2s; }
  109. .heatmap td:hover { opacity:.8; }
  110. .heatmap td.course-td { text-align:left; color:var(--txt); font-weight:400; font-size:12px; padding-left:4px; background:transparent !important; border:none; }
  111. .hm-null { background:rgba(0,0,0,.05); color:var(--muted); }
  112. .hm-red { background:rgba(163,45,45,.15); color:#7f1d1d; }
  113. .hm-yellow { background:rgba(133,79,11,.15); color:#451a03; }
  114. .hm-green { background:rgba(15,110,86,.15); color:#064e3b; }
  116. @keyframes cIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  117. .cc:nth-child(1){animation-delay:.04s}.cc:nth-child(2){animation-delay:.1s}
  119. #c-evol { max-height:220px; width:100%!important; }
  120. #c-success{ max-height:260px; width:100%!important; }
  121. #c-radar { max-height:300px; width:100%!important; }
  122. #c-mentions{ max-height:220px; max-width:220px; margin:auto; display:block; }
  123. </style>
  124. {% endblock %}
  126. {% block content %}
  127. <div class="cr-page p-3">
  129. {# ── Entête classe ────────────────────────────────────────────── #}
  130. <div class="cr-head">
  131. <div>
  132. <div class="cr-head__name">{{ classroom.name }}</div>
  133. <div class="cr-head__meta">
  134. Niveau {{ classroom.level }}
  135. {% if mainteacher %} · Titulaire : <strong>{{ mainteacher.fullName }}</strong>{% endif %}
  136. </div>
  137. </div>
  138. <div class="cr-head__badges">
  139. <span class="badge-pill bp-blue"><i class="fa fa-users"></i> {{ studentEnrolled|length }} élèves</span>
  140. {% if classroom.apc %}
  141. <span class="badge-pill bp-amber"><i class="fa fa-graduation-cap"></i> Classe d'examen</span>
  142. {% endif %}
  143. </div>
  144. </div>
  146. {# ── Boutons actions ──────────────────────────────────────────── #}
  147. <div class="cr-actions">
  148. <a class="btn-cr btn-cr-blue" href="{{ path('admin_classrooms') }}"><i class="fa fa-list"></i> Liste</a>
  149. {% if is_granted('ROLE_ADMIN') %}
  150. <a class="btn-cr btn-cr-blue" href="{{ path('admin_classrooms_edit', {id: classroom.id}) }}"><i class="fa fa-edit"></i> Modifier</a>
  151. <a class="btn-cr btn-cr-amber" data-toggle="modal" data-target="#form_modal_courses" data-action="{{ path('admin_classrooms_recapitulatif_seq', {id: classroom.id}) }}"><i class="fa fa-file-pdf-o"></i> Recap Seq</a>
  152. <a class="btn-cr btn-cr-amber" href="{{ path('admin_classrooms_reportcards_seq', {id: classroom.id}) }}"><i class="fa fa-file"></i> Bull Seq</a>
  153. <a class="btn-cr btn-cr-teal" data-toggle="modal" data-target="#form_modal_reportcard_params" data-action="{{ path('admin_classrooms_reportcards_trim_2024', {id: classroom.id}) }}"><i class="fa fa-file"></i> Bull Trim</a>
  154. <a class="btn-cr btn-cr-vi" data-toggle="modal" data-target="#form_modal_reportcard_params" data-action="{{ path('admin_class_reportcards_year_2024', {id: classroom.id}) }}"><i class="fa fa-file-pdf-o"></i> Bull Ann</a>
  155. <a class="btn-cr btn-cr-rose" data-toggle="modal" data-target="#form_modal_courses" data-action="{{ path('admin_classrooms_recapitulatif_trim', {id: classroom.id}) }}"><i class="fa fa-file-pdf-o"></i> Recap Trim</a>
  156. <a class="btn-cr btn-cr-em" data-toggle="modal" data-target="#form_modal_courses" data-action="{{ path('admin_classrooms_recapitulatif_ann_excel', {id: classroom.id}) }}"><i class="fa fa-file-excel-o"></i> Recap Ann</a>
  157. {% endif %}
  158. </div>
  160. {# ── Tables élèves + matières ─────────────────────────────────── #}
  161. <div class="cg-2 chart-grid">
  163. <div class="cr-table-wrap">
  164. <div class="cr-table-title"><span class="dot d-bl"></span>Élèves inscrits</div>
  165. <table class="cr-tbl">
  166. <thead><tr><th>Matricule</th><th>Nom</th><th>Prénom</th>{% if is_granted('ROLE_ADMIN') %}<th>Action</th>{% endif %}</tr></thead>
  167. <tbody>
  168. {% set effectif = 0 %}
  169. {% for std in studentEnrolled %}
  170. <tr>
  171. <td><a href="{{ path('admin_students_show', {id: std.id}) }}" style="color:var(--blue)">{{ std.matricule }}</a></td>
  172. <td>{{ std.lastname }}</td>
  173. <td>{{ std.firstname }}</td>
  174. {% if is_granted('ROLE_ADMIN') %}
  175. <td>
  176. <a class="btn-cr btn-cr-rose" style="padding:3px 8px;font-size:11px" href="{{ path('admin_students_unregister', {id: std.id, room_id: classroom.id}) }}"><i class="fa fa-ban"></i></a>
  177. <a class="btn-cr" style="padding:3px 8px;font-size:11px" href="{{ path('admin_students_edit', {id: std.id}) }}"><i class="fa fa-pencil-square-o"></i></a>
  178. </td>
  179. {% endif %}
  180. </tr>
  181. {% set effectif = effectif + 1 %}
  182. {% endfor %}
  183. <tr><td colspan="2" style="color:var(--dim);font-size:11.5px">Effectif total</td><td style="font-weight:700;color:var(--blue)">{{ effectif }}</td>{% if is_granted('ROLE_ADMIN') %}<td></td>{% endif %}</tr>
  184. </tbody>
  185. </table>
  186. </div>
  188. <div class="cr-table-wrap">
  189. <div class="cr-table-title"><span class="dot d-am"></span>Matières programmées</div>
  190. <table class="cr-tbl">
  191. <thead><tr><th>Module</th><th>Code</th><th>Intitulé</th><th>Coef</th><th>Enseignant</th></tr></thead>
  192. <tbody>
  193. {% set totalCoef = 0 %}
  194. {% for module in modules %}
  195. {% for course in module.courses %}
  196. <tr>
  197. <td style="color:var(--dim);font-size:11.5px">{{ module.name }}</td>
  198. <td><a href="{{ path('admin_courses_show', {id: course.id}) }}" style="color:var(--blue)">{{ course.code }}</a></td>
  199. <td>{{ course.wording }}</td>
  200. <td style="font-weight:600">{{ course.coefficient }}</td>
  201. <td>
  202. {% if attributions[course.id] is defined %}
  203. {% if is_granted('ROLE_ADMIN') %}
  204. <a href="{{ path('admin_attributions_edit', {id: attributions[course.id].id}) }}" style="color:var(--teal)">{{ attributions[course.id].teacher.fullName }}</a>
  205. {% else %}{{ attributions[course.id].teacher.fullName }}{% endif %}
  206. {% else %}
  207. {% if is_granted('ROLE_ADMIN') %}<a href="{{ path('admin_attributions_new') }}" style="color:var(--rose)">Non attribué</a>{% endif %}
  208. {% endif %}
  209. </td>
  210. </tr>
  211. {% set totalCoef = totalCoef + course.coefficient %}
  212. {% endfor %}
  213. {% endfor %}
  214. <tr><td colspan="3" style="color:var(--dim);font-size:11.5px">Total coefficients</td><td style="font-weight:700;color:var(--amber)" colspan="2">{{ totalCoef }}</td></tr>
  215. </tbody>
  216. </table>
  217. </div>
  219. </div>
  221. {# ══════════════════════════════════════════════════════════════
  222. SECTION GRAPHIQUES
  223. ══════════════════════════════════════════════════════════════ #}
  225. {# ── Graphique 1 : Heatmap cours × séquences ──────────────────
  226. Résout le problème original : chaque cellule est indépendante,
  227. null (pas d'éval) = gris neutre, aucun décalage possible.
  228. ─────────────────────────────────────────────────────────────── #}
  229. <div class="cc" style="margin-bottom:16px">
  230. <div class="cc__hd">
  231. <div class="cc__lbl"><span class="cc__dot d-am"></span>Performances séquentielles — toutes matières</div>
  232. <span class="cc__sub">rouge &lt;10 · jaune 10–13 · vert ≥14 · gris = pas d'évaluation enregistrée</span>
  233. </div>
  234. <div class="cc__bd heatmap">
  235. <table id="heatmap-table">
  236. <thead>
  237. <tr>
  238. <th class="course-th">Matière</th>
  239. {# Les en-têtes de séquences sont injectées par JS #}
  240. </tr>
  241. </thead>
  242. <tbody id="heatmap-body"></tbody>
  243. </table>
  244. </div>
  245. </div>
  247. {# ── Graphique 2 + 3 : Évolution + Réussite/Échec ─────────── #}
  248. <div class="chart-grid cg-2">
  250. <div class="cc">
  251. <div class="cc__hd">
  252. <div class="cc__lbl"><span class="cc__dot d-tl"></span>Évolution de la moyenne générale</div>
  253. <span class="cc__sub">séquence par séquence · ligne rouge = seuil 10</span>
  254. </div>
  255. <div class="cc__bd"><canvas id="c-evol"></canvas></div>
  256. </div>
  258. <div class="cc">
  259. <div class="cc__hd">
  260. <div class="cc__lbl"><span class="cc__dot d-rs"></span>Réussite vs Échec — {{ activeSeqLabel }}</div>
  261. <span class="cc__sub">séquence active · avec absents</span>
  262. </div>
  263. <div class="cc__bd"><canvas id="c-success"></canvas></div>
  264. </div>
  266. </div>
  268. {# ── Graphique 4 + 5 : Radar + Donut ─────────────────────────
  269. Radar : profil trimestriel de la classe (points forts/faibles)
  270. Donut : examens officiels (seulement si classe d'examen)
  271. ─────────────────────────────────────────────────────────────── #}
  272. <div class="chart-grid {{ classroom.apc ? 'cg-2' : 'cg-1' }}">
  274. <div class="cc">
  275. <div class="cc__hd">
  276. <div class="cc__lbl"><span class="cc__dot d-vi"></span>Profil trimestriel de la classe</div>
  277. <span class="cc__sub">radar par matière · T1, T2, T3</span>
  278. </div>
  279. <div class="cc__bd"><canvas id="c-radar"></canvas></div>
  280. </div>
  282. {% if classroom.apc %}
  283. <div class="cc">
  284. <div class="cc__hd">
  285. <div class="cc__lbl"><span class="cc__dot d-em"></span>Résultats examens officiels</div>
  286. <span class="cc__sub">répartition des mentions</span>
  287. </div>
  288. <div class="cc__bd" style="display:flex;align-items:center;justify-content:center">
  289. <canvas id="c-mentions"></canvas>
  290. </div>
  291. </div>
  292. {% endif %}
  294. </div>
  296. </div>{# /.cr-page #}
  298. {# ══════════════════════════════════════════════════════════════
  299. MODALES (inchangées)
  300. ══════════════════════════════════════════════════════════════ #}
  301. <div class="modal fade" id="form_modal_courses" tabindex="-1" role="dialog">
  302. <div class="modal-dialog modal-dialog-centered">
  303. <div class="modal-content" style="background:#ffffff;color:#1a2535;border:1px solid rgba(0,0,0,.12)">
  304. <div class="modal-header border-bottom-0">
  305. <h5 class="modal-title">Choisir les cours du récapitulatif</h5>
  306. <button type="button" class="close" data-dismiss="modal" style="color:var(--txt)"><span>&times;</span></button>
  307. </div>
  308. <form action="#" method="post">
  309. <div class="modal-body">
  310. {% for module in modules %}{% for course in module.courses %}
  311. <li class="list-group-item" style="background:transparent;border-color:var(--bdr);color:var(--txt)">
  312. <input class="form-check-input me-1" type="checkbox" checked name="selected_courses[]" value="{{ course.id }}">
  313. {{ course.wording }}
  314. </li>
  315. {% endfor %}{% endfor %}
  316. </div>
  317. <div class="modal-footer border-top-0 d-flex justify-content-center">
  318. <button type="submit" class="btn-cr btn-cr-em">Générer</button>
  319. </div>
  320. </form>
  321. </div>
  322. </div>
  323. </div>
  325. <div class="modal fade" id="form_modal_reportcard_params" tabindex="-1" role="dialog">
  326. <div class="modal-dialog modal-dialog-centered">
  327. <div class="modal-content" style="background:#ffffff;color:#1a2535;border:1px solid rgba(0,0,0,.12)">
  328. <div class="modal-header border-bottom-0">
  329. <h5 class="modal-title">Paramètres du bulletin</h5>
  330. <button type="button" class="close" data-dismiss="modal" style="color:var(--txt)"><span>&times;</span></button>
  331. </div>
  332. <form method="post">
  333. <div class="modal-body">
  334. <div class="form-check mb-2"><input class="form-check-input" type="checkbox" name="copyright" id="copyright"><label class="form-check-label" for="copyright">Copyright en pied de page</label></div>
  335. <div class="form-check"><input class="form-check-input" type="checkbox" name="reverse" id="reverse"><label class="form-check-label" for="reverse">Sens inverse</label></div>
  336. </div>
  337. <div class="modal-footer border-top-0 d-flex justify-content-center">
  338. <button type="submit" class="btn-cr btn-cr-blue">Générer</button>
  339. </div>
  340. </form>
  341. </div>
  342. </div>
  343. </div>
  344. {% endblock %}
  347. {% block javascripts %}
  348. {{ parent() }}
  349. <script>
  350. (function(){
  351. 'use strict';
  353. /* ── Données depuis le controller ─────────────────────── */
  354. const courseLabels = {{ courseLabels | raw }};
  355. const seqLabels = {{ seqLabels | raw }};
  356. const seqIds = {{ seqIds | raw }};
  357. const heatmapData = {{ heatmapData | raw }};
  358. const generalAvgBySeq = {{ generalAvgBySeq | raw }};
  359. const successFailData = {{ successFailData | raw }};
  360. const quaterProfiles = {{ quaterProfiles | raw }};
  361. {% if classroom.apc %}
  362. const mentionCategories = {{ mentionCategories | raw }};
  363. const mentionCountCategories = {{ mentionCountCategories | raw }};
  364. {% endif %}
  366. /* ── Palette & defaults ───────────────────────────────── */
  367. const C = {
  368. blue:'#185fa5', rose:'#a32d2d', amber:'#854f0b',
  369. teal:'#0f6e56', vi:'#534ab7', em:'#3b6d11', orange:'#9a4f0b',
  370. grid:'rgba(0,0,0,.07)', bg:'#ffffff', txt:'#1a2535', dim:'#4a5568'
  371. };
  372. const PALQ = ['rgba(24,95,165,.35)','rgba(15,110,86,.35)','rgba(83,74,183,.35)'];
  373. const PALQ_BD = ['#185fa5', '#0f6e56', '#534ab7'];
  374. const PAL = ['#3b82f6','#f59e0b','#f43f5e','#10b981','#8b5cf6','#14b8a6','#f97316','#84cc16'];
  376. Chart.defaults.color = C.dim;
  377. Chart.defaults.font.family = "'DM Sans','Segoe UI',sans-serif";
  378. Chart.defaults.font.size = 12;
  379. const TIP = {backgroundColor:'#ffffff',borderColor:'rgba(0,0,0,.12)',borderWidth:1,titleColor:C.txt,bodyColor:C.dim,padding:12,cornerRadius:10};
  380. const AX = (o={}) => ({grid:{color:C.grid,drawBorder:false},ticks:{color:C.dim},border:{display:false},...o});
  382. /* ══════════════════════════════════════════════════════
  383. 1. HEATMAP — table HTML colorée cours × séquences
  384. Résout le problème de départ : chaque cellule est
  385. indépendante. null = gris "pas d'éval enregistrée".
  386. ══════════════════════════════════════════════════════ */
  387. (function buildHeatmap(){
  388. const thead = document.querySelector('#heatmap-table thead tr');
  389. const tbody = document.getElementById('heatmap-body');
  391. // En-têtes séquences
  392. seqLabels.forEach(lbl => {
  393. const th = document.createElement('th');
  394. th.textContent = lbl;
  395. thead.appendChild(th);
  396. });
  397. // Colonne moyenne
  398. const thAvg = document.createElement('th');
  399. thAvg.textContent = 'Moy.';
  400. thead.appendChild(thAvg);
  402. // Lignes de données
  403. heatmapData.forEach(row => {
  404. const tr = document.createElement('tr');
  406. // Cellule nom de la matière
  407. const tdName = document.createElement('td');
  408. tdName.className = 'course-td';
  409. tdName.textContent = row.course;
  410. tr.appendChild(tdName);
  412. let sum = 0, cnt = 0;
  414. // Cellules par séquence
  415. seqIds.forEach(sid => {
  416. const val = row['s' + sid];
  417. const td = document.createElement('td');
  419. if (val === null || val === undefined) {
  420. td.className = 'hm-null';
  421. td.textContent = '—';
  422. } else {
  423. td.className = val < 10 ? 'hm-red' : val < 14 ? 'hm-yellow' : 'hm-green';
  424. td.textContent = val.toFixed(1);
  425. sum += val; cnt++;
  426. }
  427. tr.appendChild(td);
  428. });
  430. // Cellule moyenne
  431. const tdAvg = document.createElement('td');
  432. if (cnt > 0) {
  433. const avg = sum / cnt;
  434. tdAvg.className = avg < 10 ? 'hm-red' : avg < 14 ? 'hm-yellow' : 'hm-green';
  435. tdAvg.textContent = avg.toFixed(1);
  436. tdAvg.style.fontWeight = '700';
  437. } else {
  438. tdAvg.className = 'hm-null';
  439. tdAvg.textContent = '—';
  440. }
  441. tr.appendChild(tdAvg);
  442. tbody.appendChild(tr);
  443. });
  444. })();
  446. /* ══════════════════════════════════════════════════════
  447. 2. ÉVOLUTION MOYENNE GÉNÉRALE
  448. null = séquence pas encore notée → pas de point tracé
  449. ══════════════════════════════════════════════════════ */
  450. if (document.getElementById('c-evol')) {
  451. new Chart('c-evol', {
  452. type: 'line',
  453. data: {
  454. labels: seqLabels,
  455. datasets: [{
  456. label: 'Moyenne générale',
  457. data : generalAvgBySeq,
  458. borderColor: '#0f6e56', backgroundColor: 'rgba(15,110,86,.08)',
  459. borderWidth: 2.5, pointBackgroundColor: '#0f6e56',
  460. pointRadius: generalAvgBySeq.map(v => v !== null ? 5 : 0),
  461. pointHoverRadius: 7, tension: .3, fill: true,
  462. spanGaps: false, // ne pas relier les points si null entre eux
  463. }]
  464. },
  465. options: {
  466. responsive: true,
  467. plugins: {
  468. legend: { display: false },
  469. tooltip: { ...TIP, callbacks: { label: c => c.raw !== null ? ' Moy. : ' + c.raw + '/20' : ' Pas d\'évaluation' } },
  470. },
  471. scales: {
  472. x: { ...AX() },
  473. y: { ...AX(), min: 0, max: 20, ticks: { ...AX().ticks, stepSize: 5 } },
  474. },
  475. },
  476. plugins: [{
  477. id: 'seuil',
  478. afterDraw(ch) {
  479. const { ctx, chartArea: { left, right }, scales: { y } } = ch;
  480. const yp = y.getPixelForValue(10);
  481. ctx.save();
  482. ctx.beginPath(); ctx.moveTo(left, yp); ctx.lineTo(right, yp);
  483. ctx.strokeStyle = 'rgba(163,45,45,.5)'; ctx.setLineDash([5, 4]);
  484. ctx.lineWidth = 1.5; ctx.stroke();
  485. ctx.fillStyle = 'rgba(163,45,45,.7)'; ctx.font = '11px DM Sans';
  486. ctx.fillText('Seuil 10', left + 4, yp - 5);
  487. ctx.restore();
  488. }
  489. }]
  490. });
  491. }
  493. /* ══════════════════════════════════════════════════════
  494. 3. RÉUSSITE VS ÉCHEC (barres empilées)
  495. Données depuis evaluation.success_h/f + faillures_h/f
  496. → pas depuis mark, déjà agrégées par le controller
  497. ══════════════════════════════════════════════════════ */
  498. if (document.getElementById('c-success') && successFailData.labels.length > 0) {
  499. new Chart('c-success', {
  500. type: 'bar',
  501. data: {
  502. labels: successFailData.labels,
  503. datasets: [
  504. {
  505. label: 'Réussite', data: successFailData.success,
  506. backgroundColor: 'rgba(59,109,17,.55)', borderColor: C.em,
  507. borderWidth: 1.5, borderRadius: 4, borderSkipped: false,
  508. },
  509. {
  510. label: 'Échec', data: successFailData.failures,
  511. backgroundColor: 'rgba(163,45,45,.55)', borderColor: C.rose,
  512. borderWidth: 1.5, borderRadius: 4, borderSkipped: false,
  513. },
  514. {
  515. label: 'Absents', data: successFailData.absents,
  516. backgroundColor: 'rgba(133,79,11,.45)', borderColor: C.amber,
  517. borderWidth: 1.5, borderRadius: 4, borderSkipped: false,
  518. },
  519. ],
  520. },
  521. options: {
  522. responsive: true,
  523. interaction: { mode: 'index', intersect: false },
  524. plugins: {
  525. legend: { position: 'top', align: 'end', labels: { boxWidth: 9, boxHeight: 9, borderRadius: 3, useBorderRadius: true, color: C.txt, padding: 12 } },
  526. tooltip: { ...TIP },
  527. },
  528. scales: {
  529. x: { ...AX(), stacked: true, ticks: { ...AX().ticks, maxRotation: 35 } },
  530. y: { ...AX(), stacked: true, beginAtZero: true },
  531. },
  532. },
  533. });
  534. }
  536. /* ══════════════════════════════════════════════════════
  537. 4. RADAR PAR TRIMESTRE
  538. Révèle le profil de la classe : quelle matière est
  539. forte/faible, stable ou en progression entre trimestres
  540. ══════════════════════════════════════════════════════ */
  541. if (document.getElementById('c-radar') && quaterProfiles.length > 0) {
  542. new Chart('c-radar', {
  543. type: 'radar',
  544. data: {
  545. labels: courseLabels,
  546. datasets: quaterProfiles.map((qp, i) => ({
  547. label : qp.label,
  548. data : qp.data,
  549. backgroundColor : PALQ[i % PALQ.length],
  550. borderColor : PALQ_BD[i % PALQ_BD.length],
  551. borderWidth : 2,
  552. pointBackgroundColor: PALQ_BD[i % PALQ_BD.length],
  553. pointRadius : 4,
  554. spanGaps : true,
  555. })),
  556. },
  557. options: {
  558. responsive: true,
  559. plugins: {
  560. legend: {
  561. position: 'top', align: 'end',
  562. labels: { boxWidth: 9, boxHeight: 9, borderRadius: 3, useBorderRadius: true, color: C.txt, padding: 12 }
  563. },
  564. tooltip: { ...TIP, callbacks: { label: c => ' ' + c.dataset.label + ' : ' + (c.raw !== null ? c.raw + '/20' : '—') } },
  565. },
  566. scales: {
  567. r: {
  568. min: 0, max: 20,
  569. backgroundColor: 'rgba(24,95,165,.04)',
  570. grid : { color: C.grid },
  571. angleLines : { color: C.grid },
  572. ticks : { color: C.dim, backdropColor: 'transparent', stepSize: 5 },
  573. pointLabels : { color: C.dim, font: { size: 11 } },
  574. },
  575. },
  576. },
  577. });
  578. }
  580. /* ══════════════════════════════════════════════════════
  581. 5. DONUT EXAMENS OFFICIELS (seulement si classe examen)
  582. ══════════════════════════════════════════════════════ */
  583. {% if classroom.apc %}
  584. if (document.getElementById('c-mentions') && mentionCountCategories.length > 0) {
  585. new Chart('c-mentions', {
  586. type: 'doughnut',
  587. data: {
  588. labels: mentionCategories,
  589. datasets: [{
  590. data: mentionCountCategories,
  591. backgroundColor: PAL.slice(0, mentionCategories.length),
  592. borderColor: '#f0f4f8', borderWidth: 3, hoverOffset: 8,
  593. }],
  594. },
  595. options: {
  596. responsive: true, cutout: '58%',
  597. plugins: {
  598. legend: { position: 'bottom', labels: { boxWidth: 8, boxHeight: 8, borderRadius: 2, useBorderRadius: true, color: C.txt, padding: 8, font: { size: 11 } } },
  599. tooltip: { ...TIP, callbacks: { label: c => ' ' + c.label + ' : ' + c.raw } },
  600. },
  601. },
  602. });
  603. }
  604. {% endif %}
  606. /* ── Modales actions ──────────────────────────────────── */
  607. $(document).ready(function () {
  608. $('#form_modal_courses').on('show.bs.modal', function (e) {
  609. $('#form_modal_courses form').attr('action', $(e.relatedTarget).data('action'));
  610. });
  611. $('[data-toggle="modal"]').on('click', function () {
  612. $('#form_modal_reportcard_params form').attr('action', $(this).data('action'));
  613. });
  614. });
  616. })();
  617. </script>
  618. {% endblock %}