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-group mb-3">
  335. <label>Taille des caractères (entête)</label>
  336. <input type="range" class="form-control" name="header_font_size" min="1" max="1.6" step="0.01">
  337. </div>
  338. <div class="form-group mb-3">
  339. <label>Hauteur des lignes</label>
  340. <input type="range" class="form-control" name="line_height" min="0.5" max="1.5" step="0.01">
  341. </div>
  342. <div class="form-check"><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>
  343. <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>
  344. </div>
  345. <div class="modal-footer border-top-0 d-flex justify-content-center">
  346. <button type="submit" class="btn-cr btn-cr-blue">Générer</button>
  347. </div>
  348. </form>
  349. </div>
  350. </div>
  351. </div>
  352. {% endblock %}
  355. {% block javascripts %}
  356. {{ parent() }}
  357. <script>
  358. (function(){
  359. 'use strict';
  361. /* ── Données depuis le controller ─────────────────────── */
  362. const courseLabels = {{ courseLabels | raw }};
  363. const seqLabels = {{ seqLabels | raw }};
  364. const seqIds = {{ seqIds | raw }};
  365. const heatmapData = {{ heatmapData | raw }};
  366. const generalAvgBySeq = {{ generalAvgBySeq | raw }};
  367. const successFailData = {{ successFailData | raw }};
  368. const quaterProfiles = {{ quaterProfiles | raw }};
  369. {% if classroom.apc %}
  370. const mentionCategories = {{ mentionCategories | raw }};
  371. const mentionCountCategories = {{ mentionCountCategories | raw }};
  372. {% endif %}
  374. /* ── Palette & defaults ───────────────────────────────── */
  375. const C = {
  376. blue:'#185fa5', rose:'#a32d2d', amber:'#854f0b',
  377. teal:'#0f6e56', vi:'#534ab7', em:'#3b6d11', orange:'#9a4f0b',
  378. grid:'rgba(0,0,0,.07)', bg:'#ffffff', txt:'#1a2535', dim:'#4a5568'
  379. };
  380. const PALQ = ['rgba(24,95,165,.35)','rgba(15,110,86,.35)','rgba(83,74,183,.35)'];
  381. const PALQ_BD = ['#185fa5', '#0f6e56', '#534ab7'];
  382. const PAL = ['#3b82f6','#f59e0b','#f43f5e','#10b981','#8b5cf6','#14b8a6','#f97316','#84cc16'];
  384. Chart.defaults.color = C.dim;
  385. Chart.defaults.font.family = "'DM Sans','Segoe UI',sans-serif";
  386. Chart.defaults.font.size = 12;
  387. const TIP = {backgroundColor:'#ffffff',borderColor:'rgba(0,0,0,.12)',borderWidth:1,titleColor:C.txt,bodyColor:C.dim,padding:12,cornerRadius:10};
  388. const AX = (o={}) => ({grid:{color:C.grid,drawBorder:false},ticks:{color:C.dim},border:{display:false},...o});
  390. /* ══════════════════════════════════════════════════════
  391. 1. HEATMAP — table HTML colorée cours × séquences
  392. Résout le problème de départ : chaque cellule est
  393. indépendante. null = gris "pas d'éval enregistrée".
  394. ══════════════════════════════════════════════════════ */
  395. (function buildHeatmap(){
  396. const thead = document.querySelector('#heatmap-table thead tr');
  397. const tbody = document.getElementById('heatmap-body');
  399. // En-têtes séquences
  400. seqLabels.forEach(lbl => {
  401. const th = document.createElement('th');
  402. th.textContent = lbl;
  403. thead.appendChild(th);
  404. });
  405. // Colonne moyenne
  406. const thAvg = document.createElement('th');
  407. thAvg.textContent = 'Moy.';
  408. thead.appendChild(thAvg);
  410. // Lignes de données
  411. heatmapData.forEach(row => {
  412. const tr = document.createElement('tr');
  414. // Cellule nom de la matière
  415. const tdName = document.createElement('td');
  416. tdName.className = 'course-td';
  417. tdName.textContent = row.course;
  418. tr.appendChild(tdName);
  420. let sum = 0, cnt = 0;
  422. // Cellules par séquence
  423. seqIds.forEach(sid => {
  424. const val = row['s' + sid];
  425. const td = document.createElement('td');
  427. if (val === null || val === undefined) {
  428. td.className = 'hm-null';
  429. td.textContent = '—';
  430. } else {
  431. td.className = val < 10 ? 'hm-red' : val < 14 ? 'hm-yellow' : 'hm-green';
  432. td.textContent = val.toFixed(1);
  433. sum += val; cnt++;
  434. }
  435. tr.appendChild(td);
  436. });
  438. // Cellule moyenne
  439. const tdAvg = document.createElement('td');
  440. if (cnt > 0) {
  441. const avg = sum / cnt;
  442. tdAvg.className = avg < 10 ? 'hm-red' : avg < 14 ? 'hm-yellow' : 'hm-green';
  443. tdAvg.textContent = avg.toFixed(1);
  444. tdAvg.style.fontWeight = '700';
  445. } else {
  446. tdAvg.className = 'hm-null';
  447. tdAvg.textContent = '—';
  448. }
  449. tr.appendChild(tdAvg);
  450. tbody.appendChild(tr);
  451. });
  452. })();
  454. /* ══════════════════════════════════════════════════════
  455. 2. ÉVOLUTION MOYENNE GÉNÉRALE
  456. null = séquence pas encore notée → pas de point tracé
  457. ══════════════════════════════════════════════════════ */
  458. if (document.getElementById('c-evol')) {
  459. new Chart('c-evol', {
  460. type: 'line',
  461. data: {
  462. labels: seqLabels,
  463. datasets: [{
  464. label: 'Moyenne générale',
  465. data : generalAvgBySeq,
  466. borderColor: '#0f6e56', backgroundColor: 'rgba(15,110,86,.08)',
  467. borderWidth: 2.5, pointBackgroundColor: '#0f6e56',
  468. pointRadius: generalAvgBySeq.map(v => v !== null ? 5 : 0),
  469. pointHoverRadius: 7, tension: .3, fill: true,
  470. spanGaps: false, // ne pas relier les points si null entre eux
  471. }]
  472. },
  473. options: {
  474. responsive: true,
  475. plugins: {
  476. legend: { display: false },
  477. tooltip: { ...TIP, callbacks: { label: c => c.raw !== null ? ' Moy. : ' + c.raw + '/20' : ' Pas d\'évaluation' } },
  478. },
  479. scales: {
  480. x: { ...AX() },
  481. y: { ...AX(), min: 0, max: 20, ticks: { ...AX().ticks, stepSize: 5 } },
  482. },
  483. },
  484. plugins: [{
  485. id: 'seuil',
  486. afterDraw(ch) {
  487. const { ctx, chartArea: { left, right }, scales: { y } } = ch;
  488. const yp = y.getPixelForValue(10);
  489. ctx.save();
  490. ctx.beginPath(); ctx.moveTo(left, yp); ctx.lineTo(right, yp);
  491. ctx.strokeStyle = 'rgba(163,45,45,.5)'; ctx.setLineDash([5, 4]);
  492. ctx.lineWidth = 1.5; ctx.stroke();
  493. ctx.fillStyle = 'rgba(163,45,45,.7)'; ctx.font = '11px DM Sans';
  494. ctx.fillText('Seuil 10', left + 4, yp - 5);
  495. ctx.restore();
  496. }
  497. }]
  498. });
  499. }
  501. /* ══════════════════════════════════════════════════════
  502. 3. RÉUSSITE VS ÉCHEC (barres empilées)
  503. Données depuis evaluation.success_h/f + faillures_h/f
  504. → pas depuis mark, déjà agrégées par le controller
  505. ══════════════════════════════════════════════════════ */
  506. if (document.getElementById('c-success') && successFailData.labels.length > 0) {
  507. new Chart('c-success', {
  508. type: 'bar',
  509. data: {
  510. labels: successFailData.labels,
  511. datasets: [
  512. {
  513. label: 'Réussite', data: successFailData.success,
  514. backgroundColor: 'rgba(59,109,17,.55)', borderColor: C.em,
  515. borderWidth: 1.5, borderRadius: 4, borderSkipped: false,
  516. },
  517. {
  518. label: 'Échec', data: successFailData.failures,
  519. backgroundColor: 'rgba(163,45,45,.55)', borderColor: C.rose,
  520. borderWidth: 1.5, borderRadius: 4, borderSkipped: false,
  521. },
  522. {
  523. label: 'Absents', data: successFailData.absents,
  524. backgroundColor: 'rgba(133,79,11,.45)', borderColor: C.amber,
  525. borderWidth: 1.5, borderRadius: 4, borderSkipped: false,
  526. },
  527. ],
  528. },
  529. options: {
  530. responsive: true,
  531. interaction: { mode: 'index', intersect: false },
  532. plugins: {
  533. legend: { position: 'top', align: 'end', labels: { boxWidth: 9, boxHeight: 9, borderRadius: 3, useBorderRadius: true, color: C.txt, padding: 12 } },
  534. tooltip: { ...TIP },
  535. },
  536. scales: {
  537. x: { ...AX(), stacked: true, ticks: { ...AX().ticks, maxRotation: 35 } },
  538. y: { ...AX(), stacked: true, beginAtZero: true },
  539. },
  540. },
  541. });
  542. }
  544. /* ══════════════════════════════════════════════════════
  545. 4. RADAR PAR TRIMESTRE
  546. Révèle le profil de la classe : quelle matière est
  547. forte/faible, stable ou en progression entre trimestres
  548. ══════════════════════════════════════════════════════ */
  549. if (document.getElementById('c-radar') && quaterProfiles.length > 0) {
  550. new Chart('c-radar', {
  551. type: 'radar',
  552. data: {
  553. labels: courseLabels,
  554. datasets: quaterProfiles.map((qp, i) => ({
  555. label : qp.label,
  556. data : qp.data,
  557. backgroundColor : PALQ[i % PALQ.length],
  558. borderColor : PALQ_BD[i % PALQ_BD.length],
  559. borderWidth : 2,
  560. pointBackgroundColor: PALQ_BD[i % PALQ_BD.length],
  561. pointRadius : 4,
  562. spanGaps : true,
  563. })),
  564. },
  565. options: {
  566. responsive: true,
  567. plugins: {
  568. legend: {
  569. position: 'top', align: 'end',
  570. labels: { boxWidth: 9, boxHeight: 9, borderRadius: 3, useBorderRadius: true, color: C.txt, padding: 12 }
  571. },
  572. tooltip: { ...TIP, callbacks: { label: c => ' ' + c.dataset.label + ' : ' + (c.raw !== null ? c.raw + '/20' : '—') } },
  573. },
  574. scales: {
  575. r: {
  576. min: 0, max: 20,
  577. backgroundColor: 'rgba(24,95,165,.04)',
  578. grid : { color: C.grid },
  579. angleLines : { color: C.grid },
  580. ticks : { color: C.dim, backdropColor: 'transparent', stepSize: 5 },
  581. pointLabels : { color: C.dim, font: { size: 11 } },
  582. },
  583. },
  584. },
  585. });
  586. }
  588. /* ══════════════════════════════════════════════════════
  589. 5. DONUT EXAMENS OFFICIELS (seulement si classe examen)
  590. ══════════════════════════════════════════════════════ */
  591. {% if classroom.apc %}
  592. if (document.getElementById('c-mentions') && mentionCountCategories.length > 0) {
  593. new Chart('c-mentions', {
  594. type: 'doughnut',
  595. data: {
  596. labels: mentionCategories,
  597. datasets: [{
  598. data: mentionCountCategories,
  599. backgroundColor: PAL.slice(0, mentionCategories.length),
  600. borderColor: '#f0f4f8', borderWidth: 3, hoverOffset: 8,
  601. }],
  602. },
  603. options: {
  604. responsive: true, cutout: '58%',
  605. plugins: {
  606. legend: { position: 'bottom', labels: { boxWidth: 8, boxHeight: 8, borderRadius: 2, useBorderRadius: true, color: C.txt, padding: 8, font: { size: 11 } } },
  607. tooltip: { ...TIP, callbacks: { label: c => ' ' + c.label + ' : ' + c.raw } },
  608. },
  609. },
  610. });
  611. }
  612. {% endif %}
  614. /* ── Modales actions ──────────────────────────────────── */
  615. $(document).ready(function () {
  616. $('#form_modal_courses').on('show.bs.modal', function (e) {
  617. $('#form_modal_courses form').attr('action', $(e.relatedTarget).data('action'));
  618. });
  619. $('[data-toggle="modal"]').on('click', function () {
  620. $('#form_modal_reportcard_params form').attr('action', $(this).data('action'));
  621. });
  622. });
  624. })();
  625. </script>
  626. {% endblock %}