Merge pull request #1634 from alphagov/smaller-font-for-bigger-numbers

Make dashboard totals smaller if numbers are big

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

@@ -85,7 +85,8 @@
       outline: 3px solid $yellow;
     }
 
-    .big-number {
+    .big-number,
+    .big-number-smaller {
       background: transparent;
     }
 

app/main/views/dashboard.py

@@ -10,7 +10,6 @@ from flask import (
     Response,
 )
 from flask_login import login_required
-
 from notifications_utils.recipients import format_phone_number_human_readable
 
 from app.main import main
@@ -303,7 +302,18 @@ def get_dashboard_partials(service_id):
         for job in job_api_client.get_jobs(service_id, limit_days=7, statuses=statuses_to_display)['data']
     ]
     service = service_api_client.get_detailed_service(service_id)
-    column_width = 'column-third' if 'letter' in current_service['permissions'] else 'column-half'
+    column_width, max_notifiction_count = get_column_properties(
+        number_of_columns=(
+            3 if 'letter' in current_service['permissions'] else 2
+        )
+    )
+    dashboard_totals = get_dashboard_totals(service['data']['statistics']),
+    highest_notification_count = max(
+        sum(
+            value[key] for key in {'requested', 'failed', 'delivered'}
+        )
+        for key, value in dashboard_totals[0].items()
+    )
 
     return {
         'upcoming': render_template(
@@ -320,8 +330,11 @@ def get_dashboard_partials(service_id):
         'totals': render_template(
             'views/dashboard/_totals.html',
             service_id=service_id,
-            statistics=get_dashboard_totals(service['data']['statistics']),
+            statistics=dashboard_totals[0],
-            column_width=column_width
+            column_width=column_width,
+            smaller_font_size=(
+                highest_notification_count > max_notifiction_count
+            ),
         ),
         'template-statistics': render_template(
             'views/dashboard/template-statistics.html',
@@ -496,3 +509,10 @@ def get_tuples_of_financial_years(
         )
         for year in range(start, end + 1)
     )
+
+
+def get_column_properties(number_of_columns):
+    return {
+        2: ('column-half', 999999999),
+        3: ('column-third', 99999),
+    }.get(number_of_columns)

app/templates/views/dashboard/_totals.html

@@ -11,7 +11,8 @@
         statistics['email']['failed_percentage'],
         statistics['email']['show_warning'],
         failure_link=url_for(".view_notifications", service_id=service_id, message_type='email', status='failed'),
-        link=url_for(".view_notifications", service_id=service_id, message_type='email', status='sending,delivered,failed')
+        link=url_for(".view_notifications", service_id=service_id, message_type='email', status='sending,delivered,failed'),
+        smaller=smaller_font_size
       ) }}
     </div>
     <div id="total-sms" class="{{column_width}}">
@@ -22,7 +23,8 @@
         statistics['sms']['failed_percentage'],
         statistics['sms']['show_warning'],
         failure_link=url_for(".view_notifications", service_id=service_id, message_type='sms', status='failed'),
-        link=url_for(".view_notifications", service_id=service_id, message_type='sms', status='sending,delivered,failed')
+        link=url_for(".view_notifications", service_id=service_id, message_type='sms', status='sending,delivered,failed'),
+        smaller=smaller_font_size
       ) }}
     </div>
     {% if 'letter' in current_service['permissions'] %}
@@ -34,7 +36,8 @@
           statistics['letter']['failed_percentage'],
           statistics['letter']['show_warning'],
           failure_link=url_for(".view_notifications", service_id=service_id, message_type='letter', status='failed'),
-          link=url_for(".view_notifications", service_id=service_id, message_type='letter', status='')
+          link=url_for(".view_notifications", service_id=service_id, message_type='letter', status=''),
+          smaller=smaller_font_size
         ) }}
       </div>
     {% endif %}

tests/app/main/views/test_dashboard.py

@@ -461,6 +461,77 @@ def test_correct_columns_display_on_dashboard(
     assert len(page.select(column_name)) == expected_column_count
 
 
+@pytest.mark.parametrize('permissions, totals, big_number_class, expected_column_count', [
+    (
+        ['email', 'sms'],
+        {
+            'email': {'requested': 0, 'delivered': 0, 'failed': 0},
+            'sms': {'requested': 999999999, 'delivered': 0, 'failed': 0}
+        },
+        '.big-number',
+        2,
+    ),
+    (
+        ['email', 'sms'],
+        {
+            'email': {'requested': 1000000000, 'delivered': 0, 'failed': 0},
+            'sms': {'requested': 1000000, 'delivered': 0, 'failed': 0}
+        },
+        '.big-number-smaller',
+        2,
+    ),
+    (
+        ['email', 'sms', 'letter'],
+        {
+            'email': {'requested': 0, 'delivered': 0, 'failed': 0},
+            'sms': {'requested': 99999, 'delivered': 0, 'failed': 0},
+            'letter': {'requested': 99999, 'delivered': 0, 'failed': 0}
+        },
+        '.big-number',
+        3,
+    ),
+    (
+        ['email', 'sms', 'letter'],
+        {
+            'email': {'requested': 0, 'delivered': 0, 'failed': 0},
+            'sms': {'requested': 0, 'delivered': 0, 'failed': 0},
+            'letter': {'requested': 100000, 'delivered': 0, 'failed': 0},
+        },
+        '.big-number-smaller',
+        3,
+    ),
+])
+def test_correct_font_size_for_big_numbers(
+    client_request,
+    mocker,
+    mock_get_service_templates,
+    mock_get_template_statistics,
+    mock_get_detailed_service,
+    mock_get_jobs,
+    service_one,
+    permissions,
+    totals,
+    big_number_class,
+    expected_column_count,
+):
+
+    service_one['permissions'] = permissions
+
+    mocker.patch(
+        'app.main.views.dashboard.get_dashboard_totals',
+        return_value=totals
+    )
+
+    page = client_request.get(
+        'main.service_dashboard',
+        service_id=service_one['id'],
+    )
+
+    assert expected_column_count == len(
+        page.select('.big-number-with-status {}'.format(big_number_class))
+    )
+
+
 @freeze_time("2016-01-01 11:09:00.061258")
 def test_should_show_recent_jobs_on_dashboard(
     logged_in_client,