- Edited the data viz js

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

app/assets/javascripts/dataVisualization.js

@@ -1,24 +1,71 @@
 (function (window) {
 
     // Dummy data (replace with API data)
-    const totalMessages = 1000;
-    const delivered = 800;
-    const pending = 100;
-    const failed = 100;
+    const data = {
+        messageStats: {
+            totalMessages: 1000,
+            delivered: 800,
+            pending: 100,
+            failed: 100
+        },
+        dailyUsage: {
+            dailyUsage: 20,
+            dailyUsageLimit: 100
+        },
+        yearlyUsage: {
+            yearlyUsage: 2000,
+            yearlyUsageLimit: 250000
+        }
+    };
 
-    // Calculate percentages
-    const deliveredPercentage = (delivered / totalMessages) * 100;
-    const pendingPercentage = (pending / totalMessages) * 100;
-    const failedPercentage = (failed / totalMessages) * 100;
+     // Update total messages progress bar percentages
+    const messageStats = data.messageStats;
 
-    // Set width of bars
-    document.getElementById("delivered").style.width = `${deliveredPercentage}%`;
-    document.getElementById("pending").style.width = `${pendingPercentage}%`;
-    document.getElementById("failed").style.width = `${failedPercentage}%`;
+    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 legend values
-    document.getElementById("delivered-value").innerText = delivered;
-    document.getElementById("pending-value").innerText = pending;
-    document.getElementById("failed-value").innerText = failed;
+    // 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

@@ -1,42 +1,67 @@
 @use "uswds-core" as *;
 
+$delivered: color('blue-50v');
+$pending: color('green-cool-40v');
+$failed: color('orange-30v');
+
 .chart-container {
   display: flex;
-  height: 100px;
+  height: units(10);
+  &.usage {
+    height: units(5);
+  }
 }
 
 .bar {
-  height: 30px;
-  transition: width 0.5s ease;
-  &#delivered {
-    background-color: green;
+  &.delivered, &.usage {
+    background-color: $delivered;
+    margin-right: 1px;
   }
-  &#pending {
-    background-color: yellow;
+  &.pending{
+    background-color: $pending;
+    margin-right: 1px;
   }
-  &#failed {
-    background-color: red;
+  &.failed, &.remaining {
+    background-color: $failed;
   }
 }
 
 .legend {
   display: flex;
-  justify-content: center;
-  margin-top: 10px;
-
+  margin: units(1) 0;
   .legend-item {
     display: flex;
     align-items: center;
-    margin: 0 15px;
+    margin-right: units(2);
   }
-
   .legend-color {
-    width: 20px;
-    height: 20px;
-    margin-right: 5px;
+    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/templates/views/dashboard/dashboard.html

@@ -14,10 +14,6 @@
 
   <div class="dashboard margin-bottom-8">
 
-    <div>
-      <canvas id="myChart"></canvas>
-    </div>
-
     <h1 class="usa-sr-only">Dashboard</h1>
     {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
       {% include 'views/dashboard/write-first-messages.html' %}
@@ -26,36 +22,66 @@
     <h2 class="font-body-xl margin-0">
       SMS Activity
     </h2>
-    <h3>Total 1000</h3>
+    <h3 id="total-value" class="margin-y-1"></h3>
     <div class="chart-container">
-      <div class="bar" id="delivered"></div>
-      <div class="bar" id="pending"></div>
-      <div class="bar" id="failed"></div>
+      <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" style="background-color: green;"></div>
-        <div class="legend-label">Delivered</div>
+        <div class="legend-color delivered"></div>
         <div class="legend-value" id="delivered-value"></div>
       </div>
       <div class="legend-item">
-        <div class="legend-color" style="background-color: yellow;"></div>
-        <div class="legend-label">Pending</div>
+        <div class="legend-color pending"></div>
         <div class="legend-value" id="pending-value"></div>
       </div>
       <div class="legend-item">
-        <div class="legend-color" style="background-color: red;"></div>
-        <div class="legend-label">Failed</div>
+        <div class="legend-color failed"></div>
         <div class="legend-value" id="failed-value"></div>
       </div>
     </div>
 
-    {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
+    <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>
 
-    Test:
-    You have sent
-    {{ big_number(sms_sent, 'messages of your', smaller=True) }}
-    {{ big_number(sms_free_allowance, 'free messages allowance.', smaller=True) }}
+    <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
@@ -68,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
@@ -85,7 +108,6 @@
         <tr>
           <td>{{ global_message_limit - daily_global_messages_remaining }}</td>
           <td>{{ daily_global_messages_remaining }}</td>
-          <td>{{ current_service.message_limit }}</td>
         </tr>
       </tbody>
     </table>