188 lines
8.5 KiB
PHP
188 lines
8.5 KiB
PHP
<style>
|
|
.legend {
|
|
margin-top: 20px;
|
|
text-align: center; /* Center the legend items */
|
|
}
|
|
|
|
.legend-item {
|
|
display: inline-block;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.legend-color {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|
|
<div class="row page-titles">
|
|
<div class="col-md-5 align-self-center">
|
|
<h4 class="text-themecolor">Dashboard</h4>
|
|
</div>
|
|
<div class="col-md-7 align-self-center text-right">
|
|
<div class="d-flex justify-content-end align-items-center">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
|
|
<li class="breadcrumb-item active">Dashboard</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- End Info box -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Over Visitor, Our income , slaes different and sales prediction -->
|
|
<!-- ============================================================== -->
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h5 class="card-title">Absensi</h5>
|
|
</div>
|
|
<div class="d-flex">
|
|
<div>
|
|
<form id="filterForm" method="post" action="<?= base_url('home') ?>">
|
|
<select class="form-control custom-select"
|
|
onchange="document.getElementById('filterForm').submit()"
|
|
style="width: auto; height:36px;" name="tahun">
|
|
<option value="NULL">Pilih Tahun</option>
|
|
<?php
|
|
$selectedYear = isset($selectedYear) ? $selectedYear : '';
|
|
$tahun_sekarang = date("Y");
|
|
for ($i = $tahun_sekarang; $i >= 2010; $i--) {
|
|
$selected = ($i == $tahun_sekarang || $i == $selectedYear) ? 'selected' : '';
|
|
echo '<option value="' . $i . '" ' . $selected . '>' . $i . '</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="morris-bar-chart"></div>
|
|
<div id="legend" class="legend"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body p-b-0">
|
|
<h4 class="card-title">Rapor Hasil Kinerja</h4>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table id="myTable" class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 5%;" class="text-center">#</th>
|
|
<th>BULAN/TAHUN</th>
|
|
<th style="width: 10%;">AKSI</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php
|
|
$namaBulan = [
|
|
1 => 'Januari',
|
|
2 => 'Februari',
|
|
3 => 'Maret',
|
|
4 => 'April',
|
|
5 => 'Mei',
|
|
6 => 'Juni',
|
|
7 => 'Juli',
|
|
8 => 'Agustus',
|
|
9 => 'September',
|
|
10 => 'Oktober',
|
|
11 => 'November',
|
|
12 => 'Desember'
|
|
];
|
|
$no = 1;
|
|
foreach ($rapor as $row): ?>
|
|
<tr>
|
|
<td class="text-center"><?= $no++; ?></td>
|
|
<td class="txt-oflo"><?= $namaBulan[$row->bulan]; ?>/<?= $row->tahun; ?>
|
|
</td>
|
|
<td><a href="<?= base_url('evaluasi/generatePdf/' . $row->id_evaluasi) ?>"
|
|
target="_blank">
|
|
<button class="btn btn-sm btn-icon btn-pure btn-outline"
|
|
data-toggle="tooltip" data-original-title="Unduh">
|
|
<i class="ti-printer" aria-hidden="true"></i>
|
|
</button>
|
|
</a></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- Comment - table -->
|
|
<!-- ============================================================== -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- End Comment - chats -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Over Visitor, Our income , slaes different and sales prediction -->
|
|
<!-- ============================================================== -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- End Page Content -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Todo, chat, notification -->
|
|
<!-- ============================================================== -->
|
|
<script src="<?php echo base_url() ?>assets/node_modules/jquery/jquery-3.2.1.min.js"></script>
|
|
<script src="<?php echo base_url() ?>assets/node_modules/morrisjs/morris.min.js"></script>
|
|
<script>
|
|
$(function () {
|
|
"use strict";
|
|
var absensiData = <?php echo json_encode($absensiData); ?>;
|
|
var barColors = ['#55ce63', '#2f3d4a', '#009efb', '#ffcc00', '#ff6666'];
|
|
var labels = ['Sakit', 'Ijin', 'Alpa', 'Cuti', 'Total Kehadiran'];
|
|
|
|
// Morris bar chart
|
|
Morris.Bar({
|
|
element: 'morris-bar-chart',
|
|
data: absensiData,
|
|
xkey: 'bulan',
|
|
ykeys: ['sakit', 'ijin', 'alpa', 'cuti', 'total_kehadiran'],
|
|
labels: labels,
|
|
barColors: barColors,
|
|
hideHover: 'auto',
|
|
gridLineColor: '#eef0f2',
|
|
resize: true
|
|
});
|
|
|
|
// Generate custom legend
|
|
function generateLegend(labels, colors) {
|
|
var legend = $('#legend');
|
|
labels.forEach(function (label, index) {
|
|
var legendItem = $('<div class="legend-item"></div>');
|
|
var legendColor = $('<span class="legend-color"></span>').css('background-color', colors[index]);
|
|
var legendText = $('<span></span>').text(label);
|
|
legendItem.append(legendColor).append(legendText);
|
|
legend.append(legendItem);
|
|
});
|
|
}
|
|
|
|
// Call function to create legend
|
|
generateLegend(labels, barColors);
|
|
});
|
|
</script>
|