From 3dc349c8a7f98f9447a518b5f312f3f1e73d8f49 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 12 May 2016 21:31:47 +0100
Subject: [PATCH] Include template type in bar graph label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It’s possible that users will have email and SMS templates with similar
names, and will send them depending on their users’ contact preferences.

So it’s useful to be able to compare how many emails vs SMS you’re
sending, even if the template names are similar.
---
 app/assets/stylesheets/views/dashboard.scss    | 18 ++++++++++--------
 .../views/dashboard/template-statistics.html   |  9 ++++-----
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index 30f26f57d..a2697f7b3 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -11,37 +11,39 @@
 
 .spark-bar {
 
+  @include core-16;
   box-sizing: border-box;
   display: block;
   width: 100%;
   text-align: right;
   margin-bottom: $gutter-half;
-  height: 30px;
+  height: $gutter-half;
   color: $govuk-blue;
-  line-height: 30px;
-  padding-right: 5px;
-  font-weight: bold;
+  text-align: left;
   color: $govuk-blue;
 
   span {
+    box-sizing: border-box;
     display: block;
-    float: left;
     background: $govuk-blue;
     color: $white;
-    height: 30px;
+    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;
-    line-height: 30px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: $link-colour;
+    color: $govuk-blue;
     max-width: 100%;
     background: $white;
+    margin-bottom: $gutter;
   }
 
 }
diff --git a/app/templates/views/dashboard/template-statistics.html b/app/templates/views/dashboard/template-statistics.html
index 89ae52ae3..0af34f4ba 100644
--- a/app/templates/views/dashboard/template-statistics.html
+++ b/app/templates/views/dashboard/template-statistics.html
@@ -6,16 +6,15 @@
       
       <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>
+          <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 style="width: {{ item.usage_count / most_used_template_count * 100 }}%"></span>
+          {{ item.usage_count }} {{ 'text messages' if item.template.template_type == 'sms' else 'emails' }} sent
+          
         </span>
       </dd>