Merge pull request #2250 from GSA/2199-add-pending-message-data-to-daily-and-user_daily-stats

Add pending to dashboard

app/assets/javascripts/activityChart.js

@@ -1,11 +1,14 @@
 (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'
         };
 
@@ -13,7 +16,7 @@
         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
 
@@ -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');
@@ -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')
@@ -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 maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0) + (pendingData[i] || 0)));
-            const y = d3.scaleSqrt()
+
+            const y = d3.scaleSymlog()
                 .domain([0, maxY + 2]) // Add 2 units of space at the top
                 .nice()
                 .range([height, 0]);
@@ -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')
@@ -101,12 +106,13 @@
             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);
 
@@ -114,8 +120,8 @@
 
             // Color scale
             const color = d3.scaleOrdinal()
-                .domain(['delivered', 'failed'])
+                .domain(['delivered', 'failed', 'pending'])
-                .range([COLORS.delivered, COLORS.failed]);
+                .range([COLORS.delivered, COLORS.failed, COLORS.pending]);
 
         // Create bars with animation
         const barGroups = svg.selectAll('.bar-group')
@@ -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
 
@@ -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;
@@ -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);
         });
 
@@ -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) {
@@ -214,7 +225,7 @@
                 labels = [];
                 deliveredData = [];
                 failedData = [];
-
+                pendingData = [];
                 let totalMessages = 0;
 
                 for (var dateString in data) {
@@ -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;
@@ -253,17 +266,18 @@
                     }
                 } else {
                     // If there are messages, create the chart and table
-                    createChart('#weeklyChart', labels, deliveredData, failedData);
+                    createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
-                    createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
+                    createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
-                }
+                    }
-
-                return data;
-            })
-            .catch(error => console.error('Error fetching daily stats:', error));
-    };
 
+                    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;
@@ -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) => {
@@ -329,9 +343,9 @@
 
         // Resize chart on window resize
         window.addEventListener('resize', function() {
-            if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0) {
+            if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0 && pendingData.length > 0) {
-                createChart('#weeklyChart', labels, deliveredData, failedData);
+                createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
-                createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
+                createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
             }
         });
 

app/main/views/dashboard.py

@@ -76,25 +76,24 @@ def service_dashboard(service_id):
     )
 
 
-@main.route("/daily_stats.json")
+@main.route("/services/<uuid:service_id>/daily-stats.json")
-def get_daily_stats():
+@user_has_permissions()
-    service_id = session.get("service_id")
+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")
+@main.route("/services/<uuid:service_id>/daily-stats-by-user.json")
-def get_daily_stats_by_user():
+@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"],
     )

app/templates/views/dashboard/activity-table.html

@@ -18,7 +18,7 @@
     </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>
 

package.json

@@ -61,7 +61,7 @@
     "gulp-jshint": "2.1.0",
     "gulp-prettyerror": "2.0.0",
     "gulp-uglify": "3.0.2",
-    "jest": "29.7.0",
+    "jest": "^29.7.0",
     "jest-each": "^29.2.1",
     "jest-environment-jsdom": "^29.2.2",
     "jshint": "2.13.6",

tests/javascripts/activityChart.test.js

@@ -40,7 +40,7 @@ beforeAll(done => {
       </div>
     </div>
     <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
-    <div id="activityContainer" data-currentUserName="Test User"></div>
+    <div id="activityContainer" data-currentUserName="Test User" data-currentServiceId="12345"></div>
 
     <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
   `;
@@ -64,13 +64,13 @@ test('D3 is loaded correctly', () => {
 
 test('Populates the accessible table for activity chart correctly', () => {
   const sampleData = {
-    '2024-07-01': { sms: { delivered: 50, failed: 5 } },
+    '2024-07-01': { sms: { delivered: 50, failed: 5, pending: 10 } },
-    '2024-07-02': { sms: { delivered: 60, failed: 2 } },
+    '2024-07-02': { sms: { delivered: 60, failed: 2, pending: 5 } },
-    '2024-07-03': { sms: { delivered: 70, failed: 1 } },
+    '2024-07-03': { sms: { delivered: 70, failed: 1, pending: 3 } },
-    '2024-07-04': { sms: { delivered: 80, failed: 0 } },
+    '2024-07-04': { sms: { delivered: 80, failed: 0, pending: 0 } },
-    '2024-07-05': { sms: { delivered: 90, failed: 3 } },
+    '2024-07-05': { sms: { delivered: 90, failed: 3, pending: 8 } },
-    '2024-07-06': { sms: { delivered: 100, failed: 4 } },
+    '2024-07-06': { sms: { delivered: 100, failed: 4, pending: 7 } },
-    '2024-07-07': { sms: { delivered: 110, failed: 2 } },
+    '2024-07-07': { sms: { delivered: 110, failed: 2, pending: 6 } },
   };
 
   const labels = Object.keys(sampleData).map(dateString => {
@@ -79,8 +79,9 @@ test('Populates the accessible table for activity chart correctly', () => {
   });
   const deliveredData = Object.values(sampleData).map(d => d.sms.delivered);
   const failedData = Object.values(sampleData).map(d => d.sms.failed);
+  const pendingData = Object.values(sampleData).map(d => d.sms.pending);
 
-  window.createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
+  window.createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
 
   const table = document.getElementById('weeklyTable');
   expect(table).toBeDefined();
@@ -92,6 +93,7 @@ test('Populates the accessible table for activity chart correctly', () => {
   expect(headers[0].textContent).toBe('Day');
   expect(headers[1].textContent).toBe('Delivered');
   expect(headers[2].textContent).toBe('Failed');
+  expect(headers[3].textContent).toBe('Pending');
 
   const firstRowCells = rows[1].getElementsByTagName('td');
   expect(firstRowCells[0].textContent).toBe('07/01/24');
@@ -100,58 +102,73 @@ test('Populates the accessible table for activity chart correctly', () => {
 });
 
 test('SVG element is correctly set up', () => {
-  window.createChart('#weeklyChart', ['07/01/24', '07/02/24', '07/03/24', '07/04/24', '07/05/24', '07/06/24', '07/07/24'], [50, 60, 70, 80, 90, 100, 110], [5, 2, 1, 0, 3, 4, 2]);
+  window.createChart(
+    '#weeklyChart',
+    ['07/01/24', '07/02/24', '07/03/24', '07/04/24', '07/05/24', '07/06/24', '07/07/24'],
+    [50, 60, 70, 80, 90, 100, 110],
+    [5, 2, 1, 0, 3, 4, 2],
+    [10, 5, 3, 0, 8, 7, 6]
+  );
 
   const svg = document.getElementById('weeklyChart').querySelector('svg');
   expect(svg).not.toBeNull();
-  expect(svg.getAttribute('width')).toBe('0');
+  expect(svg.querySelectorAll('.bar-group').length).toBe(3);
-  expect(svg.getAttribute('height')).toBe('400');
 });
 
 test('Check HTML content after chart creation', () => {
-  // Create sample data for the chart
   const labels = ['07/01/24', '07/02/24', '07/03/24', '07/04/24', '07/05/24', '07/06/24', '07/07/24'];
   const deliveredData = [50, 60, 70, 80, 90, 100, 110];
   const failedData = [5, 2, 1, 0, 3, 4, 2];
+  const pendingData = [10, 5, 8, 3, 6, 7, 4];
 
-  // Ensure the container has the correct width
   const container = document.getElementById('weeklyChart');
-  container.style.width = '600px'; // Force a specific width
+  container.style.width = '600px';
   const containerWidth = container.clientWidth;
   expect(containerWidth).toBeGreaterThan(0);
 
-  // Call the function to create the chart
+  window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
-  window.createChart('#weeklyChart', labels, deliveredData, failedData);
 
-  // Optionally, you can add assertions to check for specific elements
+  const svg = container.querySelector('svg');
-  expect(container.querySelector('svg')).not.toBeNull();
+  expect(svg).not.toBeNull();
-  expect(container.querySelectorAll('rect').length).toBeGreaterThan(0);
+
+  const bars = container.querySelectorAll('rect');
+  expect(bars.length).toBeGreaterThan(0);
+
+  const barGroups = svg.querySelectorAll('.bar-group');
+  expect(barGroups.length).toBe(3);
+
+  const pendingBars = Array.from(bars).filter(bar =>
+    bar.parentNode.getAttribute('fill') === '#C7CACE'
+  );
+  expect(pendingBars.length).toBe(labels.length);
 });
 
-test('Legend is visible when there are delivered or failed messages', () => {
+test('Legend includes pending when data exists', () => {
-  // Example data with delivered and failed messages
   const labels = ['Day 1', 'Day 2'];
-  const deliveredData = [10, 20];  // Mock delivered data
+  const deliveredData = [10, 20];
-  const failedData = [5, 0];  // Mock failed data
+  const failedData = [5, 0];
+  const pendingData = [3, 2];
 
-  // Call the createChart function
+  window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
-  window.createChart('#weeklyChart', labels, deliveredData, failedData);
 
-  // Check if the legend is displayed using computed style
   const legendContainer = document.querySelector('.chart-legend');
-  const legendDisplayStyle = window.getComputedStyle(legendContainer).display;
+  const legendItems = legendContainer.querySelectorAll('.legend-item');
-  expect(legendDisplayStyle).toBe('flex');
+  expect(legendItems.length).toBe(3);
-  expect(legendContainer.querySelectorAll('.legend-item').length).toBe(2); // Ensure two legend items
+
+  const pendingLegend = Array.from(legendItems).find(item =>
+    item.textContent.includes('Pending')
+  );
+  expect(pendingLegend).not.toBeNull();
 });
 
-test('Legend is hidden when there are no delivered or failed messages', () => {
+test('Legend is hidden when there are no delivered, failed, or pending messages', () => {
-  // Example data with no delivered and no failed messages
   const labels = ['Day 1', 'Day 2'];
-  const deliveredData = [0, 0];  // No delivered messages
+  const deliveredData = [0, 0];
-  const failedData = [0, 0];  // No failed messages
+  const failedData = [0, 0];
+  const pendingData = [0, 0];
 
   // Call the createChart function
-  window.createChart('#weeklyChart', labels, deliveredData, failedData);
+  window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
 
   // Check if the legend is hidden using computed style
   const legendContainer = document.querySelector('.chart-legend');
@@ -161,25 +178,48 @@ test('Legend is hidden when there are no delivered or failed messages', () => {
 
 test('Fetches data and creates chart and table correctly', async () => {
   const mockResponse = {
-    '2024-07-01': { sms: { delivered: 50, failed: 5 } },
+    '2024-07-01': { sms: { delivered: 50, failed: 5, pending: 10 } },
-    '2024-07-02': { sms: { delivered: 60, failed: 2 } },
+    '2024-07-02': { sms: { delivered: 60, failed: 2, pending: 8 } },
-    '2024-07-03': { sms: { delivered: 70, failed: 1 } },
+    '2024-07-03': { sms: { delivered: 70, failed: 1, pending: 6 } },
-    '2024-07-04': { sms: { delivered: 80, failed: 0 } },
+    '2024-07-04': { sms: { delivered: 80, failed: 0, pending: 4 } },
-    '2024-07-05': { sms: { delivered: 90, failed: 3 } },
+    '2024-07-05': { sms: { delivered: 90, failed: 3, pending: 7 } },
-    '2024-07-06': { sms: { delivered: 100, failed: 4 } },
+    '2024-07-06': { sms: { delivered: 100, failed: 4, pending: 5 } },
-    '2024-07-07': { sms: { delivered: 110, failed: 2 } },
+    '2024-07-07': { sms: { delivered: 110, failed: 2, pending: 3 } },
   };
+  const tableContainer = document.getElementById('activityContainer');
+  const currentServiceId = tableContainer.getAttribute('data-currentServiceId');
+
+
   global.fetch = jest.fn(() =>
     Promise.resolve({
-        ok: true,
+      ok: true,
-        json: () => Promise.resolve(mockResponse),
+      json: () => Promise.resolve(mockResponse),
     })
-);
+  );
 
-const data = await fetchData('service');
+  const data = await fetchData('service');
 
-expect(global.fetch).toHaveBeenCalledWith('/daily_stats.json');
+  expect(global.fetch).toHaveBeenCalledWith(`/services/${currentServiceId}/daily-stats.json`);
-expect(data).toEqual(mockResponse);
+  expect(data).toEqual(mockResponse);
+
+  const labels = Object.keys(mockResponse).map(dateString => {
+    const dateParts = dateString.split('-');
+    return `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`;
+  });
+  const deliveredData = Object.values(mockResponse).map(d => d.sms.delivered);
+  const failedData = Object.values(mockResponse).map(d => d.sms.failed);
+  const pendingData = Object.values(mockResponse).map(d => d.sms.pending);
+
+  window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
+  window.createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
+
+  const chart = document.getElementById('weeklyChart').querySelector('svg');
+  expect(chart).not.toBeNull();
+
+  const table = document.getElementById('weeklyTable');
+  expect(table).toBeDefined();
+  const rows = table.getElementsByTagName('tr');
+  expect(rows.length).toBe(8);
 });
 
 test('handleDropdownChange updates DOM for individual selection', () => {
@@ -188,7 +228,7 @@ test('handleDropdownChange updates DOM for individual selection', () => {
       <div class="chart-subtitle"></div>
     </div>
     <div id="aria-live-account"></div>
-    <div id="activityContainer" data-currentUserName="Test User"></div>
+    <div id="activityContainer" data-currentUserName="Test User" data-currentServiceId="12345"></div>
     <div id="tableActivity">
       <h2 id="table-heading"></h2>
       <table id="activity-table">