added javascript for line chart of monthly users
This commit is contained in:
parent
a5b1d41094
commit
813f7eb8b9
|
|
@ -7,7 +7,6 @@ $(document).ready(function() {
|
|||
fetchData()
|
||||
.then(function (response) {
|
||||
responseData = response.data;
|
||||
// console.log(responseData);
|
||||
const completedOrdersCount = countCompletedOrders(responseData);
|
||||
const toPayOrdersCount = countToPayOrders(responseData);
|
||||
const toShipOrdersCount = countToShipOrders(responseData);
|
||||
|
|
@ -339,7 +338,6 @@ $(document).ready(function() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
function initializeSalesChart(cod_daily_totals, obpay_daily_totals, cod_monthly_totals, obpay_monthly_totals, months, cod_yearly_totals, obpay_yearly_totals, years) {
|
||||
var acquisition = document.getElementById("salesChart");
|
||||
if (acquisition !== null) {
|
||||
|
|
@ -486,6 +484,7 @@ $(document).ready(function() {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
var ctx = document.getElementById("salesChart").getContext("2d");
|
||||
var lineAcq = new Chart(ctx, configAcq);
|
||||
document.getElementById("acqLegend").innerHTML = lineAcq.generateLegend();
|
||||
|
|
@ -493,8 +492,8 @@ $(document).ready(function() {
|
|||
var items = document.querySelectorAll(
|
||||
"#user-acquisition .nav-tabs .nav-item"
|
||||
);
|
||||
items.forEach(function (item, index) {
|
||||
item.addEventListener("click", function() {
|
||||
items.forEach(function (item, index) {
|
||||
item.addEventListener("click", function() {
|
||||
// Determine which tab was clicked
|
||||
var selectedTab = this.textContent.trim();
|
||||
|
||||
|
|
@ -587,4 +586,196 @@ $(document).ready(function() {
|
|||
event.preventDefault();
|
||||
downloadCSV('orders_data.csv');
|
||||
});
|
||||
|
||||
let customer_data;
|
||||
let vendor_data;
|
||||
|
||||
function getDataAndInitializeChart () {
|
||||
userData()
|
||||
.then(function (users){
|
||||
vendorData()
|
||||
.then(function (venues){
|
||||
customer_data = users.data;
|
||||
vendor_data = venues.data;
|
||||
const {customer_monthly_total, months} = countCustomerReg(customer_data)
|
||||
const { vendor_monthly_total} = countVendorReg(vendor_data);
|
||||
initializeActivityChart(customer_monthly_total, vendor_monthly_total, months);
|
||||
})
|
||||
})
|
||||
}
|
||||
getDataAndInitializeChart();
|
||||
|
||||
|
||||
function userData(){
|
||||
return axios.get('https://api.obanana.shop/api/v1/customers');
|
||||
}
|
||||
function vendorData(){
|
||||
return axios.get('https://api.obanana.shop/api/v1/vendors');
|
||||
}
|
||||
|
||||
function countCustomerReg(customers) {
|
||||
const currentDate = new Date();
|
||||
const monthLabels = [];
|
||||
const customer_monthly_total = Array(12).fill(0);
|
||||
for (let i = 11; i >= 0; i--) {
|
||||
const month = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1);
|
||||
monthLabels.push(month);
|
||||
}
|
||||
|
||||
console.log(monthLabels);
|
||||
|
||||
customers.forEach(customer => {
|
||||
const regDate = new Date(customer.createdAt);
|
||||
regDate.setHours(0, 0, 0, 0);
|
||||
|
||||
monthLabels.forEach((month, index) => {
|
||||
let total_count = 0;
|
||||
if (regDate.getFullYear() === month.getFullYear() && regDate.getMonth() === month.getMonth()) {
|
||||
total_count ++;
|
||||
customer_monthly_total[11 - index] += total_count;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log(customer_monthly_total)
|
||||
customer_monthly_total.reverse();
|
||||
return {
|
||||
customer_monthly_total,
|
||||
months: monthLabels.map(month => `${month.toLocaleString('default', { month: 'short' })} ${month.getFullYear()}`) // Return month labels for use in charts or displays
|
||||
};
|
||||
}
|
||||
|
||||
function countVendorReg(vendors) {
|
||||
const currentDate = new Date();
|
||||
const monthLabels = [];
|
||||
const vendor_monthly_total = Array(12).fill(0);
|
||||
for (let i = 11; i >= 0; i--) {
|
||||
const month = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1);
|
||||
monthLabels.push(month);
|
||||
}
|
||||
|
||||
console.log(monthLabels);
|
||||
|
||||
vendors.forEach(vendor => {
|
||||
const regDate = new Date(vendor.createdAt);
|
||||
regDate.setHours(0, 0, 0, 0);
|
||||
|
||||
monthLabels.forEach((month, index) => {
|
||||
let total_count = 0;
|
||||
if (regDate.getFullYear() === month.getFullYear() && regDate.getMonth() === month.getMonth()) {
|
||||
total_count ++;
|
||||
vendor_monthly_total[11 - index] += total_count;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log(vendor_monthly_total)
|
||||
vendor_monthly_total.reverse();
|
||||
return {
|
||||
vendor_monthly_total,
|
||||
};
|
||||
}
|
||||
|
||||
function initializeActivityChart (customer_monthly_total, vendor_monthly_total, months){
|
||||
var activity = document.getElementById("registry");
|
||||
if (activity !== null) {
|
||||
var activityData = [
|
||||
{
|
||||
first: customer_monthly_total,
|
||||
second: vendor_monthly_total
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
var config = {
|
||||
// The type of chart we want to create
|
||||
type: "line",
|
||||
// The data for our dataset
|
||||
data: {
|
||||
labels: months,
|
||||
datasets: [
|
||||
{
|
||||
label: "Customer",
|
||||
backgroundColor: "rgba(255, 165, 0, .3)",
|
||||
borderColor: "rgba(255, 165, 0, .7)",
|
||||
data: activityData[0].first,
|
||||
lineTension: 0.3,
|
||||
pointBackgroundColor: "rgba(255, 165, 0, 0)",
|
||||
pointHoverBackgroundColor: "rgba(255, 165, 0, 1)",
|
||||
pointHoverRadius: 3,
|
||||
pointHitRadius: 30,
|
||||
pointBorderWidth: 2,
|
||||
pointStyle: "rectRounded"
|
||||
},
|
||||
{
|
||||
label: "Vendors",
|
||||
backgroundColor: "rgba(135, 206, 235, .3)",
|
||||
borderColor: "rgba(135, 206, 235, .7)",
|
||||
data: activityData[0].second,
|
||||
lineTension: 0.3,
|
||||
pointBackgroundColor: "rgba(135, 206, 235, 0)",
|
||||
pointHoverBackgroundColor: "rgba(135, 206, 235, 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: 10,
|
||||
max: 30
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
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("registry").getContext("2d");
|
||||
var actLine = new Chart(ctx, config);
|
||||
document.getElementById("actLegend").innerHTML = actLine.generateLegend();
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue