first commit
This commit is contained in:
189
resources/views/admin/surveys/statistics.blade.php
Normal file
189
resources/views/admin/surveys/statistics.blade.php
Normal file
@@ -0,0 +1,189 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@push('styles')
|
||||
<link rel="stylesheet" href="{{ asset('css/adminHeader.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('css/statisticsAdmin.css') }}">
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
<div class="admin-header-box">
|
||||
<div>
|
||||
<h4>Statistik: {{ $survey->title }}</h4>
|
||||
<p>Analisis data respons bagi borang ini.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ route('admin.surveys.statistics_print', $survey->id) }}" target="_blank" class="btn btn-sm btn-light px-3 fw-bold text-primary">
|
||||
<i class="bi bi-printer me-1"></i> Cetak
|
||||
</a>
|
||||
<a href="{{ route('admin.surveys.index') }}" class="btn btn-sm btn-light px-3 fw-bold text-primary">
|
||||
<i class="bi bi-arrow-left me-1"></i> Kembali
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm border text-center py-2">
|
||||
<div class="card-body p-2">
|
||||
<h3 class="stat-card-number">{{ $totalSurveyRespondents }}</h3>
|
||||
<small class="text-muted">Jumlah Responden</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm border text-center py-2">
|
||||
<div class="card-body p-2">
|
||||
<h3 class="stat-card-number">{{ $totalSurveyQuestions }}</h3>
|
||||
<small class="text-muted">Jumlah Soalan</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@foreach($results as $questionId => $result)
|
||||
<div class="card shadow-sm mb-5 break-inside-avoid">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="fw-bold mb-0">Soalan: {{ $result['question'] }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if(isset($result['type']) && $result['type'] == 'text')
|
||||
{{-- DISPLAY TEXT ANSWERS --}}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th style="width: 50px;">#</th>
|
||||
<th>Jawapan Responden</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($result['data'] as $index => $answer)
|
||||
<tr>
|
||||
<td>{{ $loop->iteration }}</td>
|
||||
<td>{{ $answer }}</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="2" class="text-center text-muted">Tiada jawapan.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@else
|
||||
{{-- DISPLAY CHART FOR RADIO/CHECKBOX --}}
|
||||
<div class="row">
|
||||
<div class="col-md-7 mb-4 mb-md-0">
|
||||
<div class="chart-container-box">
|
||||
<canvas id="chart-{{ $questionId }}"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<table class="table table-bordered table-striped table-hover">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th class="text-center">Pilihan Jawapan</th>
|
||||
<th class="text-center">Kekerapan</th>
|
||||
<th class="text-center">Peratus (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($result['data'] as $stat)
|
||||
<tr>
|
||||
<td>{{ $stat['label'] }}</td>
|
||||
<td class="text-center">{{ $stat['count'] }}</td>
|
||||
<td class="text-center fw-bold">{{ $stat['percentage'] }}%</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
<tr class="table-secondary fw-bold">
|
||||
<td>JUMLAH</td>
|
||||
<td class="text-center">{{ $result['total'] }}</td>
|
||||
<td class="text-center">100%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(!empty($result['other_answers']))
|
||||
<div class="mt-4">
|
||||
<h6 class="fw-bold text-secondary">Jawapan Lain-lain:</h6>
|
||||
<ul class="list-group list-group-flush border rounded">
|
||||
@foreach($result['other_answers'] as $otherAns)
|
||||
<li class="list-group-item other-answer-item">{{ $otherAns }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Load Chart.js CDN (Kalau belum ada dalam layout) --}}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const results = @json($results);
|
||||
|
||||
Object.keys(results).forEach(id => {
|
||||
const data = results[id];
|
||||
|
||||
if(data.type === 'text') return;
|
||||
|
||||
const ctx = document.getElementById(`chart-${id}`).getContext('2d');
|
||||
|
||||
// Extract labels dan values untuk chart
|
||||
const labels = data.data.map(item => item.label);
|
||||
const counts = data.data.map(item => item.count);
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Bilangan Responden',
|
||||
data: counts,
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'],
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
// indexAxis: 'y',
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user