318 lines
12 KiB
PHP
318 lines
12 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 Demografi</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_demografi') }}" 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_demografi') }}",
|
|
type: "POST",
|
|
data: {
|
|
unit_kerja: $('#select_unit_kerja').val(),
|
|
_token: "{{ csrf_token() }}"
|
|
},
|
|
success: function(res) {
|
|
const data = res.data.data;
|
|
const dataMappingLamaKerjaFaskes = data.find(v => v.no_soal == '7');
|
|
const dataMappingLamaKerjaFaskesIndex = data.findIndex(v => v.no_soal == '7');
|
|
if(dataMappingLamaKerjaFaskes && dataMappingLamaKerjaFaskesIndex){
|
|
let totalJawaban = dataMappingLamaKerjaFaskes.jawaban.reduce((sum, item) => sum + item.value, 0);
|
|
|
|
const jawabanCategory = [
|
|
{
|
|
name: '0 - 1 Tahun',
|
|
total: totalJawaban,
|
|
percent: 0,
|
|
value: 0
|
|
},
|
|
{
|
|
name: '2 - 5 Tahun',
|
|
total: totalJawaban,
|
|
percent: 0,
|
|
value: 0
|
|
},
|
|
{
|
|
name: '6 - 10 Tahun',
|
|
total: totalJawaban,
|
|
percent: 0,
|
|
value: 0
|
|
},
|
|
{
|
|
name: '> 10 Tahun',
|
|
total: totalJawaban,
|
|
percent: 0,
|
|
value: 0
|
|
},
|
|
];
|
|
|
|
// set value
|
|
dataMappingLamaKerjaFaskes.jawaban.map(val => {
|
|
const parts = val.name.split(" ");
|
|
const tahunParts = parts[0] ?? 0;
|
|
const bulanParts = parts[2] >> 0;
|
|
|
|
const tahun = `${tahunParts}.${bulanParts}`;
|
|
|
|
if(tahun <= 1){
|
|
jawabanCategory[0]['value'] += val.value;
|
|
} else if(tahun >= 2 && tahun <= 5){
|
|
jawabanCategory[1]['value'] += val.value;
|
|
} else if(tahun >= 6 && tahun <= 10) {
|
|
jawabanCategory[2]['value'] += val.value;
|
|
} else {
|
|
jawabanCategory[3]['value'] += val.value;
|
|
}
|
|
});
|
|
|
|
const mappingPercent = jawabanCategory.map(val => {
|
|
let percent = null;
|
|
|
|
if(val.total > 0){
|
|
percent = parseInt((val.value/val.total) * 100);
|
|
}
|
|
|
|
return {
|
|
...val,
|
|
percent: percent
|
|
}
|
|
});
|
|
|
|
const dataPerCategory = {
|
|
no_soal: dataMappingLamaKerjaFaskes.no_soal,
|
|
soal:dataMappingLamaKerjaFaskes.soal,
|
|
jawaban: mappingPercent
|
|
};
|
|
data[dataMappingLamaKerjaFaskesIndex] = dataPerCategory;
|
|
}
|
|
|
|
const dataMappingLamaKerjaUnit = data.find(v => v.no_soal == '8');
|
|
const dataMappingLamaKerjaUnitIndex = data.findIndex(v => v.no_soal == '8');
|
|
if(dataMappingLamaKerjaUnit && dataMappingLamaKerjaUnitIndex){
|
|
let totalJawaban = dataMappingLamaKerjaUnit.jawaban.reduce((sum, item) => sum + item.value, 0);
|
|
|
|
const jawabanCategory = [
|
|
{
|
|
name: '0 - 1 Tahun',
|
|
total: totalJawaban,
|
|
percent: 0,
|
|
value: 0
|
|
},
|
|
{
|
|
name: '2 - 5 Tahun',
|
|
total: totalJawaban,
|
|
percent: 0,
|
|
value: 0
|
|
},
|
|
{
|
|
name: '6 - 10 Tahun',
|
|
total: totalJawaban,
|
|
percent: 0,
|
|
value: 0
|
|
},
|
|
{
|
|
name: '> 10 Tahun',
|
|
total: totalJawaban,
|
|
percent: 0,
|
|
value: 0
|
|
},
|
|
];
|
|
|
|
// set value
|
|
dataMappingLamaKerjaUnit.jawaban.map(val => {
|
|
const parts = val.name.split(" ");
|
|
const tahunParts = parts[0] ?? 0;
|
|
const bulanParts = parts[2] >> 0;
|
|
|
|
const tahun = `${tahunParts}.${bulanParts}`;
|
|
|
|
if(tahun <= 1){
|
|
jawabanCategory[0]['value'] += val.value;
|
|
} else if(tahun >= 2 && tahun <= 5){
|
|
jawabanCategory[1]['value'] += val.value;
|
|
} else if(tahun >= 6 && tahun <= 10) {
|
|
jawabanCategory[2]['value'] += val.value;
|
|
} else {
|
|
jawabanCategory[3]['value'] += val.value;
|
|
}
|
|
});
|
|
|
|
const mappingPercent = jawabanCategory.map(val => {
|
|
let percent = null;
|
|
|
|
if(val.total > 0){
|
|
percent = parseInt((val.value/val.total) * 100);
|
|
}
|
|
|
|
return {
|
|
...val,
|
|
percent: percent
|
|
}
|
|
});
|
|
|
|
const dataPerCategory = {
|
|
no_soal: dataMappingLamaKerjaUnit.no_soal,
|
|
soal:dataMappingLamaKerjaUnit.soal,
|
|
jawaban: mappingPercent
|
|
};
|
|
data[dataMappingLamaKerjaUnitIndex] = dataPerCategory;
|
|
}
|
|
|
|
|
|
$('#body_table').html("");
|
|
|
|
let stringTable = '';
|
|
data.forEach(element => {
|
|
stringTable += '<div class="mt-5">';
|
|
stringTable += `<div class="fw-bold fs-5 mb-3">${element.no_soal}. ${element.soal}</div>`;
|
|
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">Jawaban</th>
|
|
<th class="text-white">Persentase Responden</th>
|
|
<th class="text-white">Jumlah Responden</th>
|
|
</tr>
|
|
</thead>`;
|
|
stringTable += '<tbody>';
|
|
let total = 0;
|
|
element.jawaban.forEach(e => {
|
|
stringTable += `
|
|
<tr>
|
|
<td>${e.name}</td>`;
|
|
if(e?.total > 0) {
|
|
total = e?.total;
|
|
}
|
|
|
|
if(e.percent > 0){
|
|
stringTable += `<td class="fw-bold">${e.percent}%</td>`;
|
|
} else {
|
|
stringTable += `<td class="fw-bold">-</td>`;
|
|
}
|
|
|
|
stringTable += `<td class="">${e.value ?? 0} Orang</td>`;
|
|
stringTable += `</tr>`;
|
|
});
|
|
stringTable += '</tbody>';
|
|
stringTable += '</table>';
|
|
stringTable += '</div>';
|
|
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 |