148 lines
4.7 KiB
PHP
148 lines
4.7 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Dashboard')
|
|
|
|
@section('main')
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Dashboard</h1>
|
|
</div>
|
|
<div class="section-body">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="card card-statistic-1">
|
|
<div class="card-icon bg-primary">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<div class="card-wrap">
|
|
<div class="card-header">
|
|
<h4>Jumlah Peternakan</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
{{ $jumlahPeternakan }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="card card-statistic-1">
|
|
<div class="card-icon bg-danger">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="card-wrap">
|
|
<div class="card-header">
|
|
<h4>Jumlah User</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
{{ $jumlahUser }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="card card-statistic-1">
|
|
<div class="card-icon bg-success">
|
|
<i class="fas fa-truck"></i>
|
|
</div>
|
|
<div class="card-wrap">
|
|
<div class="card-header">
|
|
<h4>Jumlah Sopir</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
{{ $jumlahSopir }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Grafik Penen Tahun {{date("Y")}}</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="perkembanganChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
<script>
|
|
// document.addEventListener("DOMContentLoaded", function () {
|
|
// var grafikData = @json($grafikData);
|
|
// var bulan = grafikData.map(data => data.bulan);
|
|
// var pakanPakai = grafikData.map(data => data.total_pakan_pakai);
|
|
// // var pakanSisa = grafikData.map(data => data.total_pakan_sisa);
|
|
// var bobot = grafikData.map(data => data.total_bobot);
|
|
// var afkir = grafikData.map(data => data.total_afkir);
|
|
// var kematian = grafikData.map(data => data.total_kematian);
|
|
|
|
// var trace1 = {
|
|
// x: bulan,
|
|
// y: pakanPakai,
|
|
// type: 'scatter',
|
|
// mode: 'lines',
|
|
// name: 'Pakan Pakai'
|
|
// };
|
|
|
|
// // var trace2 = {
|
|
// // x: bulan,
|
|
// // y: pakanSisa,
|
|
// // type: 'scatter',
|
|
// // mode: 'lines',
|
|
// // name: 'Pakan Sisa'
|
|
// // };
|
|
|
|
// var trace3 = {
|
|
// x: bulan,
|
|
// y: bobot,
|
|
// type: 'scatter',
|
|
// mode: 'lines',
|
|
// name: 'Tonase'
|
|
// };
|
|
|
|
// var trace4 = {
|
|
// x: bulan,
|
|
// y: afkir,
|
|
// type: 'scatter',
|
|
// mode: 'lines',
|
|
// name: 'Afkir'
|
|
// };
|
|
|
|
// var trace5 = {
|
|
// x: bulan,
|
|
// y: kematian,
|
|
// type: 'scatter',
|
|
// mode: 'lines',
|
|
// name: 'Kematian'
|
|
// };
|
|
|
|
// var data = [trace1, trace3, trace4, trace5];
|
|
|
|
// var layout = {
|
|
// title: 'Grafik Perkembangan',
|
|
// xaxis: {
|
|
// title: 'Bulan'
|
|
// },
|
|
// yaxis: {
|
|
// title: 'Jumlah'
|
|
// }
|
|
// };
|
|
|
|
// // Plotly.newPlot('perkembanganChart', data, layout);
|
|
// });
|
|
|
|
</script>
|
|
<script>
|
|
TESTER = document.getElementById('perkembanganChart');
|
|
Plotly.newPlot( TESTER, [{
|
|
x: @json($label),
|
|
y: @json($hasil_panen), type: 'bar' }],
|
|
{
|
|
margin: { t: 0 } } );
|
|
</script>
|
|
@endsection
|