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,74 @@
+"""Chart card component — header, tabs, and dcc.Graph for icicle chart."""
+from dash import html, dcc
+
+
+def make_chart_card():
+    """Return a chart card matching 01_nhs_classic.html structure.
+
+    Contains:
+    - Header with title and dynamic subtitle (hierarchy label)
+    - Tab row (Icicle active, Sankey and Timeline as disabled placeholders)
+    - dcc.Graph for the Plotly icicle figure
+    """
+    return html.Section(
+        className="chart-card",
+        **{"aria-label": "Patient pathway chart"},
+        children=[
+            # Card header
+            html.Div(
+                className="chart-card__header",
+                children=[
+                    html.Div(
+                        children=[
+                            html.Div(
+                                "Patient Pathway Visualization",
+                                className="chart-card__title",
+                            ),
+                            html.Div(
+                                "Trust \u2192 Directorate \u2192 Drug \u2192 Patient Pathway",
+                                className="chart-card__subtitle",
+                                id="chart-subtitle",
+                            ),
+                        ]
+                    ),
+                ],
+            ),
+            # Tab row
+            html.Div(
+                className="chart-card__tabs",
+                role="tablist",
+                children=[
+                    html.Button(
+                        "Icicle",
+                        className="chart-tab chart-tab--active",
+                        role="tab",
+                        **{"aria-selected": "true"},
+                    ),
+                    html.Button(
+                        "Sankey",
+                        className="chart-tab",
+                        role="tab",
+                        disabled=True,
+                        **{"aria-selected": "false"},
+                    ),
+                    html.Button(
+                        "Timeline",
+                        className="chart-tab",
+                        role="tab",
+                        disabled=True,
+                        **{"aria-selected": "false"},
+                    ),
+                ],
+            ),
+            # Chart area
+            dcc.Graph(
+                id="pathway-chart",
+                style={"minHeight": "500px", "flex": "1"},
+                config={
+                    "displayModeBar": True,
+                    "displaylogo": False,
+                    "modeBarButtonsToRemove": ["lasso2d", "select2d"],
+                },
+            ),
+        ],
+    )