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

Merge pull request #1830 from GSA/1824-data-viz-changes

Browse Source 
1824 data viz changes
This commit is contained in:
Carlo Costino
2024-08-09 15:59:11 -04:00
committed by GitHub
parent 75a69dc8a6 832932f3b8
commit 7d22f23217
4 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/totalMessagesChart.js
View File

@@ -14,14 +14,14 @@
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`;
// Calculate minimum width for "Messages Sent" as 1% of the total chart width // Calculate minimum width for "Messages Sent" as 1% of the total chart width
var minSentPercentage = 0.01; // Minimum width as a percentage of total messages (1% in this case) var minSentPercentage = 0.02; // 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 svg = d3.select("#totalMessageChart"); var svg = d3.select("#totalMessageChart");
var width = chartContainer.clientWidth; var width = chartContainer.clientWidth;
var height = 64; var height = 48;
// Ensure the width is set correctly // Ensure the width is set correctly
if (width === 0) { if (width === 0) {
@@ -62,7 +62,7 @@
.attr("x", 0) // Initially set to 0, will be updated during animation .attr("x", 0) // Initially set to 0, will be updated during animation
.attr("y", 0) .attr("y", 0)
.attr("height", height) .attr("height", height)
.attr("fill", '#fa9441') .attr("fill", '#C7CACE')
.attr("width", 0) // Start with width 0 for animation .attr("width", 0) // Start with width 0 for animation
.on('mouseover', function(event) { .on('mouseover', function(event) {
tooltip.style('display', 'block') tooltip.style('display', 'block')

6
app/assets/sass/uswds/_data-visualization.scss
View File

@@ -2,7 +2,7 @@
$delivered: color('blue-50v'); $delivered: color('blue-50v');
$pending: color('green-cool-40v'); $pending: color('green-cool-40v');
$failed: color('orange-30v'); $failed: color('gray-cool-20');
.chart-container { .chart-container {
display: flex; display: flex;
@@ -11,6 +11,10 @@ $failed: color('orange-30v');
} }
} }
#totalMessageChartContainer {
max-width: 600px;
}
.bar { .bar {
border-radius: units(0.5); border-radius: units(0.5);
&.delivered, &.usage { &.delivered, &.usage {

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

@@ -28,10 +28,6 @@
<div id="message"></div> <div id="message"></div>
</div> </div>
<div id="totalMessageTable" class="margin-0"></div> <div id="totalMessageTable" class="margin-0"></div>
<p class="align-with-heading-copy margin-bottom-4">
What counts as 1 text message part?<br />
See <a class="usa-link" href="{{ url_for('.pricing') }}">Tracking usage</a>.
</p>
<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

4
tests/javascripts/totalMessagesChart.test.js
View File

@@ -57,7 +57,7 @@ test('SVG element is correctly set up', done => {
setTimeout(() => { setTimeout(() => {
const svg = document.getElementById('totalMessageChart'); const svg = document.getElementById('totalMessageChart');
expect(svg.getAttribute('width')).toBe('600'); expect(svg.getAttribute('width')).toBe('600');
expect(svg.getAttribute('height')).toBe('64'); expect(svg.getAttribute('height')).toBe('48');
done(); done();
}, 1000); // Ensure enough time for the DOM updates }, 1000); // Ensure enough time for the DOM updates
}); });
@@ -159,7 +159,7 @@ test('SVG bars are created and animated correctly', done => {
// Initial check // Initial check
const sentBar = svg.querySelector('rect[fill="#0076d6"]'); const sentBar = svg.querySelector('rect[fill="#0076d6"]');
const remainingBar = svg.querySelector('rect[fill="#fa9441"]'); const remainingBar = svg.querySelector('rect[fill="#C7CACE"]');
expect(sentBar).not.toBeNull(); expect(sentBar).not.toBeNull();
expect(remainingBar).not.toBeNull(); expect(remainingBar).not.toBeNull();