darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-10 03:14:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

- Edited the data viz js

Browse Source 
- Updated the styles
- Updated the dashboard landing page
- Added a test file
This commit is contained in:
Jonathan Bobel
2023-12-18 11:21:51 -05:00
parent fa8a6aa0ba
commit eb09f846d9
4 changed files with 151 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
app/assets/javascripts/dataVisualization.js
View File

@@ -1,24 +1,71 @@
(function (window) {
// Dummy data (replace with API data)
const totalMessages = 1000;
const delivered = 800;
const pending = 100;
const failed = 100;
const data = {
messageStats: {
totalMessages: 1000,
delivered: 800,
pending: 100,
failed: 100
},
dailyUsage: {
dailyUsage: 20,
dailyUsageLimit: 100
},
yearlyUsage: {
yearlyUsage: 2000,
yearlyUsageLimit: 250000
}
};
// Calculate percentages
const deliveredPercentage = (delivered / totalMessages) * 100;
const pendingPercentage = (pending / totalMessages) * 100;
const failedPercentage = (failed / totalMessages) * 100;
// Update total messages progress bar percentages
const messageStats = data.messageStats;
// Set width of bars
document.getElementById("delivered").style.width = `${deliveredPercentage}%`;
document.getElementById("pending").style.width = `${pendingPercentage}%`;
document.getElementById("failed").style.width = `${failedPercentage}%`;
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 legend values
document.getElementById("delivered-value").innerText = delivered;
document.getElementById("pending-value").innerText = pending;
document.getElementById("failed-value").innerText = failed;
// 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 = dailyUsage.dailyUsage;
document.getElementById("daily-remaining-value").innerText = dailyUsage.dailyUsageLimit - dailyUsage.dailyUsage;
document.getElementById("yearly-usage-value").innerText = yearlyUsage.yearlyUsage;
document.getElementById("yearly-remaining-value").innerText = yearlyUsage.yearlyUsageLimit - yearlyUsage.yearlyUsage;
})(window);