171 lines
2.2 KiB
PHP
171 lines
2.2 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Dashboard')
|
|
|
|
@section('content')
|
|
|
|
<div class="row">
|
|
|
|
<!-- PASIEN -->
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card shadow-sm text-white bg-primary">
|
|
<div class="card-body">
|
|
|
|
<h5>Total Pasien</h5>
|
|
|
|
<h2>{{ $totalPasien }}</h2>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DETEKSI DINI -->
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card shadow-sm text-white bg-success">
|
|
<div class="card-body">
|
|
|
|
<h5>Total Deteksi Dini</h5>
|
|
|
|
<h2>{{ $totalDiagnosa }}</h2>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GEJALA -->
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card shadow-sm text-white bg-danger">
|
|
<div class="card-body">
|
|
|
|
<h5>Total Gejala</h5>
|
|
|
|
<h2>{{ $totalGejala }}</h2>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- GRAFIK -->
|
|
|
|
<div class="card shadow-sm mt-4">
|
|
|
|
<div class="card-body">
|
|
|
|
<h5 class="mb-3">
|
|
|
|
Grafik Hasil Deteksi Dini
|
|
|
|
</h5>
|
|
|
|
<canvas id="chartDiagnosa"></canvas>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
|
|
@push('scripts')
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
|
|
const dataChart = {
|
|
|
|
labels: [
|
|
|
|
@foreach($chart as $c)
|
|
|
|
"{{ $c['label'] }}",
|
|
|
|
@endforeach
|
|
|
|
],
|
|
|
|
datasets: [{
|
|
|
|
label: 'Jumlah Deteksi Dini',
|
|
|
|
data: [
|
|
|
|
@foreach($chart as $c)
|
|
|
|
{{ $c['total'] }},
|
|
|
|
@endforeach
|
|
|
|
],
|
|
|
|
borderWidth: 1,
|
|
|
|
backgroundColor: [
|
|
|
|
'#198754',
|
|
'#0d6efd',
|
|
'#ffc107',
|
|
'#dc3545'
|
|
|
|
]
|
|
|
|
}]
|
|
|
|
};
|
|
|
|
|
|
const config = {
|
|
|
|
type: 'bar',
|
|
|
|
data: dataChart,
|
|
|
|
options: {
|
|
|
|
responsive: true,
|
|
|
|
plugins: {
|
|
|
|
legend: {
|
|
|
|
display: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
scales: {
|
|
|
|
y: {
|
|
|
|
beginAtZero: true,
|
|
|
|
ticks: {
|
|
|
|
precision: 0
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
new Chart(
|
|
|
|
document.getElementById('chartDiagnosa'),
|
|
|
|
config
|
|
|
|
);
|
|
|
|
</script>
|
|
|
|
@endpush |