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

draft dash

Browse Source
This commit is contained in:
Beverly Nguyen
2025-01-09 16:20:33 -08:00
parent 9d09f75855
commit 30293d9774
3 changed files with 201 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

356
app/assets/javascripts/activityChart.js
View File

@@ -119,203 +119,203 @@
.domain(['delivered', 'failed', 'pending']) .domain(['delivered', 'failed', 'pending'])
.range([COLORS.delivered, COLORS.failed, COLORS.pending]); .range([COLORS.delivered, COLORS.failed, COLORS.pending]);
// Create bars with animation // Create bars with animation
const barGroups = svg.selectAll('.bar-group') const barGroups = svg.selectAll('.bar-group')
.data(series) .data(series)
.enter() .enter()
.append('g') .append('g')
.attr('class', 'bar-group') .attr('class', 'bar-group')
.attr('fill', d => color(d.key)); .attr('fill', d => color(d.key));
barGroups.selectAll('rect') barGroups.selectAll('rect')
.data(d => d) .data(d => d)
.enter() .enter()
.append('rect') .append('rect')
.attr('x', d => x(d.data.label)) .attr('x', d => x(d.data.label))
.attr('y', height) .attr('y', height)
.attr('height', 0) .attr('height', 0)
.attr('width', x.bandwidth()) .attr('width', x.bandwidth())
.on('mouseover', function(event, d) { .on('mouseover', function(event, d) {
const key = d3.select(this.parentNode).datum().key; const key = d3.select(this.parentNode).datum().key;
const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1); const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
tooltip.style('display', 'block') tooltip.style('display', 'block')
.html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`); .html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`);
}) })
.on('mousemove', function(event) { .on('mousemove', function(event) {
tooltip.style('left', `${event.pageX + 10}px`) tooltip.style('left', `${event.pageX + 10}px`)
.style('top', `${event.pageY - 20}px`); .style('top', `${event.pageY - 20}px`);
}) })
.on('mouseout', function() { .on('mouseout', function() {
tooltip.style('display', 'none'); tooltip.style('display', 'none');
}) })
.transition() .transition()
.duration(1000) .duration(1000)
.attr('y', d => y(d[1])) .attr('y', d => y(d[1]))
.attr('height', d => y(d[0]) - y(d[1])); .attr('height', d => y(d[0]) - y(d[1]));
}; };
// Function to create an accessible table // Function to create an accessible table
const createTable = function(tableId, chartType, labels, deliveredData, failedData) { const createTable = function(tableId, chartType, labels, deliveredData, failedData) {
const table = document.getElementById(tableId); const table = document.getElementById(tableId);
table.innerHTML = ""; // Clear previous data table.innerHTML = ""; // Clear previous data
const captionText = document.querySelector(`#${chartType} .chart-subtitle`).textContent; const captionText = document.querySelector(`#${chartType} .chart-subtitle`).textContent;
const caption = document.createElement('caption'); const caption = document.createElement('caption');
caption.textContent = captionText; caption.textContent = captionText;
const thead = document.createElement('thead'); const thead = document.createElement('thead');
const tbody = document.createElement('tbody'); const tbody = document.createElement('tbody');
// Create table header // Create table header
const headerRow = document.createElement('tr'); const headerRow = document.createElement('tr');
const headers = ['Day', 'Delivered', 'Failed', 'Pending']; const headers = ['Day', 'Delivered', 'Failed', 'Pending'];
headers.forEach(headerText => { headers.forEach(headerText => {
const th = document.createElement('th'); const th = document.createElement('th');
th.textContent = headerText; th.textContent = headerText;
headerRow.appendChild(th); headerRow.appendChild(th);
}); });
thead.appendChild(headerRow); thead.appendChild(headerRow);
// Create table body // Create table body
labels.forEach((label, index) => { labels.forEach((label, index) => {
const row = document.createElement('tr'); const row = document.createElement('tr');
const cellDay = document.createElement('td'); const cellDay = document.createElement('td');
cellDay.textContent = label; cellDay.textContent = label;
row.appendChild(cellDay); row.appendChild(cellDay);
const cellDelivered = document.createElement('td'); const cellDelivered = document.createElement('td');
cellDelivered.textContent = deliveredData[index]; cellDelivered.textContent = deliveredData[index];
row.appendChild(cellDelivered); row.appendChild(cellDelivered);
const cellFailed = document.createElement('td'); const cellFailed = document.createElement('td');
cellFailed.textContent = failedData[index]; cellFailed.textContent = failedData[index];
row.appendChild(cellFailed); row.appendChild(cellFailed);
const cellPending = document.createElement('td'); const cellPending = document.createElement('td');
cellPending.textContent = pendingData[index]; cellPending.textContent = pendingData[index];
row.appendChild(cellPending); row.appendChild(cellPending);
tbody.appendChild(row); tbody.appendChild(row);
}); });
table.appendChild(caption); table.appendChild(caption);
table.appendChild(thead); table.appendChild(thead);
table.append(tbody); table.append(tbody);
}; };
const fetchData = function(type) { const fetchData = function(type) {
var ctx = document.getElementById('weeklyChart'); var ctx = document.getElementById('weeklyChart');
if (!ctx) { if (!ctx) {
return; return;
} }
var url = type === 'service' ? `/daily_stats.json` : `/daily_stats_by_user.json`; var url = type === 'service' ? `/daily_stats.json` : `/daily_stats_by_user.json`;
return fetch(url) return fetch(url)
.then(response => { .then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not ok'); throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
labels = [];
deliveredData = [];
failedData = [];
pendingData = [];
let totalMessages = 0;
for (var dateString in data) {
if (data.hasOwnProperty(dateString)) {
const dateParts = dateString.split('-');
const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`;
labels.push(formattedDate);
deliveredData.push(data[dateString].sms.delivered);
failedData.push(data[dateString].sms.failure);
pendingData.push(data[dateString].sms.pending || 0);
// Calculate the total number of messages
totalMessages += data[dateString].sms.delivered + data[dateString].sms.failure;
} }
} return response.json();
})
.then(data => {
labels = [];
deliveredData = [];
failedData = [];
pendingData = [];
// Check if there are no messages sent let totalMessages = 0;
const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
if (totalMessages === 0) { for (var dateString in data) {
// Remove existing chart and render the alert message if (data.hasOwnProperty(dateString)) {
d3.select('#weeklyChart').selectAll('*').remove(); const dateParts = dateString.split('-');
d3.select('#weeklyChart') const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`;
.append('div')
.html(` labels.push(formattedDate);
<div class="usa-alert usa-alert--info usa-alert--slim"> deliveredData.push(data[dateString].sms.delivered);
<div class="usa-alert__body"> failedData.push(data[dateString].sms.failure);
<p class="usa-alert__text"> pendingData.push(data[dateString].sms.pending || 0);
No messages sent in the last 7 days // Calculate the total number of messages
</p> totalMessages += data[dateString].sms.delivered + data[dateString].sms.failure;
}
}
// Check if there are no messages sent
const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
if (totalMessages === 0) {
// Remove existing chart and render the alert message
d3.select('#weeklyChart').selectAll('*').remove();
d3.select('#weeklyChart')
.append('div')
.html(`
<div class="usa-alert usa-alert--info usa-alert--slim">
<div class="usa-alert__body">
<p class="usa-alert__text">
No messages sent in the last 7 days
</p>
</div>
</div> </div>
</div> `);
`); // Hide the subtitle
// Hide the subtitle if (subTitle) {
if (subTitle) { subTitle.style.display = 'none';
subTitle.style.display = 'none'; }
} else {
// If there are messages, create the chart and table
createChart('#weeklyChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
} }
} else {
// If there are messages, create the chart and table return data;
})
.catch(error => console.error('Error fetching daily stats:', error));
};
setInterval(() => fetchData('service'), 10000);
const handleDropdownChange = function(event) {
const selectedValue = event.target.value;
const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
const selectElement = document.getElementById('options');
const selectedText = selectElement.options[selectElement.selectedIndex].text;
subTitle.textContent = `${selectedText} - last 7 days`;
fetchData(selectedValue);
// Update ARIA live region
const liveRegion = document.getElementById('aria-live-account');
liveRegion.textContent = `Data updated for ${selectedText} - last 7 days`;
// Switch tables based on dropdown selection
const selectedTable = selectedValue === "individual" ? "table1" : "table2";
const tables = document.querySelectorAll('.table-overflow-x-auto');
tables.forEach(function(table) {
table.classList.add('hidden'); // Hide all tables by adding the hidden class
table.classList.remove('visible'); // Ensure they are not visible
});
const tableToShow = document.getElementById(selectedTable);
tableToShow.classList.remove('hidden'); // Remove hidden class
tableToShow.classList.add('visible'); // Add visible class
};
document.addEventListener('DOMContentLoaded', function() {
// Initialize activityChart chart and table with service data by default
fetchData('service');
// Add event listener to the dropdown
const dropdown = document.getElementById('options');
dropdown.addEventListener('change', handleDropdownChange);
});
// Resize chart on window resize
window.addEventListener('resize', function() {
if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0) {
createChart('#weeklyChart', labels, deliveredData, failedData); createChart('#weeklyChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData); createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
} }
});
return data; // Export functions for testing
}) window.createChart = createChart;
.catch(error => console.error('Error fetching daily stats:', error)); window.createTable = createTable;
}; window.handleDropdownChange = handleDropdownChange;
// setInterval(() => fetchData('service'), 1000); window.fetchData = fetchData;
const handleDropdownChange = function(event) { }
const selectedValue = event.target.value;
const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
const selectElement = document.getElementById('options');
const selectedText = selectElement.options[selectElement.selectedIndex].text;
subTitle.textContent = `${selectedText} - last 7 days`;
fetchData(selectedValue);
// Update ARIA live region
const liveRegion = document.getElementById('aria-live-account');
liveRegion.textContent = `Data updated for ${selectedText} - last 7 days`;
// Switch tables based on dropdown selection
const selectedTable = selectedValue === "individual" ? "table1" : "table2";
const tables = document.querySelectorAll('.table-overflow-x-auto');
tables.forEach(function(table) {
table.classList.add('hidden'); // Hide all tables by adding the hidden class
table.classList.remove('visible'); // Ensure they are not visible
});
const tableToShow = document.getElementById(selectedTable);
tableToShow.classList.remove('hidden'); // Remove hidden class
tableToShow.classList.add('visible'); // Add visible class
};
document.addEventListener('DOMContentLoaded', function() {
// Initialize activityChart chart and table with service data by default
fetchData('service');
// Add event listener to the dropdown
const dropdown = document.getElementById('options');
dropdown.addEventListener('change', handleDropdownChange);
});
// Resize chart on window resize
window.addEventListener('resize', function() {
if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0) {
createChart('#weeklyChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
}
});
// Export functions for testing
window.createChart = createChart;
window.createTable = createTable;
window.handleDropdownChange = handleDropdownChange;
window.fetchData = fetchData;
}
})(window); })(window);

16
app/main/views/dashboard.py
View File

@@ -48,8 +48,16 @@ def service_dashboard(service_id):
if not current_user.has_permissions("view_activity"): if not current_user.has_permissions("view_activity"):
return redirect(url_for("main.choose_template", service_id=service_id)) return redirect(url_for("main.choose_template", service_id=service_id))
yearly_usage = billing_api_client.get_annual_usage_for_service(
service_id,
get_current_financial_year(),
)
free_sms_allowance = billing_api_client.get_free_sms_fragment_limit_for_year(
current_service.id,
)
usage_data = get_annual_usage_breakdown(yearly_usage, free_sms_allowance)
sms_sent = usage_data["sms_sent"]
sms_allowance_remaining = usage_data["sms_allowance_remaining"]
job_response = job_api_client.get_jobs(service_id)["data"] job_response = job_api_client.get_jobs(service_id)["data"]
service_data_retention_days = 7 service_data_retention_days = 7
@@ -81,6 +89,8 @@ def service_dashboard(service_id):
partials=get_dashboard_partials(service_id), partials=get_dashboard_partials(service_id),
jobs=jobs, jobs=jobs,
service_data_retention_days=service_data_retention_days, service_data_retention_days=service_data_retention_days,
sms_sent=sms_sent,
sms_allowance_remaining=sms_allowance_remaining,
) )
@@ -342,7 +352,7 @@ def aggregate_notifications_stats(template_statistics):
def fetch_daily_stats(service_id): def fetch_daily_stats(service_id):
date_range = get_stats_date_range() date_range = get_stats_date_range()
stats = service_api_client.get_service_notification_statistics_by_day( stats = service_api_client.get_service_notification_statistics_by_day(
service_id, start_date='2024-12-31', days=date_range["days"] service_id, start_date='2025-01-09', days=date_range["days"]
) )
return stats return stats

10
app/templates/views/dashboard/_activity.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="ajax-block-container">
<div id="activityChart">
<div class="chart-header">
<div class="chart-subtitle">{{ current_service.name }} - last 7 days</div>
<div class="chart-legend" role="region" aria-label="Legend"></div>
</div>
<div class="chart-container" id="weeklyChart"></div>
<table id="weeklyTable" class="usa-sr-only usa-table"></table>
</div>
</div>