From bbbaf592aa4ad136570b76492c409a0a9ca849f6 Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Fri, 31 May 2024 11:29:10 -0400 Subject: [PATCH] Commit before branch switch --- app/assets/javascripts/chartDashboard.js | 220 +++++++++++------- .../sass/uswds/_data-visualization.scss | 22 ++ .../uswds/_uswds-theme-custom-styles.scss | 23 -- app/assets/sass/uswds/styles.scss | 3 +- app/templates/views/dashboard/dashboard.html | 1 + 5 files changed, 155 insertions(+), 114 deletions(-) create mode 100644 app/assets/sass/uswds/_data-visualization.scss diff --git a/app/assets/javascripts/chartDashboard.js b/app/assets/javascripts/chartDashboard.js index 505e3d926..e01854a03 100644 --- a/app/assets/javascripts/chartDashboard.js +++ b/app/assets/javascripts/chartDashboard.js @@ -1,103 +1,143 @@ document.addEventListener('DOMContentLoaded', function () { - var canvas = document.getElementById('totalMessageChart'); - var ctx = canvas.getContext('2d'); - // Set explicit dimensions for the canvas - canvas.width = canvas.parentElement.clientWidth; - canvas.height = 100; + var canvas = document.getElementById('totalMessageChart'); + var ctx = canvas.getContext('2d'); + // Set explicit dimensions for the canvas + canvas.width = canvas.parentElement.clientWidth; + canvas.height = 100; - var chartContainer = document.getElementById('chartContainer'); - var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent')); - var sms_remaining_messages = parseInt(chartContainer.getAttribute('data-sms-allowance-remaining')); - var totalMessages = sms_sent + sms_remaining_messages; + var chartContainer = document.getElementById('chartContainer'); + var chartTitle = document.getElementById('chartTitle').textContent; + var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent')); + var sms_remaining_messages = parseInt(chartContainer.getAttribute('data-sms-allowance-remaining')); + var totalMessages = sms_sent + sms_remaining_messages; - // Set a minimum value for "Messages Sent" based on a percentage of the remaining messages - var minSentPercentage = 0.01; // 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; + // Set a minimum value for "Messages Sent" based on a percentage of the remaining messages + var minSentPercentage = 0.01; // 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 myChart = new Chart(ctx, { - type: 'bar', - data: { - labels: [''], - datasets: [{ - label: 'Messages Sent', - data: [displaySent], - backgroundColor: '#0076d6', - actualValue: sms_sent // Store the actual value for tooltips - }, - { - label: 'Remaining', - data: [displayRemaining], - backgroundColor: '#fa9441', - actualValue: sms_remaining_messages // Store the actual value for tooltips - }] - }, - options: { - indexAxis: 'y', - scales: { - x: { - beginAtZero: true, - stacked: true, - max: totalMessages, - grid: { - display: false, + var myChart = new Chart(ctx, { + type: 'bar', + data: { + labels: [''], + datasets: [{ + label: 'Messages Sent', + data: [displaySent], + backgroundColor: '#0076d6', + actualValue: sms_sent // Store the actual value for tooltips }, - border: { - display: false, - }, - ticks: { - display: false // Hide x-axis ticks - } + { + label: 'Remaining', + data: [displayRemaining], + backgroundColor: '#fa9441', + actualValue: sms_remaining_messages // Store the actual value for tooltips + }] }, - y: { - stacked: true, - grid: { - display: false, + options: { + indexAxis: 'y', + scales: { + x: { + beginAtZero: true, + stacked: true, + max: totalMessages, + grid: { + display: false, + }, + border: { + display: false, + }, + ticks: { + display: false // Hide x-axis ticks + } + }, + y: { + stacked: true, + grid: { + display: false, + }, + border: { + display: false, + }, + ticks: { + display: false // Hide y-axis ticks + } + } }, - border: { - display: false, + plugins: { + legend: { + display: false + }, + tooltip: { + callbacks: { + label: function(tooltipItem) { + var dataset = tooltipItem.dataset; + return dataset.label + ': ' + dataset.actualValue.toLocaleString(); + } + } + }, + title: { + display: false // Hide the Chart.js title and use custom title + } }, - ticks: { - display: false // Hide y-axis ticks - } - } - }, - plugins: { - legend: { - display: false - }, - tooltip: { - callbacks: { - label: function(tooltipItem) { - var dataset = tooltipItem.dataset; - return dataset.label + ': ' + dataset.actualValue.toLocaleString(); + responsive: true, + layout: { + padding: { + left: 0, // Adjust left padding to remove extra space + top: 0, + bottom: 0, + right: 0 } } - }, - title: { - display: false // Hide the Chart.js title and use custom title } - }, - responsive: true, - // maintainAspectRatio: false, - layout: { - padding: { - left: 0, // Adjust left padding to remove extra space - top: 0, - bottom: 0, - right: 0 - } - } - } - }); + }); - // Update the message below the chart - document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`; + // Update the message below the chart + document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`; - // Ensure the chart resizes correctly on window resize - window.addEventListener('resize', function() { - canvas.width = canvas.parentElement.clientWidth; - myChart.resize(); - }); -}); + // Create and populate the accessible table + var tableContainer = document.getElementById('totalMessageTable'); + var table = document.createElement('table'); + table.className = 'usa-sr-only'; + + var caption = document.createElement('caption'); + caption.textContent = chartTitle; + table.appendChild(caption); + + var thead = document.createElement('thead'); + var theadRow = document.createElement('tr'); + var thLabel = document.createElement('th'); + thLabel.textContent = 'Label'; + var thValue = document.createElement('th'); + thValue.textContent = 'Value'; + theadRow.appendChild(thLabel); + theadRow.appendChild(thValue); + thead.appendChild(theadRow); + table.appendChild(thead); + + var tbody = document.createElement('tbody'); + var tableData = [ + { label: 'Messages Sent', value: sms_sent.toLocaleString() }, + { label: 'Remaining', value: sms_remaining_messages.toLocaleString() } + ]; + + tableData.forEach(function(rowData) { + var row = document.createElement('tr'); + var cellLabel = document.createElement('td'); + var cellValue = document.createElement('td'); + cellLabel.textContent = rowData.label; + cellValue.textContent = rowData.value; + row.appendChild(cellLabel); + row.appendChild(cellValue); + tbody.appendChild(row); + }); + + table.appendChild(tbody); + tableContainer.appendChild(table); + + // Ensure the chart resizes correctly on window resize + window.addEventListener('resize', function() { + canvas.width = canvas.parentElement.clientWidth; + myChart.resize(); + }); + }); diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss new file mode 100644 index 000000000..fae104286 --- /dev/null +++ b/app/assets/sass/uswds/_data-visualization.scss @@ -0,0 +1,22 @@ +@use "uswds-core" as *; + +#chartContainer { + width: 100%; +} + +#totalMessageChart { + width: 100%; + margin-left: units(-1); +} + +#message { + text-align: left; + font-size: units(2); +} + +.chart-title { + text-align: left; + width: 100%; + font-size: units(3); + font-weight: bold; +} diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index e66db9fa0..d66e276bd 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -589,26 +589,3 @@ details form { border: 1px solid #face00; border-radius: 7px; } - -// Data Viz - -#chartContainer { - width: 100%; -} - -#myChart { - width: 100%; - margin-left: units(-1); -} - -#message { - text-align: left; - font-size: units(2); -} - -.chart-title { - text-align: left; - width: 100%; - font-size: units(3); - font-weight: bold; -} diff --git a/app/assets/sass/uswds/styles.scss b/app/assets/sass/uswds/styles.scss index 3ef97c065..cc6e14f4d 100644 --- a/app/assets/sass/uswds/styles.scss +++ b/app/assets/sass/uswds/styles.scss @@ -1,4 +1,5 @@ @forward "uswds-theme"; @forward "uswds"; @forward "uswds-theme-custom-styles"; -@forward "legacy-styles"; \ No newline at end of file +@forward "data-visualization"; +@forward "legacy-styles"; diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html index c431f0955..1f192ac4b 100644 --- a/app/templates/views/dashboard/dashboard.html +++ b/app/templates/views/dashboard/dashboard.html @@ -32,6 +32,7 @@

2024 Total Message Allowance

A bar chart showing the messages sent against the total message allowance for 2024 to date
+