darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-18 21:49:37 -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);

61
app/assets/sass/uswds/_data-visualization.scss
View File

@@ -1,42 +1,67 @@
@use "uswds-core" as *;
$delivered: color('blue-50v');
$pending: color('green-cool-40v');
$failed: color('orange-30v');
.chart-container {
display: flex;
height: 100px;
height: units(10);
&.usage {
height: units(5);
}
}
.bar {
height: 30px;
transition: width 0.5s ease;
&#delivered {
background-color: green;
&.delivered, &.usage {
background-color: $delivered;
margin-right: 1px;
}
&#pending {
background-color: yellow;
&.pending{
background-color: $pending;
margin-right: 1px;
}
&#failed {
background-color: red;
&.failed, &.remaining {
background-color: $failed;
}
}
.legend {
display: flex;
justify-content: center;
margin-top: 10px;
margin: units(1) 0;
.legend-item {
display: flex;
align-items: center;
margin: 0 15px;
margin-right: units(2);
}
.legend-color {
width: 20px;
height: 20px;
margin-right: 5px;
width: units(3);
height: units(3);
margin-right: units(1);
background-color: $delivered;
&.pending {
background-color: $pending;
}
&.failed, &.remaining {
background-color: $failed;
}
}
.legend-label {
margin-right: 5px;
}
}
.progress-bar {
width: 300px;
height: 20px;
background-color: #eee;
border-radius: 5px;
margin-bottom: 10px;
}
.progress-bar-inner {
height: 100%;
background-color: #007bff;
border-radius: inherit;
}