UPDATE
This commit is contained in:
parent
fd6f77d825
commit
e1c8cee87e
|
@ -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 -->
|
||||||
|
|
Loading…
Reference in New Issue