@extends('partials.

template')
@section('main')
<!-- BEGIN: Content-->
<div class="app-content content ">
<div class="content-overlay"></div>
<div class="header-navbar-shadow"></div>
<div class="content-wrapper">
<div class="content-header row">
<div class="content-header-left col-md-12 col-12 mb-1">
<div class="row breadcrumbs-top">
<div class="col-md-12 col-12">
<h2 class="content-header-title float-left">Dashboard
Lafibiovak</h2>
</div>
</div>
</div>
</div>
<div class="content-body">
<div class="row match-height">
<div class="col-md-4 col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Status Pengajuan RKO
2022</div>
</div>
<div class="card-body">
<div id="pengajuan" class="mt-3"></div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Persentase Persediaan</div>
</div>
<div class="card-body">
<div id="coba" class="mt-3"></div>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Kategori Bahan Baku</div>
</div>
<div class="card-body">
<div id="bahan_baku" class="mt-3"></div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Renprod</div>
</div>
<div class="card-body pb-0">
<div id="renprod"></div>
</div>
</div>
 </div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Persediaan Obat</div>
</div>
<div class="card-body">
<div id="persediaan"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Distribusi Obat</div>
</div>
<div class="card-body">
<div id="distribusi"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Content-->
@endsection
@section('page_script')
<script>

$(document).ready(function() {
donat_chart("#pengajuan", [49, 22], ["Diajukan", "Disetujui"])
donat_chart("#coba", [49, 22,49, 22,49, 22,49, 22,49, 22], ["Diajukan",
"Disetujui","Diajukan", "Disetujui","Diajukan", "Disetujui","Diajukan",
"Disetujui","Diajukan", "Disetujui"])
donat_chart("#bahan_baku", [25, 25, 25, 25], ["1", "2", "3", "4"])
});

var flatPicker = $('.flat-picker'),

isRtl = $('html').attr('data-textdirection') === 'rtl',
grid_line_color = 'rgba(200, 200, 200, 0.2)',
labelColor = '#6e6b7b',
tooltipShadow = 'rgba(0, 0, 0, 0.25)',
successColorShade = '#28dac6',
chartColors = {
pie: {
merah: '#EE3124',
ijo: '#28C76F',
kuning: '#FFAB00',
biru: '#2045B8',
ungu: '#BD5C91',
birmud: '#00CFE8',
ijomud: '#85C808',
pink: '#EA5455',
 orange: '#F24E1E',
peach: '#FF9F43'
},
};

let pie_color = Object.keys(chartColors['pie'])

.map(function(key) {
return chartColors['pie'][key];
});

function donat_chart(selector, series, labels) {

var bor_covid_element = document.querySelector(selector),
bor_covid_config = {
chart: {
height: 250,
type: 'pie'
},
colors: [chartColors.pie.merah, chartColors.pie.ijo,
chartColors.pie.kuning, chartColors.pie.biru,
chartColors.pie.ungu, chartColors.pie.birmud,
chartColors.pie.ijommud, chartColors.pie.pink,
chartColors.pie.orange, chartColors.pie.peach
],
plotOptions: {
radialBar: {
size: 185,
hollow: {
size: '25%'
},
track: {
margin: 15
},
dataLabels: {
name: {
fontSize: '2rem',
fontFamily: 'Montserrat'
},
value: {
fontSize: '1rem',
fontFamily: 'Montserrat'
},
total: {
show: true,
fontSize: '1rem',
label: 'Comments',
formatter: function(w) {
return '80%';
}
}
}
}
},
legend: {
show: true
},
stroke: {
lineCap: 'round'
},
series: series,
 labels: labels,
colors: pie_color
};
if (typeof bor_covid_element !== undefined && bor_covid_element !==
null) {
var radialChart = new ApexCharts(bor_covid_element,
bor_covid_config);
radialChart.render();
}
}

var options = {
series: [{
data: [44, 55, 57, 56, 61, 58]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '30%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
colors: ['#7367F0', '#d2b0ff'],
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Paracetamol', 'Paracetamol', 'Paracetamol',
'Paracetamol', 'Paracetamol', 'Paracetamol'],
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return val
}
}
}
};

var chart = new ApexCharts(document.querySelector("#renprod"), options);

chart.render();

var options = {
series: [{
name: "Persedian Awal",
data: [44, 55, 57, 56, 61, 58]
},
 {
name: "Renprod",
data: [64, 85, 67, 76, 91, 38]
}],
chart: {
type: 'bar',
height: 400
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '40%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
colors: ['#7367F0', '#d2b0ff'],
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Paracetamol', 'Paracetamol', 'Paracetamol',
'Paracetamol', 'Paracetamol', 'Paracetamol'],
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return val
}
}
}
};

var chart = new ApexCharts(document.querySelector("#persediaan"), options);

chart.render();

var options = {
series: [{
name: "Persedian Awal",
data: [44, 55, 57, 56, 61, 58]
},
{
name: "Distribusi",
data: [64, 85, 67, 76, 91, 38]
}],
chart: {
type: 'bar',
height: 400
},
plotOptions: {
bar: {
horizontal: false,
 columnWidth: '40%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
colors: ['#7367F0', '#d2b0ff'],
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Paracetamol', 'Paracetamol', 'Paracetamol',
'Paracetamol', 'Paracetamol', 'Paracetamol'],
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return val
}
}
}
};

var chart = new ApexCharts(document.querySelector("#distribusi"), options);

chart.render();

</script>
@endsection