Merge pull request #213 from NHSDigital/update-vaccination-dashboard-content

Update vaccination dashboard content following review

Author: mikejamesthompson

mavis/reporting/api_client/client.py

@@ -109,6 +109,6 @@ def get_genders(self) -> list[dict]:
         return [
             {"value": "female", "text": "Female"},
             {"value": "male", "text": "Male"},
-            {"value": "not specified", "text": "Not specified"},
             {"value": "not known", "text": "Not known"},
+            {"value": "not specified", "text": "Not specified"},
         ]

mavis/reporting/templates/components/app_dashboard_card.jinja

@@ -0,0 +1,21 @@
+{% from "card/macro.jinja" import card %}
+
+{% macro app_dashboard_card(params) %}
+
+<div class="{{ params.classes }} nhsuk-card-group__item app-card-group__item">
+  {{ card({
+    "classes": "app-card " ~ params.card_classes,
+    "heading": params.heading | escape,
+    "headingClasses": "nhsuk-heading-xs",
+    "headingLevel": 3,
+    "descriptionHtml": "
+      <p class='nhsuk-card__description'>" ~
+        params.description | escape ~
+        "<span class='nhsuk-card__caption'>" ~
+          params.caption | escape ~
+        "</span>" ~
+      "</p>",
+  }) }}
+</div>
+
+{% endmacro %}

mavis/reporting/templates/layouts/dashboard.jinja

@@ -15,7 +15,7 @@
     "text": "Reports",
     "level": 1,
     "size": "l",
-    "summary": "For " ~ academic_year ~ " so far"
+    "summary": "For the " ~ academic_year ~ " school year so far"
   }) }}
 {% endblock %}
 

mavis/reporting/templates/vaccinations.jinja

@@ -1,7 +1,8 @@
-{% from "tables/macro.jinja" import table %}
 {% from "components/filters.jinja" import filters %}
+{% from "components/heading.jinja" import heading %}
 {% from "card/macro.jinja" import card %}
-
+{% from "tables/macro.jinja" import table %}
+{% from "components/app_dashboard_card.jinja" import app_dashboard_card %}
 
 {% extends 'layouts/dashboard.jinja' %}
 
@@ -21,81 +22,77 @@
   </div>
 
   <div id="dashboard" class="app-grid-column-content">
-
     <div class="nhsuk-card-group nhsuk-grid-row app-card-group">
-      <div class="nhsuk-grid-column-one-third nhsuk-card-group__item app-card-group__item">
-        {% set child_or_children = "child" if data.cohort == 1 else "children" %}
-        {{ card({
-          "classes": "app-card app-card--blue",
-          "heading": "Cohort",
-          "headingClasses": "nhsuk-heading-xs",
-          "headingLevel": 3,
-          "descriptionHtml": "<p class='nhsuk-card__description'>" ~ data.cohort | thousands ~ "<span class='nhsuk-card__caption'>" ~ child_or_children ~ " </span></p>",
-        }) }}
-      </div>
-
-      <div class="nhsuk-grid-column-one-third nhsuk-card-group__item app-card-group__item">
-        {{ card({
-          "classes": "app-card app-card--red",
-          "heading": "Not vaccinated",
-          "headingClasses": "nhsuk-heading-xs",
-          "headingLevel": 3,
-          "descriptionHtml": "<p class='nhsuk-card__description'>" ~ data["not_vaccinated_percentage"] | percentage ~ "<span class='nhsuk-card__caption'>" ~ data["not_vaccinated"] | format_child_count ~ "</span></p>",
-        }) }}
-      </div>
-
-      <div class="nhsuk-grid-column-one-third nhsuk-card-group__item app-card-group__item">
-        {{ card({
-          "classes": "app-card app-card--green",
-          "heading": "Vaccinated",
-          "headingClasses": "nhsuk-heading-xs",
-          "headingLevel": 3,
-          "descriptionHtml": "<p class='nhsuk-card__description'>" ~ data["vaccinated_percentage"] | percentage ~ "<span class='nhsuk-card__caption'>" ~ data["vaccinated"] | format_child_count ~ "</span></p>",
-        }) }}
-      </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-card-group__item app-card-group__item">
-        {{ card({
-          "classes": "app-card",
-          "heading": "Vaccinated by SAIS in " ~ academic_year,
-          "headingClasses": "nhsuk-heading-xs",
-          "headingLevel": 3,
-          "descriptionHtml": "<p class='nhsuk-card__description'>" ~ data["vaccinated_by_sais_percentage"] | percentage ~ "<span class='nhsuk-card__caption'>" ~ data["vaccinated_by_sais"] | format_child_count ~ "</span></p>",
-        }) }}
-      </div>
+      {{ app_dashboard_card({
+        "classes": "nhsuk-grid-column-one-third",
+        "card_classes": "app-card--blue",
+        "heading": "Cohort",
+        "description": data.cohort | thousands,
+        "caption": "child" if data.cohort == 1 else "children",
+      }) }}
+
+      {{ app_dashboard_card({
+        "classes": "nhsuk-grid-column-one-third",
+        "card_classes": "app-card--red",
+        "heading": "Not vaccinated",
+        "description": data["not_vaccinated_percentage"] | percentage,
+        "caption": data["not_vaccinated"] | format_child_count,
+      }) }}
+
+      {{ app_dashboard_card({
+        "classes": "nhsuk-grid-column-one-third",
+        "card_classes": "app-card--green",
+        "heading": "Vaccinated",
+        "description": data["vaccinated_percentage"] | percentage,
+        "caption": data["vaccinated"] | format_child_count,
+      }) }}
+    </div>
 
-      <div class="nhsuk-grid-column-one-half nhsuk-card-group__item app-card-group__item">
-        {% set isFlu = current_filters.programme == "flu" %}
-        {% set percentage = "N/A" if isFlu else data["vaccinated_previously_percentage"] | percentage %}
-        {% set child_count = "N/A" if isFlu else data["vaccinated_previously"] | format_child_count %}
-        {{ card({
-          "classes": "app-card",
-          "heading": "Vaccinated in a previous academic year",
-          "headingClasses": "nhsuk-heading-xs",
-          "headingLevel": 3,
-          "descriptionHtml": "<p class='nhsuk-card__description'>" ~ percentage ~ "<span class='nhsuk-card__caption'>" ~ child_count ~ "</span></p>",
-        }) }}
-      </div>
+    {{ heading({
+      "text": "Vaccinated in the current school year",
+      "level": 2,
+      "size": "s"
+    }) }}
 
-      <div class="nhsuk-grid-column-one-half nhsuk-card-group__item app-card-group__item">
-        {{ card({
-          "classes": "app-card",
-          "heading": "Vaccinated elsewhere (self-reported)",
-          "headingClasses": "nhsuk-heading-xs",
-          "headingLevel": 3,
-          "descriptionHtml": "<p class='nhsuk-card__description'>" ~ data["vaccinated_elsewhere_declared_percentage"] | percentage ~ "<span class='nhsuk-card__caption'>" ~ data["vaccinated_elsewhere_declared"] | format_child_count ~ "</span></p>",
-        }) }}
-      </div>
+    <div class="nhsuk-grid-row app-card-group nhsuk-card-group">
+      {{ app_dashboard_card({
+        "classes": "nhsuk-grid-column-one-third",
+        "heading": "Vaccinated by " ~ team.name,
+        "description": data["vaccinated_by_sais_percentage"] | percentage,
+        "caption": data["vaccinated_by_sais"] | format_child_count,
+      }) }}
+
+      {{ app_dashboard_card({
+        "classes": "nhsuk-grid-column-one-third",
+        "heading": "Vaccinated elsewhere (self-reported)",
+        "description": data["vaccinated_elsewhere_declared_percentage"] | percentage,
+        "caption": data["vaccinated_elsewhere_declared"] | format_child_count,
+      }) }}
+
+      {{ app_dashboard_card({
+        "classes": "nhsuk-grid-column-one-third",
+        "heading": "Vaccinated elsewhere (confirmed)",
+        "description": data["vaccinated_elsewhere_recorded_percentage"] | percentage,
+        "caption": data["vaccinated_elsewhere_recorded"] | format_child_count,
+      }) }}
+    </div>
 
-      <div class="nhsuk-grid-column-one-half nhsuk-card-group__item app-card-group__item">
-        {{ card({
-          "classes": "app-card",
-          "heading": "Vaccinated elsewhere (recorded)",
-          "headingClasses": "nhsuk-heading-xs",
-          "headingLevel": 3,
-          "descriptionHtml": "<p class='nhsuk-card__description'>" ~ data["vaccinated_elsewhere_recorded_percentage"] | percentage ~ "<span class='nhsuk-card__caption'>" ~ data["vaccinated_elsewhere_recorded"] | format_child_count ~ "</span></p>",
+    {% if current_filters.programme != "flu" %}
+      {{ heading({
+        "text": "Vaccinated before this school year",
+        "level": 2,
+        "size": "s"
+      }) }}
+
+      <div class="nhsuk-grid-row app-card-group nhsuk-card-group">
+        {{ app_dashboard_card({
+          "classes": "nhsuk-grid-column-full",
+          "heading": "Vaccinated in all settings",
+          "description": data["vaccinated_previously_percentage"] | percentage,
+          "caption": data["vaccinated_previously"] | format_child_count,
         }) }}
       </div>
-    </div>
+    {% endif %}
 
     {% set rows = [] %}
     {% for row in data.monthly_vaccinations_given %}
@@ -110,7 +107,7 @@
     ]) %}
 
     {{ table({
-      "heading": "Monthly vaccinations",
+      "heading": "Monthly vaccinations by " ~ team.name,
       "tableClasses": "nhsuk-table--data nhsuk-table--with-total",
       "panel": true,
       "head": [

pyproject.toml

@@ -24,6 +24,7 @@ dev = [
     "boto3==1.40.64",
     "pyyaml>=6.0.2",
     "pyright>=1.1.405",
+    "beautifulsoup4>=4.14.2",
 ]
 
 [tool.ruff]

tests/components/test_app_dashboard_card.py

@@ -0,0 +1,111 @@
+import pytest
+from bs4 import BeautifulSoup
+
+from mavis.reporting import create_app
+
+
+def card_params():
+    return {
+        "classes": "nhsuk-grid-column-one-third",
+        "card_classes": "app-card--blue",
+        "heading": "Test Heading",
+        "description": "123",
+        "caption": "children",
+    }
+
+
+def card_params_with_html():
+    return {
+        "classes": "nhsuk-grid-column-one-third",
+        "card_classes": "app-card--blue",
+        "heading": "<strong>Test Heading</strong>",
+        "description": "<p>123</p>",
+        "caption": "<strong>children</strong>",
+    }
+
+
+def card_soup(render_macro, params):
+    """Get the BeautifulSoup object for a card."""
+    html = render_macro(params)
+    return BeautifulSoup(html, "html.parser")
+
+
+@pytest.fixture()
+def app():
+    app = create_app()
+    app.config.update(
+        {
+            "MAVIS_ROOT_URL": "http://mavis.test/",
+            "TESTING": True,
+            "CLIENT_ID": "test_client_id",
+            "CLIENT_SECRET": "test_client_secret",
+        }
+    )
+    return app
+
+
+@pytest.fixture()
+def render_macro(app):
+    """Helper fixture to render the app_dashboard_card macro."""
+
+    def _render(params):
+        with app.app_context():
+            template = app.jinja_env.get_template("components/app_dashboard_card.jinja")
+            macro = template.module.app_dashboard_card
+            return macro(params)
+
+    return _render
+
+
+class TestAppDashboardCard:
+    def test_card_classes_are_correct(self, render_macro):
+        """Test that the card classes are correct."""
+
+        soup = card_soup(render_macro, card_params())
+
+        outer_div = soup.find("div", class_="nhsuk-card-group__item")
+        assert outer_div is not None
+        outer_classes = outer_div.get("class") or []
+        assert "nhsuk-grid-column-one-third" in outer_classes
+        assert "app-card-group__item" in outer_classes
+
+        card = outer_div.find("div", class_="app-card")
+        assert card is not None
+        card_classes = card.get("class") or []
+        assert "app-card--blue" in card_classes
+
+    def test_heading_is_correct(self, render_macro):
+        """Test that the heading is rendered with correct classes and level."""
+
+        soup = card_soup(render_macro, card_params())
+        heading = soup.find("h3", class_="nhsuk-heading-xs")
+        assert heading is not None
+        assert heading.text.strip() == "Test Heading"
+
+    def test_description_and_caption_are_correct(self, render_macro):
+        """Test that description and caption are rendered correctly."""
+
+        soup = card_soup(render_macro, card_params())
+        description_p = soup.find("p", class_="nhsuk-card__description")
+        assert description_p is not None
+        assert description_p.contents[0].text == "123"
+
+        caption_span = description_p.find("span", class_="nhsuk-card__caption")
+        assert caption_span is not None
+        assert caption_span.text.strip() == "children"
+
+    def test_html_is_escaped(self, render_macro):
+        """Test that HTML is escaped."""
+
+        soup = card_soup(render_macro, card_params_with_html())
+        heading = soup.find("h3", class_="nhsuk-heading-xs")
+        assert heading is not None
+        assert heading.text.strip() == "<strong>Test Heading</strong>"
+
+        description_p = soup.find("p", class_="nhsuk-card__description")
+        assert description_p is not None
+        assert description_p.contents[0].text == "<p>123</p>"
+
+        caption_span = description_p.find("span", class_="nhsuk-card__caption")
+        assert caption_span is not None
+        assert caption_span.text.strip() == "<strong>children</strong>"