This commit is contained in:
Ahmad Firdaus Tarmidzi 2023-11-05 22:46:15 +07:00
parent fd6f77d825
commit e1c8cee87e
1 changed files with 36 additions and 45 deletions

View File

@ -16,61 +16,52 @@
<section class="section dashboard"> <section class="section dashboard">
<div class="row"> <div class="row">
<!-- Komponen 1: Hasil Nilai Kuesioner KM --> <!-- Komponen 1: Hasil Nilai Kuesioner KM -->
<div class="col-xxl-4 col-md-6"> <div class="col-xxl-4 col-md-6">
<div class="card info-card"> <div class="card info-card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Nilai KM</h5> <h5 class="card-title">Nilai KM</h5>
<!-- Tambahkan konten di sini --> <span class="pull-right">80</span>
<div id="kmPieChart"></div> <div class="progress">
<script> <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<script>
// Script JavaScript dapat tetap sama
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
let kmCounts = @json($kmCounts); let kmCounts = @json($kmCounts);
let kmTotal = kmCounts.reduce(function(total, item) {
let kmClass = kmCounts.map(function(item) { return total + item.total;
return item.km_class.toString(); }, 0);
}); let percentage = (kmTotal / (kmCounts.length * 100)) * 100;
let kmTotal = kmCounts.map(function(item) { document.querySelector(".progress-bar").style.width = percentage + "%";
return item.total; document.querySelector(".progress-bar").setAttribute("aria-valuenow", percentage);
});
new ApexCharts(document.querySelector("#kmPieChart"), {
series: kmTotal,
chart: {
height: 350,
type: 'pie',
toolbar: {
show: false
}
},
labels: kmClass,
colors: ['#00e396', '#F8DC1A', '#FA240C']
}).render();
}); });
</script> </script>
</div>
</div> </div>
</div><!-- End Hasil Nilai Kuesioner KM --> </div>
</div><!-- End Hasil Nilai Kuesioner KM -->
<!-- Komponen 2: Hasil Nilai Kuesioner RM --> <!-- Komponen 2: Hasil Nilai Kuesioner RM -->
<div class="col-xxl-4 col-md-6"> <div class="col-xxl-4 col-md-6">
<div class="card info-card"> <div class="card info-card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Nilai RM</h5> <h5 class="card-title">Nilai RM</h5>
<!-- Tambahkan konten di sini--> <span class="pull-right">80</span>
<table> <div class="progress">
{{-- <tr> <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
<th>ID</th> </div>
<th>Nama</th> <script>
// Script JavaScript dapat tetap sama
</tr> document.addEventListener("DOMContentLoaded", () => {
@foreach ($kuesionerRM as $kuesioner) let kmCounts = @json($kmCounts);
<tr> let kmTotal = kmCounts.reduce(function(total, item) {
<td>{{ $kuesioner->id }}</td> return total + item.total;
<td>{{ $kuesioner->nama }}</td> }, 0);
let percentage = (kmTotal / (kmCounts.length * 100)) * 100;
</tr> document.querySelector(".progress-bar").style.width = percentage + "%";
@endforeach --}} document.querySelector(".progress-bar").setAttribute("aria-valuenow", percentage);
</table> });
</script>
</div> </div>
</div> </div>
</div><!-- End Hasil Nilai Kuesioner RM --> </div><!-- End Hasil Nilai Kuesioner RM -->