351 lines
11 KiB
HTML
351 lines
11 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, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header h1 {
|
|
color: #2c3e50;
|
|
font-size: 28px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header p {
|
|
color: #7f8c8d;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
text-align: center;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 42px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
.card-c0 { color: #2ecc71; }
|
|
.card-c1 { color: #3498db; }
|
|
.card-c2 { color: #f39c12; }
|
|
.card-c3 { color: #e74c3c; }
|
|
.card-tif { color: #9b59b6; }
|
|
.card-mif { color: #1abc9c; }
|
|
.card-tkk { color: #e67e22; }
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.chart-container {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.chart-wrapper {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
.definitions {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.definitions h2 {
|
|
color: #2c3e50;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.definition-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.definition-badge {
|
|
padding: 8px 15px;
|
|
border-radius: 20px;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-right: 15px;
|
|
min-width: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.badge-c0 { background: #2ecc71; }
|
|
.badge-c1 { background: #3498db; }
|
|
.badge-c2 { background: #f39c12; }
|
|
.badge-c3 { background: #e74c3c; }
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
color: white;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Dashboard Clustering Alumni</h1>
|
|
<p>Sistem Pengelompokan Pekerjaan Alumni dengan Kompetensi Lulusan - Jurusan Teknologi Informasi, Politeknik Negeri Jember</p>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-value card-tif">347</div>
|
|
<div class="card-label">Teknik Informatika (TIF)</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-mif">236</div>
|
|
<div class="card-label">Manajemen Informatika (MIF)</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-tkk">194</div>
|
|
<div class="card-label">Teknik Komputer (TKK)</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value" style="color:#2c3e50">1596</div>
|
|
<div class="card-label">Total Alumni</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card">
|
|
<div class="card-value card-c0">223</div>
|
|
<div class="card-label">Sesuai Profil (C0)</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-c1">385</div>
|
|
<div class="card-label">Bidang Diketahui (C1)</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-c2">506</div>
|
|
<div class="card-label">Bidang Tidak Jelas (C2)</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-value card-c3">482</div>
|
|
<div class="card-label">Belum Bekerja (C3)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<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:20px">
|
|
<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">Match Rate per Program Studi</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="matchChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="definitions">
|
|
<h2>Definisi Kategori</h2>
|
|
<div class="definition-item">
|
|
<span class="definition-badge badge-c0">C0</span>
|
|
<span><strong>Sesuai Profil Lulusan:</strong> Alumni bekerja dan pekerjaan match dengan kamus kata kunci profil lulusannya.</span>
|
|
</div>
|
|
<div class="definition-item">
|
|
<span class="definition-badge badge-c1">C1</span>
|
|
<span><strong>Bidang Diketahui:</strong> Alumni bekerja, bidang pekerjaan jelas, tapi tidak match kamus prodi.</span>
|
|
</div>
|
|
<div class="definition-item">
|
|
<span class="definition-badge badge-c2">C2</span>
|
|
<span><strong>Bidang Tidak Teridentifikasi:</strong> Alumni bekerja tapi informasi pekerjaan kurang jelas atau terlalu umum.</span>
|
|
</div>
|
|
<div class="definition-item">
|
|
<span class="definition-badge badge-c3">C3</span>
|
|
<span><strong>Belum/Tidak Bekerja:</strong> Alumni belum bekerja atau tidak bekerja saat tracer study.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>Generated: 2026-08-28 04:48:41</p>
|
|
<p>Sistem Clustering Alumni - Politeknik Negeri Jember</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: [
|
|
223,
|
|
385,
|
|
506,
|
|
482
|
|
],
|
|
backgroundColor: ['#2ecc71', '#3498db', '#f39c12', '#e74c3c']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'bottom' }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Prodi Chart
|
|
new Chart(document.getElementById('prodiChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['TIF', 'MIF', 'TKK'],
|
|
datasets: [{
|
|
label: 'Jumlah Alumni',
|
|
data: [
|
|
347,
|
|
236,
|
|
194
|
|
],
|
|
backgroundColor: ['#9b59b6', '#1abc9c', '#e67e22']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Cluster Chart
|
|
new Chart(document.getElementById('clusterChart'), {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Cluster 0', 'Cluster 1', 'Cluster 2', 'Cluster 3'],
|
|
datasets: [{
|
|
data: [326, 27, 66, 100],
|
|
backgroundColor: ['#3498db', '#2ecc71', '#f39c12', '#9b59b6']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
}
|
|
});
|
|
|
|
// Match Rate Chart
|
|
new Chart(document.getElementById('matchChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['TIF', 'MIF', 'TKK'],
|
|
datasets: [{
|
|
label: 'Match Rate (%)',
|
|
data: [2.22, 1.82, 6.90],
|
|
backgroundColor: ['#9b59b6', '#1abc9c', '#e67e22']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 10
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: { display: false }
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|