pos-gis/resources/views/content/dashboard_act.blade.php

<script src="{{asset('js/chartjs.js')}}" type="text/javascript"></script>
<script>
    reInitForm();
    var d = new Date();
    var tahunIni = d.getFullYear();

    $('#filter_tahun').val(tahunIni);

    get_dashboard();

	$('#tanggal_filter').datepicker({
            rtl: KTUtil.isRTL(),
            orientation: "bottom left",
            todayHighlight: false,
            format: 'dd-mm-yyyy',
            autoclose: true,
        });

    function get_dashboard() {
      

        var query = {
            // tahun: $('#filter_tahun').val(),
			tanggal_filter: $('#tanggal_filter').val(),
            merchant_filter:$('#merchant_filter').val()
        }

        var act_url = '/data/dashboard'+'?'+$.param(query);

        $.ajax({
            url: act_url,
            type: 'GET',
            beforeSend: function () {
                znLoadingPage();
            },
            success: function (res) {

                $('#p_outlet').html(znNumFormat(res.data.p_outlet)+' <small class="font-size-sm">Agent</small>');
                $('#p_order').html(znNumFormat(res.data.p_order)+' <small class="font-size-sm">Order</small>');
                $('#p_transaction').html(znNumFormat(res.data.p_transaction)+' <small class="font-size-sm">Transaction</small>');
                $('#p_product').html(znNumFormat(res.data.p_product)+' <small class="font-size-sm">Product</small>');
                $('#p_omzet').html(znNumFormat(res.data.p_omzet)+' <small class="font-size-sm">IDR</small>');
                $('#p_tax').html(znNumFormat(res.data.p_tax)+' <small class="font-size-sm">IDR</small>');
               
				// GRAFIK
				var data_graf =[];
				var data_graf_time =[];
				var data_graf_week =[];

				var data_color = ["#00C5DC","#F4516C","#FFB822","#8859E0","#0C5484","#66BB6A","#00838F","#e57373"];
				var data_tanggal = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];
				var data_week = ['Minggu','Senin','Selasa',"Rabu",'Kamis',"Jum'at",'Sabtu'];


                var data_jam = [];
                for (let i = 1; i <= 24; i++) {
                    data_jam.push(i+':00')
                }

				var color_i = 0;
				$.each(res.data.grafik, function (k,v) {
					data_graf.push({
						label: k,
						data: v,
						fill: false,
						backgroundColor: data_color[color_i],
						borderColor: data_color[color_i],
					});

					color_i++;
				});

                $.each(res.data.grafik_time, function (k,v) {
					data_graf_time.push({
						label: k,
						data: v,
						fill: false,
						backgroundColor: data_color[color_i],
						borderColor: data_color[color_i],
					});

					color_i++;
				});

				// $.each(res.data.grafik_week, function (k,v) {
				// 	data_graf_week.push({
				// 		label: k,
				// 		data: v,
				// 		fill: false,
				// 		backgroundColor: data_color[color_i],
				// 		borderColor: data_color[color_i],
				// 	});

				// 	color_i++;
				// });

				$('#crt_con').html(``);
				$('#crt_con').html(`<canvas id="crt"></canvas>`);

                $('#crt_con_today').html(``);
				$('#crt_con_today').html(`<canvas id="crt_today"></canvas>`);

				$('#crt_con_week').html(``);
				$('#crt_con_week').html(`<canvas id="crt_week"></canvas>`);
              

				var ctx = document.getElementById("crt");
				var ctx_today = document.getElementById("crt_today");
				var ctx_week = document.getElementById("crt_week");

				ctx.height = 120;

				var myChart = new Chart(ctx, {
					type: 'line',
					data: {
						labels: data_tanggal,
						datasets: data_graf
					},
					options: {
								legend: {
									position: 'bottom',
								},
								responsive: true,
								title: {
									display: false,
									text: 'Grafik'
								},
								tooltips: {
									mode: 'index',
									intersect: false,
								},
								hover: {
									mode: 'nearest',
									intersect: true
								},
								scales: {
									xAxes: [{
										display: true,
										scaleLabel: {
											display: true,
											labelString: 'Month'
										}
									}],
									yAxes: [{
										display: true,
										scaleLabel: {
											display: true,
											labelString: 'Total'
										}
									}]
								}
							}
				});

                ctx_today.height = 120;

				var myChart = new Chart(ctx_today, {
					type: 'line',
					data: {
						labels: data_jam,
						datasets: data_graf_time
					},
					options: {
								legend: {
									position: 'bottom',
								},
								responsive: true,
								title: {
									display: false,
									text: 'Grafik'
								},
								tooltips: {
									mode: 'index',
									intersect: false,
								},
								hover: {
									mode: 'nearest',
									intersect: true
								},
								scales: {
									xAxes: [{
										display: true,
										scaleLabel: {
											display: true,
											labelString: 'Time'
										}
									}],
									yAxes: [{
										display: true,
										scaleLabel: {
											display: true,
											labelString: 'Total'
										}
									}]
								}
							}
				});

				// ctx_week.height = 70;

				// var myChart = new Chart(ctx_week, {
				// 	type: 'line',
				// 	data: {
				// 		labels: data_week,
				// 		datasets: data_graf_week
				// 	},
				// 	options: {
				// 		legend: {
				// 			position: 'bottom',
				// 		},
				// 		responsive: true,
				// 		title: {
				// 			display: false,
				// 			text: 'Grafik'
				// 		},
				// 		tooltips: {
				// 			mode: 'index',
				// 			intersect: false,
				// 		},
				// 		hover: {
				// 			mode: 'nearest',
				// 			intersect: true
				// 		},
				// 		scales: {
				// 			xAxes: [{
				// 				display: true,
				// 				scaleLabel: {
				// 					display: true,
				// 					labelString: 'Day'
				// 				}
				// 			}],
				// 			yAxes: [{
				// 				display: true,
				// 				scaleLabel: {
				// 					display: true,
				// 					labelString: 'Total'
				// 				}
				// 			}]
				// 		}
				// 	}
				// });
				// GRAFIK

                // STOCK MINIUM
                $('#stock_minimum').html(``)
                res.data.stock_minimum.forEach(v => {
                    $('#stock_minimum').append(`
                    <tr>
                        <td class="w-30px align-middle pb-1 pl-0 pr-2">
                            <div class="symbol symbol-30 symbol-light-danger">
                                <span class="symbol-label">
                                    <span class="svg-icon svg-icon-danger">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24"/>
                                            <path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" fill="#000000" fill-rule="nonzero"/>
                                            <path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" fill="#000000" opacity="0.3"/>
                                        </g>
                                    </svg>
                                </span>
                                </span>
                            </div>
                        </td>
                        
                        <td class="font-size-md font-weight-bold text-dark-75 align-middle w-300px pb-1">${v.product_nm} <br> <small>${v.merchant_nm} | ${v.outlet_nm}</small> </td>
                        
                        <td class="font-weight-bold text-muted text-right align-middle pb-1">
                            <span style="width: 50px;"
                                class="label label-danger label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">${znNumFormat(v.stock_qty)}</span>
                        </td>
                    </tr>`)
                });

				$('#list_week').html(``)
                res.data.grafik_week['Transaction'].forEach((v,k) => {
                    $('#list_week').append(`
                    <tr>
                        <td class="w-30px align-middle pb-1 pl-0 pr-2">
                            <div class="symbol symbol-30 symbol-light-primary">
                                <span class="symbol-label">
                                    <span class="svg-icon svg-icon-primary">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24"/>
                                            <path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" fill="#000000" fill-rule="nonzero"/>
                                            <path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" fill="#000000" opacity="0.3"/>
                                        </g>
                                    </svg>
                                </span>
                                </span>
                            </div>
                        </td>
                        
                        <td class="font-size-md font-weight-bold text-dark-75 align-middle w-300px pb-1">${data_week[k]}</td>
                        <td class="font-weight-bold text-muted text-right align-middle pb-1">
                            <span style="width: 50px;"
                                class="label label-primary label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">${v}</span>
                        </td>
                    </tr>`)
                });

				$('#best_product').html(``)
                res.data.best_product.forEach((v,k) => {
                    $('#best_product').append(`
                    <tr>
                        <td class="w-30px align-middle pb-1 pl-0 pr-2">
                            <div class="symbol symbol-30 symbol-light-success">
                                <span class="symbol-label">
                                    <span class="svg-icon svg-icon-success">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24"/>
                                            <path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" fill="#000000" fill-rule="nonzero"/>
                                            <path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" fill="#000000" opacity="0.3"/>
                                        </g>
                                    </svg>
                                </span>
                                </span>
                            </div>
                        </td>
                        
                        <td class="font-size-md font-weight-bold text-dark-75 align-middle w-300px pb-1">${v.product_nm}</td>
                        <td class="font-weight-bold text-muted text-right align-middle pb-1">
                            <span style="width: 50px;"
                                class="label label-success label-inline mt-lg-0 mb-lg-0 my-2 font-weight-bold py-4">${v.jumlah}</span>
                        </td>
                    </tr>`)
                });

				

           
            }
        }).done(function (msg) {
            znLoadingPageEnd();
        });
    }

</script>