WD - Dev
294 lines
12 KiB
PHP
294 lines
12 KiB
PHP
<!-- Main content -->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<h3 class="card-title">Akumulasi Kinerja Karyawan</h3>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="float-sm-right mb-0">
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table id="example2" class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Bulan</th>
|
|
<th>Nama</th>
|
|
<th>Jumlah Tiket</th>
|
|
<th>Tiket Jalur</th>
|
|
<th>Tiket Lain</th>
|
|
<th>Bobot Pekerjaan</th>
|
|
<th>Create to Proses</th>
|
|
<th>Proses to Close</th>
|
|
<!--<th>Action</th>-->
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php
|
|
$aserver = mysqli_query($con,"SELECT * FROM v_akumulasi_kinerja_by_tiket $SqlDataWHId ORDER BY waktu DESC");
|
|
while ($server = mysqli_fetch_assoc($aserver))
|
|
{
|
|
?>
|
|
<tr>
|
|
<td><?php echo substr(formatIndo($server['waktu']),3); ?></td>
|
|
<td><?php echo $server['nama_teknisi']; ?></td>
|
|
<td><?php echo $server['jumlah_tiket']; ?></td>
|
|
<td><?php echo $server['tiket_jalur']; ?></td>
|
|
<td><?php echo $server['tiket_lain']; ?></td>
|
|
<td><?php echo $server['bobot']; ?></td>
|
|
<td><?php echo $server['rata_rata_sebelum']; ?> Menit</td>
|
|
<td><?php echo $server['rata_rata_sesudah']; ?> Menit</td>
|
|
<!--<td>-->
|
|
<!-- <a type="button" class="btn btn-secondary btn-sm ml-1">Detail</a>-->
|
|
<!--</td>-->
|
|
</tr>
|
|
<?php } ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card" id="reportChartid">
|
|
<div class="card-body">
|
|
<center>
|
|
<h5>Grafik Kinerja Berdasarkan Tiket</h5>
|
|
</center>
|
|
<label><small>Tahun :</small></label>
|
|
<select id="yearSelect">
|
|
<option value="2024">2024</option>
|
|
<option value="2025" selected>2025</option>
|
|
<option value="2026">2026</option>
|
|
</select>
|
|
<label><small>Karyawan :</small></label>
|
|
<select id="userSelect">
|
|
<option value="all">All</option>
|
|
<?php
|
|
$userOp = mysqli_query($con,"SELECT id_penyelesai_tiket,nama_teknisi FROM v_akumulasi_kinerja_by_tiket $SqlDataWHId GROUP BY id_penyelesai_tiket ORDER BY nama_teknisi");
|
|
while ($userOption = mysqli_fetch_assoc($userOp))
|
|
{ ?>
|
|
<option value="<?php echo $userOption['id_penyelesai_tiket'] ?>"><?php echo $userOption['nama_teknisi'] ?></option>
|
|
<?php } ?>
|
|
</select>
|
|
<button id="fullscreenBtn" style="float: right;" class="btn btn-sm btn-secondary">Fullscreen</button>
|
|
<canvas id="reportChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</section>
|
|
<!-- /.content -->
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const canvas = document.getElementById('reportChart'); // Mendapatkan elemen canvas
|
|
const rcrt = canvas.getContext('2d'); // Mendapatkan konteks dari canvas
|
|
const yearSelect = document.getElementById('yearSelect');
|
|
const userSelect = document.getElementById('userSelect');
|
|
const fullscreenBtn = document.getElementById('fullscreenBtn');
|
|
|
|
// Mengatur ukuran awal canvas
|
|
canvas.style.maxHeight = '350px'; // Kembali ke ukuran asli
|
|
canvas.style.width = '100%'; // Kembali ke ukuran asli
|
|
|
|
|
|
let reportChart; // Simpan referensi chart di sini
|
|
|
|
|
|
// Fungsi untuk mengambil data dari file PHP berdasarkan tahun
|
|
async function fetchData(year,kar) {
|
|
try {
|
|
const response = await fetch(`load/data_kpi_teknisi.php?year=${year}&d=${kar}&i=<?php echo $SqlDataId; ?>`);
|
|
const data = await response.json();
|
|
// console.log(data); // Log data yang diterima
|
|
|
|
const bulanSingkatan = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
|
|
const bulanArray = bulanSingkatan.map((singkatan, index) => `${year}-${String(index + 1).padStart(2, '0')}`);
|
|
|
|
const jumlah = new Array(12).fill(0);
|
|
const createToProses = new Array(12).fill(0);
|
|
const prosesToClose = new Array(12).fill(0);
|
|
const tiketJalur = new Array(12).fill(0);
|
|
const tiketLain = new Array(12).fill(0);
|
|
const bobot = new Array(12).fill(0);
|
|
|
|
data.bulan.forEach((bulan, index) => {
|
|
const monthIndex = bulanArray.indexOf(bulan);
|
|
if (monthIndex !== -1) {
|
|
jumlah[monthIndex] = data.jumlah[index];
|
|
createToProses[monthIndex] = data.createToProses[index];
|
|
prosesToClose[monthIndex] = data.prosesToClose[index];
|
|
tiketJalur[monthIndex] = data.tiketJalur[index];
|
|
tiketLain[monthIndex] = data.tiketLain[index];
|
|
bobot[monthIndex] = data.bobot[index];
|
|
}
|
|
});
|
|
|
|
const report = {
|
|
labels: bulanSingkatan,
|
|
datasets: [
|
|
{
|
|
label: 'Create To Proses',
|
|
data: createToProses,
|
|
backgroundColor: 'rgba(255, 206, 86, 0.5)', // Warna kuning transparan
|
|
borderColor: 'rgb(255, 206, 86)', // Kuning solid
|
|
borderWidth: 1,
|
|
fill: true,
|
|
type: 'bar',
|
|
},
|
|
{
|
|
label: 'Proses To Close',
|
|
data: prosesToClose,
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)', // Warna biru transparan
|
|
borderColor: 'rgb(54, 162, 235)', // Biru solid
|
|
borderWidth: 1,
|
|
fill: true,
|
|
type: 'bar',
|
|
},
|
|
{
|
|
label: 'Jumlah',
|
|
data: jumlah,
|
|
backgroundColor: 'rgba(75, 192, 192, 0.5)', // Warna hijau kebiruan transparan
|
|
borderColor: 'rgb(75, 192, 192)', // Hijau kebiruan solid
|
|
borderWidth: 1,
|
|
fill: true,
|
|
type: 'bar',
|
|
},
|
|
{
|
|
label: 'Bobot',
|
|
data: bobot,
|
|
backgroundColor: 'rgba(153, 102, 255, 0.5)', // Warna ungu transparan
|
|
borderColor: 'rgb(153, 102, 255)', // Ungu solid
|
|
borderWidth: 1,
|
|
fill: true,
|
|
type: 'bar',
|
|
},
|
|
{
|
|
label: 'Tiket Jalur',
|
|
data: tiketJalur,
|
|
backgroundColor: 'rgba(255, 99, 132, 0.5)', // Warna merah transparan
|
|
borderColor: 'rgb(255, 99, 132)', // Merah solid
|
|
borderWidth: 1,
|
|
fill: true,
|
|
},
|
|
{
|
|
label: 'Tiket Lain',
|
|
data: tiketLain,
|
|
backgroundColor: 'rgba(201, 203, 207, 0.5)', // Warna abu-abu transparan
|
|
borderColor: 'rgb(201, 203, 207)', // Abu-abu solid
|
|
borderWidth: 1,
|
|
fill: true,
|
|
}
|
|
]
|
|
};
|
|
|
|
// Hapus chart lama jika sudah ada
|
|
if (reportChart) {
|
|
reportChart.destroy();
|
|
}
|
|
|
|
const rconfig = {
|
|
type: 'line',
|
|
data: report,
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
callback: function(value) {
|
|
const absValue = Math.abs(value);
|
|
if (absValue >= 1000000) {
|
|
return (value / 1000000) + 'M';
|
|
} else if (absValue >= 1000) {
|
|
return (value / 1000) + 'K';
|
|
} else {
|
|
return value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Membuat chart baru
|
|
reportChart = new Chart(rcrt, rconfig);
|
|
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
}
|
|
}
|
|
|
|
// Fungsi untuk mengaktifkan mode fullscreen
|
|
function toggleFullscreen() {
|
|
const canvasContainer = document.getElementById('reportChartid');
|
|
if (!document.fullscreenElement) {
|
|
canvasContainer.requestFullscreen().catch(err => {
|
|
console.error(`Error attempting to enable full-screen mode: ${err.message}`);
|
|
});
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
// Event listener untuk tombol fullscreen
|
|
fullscreenBtn.addEventListener('click', toggleFullscreen);
|
|
|
|
// Memanggil fetchData saat halaman dimuat
|
|
fetchData(yearSelect.value, userSelect.value);
|
|
|
|
// Menangani perubahan pada select year
|
|
yearSelect.addEventListener('change', () => {
|
|
fetchData(yearSelect.value, userSelect.value);
|
|
});
|
|
|
|
// Menangani perubahan pada select user
|
|
userSelect.addEventListener('change', () => {
|
|
fetchData(yearSelect.value, userSelect.value);
|
|
});
|
|
|
|
|
|
|
|
// Mengatur tinggi canvas saat masuk dan keluar fullscreen
|
|
document.addEventListener('fullscreenchange', () => {
|
|
if (document.fullscreenElement) {
|
|
canvas.style.height = ''; // Kembali ke ukuran asli
|
|
canvas.style.maxHeight = '100%';
|
|
canvas.style.width = '100%'; // Atur lebar canvas menjadi 100vw
|
|
fullscreenBtn.textContent = 'Close Fullscreen';
|
|
} else {
|
|
canvas.style.height = ''; // Kembali ke ukuran asli
|
|
canvas.style.maxHeight = '350px'; // Kembali ke max-height asli
|
|
canvas.style.width = '100%'; // Kembali ke lebar asli
|
|
fullscreenBtn.textContent = 'Fullscreen';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
window.onload = function() {
|
|
const body = document.body;
|
|
|
|
// Tambahkan kelas 'sidebar-collapse' saat halaman dimuat
|
|
body.classList.add('sidebar-collapse');
|
|
};
|
|
</script>
|