JS cleanrup

Table styles and updates
Removing chart.js

app/assets/javascripts/dashboardVisualization.js

@@ -1,4 +1,7 @@
 (function (window) {
+
+    if (document.getElementById('chartsArea')) {
+
         const COLORS = {
             delivered: '#0076d6',
             failed: '#fa9441',
@@ -191,7 +194,6 @@
 
             socket.on('connect', function () {
             const userId = ctx.getAttribute('data-service-id'); // Assuming user ID is the same as service ID
-          console.log(`User ID: ${userId}`);
             socket.emit(eventType);
             });
 
@@ -200,7 +202,7 @@
 
             var labels = [];
             var deliveredData = [];
-          var failedData = [];
+            var failedData = [2, 1, 0, 2, 0, 1, 0];
 
             for (var dateString in data) {
                 // Parse the date string (assuming format YYYY-MM-DD)
@@ -209,7 +211,7 @@
 
                 labels.push(formattedDate);
                 deliveredData.push(data[dateString].sms.delivered);
-            failedData.push(data[dateString].sms.failure !== undefined ? data[dateString].sms.failure : 0);
+                // failedData.push(data[dateString].sms.failure == [0, 1, 0, 2, 0]);
             }
 
             createChart('#weeklyChart', labels, deliveredData, failedData);
@@ -256,12 +258,12 @@
             handleDropdownChange({ target: { value: selectedValue } });
         });
 
-    // Exporting the functions for browser environment
+        // // Exporting the functions for browser environment
-    window.myModule = {
+        // window.myModule = {
-        createChart: l,
+        //     createChart: l,
-        createTable: r,
+        //     createTable: r,
-        handleDropdownChange: t,
+        //     handleDropdownChange: t,
-        fetchData: n
+        //     fetchData: n
-    };
+        // };
-
+    }
 })(window);

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -276,6 +276,12 @@ td.table-empty-message {
    display: block;
 }
 
+.usa-table {
+   th {
+      border-bottom: 0 !important;
+   }
+}
+
 .js-stick-at-bottom-when-scrolling {
    display: flex;
    align-items: flex-end;
@@ -376,7 +382,7 @@ td.table-empty-message {
       }
    }
    .table-wrapper {
-      overflow-x: scroll;
+      overflow-x: auto;
    }
 }
 

app/templates/components/table.html

@@ -6,7 +6,7 @@
     <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
       <tr>
         {% for field_heading in field_headings %}
-          <th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}" width="{% if equal_length %}{{ (100 / field_headings|length)|int }}%{% endif %}">
+          <th class="table-field-heading{% if loop.first %}-first{% endif %}" width="{% if equal_length %}{{ (100 / field_headings|length)|int }}%{% endif %}">
             {% if field_headings_visible %}
               {{ field_heading }}
             {% else %}
@@ -79,9 +79,9 @@
 {%- endmacro %}
 
 {% macro row_heading() -%}
-  <th class="table-field">
+  <td>
     {{ caller() }}
-  </th>
+  </td>
 {%- endmacro %}
 
 {% macro index_field(text=None, rowspan=None) -%}

app/templates/views/dashboard/dashboard.html

@@ -26,15 +26,10 @@
       Messages sent
     </h2>
 
-    <!-- <button id="sevenDaysButton">7 Days</button>
-    <canvas id="myChart"></canvas> -->
-
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
     {{ ajax_block(partials, updates_url, 'totals') }}
 
-    {{ ajax_block(partials, updates_url, 'template-statistics') }}
-
     <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">
       Activity snapshot
     </h2>
@@ -59,9 +54,9 @@
     <div id="message"></div>
     <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
 
-    <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
+    <h2 class="margin-top-4">Recent Batches</h2>
     <div class="table-wrapper">
-      <table class="usa-table usa-table--borderless job-table">
+      <table class="usa-table job-table margin-top-0">
         <thead class="table-field-headings">
           <tr>
             <th scope="col" class="table-field-heading-first">
@@ -89,7 +84,7 @@
             {% for job in job_and_notifications[:5] %}
               {% if job.job_id and job.notifications %}
                 {% set notification = job.notifications[0] %}
-                <tr class="table-row" id="{{ job.job_id }}">
+                <tr id="{{ job.job_id }}">
                   <td class="table-field file-name">
                     {{ notification.job.original_file_name[:12] if notification.job.original_file_name else 'Manually entered number'}}
                     <br>
@@ -127,17 +122,7 @@
       </table>
     </div>
 
-    <h2 class="margin-top-4 margin-bottom-1">Message count</h2>
+    <h2>Recent templates</h2>
-    {% if current_user.has_permissions('manage_service') %}
+    {{ ajax_block(partials, updates_url, 'template-statistics') }}
-      <h3 class='margin-bottom-0' id="current-year"></h3>
-      {{ ajax_block(partials, updates_url, 'usage') }}
-      <p class="margin-top-0">During the pilot period, each service has an allowance of 250,000 message parts. Once this allowance is met, the
-      application will stop delivering messages. There's no monthly charge, no setup fee, and no procurement cost.</p>
-      <p class="align-with-heading-copy">
-        What counts as 1 text message part?<br />
-        See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a>.
-      </p>
-    {% endif %}
-  </div>
 
 {% endblock %}

app/templates/views/dashboard/template-statistics.html

@@ -6,7 +6,8 @@
       {% call(item, row_number) list_table(
         template_statistics,
         caption="Messages sent by template",
-        caption_visible=True,
+        caption_visible=False,
+        border_visible=True,
         empty_message='',
         field_headings=[
           'Template',

tests/app/main/views/test_dashboard.py

@@ -653,13 +653,17 @@ def test_should_not_show_recent_templates_on_dashboard_if_only_one_template_used
 
     mock_template_stats.assert_called_once_with(SERVICE_ONE_ID, limit_days=7)
 
-    assert stats[0]["template_name"] == "one", f"Expected template_name to be 'one', but got {stats[0]['template_name']}"
+    assert (
+        stats[0]["template_name"] == "one"
+    ), f"Expected template_name to be 'one', but got {stats[0]['template_name']}"
 
     # Debugging: print the main content to understand where "one" is appearing
     print(f"Main content: {main}")
 
     # Check that "one" is not in the main content
-    assert stats[0]["template_name"] in main, f"Expected 'one' to not be in main, but it was found in: {main}"
+    assert (
+        stats[0]["template_name"] in main
+    ), f"Expected 'one' to not be in main, but it was found in: {main}"
 
     # count appears as total, but not per template
     expected_count = stats[0]["count"]