Files
notifications-admin/app/assets/javascripts/dataVisualization.js

72 lines
3.2 KiB
JavaScript

// (function (window) {
// // Dummy data (replace with API data)
// const data = {
// messageStats: {
// totalMessages: 1000,
// delivered: 520,
// pending: 280,
// failed: 100
// },
// dailyUsage: {
// dailyUsage: 20,
// dailyUsageLimit: 100
// },
// yearlyUsage: {
// yearlyUsage: 2000,
// yearlyUsageLimit: 250000
// }
// };
// // Update total messages progress bar percentages
// const messageStats = data.messageStats;
// const messageBars = ["delivered", "pending", "failed"];
// for (const bar of messageBars) {
// const percentage = messageStats[bar] / messageStats.totalMessages * 100;
// const elementId = `${bar}-bar`;
// const element = document.getElementById(elementId);
// element.style.width = `${parseFloat(percentage)}%`;
// }
// // Update total messages progress bar percentages
// const dailyUsage = data.dailyUsage;
// // const dailyUsageLimit = dailyUsage.dailyUsageLimit;
// const yearlyUsage = data.yearlyUsage;
// // const yearlyUsageLimit = yearlyUsage.yearlyUsageLimit;
// function updateUsageBar(elementId, dailyUsage, dailyUsageLimit, yearlyUsage, yearlyUsageLimit) {
// // Ensure element exists
// if (!elementId || !document.getElementById(elementId)) {
// console.error(`Element with ID "${elementId}" not found`);
// return;
// }
// // Calculate percentage
// const percentage = dailyUsage / dailyUsageLimit * 100;
// // Update bar width
// const element = document.getElementById(elementId);
// element.style.width = `${parseFloat(percentage)}%`;
// }
// // Update usage bars
// // updateUsageBar("dailyUsage-bar", dailyUsage.dailyUsage, dailyUsageLimit);
// // updateUsageBar("dailyUsageRemaining-bar", dailyUsageLimit - dailyUsage.dailyUsage, dailyUsageLimit);
// // updateUsageBar("yearlyUsage-bar", yearlyUsage.yearlyUsage, yearlyUsageLimit);
// // updateUsageBar("yearlyUsageRemaining-bar", yearlyUsageLimit - yearlyUsage.yearlyUsage, yearlyUsageLimit);
// // Update total messages legend values
// document.getElementById("total-value").innerText = `Total: ${messageStats.totalMessages} messages`;
// document.getElementById("delivered-value").innerText = `Delivered: ${messageStats.delivered}`;
// document.getElementById("pending-value").innerText = `Pending: ${messageStats.pending}`;
// document.getElementById("failed-value").innerText = `Failed: ${messageStats.failed}`;
// // Update usage legend values
// // document.getElementById("daily-usage-value").innerText = `Daily usage: ${dailyUsage.dailyUsage}`;
// // document.getElementById("daily-remaining-value").innerText = `Remaining messages: ${dailyUsage.dailyUsageLimit - dailyUsage.dailyUsage}`;
// // document.getElementById("yearly-usage-value").innerText = `Yearly usage: ${yearlyUsage.yearlyUsage}`;
// // document.getElementById("yearly-remaining-value").innerText = `Remaining messages: ${yearlyUsage.yearlyUsageLimit - yearlyUsage.yearlyUsage}`;
// })(window);