Skip to content

Commit

Permalink
Merge pull request #2250 from GSA/2199-add-pending-message-data-to-da…
Browse files Browse the repository at this point in the history 
…ily-and-user_daily-stats

Add pending to dashboard
  • Loading branch information
@heyitsmebev
heyitsmebev authored Jan 28, 2025
2 parents 088da55 + fc755c1 commit 6c3d6ee
Show file tree
Hide file tree
Showing 6 changed files with 573 additions and 1,747 deletions.
66 changes: 40 additions & 26 deletions app/assets/javascripts/activityChart.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
(function (window) {

if (document.getElementById('activityChartContainer')) {
let currentType = 'service';
const tableContainer = document.getElementById('activityContainer');
const currentUserName = tableContainer.getAttribute('data-currentUserName');
const currentServiceId = tableContainer.getAttribute('data-currentServiceId');
const COLORS = {
delivered: '#0076d6',
failed: '#fa9441',
pending: '#C7CACE',
text: '#666'
};

const FONT_SIZE = 16;
const FONT_WEIGHT = 'bold';
const MAX_Y = 120;

const createChart = function(containerId, labels, deliveredData, failedData) {
const createChart = function(containerId, labels, deliveredData, failedData, pendingData) {
const container = d3.select(containerId);
container.selectAll('*').remove(); // Clear any existing content

Expand All @@ -36,7 +39,7 @@
}

// Calculate total messages
const totalMessages = d3.sum(deliveredData) + d3.sum(failedData);
const totalMessages = d3.sum(deliveredData) + d3.sum(failedData) + d3.sum(pendingData);

// Create legend only if there are messages
const legendContainer = d3.select('.chart-legend');
Expand All @@ -46,7 +49,8 @@
// Show legend if there are messages
const legendData = [
{ label: 'Delivered', color: COLORS.delivered },
{ label: 'Failed', color: COLORS.failed }
{ label: 'Failed', color: COLORS.failed },
{ label: 'Pending', color: COLORS.pending }
];

const legendItem = legendContainer.selectAll('.legend-item')
Expand Down Expand Up @@ -77,8 +81,9 @@
.range([0, width])
.padding(0.1);
// 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.scaleSqrt()
const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0) + (pendingData[i] || 0)));

const y = d3.scaleSymlog()
.domain([0, maxY + 2]) // Add 2 units of space at the top
.nice()
.range([height, 0]);
Expand All @@ -90,7 +95,7 @@

// 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
.ticks(Math.min(maxY + 2, 3))
.tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis

svg.append('g')
Expand All @@ -101,21 +106,22 @@
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
failed: failedData[i] || 0,
pending: pendingData[i] || 0
}));

// Stack the data
const stack = d3.stack()
.keys(['delivered', 'failed'])
.keys(['delivered', 'failed', 'pending'])
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);

const series = stack(stackData);

// Color scale
const color = d3.scaleOrdinal()
.domain(['delivered', 'failed'])
.range([COLORS.delivered, COLORS.failed]);
.domain(['delivered', 'failed', 'pending'])
.range([COLORS.delivered, COLORS.failed, COLORS.pending]);

// Create bars with animation
const barGroups = svg.selectAll('.bar-group')
Expand Down Expand Up @@ -153,7 +159,7 @@
};

// Function to create an accessible table
const createTable = function(tableId, chartType, labels, deliveredData, failedData) {
const createTable = function(tableId, chartType, labels, deliveredData, failedData, pendingData) {
const table = document.getElementById(tableId);
table.innerHTML = ""; // Clear previous data

Expand All @@ -165,7 +171,7 @@

// Create table header
const headerRow = document.createElement('tr');
const headers = ['Day', 'Delivered', 'Failed'];
const headers = ['Day', 'Delivered', 'Failed', 'Pending'];
headers.forEach(headerText => {
const th = document.createElement('th');
th.textContent = headerText;
Expand All @@ -188,6 +194,10 @@
cellFailed.textContent = failedData[index];
row.appendChild(cellFailed);

const cellPending = document.createElement('td');
cellPending.textContent = pendingData[index];
row.appendChild(cellPending);

tbody.appendChild(row);
});

Expand All @@ -197,12 +207,13 @@
};

const fetchData = function(type) {

var ctx = document.getElementById('weeklyChart');
if (!ctx) {
return;
}

var url = type === 'service' ? `/daily_stats.json` : `/daily_stats_by_user.json`;
var url = type === 'service' ? `/services/${currentServiceId}/daily-stats.json` : `/services/${currentServiceId}/daily-stats-by-user.json`;
return fetch(url)
.then(response => {
if (!response.ok) {
Expand All @@ -214,7 +225,7 @@
labels = [];
deliveredData = [];
failedData = [];

pendingData = [];
let totalMessages = 0;

for (var dateString in data) {
Expand All @@ -225,6 +236,8 @@
labels.push(formattedDate);
deliveredData.push(data[dateString].sms.delivered);
failedData.push(data[dateString].sms.failure);
pendingData.push(data[dateString].sms.pending || 0);
totalMessages += data[dateString].sms.delivered + data[dateString].sms.failure + data[dateString].sms.pending;

// Calculate the total number of messages
totalMessages += data[dateString].sms.delivered + data[dateString].sms.failure;
Expand Down Expand Up @@ -253,17 +266,18 @@
}
} else {
// If there are messages, create the chart and table
createChart('#weeklyChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
}

return data;
})
.catch(error => console.error('Error fetching daily stats:', error));
};
createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
}

return data;
})
.catch(error => console.error('Error fetching daily stats:', error));
};
setInterval(() => fetchData(currentType), 25000);
const handleDropdownChange = function(event) {
const selectedValue = event.target.value;
currentType = selectedValue;
const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
const selectElement = document.getElementById('options');
const selectedText = selectElement.options[selectElement.selectedIndex].text;
Expand Down Expand Up @@ -316,7 +330,7 @@

document.addEventListener('DOMContentLoaded', function() {
// Initialize activityChart chart and table with service data by default
fetchData('service');
fetchData(currentType);

const allRows = Array.from(document.querySelectorAll('#activity-table tbody tr'));
allRows.forEach((row, index) => {
Expand All @@ -329,9 +343,9 @@

// 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);
if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0 && pendingData.length > 0) {
createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
}
});

Expand Down
15 changes: 7 additions & 8 deletions app/main/views/dashboard.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,25 +76,24 @@ def service_dashboard(service_id):
)


@main.route("/daily_stats.json")
def get_daily_stats():
service_id = session.get("service_id")
@main.route("/services/<uuid:service_id>/daily-stats.json")
@user_has_permissions()
def get_daily_stats(service_id):
date_range = get_stats_date_range()

stats = service_api_client.get_service_notification_statistics_by_day(
service_id, start_date=date_range["start_date"], days=date_range["days"]
)
return jsonify(stats)


@main.route("/daily_stats_by_user.json")
def get_daily_stats_by_user():
@main.route("/services/<uuid:service_id>/daily-stats-by-user.json")
@user_has_permissions()
def get_daily_stats_by_user(service_id):
service_id = session.get("service_id")
date_range = get_stats_date_range()
user_id = current_user.id
stats = service_api_client.get_user_service_notification_statistics_by_day(
service_id,
user_id,
user_id=current_user.id,
start_date=date_range["start_date"],
days=date_range["days"],
)
Expand Down
2 changes: 1 addition & 1 deletion app/templates/views/dashboard/activity-table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">Recent activity</h2>
</div>
</div>
<div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
<div class="table-container" id="activityContainer" data-currentUserName="{{ current_user.name }}">
<div class="table-container" id="activityContainer" data-currentUserName="{{ current_user.name }}" data-currentServiceId="{{current_service.id}}">
<div id="tableActivity" class="table-overflow-x-auto">
<h2 id="table-heading" class="margin-top-4 margin-bottom-1">Service activity</h2>

Expand Down
Loading

0 comments on commit 6c3d6ee

Please sign in to comment.