Update index.html

index.html

@@ -995,10 +995,15 @@ tbody tr:last-child td { border-bottom: none; }
           </div>
 
           <div class="panel">
-            <div class="panel-h"><h3>Stream distribution</h3></div>
+            <div class="panel-h"><h3>Stream distribution <span style="font-weight:400;opacity:.6">(model prediction)</span></h3></div>
             <div class="panel-b"><div class="dist" id="dist"></div></div>
           </div>
 
+          <div class="panel">
+            <div class="panel-h"><h3>Class placement <span style="font-weight:400;opacity:.6">(after top-up)</span></h3></div>
+            <div class="panel-b"><div class="dist" id="classDist"></div></div>
+          </div>
+
           <div class="panel">
             <div class="tools">
               <div class="search"><input type="search" id="search" placeholder="filter rows…"></div>
@@ -1185,6 +1190,47 @@ tbody tr:last-child td { border-bottom: none; }
         '<div class="dist-bar"><i class="' + barClass(name) + '" style="width:' + pct + '%"></i></div></div>';
     }).join("");
 
+    const classCounts = {};
+    const classInfo = {
+      "4C": { stream: "Account", second: "account", label: "Account", rule: "highest Mathematics mark (Account needs strong Math)" },
+      "4D": { stream: "Reka Cipta", second: "reka", label: "Reka Cipta", rule: "highest overall average" },
+    };
+    Object.values(classInfo).forEach((i) => { i.fit = 0; i.topup = 0; i.second = 0; });
+    displayList.forEach((r) => {
+      const c = String(r["Suggested Class"] || "").trim();
+      if (!c) return;
+      classCounts[c] = (classCounts[c] || 0) + 1;
+      const info = classInfo[c];
+      if (!info) return;
+      if (String(r["Recommended Stream"] || "") === info.stream) info.fit++;
+      else {
+        info.topup++;
+        if (String(r["Second Stream"] || "").toLowerCase().includes(info.second)) info.second++;
+      }
+    });
+    const classTot = Object.values(classCounts).reduce((a, b) => a + b, 0) || 1;
+    const classBar = { "4A": "s", "4B": "s", "4C": "a", "4D": "r", "SASTERA": "o" };
+    $("classDist").innerHTML = ["4A", "4B", "4C", "4D", "SASTERA"].map((name) => {
+      const n = classCounts[name] || 0;
+      const pct = Math.round((n / classTot) * 100);
+      const info = classInfo[name];
+      let btn = "", detail = "";
+      if (info) {
+        btn = ' <button type="button" class="info-btn" data-info="' + name + '" aria-label="Info about class ' + name + '" ' +
+          'style="width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--cyan);font-size:11px;line-height:1;cursor:pointer;margin-left:6px;vertical-align:middle">i</button>';
+        detail = '<div class="info-detail hidden" id="info-' + name + '" style="font-size:12px;line-height:1.6;color:var(--text-2, #9bb0c4);background:var(--cyan-dim);border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin:6px 0 2px">' +
+          '<div><b>' + info.fit + '</b> truly suited — the model recommended ' + esc(info.label) + '.</div>' +
+          '<div><b>' + info.topup + '</b> placed to fill the class to at least 25 — they come from Art / Other' +
+          (info.topup ? ' (' + info.second + ' of them had ' + esc(info.label) + ' as their second stream)' : '') + '.</div>' +
+          '<div style="opacity:.75">Top-up students are the Art / Other students with the ' + info.rule + '.</div></div>';
+      }
+      return '<div class="dist-item"><div class="name">' + esc(name) + btn + "<b>" + n + "</b></div>" +
+        '<div class="dist-bar"><i class="' + classBar[name] + '" style="width:' + pct + '%"></i></div>' + detail + "</div>";
+    }).join("");
+    $("classDist").querySelectorAll(".info-btn").forEach((b) => {
+      b.addEventListener("click", () => $("info-" + b.dataset.info).classList.toggle("hidden"));
+    });
+
     if (data.sheet_url) {
       $("sheetLink").href = data.sheet_url;
       $("sheetLink").classList.remove("hidden");
@@ -1324,4 +1370,4 @@ tbody tr:last-child td { border-bottom: none; }
 })();
 </script>
 </body>
-</html>
+</html>