Initial commit - experimentation for now

app/assets/javascripts/dataVisualization.js

@@ -0,0 +1,24 @@
+(function (window) {
+
+    // Dummy data (replace with API data)
+    const totalMessages = 1000;
+    const delivered = 800;
+    const pending = 100;
+    const failed = 100;
+
+    // Calculate percentages
+    const deliveredPercentage = (delivered / totalMessages) * 100;
+    const pendingPercentage = (pending / totalMessages) * 100;
+    const failedPercentage = (failed / totalMessages) * 100;
+
+    // Set width of bars
+    document.getElementById("delivered").style.width = `${deliveredPercentage}%`;
+    document.getElementById("pending").style.width = `${pendingPercentage}%`;
+    document.getElementById("failed").style.width = `${failedPercentage}%`;
+
+    // Update legend values
+    document.getElementById("delivered-value").innerText = delivered;
+    document.getElementById("pending-value").innerText = pending;
+    document.getElementById("failed-value").innerText = failed;
+
+})(window);

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

@@ -0,0 +1,42 @@
+@use "uswds-core" as *;
+
+.chart-container {
+  display: flex;
+  height: 100px;
+}
+
+.bar {
+  height: 30px;
+  transition: width 0.5s ease;
+  &#delivered {
+    background-color: green;
+  }
+  &#pending {
+    background-color: yellow;
+  }
+  &#failed {
+    background-color: red;
+  }
+}
+
+.legend {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin: 0 15px;
+  }
+
+  .legend-color {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+  }
+
+  .legend-label {
+    margin-right: 5px;
+  }
+}

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
@@ -12,12 +14,48 @@
 
   <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' %}
     {% endif %}
 
-    {{ ajax_block(partials, updates_url, 'upcoming') }}
+    <h2 class="font-body-xl margin-0">
+      SMS Activity
+    </h2>
+    <h3>Total 1000</h3>
+    <div class="chart-container">
+      <div class="bar" id="delivered"></div>
+      <div class="bar" id="pending"></div>
+      <div class="bar" id="failed"></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-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-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-value" id="failed-value"></div>
+      </div>
+    </div>
+
+    {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
+
+    Test:
+    You have sent
+    {{ big_number(sms_sent, 'messages of your', smaller=True) }}
+    {{ big_number(sms_free_allowance, 'free messages allowance.', smaller=True) }}
 
     <h2 class="font-body-xl margin-0">
       Messages sent
@@ -46,9 +84,8 @@
       <tbody>
         <tr>
           <td>{{ global_message_limit - daily_global_messages_remaining }}</td>
-          <td>
-            {{ daily_global_messages_remaining }}
-          </td>
+          <td>{{ daily_global_messages_remaining }}</td>
+          <td>{{ current_service.message_limit }}</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())