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

1824 data viz changes

app/assets/javascripts/totalMessagesChart.js

@@ -14,14 +14,14 @@
         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;
 
         var svg = d3.select("#totalMessageChart");
         var width = chartContainer.clientWidth;
-        var height = 64;
+        var height = 48;
 
         // 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", '#C7CACE')
             .attr("width", 0) // Start with width 0 for animation
             .on('mouseover', function(event) {
                 tooltip.style('display', 'block')

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;
@@ -11,6 +11,10 @@ $failed: color('orange-30v');
   }
 }
 
+#totalMessageChartContainer {
+  max-width: 600px;
+}
+
 .bar {
   border-radius: units(0.5);
   &.delivered, &.usage {

app/templates/views/dashboard/dashboard.html

@@ -28,10 +28,6 @@
       <div id="message"></div>
     </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">
       Activity snapshot

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