mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-21 21:53:42 -04:00
Merge branch 'main' of https://github.com/GSA/notifications-admin into 1674-match-recent-batches-to-wireframe
# Conflicts: # tests/app/main/views/test_dashboard.py # tests/javascripts/activityChart.test.js
This commit is contained in:
@@ -185,41 +185,41 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var socket = io("/services");
|
||||
var eventType = type === 'service' ? 'fetch_daily_stats' : 'fetch_daily_stats_by_user';
|
||||
var socketConnect = type === 'service' ? 'daily_stats_update' : 'daily_stats_by_user_update';
|
||||
var daily_stats = activityChartContainer.getAttribute('data-daily-stats');
|
||||
var daily_stats_by_user = activityChartContainer.getAttribute('data-daily_stats_by_user');
|
||||
|
||||
socket.on('connect', function () {
|
||||
socket.emit(eventType);
|
||||
});
|
||||
try {
|
||||
// Choose the correct JSON string based on the type ('service' or 'user'),
|
||||
// replace single quotes with double quotes to ensure valid JSON format,
|
||||
// then parse the JSON string into a JavaScript object.
|
||||
var statsJson = type === 'service' ? daily_stats : daily_stats_by_user;
|
||||
statsJson = statsJson.replace(/'/g, '"');
|
||||
data = JSON.parse(statsJson);
|
||||
} catch (error) {
|
||||
console.error('Error parsing JSON data:', error);
|
||||
return;
|
||||
}
|
||||
var labels = [];
|
||||
var deliveredData = [];
|
||||
var failedData = [];
|
||||
|
||||
socket.on('connect_error', function(error) {
|
||||
console.error('WebSocket connection error:', error);
|
||||
});
|
||||
|
||||
socket.on(socketConnect, function(data) {
|
||||
|
||||
var labels = [];
|
||||
var deliveredData = [];
|
||||
var failedData = [];
|
||||
|
||||
for (var dateString in data) {
|
||||
// Parse the date string (assuming format YYYY-MM-DD)
|
||||
for (var dateString in data) {
|
||||
if (data.hasOwnProperty(dateString)) {
|
||||
const dateParts = dateString.split('-');
|
||||
const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`; // Format to MM/DD/YY
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
createChart('#weeklyChart', labels, deliveredData, failedData);
|
||||
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
|
||||
});
|
||||
|
||||
socket.on('error', function(data) {
|
||||
console.log('Error:', data);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error creating chart or table:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDropdownChange = function(event) {
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
(function (window) {
|
||||
|
||||
function initializeChartAndSocket() {
|
||||
var ctx = document.getElementById('myChart');
|
||||
if (!ctx) {
|
||||
return;
|
||||
}
|
||||
|
||||
var myBarChart = new Chart(ctx.getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Delivered',
|
||||
data: [],
|
||||
backgroundColor: '#0076d6',
|
||||
stack: 'Stack 0'
|
||||
},
|
||||
]
|
||||
},
|
||||
options: {
|
||||
animation: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var socket = io();
|
||||
|
||||
socket.on('connect', function() {
|
||||
socket.emit('fetch_daily_stats_by_user');
|
||||
});
|
||||
|
||||
socket.on('daily_stats_by_user_update', function(data) {
|
||||
// console.log('Data received:', data);
|
||||
var labels = [];
|
||||
var deliveredData = [];
|
||||
var failedData = [];
|
||||
|
||||
for (var date in data) {
|
||||
labels.push(date);
|
||||
deliveredData.push(data[date].sms.delivered);
|
||||
|
||||
}
|
||||
|
||||
myBarChart.data.labels = labels;
|
||||
myBarChart.data.datasets[0].data = deliveredData;
|
||||
myBarChart.update();
|
||||
});
|
||||
|
||||
socket.on('error', function(data) {
|
||||
// console.log('Error:', data);
|
||||
});
|
||||
|
||||
var sevenDaysButton = document.getElementById('sevenDaysButton');
|
||||
if (sevenDaysButton) {
|
||||
sevenDaysButton.addEventListener('click', function() {
|
||||
socket.emit('fetch_daily_stats_by_user');
|
||||
// console.log('clicked');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initializeChartAndSocket);
|
||||
|
||||
})(window);
|
||||
@@ -14,14 +14,14 @@
|
||||
document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
|
||||
|
||||
// Calculate minimum width for "Messages Sent" as 1% of the total chart width
|
||||
var minSentPercentage = 0.01; // Minimum width as a percentage of total messages (1% in this case)
|
||||
var minSentPercentage = 0.02; // Minimum width as a percentage of total messages (1% in this case)
|
||||
var minSentValue = totalMessages * minSentPercentage;
|
||||
var displaySent = Math.max(sms_sent, minSentValue);
|
||||
var displayRemaining = totalMessages - displaySent;
|
||||
|
||||
var svg = d3.select("#totalMessageChart");
|
||||
var width = chartContainer.clientWidth;
|
||||
var height = 64;
|
||||
var height = 48;
|
||||
|
||||
// Ensure the width is set correctly
|
||||
if (width === 0) {
|
||||
@@ -62,7 +62,7 @@
|
||||
.attr("x", 0) // Initially set to 0, will be updated during animation
|
||||
.attr("y", 0)
|
||||
.attr("height", height)
|
||||
.attr("fill", '#fa9441')
|
||||
.attr("fill", '#C7CACE')
|
||||
.attr("width", 0) // Start with width 0 for animation
|
||||
.on('mouseover', function(event) {
|
||||
tooltip.style('display', 'block')
|
||||
|
||||
Reference in New Issue
Block a user