Merge pull request #558 from alphagov/template-stats-2

Make template usage on dashboard easier to scan

app/assets/stylesheets/components/big-number.scss

@@ -1,19 +1,29 @@
 %big-number,
 .big-number {
 
-  @include bold-48;
+  display: block;
+
+  &-number {
+    @include bold-48;
+    display: block;
+  }
 
   &-label {
     @include core-19;
-    display: block;
-    padding-bottom: $gutter-half;
+    display: inline-block;
+    padding-bottom: 10px;
   }
 
 }
 
 .big-number-smaller {
+
   @extend %big-number;
-  @include bold-36($tabular-numbers: true);
+
+  .big-number-number {
+    @include bold-36($tabular-numbers: true);
+  }
+
 }
 
 .big-number-with-status {
@@ -22,25 +32,12 @@
   background: $text-colour;
   color: $white;
   position: relative;
-
-  &-show-more-link {
-    @include core-16;
-    display: block;
-    padding: 0.75em 0 0.5625em 0;
-    margin-bottom: $gutter-half;
-    text-align: center;
-    border-bottom: 1px solid $border-colour;
-
-    &:focus {
-      outline: none;
-      color: $text-colour;
-      border-bottom: 1px solid $brown;
-    }
-  }
+  margin-bottom: $gutter-half;
 
   .big-number {
     padding: 15px;
     position: relative;
+    
   }
 
   .big-number-overlay-link {
@@ -66,6 +63,8 @@
     &:link,
     &:visited {
       color: $white;
+      text-decoration: none;
+      border-bottom: 1px solid $white;
     }
 
   }
@@ -85,6 +84,8 @@
       &:active,
       &:hover {
         color: $white;
+        text-decoration: none;
+        border-bottom: 1px solid $white;
       }
 
     }

app/assets/stylesheets/components/show-more.scss

@@ -0,0 +1,34 @@
+.show-more {
+
+  @include core-16;
+  display: block;
+  padding: 0 0;
+  margin: $gutter-half 0 $gutter 0;
+  text-align: center;
+  border-top: 1px solid $border-colour;
+
+  &:focus {
+    
+    outline: none;
+    color: $text-colour;
+    box-shadow: 0 -10px 0 0 $yellow;
+    border-color: $yellow;
+
+    span {
+      background: $yellow;
+      outline: none;
+      border-color: $text-colour;
+    }
+
+  }
+
+  span {
+    position: relative;
+    top: -11px;
+    outline: 10px solid white;
+    background: $white;
+    display: inline-block;
+    border-bottom: 1px solid $light-blue;
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -50,6 +50,7 @@ $path: '/static/images/';
 @import 'components/vendor/previous-next-navigation';
 @import 'components/pill';
 @import 'components/secondary-button';
+@import 'components/show-more';
 
 @import 'views/job';
 @import 'views/edit-template';

app/assets/stylesheets/views/dashboard.scss

@@ -5,16 +5,45 @@
 }
 
 .keyline-block {
-
   border-top: 1px solid $border-colour;
   padding-top: $gutter-half;
+}
 
-  &-show-more-link {
-    @include core-16;
-    border-top: 1px solid $border-colour;
-    border-bottom: 1px solid $border-colour;
-    padding: 0.75em 0 0.5625em 0;
-    text-align: center;
+.spark-bar {
+
+  @include core-16;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  text-align: right;
+  margin-bottom: $gutter-half;
+  height: $gutter-half;
+  color: $govuk-blue;
+  text-align: left;
+  color: $govuk-blue;
+
+  span {
+    box-sizing: border-box;
+    display: block;
+    background: $govuk-blue;
+    color: $white;
+    height: $gutter-half;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin: 3px 0 5px 0;
+    transition: width 0.6s ease-in-out;
+  }
+
+  &-label {
+    @include bold-19;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $govuk-blue;
+    max-width: 100%;
+    background: $white;
+    margin-bottom: $gutter;
   }
 
 }

app/main/views/dashboard.py

@@ -71,10 +71,14 @@ def service_dashboard_updates(service_id):
 @login_required
 @user_has_permissions('view_activity', admin_override=True)
 def template_history(service_id):
+    template_statistics = aggregate_usage(
+        template_statistics_client.get_template_statistics_for_service(service_id)
+    )
     return render_template(
         'views/dashboard/all-template-statistics.html',
-        template_statistics=aggregate_usage(
-            template_statistics_client.get_template_statistics_for_service(service_id)
+        template_statistics=template_statistics,
+        most_used_template_count=max(
+            [row['usage_count'] for row in template_statistics] or [0]
         )
     )
 
@@ -197,12 +201,17 @@ def get_dashboard_statistics_for_service(service_id):
     sms_sent = usage['data'].get('sms_count', 0)
     emails_sent = usage['data'].get('email_count', 0)
 
+    template_statistics = aggregate_usage(
+        template_statistics_client.get_template_statistics_for_service(service_id, limit_days=7)
+    )
+
     return {
         'statistics': add_rates_to(sum_of_statistics(
             statistics_api_client.get_statistics_for_service(service_id, limit_days=7)['data']
         )),
-        'template_statistics': aggregate_usage(
-            template_statistics_client.get_template_statistics_for_service(service_id, limit_days=7)
+        'template_statistics': template_statistics,
+        'most_used_template_count': max(
+            [row['usage_count'] for row in template_statistics] or [0]
         ),
         'emails_sent': emails_sent,
         'sms_free_allowance': sms_free_allowance,

app/templates/components/big-number.html

@@ -1,14 +1,16 @@
 {% macro big_number(number, label, label_link=None, currency='', smaller=False) %}
   <div class="big-number{% if smaller %}-smaller{% endif %}">
-    {% if number is number %}
-      {% if currency %}
-        {{ "{}{:,.2f}".format(currency, number) }}
+    <div class="big-number-number">
+      {% if number is number %}
+        {% if currency %}
+          {{ "{}{:,.2f}".format(currency, number) }}
+        {% else %}
+          {{ "{}{:,}".format(currency, number) }}
+        {% endif %}
       {% else %}
-        {{ "{}{:,}".format(currency, number) }}
+        {{ number }}
       {% endif %}
-    {% else %}
-      {{ number }}
-    {% endif %}
+    </div>
     {% if label_link %}
       <a class="big-number-label" href="{{ label_link }}">{{ label }}</a>
       <a class="big-number-overlay-link" href="{{ label_link }}" aria-hidden="true"></a>

app/templates/components/message-count-label.html

@@ -0,0 +1,15 @@
+{% macro message_count_label(count, template_type) -%}
+  {%- if template_type == 'sms' -%}
+    {%- if count == 1 -%}
+      text message
+    {%- else -%}
+      text messages
+    {%- endif -%}
+  {%- elif template_type == 'email' -%}
+    {%- if count == 1 -%}
+      email
+    {%- else -%}
+      emails
+    {%- endif -%}  
+  {%- endif %} sent
+{%- endmacro %}

app/templates/components/show-more.html

@@ -0,0 +1,3 @@
+{% macro show_more(url, label) %}
+  <a href="{{ url }}" class="show-more"><span>{{ label }}</span></a>
+{% endmacro %}

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

@@ -5,13 +5,16 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-  <h1 class='heading-large'>
-  	Templates sent this year
-  </h1>
-  <p>
-	1 April 2016 to date
-  </p>
-  {% with period = "" %}
-	  {% include 'views/dashboard/template-statistics.html' %}
-  {% endwith %}
+
+  <div class="grid-row bottom-gutter">
+    <div class="column-half">
+      <h2 class="heading-large">Templates sent</h2>
+    </div>
+    <div class="column-half">
+      <span class="align-with-heading-copy">1 April 2016 to date</span>
+    </div>
+  </div>
+
+  {% include 'views/dashboard/template-statistics.html' %}
+
 {% endblock %}

app/templates/views/dashboard/dashboard.html

@@ -8,6 +8,8 @@
 
   <div class="dashboard">
 
+    <h1 class="visuallyhidden">Dashboard</h1>
+
     {% if not templates and current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], any_=True) %}
       {% include 'views/dashboard/get-started.html' %}
     {% elif current_user.has_permissions([
@@ -20,9 +22,9 @@
       {% include 'views/dashboard/no-permissions-banner.html' %}
     {% endif %}
 
-    <h1 class="heading-medium">
+    <h2 class="heading-medium">
       In the last 7 days
-    </h1>
+    </h2>
     {% include 'views/dashboard/today.html' %}
 
   </div>

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

@@ -1,23 +1,26 @@
-{% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading %}
+{% from "components/message-count-label.html" import message_count_label %}
 
-{% call(item, row_number) list_table(
-  template_statistics,
-  caption="Templates",
-  caption_visible=True,
-  empty_message='You haven’t used any templates {}'.format(period),
-  field_headings=['Template', hidden_field_heading('Type'), hidden_field_heading('Messages sent')],
-  field_headings_visible=False
-) %}
-  {% call field() %}
-    <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">
-      {{ item.template.name }}
-    </a>
-  {% endcall %}
-  {% call field(align='right') %}
-    {{ item.usage_count }}
-  {% endcall %}
-  {% call field() %}
-    {{'text messages sent' if 'sms' == item.template.template_type else 'emails sent'}}
-  {% endcall %}
-{% endcall %}
+<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>
+      </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>
+        {% else %}
+          {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
+        {% endif %}
+      </dd>
+
+    </div>
+  {% endfor %}
+</dl>

app/templates/views/dashboard/today.html

@@ -1,4 +1,6 @@
 {% from "components/big-number.html" import big_number, big_number_with_status %}
+{% from "components/show-more.html" import show_more %}
+{% from "components/message-count-label.html" import message_count_label %}
 
 <div
   data-module="update-content"
@@ -11,7 +13,7 @@
     <div class="column-half">
       {{ big_number_with_status(
         statistics.emails_requested,
-        'email' if statistics.emails_requested == 1 else 'emails',
+        message_count_label(statistics.emails_requested, 'email'),
         statistics.emails_failed,
         statistics.get('emails_failure_rate', 0.0),
         statistics.get('emails_failure_rate', 0)|float > 3,
@@ -22,7 +24,7 @@
     <div class="column-half">
       {{ big_number_with_status(
         statistics.sms_requested,
-        'text message' if statistics.sms_requested == 1 else 'text messages',
+        message_count_label(statistics.sms_requested, 'sms'),
         statistics.sms_failed,
         statistics.get('sms_failure_rate', 0.0),
         statistics.get('sms_failure_rate', 0)|float > 3,
@@ -31,18 +33,23 @@
       ) }}
     </div>
     <div class="column-whole">
-      <a class="big-number-with-status-show-more-link" href="{{ url_for('.weekly', service_id=current_service.id) }}">Compare to previous weeks</a>
+      {{ show_more(
+        url_for('.weekly', service_id=current_service.id),
+        'Compare to previous weeks'
+      ) }}
     </div>
   </div>
-  {% with period = "in the last 7 days" %}
+  
+  {% if template_statistics|length %}
     {% include 'views/dashboard/template-statistics.html' %}
-  {% endwith %}
-  <p class='table-show-more-link'>
-    <a href="{{ url_for('.template_history', service_id=current_service.id) }}">See all templates sent this year</a>
-  </p>
+    {{ show_more(
+      url_for('.template_history', service_id=current_service.id),
+      'See all templates sent this year'
+    ) }}
+  {% endif %}
 
   {% if current_user.has_permissions(['manage_settings'], admin_override=True) %}
-    <h2 class='heading-medium'>Usage</h2>   
+    <h2 class='heading-medium'>This year</h2>   
 
     <div class='grid-row'>
       <div class='column-half'>
@@ -65,9 +72,10 @@
         </div>
       </div>
     </div>
-    <div class="keyline-block-show-more-link">
-      <a href="{{ url_for(".usage", service_id=current_service['id']) }}">See breakdown</a>
-    </div>
+    {{ show_more(
+      url_for(".usage", service_id=current_service['id']),
+      'See usage breakdown'
+    ) }}
   {% endif %}
 
 </div>

tests/app/main/views/test_dashboard.py

@@ -86,21 +86,16 @@ def test_should_show_recent_templates_on_dashboard(app_,
         headers = [header.text.strip() for header in page.find_all('h2') + page.find_all('h1')]
         assert 'Test Service' in headers
         assert 'In the last 7 days' in headers
-        template_usage_headers = [th.text.strip() for th in page.thead.find_all('th')]
-        for th in ['Template', 'Type', 'Messages sent']:
-            assert th in template_usage_headers
-        table_rows = page.tbody.find_all('tr')
+
+        table_rows = page.find_all('dt')
 
         assert len(table_rows) == 2
-        first_row = page.tbody.find_all('tr')[0]
-        table_data = first_row.find_all('td')
-        assert len(table_data) == 3
-        assert table_data[1].text.strip() == '206'
 
-        second_row = page.tbody.find_all('tr')[1]
-        table_data = second_row.find_all('td')
-        assert len(table_data) == 3
-        assert table_data[1].text.strip() == '13'
+        assert page.find_all('dt')[0].text.strip() == 'Pickle feet'
+        assert page.find_all('dd')[0].text.strip() == '206 text messages sent'
+
+        assert page.find_all('dt')[1].text.strip() == 'Brine Shrimp'
+        assert page.find_all('dd')[1].text.strip() == '13 text messages sent'
 
 
 def test_should_show_all_templates_on_template_statistics_page(
@@ -130,20 +125,15 @@ def test_should_show_all_templates_on_template_statistics_page(
         mock_template_stats.assert_called_once_with(SERVICE_ONE_ID)
 
         page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
-        headers = [header.text.strip() for header in page.find_all('h2')]
-        table_rows = page.tbody.find_all('tr')
+        table_rows = page.find_all('dt')
 
         assert len(table_rows) == 2
 
-        first_row = page.tbody.find_all('tr')[0]
-        table_data = first_row.find_all('td')
-        assert len(table_data) == 3
-        assert table_data[1].text.strip() == '206'
+        assert page.find_all('dt')[0].text.strip() == 'Pickle feet'
+        assert page.find_all('dd')[0].text.strip() == '206 text messages sent'
 
-        second_row = page.tbody.find_all('tr')[1]
-        table_data = second_row.find_all('td')
-        assert len(table_data) == 3
-        assert table_data[1].text.strip() == '13'
+        assert page.find_all('dt')[1].text.strip() == 'Brine Shrimp'
+        assert page.find_all('dd')[1].text.strip() == '13 text messages sent'
 
 
 def _test_dashboard_menu(mocker, app_, usr, service, permissions):