@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