diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss index 3e046c12a..f9d0508be 100644 --- a/app/assets/stylesheets/components/big-number.scss +++ b/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; } } diff --git a/app/assets/stylesheets/components/show-more.scss b/app/assets/stylesheets/components/show-more.scss new file mode 100644 index 000000000..a02c4b53d --- /dev/null +++ b/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; + } + +} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 356110614..eae80027d 100644 --- a/app/assets/stylesheets/main.scss +++ b/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'; diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index d4dfb1159..a2697f7b3 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/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; } } diff --git a/app/main/views/dashboard.py b/app/main/views/dashboard.py index b63cc81c8..efbaa1045 100644 --- a/app/main/views/dashboard.py +++ b/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, diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html index 654946f1f..b52f98c6f 100644 --- a/app/templates/components/big-number.html +++ b/app/templates/components/big-number.html @@ -1,14 +1,16 @@ {% macro big_number(number, label, label_link=None, currency='', smaller=False) %}
- {% if number is number %} - {% if currency %} - {{ "{}{:,.2f}".format(currency, 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 %} +
{% if label_link %} {{ label }} diff --git a/app/templates/components/message-count-label.html b/app/templates/components/message-count-label.html new file mode 100644 index 000000000..532a711d5 --- /dev/null +++ b/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 %} \ No newline at end of file diff --git a/app/templates/components/show-more.html b/app/templates/components/show-more.html new file mode 100644 index 000000000..24b945f81 --- /dev/null +++ b/app/templates/components/show-more.html @@ -0,0 +1,3 @@ +{% macro show_more(url, label) %} + {{ label }} +{% endmacro %} diff --git a/app/templates/views/dashboard/all-template-statistics.html b/app/templates/views/dashboard/all-template-statistics.html index 7ec88eeb6..bb3a7d0dc 100644 --- a/app/templates/views/dashboard/all-template-statistics.html +++ b/app/templates/views/dashboard/all-template-statistics.html @@ -5,13 +5,16 @@ {% endblock %} {% block maincolumn_content %} -

- Templates sent this year -

-

- 1 April 2016 to date -

- {% with period = "" %} - {% include 'views/dashboard/template-statistics.html' %} - {% endwith %} + +
+
+

Templates sent

+
+
+ 1 April 2016 to date +
+
+ + {% include 'views/dashboard/template-statistics.html' %} + {% endblock %} diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html index 192700f25..50b00e0a6 100644 --- a/app/templates/views/dashboard/dashboard.html +++ b/app/templates/views/dashboard/dashboard.html @@ -8,6 +8,8 @@
+

Dashboard

+ {% 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 %} -

+

In the last 7 days -

+ {% include 'views/dashboard/today.html' %}
diff --git a/app/templates/views/dashboard/template-statistics.html b/app/templates/views/dashboard/template-statistics.html index ee69efdd4..80e12fdd7 100644 --- a/app/templates/views/dashboard/template-statistics.html +++ b/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() %} - - {{ item.template.name }} - - {% 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 %} +
+ {% for item in template_statistics %} +
+ +
+ + {{ item.template.name }} + +
+
+ {% if template_statistics|length > 1 %} + + + {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }} + + {% else %} + {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }} + {% endif %} +
+ +
+ {% endfor %} +
\ No newline at end of file diff --git a/app/templates/views/dashboard/today.html b/app/templates/views/dashboard/today.html index aa2128c63..b3058951e 100644 --- a/app/templates/views/dashboard/today.html +++ b/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 %}
{{ 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 @@
{{ 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 @@ ) }}
- Compare to previous weeks + {{ show_more( + url_for('.weekly', service_id=current_service.id), + 'Compare to previous weeks' + ) }}
- {% with period = "in the last 7 days" %} + + {% if template_statistics|length %} {% include 'views/dashboard/template-statistics.html' %} - {% endwith %} -

- See all templates sent this year -

+ {{ 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) %} -

Usage

+

This year

@@ -65,9 +72,10 @@
-
- See breakdown -
+ {{ show_more( + url_for(".usage", service_id=current_service['id']), + 'See usage breakdown' + ) }} {% endif %} diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py index dd32cabab..2454b63d3 100644 --- a/tests/app/main/views/test_dashboard.py +++ b/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):