Make template usage on dashboard easier to scan

The dashboard looked a bit table-y. This commit makes four main changes:

- show a bar chart (drawn in CSS) for template usage (only shown if
  you’ve used more than one template recently)
- only break down template usage by template name, not template type
  (because that’s happening with the big numbers)
- change the style of the ‘show more’ links under each section so that
  they are all consistent, and a little less busy (one less keyline)
- remove the ‘recent templates‘ title so that the first two sections of
  the page group under ‘in the last 7 days’

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/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,24 @@
 {% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading %}
 
-{% 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">
+        <span class="spark-bar">
+          <span style="width: {{ item.usage_count / most_used_template_count * 66.6 }}%"></span>
+          {{ item.usage_count }} <span class="visuallyhidden">messages sent</span>
+        </span>
+      </dd>
+
+    </div>
+  {% endfor %}
+</dl>

app/templates/views/dashboard/today.html

@@ -1,4 +1,5 @@
 {% from "components/big-number.html" import big_number, big_number_with_status %}
+{% from "components/show-more.html" import show_more %}
 
 <div
   data-module="update-content"
@@ -11,7 +12,7 @@
     <div class="column-half">
       {{ big_number_with_status(
         statistics.emails_requested,
-        'email' if statistics.emails_requested == 1 else 'emails',
+        'email sent' if statistics.emails_requested == 1 else 'emails sent',
         statistics.emails_failed,
         statistics.get('emails_failure_rate', 0.0),
         statistics.get('emails_failure_rate', 0)|float > 3,
@@ -22,7 +23,7 @@
     <div class="column-half">
       {{ big_number_with_status(
         statistics.sms_requested,
-        'text message' if statistics.sms_requested == 1 else 'text messages',
+        'text message sent' if statistics.sms_requested == 1 else 'text messages sent',
         statistics.sms_failed,
         statistics.get('sms_failure_rate', 0.0),
         statistics.get('sms_failure_rate', 0)|float > 3,
@@ -31,18 +32,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 > 1 %}
     {% 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 +71,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>