mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-09 10:54:11 -04:00
Tentatively finished up the tabbed area with weekly/monthly/yearly stacked bar charts with dummy data
This commit is contained in:
Jonathan Bobel
192
app/assets/javascripts/dashboardVisualization.js
Normal file
192
app/assets/javascripts/dashboardVisualization.js
Normal file
@@ -0,0 +1,192 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Define constants
|
||||
const COLORS = {
|
||||
delivered: '#0076d6',
|
||||
failed: '#fa9441',
|
||||
text: '#666'
|
||||
};
|
||||
|
||||
const FONT_SIZE = 16;
|
||||
const FONT_WEIGHT = 'bold';
|
||||
const MAX_Y = 120;
|
||||
|
||||
const tabButtons = document.querySelectorAll('.tablinks');
|
||||
let monthlyChartInitialized = false;
|
||||
let yearlyChartInitialized = false;
|
||||
|
||||
|
||||
// Function to create a chart
|
||||
function createChart(ctx, labels, deliveredData, failedData) {
|
||||
return new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Delivered',
|
||||
data: deliveredData,
|
||||
backgroundColor: COLORS.delivered,
|
||||
stack: 'Stack 0'
|
||||
}, {
|
||||
label: 'Failed',
|
||||
data: failedData,
|
||||
backgroundColor: COLORS.failed,
|
||||
stack: 'Stack 0'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
beginAtZero: true,
|
||||
max: MAX_Y,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'SMS Sent',
|
||||
color: COLORS.text,
|
||||
font: {
|
||||
size: FONT_SIZE,
|
||||
weight: FONT_WEIGHT
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
align: 'end',
|
||||
labels: {
|
||||
padding: 20,
|
||||
boxWidth: 14,
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: true
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to get number of days in a month
|
||||
function getDaysInMonth(year, month) {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
}
|
||||
|
||||
function generateYearlyData(labels) {
|
||||
const deliveredData = labels.map((label, index) => {
|
||||
return index < 6 ? Math.floor(Math.random() * 81) + 20 : 0; // Random between 20 and 100 for months Jan-June, zero for others
|
||||
});
|
||||
const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
|
||||
return { deliveredData, failedData };
|
||||
}
|
||||
|
||||
// Function to generate random data
|
||||
function generateRandomData(labels) {
|
||||
const deliveredData = labels.map(() => Math.floor(Math.random() * 81) + 20); // Random between 20 and 100
|
||||
const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
|
||||
return { deliveredData, failedData };
|
||||
}
|
||||
|
||||
// Function to create an accessible table
|
||||
function createTable(tableId, chartType, labels, deliveredData, failedData) {
|
||||
const table = document.getElementById(tableId);
|
||||
const captionText = document.querySelector(`#${chartType} .chart-subtitle`).textContent;
|
||||
const caption = document.createElement('caption');
|
||||
caption.textContent = captionText;
|
||||
const thead = document.createElement('thead');
|
||||
const tbody = document.createElement('tbody');
|
||||
|
||||
// Create table header
|
||||
const headerRow = document.createElement('tr');
|
||||
const headers = ['Day', 'Delivered', 'Failed'];
|
||||
headers.forEach(headerText => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = headerText;
|
||||
headerRow.appendChild(th);
|
||||
});
|
||||
thead.appendChild(headerRow);
|
||||
|
||||
// Create table body
|
||||
labels.forEach((label, index) => {
|
||||
const row = document.createElement('tr');
|
||||
const cellDay = document.createElement('td');
|
||||
cellDay.textContent = label;
|
||||
row.appendChild(cellDay);
|
||||
|
||||
const cellDelivered = document.createElement('td');
|
||||
cellDelivered.textContent = deliveredData[index];
|
||||
row.appendChild(cellDelivered);
|
||||
|
||||
const cellFailed = document.createElement('td');
|
||||
cellFailed.textContent = failedData[index];
|
||||
row.appendChild(cellFailed);
|
||||
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
table.appendChild(caption);
|
||||
table.appendChild(thead);
|
||||
table.appendChild(tbody);
|
||||
}
|
||||
|
||||
// Function to handle tab switching
|
||||
function openTab(button, tabName) {
|
||||
// Hide all tab contents
|
||||
document.querySelectorAll('.tabcontent').forEach(content => {
|
||||
content.style.display = 'none';
|
||||
});
|
||||
|
||||
// Remove "active" class from all buttons
|
||||
tabButtons.forEach(button => {
|
||||
button.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show the current tab and add "active" class to the button
|
||||
document.getElementById(tabName).style.display = 'block';
|
||||
button.classList.add('active');
|
||||
|
||||
// Initialize monthly chart if the "Monthly" tab is clicked
|
||||
if (tabName === 'Monthly' && !monthlyChartInitialized) {
|
||||
const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
|
||||
const now = new Date();
|
||||
const daysInMonth = getDaysInMonth(now.getFullYear(), now.getMonth());
|
||||
const monthlyLabels = Array.from({ length: daysInMonth }, (_, i) => `${i + 1}`);
|
||||
const { deliveredData, failedData } = generateRandomData(monthlyLabels);
|
||||
createChart(monthlyCtx, monthlyLabels, deliveredData, failedData);
|
||||
createTable('monthlyTable', 'Monthly', monthlyLabels, deliveredData, failedData);
|
||||
monthlyChartInitialized = true;
|
||||
}
|
||||
|
||||
// Initialize yearly chart if the "Yearly" tab is clicked
|
||||
if (tabName === 'Yearly' && !yearlyChartInitialized) {
|
||||
const yearlyCtx = document.getElementById('yearlyChart').getContext('2d');
|
||||
const yearlyLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
const { deliveredData, failedData } = generateYearlyData(yearlyLabels);
|
||||
createChart(yearlyCtx, yearlyLabels, deliveredData, failedData);
|
||||
createTable('yearlyTable', 'Yearly', yearlyLabels, deliveredData, failedData);
|
||||
yearlyChartInitialized = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listeners to the tab buttons
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', function(event) {
|
||||
openTab(this, this.getAttribute('data-tab'));
|
||||
});
|
||||
});
|
||||
|
||||
// Show the first tab by default
|
||||
tabButtons[0].click();
|
||||
|
||||
// Initialize weekly chart and table
|
||||
const weeklyCtx = document.getElementById('weeklyChart').getContext('2d');
|
||||
const weeklyLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
const { deliveredData: weeklyDeliveredData, failedData: weeklyFailedData } = generateRandomData(weeklyLabels);
|
||||
createChart(weeklyCtx, weeklyLabels, weeklyDeliveredData, weeklyFailedData);
|
||||
createTable('weeklyTable', 'Weekly', weeklyLabels, weeklyDeliveredData, weeklyFailedData);
|
||||
});
|
||||
@@ -1,71 +1,71 @@
|
||||
(function (window) {
|
||||
// (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
|
||||
}
|
||||
};
|
||||
// // 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;
|
||||
// // 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)}%`;
|
||||
}
|
||||
// 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;
|
||||
// // 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;
|
||||
}
|
||||
// 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;
|
||||
// // Calculate percentage
|
||||
// const percentage = dailyUsage / dailyUsageLimit * 100;
|
||||
|
||||
// Update bar width
|
||||
const element = document.getElementById(elementId);
|
||||
element.style.width = `${parseFloat(percentage)}%`;
|
||||
}
|
||||
// // 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 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 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}`;
|
||||
// // 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);
|
||||
// })(window);
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const ctx = document.getElementById('myChart').getContext('2d');
|
||||
const labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
|
||||
const dataDelivered = labels.map(() => Math.floor(Math.random() * 81) + 20); // Random between 20 and 100
|
||||
const dataFailed = dataDelivered.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
|
||||
|
||||
const myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Delivered',
|
||||
data: dataDelivered,
|
||||
backgroundColor: '#0076d6',
|
||||
stack: 'Stack 0'
|
||||
}, {
|
||||
label: 'Failed',
|
||||
data: dataFailed,
|
||||
backgroundColor: '#fa9441',
|
||||
stack: 'Stack 0'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
beginAtZero: true,
|
||||
max: 120,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'SMS Sent', // Label for the Y-axis
|
||||
color: '#666', // Optional: you can change the label color
|
||||
font: {
|
||||
size: 16, // Optional: change the font size
|
||||
weight: 'bold', // Optional: change the font weight
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
align: 'end', // This aligns the legend items to the end of the area
|
||||
labels: {
|
||||
padding: 20,
|
||||
boxWidth: 14,
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: true
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user