feat: add KPI row, filter bar, and chart card components (Task 2.2)

2026-02-06 13:20:42 +00:00
parent 5ebe75ad13
commit 307563bb31
7 changed files with 296 additions and 8 deletions
@@ -0,0 +1,46 @@
+"""KPI row component — 4 metric cards with callback-updatable values."""
+from dash import html
+
+
+def make_kpi_row():
+    """Return a section with 4 KPI cards matching 01_nhs_classic.html structure."""
+    return html.Section(
+        className="kpi-row",
+        **{"aria-label": "Key performance indicators"},
+        children=[
+            _kpi_card("Unique Patients", "kpi-patients", "—", "across all trusts"),
+            _kpi_card("Drug Types", "kpi-drugs", "—", "high-cost drugs tracked"),
+            _kpi_card("Total Cost", "kpi-cost", "—", "current period spend"),
+            _kpi_card(
+                "Indication Match",
+                "kpi-match",
+                "—",
+                "GP diagnosis confirmed",
+                modifier="kpi-card--green",
+            ),
+        ],
+    )
+
+
+def _kpi_card(label, value_id, default_value, sub_text, modifier=None):
+    """Build a single KPI card.
+
+    Args:
+        label: uppercase label text
+        value_id: HTML id for the value span (for callback Output)
+        default_value: initial display value before callbacks fire
+        sub_text: description below the value
+        modifier: optional CSS modifier class (e.g. 'kpi-card--green')
+    """
+    card_class = "kpi-card"
+    if modifier:
+        card_class += f" {modifier}"
+
+    return html.Div(
+        className=card_class,
+        children=[
+            html.Div(label, className="kpi-card__label"),
+            html.Div(default_value, className="kpi-card__value", id=value_id),
+            html.Div(sub_text, className="kpi-card__sub"),
+        ],
+    )