770 lines
34 KiB
PHP
770 lines
34 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>TMC Dashboard</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
|
|
<meta content="Coderthemes" name="author" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<!-- Plugins css -->
|
|
<link href="<?php echo base_url(); ?>assets/libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="<?php echo base_url(); ?>assets/libs/clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="<?php echo base_url(); ?>assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="<?php echo base_url(); ?>assets/libs/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css">
|
|
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="<?php echo base_url(); ?>assets/images/favicon.ico">
|
|
|
|
<!-- third party css -->
|
|
<link href="<?php echo base_url(); ?>assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="<?php echo base_url(); ?>assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="<?php echo base_url(); ?>assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="<?php echo base_url(); ?>assets/libs/datatables.net-select-bs4/css//select.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="<?php echo base_url(); ?>assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- third party css end -->
|
|
|
|
<!-- App css -->
|
|
<link href="<?php echo base_url(); ?>assets/css/bootstrap-creative.min.css" rel="stylesheet" type="text/css" id="bs-default-stylesheet" />
|
|
<link href="<?php echo base_url(); ?>assets/css/app-creative.min.css" rel="stylesheet" type="text/css" id="app-default-stylesheet" />
|
|
|
|
<link href="<?php echo base_url(); ?>assets/css/bootstrap-creative-dark.min.css" rel="stylesheet" type="text/css" id="bs-dark-stylesheet" />
|
|
<link href="<?php echo base_url(); ?>assets/css/app-creative-dark.min.css" rel="stylesheet" type="text/css" id="app-dark-stylesheet" />
|
|
|
|
<!-- icons -->
|
|
<link href="<?php echo base_url(); ?>assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<style>
|
|
.mb25{
|
|
margin-bottom: 25px;
|
|
}
|
|
.required{
|
|
color: red;
|
|
}
|
|
.card2 {
|
|
padding-bottom: 12px !important;
|
|
}
|
|
.cardtop{
|
|
margin-top: 1.5rem;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="loading" data-layout-mode="horizontal" data-layout='{"mode": "light", "width": "fluid", "menuPosition": "fixed", "topbar": {"color": "dark"}, "showRightSidebarOnPageLoad": true}'>
|
|
|
|
<!-- Begin page -->
|
|
<div id="wrapper">
|
|
|
|
<?php include('includes/top_nav.php'); ?>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start Page Content here -->
|
|
<!-- ============================================================== -->
|
|
|
|
<div class="content">
|
|
<!-- end Topbar -->
|
|
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box">
|
|
<h4 class="page-title">Welcome !</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
|
|
<div class="row mt-5">
|
|
<form class="col-md-12" id="formid" autocomplete="off">
|
|
<div class="form-row">
|
|
|
|
<div class="form-group col-md-4">
|
|
<label>FROM </label>
|
|
<input type="date" id="from" name="from" ; >
|
|
|
|
<label >TO</label>
|
|
<input type="date" id="to" name="to" >
|
|
<div class="col-lg-12">
|
|
<div id="" >
|
|
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group col-md-0">
|
|
<label for="inputPassword4" class="col-form-label"></label>
|
|
<button style="margin-top:0px;font-size: 10px;" type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="col-xl-3 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="knob-chart" dir="ltr">
|
|
<input id="_total" data-plugin="knob" data-width="70" data-height="70" data-fgColor="#f06b78"
|
|
data-bgColor="#fbdee1" value="0"
|
|
data-skin="tron" data-angleOffset="0" data-readOnly=true
|
|
data-thickness=".15"/>
|
|
</div>
|
|
<div class="text-right">
|
|
<h3 class="mb-1 mt-0" id="total_"> <span id="_total_" data-plugin="counterup">0</span> </h3>
|
|
<p class="text-muted mb-0">Total Tickets</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-xl-3 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="knob-chart" dir="ltr">
|
|
<input id="_rec" data-plugin="knob" data-width="70" data-height="70" data-fgColor="#6c757d"
|
|
data-bgColor="#ebeff2" value="0"
|
|
data-skin="tron" data-angleOffset="0" data-readOnly=true
|
|
data-thickness=".15"/>
|
|
</div>
|
|
<div class="text-right">
|
|
<h3 class="mb-1 mt-0"> <span id="_rec_" data-plugin="counterup">0</span> </h3>
|
|
<p class="text-muted mb-0">Invoice Received</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-xl-3 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="knob-chart" dir="ltr">
|
|
<input id="_par_rec" data-plugin="knob" data-width="70" data-height="70" data-fgColor="#f06b78"
|
|
data-bgColor="#fbdee1" value="0"
|
|
data-skin="tron" data-angleOffset="0" data-readOnly=true
|
|
data-thickness=".15"/>
|
|
</div>
|
|
<div class="text-right">
|
|
<h3 class="mb-1 mt-0"> <span id="_par_rec_" data-plugin="counterup">0</span> </h3>
|
|
<p class="text-muted mb-0">Invoice Pending</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-xl-3 col-md-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="knob-chart" dir="ltr">
|
|
<input id="_non_rec" data-plugin="knob" data-width="70" data-height="70" data-fgColor="#f06b78"
|
|
data-bgColor="#fbdee1" value="0"
|
|
data-skin="tron" data-angleOffset="0" data-readOnly=true
|
|
data-thickness=".15"/>
|
|
</div>
|
|
<div class="text-right">
|
|
<h3 class="mb-1 mt-0"> <span id="_non_rec_" data-plugin="counterup">0</span> </h3>
|
|
<p class="text-muted mb-0">Mismatch</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
|
|
</div>
|
|
<!-- end row -->
|
|
<div class="row cardtop">
|
|
<div class="col-md-6 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
|
|
<div class="col-xl-4" >
|
|
<!-- Portlet card -->
|
|
<div class="card">
|
|
<div class="card-body" style="zoom:90%;">
|
|
<h4 class="header-title">Share Of Invoices Received</h4>
|
|
<input id="not_received_pie_chart" value="<?php echo $this->session->flashdata('not_received'); ?>" type="hidden">
|
|
<input id="received_pie_chart" value="<?php echo $this->session->flashdata('received'); ?>" type="hidden">
|
|
<div id="cardCollpase18" class="collapse pt-3 show" dir="ltr">
|
|
<div id="pie_chart" class="apex-charts1" data-colors=""></div>
|
|
</div> <!-- collapsed end -->
|
|
</div> <!-- end card-body -->
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col-->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-6">
|
|
<div class="card card2">
|
|
<div class="card-body" style="margin-bottom:1.5rem;">
|
|
|
|
<h4 class="header-title">Invoice Receipt Trend</h4>
|
|
|
|
<div class="mt-3 text-center">
|
|
<div dir="ltr">
|
|
<div id="products-sales1" class="apex-charts" data-colors="#f06b78,#6c757d"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div> <!-- content -->
|
|
<!-- ============================================================== -->
|
|
<!-- End Page content -->
|
|
<!-- ============================================================== -->
|
|
<?php include('includes/footer.php'); ?>
|
|
<!-- end Footer -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vendor js -->
|
|
<script src="<?php echo base_url(); ?>assets/js/vendor.min.js"></script>
|
|
|
|
<!-- KNOB JS -->
|
|
<script src="<?php echo base_url(); ?>assets/libs/jquery-knob/jquery.knob.min.js"></script>
|
|
<!-- Apex js-->
|
|
<script src="<?php echo base_url(); ?>assets/libs/apexcharts/apexcharts.min.js"></script>
|
|
|
|
<!-- Plugins js-->
|
|
<script src="<?php echo base_url(); ?>assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js"></script>
|
|
|
|
<!-- Dashboard init-->
|
|
<script src="<?php echo base_url(); ?>assets/js/pages/dashboard-sales.init.js"></script>
|
|
|
|
<!-- App js -->
|
|
<script src="<?php echo base_url(); ?>assets/js/app.min.js"></script>
|
|
|
|
|
|
<!-- END wrapper -->
|
|
|
|
<!-- Vendor js -->
|
|
<!-- <script src="<?php echo base_url(); ?>assets/js/vendor.min.js"></script> -->
|
|
|
|
<!-- third party js -->
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-buttons/js/buttons.html5.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-buttons/js/buttons.flash.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-buttons/js/buttons.print.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/datatables.net-select/js/dataTables.select.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/pdfmake/build/pdfmake.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/pdfmake/build/vfs_fonts.js"></script>
|
|
<!-- third party js ends -->
|
|
|
|
<!-- Plugins js-->
|
|
<script src="<?php echo base_url(); ?>assets/libs/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/clockpicker/bootstrap-clockpicker.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/moment/min/moment.min.js"></script>
|
|
<script src="<?php echo base_url(); ?>assets/libs/bootstrap-daterangepicker/daterangepicker.js"></script>
|
|
|
|
<!-- Init js-->
|
|
<script src="<?php echo base_url(); ?>assets/js/pages/form-pickers.init.js"></script>
|
|
|
|
<!-- Apex js-->
|
|
<script src="../assets/libs/apexcharts/apexcharts.min.js"></script>
|
|
<script src="../assets/libs/moment/min/moment.min.js"></script>
|
|
<script src="../assets/libs/jquery.scrollto/jquery.scrollTo.min.js"></script>
|
|
|
|
<!-- TODO js-->
|
|
<script src="../assets/js/pages/jquery.todo.js"></script>
|
|
|
|
<!-- Dashboard init-->
|
|
<script src="../assets/js/pages/dashboard-crm.init.js"></script>
|
|
|
|
<div class="rightbar-overlay"></div>
|
|
|
|
<!-- Third Party js-->
|
|
<script src="https://apexcharts.com/samples/assets/irregular-data-series.js"></script>
|
|
<script src="https://apexcharts.com/samples/assets/ohlc.js"></script>
|
|
|
|
<!-- init js -->
|
|
<script src="../assets/js/pages/apexcharts.init.js"></script>
|
|
|
|
<!-- App js -->
|
|
<script src="../assets/js/app.min.js"></script>
|
|
|
|
<script>
|
|
//******************************************************** */
|
|
// **************************pie chart*************************
|
|
//******************************************************** */
|
|
$(document).ready(function(){
|
|
non_r = $('#not_received_pie_chart').val() ;
|
|
rec = $('#received_pie_chart').val() ;
|
|
colors = ["#3bafda", "#1abc9c"];
|
|
(dataColors = $("#pie_chart").data("colors")) && (colors = dataColors.split(","));
|
|
options = {
|
|
chart: {
|
|
height: 320,
|
|
type: "pie"
|
|
},
|
|
series: [ 0 , 0 ],
|
|
// series: [ <?php echo $this->session->flashdata('not_received'); ?> , <?php echo $this->session->flashdata('received'); ?> ],
|
|
labels: ["Not Received", "Received"],
|
|
colors: colors,
|
|
legend: {
|
|
show: !0,
|
|
position: "bottom",
|
|
horizontalAlign: "center",
|
|
verticalAlign: "middle",
|
|
floating: !1,
|
|
fontSize: "14px",
|
|
offsetX: 0,
|
|
offsetY: 7
|
|
},
|
|
responsive: [{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
height: 240
|
|
},
|
|
legend: {
|
|
show: !1
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
(chart = new ApexCharts(document.querySelector("#pie_chart"), options)).render();
|
|
|
|
});
|
|
//******************************************************** */
|
|
|
|
|
|
|
|
//******************************************************** */
|
|
// **************************graph*************************
|
|
//******************************************************** */
|
|
$(document).ready(function(){
|
|
var date= [] ;
|
|
var colors = ['#3bafda', '#1abc9c', "#f672a7"];
|
|
var dataColors = $("#products-sales1").data('colors');
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 265,
|
|
type: 'line',
|
|
padding: {
|
|
right: 0,
|
|
left: 0
|
|
},
|
|
stacked: false,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
stroke: {
|
|
width: [1, 2],
|
|
curve: 'smooth'
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%'
|
|
}
|
|
},
|
|
colors: colors,
|
|
series: [{
|
|
name: 'Received',
|
|
type: 'area',
|
|
data: []
|
|
}, {
|
|
name: 'Partially Received',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
fill: {
|
|
opacity: [0.25, 1],
|
|
gradient: {
|
|
inverseColors: false,
|
|
shade: 'light',
|
|
type: "vertical",
|
|
opacityFrom: 0.85,
|
|
opacityTo: 0.55,
|
|
stops: [0, 100, 100, 100]
|
|
}
|
|
},
|
|
labels:date,
|
|
markers: {
|
|
size: 0
|
|
},
|
|
legend: {
|
|
offsetY: 5,
|
|
},
|
|
xaxis: {
|
|
type: 'datetime'
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val
|
|
},
|
|
offsetX: -10
|
|
}
|
|
},
|
|
tooltip: {
|
|
shared: true,
|
|
intersect: false,
|
|
y: {
|
|
formatter: function (y) {
|
|
if (typeof y !== "undefined") {
|
|
return y.toFixed(0);
|
|
}
|
|
return y;
|
|
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: '#f1f3fa',
|
|
padding: {
|
|
bottom: 10
|
|
}
|
|
}
|
|
}
|
|
|
|
var chart2 = new ApexCharts(
|
|
document.querySelector("#products-sales1"),
|
|
options
|
|
);
|
|
|
|
chart2.render();
|
|
});
|
|
//******************************************************** */
|
|
|
|
|
|
//******************************************************** ***************************/
|
|
// **************************change count based on given month*************************
|
|
//******************************************************** ***************************/
|
|
$('#formid').submit(function(e){
|
|
e.preventDefault();
|
|
datesArr = [];
|
|
datesArr1 = [];
|
|
|
|
var startDate = new Date($('#from').val());
|
|
|
|
|
|
|
|
// alert($('#from').val());
|
|
|
|
var endDate = new Date($('#to').val());
|
|
while (startDate <= endDate) {
|
|
|
|
var dateString = startDate.toLocaleDateString('en-GB');
|
|
var arr1 = dateString.split('/');
|
|
_abc_ = arr1[1] + "/" + arr1[0] + "/" + arr1[2];
|
|
datesArr1.push(_abc_);
|
|
var arr = dateString.split('/');
|
|
abc = arr[2] + "/" + arr[1] + "/" + arr[0];
|
|
datesArr.push(abc);
|
|
startDate.setMonth(startDate.getMonth() + 1);
|
|
}
|
|
$.ajax({
|
|
url:'<?php echo base_url('Tmc/gen_tmc_datewise_data'); ?>',
|
|
type:'POST',
|
|
data: {date : datesArr},
|
|
success:function(data)
|
|
{
|
|
var date = datesArr1;
|
|
json_data = JSON.parse(data);
|
|
console.log(json_data);
|
|
var received = json_data.received;
|
|
var par_received =json_data.par_received;
|
|
//******************** count based on given month *****************************************/
|
|
const count_sum = json_data.total.reduce((partialSum, a) => partialSum + a, 0);
|
|
const receive_sum = json_data.received.reduce((partialSum, a) => partialSum + a, 0);
|
|
const non_receive_sum = json_data.not_received.reduce((partialSum, a) => partialSum + a, 0);
|
|
const par_receive_sum = json_data.par_received.reduce((partialSum, a) => partialSum + a, 0);
|
|
$("#_total").val(count_sum);$("#_total_").html(count_sum);
|
|
$("#_rec").val(receive_sum);$("#_rec_").html(receive_sum);
|
|
$("#_non_rec").val(non_receive_sum);$("#_non_rec_").html(non_receive_sum);
|
|
$("#_par_rec").val(par_receive_sum);$("#_par_rec_").html(par_receive_sum);
|
|
// console.log(parseInt(json_data.c1) , parseInt(json_data.c) )
|
|
// console.log(count_sum,receive_sum,non_receive_sum,par_receive_sum);
|
|
//*****************************************************************************************/
|
|
|
|
//******************************************************** */
|
|
// **************************pie chart*************************
|
|
//******************************************************** */
|
|
colors = ["#3bafda", "#1abc9c"];
|
|
(dataColors = $("#pie_chart").data("colors")) && (colors = dataColors.split(","));
|
|
options = {
|
|
chart: {
|
|
height: 320,
|
|
type: "pie"
|
|
},
|
|
series: [ parseInt(json_data.c1) , parseInt(json_data.c) ],
|
|
labels: ["Not Received", "Received"],
|
|
colors: colors,
|
|
legend: {
|
|
show: !0,
|
|
position: "bottom",
|
|
horizontalAlign: "center",
|
|
verticalAlign: "middle",
|
|
floating: !1,
|
|
fontSize: "14px",
|
|
offsetX: 0,
|
|
offsetY: 7
|
|
},
|
|
responsive: [{
|
|
breakpoint: 600,
|
|
options: {
|
|
chart: {
|
|
height: 240
|
|
},
|
|
legend: {
|
|
show: !1
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
var chart22 = new ApexCharts(document.querySelector("#pie_chart"), options);
|
|
try{
|
|
chart22.destroy();
|
|
}
|
|
catch{
|
|
}
|
|
(chart = new ApexCharts(document.querySelector("#pie_chart"), options)).render();
|
|
|
|
|
|
//******************************************************** */
|
|
|
|
//******************** Graph based on given month *****************************************/
|
|
var colors = ['#3bafda', '#1abc9c', "#f672a7"];
|
|
var dataColors = $("#products-sales1").data('colors');
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
var options = {
|
|
chart: {
|
|
height: 265,
|
|
type: 'line',
|
|
padding: {
|
|
right: 0,
|
|
left: 0
|
|
},
|
|
stacked: false,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
stroke: {
|
|
width: [1, 2],
|
|
curve: 'smooth'
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%'
|
|
}
|
|
},
|
|
colors: colors,
|
|
series: [{
|
|
name: 'Received',
|
|
type: 'area',
|
|
data: received
|
|
}, {
|
|
name: 'Partially Received',
|
|
type: 'line',
|
|
data: par_received
|
|
}],
|
|
fill: {
|
|
opacity: [0.25, 1],
|
|
gradient: {
|
|
inverseColors: false,
|
|
shade: 'light',
|
|
type: "vertical",
|
|
opacityFrom: 0.85,
|
|
opacityTo: 0.55,
|
|
stops: [0, 100, 100, 100]
|
|
}
|
|
},
|
|
labels:date,
|
|
markers: {
|
|
size: 0
|
|
},
|
|
legend: {
|
|
offsetY: 5,
|
|
},
|
|
xaxis: {
|
|
type: 'datetime'
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val
|
|
},
|
|
offsetX: -10
|
|
}
|
|
},
|
|
tooltip: {
|
|
shared: true,
|
|
intersect: false,
|
|
y: {
|
|
formatter: function (y) {
|
|
if (typeof y !== "undefined") {
|
|
return y.toFixed(0) ;
|
|
}
|
|
return y;
|
|
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: '#f1f3fa',
|
|
padding: {
|
|
bottom: 10
|
|
}
|
|
}
|
|
}
|
|
|
|
var chart3 = new ApexCharts(
|
|
document.querySelector("#products-sales1"),
|
|
options
|
|
);
|
|
|
|
var chart2 = new ApexCharts(document.querySelector("#products-sales1"), options);
|
|
try{
|
|
chart2.destroy();
|
|
}
|
|
catch{
|
|
}
|
|
|
|
chart3.render()
|
|
// *****************************************************************************************
|
|
},
|
|
error:function(){
|
|
alert('Request failed. Kindly try after sometime.');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
|
|
//******************************************************** ***************************/
|
|
// ************************** Date Picker*********************************************
|
|
//******************************************************** ***************************/
|
|
! function(n) {
|
|
"use strict";
|
|
console.log("1");
|
|
function t() {}
|
|
t.prototype.init = function() {
|
|
n("#basic-colorpicker").colorpicker(), n("#hexa-colorpicker").colorpicker({
|
|
format: "auto"
|
|
}), n("#component-colorpicker").colorpicker({
|
|
format: null
|
|
}), n("#horizontal-colorpicker").colorpicker({
|
|
horizontal: !0
|
|
}), n("#inline-colorpicker").colorpicker({
|
|
color: "#DD0F20",
|
|
inline: !0,
|
|
container: !0
|
|
}), n(".clockpicker").clockpicker({
|
|
donetext: "Done"
|
|
}), n("#single-input").clockpicker({
|
|
placement: "bottom",
|
|
align: "left",
|
|
autoclose: !0,
|
|
default: "now"
|
|
}), n("#check-minutes").click(function(t) {
|
|
t.stopPropagation(), n("#single-input").clockpicker("show").clockpicker("toggleView", "minutes")
|
|
}), n(".input-daterange-datepicker").daterangepicker({
|
|
buttonClasses: ["btn", "btn-sm"],
|
|
applyClass: "btn-secondary",
|
|
cancelClass: "btn-primary"
|
|
}), n(".input-daterange-timepicker").daterangepicker({
|
|
timePicker: !0,
|
|
format: "MM/DD/YYYY h:mm A",
|
|
timePickerIncrement: 30,
|
|
timePicker12Hour: !0,
|
|
timePickerSeconds: !1,
|
|
buttonClasses: ["btn", "btn-sm"],
|
|
applyClass: "btn-secondary",
|
|
cancelClass: "btn-primary"
|
|
}), n(".input-limit-datepicker").daterangepicker({
|
|
format: "MM/DD/YYYY",
|
|
minDate: "06/01/2020",
|
|
maxDate: "06/30/2020",
|
|
buttonClasses: ["btn", "btn-sm"],
|
|
applyClass: "btn-secondary",
|
|
cancelClass: "btn-primary",
|
|
dateLimit: {
|
|
days: 6
|
|
}
|
|
}), n("#reportrange span").html(moment().subtract(29, "days").format("MMMM D, YYYY") + " - " + moment().format("MMMM D, YYYY")), n("#reportrange").daterangepicker({
|
|
format: "MM/DD/YYYY",
|
|
startDate: moment().subtract(29, "days"),
|
|
endDate: moment(),
|
|
minDate: "01/01/2020",
|
|
maxDate: `12/31/ ${ new Date().getFullYear() }`,
|
|
// dateLimit: {
|
|
// days: 60
|
|
// },
|
|
showDropdowns: !0,
|
|
showWeekNumbers: !0,
|
|
timePicker: !1,
|
|
timePickerIncrement: 1,
|
|
timePicker12Hour: !0,
|
|
ranges: {
|
|
Today: [moment(), moment()],
|
|
Yesterday: [moment().subtract(1, "days"), moment().subtract(1, "days")],
|
|
"Last 7 Days": [moment().subtract(6, "days"), moment()],
|
|
"Last 30 Days": [moment().subtract(29, "days"), moment()],
|
|
"This Month": [moment().startOf("month"), moment().endOf("month")],
|
|
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
|
|
},
|
|
opens: "left",
|
|
drops: "down",
|
|
buttonClasses: ["btn", "btn-sm"],
|
|
applyClass: "btn-success",
|
|
cancelClass: "btn-secondary",
|
|
separator: " to ",
|
|
locale: {
|
|
applyLabel: "Submit",
|
|
cancelLabel: "Cancel",
|
|
fromLabel: "From",
|
|
toLabel: "To",
|
|
customRangeLabel: "Custom",
|
|
daysOfWeek: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
|
|
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
|
firstDay: 1
|
|
}
|
|
}, function(t, e, o) {
|
|
console.log(t._d);
|
|
$('#fromdate').val(t._d)
|
|
console.log(e._d);
|
|
$('#todate').val(e._d)
|
|
console.log(t.toISOString(), e.toISOString(), o), n("#reportrange span").html(t.format("MMMM D, YYYY") + " - " + e.format("MMMM D, YYYY"))
|
|
})
|
|
}, n.FormPickers = new t, n.FormPickers.Constructor = t
|
|
}(window.jQuery),
|
|
function() {
|
|
"use strict";
|
|
window.jQuery.FormPickers.init()
|
|
}();
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|