Make template graphs look consistent with page

The graphs of template usage feel a bit weird to me now.

1. They are counts of messages, but the numbers are very small
   not big like we do everywhere else (eg the counts on a job)

2. There’s a lot of blue, especially for something that you can’t
   click

This commit makes the numbers bigger and the bar chart grey.

app/assets/stylesheets/views/dashboard.scss

@@ -26,16 +26,16 @@
   width: 100%;
   margin-bottom: $gutter-half;
   height: $gutter-half;
-  color: $govuk-blue;
+  color: $text-colour;
 
   span {
     box-sizing: border-box;
-    display: block;
-    background: $govuk-blue;
-    color: $white;
-    height: $gutter-half;
-    padding-left: 5px;
-    padding-right: 5px;
+    display: inline-block;
+    overflow: visible;
+    background: $panel-colour;
+    color: $black;
+    padding: 5px 5px 2px 5px;
+    text-indent: -2px;
     margin: 3px 0 5px 0;
     transition: width 0.6s ease-in-out;
   }
@@ -49,7 +49,7 @@
     color: $govuk-blue;
     max-width: 100%;
     background: $white;
-    margin-bottom: $gutter;
+    margin-bottom: $gutter-two-thirds;
   }
 
 }

app/main/views/jobs.py

@@ -26,6 +26,7 @@ from app.utils import (
     generate_previous_next_dict,
     user_has_permissions,
     generate_notifications_csv)
+from app.statistics_utils import sum_of_statistics
 
 
 def _parse_filter_args(filter_dict):

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

@@ -1,26 +1,40 @@
 {% from "components/message-count-label.html" import message_count_label %}
+{% from "components/big-number.html" import big_number %}
 
 <dl>
   {% for item in template_statistics %}
     <div class="grid-row">
-      
+
       <dt class="column-half">
         <span class="spark-bar-label">
           <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">{{ item.template.name }}</a>
+          <span class="file-list-hint">
+            {{ message_count_label(1, item.template.template_type, suffix='template')|capitalize }}
+          </span>
         </span>
       </dt>
 
       <dd class="column-half">
         {% if template_statistics|length > 1 %}
-        <span class="spark-bar">
-          <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%"></span>    
-          {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
-        </span>
+          <span class="spark-bar">
+            <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%">
+              {{ big_number(
+                item.usage_count,
+                smallest=True
+              ) }}
+              <span class="visually-hidden">
+                {{ message_count_label(item.usage_count, item.template.template_type) }}
+              </span>
+            </span>
+          </span>
         {% else %}
-          {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
+          <span class="heading-small">
+            {{ item.usage_count }}
+            {{ message_count_label(item.usage_count, item.template.template_type) }}
+          </span>
         {% endif %}
       </dd>
 
     </div>
   {% endfor %}
-</dl>
+</dl>

app/templates/views/notifications.html

@@ -3,7 +3,7 @@
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/pill.html" import pill %}
-{% from "components/message-count-label.html" import message_count_label %}
+{% from "components/message-count-label.html" import message_count_label, recipient_count_label %}
 
 {% block page_title %}
   {{ message_count_label(99, message_type, suffix='') | capitalize }} – GOV.UK Notify

tests/app/main/views/test_dashboard.py

@@ -91,11 +91,15 @@ def test_should_show_recent_templates_on_dashboard(app_,
 
         assert len(table_rows) == 2
 
-        assert page.find_all('dt')[0].text.strip() == 'Pickle feet'
-        assert page.find_all('dd')[0].text.strip() == '206 text messages sent'
+        assert 'Pickle feet' in page.find_all('dt')[0].text
+        assert 'Text message template' in page.find_all('dt')[0].text
+        assert '206' in page.find_all('dd')[0].text
+        assert 'text messages sent' in page.find_all('dd')[0].text
 
-        assert page.find_all('dt')[1].text.strip() == 'Brine Shrimp'
-        assert page.find_all('dd')[1].text.strip() == '13 text messages sent'
+        assert 'Brine Shrimp' in page.find_all('dt')[1].text
+        assert 'Text message template' in page.find_all('dt')[1].text
+        assert '13' in page.find_all('dd')[1].text
+        assert 'text messages sent' in page.find_all('dd')[1].text
 
 
 def test_should_show_all_templates_on_template_statistics_page(
@@ -129,11 +133,15 @@ def test_should_show_all_templates_on_template_statistics_page(
 
         assert len(table_rows) == 2
 
-        assert page.find_all('dt')[0].text.strip() == 'Pickle feet'
-        assert page.find_all('dd')[0].text.strip() == '206 text messages sent'
+        assert 'Pickle feet' in page.find_all('dt')[0].text
+        assert 'Text message template' in page.find_all('dt')[0].text
+        assert '206' in page.find_all('dd')[0].text
+        assert 'text messages sent' in page.find_all('dd')[0].text
 
-        assert page.find_all('dt')[1].text.strip() == 'Brine Shrimp'
-        assert page.find_all('dd')[1].text.strip() == '13 text messages sent'
+        assert 'Brine Shrimp' in page.find_all('dt')[1].text
+        assert 'Text message template' in page.find_all('dt')[1].text
+        assert '13' in page.find_all('dd')[1].text
+        assert 'text messages sent' in page.find_all('dd')[1].text
 
 
 def _test_dashboard_menu(mocker, app_, usr, service, permissions):

tests/app/main/views/test_jobs.py

@@ -32,6 +32,7 @@ def test_should_show_page_for_one_job(
     service_one,
     active_user_with_permissions,
     mock_get_service_template,
+    mock_get_service_statistics,
     mock_get_job,
     mocker,
     mock_get_notifications,
@@ -57,6 +58,7 @@ def test_should_show_updates_for_one_job_as_json(
     service_one,
     active_user_with_permissions,
     mock_get_notifications,
+    mock_get_service_statistics,
     mock_get_job,
     mocker,
     fake_uuid
@@ -112,6 +114,7 @@ def test_can_show_notifications(
     service_one,
     active_user_with_permissions,
     mock_get_notifications,
+    mock_get_service_statistics,
     mocker,
     message_type,
     page_title,
@@ -166,11 +169,14 @@ def test_can_show_notifications(
         assert 'text/csv' in csv_response.headers['Content-Type']
 
 
-def test_should_show_notifications_for_a_service_with_next_previous(app_,
-                                                                    service_one,
-                                                                    active_user_with_permissions,
-                                                                    mock_get_notifications_with_previous_next,
-                                                                    mocker):
+def test_should_show_notifications_for_a_service_with_next_previous(
+    app_,
+    service_one,
+    active_user_with_permissions,
+    mock_get_notifications_with_previous_next,
+    mock_get_service_statistics,
+    mocker
+):
     with app_.test_request_context():
         with app_.test_client() as client:
             client.login(active_user_with_permissions, mocker, service_one)