diff --git a/about-us.php b/about-us.php
index 205b216..4c8e21a 100644
--- a/about-us.php
+++ b/about-us.php
@@ -18,7 +18,10 @@
-
+
+
diff --git a/admin/assets/js/dashboard-chart.js b/admin/assets/js/dashboard-chart.js
index fce85d6..7ca03e5 100644
--- a/admin/assets/js/dashboard-chart.js
+++ b/admin/assets/js/dashboard-chart.js
@@ -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();
+
+
+ }
+
+ }
});
diff --git a/admin/assets/js/map.js b/admin/assets/js/map.js
new file mode 100644
index 0000000..c492579
--- /dev/null
+++ b/admin/assets/js/map.js
@@ -0,0 +1,14 @@
+var southWest = L.latLng(4.64, 116.95),
+ northEast = L.latLng(20.53, 127.25),
+ bounds = L.latLngBounds(southWest, northEast);
+
+// Initialize the map and set the bounds
+var map = L.map('map', {
+ maxBounds: bounds,
+ maxBoundsViscosity: 1.0 // Keeps the user within the bounds
+}).setView([13.41, 122.56], 6); // Centered on the Philippines with a zoom level of 6
+
+// Add a tile layer
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© OpenStreetMap contributors'
+}).addTo(map);
\ No newline at end of file
diff --git a/admin/index.php b/admin/index.php
index 4811983..2eee72d 100644
--- a/admin/index.php
+++ b/admin/index.php
@@ -49,6 +49,14 @@ $allSignups = array_merge($all_customers, $all_vendors);
+
+
+
+
@@ -108,12 +116,13 @@ $allSignups = array_merge($all_customers, $all_vendors);
- 
alt="vendor image">
-
- 
-
+