456 lines
15 KiB
HTML
456 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard Clustering Alumni - Politeknik Negeri Jember</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
background: rgba(255,255,255,0.1);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 32px;
|
|
margin-bottom: 10px;
|
|
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.header p {
|
|
color: #a0a0a0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.card {
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 38px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 12px;
|
|
color: #a0a0a0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.card-c0 { color: #2ecc71; }
|
|
.card-c1 { color: #3498db; }
|
|
.card-c2 { color: #f39c12; }
|
|
.card-c3 { color: #e74c3c; }
|
|
.card-tif { color: #a855f7; }
|
|
.card-mif { color: #14b8a6; }
|
|
.card-tkk { color: #f97316; }
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
|
|
gap: 25px;
|
|
}
|
|
|
|
.chart-container {
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.chart-wrapper {
|
|
position: relative;
|
|
height: 280px;
|
|
}
|
|
|
|
.definitions {
|
|
background: rgba(255,255,255,0.05);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 20px;
|
|
padding: 35px;
|
|
margin-top: 30px;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.definitions h2 {
|
|
margin-bottom: 20px;
|
|
font-size: 22px;
|
|
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.definition-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
border-radius: 12px;
|
|
background: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.definition-badge {
|
|
padding: 8px 16px;
|
|
border-radius: 25px;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-right: 20px;
|
|
min-width: 50px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.badge-c0 { background: #2ecc71; }
|
|
.badge-c1 { background: #3498db; }
|
|
.badge-c2 { background: #f39c12; }
|
|
.badge-c3 { background: #e74c3c; }
|
|
|
|
.definition-text {
|
|
color: #ccc;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.definition-text strong {
|
|
color: #fff;
|
|
}
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.stat-box {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #00d9ff;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #a0a0a0;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
padding: 20px;
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.header h1 {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Sistem Clustering Alumni</h1>
|
|
<p>Jurusan Teknologi Informasi - Politeknik Negeri Jember</p>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-value card-tif">225</div>
|
|
<div class="card-label">Teknik Informatika</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-mif">165</div>
|
|
<div class="card-label">Manajemen Informatika</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-tkk">145</div>
|
|
<div class="card-label">Teknik Komputer</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value" style="color:#fff">535</div>
|
|
<div class="card-label">Total Alumni</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-value card-c0">18</div>
|
|
<div class="card-label">C0 - Sesuai Profil</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-c1">85</div>
|
|
<div class="card-label">C1 - Bidang Diketahui</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-c2">416</div>
|
|
<div class="card-label">C2 - Bidang Tidak Jelas</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-c3">16</div>
|
|
<div class="card-label">C3 - Belum Bekerja</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-box">
|
|
<div class="stat-number">519</div>
|
|
<div class="stat-label">Data di-Cluster</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-number">4</div>
|
|
<div class="stat-label">Jumlah Cluster (K)</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-number">0.16</div>
|
|
<div class="stat-label">Silhouette Score</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-number">3.36%</div>
|
|
<div class="stat-label">Match Rate C0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid" style="margin-top:30px">
|
|
<div class="chart-container">
|
|
<div class="chart-title">Distribusi Kategori Alumni (C0-C3)</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="kategoriChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title">Distribusi per Program Studi</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="prodiChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid" style="margin-top:25px">
|
|
<div class="chart-container">
|
|
<div class="chart-title">Distribusi Cluster K-Means (K=4)</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="clusterChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-container">
|
|
<div class="chart-title">Distribusi C0-C3 per Prodi</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="prodiKategoriChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="definitions">
|
|
<h2>Definisi Kategori C0-C3</h2>
|
|
<div class="definition-item">
|
|
<span class="definition-badge badge-c0">C0</span>
|
|
<span class="definition-text"><strong>Sesuai Profil Lulusan:</strong> Alumni bekerja dan pekerjaan memiliki kecocokan dengan kamus kata kunci profil lulusannya berdasarkan prodi asal.</span>
|
|
</div>
|
|
<div class="definition-item">
|
|
<span class="definition-badge badge-c1">C1</span>
|
|
<span class="definition-text"><strong>Bidang Diketahui:</strong> Alumni bekerja dan bidang pekerjaan dapat diidentifikasi dengan jelas, tetapi tidak match dengan kamus prodi.</span>
|
|
</div>
|
|
<div class="definition-item">
|
|
<span class="definition-badge badge-c2">C2</span>
|
|
<span class="definition-text"><strong>Bidang Tidak Teridentifikasi:</strong> Alumni bekerja tetapi informasi pekerjaan tidak cukup jelas untuk menentukan bidang pekerjaan.</span>
|
|
</div>
|
|
<div class="definition-item">
|
|
<span class="definition-badge badge-c3">C3</span>
|
|
<span class="definition-text"><strong>Belum/Tidak Bekerja:</strong> Alumni belum bekerja atau berstatus tidak bekerja saat tracer study.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>Sistem Pengelompokan Pekerjaan Alumni dengan Kompetensi Lulusan</p>
|
|
<p>Generated: 2026-08-28</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Kategori Chart
|
|
new Chart(document.getElementById('kategoriChart'), {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['C0 - Sesuai Profil', 'C1 - Bidang Diketahui', 'C2 - Bidang Tidak Jelas', 'C3 - Belum Bekerja'],
|
|
datasets: [{
|
|
data: [18, 85, 416, 16],
|
|
backgroundColor: ['#2ecc71', '#3498db', '#f39c12', '#e74c3c'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { color: '#fff', padding: 15 }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Prodi Chart
|
|
new Chart(document.getElementById('prodiChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['TIF', 'MIF', 'TKK'],
|
|
datasets: [{
|
|
label: 'Jumlah Alumni',
|
|
data: [225, 165, 145],
|
|
backgroundColor: ['#a855f7', '#14b8a6', '#f97316'],
|
|
borderRadius: 8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { color: 'rgba(255,255,255,0.1)' },
|
|
ticks: { color: '#fff' }
|
|
},
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: { color: '#fff' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Cluster Chart
|
|
new Chart(document.getElementById('clusterChart'), {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Cluster 0 (62.8%)', 'Cluster 1 (5.2%)', 'Cluster 2 (12.7%)', 'Cluster 3 (19.3%)'],
|
|
datasets: [{
|
|
data: [326, 27, 66, 100],
|
|
backgroundColor: ['#3498db', '#2ecc71', '#f39c12', '#9b59b6'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { color: '#fff', padding: 10 }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Prodi Kategori Chart
|
|
new Chart(document.getElementById('prodiKategoriChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['TIF', 'MIF', 'TKK'],
|
|
datasets: [
|
|
{ label: 'C0', data: [5, 3, 10], backgroundColor: '#2ecc71' },
|
|
{ label: 'C1', data: [53, 20, 12], backgroundColor: '#3498db' },
|
|
{ label: 'C2', data: [162, 134, 120], backgroundColor: '#f39c12' },
|
|
{ label: 'C3', data: [5, 8, 3], backgroundColor: '#e74c3c' }
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { color: '#fff', padding: 10 }
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
stacked: true,
|
|
grid: { color: 'rgba(255,255,255,0.1)' },
|
|
ticks: { color: '#fff' }
|
|
},
|
|
x: {
|
|
stacked: true,
|
|
grid: { display: false },
|
|
ticks: { color: '#fff' }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|