251 lines
11 KiB
PHP
251 lines
11 KiB
PHP
@extends('layouts.template_admin')
|
|
|
|
@section('title', 'Dashboard | Mutu RSAB Harapan Kita')
|
|
@section('custom_css')
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="card-title fs-4 fw-bold">Dashboard Analisis</div>
|
|
<div class="mt-5">
|
|
<div class="d-flex gap-2 align-items-end">
|
|
<div class="form-group w-75">
|
|
<label for="select_unit_kerja" class="form-label">Unit Kerja</label>
|
|
<select id="select_unit_kerja" class="select2 form-select" multiple>
|
|
@foreach ($list_unit_kerja as $item)
|
|
<option value="{{ $item }}">{{ $item }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="w-100 d-flex gap-2">
|
|
<div class="btn btn-primary" id="search_button">
|
|
Cari
|
|
</div>
|
|
<form id="export_form" action="{{ url('/admin/report_data_analisis') }}" method="POST">
|
|
@csrf
|
|
<select class="d-none" name="unit_kerja[]" multiple>
|
|
@foreach ($list_unit_kerja as $item)
|
|
<option value="{{ $item }}">{{ $item }}</option>
|
|
@endforeach
|
|
</select>
|
|
<div type="button" class="btn btn-primary" id="export_form_button">Download Excel</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3" id="body_table" style="max-height: 80vh; overflow-y: auto;">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('custom_js')
|
|
<script>
|
|
$(document).ready(function(){
|
|
$(".select2").select2();
|
|
$('#search_button').click(function(){
|
|
get_data_analisis();
|
|
})
|
|
|
|
$('#export_form_button').click(function() {
|
|
let select_unit_kerja = $('#select_unit_kerja').val();
|
|
$('[name="unit_kerja[]"]').val(select_unit_kerja);
|
|
|
|
$('#export_form').submit();
|
|
})
|
|
});
|
|
|
|
function get_data_analisis() {
|
|
$('#body_table').html(`<div class="p-10 d-flex justify-content-center">
|
|
<div>
|
|
<!-- Fold -->
|
|
<div class="sk-fold">
|
|
<div class="sk-fold-cube"></div>
|
|
<div class="sk-fold-cube"></div>
|
|
<div class="sk-fold-cube"></div>
|
|
<div class="sk-fold-cube"></div>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
$.ajax({
|
|
url: "{{ url('/admin/get_data_dashboard_analisis') }}",
|
|
type: "POST",
|
|
data: {
|
|
unit_kerja: $('#select_unit_kerja').val(),
|
|
_token: "{{ csrf_token() }}"
|
|
},
|
|
success: function(res) {
|
|
const data = res.data;
|
|
$('#body_table').html("");
|
|
|
|
let stringTable = '';
|
|
|
|
//option setuju
|
|
if(data.option_setuju.length > 0){
|
|
stringTable += '<div class="table-responsive mb-8">';
|
|
stringTable += '<table id="table_detail" class="table table-bordered">';
|
|
stringTable += `<thead class="bg-primary" id="table_header">
|
|
<tr>
|
|
<th class="text-white">No</th>
|
|
<th class="text-white">Soal</th>
|
|
<th class="text-white">Sangat Tidak Setuju</th>
|
|
<th class="text-white">Tidak Setuju</th>
|
|
<th class="text-white">Netral</th>
|
|
<th class="text-white">Setuju</th>
|
|
<th class="text-white">Sangat Setuju</th>
|
|
<th class="text-white">TIDAK BERLAKU/TIDAK TAHU, Sebutkan alasan</th>
|
|
<th class="text-white">Total Responden</th>
|
|
</tr>
|
|
</thead>`;
|
|
stringTable += '<tbody>';
|
|
data.option_setuju.forEach((element, index) => {
|
|
let total = 0;
|
|
stringTable += `
|
|
<tr>
|
|
<td>${element.no_soal}</td>
|
|
<td>${element.soal}</td>`;
|
|
element.jawaban.forEach(e => {
|
|
if(e?.total > 0) {
|
|
total = e?.total;
|
|
}
|
|
if(e.percent > 0){
|
|
stringTable += `<td class="fw-bold">${e.percent}%/${e.value} Orang</td>`;
|
|
} else {
|
|
stringTable += `<td class="fw-bold">-</td>`;
|
|
}
|
|
});
|
|
stringTable += `<td class="">${total}</td>`;
|
|
stringTable += `</tr>`;
|
|
});
|
|
stringTable += '</tbody>';
|
|
stringTable += '</table>';
|
|
stringTable += '</div>';
|
|
}
|
|
|
|
if(data.option_other.length > 0){
|
|
stringTable += '<div class="table-responsive mb-8">';
|
|
stringTable += '<table id="table_detail" class="table table-bordered">';
|
|
stringTable += `<thead class="bg-primary" id="table_header">
|
|
<tr>
|
|
<th class="text-white">No</th>
|
|
<th class="text-white">Soal</th>
|
|
<th class="text-white">Tidak Ada</th>
|
|
<th class="text-white">1 - 2 laporan</th>
|
|
<th class="text-white">3 - 5 laporan</th>
|
|
<th class="text-white">6 - 10 laporan</th>
|
|
<th class="text-white">> 10 laporan</th>
|
|
<th class="text-white">Total Responden</th>
|
|
</tr>
|
|
</thead>`;
|
|
stringTable += '<tbody>';
|
|
data.option_other.forEach((element, index) => {
|
|
stringTable += `
|
|
<tr>
|
|
<td>${element.no_soal}</td>
|
|
<td>${element.soal}</td>`;
|
|
element.jawaban.forEach(e => {
|
|
if(e.percent > 0){
|
|
stringTable += `<td class="fw-bold">${e.percent}%/${e.value} Orang</td>`;
|
|
} else {
|
|
stringTable += `<td class="fw-bold">-</td>`;
|
|
}
|
|
});
|
|
stringTable += `<td class="">${data.total}</td>`;
|
|
stringTable += `</tr>`;
|
|
});
|
|
stringTable += '</tbody>';
|
|
stringTable += '</table>';
|
|
stringTable += '</div>';
|
|
}
|
|
|
|
if(data.option_selalu.length > 0){
|
|
stringTable += '<div class="table-responsive mb-8">';
|
|
stringTable += '<table id="table_detail" class="table table-bordered">';
|
|
stringTable += `<thead class="bg-primary" id="table_header">
|
|
<tr>
|
|
<th class="text-white">No</th>
|
|
<th class="text-white">Soal</th>
|
|
<th class="text-white">Tidak Pernah</th>
|
|
<th class="text-white">Jarang</th>
|
|
<th class="text-white">Kadang-kadang</th>
|
|
<th class="text-white">Sering</th>
|
|
<th class="text-white">Selalu</th>
|
|
<th class="text-white">TIDAK BERLAKU/TIDAK TAHU, Sebutkan alasan</th>
|
|
<th class="text-white">Total Responden</th>
|
|
</tr>
|
|
</thead>`;
|
|
stringTable += '<tbody>';
|
|
data.option_selalu.forEach((element, index) => {
|
|
stringTable += `
|
|
<tr>
|
|
<td>${element.no_soal}</td>
|
|
<td>${element.soal}</td>`;
|
|
element.jawaban.forEach(e => {
|
|
if(e.percent > 0){
|
|
stringTable += `<td class="fw-bold">${e.percent}%/${e.value} Orang</td>`;
|
|
} else {
|
|
stringTable += `<td class="fw-bold">-</td>`;
|
|
}
|
|
});
|
|
stringTable += `<td class="">${data.total}</td>`;
|
|
stringTable += `</tr>`;
|
|
});
|
|
stringTable += '</tbody>';
|
|
stringTable += '</table>';
|
|
stringTable += '</div>';
|
|
}
|
|
|
|
$('#body_table').html(stringTable);
|
|
}
|
|
});
|
|
}
|
|
|
|
function generateChart(data, id, soal) {
|
|
Highcharts.chart(id, {
|
|
chart: { type: 'column' },
|
|
title: { text: soal },
|
|
xAxis: {
|
|
categories: [soal],
|
|
title: { text: null },
|
|
labels: { enabled: false }
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
max: 100,
|
|
title: { text: null }
|
|
},
|
|
credits: { enabled: false },
|
|
tooltip: {
|
|
useHTML: true,
|
|
formatter: function() {
|
|
console.log(this.point);
|
|
|
|
const totalUser = this.point.total_user ?? 0;
|
|
const totalSemua = this.point.total_semua ?? 0;
|
|
return `
|
|
<b>${this.series.name}</b><br>
|
|
Nilai: ${this.y}%<br>
|
|
Total Jawaban: ${totalUser}<br>
|
|
Total Semua: ${totalSemua}
|
|
`;
|
|
}
|
|
},
|
|
series: data.map(j => ({
|
|
name: j.name,
|
|
type: 'column',
|
|
data: [{y: j.y, total_user: j.value, total_semua: j.total}]
|
|
})),
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function() {
|
|
return this.y + '%'; // ⬅️ Tampilkan angka + %
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
@endsection |