fix bajet

This commit is contained in:
hafifierahman
2022-06-21 20:07:04 +08:00
parent e74870b6b3
commit 2121b4dccb
+546 -145
View File
@@ -17,7 +17,8 @@
<div class="row justify-content-center">
<div class="card bg-light mb-3 col-4">
<div id="divpembharian" class="card bg-light mb-3 col-4">
<div class="card-header font-weight-bold">Pembiayaan</div>
<div class="card-body">
<div class="progress mb-2">
@@ -28,7 +29,7 @@
<div>
<span class="col-5 font-weight-bold">HARIAN</span>
<span class="col-1">:</span>
<span id="pembharian" class="col-5">HARIAN</span>
<span id="pembharian" class="col-5"></span>
</div>
<div>
<span id="pembpercent">-100%</span>
@@ -134,6 +135,70 @@
</div>
</div>
<div class="mt-3 row">
<div class="card bg-light mb-3 col-4">
<div class="card-header font-weight-bold">Pembiayaan Terkumpul</div>
<div class="card-body">
<div class="row justify-content-center">
<div class="card text-white bg-info mb-3 col-5 mr-2 pt-4 pb-4">
ACTUAL : <span id="pembactualtahunan"></span>
</div>
<div class="card text-white bg-info mb-3 col-5 p-4">
BAJET : <span id="pembbajettahunan"></span>
</div>
</div>
</div>
</div>
<div class="card bg-light mb-3 col-4">
<div class="card-header font-weight-bold">Penebusan Terkumpul</div>
<div class="card-body">
<div class="row justify-content-center">
<div class="card text-white bg-info mb-3 col-5 mr-2 p-4">
ACTUAL : <span id="penbactualtahunan"></span>
</div>
<div class="card text-white bg-info mb-3 col-5 p-4">
BAJET : <span id="penbbajettahunan"></span>
</div>
</div>
</div>
</div>
<div class="card bg-light mb-3 col-4">
<div class="card-header font-weight-bold">Keuntungan Terkumpul</div>
<div class="card-body">
<div class="row justify-content-center">
<div class="card text-white bg-info mb-3 col-5 mr-2 p-4">
ACTUAL : <span id="keunactualtahunan"></span>
</div>
<div class="card text-white bg-info mb-3 col-5 p-4">
BAJET : <span id="keunbajettahunan"></span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-3 d-flex justify-content-center">
<div class="card bg-light mb-3 col-10">
<span class="font-weight-bold mt-2 mb-2">Bilangan Orang Bulanan</span>
<div class="card-body">
<div id="chartbilangan">
</div>
</div>
</div>
</div>
</div>
</div>
@@ -142,171 +207,481 @@
</div>
<script>
let pusherenv = "{{ env('PUSHER_APP_KEY') }}";
let api_url = "{{ $api_url }}";
const formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2
});
const formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2
});
var options = {
series: [ {
name: 'Actual',
data: []
}],
chart: {
id: 'pembiayaan-bulanan',
height: 350,
type: 'bar'
},
yaxis: {
labels: {
formatter: function (value) {
return 'RM ' + formatter.format(value);
}
var options = {
series: [ {
name: 'Actual',
data: []
}],
chart: {
id: 'pembiayaan-bulanan',
height: 350,
type: 'bar'
},
},
plotOptions: {
bar: {
columnWidth: '60%',
dataLabels: {
position: 'top',
},
}
},
colors: ['#3498db'],
dataLabels: {
enabled: true,
style: {
colors: ['#333']
yaxis: {
labels: {
formatter: function (value) {
return 'RM ' + formatter.format(value);
}
},
offsetY: -30,
formatter: function (val, opt) {
let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100
},
plotOptions: {
bar: {
columnWidth: '60%',
dataLabels: {
position: 'top',
},
}
},
colors: ['#3498db'],
dataLabels: {
enabled: true,
style: {
colors: ['#333']
},
offsetY: -30,
formatter: function (val, opt) {
let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100
if(isNaN(total))
{
return 0.00
}else{
if(isFinite(total))
{
if(total == -100)
if(isNaN(total))
{
return 0.00
}else{
return total.toFixed(2)
if(isFinite(total))
{
if(total == -100)
{
return 0.00
}else{
return total.toFixed(2)
}
}else{
return 0.00
}
}
}else{
return 0.00
}
}
},
},
},
legend: {
show: true,
showForSingleSeries: true,
customLegendItems: ['Actual', 'Expected'],
markers: {
fillColors: ['#3498db', '#e74c3c']
legend: {
show: true,
showForSingleSeries: true,
customLegendItems: ['Actual', 'Expected'],
markers: {
fillColors: ['#3498db', '#e74c3c']
}
}
};
var optionsbilangan = {
series: [{
name: 'Gadai',
data:[]
}, {
name: 'Tebus',
data:[]
}],
chart: {
id: 'bilangan-bulanan',
height: 350,
type: 'bar'
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded',
dataLabels: {
position: 'top',
},
},
},
dataLabels: {
enabled: true,
distributed: true,
style: {
colors: ['#333'],
fontSize: '12px',
fontWeight: 'bold'
},
dropShadow: {
enabled: true,
left: 2,
top: 2,
opacity: 0.5
},
offsetY: -30,
background: {
enabled: true,
foreColor: '#fff',
borderRadius: 2,
padding: 4,
opacity: 0.9,
borderWidth: 1,
borderColor: '#fff'
},
formatter: function (val, opt) {
let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100
if(isNaN(total))
{
return 0.00
}else{
if(isFinite(total))
{
if(total == -100)
{
return 0.00
}else{
return total.toFixed(2)
}
}else{
return 0.00
}
}
},
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
legend: {
show: true,
showForSingleSeries: true,
customLegendItems: ['Gadai', 'Tebus','Expected'],
markers: {
fillColors: ['#70a1ff', '#7bed9f','#e74c3c']
}
},
yaxis: {
title: {
text: '(Bilangan Orang)'
}
},
fill: {
opacity: 1,
colors: ['#70a1ff', '#7bed9f']
},
tooltip: {
y: {
formatter: function (val) {
return val + " orang"
}
}
}
};
var caw = "{{ $cawangan_info['kodcaw'] }}";
//Declaration of Engine --> 0:idle 1:waiting 2:success
var pembbul = 0;penbbul = 0;keunbul = 0;
var pembtah = 0;penbtah = 0;keuntah = 0;
var pembhar = 0;penbhar = 0;keunhar = 0;
var bilangan = 0;
//pusher
var pusher = new Pusher(pusherenv, {
cluster: 'ap1',
encrypted: true
});
var channel = pusher.subscribe('gadai-notify');
channel.bind('trigger-gadai', function(data) {
if(pembbul == 0 && pembtah == 0 && pembhar == 0 && bilangan == 0)
{
if(data.cawangan === caw)
{
CallPembBulanan();
CallPembTahunan();
CallPembToday();
CallBilangan();
}
}
};
$( document ).ready(function() {
let api_url = "{{ $api_url }}";
$.ajax({
method:'get',
url: api_url + '/admin/pembiayaanBulanan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
success:function(data){
datapembiayaan(data);
}
});
$.ajax({
method:'get',
url: api_url + '/admin/penebusanBulanan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
success:function(data){
datapenebusan(data);
}
var channel = pusher.subscribe('tebus-notify');
channel.bind('trigger-tebus', function(data) {
if(penbbul == 0 && penbtah == 0 && penbhar == 0 && bilangan == 0)
{
if(data.cawangan === caw)
{
CallPenbBulanan();
CallPenbTahunan();
CallPenbToday();
CallBilangan();
}
}
});
$.ajax({
method:'get',
url: api_url + '/admin/keuntunganBulanan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
success:function(data){
datakeuntungan(data);
}
var channel = pusher.subscribe('keuntungan-notify');
channel.bind('trigger-keuntungan', function(data) {
if(keunbul == 0 && keuntah == 0 && keunhar == 0)
{
if(data.cawangan === caw)
{
CallKeunBulanan();
CallKeunTahunan();
CallKeunToday();
}
}
});
$.ajax({
method:'get',
url: api_url + '/admin/pembiayaanToday',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
success:function(data){
console.log(data);
$('#pembharian').text('RM' + formatter.format(data[0].gadaiToday));
$('#pembbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
$('#pembpercent').text(data[0].percentDiff + '%');
$('#pembprogress').text(100 - data[0].percentcum + '%');
$("#pembprogress").css("width",100 - data[0].percentcum);
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
// this.percentcumgadai = (100 - data[0].percentcum)
}
});
$.ajax({
method:'get',
url: api_url + '/admin/penebusanToday',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
success:function(data){
console.log(data);
$('#penbharian').text('RM' + formatter.format(data[0].tebusToday));
$('#penbbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
$('#penbpercent').text(data[0].percentDiff + '%');
$('#penbprogress').text(100 - data[0].percentcum + '%');
$("#penbprogress").css("width",100 - data[0].percentcum);
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
// this.percentcumgadai = (100 - data[0].percentcum)
}
});
function CallPembBulanan(){
$.ajax({
method:'get',
url: api_url + '/admin/keuntunganToday',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
success:function(data){
console.log(data);
$('#keunharian').text('RM' + formatter.format(data[0].upahToday));
$('#keunbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
$('#keunpercent').text(data[0].percentDiff + '%');
$('#keunprogress').text(100 - data[0].percentcum + '%');
$("#keunprogress").css("width",100 - data[0].percentcum);
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
// this.percentcumgadai = (100 - data[0].percentcum)
}
});
$.ajax({
method:'get',
url: api_url + '/admin/pembiayaanBulanan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
pembbul = 1;
},
success:function(data){
pembbul = 2;
datapembiayaan(data);
}
});
});
}
function CallPenbBulanan(){
$.ajax({
method:'get',
url: api_url + '/admin/penebusanBulanan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
penbbul = 1;
},
success:function(data){
penbbul = 2;
datapenebusan(data);
}
});
}
function CallKeunBulanan(){
$.ajax({
method:'get',
url: api_url + '/admin/keuntunganBulanan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
keunbul = 1;
},
success:function(data){
keunbul = 2;
datakeuntungan(data);
}
});
}
function CallPembToday(){
$.ajax({
method:'get',
url: api_url + '/admin/pembiayaanToday',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
pembhar = 1;
},
success:function(data){
$('#pembharian').text('RM' + formatter.format(data[0].gadaiToday));
$('#pembbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
$('#pembpercent').text(data[0].percentDiff + '%');
$('#pembprogress').text(100 - data[0].percentcum + '%');
$("#pembprogress").css("width",100 - data[0].percentcum);
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
// this.percentcumgadai = (100 - data[0].percentcum)
pembhar = 0;
}
});
}
function CallPenbToday(){
$.ajax({
method:'get',
url: api_url + '/admin/penebusanToday',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
penbhar = 1;
},
success:function(data){
$('#penbharian').text('RM' + formatter.format(data[0].tebusToday));
$('#penbbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
$('#penbpercent').text(data[0].percentDiff + '%');
$('#penbprogress').text(100 - data[0].percentcum + '%');
$("#penbprogress").css("width",100 - data[0].percentcum);
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
// this.percentcumgadai = (100 - data[0].percentcum)
penbhar = 1;
}
});
}
function CallKeunToday(){
$.ajax({
method:'get',
url: api_url + '/admin/keuntunganToday',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
keunhar = 1;
},
success:function(data){
$('#keunharian').text('RM' + formatter.format(data[0].upahToday));
$('#keunbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
$('#keunpercent').text(data[0].percentDiff + '%');
$('#keunprogress').text(100 - data[0].percentcum + '%');
$("#keunprogress").css("width",100 - data[0].percentcum);
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
// this.percentcumgadai = (100 - data[0].percentcum)
keunhar = 0;
}
});
}
function CallPembTahunan(){
$.ajax({
method:'get',
url: api_url + '/admin/pembiayaanTahunan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
pembtah = 1;
},
success:function(data){
$('#pembactualtahunan').text('RM' + formatter.format(data[0].total));
$('#pembbajettahunan').text('RM' + formatter.format(data[0].bajet));
pembtah = 0;
}
});
}
function CallPenbTahunan(){
$.ajax({
method:'get',
url: api_url + '/admin/penebusanTahunan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
penbtah = 1;
},
success:function(data){
$('#penbactualtahunan').text('RM' + formatter.format(data[0].total));
$('#penbbajettahunan').text('RM' + formatter.format(data[0].bajet));
penbtah = 0;
}
});
}
function CallKeunTahunan(){
$.ajax({
method:'get',
url: api_url + '/admin/keuntunganTahunan',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
keuntah = 1;
},
success:function(data){
$('#keunactualtahunan').text('RM' + formatter.format(data[0].total));
$('#keunbajettahunan').text('RM' + formatter.format(data[0].bajet));
keuntah = 0;
}
});
}
function CallBilangan(){
$.ajax({
method:'get',
url: api_url + '/admin/bilangan/gadai',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
beforeSend: function() {
bilangan = 1;
},
success:function(datagadai){
$.ajax({
method:'get',
url: api_url + '/admin/bilangan/tebus',
datatype:'json',
data:{
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
},
success:function(datatebus){
bilangan = 2;
bilanganbulanan(datagadai,datatebus);
}
});
}
});
}
$( document ).ready(function() {
CallPembBulanan();
CallPenbBulanan();
CallKeunBulanan();
CallPembToday();
CallPenbToday();
CallKeunToday();
CallPembTahunan();
CallPenbTahunan();
CallKeunTahunan();
CallBilangan();
});
function datapembiayaan(datapemb)
{
@@ -315,6 +690,8 @@ $( document ).ready(function() {
chartpemb.updateSeries([{
data: datapemb
}]);
pembbul = 0;pembtah = 0;pembhar = 0;
}
function datapenebusan(datapen)
@@ -324,6 +701,8 @@ $( document ).ready(function() {
chartpen.updateSeries([{
data: datapen
}]);
penbbul = 0;penbtah = 0;penbhar = 0;
}
function datakeuntungan(datakeun)
@@ -333,6 +712,28 @@ $( document ).ready(function() {
charkeun.updateSeries([{
data: datakeun
}]);
keunbul = 0;keuntah = 0;keunhar = 0;
}
function bilanganbulanan(datagadai,datatebus)
{
var charbil = new ApexCharts(document.querySelector("#chartbilangan"), optionsbilangan);
charbil.render();
charbil.updateSeries(
[
{
name: 'Gadai',
data: datagadai
},
{
name: 'Tebus',
data: datatebus
},
]
);
bilangan = 0;
}