E31230190_Bintang-Rizki-Sap.../resources/views/admin/dashboard.blade.php

100 lines
2.1 KiB
PHP

@extends('layouts.admin')
@section('title', 'Dashboard')
@section('content')
<div class="row">
<!-- PASIEN -->
<div class="col-md-3 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>
<!-- DIAGNOSA -->
<div class="col-md-3 mb-3">
<div class="card shadow-sm text-white bg-success">
<div class="card-body">
<h5>Total Diagnosa</h5>
<h2>{{ $totalDiagnosa }}</h2>
</div>
</div>
</div>
<!-- PENYAKIT -->
<div class="col-md-3 mb-3">
<div class="card shadow-sm text-white bg-warning">
<div class="card-body">
<h5>Total Penyakit</h5>
<h2>{{ $totalPenyakit }}</h2>
</div>
</div>
</div>
<!-- GEJALA -->
<div class="col-md-3 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 Diagnosa</h5>
<canvas id="chartDiagnosa"></canvas>
</div>
</div>
@endsection
@push('scripts')
<!-- CHART JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const dataChart = {
labels: [
@foreach($chart as $c)
"{{ $c->penyakit->nama }}",
@endforeach
],
datasets: [{
label: 'Jumlah Diagnosa',
data: [
@foreach($chart as $c)
{{ $c->total }},
@endforeach
]
}]
};
const config = {
type: 'bar',
data: dataChart,
options: {
responsive: true,
plugins: {
legend: {
display: false
}
}
}
};
new Chart(document.getElementById('chartDiagnosa'), config);
</script>
@endpush