Merge pull request 'fixed admin dashboard download csv and initialized dynamic dataset for sales report' (#73) from gelo_branch into main
Reviewed-on: #73
This commit is contained in:
commit
2cb98f24d6
|
|
@ -11,7 +11,7 @@ $(document).ready(function() {
|
|||
const completedOrdersCount = countCompletedOrders(responseData);
|
||||
const toPayOrdersCount = countToPayOrders(responseData);
|
||||
const toShipOrdersCount = countToShipOrders(responseData);
|
||||
const returnedOrdersCount = countReturnedpOrders(responseData);
|
||||
const returnedOrdersCount = countReturnedOrders(responseData);
|
||||
initializeChart(completedOrdersCount, toPayOrdersCount, toShipOrdersCount, returnedOrdersCount);
|
||||
})
|
||||
.catch(function (error) {
|
||||
|
|
@ -24,50 +24,65 @@ $(document).ready(function() {
|
|||
}
|
||||
|
||||
|
||||
function countCompletedOrders(data) {
|
||||
let completedOrdersCount = 0;
|
||||
data.forEach(function(order) {
|
||||
function getCurrentMonthData(data) {
|
||||
const now = new Date();
|
||||
const currentMonth = now.getMonth();
|
||||
const currentYear = now.getFullYear();
|
||||
|
||||
return data.filter(order => {
|
||||
const orderDate = new Date(order.order_date);
|
||||
return orderDate.getMonth() === currentMonth && orderDate.getFullYear() === currentYear;
|
||||
});
|
||||
}
|
||||
|
||||
function countCompletedOrders(data) {
|
||||
const filteredData = getCurrentMonthData(data);
|
||||
let completedOrdersCount = 0;
|
||||
filteredData.forEach(function(order) {
|
||||
if (order.status === 'COMPLETED') {
|
||||
completedOrdersCount++;
|
||||
completedOrdersCount++;
|
||||
}
|
||||
});
|
||||
console.log(completedOrdersCount)
|
||||
return completedOrdersCount;
|
||||
}
|
||||
|
||||
|
||||
function countToPayOrders(data) {
|
||||
let toPayOrdersCount = 0;
|
||||
data.forEach(function(order) {
|
||||
});
|
||||
console.log(completedOrdersCount);
|
||||
return completedOrdersCount;
|
||||
}
|
||||
|
||||
function countToPayOrders(data) {
|
||||
const filteredData = getCurrentMonthData(data);
|
||||
let toPayOrdersCount = 0;
|
||||
filteredData.forEach(function(order) {
|
||||
if (order.status === 'TO PAY') {
|
||||
toPayOrdersCount++;
|
||||
toPayOrdersCount++;
|
||||
}
|
||||
});
|
||||
console.log(toPayOrdersCount)
|
||||
return toPayOrdersCount;
|
||||
}
|
||||
|
||||
|
||||
function countToShipOrders(data) {
|
||||
let toShipOrdersCount = 0;
|
||||
data.forEach(function(order) {
|
||||
});
|
||||
console.log(toPayOrdersCount);
|
||||
return toPayOrdersCount;
|
||||
}
|
||||
|
||||
function countToShipOrders(data) {
|
||||
const filteredData = getCurrentMonthData(data);
|
||||
let toShipOrdersCount = 0;
|
||||
filteredData.forEach(function(order) {
|
||||
if (order.status === 'TO SHIP') {
|
||||
toShipOrdersCount++;
|
||||
toShipOrdersCount++;
|
||||
}
|
||||
});
|
||||
console.log(toShipOrdersCount)
|
||||
return toShipOrdersCount;
|
||||
}
|
||||
function countReturnedpOrders(data) {
|
||||
let returnedOrdersCount = 0;
|
||||
data.forEach(function(order) {
|
||||
});
|
||||
console.log(toShipOrdersCount);
|
||||
return toShipOrdersCount;
|
||||
}
|
||||
|
||||
function countReturnedOrders(data) {
|
||||
const filteredData = getCurrentMonthData(data);
|
||||
let returnedOrdersCount = 0;
|
||||
filteredData.forEach(function(order) {
|
||||
if (order.status === 'RETURNED') {
|
||||
returnedOrdersCount++;
|
||||
returnedOrdersCount++;
|
||||
}
|
||||
});
|
||||
console.log(returnedOrdersCount)
|
||||
return returnedOrdersCount;
|
||||
}
|
||||
});
|
||||
console.log(returnedOrdersCount);
|
||||
return returnedOrdersCount;
|
||||
}
|
||||
|
||||
|
||||
function initializeChart(completedOrdersCount , toPayOrdersCount, toShipOrdersCount, returnedOrdersCount) {
|
||||
var doughnut = document.getElementById("doughnut-chart");
|
||||
|
|
@ -115,43 +130,248 @@ $(document).ready(function() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
var acquisition = document.getElementById("salesChart");
|
||||
if (acquisition !== null) {
|
||||
function updateDailyLabels() {
|
||||
var labelsDaily = [];
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
var date = new Date();
|
||||
date.setDate(date.getDate() - i);
|
||||
labelsDaily.push(formatDate(date));
|
||||
}
|
||||
return labelsDaily;
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
const options = { day: 'numeric', month: 'short' }; // E.g., 26 Apr
|
||||
return date.toLocaleDateString('en-US', options);
|
||||
}
|
||||
|
||||
// Updating labelsDaily dynamically
|
||||
var labelsDaily = updateDailyLabels();
|
||||
var labelsMonthly = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
var labelsYearly = ["2021", "2022", "2023", "2024", "2025"];
|
||||
var acqData = [
|
||||
{ //daily data
|
||||
first: [91, 180, 44, 75, 150, 66, 70], //COD
|
||||
second: [300, 44, 177, 76, 23, 189, 12], //ObPay
|
||||
third: [44, 167, 102, 123, 183, 88, 134] //Paymongo
|
||||
},
|
||||
{ //monthly data
|
||||
first: [144, 44, 110, 5, 123, 89, 12], //COD
|
||||
second: [22, 123, 45, 130, 112, 54, 181], //ObPay
|
||||
third: [55, 44, 144, 75, 155, 166, 70] //Paymongo
|
||||
},
|
||||
{ //yearly data
|
||||
first: [134, 80, 123, 65, 171, 33, 22], //COD
|
||||
second: [44, 144, 77, 76, 123, 89, 112], //ObPay
|
||||
third: [156, 23, 165, 88, 112, 54, 181] //Paymongo
|
||||
}
|
||||
];
|
||||
|
||||
var configAcq = {
|
||||
// The type of chart we want to create
|
||||
type: "line",
|
||||
|
||||
// The data for our dataset
|
||||
data: {
|
||||
// labels: [
|
||||
// "4 Jan",
|
||||
// "5 Jan",
|
||||
// "6 Jan",
|
||||
// "7 Jan",
|
||||
// "8 Jan",
|
||||
// "9 Jan",
|
||||
// "10 Jan"
|
||||
// ],
|
||||
datasets: [
|
||||
{
|
||||
label: "Cash on Delivery",
|
||||
backgroundColor: "rgba(52, 116, 212, .2)",
|
||||
borderColor: "rgba(52, 116, 212, .7)",
|
||||
data: acqData[0].first,
|
||||
lineTension: 0.3,
|
||||
pointBackgroundColor: "rgba(52, 116, 212,0)",
|
||||
pointHoverBackgroundColor: "rgba(52, 116, 212,1)",
|
||||
pointHoverRadius: 3,
|
||||
pointHitRadius: 30,
|
||||
pointBorderWidth: 2,
|
||||
pointStyle: "rectRounded"
|
||||
},
|
||||
{
|
||||
label: "ObananaPay",
|
||||
backgroundColor: "rgba(255, 192, 203, .3)",
|
||||
borderColor: "rgba(255, 192, 203, .7)",
|
||||
data: acqData[0].second,
|
||||
lineTension: 0.3,
|
||||
pointBackgroundColor: "rgba(255, 192, 203, 0)",
|
||||
pointHoverBackgroundColor: "rgba(255, 192, 203, 1)",
|
||||
pointHoverRadius: 3,
|
||||
pointHitRadius: 30,
|
||||
pointBorderWidth: 2,
|
||||
pointStyle: "rectRounded"
|
||||
},
|
||||
{
|
||||
label: "Paymongo",
|
||||
backgroundColor: "rgb(178, 251, 212, .3)",
|
||||
borderColor: "rgba(178, 251, 212, .7)",
|
||||
data: acqData[0].third,
|
||||
lineTension: 0.3,
|
||||
pointBackgroundColor: "rgba(178, 251, 212, 0)",
|
||||
pointHoverBackgroundColor: "rgba(178, 251, 212, 1)",
|
||||
pointHoverRadius: 3,
|
||||
pointHitRadius: 30,
|
||||
pointBorderWidth: 2,
|
||||
pointStyle: "rectRounded"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// Configuration options go here
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: "#eee",
|
||||
zeroLineColor: "#eee"
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
stepSize: 100,
|
||||
max: 1000
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
titleFontColor: "#888",
|
||||
bodyFontColor: "#555",
|
||||
titleFontSize: 12,
|
||||
bodyFontSize: 15,
|
||||
backgroundColor: "rgba(256,256,256,0.95)",
|
||||
displayColors: true,
|
||||
xPadding: 20,
|
||||
yPadding: 10,
|
||||
borderColor: "rgba(220, 220, 220, 0.9)",
|
||||
borderWidth: 2,
|
||||
caretSize: 10,
|
||||
caretPadding: 15
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("salesChart").getContext("2d");
|
||||
var lineAcq = new Chart(ctx, configAcq);
|
||||
document.getElementById("acqLegend").innerHTML = lineAcq.generateLegend();
|
||||
|
||||
var items = document.querySelectorAll(
|
||||
"#user-acquisition .nav-tabs .nav-item"
|
||||
);
|
||||
items.forEach(function (item, index) {
|
||||
item.addEventListener("click", function() {
|
||||
// Determine which tab was clicked
|
||||
var selectedTab = this.textContent.trim();
|
||||
|
||||
// Choose data and labels based on the selected tab
|
||||
switch (selectedTab) {
|
||||
case "Daily":
|
||||
configAcq.data.labels = labelsDaily;
|
||||
configAcq.data.datasets[0].data = acqData[0].first;
|
||||
configAcq.data.datasets[1].data = acqData[0].second;
|
||||
configAcq.data.datasets[2].data = acqData[0].third;
|
||||
break;
|
||||
case "Monthly":
|
||||
configAcq.data.labels = labelsMonthly;
|
||||
configAcq.data.datasets[0].data = acqData[1].first;
|
||||
configAcq.data.datasets[1].data = acqData[1].second;
|
||||
configAcq.data.datasets[2].data = acqData[1].third;
|
||||
break;
|
||||
case "Yearly":
|
||||
configAcq.data.labels = labelsYearly;
|
||||
configAcq.data.datasets[0].data = acqData[2].first;
|
||||
configAcq.data.datasets[1].data = acqData[2].second;
|
||||
configAcq.data.datasets[2].data = acqData[2].third;
|
||||
break;
|
||||
}
|
||||
|
||||
lineAcq.update();
|
||||
});
|
||||
});
|
||||
items[0].click();
|
||||
}
|
||||
|
||||
function convertToCSV(data) {
|
||||
const columnTitles = ['ORDER ID', 'STATUS', 'BUYER NAME', 'TOTAL AMOUNT', 'ORDER DATE',
|
||||
'ORDER TIME', 'PRODUCT NAME','PRICE', 'QUANTITY',
|
||||
'VENDOR ID', 'VENDOR NAME',];
|
||||
const header = columnTitles.join(',') + '\n';
|
||||
const body = data.map(order => {
|
||||
const orderDate = new Date(order.order_date).toLocaleDateString('en-US');
|
||||
const orderTime = new Date(order.order_date).toLocaleTimeString('en-US');
|
||||
const productName = order.items.length > 0 ? `"${order.items[0].product.name}"` : '';
|
||||
return [
|
||||
order._id,
|
||||
order.status,
|
||||
order.customer[0]?.name,
|
||||
order.total_amount,
|
||||
orderDate,
|
||||
orderTime,
|
||||
productName,
|
||||
order.items[0]?.price,
|
||||
order.items[0]?.quantity,
|
||||
order.items[0]?.vendor_id,
|
||||
order.items[0]?.vendor_name
|
||||
].join(',');
|
||||
}).join('\n');
|
||||
return header + body;
|
||||
}
|
||||
function downloadCSV(filename) {
|
||||
const csv = convertToCSV(responseData);
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
const now = new Date();
|
||||
const currentMonth = now.getMonth(); // Months are 0-indexed (0 for January, 11 for December)
|
||||
const currentYear = now.getFullYear();
|
||||
|
||||
const filteredData = data.filter(order => {
|
||||
const orderDate = new Date(order.order_date);
|
||||
return orderDate.getMonth() === currentMonth && orderDate.getFullYear() === currentYear;
|
||||
});
|
||||
|
||||
const columnTitles = [
|
||||
'ORDER ID', 'STATUS', 'BUYER NAME', 'TOTAL AMOUNT', 'METHOD', 'ORDER DATE',
|
||||
'ORDER TIME', 'PRODUCT NAME', 'PRICE', 'QUANTITY', 'VENDOR ID', 'VENDOR NAME'
|
||||
];
|
||||
const header = columnTitles.join(',') + '\n';
|
||||
const body = filteredData.map(order => {
|
||||
const orderDate = new Date(order.order_date).toLocaleDateString('en-US');
|
||||
const orderTime = new Date(order.order_date).toLocaleTimeString('en-US');
|
||||
const productName = order.items.length > 0 ? `"${order.items[0].product.name}"` : '';
|
||||
return [
|
||||
order._id,
|
||||
order.status,
|
||||
order.customer[0]?.name,
|
||||
order.total_amount,
|
||||
order.payment_method,
|
||||
orderDate,
|
||||
orderTime,
|
||||
productName,
|
||||
order.items[0]?.price,
|
||||
order.items[0]?.quantity,
|
||||
order.items[0]?.vendor_id,
|
||||
order.items[0]?.vendor_name
|
||||
].join(',');
|
||||
}).join('\n');
|
||||
return header + body;
|
||||
}
|
||||
|
||||
function downloadCSV() {
|
||||
const now = new Date();
|
||||
const months = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
const currentMonthName = months[now.getMonth()];
|
||||
const filename = `${currentMonthName}_orders_overview.csv`;
|
||||
|
||||
const csv = convertToCSV(responseData); // Ensure responseData is up to date
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
$('#download-btn').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
|
|
|
|||
|
|
@ -800,7 +800,7 @@ $allSignups = array_merge($all_customers, $all_vendors);
|
|||
role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#todays" role="tab"
|
||||
aria-selected="true">Today's</a>
|
||||
aria-selected="true">Daily</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#monthly" role="tab"
|
||||
|
|
@ -814,7 +814,7 @@ $allSignups = array_merge($all_customers, $all_vendors);
|
|||
<div class="tab-content pt-4" id="salesReport">
|
||||
<div class="tab-pane fade show active" id="source-medium" role="tabpanel">
|
||||
<div class="mb-6" style="max-height:247px">
|
||||
<canvas id="acquisition" class="chartjs2"></canvas>
|
||||
<canvas id="salesChart" class="chartjs2" style="width: 100%; height: 400px;"></canvas>
|
||||
<div id="acqLegend" class="customLegend mb-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -833,7 +833,7 @@ $allSignups = array_merge($all_customers, $all_vendors);
|
|||
<canvas id="doughnut-chart"></canvas>
|
||||
</div>
|
||||
<a href="#" id="download-btn" class="pb-5 d-block text-center text-muted"><i
|
||||
class="mdi mdi-download mr-2"></i> Download overall report</a>
|
||||
class="mdi mdi-download mr-2"></i> Download Current Month's Overall Report</a>
|
||||
<div class="card-footer d-flex flex-wrap bg-white p-0">
|
||||
<div class="col-6">
|
||||
<div class="p-20">
|
||||
|
|
|
|||
Loading…
Reference in New Issue