resto-dhepot/resources/views/pages/admin/dashboard/js.blade.php

419 lines
17 KiB
PHP

@push('scripts')
<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
<!-- ChartJS -->
<script src="{{ asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
<script type="text/javascript">
$(function() {
'use strict'
var ticksStyle = {
fontColor: '#495057',
fontStyle: 'bold'
}
var mode = 'index'
var intersect = true
$.ajax({
url: "{{ route('dashboard.getChartWeek') }}",
type: "GET",
cache: false,
async: false,
success: function(response) {
var data = response.data;
$('#penjualanWeek').append(converRp(data.grandTotalThisWeek));
changeDataFromCalculateChart('persentaseWeek', data
.percentageOfSalesGrowth,
data.statusCalculation)
var $salesChart = $('#sales-chart-week')
var salesChart = new Chart($salesChart, {
type: 'bar',
data: {
labels: Object.keys(data.thisWeek),
datasets: [{
backgroundColor: '#007bff',
borderColor: '#007bff',
data: Object.values(data.thisWeek)
}]
},
options: {
maintainAspectRatio: false,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: false
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
// Include a dollar sign in the ticks
callback: function(value, index,
values) {
return converRp(value)
}
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
},
error: function(response) {
console.log(response);
}
})
})
$(function() {
'use strict'
var ticksStyle = {
fontColor: '#495057',
fontStyle: 'bold'
}
var mode = 'index'
var intersect = true
$.ajax({
url: "{{ route('dashboard.getChartMonth') }}",
type: "GET",
cache: false,
async: false,
success: function(response) {
var data = response.data;
$('#penjualanMonth').append(converRp(data.grandTotalThisMonth));
changeDataFromCalculateChart('persentaseMonth', data
.percentageOfSalesGrowth,
data.statusCalculation)
var $salesChart = $('#sales-chart-month')
var salesChart = new Chart($salesChart, {
type: 'bar',
data: {
labels: Object.keys(data.weekThisMonth),
datasets: [{
backgroundColor: '#007bff',
borderColor: '#007bff',
data: Object.values(data.weekThisMonth)
}]
},
options: {
maintainAspectRatio: false,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: false
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
// Include a dollar sign in the ticks
callback: function(value, index,
values) {
return converRp(value)
}
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
},
error: function(response) {
console.log(response);
}
})
})
$(function() {
'use strict'
var ticksStyle = {
fontColor: '#495057',
fontStyle: 'bold'
}
var mode = 'index'
var intersect = true
$.ajax({
url: "{{ route('dashboard.getChartYear') }}",
type: "GET",
cache: false,
async: false,
success: function(response) {
var data = response.data;
// console.log(data);
$('#penjualanYear').append(converRp(data.grandTotalThisYear));
changeDataFromCalculateChart('persentaseYear', data
.percentageOfSalesGrowth,
data.statusCalculation)
var $salesChart = $('#sales-chart-year')
var salesChart = new Chart($salesChart, {
type: 'bar',
data: {
labels: Object.keys(data.monthThisYear),
datasets: [{
backgroundColor: '#007bff',
borderColor: '#007bff',
data: Object.values(data.monthThisYear)
}]
},
options: {
maintainAspectRatio: false,
tooltips: {
mode: mode,
intersect: intersect
},
hover: {
mode: mode,
intersect: intersect
},
legend: {
display: false
},
scales: {
yAxes: [{
// display: false,
gridLines: {
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks: $.extend({
beginAtZero: true,
// Include a dollar sign in the ticks
callback: function(value, index,
values) {
return converRp(value)
}
}, ticksStyle)
}],
xAxes: [{
display: true,
gridLines: {
display: false
},
ticks: ticksStyle
}]
}
}
})
},
error: function(response) {
console.log(response);
}
})
})
$(document).ready(function() {
$('#table-terlaris').DataTable({
processing: true,
serverSide: true,
searching: false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
ajax: "{{ route('dashboard.menuTerlaris') }}",
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
className: 'text-center'
},
{
data: 'nama_produk',
name: 'nama_produk'
},
{
data: 'harga_produk',
name: 'harga_produk',
'render': function(data, type, full, meta) {
// change to IDR
return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
},
className: 'text-right'
},
{
data: 'jumlah_produk_terjual',
name: 'jumlah_produk_terjual'
}
]
})
})
$(document).ready(function() {
$('#table-minuman-terlaris').DataTable({
processing: true,
serverSide: true,
searching: false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
ajax: "{{ route('dashboard.minumanTerlaris') }}",
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
className: 'text-center'
},
{
data: 'nama_produk',
name: 'nama_produk'
},
{
data: 'harga_produk',
name: 'harga_produk',
'render': function(data, type, full, meta) {
// change to IDR
return 'Rp. ' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
},
className: 'text-right'
},
{
data: 'jumlah_produk_terjual',
name: 'jumlah_produk_terjual'
}
]
})
})
$(document).ready(function() {
getCalculationPendapatan();
})
function getCalculationPendapatan() {
$.ajax({
url: "{{ route('dashboard.getCalculationPendapatan') }}",
type: "GET",
cache: false,
async: false,
success: function(response) {
var data = response.data;
// console.log(data);
changeDataFromCalculate('penjualanBulan', data.pendapatanBulan
.penjualanSatuBulan, data.pendapatanBulan.percentageOfSalesGrowth,
data.pendapatanBulan.statusCalculation)
changeDataFromCalculate('penjualanMinggu', data.pendapatanMinggu
.penjualanSatuMinggu, data.pendapatanMinggu.percentageOfSalesGrowth,
data.pendapatanMinggu.statusCalculation)
changeDataFromCalculate('penjualanHari', data.pendapatanHari
.penjualanHariIni, data.pendapatanHari.percentageOfSalesGrowth,
data.pendapatanHari.statusCalculation)
},
error: function(response) {
console.log(response);
}
})
}
function changeDataFromCalculate(id, penjualanSatuBulan, percentageOfSalesGrowth, statusCalculation) {
// change to IDR
if (penjualanSatuBulan == null) {
penjualanSatuBulan = 0;
} else {
penjualanSatuBulan;
}
$('#' + id).append(converRp(penjualanSatuBulan));
// pembulatan 2 angka di belakang koma
percentageOfSalesGrowth = percentageOfSalesGrowth.toFixed(2);
switch (statusCalculation) {
case 1:
$('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-left"></i> ' +
percentageOfSalesGrowth + '%')
$('#' + id + 'percentageOfSalesGrowth').addClass('text-warning')
break;
case 2:
$('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-up"></i> ' +
percentageOfSalesGrowth + '%')
$('#' + id + 'percentageOfSalesGrowth').addClass('text-success')
break;
case 3:
$('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-down"></i> ' +
percentageOfSalesGrowth + '%')
$('#' + id + 'percentageOfSalesGrowth').addClass('text-danger')
break;
default:
$('#' + id + 'percentageOfSalesGrowth').append('<i class="fas fa-caret-left"></i> ' +
percentageOfSalesGrowth + '%')
$('#' + id + 'percentageOfSalesGrowth').addClass('text-warning')
break;
}
}
function changeDataFromCalculateChart(id, percentageOfSalesGrowth, statusCalculation) {
// pembulatan 2 angka di belakang koma
percentageOfSalesGrowth = percentageOfSalesGrowth.toFixed(2);
switch (statusCalculation) {
case 1:
$('#' + id).append('<i class="fas fa-arrow-left"></i> ' +
percentageOfSalesGrowth + '%')
$('#' + id).addClass('text-warning')
break;
case 2:
$('#' + id).append('<i class="fas fa-arrow-up"></i> ' +
percentageOfSalesGrowth + '%')
$('#' + id).addClass('text-success')
break;
case 3:
$('#' + id).append('<i class="fas fa-arrow-down"></i> ' +
percentageOfSalesGrowth + '%')
$('#' + id).addClass('text-danger')
break;
default:
$('#' + id).append('<i class="fas fa-arrow-left"></i> ' +
percentageOfSalesGrowth + '%')
$('#' + id).addClass('text-warning')
break;
}
}
function converRp(params) {
return ('Rp. ' + params.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') ?? 0);
}
</script>
@endpush