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

removed fetch on resize and redraw tooltip

Browse Source
This commit is contained in:
Beverly Nguyen
2024-08-14 15:33:22 -07:00
parent b9d1ae5ad8
commit cbffcff1cd
1 changed files with 19 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,6 +26,13 @@
.append('g') .append('g')
.attr('transform', `translate(${margin.left},${margin.top})`); .attr('transform', `translate(${margin.left},${margin.top})`);
let tooltip = d3.select('#tooltip');
if (tooltip.empty()) {
tooltip = d3.select('body').append('div')
.attr('id', 'tooltip')
.style('display', 'none');
}
// Create legend // Create legend
const legendContainer = d3.select('.chart-legend'); const legendContainer = d3.select('.chart-legend');
legendContainer.selectAll('*').remove(); // Clear any existing legend legendContainer.selectAll('*').remove(); // Clear any existing legend
@@ -95,10 +102,6 @@
const color = d3.scaleOrdinal() const color = d3.scaleOrdinal()
.domain(['delivered', 'failed']) .domain(['delivered', 'failed'])
.range([COLORS.delivered, COLORS.failed]); .range([COLORS.delivered, COLORS.failed]);
// Create tooltip
const tooltip = d3.select('body').append('div')
.attr('id', 'tooltip')
.style('display', 'none');
// Create bars with animation // Create bars with animation
const barGroups = svg.selectAll('.bar-group') const barGroups = svg.selectAll('.bar-group')
@@ -194,10 +197,9 @@
return response.json(); return response.json();
}) })
.then(data => { .then(data => {
console.log(data) labels = [];
var labels = []; deliveredData = [];
var deliveredData = []; failedData = [];
var failedData = [];
for (var dateString in data) { for (var dateString in data) {
if (data.hasOwnProperty(dateString)) { if (data.hasOwnProperty(dateString)) {
@@ -210,12 +212,8 @@
} }
} }
try { createChart('#weeklyChart', labels, deliveredData, failedData);
createChart('#weeklyChart', labels, deliveredData, failedData); createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
} catch (error) {
console.error('Error creating chart or table:', error);
}
}) })
.catch(error => console.error('Error fetching daily stats:', error)); .catch(error => console.error('Error fetching daily stats:', error));
}; };
@@ -226,17 +224,12 @@
const selectElement = document.getElementById('options'); const selectElement = document.getElementById('options');
const selectedText = selectElement.options[selectElement.selectedIndex].text; const selectedText = selectElement.options[selectElement.selectedIndex].text;
if (selectedValue === "individual") { subTitle.textContent = `${selectedText} - last 7 days`;
subTitle.textContent = selectedText + " - Last 7 Days"; fetchData(selectedValue);
fetchData('individual');
} else if (selectedValue === "service") {
subTitle.textContent = selectedText + " - Last 7 Days";
fetchData('service');
}
// Update ARIA live region // Update ARIA live region
const liveRegion = document.getElementById('aria-live-account'); const liveRegion = document.getElementById('aria-live-account');
liveRegion.textContent = `Data updated for ${selectedText} - Last 7 Days`; liveRegion.textContent = `Data updated for ${selectedText} - last 7 days`;
// Switch tables based on dropdown selection // Switch tables based on dropdown selection
const selectedTable = selectedValue === "individual" ? "table1" : "table2"; const selectedTable = selectedValue === "individual" ? "table1" : "table2";
@@ -261,8 +254,10 @@
// Resize chart on window resize // Resize chart on window resize
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
const selectedValue = document.getElementById('options').value; if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0) {
handleDropdownChange({ target: { value: selectedValue } }); createChart('#weeklyChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
}
}); });
// Export functions for testing // Export functions for testing