From 28bc4befbef2f2e85caf48de5248e3065b28777c Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Thu, 8 Aug 2024 16:29:35 -0400 Subject: [PATCH 1/5] Small changes to the data viz colors and chart sizing --- app/assets/javascripts/activityChart.js | 2 +- app/assets/javascripts/totalMessagesChart.js | 4 ++-- app/assets/sass/uswds/_data-visualization.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/activityChart.js b/app/assets/javascripts/activityChart.js index 75913c145..b5139f157 100644 --- a/app/assets/javascripts/activityChart.js +++ b/app/assets/javascripts/activityChart.js @@ -4,7 +4,7 @@ const COLORS = { delivered: '#0076d6', - failed: '#fa9441', + failed: '#c6cace', text: '#666' }; diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index ff409c969..755d46f6e 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -21,7 +21,7 @@ var svg = d3.select("#totalMessageChart"); var width = chartContainer.clientWidth; - var height = 64; + var height = 50; // Ensure the width is set correctly if (width === 0) { @@ -62,7 +62,7 @@ .attr("x", 0) // Initially set to 0, will be updated during animation .attr("y", 0) .attr("height", height) - .attr("fill", '#fa9441') + .attr("fill", '#c6cace') .attr("width", 0) // Start with width 0 for animation .on('mouseover', function(event) { tooltip.style('display', 'block') diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss index 6139933be..7740aad3f 100644 --- a/app/assets/sass/uswds/_data-visualization.scss +++ b/app/assets/sass/uswds/_data-visualization.scss @@ -2,7 +2,7 @@ $delivered: color('blue-50v'); $pending: color('green-cool-40v'); -$failed: color('orange-30v'); +$failed: color('gray-cool-20'); .chart-container { display: flex; From a395ad028171bcbfb090f3e635455f2f7d246fe5 Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Thu, 8 Aug 2024 16:30:34 -0400 Subject: [PATCH 2/5] Multiples of 8 --- app/assets/javascripts/totalMessagesChart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index 755d46f6e..9a0c8b325 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -21,7 +21,7 @@ var svg = d3.select("#totalMessageChart"); var width = chartContainer.clientWidth; - var height = 50; + var height = 48; // Ensure the width is set correctly if (width === 0) { From 3e472e0a972a4f975b2149c137f0b7cf9b3e08da Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Thu, 8 Aug 2024 16:35:09 -0400 Subject: [PATCH 3/5] Test update --- tests/javascripts/totalMessagesChart.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index 22bc39500..b5cf3e6a8 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -57,7 +57,7 @@ test('SVG element is correctly set up', done => { setTimeout(() => { const svg = document.getElementById('totalMessageChart'); expect(svg.getAttribute('width')).toBe('600'); - expect(svg.getAttribute('height')).toBe('64'); + expect(svg.getAttribute('height')).toBe('48'); done(); }, 1000); // Ensure enough time for the DOM updates }); From 45bc6a91732afebe96f5e531d13347b02724e55f Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Thu, 8 Aug 2024 16:53:56 -0400 Subject: [PATCH 4/5] test updates --- app/assets/javascripts/totalMessagesChart.js | 2 +- tests/javascripts/totalMessagesChart.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index 9a0c8b325..bebd6e106 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -62,7 +62,7 @@ .attr("x", 0) // Initially set to 0, will be updated during animation .attr("y", 0) .attr("height", height) - .attr("fill", '#c6cace') + .attr("fill", '#C7CACE') .attr("width", 0) // Start with width 0 for animation .on('mouseover', function(event) { tooltip.style('display', 'block') diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js index b5cf3e6a8..87c671430 100644 --- a/tests/javascripts/totalMessagesChart.test.js +++ b/tests/javascripts/totalMessagesChart.test.js @@ -159,7 +159,7 @@ test('SVG bars are created and animated correctly', done => { // Initial check 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(remainingBar).not.toBeNull(); From 832932f3b8ca75b33f7c6d77efc8c405a4277906 Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Fri, 9 Aug 2024 10:33:51 -0400 Subject: [PATCH 5/5] Updates to styles and js --- app/assets/javascripts/activityChart.js | 2 +- app/assets/javascripts/totalMessagesChart.js | 2 +- app/assets/sass/uswds/_data-visualization.scss | 4 ++++ app/templates/views/dashboard/dashboard.html | 4 ---- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/activityChart.js b/app/assets/javascripts/activityChart.js index b5139f157..75913c145 100644 --- a/app/assets/javascripts/activityChart.js +++ b/app/assets/javascripts/activityChart.js @@ -4,7 +4,7 @@ const COLORS = { delivered: '#0076d6', - failed: '#c6cace', + failed: '#fa9441', text: '#666' }; diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index bebd6e106..a3c10d7a3 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -14,7 +14,7 @@ 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 - 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 displaySent = Math.max(sms_sent, minSentValue); var displayRemaining = totalMessages - displaySent; diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss index 7740aad3f..48c5f1256 100644 --- a/app/assets/sass/uswds/_data-visualization.scss +++ b/app/assets/sass/uswds/_data-visualization.scss @@ -11,6 +11,10 @@ $failed: color('gray-cool-20'); } } +#totalMessageChartContainer { + max-width: 600px; +} + .bar { border-radius: units(0.5); &.delivered, &.usage { diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html index eeca2b213..2c1af4909 100644 --- a/app/templates/views/dashboard/dashboard.html +++ b/app/templates/views/dashboard/dashboard.html @@ -28,10 +28,6 @@
-

- What counts as 1 text message part?
- See Tracking usage. -

Activity snapshot