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

This commit is contained in:
Andrew Charlwood
2026-02-06 13:20:42 +00:00
parent 5ebe75ad13
commit 307563bb31
7 changed files with 296 additions and 8 deletions
+3 -3
View File
@@ -131,17 +131,17 @@ Drawer selection → update_drug_selection → app-state store → load_pathway_
- **Checkpoint**: Components render in browser with correct NHS styling ✓
### 2.2 Main content area: KPI row + filter bar + chart card
- [ ] Create `dash_app/components/kpi_row.py``make_kpi_row()` function
- [x] Create `dash_app/components/kpi_row.py``make_kpi_row()` function
- 4 KPI cards: Unique Patients, Drug Types, Total Cost, Indication Match Rate
- Each card value has an ID for callback updates: `id="kpi-patients"`, `id="kpi-drugs"`, `id="kpi-cost"`, `id="kpi-match"`
- CSS classes: `.kpi-row`, `.kpi-card`, `.kpi-card__label`, `.kpi-card__value`, `.kpi-card__sub`
- [ ] Create `dash_app/components/filter_bar.py``make_filter_bar()` function
- [x] Create `dash_app/components/filter_bar.py``make_filter_bar()` function
- Chart type toggle pills ("By Directory" / "By Indication") — use `html.Button` with `.toggle-pill` CSS
- Initiated dropdown: All years, Last 2 years, Last 1 year — use `dcc.Dropdown` or `html.Select` with `.filter-select`
- Last seen dropdown: Last 6 months, Last 12 months
- NO drug/directorate dropdowns here (those are in the drawer)
- Component IDs: `id="chart-type-directory"`, `id="chart-type-indication"`, `id="filter-initiated"`, `id="filter-last-seen"`
- [ ] Create `dash_app/components/chart_card.py``make_chart_card()` function
- [x] Create `dash_app/components/chart_card.py``make_chart_card()` function
- Card header with title + dynamic subtitle (hierarchy label: "Trust → Directorate → Drug → Pathway")
- Tab row: Icicle (active), Sankey (disabled placeholder), Timeline (disabled placeholder)
- `dcc.Graph(id="pathway-chart")` filling the card body