Merge branch 'main' of https://github.com/GSA/notifications-admin into 975-dashboard-messages-sent

- Updated the styles
- Updated the dashboard landing page
- Added a test file

app/assets/javascripts/dataVisualization.js

@@ -0,0 +1,71 @@
+(function (window) {
+
+    // Dummy data (replace with API data)
+    const data = {
+        messageStats: {
+            totalMessages: 1000,
+            delivered: 800,
+            pending: 100,
+            failed: 100
+        },
+        dailyUsage: {
+            dailyUsage: 20,
+            dailyUsageLimit: 100
+        },
+        yearlyUsage: {
+            yearlyUsage: 2000,
+            yearlyUsageLimit: 250000
+        }
+    };
+
+     // Update total messages progress bar percentages
+    const messageStats = data.messageStats;
+
+    const messageBars = ["delivered", "pending", "failed"];
+        for (const bar of messageBars) {
+        const percentage = messageStats[bar] / messageStats.totalMessages * 100;
+        const elementId = `${bar}-bar`;
+        const element = document.getElementById(elementId);
+        element.style.width = `${parseFloat(percentage)}%`;
+    }
+
+    // Update total messages progress bar percentages
+    const dailyUsage = data.dailyUsage;
+    const dailyUsageLimit = dailyUsage.dailyUsageLimit;
+    const yearlyUsage = data.yearlyUsage;
+    const yearlyUsageLimit = yearlyUsage.yearlyUsageLimit;
+
+    function updateUsageBar(elementId, dailyUsage, dailyUsageLimit, yearlyUsage, yearlyUsageLimit) {
+        // Ensure element exists
+        if (!elementId || !document.getElementById(elementId)) {
+            console.error(`Element with ID "${elementId}" not found`);
+            return;
+        }
+
+        // Calculate percentage
+        const percentage = dailyUsage / dailyUsageLimit * 100;
+
+        // Update bar width
+        const element = document.getElementById(elementId);
+        element.style.width = `${parseFloat(percentage)}%`;
+    }
+
+    // Update usage bars
+    updateUsageBar("dailyUsage-bar", dailyUsage.dailyUsage, dailyUsageLimit);
+    updateUsageBar("dailyUsageRemaining-bar", dailyUsageLimit - dailyUsage.dailyUsage, dailyUsageLimit);
+    updateUsageBar("yearlyUsage-bar", yearlyUsage.yearlyUsage, yearlyUsageLimit);
+    updateUsageBar("yearlyUsageRemaining-bar", yearlyUsageLimit - yearlyUsage.yearlyUsage, yearlyUsageLimit);
+
+    // Update total messages legend values
+    document.getElementById("total-value").innerText = `Total: ${messageStats.totalMessages} messages`;
+    document.getElementById("delivered-value").innerText = `Delivered: ${messageStats.delivered}`;
+    document.getElementById("pending-value").innerText = `Pending: ${messageStats.pending}`;
+    document.getElementById("failed-value").innerText = `Failed: ${messageStats.failed}`;
+
+    // Update usage legend values
+    document.getElementById("daily-usage-value").innerText = dailyUsage.dailyUsage;
+    document.getElementById("daily-remaining-value").innerText = dailyUsage.dailyUsageLimit - dailyUsage.dailyUsage;
+    document.getElementById("yearly-usage-value").innerText = yearlyUsage.yearlyUsage;
+    document.getElementById("yearly-remaining-value").innerText = yearlyUsage.yearlyUsageLimit - yearlyUsage.yearlyUsage;
+
+})(window);

app/assets/sass/uswds/_data-visualization.scss

@@ -0,0 +1,67 @@
+@use "uswds-core" as *;
+
+$delivered: color('blue-50v');
+$pending: color('green-cool-40v');
+$failed: color('orange-30v');
+
+.chart-container {
+  display: flex;
+  height: units(10);
+  &.usage {
+    height: units(5);
+  }
+}
+
+.bar {
+  &.delivered, &.usage {
+    background-color: $delivered;
+    margin-right: 1px;
+  }
+  &.pending{
+    background-color: $pending;
+    margin-right: 1px;
+  }
+  &.failed, &.remaining {
+    background-color: $failed;
+  }
+}
+
+.legend {
+  display: flex;
+  margin: units(1) 0;
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin-right: units(2);
+  }
+  .legend-color {
+    width: units(3);
+    height: units(3);
+    margin-right: units(1);
+    background-color: $delivered;
+    &.pending {
+      background-color: $pending;
+    }
+    &.failed, &.remaining {
+      background-color: $failed;
+    }
+  }
+  .legend-label {
+    margin-right: 5px;
+  }
+}
+
+
+ .progress-bar {
+      width: 300px;
+      height: 20px;
+      background-color: #eee;
+      border-radius: 5px;
+      margin-bottom: 10px;
+    }
+
+    .progress-bar-inner {
+      height: 100%;
+      background-color: #007bff;
+      border-radius: inherit;
+    }

app/assets/sass/uswds/styles.scss

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

app/templates/views/dashboard/dashboard.html

@@ -3,6 +3,8 @@
 {% from "components/show-more.html" import show_more %}
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %}
 {% from "components/ajax-block.html" import ajax_block %}
+{% from "components/big-number.html" import big_number %}
+{% from "components/pill.html" import pill %}
 
 {% block service_page_title %}
   Dashboard
@@ -17,7 +19,69 @@
       {% include 'views/dashboard/write-first-messages.html' %}
     {% endif %}
 
-    {{ ajax_block(partials, updates_url, 'upcoming') }}
+    <h2 class="font-body-xl margin-0">
+      SMS Activity
+    </h2>
+    <h3 id="total-value" class="margin-y-1"></h3>
+    <div class="chart-container">
+      <div class="bar delivered" id="delivered-bar"></div>
+      <div class="bar pending" id="pending-bar"></div>
+      <div class="bar failed" id="failed-bar"></div>
+    </div>
+    <div class="legend">
+      <div class="legend-item">
+        <div class="legend-color delivered"></div>
+        <div class="legend-value" id="delivered-value"></div>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color pending"></div>
+        <div class="legend-value" id="pending-value"></div>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color failed"></div>
+        <div class="legend-value" id="failed-value"></div>
+      </div>
+    </div>
+
+    <h2 class="font-body-xl margin-top-4 margin-bottom-1">Usage</h2>
+    <h3 class="margin-y-0">Daily</h3>
+    <p class="margin-top-0 margin-bottom-1">Across all services</p>
+
+    <h3 id="total-daily-usage" class="margin-0"></h3>
+    <div class="chart-container usage">
+      <div class="bar usage" id="dailyUsage-bar"></div>
+      <div class="bar remaining" id="dailyUsageRemaining-bar"></div>
+    </div>
+    <div class="legend">
+      <div class="legend-item">
+        <div class="legend-color daily-usage"></div>
+        <div class="legend-label">Daily usage</div>
+        <div class="legend-value" id="daily-usage-value"></div>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color remaining"></div>
+        <div class="legend-label">Remaining messages today</div>
+        <div class="legend-value" id="daily-remaining-value"></div>
+      </div>
+    </div>
+
+    <h3 id="total-yearly-usage" class="margin-bottom-0">This year</h3>
+    <div class="chart-container usage">
+      <div class="bar usage" id="yearlyUsage-bar"></div>
+      <div class="bar remaining" id="yearlyUsageRemaining-bar"></div>
+    </div>
+    <div class="legend">
+      <div class="legend-item">
+        <div class="legend-color usage"></div>
+        <div class="legend-label">Yearly usage</div>
+        <div class="legend-value" id="yearly-usage-value"></div>
+      </div>
+      <div class="legend-item">
+        <div class="legend-color remaining"></div>
+        <div class="legend-label">Remaining yearly messages</div>
+        <div class="legend-value" id="yearly-remaining-value"></div>
+      </div>
+    </div>
 
     <h2 class="font-body-xl margin-0">
       Messages sent
@@ -30,9 +94,6 @@
 
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
 
-    <h2 class="margin-top-4 margin-bottom-1">Usage</h2>
-    <h3 class="margin-bottom-0">Daily</h3>
-    <p class="margin-0">Across all services</p>
     <table class="usa-table usa-table--borderless margin-top-1 margin-bottom-5">
       <caption class="usa-sr-only">
         Daily
@@ -46,9 +107,7 @@
       <tbody>
         <tr>
           <td>{{ global_message_limit - daily_global_messages_remaining }}</td>
-          <td>
-            {{ daily_global_messages_remaining }}
-          </td>
+          <td>{{ daily_global_messages_remaining }}</td>
         </tr>
       </tbody>
     </table>

gulpfile.js

@@ -127,6 +127,7 @@ const javascripts = () => {
     paths.src + 'javascripts/homepage.js',
     paths.src + 'javascripts/timeoutPopup.js',
     paths.src + 'javascripts/date.js',
+    paths.src + 'javascripts/dataVisualization.js',
     paths.src + 'javascripts/main.js',
   ])
     .pipe(plugins.prettyerror())