darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-11 02:23:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Experimenting with chart.js

Browse Source
This commit is contained in:
Jonathan Bobel
2024-05-14 15:45:33 -04:00
parent b9d41dad86
commit f517180581
7 changed files with 1093 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/javascripts/chart.min.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
app/assets/javascripts/chartTest.js
+26
View File
@@ -0,0 +1,26 @@
(function (window) {
alert('loaded');
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
app/assets/javascripts/dataVisualization.js
+12 -12
View File
@@ -4,8 +4,8 @@
const data = {
messageStats: {
totalMessages: 1000,
delivered: 800,
pending: 100,
delivered: 820,
pending: 80,
failed: 100
},
dailyUsage: {
@@ -31,9 +31,9 @@
// Update total messages progress bar percentages
const dailyUsage = data.dailyUsage;
const dailyUsageLimit = dailyUsage.dailyUsageLimit;
// const dailyUsageLimit = dailyUsage.dailyUsageLimit;
const yearlyUsage = data.yearlyUsage;
const yearlyUsageLimit = yearlyUsage.yearlyUsageLimit;
// const yearlyUsageLimit = yearlyUsage.yearlyUsageLimit;
function updateUsageBar(elementId, dailyUsage, dailyUsageLimit, yearlyUsage, yearlyUsageLimit) {
// Ensure element exists
@@ -51,10 +51,10 @@
}
// 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);
// 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`;
@@ -63,9 +63,9 @@
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}`;
// 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);
app/assets/sass/uswds/styles.scss
+2 -1
View File
@@ -1,4 +1,5 @@
@forward "uswds-theme";
@forward "uswds";
@forward "uswds-theme-custom-styles";
@forward "legacy-styles";
@forward "legacy-styles";
@forward "data-visualization";