📊 แดชบอร์ดสรุปยอดนักศึกษา: ผลการดำเนินการปี 2567 เทียบกับ 2568
📈 ยอดนักศึกษารวม (2567 vs 2568) แยกตามวิทยาลัย
📋 ตารางสรุปการเปลี่ยนแปลงรายวิทยาลัยและสาขาวิชา
// --- RAW DATA ---
const rawData = [
["1","วิทยาลัยเทคนิคอุบลราชธานี","เทคโนโลยียานยนต์",29,38,8,75,55,42,6,103],
["2",null,"เทคโนโลยีไฟฟ้า",38,21,12,71,23,49,2,74],
["3",null,"เทคโนโลยีคอมพิวเตอร์",9,11,4,24,13,15,1,29],
["4",null,"เทคโนโลยีการผลิต",10,7,5,22,15,24,2,41],
["5",null,"เทคโนโลยีอิเล็กทรอนิกส์",21,7,0,28,8,15,0,23],
["6",null,"เทคโนโลยียานยนต์ไฟฟ้า",8,0,0,8,0,0,0,0],
["7",null,"เทคโนโลยีโยธา",6,0,0,6,0,0,0,0],
["8","วิทยาลัยอาชีวศึกษาอุบลราชธานี","การบัญชี",27,26,7,60,42,41,2,85],
["9",null,"เทคโนโลยีธุรกิจดิจิทัล",10,15,0,25,20,8,0,28],
["10",null,"เทคโนโลยีอาหารและโภชนาการ",25,0,0,25,0,0,0,0],
["11",null,"ดิจิทัลกราฟิก",17,0,0,17,0,0,0,0],
["12","วิทยาลัยเทคนิคศรีสะเกษ","การบัญชี",12,23,1,36,24,19,0,43],
["13",null,"เทคโนโลยียานยนต์",16,11,7,34,11,20,2,33],
["14",null,"เทคโนโลยีไฟฟ้า",9,10,8,27,11,19,7,37],
["15",null,"เทคโนโลยีธุรกิจดิจิทัล",7,4,1,12,4,13,0,17],
["16","วิทยาลัยการอาชีพศรีสะเกษ","เทคโนโลยีการผลิต",15,14,0,29,15,12,1,28],
["17",null,"เทคโนโลยีสารสนเทศ",15,12,0,27,13,1,0,14],
["18","วิทยาลัยเทคนิคยโสธร","การบัญชี",36,42,2,80,48,51,0,99],
["19",null,"เทคโนโลยียานยนต์",26,14,1,41,16,16,0,32],
["20",null,"เทคโนโลยีไฟฟ้า",26,20,1,47,23,24,3,50],
["21",null,"เทคโนโลยีอิเล็กทรอนิกส์",8,5,3,16,5,15,3,23],
["22",null,"เทคโนโลยีการผลิต",15,0,4,19,2,12,2,16],
["23",null,"เทคโนโลยีธุรกิจดิจิทัล",18,26,2,46,31,16,3,50]
];
// --- KPI VALUES ---
const total2567 = 825;
const total2568 = 775;
// --- HELPER ---
const safeParseInt = val => parseInt(val)||0;
// --- CALCULATE KPI ---
function calculateKPIs(){
const diff = total2568 - total2567;
const percentChange = ((diff/total2567)*100).toFixed(2);
const isIncrease = diff>0;
const colorClass = isIncrease?'bg-green-100 text-green-700':'bg-red-100 text-red-700';
const textColorClass = isIncrease?'text-green-600':'text-red-600';
const sign = diff>=0?'+':'';
const kpiHTML = `
ยอดรวมนักศึกษา ปี 2567 (ตั้งเป้า)
ยอดรวมนักศึกษา ปี 2568 (ผลจริง)
การเปลี่ยนแปลงรวม (YoY)
${sign}${percentChange}%
`;
document.getElementById('kpi-cards').innerHTML = kpiHTML;
}
// --- AGGREGATE DATA FOR CHART & TABLE ---
function aggregateData(data){
const collegeMap={};
const collegeOrder=[];
let currentCollege="";
data.forEach(row=>{
const collegeName=row[1];
if(collegeName && collegeName.trim()!==""){
currentCollege=collegeName.trim();
if(!collegeMap[currentCollege]){
collegeMap[currentCollege]={name:currentCollege,majors:[],total2568:0,total2567:0};
collegeOrder.push(currentCollege);
}
}
if(currentCollege && row[2] && row[2].trim()!==""){
const total_major_68 = safeParseInt(row[6]);
const total_major_67 = safeParseInt(row[10]);
const majorData = {
college: currentCollege,
major: row[2].trim(),
y1_68: safeParseInt(row[3]), y2_68: safeParseInt(row[4]), res_68: safeParseInt(row[5]), total_major_68: total_major_68,
y1_67: safeParseInt(row[7]), y2_67: safeParseInt(row[8]), res_67: safeParseInt(row[9]), total_major_67: total_major_67
};
collegeMap[currentCollege].majors.push(majorData);
collegeMap[currentCollege].total2568+=total_major_68;
collegeMap[currentCollege].total2567+=total_major_67;
}
});
const chartData=[],finalTableData=[];
collegeOrder.forEach(collegeName=>{
const college=collegeMap[collegeName];
const diff = college.total2568 - college.total2567;
const percentChange = college.total2567?((diff/college.total2567)*100).toFixed(2):0;
chartData.push({college:college.name,total2568:college.total2568,total2567:college.total2567});
finalTableData.push({isCollegeTotal:true,name:college.name,diff,percentChange,total2568:college.total2568,total2567:college.total2567});
finalTableData.push(...college.majors);
});
return {chartData,tableData:finalTableData};
}
// --- RENDER CHART ---
function renderChart(data){
const labels = data.map(d=>d.college.replace('วิทยาลัยเทคนิค','วท.').replace('วิทยาลัยอาชีวศึกษา','วอศ.').replace('วิทยาลัยการอาชีพ','วก.'));
const totals2568 = data.map(d=>d.total2568);
const totals2567 = data.map(d=>d.total2567);
const ctx = document.getElementById('collegeChart').getContext('2d');
if(window.collegeChartInstance) window.collegeChartInstance.destroy();
window.collegeChartInstance = new Chart(ctx,{
type:'bar',
data:{
labels,
datasets:[
{label:'ปี 2568',data:totals2568,backgroundColor:'#4338ca',borderRadius:6},
{label:'ปี 2567',data:totals2567,backgroundColor:'#9ca3af',borderRadius:6}
]
},
options:{
responsive:true,
maintainAspectRatio:false,
plugins:{legend:{position:'top'},tooltip:{}},
scales:{
y:{beginAtZero:true,title:{display:true,text:'จำนวนนักศึกษา (คน)'}},
x:{ticks:{autoSkip:false,maxRotation:45,minRotation:45}}
}
}
});
}
// --- RENDER TABLE ---
function renderTable(data){
const tbody=document.getElementById('summaryTableBody');
tbody.innerHTML='';
data.forEach(row=>{
const tr=document.createElement('tr');
let html='';
if(row.isCollegeTotal){
const isIncrease=row.diff>0;
const colorClass = isIncrease?'text-green-700':(row.diff=0?'+':'';
html=`
| ${row.name} (รวม) |
${row.total2568} |
${row.total2567} |
${sign}${row.diff} |
${sign}${row.percentChange}% |
`;
} else {
html=`
| - ${row.major} |
${row.y1_68} |
${row.y2_68} |
${row.res_68} |
${row.total_major_68} |
${row.y1_67} |
${row.y2_67} |
${row.res_67} |
${row.total_major_67} |
|
`;
}
tbody.innerHTML += html;
});
}
// --- INIT ---
window.onload = ()=>{
calculateKPIs();
const {chartData,tableData} = aggregateData(rawData);
renderChart(chartData);
renderTable(tableData);
};
