Andrew Charlwood
47 lines
1.6 KiB
Python
47 lines
1.6 KiB
Python
"""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"),
|
|
],
|
|
)
|