Improve display of failure rates

https://www.pivotaltracker.com/story/show/116052359

- add absolute numbers for failures
- make percentages accurate to 1 decimal place (50.0%)
- make error colour appear if failures go above 3.0%
- make error colour boolean (don’t interpolate between the colours)

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

@@ -25,21 +25,13 @@
     padding-bottom: 0;
   }
 
+  %big-number-status,
   .big-number-status {
 
+    @include core-19;
     display: block;
     background: $green;
-    position: relative;
-
-    &-error-percentage {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: $error-colour;
-      z-index: 1;
-    }
+    padding: 15px;
 
     a {
 
@@ -52,16 +44,11 @@
 
     }
 
-    .big-number {
-      @include bold-19;
-      position: relative;
-      z-index: 2;
-    }
-
-    .big-number-label {
-      display: inline;
-    }
+  }
 
+  .big-number-status-failing {
+    @extend %big-number-status;
+    background: $error-colour;
   }
 
 }

app/main/views/dashboard.py

@@ -37,7 +37,7 @@ def service_dashboard(service_id):
         free_text_messages_remaining='250,000',
         spent_this_month='0.00',
         service=service['data'],
-        statistics=expand_statistics(statistics),
+        statistics=add_rates_to(statistics),
         templates=templates,
         service_id=str(service_id))
 
@@ -51,28 +51,27 @@ def service_dashboard_updates(service_id):
     return jsonify(**{
         'today': render_template(
             'views/dashboard/today.html',
-            statistics=expand_statistics(statistics),
+            statistics=add_rates_to(statistics),
         )
     })
 
 
-def expand_statistics(statistics, danger_zone=25):
+def add_rates_to(delivery_statistics):
 
-    if not statistics or not statistics[0]:
+    if not delivery_statistics or not delivery_statistics[0]:
         return {}
 
-    today = statistics[0]
+    today = delivery_statistics[0]
 
     today.update({
-        'emails_failure_rate':
-            int(today['emails_error'] / today['emails_requested'] * 100) if today['emails_requested'] else 0,
-        'sms_failure_rate':
-            int(today['sms_error'] / today['sms_requested'] * 100) if today['sms_requested'] else 0
-    })
-
-    today.update({
-        'emails_percentage_of_danger_zone': min(today['emails_failure_rate'] / (danger_zone / 100), 100),
-        'sms_percentage_of_danger_zone': min(today['sms_failure_rate'] / (danger_zone / 100), 100)
+        'emails_failure_rate': (
+            "{0:.1f}".format((today['emails_error'] / today['emails_requested'] * 100))
+            if today['emails_requested'] else 0
+        ),
+        'sms_failure_rate': (
+            "{0:.1f}".format((today['sms_error'] / today['sms_requested'] * 100))
+            if today['sms_requested'] else 0
+        )
     })
 
     return today

app/templates/components/big-number.html

@@ -6,12 +6,15 @@
 {% endmacro %}
 
 
-{% macro big_number_with_status(number, label, status_number, status_label, percentage_bad=0) %}
+{% macro big_number_with_status(number, label, failures, failure_percentage, danger_zone=False) %}
   <div class="big-number-with-status">
     {{ big_number(number, label) }}
-    <div class="big-number-status">
-      <div class="big-number-status-error-percentage" style="opacity: {{ percentage_bad / 100 }}"></div>
-      {{ big_number(status_number, status_label) }}
+    <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
+      {% if failures %}
+        {{ failures }} failed – {{ failure_percentage }}%
+      {% else %}
+        No failures
+      {% endif %}
     </div>
   </div>
 {% endmacro %}

app/templates/views/dashboard/today.html

@@ -8,18 +8,18 @@
     {{ big_number_with_status(
       statistics.get('emails_requested', 0),
       'email' if statistics.get('emails_requested') == 1 else 'emails',
-      '{}%'.format(statistics.get('emails_failure_rate', 0)),
-      'failed',
-      statistics.get('emails_percentage_of_danger_zone', 0)
+      statistics.get('emails_error'),
+      statistics.get('emails_failure_rate', 0.0),
+      statistics.get('emails_failure_rate', 0)|float > 3
     ) }}
   </div>
   <div class="column-half">
     {{ big_number_with_status(
       statistics.get('sms_requested', 0),
       'text message' if statistics.get('sms_requested') == 1 else 'text messages',
-      '{}%'.format(statistics.get('sms_failure_rate', 0)),
-      'failed',
-      statistics.get('sms_percentage_of_danger_zone', 0)
+      statistics.get('sms_error'),
+      statistics.get('sms_failure_rate', 0.0),
+      statistics.get('sms_failure_rate', 0)|float > 3
     ) }}
   </div>
 </div>