| Current Path : /home/users/unlimited/www/mpos.codeskitter.site/public/assets/plugins/custom/ |
| Current File : /home/users/unlimited/www/mpos.codeskitter.site/public/assets/plugins/custom/dashboard.js |
// currency format
function currencyFormat(amount, type = "icon", decimals = 2) {
let symbol = $('#currency_symbol').val();
let position = $('#currency_position').val();
let code = $('#currency_code').val();
let formatted_amount = formattedAmount(amount, decimals);
// Apply currency format based on the position and type
if (type === "icon" || type === "symbol") {
if (position === "right") {
return formatted_amount + symbol;
} else {
return symbol + formatted_amount;
}
} else {
if (position === "right") {
return formatted_amount + ' ' + code;
} else {
return code + ' ' + formatted_amount;
}
}
}
// Format the amount
function formattedAmount(amount, decimals){
return Number.isInteger(+amount) ? parseInt(amount) : (+amount).toFixed(decimals);
}
$(document).ready(function () {
getYearlySubscriptions();
bestPlanSubscribes();
});
$(".overview-year").on("change", function () {
let year = $(this).val();
bestPlanSubscribes(year);
});
$(".yearly-statistics").on("change", function () {
let year = $(this).val();
getYearlySubscriptions(year);
});
function getYearlySubscriptions(year = new Date().getFullYear()) {
var url = $("#yearly-subscriptions-url").val();
$.ajax({
type: "GET",
url: url + "?year=" + year,
dataType: "json",
success: function (res) {
var subscriptions = [];
let totalAmount = 0;
for (var i = 0; i <= 11; i++) {
var monthName = getMonthNameFromIndex(i);
var subscriptionsData = res.find((item) => {
return item.month === monthName;
});
subscriptions[i] = subscriptionsData
? subscriptionsData.total_amount
: 0;
totalAmount += subscriptions[i]; // Add to total amount
}
subscriptionChart(subscriptions);
$(".income-value").text(currencyFormat(totalAmount));
},
error: function (xhr, status, error) {
console.error("AJAX Error:", status, error);
console.error("Response:", xhr.responseText);
},
});
}
let userOverView = false;
// Function to update the User Overview chart
function bestPlanSubscribes(year = new Date().getFullYear()) {
if (userOverView) {
userOverView.destroy();
}
Chart.defaults.datasets.doughnut.cutout = "65%";
let url = $("#get-plans-overview").val();
$.ajax({
url: (url += "?year=" + year),
type: "GET",
dataType: "json",
success: function (res) {
var labels = [];
var data = [];
$.each(res, function (index, planData) {
var label =
planData.plan.subscriptionName + ": " + planData.plan_count;
labels.push(label);
data.push(planData.plan_count);
});
var roundedCornersFor = {
start: Array.from({ length: data.length }, (_, i) => i),
};
Chart.defaults.elements.arc.roundedCornersFor = roundedCornersFor;
let inMonths = $("#plans-chart");
userOverView = new Chart(inMonths, {
type: "doughnut",
data: {
labels: labels.length ? labels : [0, 0],
datasets: [
{
label: "Total Users",
borderWidth: 0,
data: data.length ? data : [0.0001, 0.0001],
backgroundColor: [
"#2CE78D",
"#0a7cc2",
"#C52127",
"#2DB0F6",
],
borderColor: [
"#2CE78D",
"#0a7cc2",
"#2CE78D",
"#2DB0F6",
],
},
],
},
plugins: [
{
afterUpdate: function (chart) {
if (
chart.options.elements.arc.roundedCornersFor !==
undefined
) {
var arcValues = Object.values(
chart.options.elements.arc.roundedCornersFor
);
arcValues.forEach(function (arcs) {
arcs = Array.isArray(arcs) ? arcs : [arcs];
arcs.forEach(function (i) {
var arc =
chart.getDatasetMeta(0).data[i];
arc.round = {
x:
(chart.chartArea.left +
chart.chartArea.right) /
2,
y:
(chart.chartArea.top +
chart.chartArea.bottom) /
2,
radius:
(arc.outerRadius +
arc.innerRadius) /
2,
thickness:
(arc.outerRadius -
arc.innerRadius) /
2,
backgroundColor:
arc.options.backgroundColor,
};
});
});
}
},
afterDraw: (chart) => {
if (
chart.options.elements.arc.roundedCornersFor !==
undefined
) {
var { ctx, canvas } = chart;
var arc,
roundedCornersFor =
chart.options.elements.arc
.roundedCornersFor;
for (var position in roundedCornersFor) {
var values = Array.isArray(
roundedCornersFor[position]
)
? roundedCornersFor[position]
: [roundedCornersFor[position]];
values.forEach((p) => {
arc = chart.getDatasetMeta(0).data[p];
var startAngle =
Math.PI / 2 - arc.startAngle;
var endAngle =
Math.PI / 2 - arc.endAngle;
ctx.save();
ctx.translate(arc.round.x, arc.round.y);
ctx.fillStyle =
arc.options.backgroundColor;
ctx.beginPath();
if (position == "start") {
ctx.arc(
arc.round.radius *
Math.sin(startAngle),
arc.round.radius *
Math.cos(startAngle),
arc.round.thickness,
0,
2 * Math.PI
);
} else {
ctx.arc(
arc.round.radius *
Math.sin(endAngle),
arc.round.radius *
Math.cos(endAngle),
arc.round.thickness,
0,
2 * Math.PI
);
}
ctx.closePath();
ctx.fill();
ctx.restore();
});
}
}
},
},
],
options: {
responsive: true,
tooltips: {
displayColors: true,
zIndex: 999999,
},
plugins: {
legend: {
position: "top",
labels: {
usePointStyle: true,
padding: 10,
},
},
},
scales: {
x: {
display: false,
stacked: true,
},
y: {
display: false,
stacked: true,
},
},
},
});
},
error: function (xhr, textStatus, errorThrown) {
console.log("Error fetching user overview data: " + textStatus);
},
});
}
// PRINT TOP DATA
getDashboardData();
function getDashboardData() {
var url = $("#get-dashboard").val();
$.ajax({
type: "GET",
url: url,
dataType: "json",
success: function (res) {
$("#total_businesses").text(res.total_businesses);
$("#expired_businesses").text(res.expired_businesses);
$("#plan_subscribes").text(res.plan_subscribes);
$("#business_categories").text(res.business_categories);
$("#total_plans").text(res.total_plans);
$("#total_staffs").text(res.total_staffs);
},
});
}
// Function to convert month index to month name
function getMonthNameFromIndex(index) {
const monthNames = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
return monthNames[index];
}
let statiSticsValu = false;
function subscriptionChart(subscriptions) {
if (statiSticsValu) {
statiSticsValu.destroy();
}
var ctx = document.getElementById("monthly-statistics").getContext("2d");
var gradient = ctx.createLinearGradient(0, 100, 10, 280);
gradient.addColorStop(0, "#f2d5d8");
gradient.addColorStop(1, "#BC212800");
var totals = subscriptions.reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
statiSticsValu = new Chart(ctx, {
type: "line",
data: {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
datasets: [
{
backgroundColor: gradient,
label: "Total Subscription Amount: " + totals,
fill: true,
borderWidth: 1,
borderColor: "#C52127",
data: subscriptions,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
tension: 0.4,
plugins: {
legend: {
display: false,
},
tooltip: {
displayColors: true,
backgroundColor: "#FFFFFF",
titleColor: "#000000",
bodyColor: "#000000",
borderColor: "rgba(0, 0, 0, 0.1)",
borderWidth: 1,
padding: 10,
},
},
scales: {
x: {
display: true,
grid: {
display: false,
},
},
y: {
display: true,
beginAtZero: true,
grid: {
color: "#D3D8DD",
borderDash: [5, 5],
borderDashOffset: 2,
},
},
},
layout: {
padding: {
top: 10,
bottom: 10,
left: 10,
right: 10,
},
},
},
});
}
window.addEventListener("resize", function () {
if (statiSticsValu) {
statiSticsValu.resize();
}
});