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

Creating a mid-width for the sent messages area so it's visible if the number is lower than 1%

Browse Source
This commit is contained in:
Jonathan Bobel
2024-05-24 13:34:05 -04:00
parent 04f0a173ac
commit 5f4804f65a
2 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,19 +10,27 @@ document.addEventListener('DOMContentLoaded', function () {
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;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [''],
datasets: [{
label: 'Messages Sent',
data: [sms_sent],
data: [displaySent],
backgroundColor: '#0076d6',
actualValue: sms_sent // Store the actual value for tooltips
},
{
label: 'Remaining',
data: [sms_remaining_messages],
data: [displayRemaining],
backgroundColor: '#fa9441',
actualValue: sms_remaining_messages // Store the actual value for tooltips
}]
},
options: {
@@ -62,7 +70,8 @@ document.addEventListener('DOMContentLoaded', function () {
tooltip: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.dataset.label + ': ' + tooltipItem.raw.toLocaleString();
var dataset = tooltipItem.dataset;
return dataset.label + ': ' + dataset.actualValue.toLocaleString();
}
}
},
@@ -71,11 +80,13 @@ document.addEventListener('DOMContentLoaded', function () {
}
},
responsive: true,
// maintainAspectRatio: false,
layout: {
padding: {
left: -10, // Adjust left padding to remove extra space
left: 0, // Adjust left padding to remove extra space
top: 0,
bottom: 0
bottom: 0,
right: 0
}
}
}
@@ -84,4 +95,9 @@ document.addEventListener('DOMContentLoaded', function () {
// 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();
});
});