378 lines
12 KiB
PHP
378 lines
12 KiB
PHP
@extends('template.template')
|
|
|
|
@section('title', 'Dashboard')
|
|
|
|
@section('content')
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<h3 class="card-title">TOTAL PASIEN HARI INI</h3>
|
|
<div class="card-toolbar gap-2">
|
|
<span id="total_pasien_today" class="fs-2">N/A</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card card-bordered">
|
|
<div class="card-body">
|
|
<div id="total_pasien" style="height: 350px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<h3 class="card-title">TOTAL PENDAPATAN HARI INI</h3>
|
|
<div class="card-toolbar gap-2">
|
|
<span id="total_fund_today" class="fs-2">N/A</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="card card-bordered">
|
|
<div class="card-body">
|
|
<div id="total_fund" style="height: 350px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('custom_js')
|
|
<script>
|
|
$(document).ready(function() {
|
|
get_data();
|
|
});
|
|
|
|
function get_data() {
|
|
get_total_pasien();
|
|
get_total_fund();
|
|
}
|
|
|
|
function get_total_pasien() {
|
|
$.ajax({
|
|
url: "{{ url('/dashboard/get_total_pasien') }}",
|
|
type: "GET",
|
|
dataType: 'JSON',
|
|
success: function(response) {
|
|
if (response.status) {
|
|
const data = response.data;
|
|
$('#total_pasien_today').html(data.total_today.total + ' Orang');
|
|
|
|
const categories = [];
|
|
const series = [];
|
|
const chart = data.chart;
|
|
chart.map(function(value){
|
|
categories.push(value.registrasi_tanggal);
|
|
series.push(value.total);
|
|
});
|
|
generate_Chart_total_pasien(categories, series)
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
function get_total_fund() {
|
|
$.ajax({
|
|
url: "{{ url('/dashboard/get_total_fund') }}",
|
|
type: "GET",
|
|
dataType: 'JSON',
|
|
success: function(response) {
|
|
if (response.status) {
|
|
const data = response.data;
|
|
$('#total_fund_today').html('Rp' + data.total_today.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."));
|
|
|
|
const categories = [];
|
|
const series = [];
|
|
const chart = data.chart;
|
|
chart.map(function(value){
|
|
categories.push(value.tanggal);
|
|
series.push(value.total);
|
|
});
|
|
generate_Chart_total_fund(categories, series)
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
function generate_Chart_total_pasien(categories, series) {
|
|
var element = document.getElementById('total_pasien');
|
|
|
|
var height = parseInt(KTUtil.css(element, 'height'));
|
|
var labelColor = KTUtil.getCssVariableValue('--kt-gray-500');
|
|
var borderColor = KTUtil.getCssVariableValue('--kt-gray-200');
|
|
var baseColor = KTUtil.getCssVariableValue('--kt-info');
|
|
var lightColor = KTUtil.getCssVariableValue('--kt-info-light');
|
|
|
|
// if (!element) {
|
|
// return;
|
|
// }
|
|
|
|
var options = {
|
|
series: [{
|
|
name: 'Total Pasien',
|
|
data: series
|
|
}],
|
|
chart: {
|
|
fontFamily: 'inherit',
|
|
type: 'area',
|
|
height: height,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
fill: {
|
|
type: 'solid',
|
|
opacity: 1
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor]
|
|
},
|
|
xaxis: {
|
|
categories: categories,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '12px'
|
|
}
|
|
},
|
|
crosshairs: {
|
|
position: 'front',
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0
|
|
}
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: 'none',
|
|
value: 0
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: '12px'
|
|
},
|
|
y: {
|
|
formatter: function(val) {
|
|
return val + ' Orang'
|
|
}
|
|
}
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
}
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(element, options);
|
|
chart.render();
|
|
}
|
|
|
|
function generate_Chart_total_fund(categories, series) {
|
|
var element = document.getElementById('total_fund');
|
|
|
|
var height = parseInt(KTUtil.css(element, 'height'));
|
|
var labelColor = KTUtil.getCssVariableValue('--kt-gray-500');
|
|
var borderColor = KTUtil.getCssVariableValue('--kt-gray-200');
|
|
var baseColor = KTUtil.getCssVariableValue('--kt-info');
|
|
var lightColor = KTUtil.getCssVariableValue('--kt-info-light');
|
|
|
|
// if (!element) {
|
|
// return;
|
|
// }
|
|
|
|
var options = {
|
|
series: [{
|
|
name: 'Total Pendapatan',
|
|
data: series
|
|
}],
|
|
chart: {
|
|
fontFamily: 'inherit',
|
|
type: 'area',
|
|
height: height,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
fill: {
|
|
type: 'solid',
|
|
opacity: 1
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor]
|
|
},
|
|
xaxis: {
|
|
categories: categories,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '12px'
|
|
}
|
|
},
|
|
crosshairs: {
|
|
position: 'front',
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none',
|
|
value: 0
|
|
}
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: 'none',
|
|
value: 0
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: '12px'
|
|
},
|
|
y: {
|
|
formatter: function(val) {
|
|
return 'Rp.' + val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
}
|
|
}
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
}
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(element, options);
|
|
chart.render();
|
|
}
|
|
</script>
|
|
@endsection
|