120 lines
4.0 KiB
PHP
120 lines
4.0 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">
|
|
<div class="btn btn-primary" id="search_button">
|
|
Cari
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3" id="body_chart" 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();
|
|
})
|
|
});
|
|
|
|
function get_data_analisis() {
|
|
$('#body_chart').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_jawaban') }}",
|
|
type: "POST",
|
|
data: {
|
|
unit_kerja: $('#select_unit_kerja').val(),
|
|
_token: "{{ csrf_token() }}"
|
|
},
|
|
success: function(res) {
|
|
$('#body_chart').html("");
|
|
res.data.forEach((element, index) => {
|
|
const id = `chart_analisis_${index}`;
|
|
$('#body_chart').append(`<div id="${id}" class="my-3"></div>`);
|
|
generateChart(element.jawaban, id, element.soal);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
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 |