mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-23 20:01:01 -05:00
Moving from a tabbed area to switching on account dropdown
This commit is contained in:
Jonathan Bobel
@@ -1,5 +1,4 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Define constants
|
||||
(function (window) {
|
||||
const COLORS = {
|
||||
delivered: '#0076d6',
|
||||
failed: '#fa9441',
|
||||
@@ -10,86 +9,106 @@
|
||||
const FONT_WEIGHT = 'bold';
|
||||
const MAX_Y = 120;
|
||||
|
||||
const tabButtons = document.querySelectorAll('.tablinks');
|
||||
let monthlyChartInitialized = false;
|
||||
let yearlyChartInitialized = false;
|
||||
// Function to create a stacked bar chart with animation using D3.js
|
||||
function createChart(containerId, labels, deliveredData, failedData) {
|
||||
const container = d3.select(containerId);
|
||||
container.selectAll('*').remove(); // Clear any existing content
|
||||
|
||||
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
|
||||
const width = container.node().clientWidth - margin.left - margin.right;
|
||||
const height = 400 - margin.top - margin.bottom;
|
||||
|
||||
// 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
|
||||
}
|
||||
});
|
||||
}
|
||||
const svg = container.append('svg')
|
||||
.attr('width', width + margin.left + margin.right)
|
||||
.attr('height', height + margin.top + margin.bottom)
|
||||
.append('g')
|
||||
.attr('transform', `translate(${margin.left},${margin.top})`);
|
||||
|
||||
// Function to get number of days in a month
|
||||
function getDaysInMonth(year, month) {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
}
|
||||
const x = d3.scaleBand()
|
||||
.domain(labels)
|
||||
.range([0, width])
|
||||
.padding(0.1);
|
||||
|
||||
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 };
|
||||
}
|
||||
// Adjust the y-axis domain to add some space above the tallest bar
|
||||
const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0)));
|
||||
const y = d3.scaleLinear()
|
||||
.domain([0, maxY + 2]) // Add 2 units of space at the top
|
||||
.nice()
|
||||
.range([height, 0]);
|
||||
|
||||
// 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 };
|
||||
svg.append('g')
|
||||
.attr('class', 'x axis')
|
||||
.attr('transform', `translate(0,${height})`)
|
||||
.call(d3.axisBottom(x));
|
||||
|
||||
// Generate the y-axis with whole numbers
|
||||
const yAxis = d3.axisLeft(y)
|
||||
.ticks(Math.min(maxY + 2, 10)) // Generate up to 10 ticks based on the data
|
||||
.tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis
|
||||
|
||||
svg.append('g')
|
||||
.attr('class', 'y axis')
|
||||
.call(yAxis);
|
||||
|
||||
// Data for stacking
|
||||
const stackData = labels.map((label, i) => ({
|
||||
label: label,
|
||||
delivered: deliveredData[i],
|
||||
failed: failedData[i] || 0 // Ensure there's a value for failed, even if it's 0
|
||||
}));
|
||||
|
||||
// Stack the data
|
||||
const stack = d3.stack()
|
||||
.keys(['delivered', 'failed'])
|
||||
.order(d3.stackOrderNone)
|
||||
.offset(d3.stackOffsetNone);
|
||||
|
||||
const series = stack(stackData);
|
||||
|
||||
// Color scale
|
||||
const color = d3.scaleOrdinal()
|
||||
.domain(['delivered', 'failed'])
|
||||
.range([COLORS.delivered, COLORS.failed]);
|
||||
|
||||
// Create tooltip
|
||||
const tooltip = d3.select('#tooltip');
|
||||
|
||||
// Create bars with animation
|
||||
const barGroups = svg.selectAll('.bar-group')
|
||||
.data(series)
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'bar-group')
|
||||
.attr('fill', d => color(d.key));
|
||||
|
||||
barGroups.selectAll('rect')
|
||||
.data(d => d)
|
||||
.enter()
|
||||
.append('rect')
|
||||
.attr('x', d => x(d.data.label))
|
||||
.attr('y', height)
|
||||
.attr('height', 0)
|
||||
.attr('width', x.bandwidth())
|
||||
.on('mouseover', function(event, d) {
|
||||
const key = d3.select(this.parentNode).datum().key;
|
||||
const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
|
||||
tooltip.style('display', 'block')
|
||||
.html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`)
|
||||
.style('left', `${event.pageX + 10}px`)
|
||||
.style('top', `${event.pageY - 20}px`);
|
||||
})
|
||||
.on('mousemove', function(event) {
|
||||
const [mouseX, mouseY] = d3.pointer(event);
|
||||
tooltip.style('left', `${mouseX + 10}px`)
|
||||
.style('top', `${mouseY + 30}px`);
|
||||
})
|
||||
.on('mouseout', function() {
|
||||
tooltip.style('display', 'none');
|
||||
})
|
||||
.transition()
|
||||
.duration(1000)
|
||||
.attr('y', d => y(d[1]))
|
||||
.attr('height', d => y(d[0]) - y(d[1]));
|
||||
}
|
||||
|
||||
// Function to create an accessible table
|
||||
@@ -134,59 +153,68 @@
|
||||
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';
|
||||
});
|
||||
// Function to handle dropdown change
|
||||
function handleDropdownChange(event) {
|
||||
const selectedValue = event.target.value;
|
||||
const subTitle = document.querySelector(`#chartsArea .chart-subtitle`);
|
||||
const selectElement = document.getElementById('options');
|
||||
const selectedText = selectElement.options[selectElement.selectedIndex].text;
|
||||
|
||||
// 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;
|
||||
if (selectedValue === "individual") {
|
||||
// Mock individual data
|
||||
const labels = ["2024-06-06", "2024-06-07", "2024-06-08", "2024-06-09", "2024-06-10", "2024-06-11", "2024-06-12"];
|
||||
const deliveredData = labels.map(() => Math.floor(Math.random() * 5) + 1); // Random between 1 and 5
|
||||
const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
|
||||
subTitle.textContent = selectedText + " - Last 7 Days";
|
||||
createChart('#weeklyChart', labels, deliveredData, failedData);
|
||||
createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
|
||||
} else if (selectedValue === "service") {
|
||||
subTitle.textContent = selectedText + " - Last 7 Days";
|
||||
// Fetch and use real service data
|
||||
fetchServiceData();
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listeners to the tab buttons
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', function(event) {
|
||||
openTab(this, this.getAttribute('data-tab'));
|
||||
function fetchServiceData() {
|
||||
var ctx = document.getElementById('weeklyChart');
|
||||
if (!ctx) {
|
||||
return;
|
||||
}
|
||||
|
||||
var socket = io();
|
||||
var serviceId = ctx.getAttribute('data-service-id');
|
||||
|
||||
socket.on('connect', function() {
|
||||
socket.emit('fetch_daily_stats', serviceId);
|
||||
});
|
||||
|
||||
socket.on('daily_stats_update', function(data) {
|
||||
var labels = [];
|
||||
var deliveredData = [];
|
||||
var failedData = [];
|
||||
|
||||
for (var date in data) {
|
||||
labels.push(date);
|
||||
deliveredData.push(data[date].sms.delivered);
|
||||
failedData.push(data[date].sms.failed !== undefined ? data[date].sms.failed : 0);
|
||||
}
|
||||
|
||||
createChart('#weeklyChart', labels, deliveredData, failedData);
|
||||
createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
|
||||
});
|
||||
|
||||
socket.on('error', function(data) {
|
||||
console.log('Error:', data);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize weekly chart and table with service data by default
|
||||
fetchServiceData();
|
||||
|
||||
// Add event listener to the dropdown
|
||||
const dropdown = document.getElementById('options');
|
||||
dropdown.addEventListener('change', handleDropdownChange);
|
||||
});
|
||||
|
||||
// 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);
|
||||
});
|
||||
})(window);
|
||||
|
||||
Reference in New Issue
Block a user