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

JS cleanrup

Browse Source 
Table styles and updates
Removing chart.js
This commit is contained in:
Jonathan Bobel
2024-07-11 12:59:14 -04:00
parent 74f4d730a8
commit d301502957
6 changed files with 253 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
app/assets/javascripts/dashboardVisualization.js
View File

@@ -1,267 +1,269 @@
(function (window) { (function (window) {
const COLORS = {
delivered: '#0076d6',
failed: '#fa9441',
text: '#666'
};
const FONT_SIZE = 16; if (document.getElementById('chartsArea')) {
const FONT_WEIGHT = 'bold';
const MAX_Y = 120;
// Function to create a stacked bar chart with animation using D3.js const COLORS = {
function createChart(containerId, labels, deliveredData, failedData) { delivered: '#0076d6',
const container = d3.select(containerId); failed: '#fa9441',
container.selectAll('*').remove(); // Clear any existing content text: '#666'
};
const margin = { top: 60, right: 20, bottom: 40, left: 20 }; // Adjusted top margin for legend const FONT_SIZE = 16;
const width = container.node().getBoundingClientRect().width - margin.left - margin.right; const FONT_WEIGHT = 'bold';
const height = 400 - margin.top - margin.bottom; const MAX_Y = 120;
const svg = container.append('svg') // Function to create a stacked bar chart with animation using D3.js
.attr('width', width + margin.left + margin.right) function createChart(containerId, labels, deliveredData, failedData) {
.attr('height', height + margin.top + margin.bottom) const container = d3.select(containerId);
.append('g') container.selectAll('*').remove(); // Clear any existing content
.attr('transform', `translate(${margin.left},${margin.top})`);
// Create legend const margin = { top: 60, right: 20, bottom: 40, left: 20 }; // Adjusted top margin for legend
const legendContainer = d3.select('.chart-legend'); const width = container.node().getBoundingClientRect().width - margin.left - margin.right;
legendContainer.selectAll('*').remove(); // Clear any existing legend const height = 400 - margin.top - margin.bottom;
const legendData = [ const svg = container.append('svg')
{ label: 'Delivered', color: COLORS.delivered }, .attr('width', width + margin.left + margin.right)
{ label: 'Failed', color: COLORS.failed } .attr('height', height + margin.top + margin.bottom)
]; .append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const legendItem = legendContainer.selectAll('.legend-item') // Create legend
.data(legendData) const legendContainer = d3.select('.chart-legend');
.enter() legendContainer.selectAll('*').remove(); // Clear any existing legend
.append('div')
.attr('class', 'legend-item');
legendItem.append('div') const legendData = [
.attr('class', 'legend-rect') { label: 'Delivered', color: COLORS.delivered },
.style('background-color', d => d.color) { label: 'Failed', color: COLORS.failed }
.style('display', 'inline-block') ];
.style('margin-right', '5px');
legendItem.append('span') const legendItem = legendContainer.selectAll('.legend-item')
.attr('class', 'legend-label') .data(legendData)
.text(d => d.label); .enter()
.append('div')
.attr('class', 'legend-item');
const x = d3.scaleBand() legendItem.append('div')
.domain(labels) .attr('class', 'legend-rect')
.range([0, width]) .style('background-color', d => d.color)
.padding(0.1); .style('display', 'inline-block')
.style('margin-right', '5px');
// Adjust the y-axis domain to add some space above the tallest bar legendItem.append('span')
const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0))); .attr('class', 'legend-label')
const y = d3.scaleLinear() .text(d => d.label);
.domain([0, maxY + 2]) // Add 2 units of space at the top
.nice()
.range([height, 0]);
svg.append('g') const x = d3.scaleBand()
.attr('class', 'x axis') .domain(labels)
.attr('transform', `translate(0,${height})`) .range([0, width])
.call(d3.axisBottom(x)); .padding(0.1);
// Generate the y-axis with whole numbers // Adjust the y-axis domain to add some space above the tallest bar
const yAxis = d3.axisLeft(y) const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0)));
.ticks(Math.min(maxY + 2, 10)) // Generate up to 10 ticks based on the data const y = d3.scaleLinear()
.tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis .domain([0, maxY + 2]) // Add 2 units of space at the top
.nice()
.range([height, 0]);
svg.append('g') svg.append('g')
.attr('class', 'y axis') .attr('class', 'x axis')
.call(yAxis); .attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));
// Data for stacking // Generate the y-axis with whole numbers
const stackData = labels.map((label, i) => ({ const yAxis = d3.axisLeft(y)
label: label, .ticks(Math.min(maxY + 2, 10)) // Generate up to 10 ticks based on the data
delivered: deliveredData[i], .tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis
failed: failedData[i] || 0 // Ensure there's a value for failed, even if it's 0
}));
// Stack the data svg.append('g')
const stack = d3.stack() .attr('class', 'y axis')
.keys(['delivered', 'failed']) .call(yAxis);
.order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);
const series = stack(stackData); // Data for stacking
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
}));
// Color scale // Stack the data
const color = d3.scaleOrdinal() const stack = d3.stack()
.domain(['delivered', 'failed']) .keys(['delivered', 'failed'])
.range([COLORS.delivered, COLORS.failed]); .order(d3.stackOrderNone)
.offset(d3.stackOffsetNone);
// Create tooltip const series = stack(stackData);
const tooltip = d3.select('body').append('div')
.attr('id', 'tooltip')
.style('display', 'none');
// Create bars with animation // Color scale
const barGroups = svg.selectAll('.bar-group') const color = d3.scaleOrdinal()
.data(series) .domain(['delivered', 'failed'])
.enter() .range([COLORS.delivered, COLORS.failed]);
.append('g')
.attr('class', 'bar-group')
.attr('fill', d => color(d.key));
barGroups.selectAll('rect') // Create tooltip
.data(d => d) const tooltip = d3.select('body').append('div')
.enter() .attr('id', 'tooltip')
.append('rect') .style('display', 'none');
.attr('x', d => x(d.data.label))
.attr('y', height)
.attr('height', 0)
.attr('width', x.bandwidth())
.on('mouseover', function(event, d) {
const key = d3.select(this.parentNode).datum().key;
const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
tooltip.style('display', 'block')
.html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`);
})
.on('mousemove', function(event) {
tooltip.style('left', `${event.pageX + 10}px`)
.style('top', `${event.pageY - 20}px`);
})
.on('mouseout', function() {
tooltip.style('display', 'none');
})
.transition()
.duration(1000)
.attr('y', d => y(d[1]))
.attr('height', d => y(d[0]) - y(d[1]));
}
// Function to create an accessible table // Create bars with animation
function createTable(tableId, chartType, labels, deliveredData, failedData) { const barGroups = svg.selectAll('.bar-group')
const table = document.getElementById(tableId); .data(series)
table.innerHTML = ""; // Clear previous data .enter()
.append('g')
.attr('class', 'bar-group')
.attr('fill', d => color(d.key));
const captionText = document.querySelector(`#${chartType} .chart-subtitle`).textContent; barGroups.selectAll('rect')
const caption = document.createElement('caption'); .data(d => d)
caption.textContent = captionText; .enter()
const thead = document.createElement('thead'); .append('rect')
const tbody = document.createElement('tbody'); .attr('x', d => x(d.data.label))
.attr('y', height)
// Create table header .attr('height', 0)
const headerRow = document.createElement('tr'); .attr('width', x.bandwidth())
const headers = ['Day', 'Delivered', 'Failed']; .on('mouseover', function(event, d) {
headers.forEach(headerText => { const key = d3.select(this.parentNode).datum().key;
const th = document.createElement('th'); const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
th.textContent = headerText; tooltip.style('display', 'block')
headerRow.appendChild(th); .html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`);
}); })
thead.appendChild(headerRow); .on('mousemove', function(event) {
tooltip.style('left', `${event.pageX + 10}px`)
// Create table body .style('top', `${event.pageY - 20}px`);
labels.forEach((label, index) => { })
const row = document.createElement('tr'); .on('mouseout', function() {
const cellDay = document.createElement('td'); tooltip.style('display', 'none');
cellDay.textContent = label; })
row.appendChild(cellDay); .transition()
.duration(1000)
const cellDelivered = document.createElement('td'); .attr('y', d => y(d[1]))
cellDelivered.textContent = deliveredData[index]; .attr('height', d => y(d[0]) - y(d[1]));
row.appendChild(cellDelivered);
const cellFailed = document.createElement('td');
cellFailed.textContent = failedData[index];
row.appendChild(cellFailed);
tbody.appendChild(row);
});
table.appendChild(caption);
table.appendChild(thead);
table.append(tbody);
}
function fetchData(type) {
var ctx = document.getElementById('weeklyChart');
if (!ctx) {
return;
} }
var socket = io(); // Function to create an accessible table
var eventType = type === 'service' ? 'fetch_daily_stats' : 'fetch_daily_stats_by_user'; function createTable(tableId, chartType, labels, deliveredData, failedData) {
var socketConnect = type === 'service' ? 'daily_stats_update' : 'daily_stats_by_user_update'; const table = document.getElementById(tableId);
table.innerHTML = ""; // Clear previous data
socket.on('connect', function () { const captionText = document.querySelector(`#${chartType} .chart-subtitle`).textContent;
const userId = ctx.getAttribute('data-service-id'); // Assuming user ID is the same as service ID const caption = document.createElement('caption');
console.log(`User ID: ${userId}`); caption.textContent = captionText;
socket.emit(eventType); const thead = document.createElement('thead');
}); const tbody = document.createElement('tbody');
socket.on(socketConnect, function(data) { // Create table header
console.log('Received data:', data); // Log the received data const headerRow = document.createElement('tr');
const headers = ['Day', 'Delivered', 'Failed'];
headers.forEach(headerText => {
const th = document.createElement('th');
th.textContent = headerText;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
var labels = []; // Create table body
var deliveredData = []; labels.forEach((label, index) => {
var failedData = []; const row = document.createElement('tr');
const cellDay = document.createElement('td');
cellDay.textContent = label;
row.appendChild(cellDay);
for (var dateString in data) { const cellDelivered = document.createElement('td');
// Parse the date string (assuming format YYYY-MM-DD) cellDelivered.textContent = deliveredData[index];
const dateParts = dateString.split('-'); row.appendChild(cellDelivered);
const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`; // Format to MM/DD/YY
labels.push(formattedDate); const cellFailed = document.createElement('td');
deliveredData.push(data[dateString].sms.delivered); cellFailed.textContent = failedData[index];
failedData.push(data[dateString].sms.failure !== undefined ? data[dateString].sms.failure : 0); row.appendChild(cellFailed);
}
createChart('#weeklyChart', labels, deliveredData, failedData); tbody.appendChild(row);
createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData); });
});
socket.on('error', function(data) { table.appendChild(caption);
console.log('Error:', data); table.appendChild(thead);
}); table.append(tbody);
} }
function handleDropdownChange(event) { function fetchData(type) {
const selectedValue = event.target.value; var ctx = document.getElementById('weeklyChart');
const subTitle = document.querySelector(`#chartsArea .chart-subtitle`); if (!ctx) {
const selectElement = document.getElementById('options'); return;
const selectedText = selectElement.options[selectElement.selectedIndex].text; }
if (selectedValue === "individual") { var socket = io();
subTitle.textContent = selectedText + " - Last 7 Days"; var eventType = type === 'service' ? 'fetch_daily_stats' : 'fetch_daily_stats_by_user';
fetchData('individual'); var socketConnect = type === 'service' ? 'daily_stats_update' : 'daily_stats_by_user_update';
} else if (selectedValue === "service") {
subTitle.textContent = selectedText + " - Last 7 Days"; socket.on('connect', function () {
const userId = ctx.getAttribute('data-service-id'); // Assuming user ID is the same as service ID
socket.emit(eventType);
});
socket.on(socketConnect, function(data) {
console.log('Received data:', data); // Log the received data
var labels = [];
var deliveredData = [];
var failedData = [2, 1, 0, 2, 0, 1, 0];
for (var dateString in data) {
// Parse the date string (assuming format YYYY-MM-DD)
const dateParts = dateString.split('-');
const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`; // Format to MM/DD/YY
labels.push(formattedDate);
deliveredData.push(data[dateString].sms.delivered);
// failedData.push(data[dateString].sms.failure == [0, 1, 0, 2, 0]);
}
createChart('#weeklyChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
});
socket.on('error', function(data) {
console.log('Error:', data);
});
}
function handleDropdownChange(event) {
const selectedValue = event.target.value;
const subTitle = document.querySelector(`#chartsArea .chart-subtitle`);
const selectElement = document.getElementById('options');
const selectedText = selectElement.options[selectElement.selectedIndex].text;
if (selectedValue === "individual") {
subTitle.textContent = selectedText + " - Last 7 Days";
fetchData('individual');
} else if (selectedValue === "service") {
subTitle.textContent = selectedText + " - Last 7 Days";
fetchData('service');
}
// Update ARIA live region
const liveRegion = document.getElementById('aria-live-account');
liveRegion.textContent = `Data updated for ${selectedText} - Last 7 Days`;
}
document.addEventListener('DOMContentLoaded', function() {
// Initialize weekly chart and table with service data by default
fetchData('service'); fetchData('service');
}
// Update ARIA live region // Add event listener to the dropdown
const liveRegion = document.getElementById('aria-live-account'); const dropdown = document.getElementById('options');
liveRegion.textContent = `Data updated for ${selectedText} - Last 7 Days`; dropdown.addEventListener('change', handleDropdownChange);
});
// Resize chart on window resize
window.addEventListener('resize', function() {
const selectedValue = document.getElementById('options').value;
handleDropdownChange({ target: { value: selectedValue } });
});
// // Exporting the functions for browser environment
// window.myModule = {
// createChart: l,
// createTable: r,
// handleDropdownChange: t,
// fetchData: n
// };
} }
document.addEventListener('DOMContentLoaded', function() {
// Initialize weekly 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() {
const selectedValue = document.getElementById('options').value;
handleDropdownChange({ target: { value: selectedValue } });
});
// Exporting the functions for browser environment
window.myModule = {
createChart: l,
createTable: r,
handleDropdownChange: t,
fetchData: n
};
})(window); })(window);

8
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -276,6 +276,12 @@ td.table-empty-message {
display: block; display: block;
} }
.usa-table {
th {
border-bottom: 0 !important;
}
}
.js-stick-at-bottom-when-scrolling { .js-stick-at-bottom-when-scrolling {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@@ -376,7 +382,7 @@ td.table-empty-message {
} }
} }
.table-wrapper { .table-wrapper {
overflow-x: scroll; overflow-x: auto;
} }
} }

6
app/templates/components/table.html
View File

@@ -6,7 +6,7 @@
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}"> <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
<tr> <tr>
{% for field_heading in field_headings %} {% for field_heading in field_headings %}
<th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}" width="{% if equal_length %}{{ (100 / field_headings|length)|int }}%{% endif %}"> <th class="table-field-heading{% if loop.first %}-first{% endif %}" width="{% if equal_length %}{{ (100 / field_headings|length)|int }}%{% endif %}">
{% if field_headings_visible %} {% if field_headings_visible %}
{{ field_heading }} {{ field_heading }}
{% else %} {% else %}
@@ -79,9 +79,9 @@
{%- endmacro %} {%- endmacro %}
{% macro row_heading() -%} {% macro row_heading() -%}
<th class="table-field"> <td>
{{ caller() }} {{ caller() }}
</th> </td>
{%- endmacro %} {%- endmacro %}
{% macro index_field(text=None, rowspan=None) -%} {% macro index_field(text=None, rowspan=None) -%}

25
app/templates/views/dashboard/dashboard.html
View File

@@ -26,15 +26,10 @@
Messages sent Messages sent
</h2> </h2>
<!-- <button id="sevenDaysButton">7 Days</button>
<canvas id="myChart"></canvas> -->
{{ ajax_block(partials, updates_url, 'inbox') }} {{ ajax_block(partials, updates_url, 'inbox') }}
{{ ajax_block(partials, updates_url, 'totals') }} {{ ajax_block(partials, updates_url, 'totals') }}
{{ ajax_block(partials, updates_url, 'template-statistics') }}
<h2 class="line-height-sans-2 margin-bottom-0 margin-top-4"> <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">
Activity snapshot Activity snapshot
</h2> </h2>
@@ -59,9 +54,9 @@
<div id="message"></div> <div id="message"></div>
<div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div> <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
<h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2> <h2 class="margin-top-4">Recent Batches</h2>
<div class="table-wrapper"> <div class="table-wrapper">
<table class="usa-table usa-table--borderless job-table"> <table class="usa-table job-table margin-top-0">
<thead class="table-field-headings"> <thead class="table-field-headings">
<tr> <tr>
<th scope="col" class="table-field-heading-first"> <th scope="col" class="table-field-heading-first">
@@ -89,7 +84,7 @@
{% for job in job_and_notifications[:5] %} {% for job in job_and_notifications[:5] %}
{% if job.job_id and job.notifications %} {% if job.job_id and job.notifications %}
{% set notification = job.notifications[0] %} {% set notification = job.notifications[0] %}
<tr class="table-row" id="{{ job.job_id }}"> <tr id="{{ job.job_id }}">
<td class="table-field file-name"> <td class="table-field file-name">
{{ notification.job.original_file_name[:12] if notification.job.original_file_name else 'Manually entered number'}} {{ notification.job.original_file_name[:12] if notification.job.original_file_name else 'Manually entered number'}}
<br> <br>
@@ -127,17 +122,7 @@
</table> </table>
</div> </div>
<h2 class="margin-top-4 margin-bottom-1">Message count</h2> <h2>Recent templates</h2>
{% if current_user.has_permissions('manage_service') %} {{ ajax_block(partials, updates_url, 'template-statistics') }}
<h3 class='margin-bottom-0' id="current-year"></h3>
{{ ajax_block(partials, updates_url, 'usage') }}
<p class="margin-top-0">During the pilot period, each service has an allowance of 250,000 message parts. Once this allowance is met, the
application will stop delivering messages. There's no monthly charge, no setup fee, and no procurement cost.</p>
<p class="align-with-heading-copy">
What counts as 1 text message part?<br />
See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a>.
</p>
{% endif %}
</div>
{% endblock %} {% endblock %}

3
app/templates/views/dashboard/template-statistics.html
View File

@@ -6,7 +6,8 @@
{% call(item, row_number) list_table( {% call(item, row_number) list_table(
template_statistics, template_statistics,
caption="Messages sent by template", caption="Messages sent by template",
caption_visible=True, caption_visible=False,
border_visible=True,
empty_message='', empty_message='',
field_headings=[ field_headings=[
'Template', 'Template',

10
tests/app/main/views/test_dashboard.py
View File

@@ -653,20 +653,24 @@ def test_should_not_show_recent_templates_on_dashboard_if_only_one_template_used
mock_template_stats.assert_called_once_with(SERVICE_ONE_ID, limit_days=7) mock_template_stats.assert_called_once_with(SERVICE_ONE_ID, limit_days=7)
assert stats[0]["template_name"] == "one", f"Expected template_name to be 'one', but got {stats[0]['template_name']}" assert (
stats[0]["template_name"] == "one"
), f"Expected template_name to be 'one', but got {stats[0]['template_name']}"
# Debugging: print the main content to understand where "one" is appearing # Debugging: print the main content to understand where "one" is appearing
print(f"Main content: {main}") print(f"Main content: {main}")
# Check that "one" is not in the main content # Check that "one" is not in the main content
assert stats[0]["template_name"] in main, f"Expected 'one' to not be in main, but it was found in: {main}" assert (
stats[0]["template_name"] in main
), f"Expected 'one' to not be in main, but it was found in: {main}"
# count appears as total, but not per template # count appears as total, but not per template
expected_count = stats[0]["count"] expected_count = stats[0]["count"]
assert expected_count == 50, f"Expected count to be 50, but got {expected_count}" assert expected_count == 50, f"Expected count to be 50, but got {expected_count}"
assert normalize_spaces(page.select_one("#total-sms .big-number-smaller").text) == ( assert normalize_spaces(page.select_one("#total-sms .big-number-smaller").text) == (
"{} text messages sent in the last seven days".format(expected_count) "{} text messages sent in the last seven days".format(expected_count)
) )
@freeze_time("2016-07-01 12:00") # 4 months into 2016 financial year @freeze_time("2016-07-01 12:00") # 4 months into 2016 financial year