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

Commit before branch switch

Browse Source
This commit is contained in:
Jonathan Bobel
2024-05-31 11:29:10 -04:00
parent 8331456318
commit bbbaf592aa
5 changed files with 155 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
app/assets/javascripts/chartDashboard.js
View File

@@ -1,103 +1,143 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var canvas = document.getElementById('totalMessageChart'); var canvas = document.getElementById('totalMessageChart');
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
// Set explicit dimensions for the canvas // Set explicit dimensions for the canvas
canvas.width = canvas.parentElement.clientWidth; canvas.width = canvas.parentElement.clientWidth;
canvas.height = 100; canvas.height = 100;
var chartContainer = document.getElementById('chartContainer'); var chartContainer = document.getElementById('chartContainer');
var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent')); var chartTitle = document.getElementById('chartTitle').textContent;
var sms_remaining_messages = parseInt(chartContainer.getAttribute('data-sms-allowance-remaining')); var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent'));
var totalMessages = sms_sent + sms_remaining_messages; 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 // 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 minSentPercentage = 0.01; // Minimum width as a percentage of total messages (1% in this case)
var minSentValue = totalMessages * minSentPercentage; var minSentValue = totalMessages * minSentPercentage;
var displaySent = Math.max(sms_sent, minSentValue); var displaySent = Math.max(sms_sent, minSentValue);
var displayRemaining = totalMessages - displaySent; var displayRemaining = totalMessages - displaySent;
var myChart = new Chart(ctx, { var myChart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: [''], labels: [''],
datasets: [{ datasets: [{
label: 'Messages Sent', label: 'Messages Sent',
data: [displaySent], data: [displaySent],
backgroundColor: '#0076d6', backgroundColor: '#0076d6',
actualValue: sms_sent // Store the actual value for tooltips 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,
}, },
border: { {
display: false, label: 'Remaining',
}, data: [displayRemaining],
ticks: { backgroundColor: '#fa9441',
display: false // Hide x-axis ticks actualValue: sms_remaining_messages // Store the actual value for tooltips
} }]
}, },
y: { options: {
stacked: true, indexAxis: 'y',
grid: { scales: {
display: false, 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: { plugins: {
display: false, 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: { responsive: true,
display: false // Hide y-axis ticks layout: {
} padding: {
} left: 0, // Adjust left padding to remove extra space
}, top: 0,
plugins: { bottom: 0,
legend: { right: 0
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
} }
}, });
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 // Update the message below the chart
document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`; document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
// Ensure the chart resizes correctly on window resize // Create and populate the accessible table
window.addEventListener('resize', function() { var tableContainer = document.getElementById('totalMessageTable');
canvas.width = canvas.parentElement.clientWidth; var table = document.createElement('table');
myChart.resize(); 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();
});
});

22
app/assets/sass/uswds/_data-visualization.scss Normal file
View File

@@ -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;
}

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

@@ -589,26 +589,3 @@ details form {
border: 1px solid #face00; border: 1px solid #face00;
border-radius: 7px; 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;
}

3
app/assets/sass/uswds/styles.scss
View File

@@ -1,4 +1,5 @@
@forward "uswds-theme"; @forward "uswds-theme";
@forward "uswds"; @forward "uswds";
@forward "uswds-theme-custom-styles"; @forward "uswds-theme-custom-styles";
@forward "legacy-styles"; @forward "data-visualization";
@forward "legacy-styles";

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

@@ -32,6 +32,7 @@
<h3 class="margin-bottom-1" id="chartTitle">2024 Total Message Allowance</h3> <h3 class="margin-bottom-1" id="chartTitle">2024 Total Message Allowance</h3>
<div class="usa-sr-only" id="chartDesc">A bar chart showing the messages sent against the total message allowance for 2024 to date</div> <div class="usa-sr-only" id="chartDesc">A bar chart showing the messages sent against the total message allowance for 2024 to date</div>
<canvas id="totalMessageChart" role="img" aria-labelledby="chartTitle chartDesc" height="100"></canvas> <canvas id="totalMessageChart" role="img" aria-labelledby="chartTitle chartDesc" height="100"></canvas>
<div id="totalMessageTable"></div>
</div> </div>
<div id="message"></div> <div id="message"></div>