admin/HighCostDrugsDemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Trends landing page with directorate overview chart (Task E.3)

Browse Source
This commit is contained in:
Andrew Charlwood
2026-02-07 22:19:52 +00:00
parent 6c5f9be776
commit c253e05046
7 changed files with 237 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dash_app/components/trends.py
+112
View File
@@ -0,0 +1,112 @@
"""Trends view — directorate-level overview + drug-level drill-down."""
from dash import html, dcc
import dash_mantine_components as dmc
def make_trends_landing():
"""Trends landing page — directorate-level overview chart with metric toggle."""
return html.Div(
id="trends-landing",
children=[
html.Div(
className="trends-landing__header",
children=[
html.Div(
style={"display": "flex", "alignItems": "center",
"justifyContent": "space-between", "gap": "12px",
"flexWrap": "wrap"},
children=[
html.H2("Trends — Directorate Overview",
className="trends-landing__title",
style={"margin": "0", "color": "#1E293B",
"fontSize": "18px",
"fontFamily": "Source Sans 3, system-ui, sans-serif"}),
dmc.SegmentedControl(
id="trends-view-metric-toggle",
data=[
{"value": "patients", "label": "Patients"},
{"value": "total_cost", "label": "Cost per Patient"},
{"value": "cost_pp_pa", "label": "Cost per Patient p.a."},
],
value="patients",
size="xs",
),
],
),
html.P(
"Click a directorate line to drill down into drug-level trends.",
className="trends-landing__desc",
style={"margin": "4px 0 0", "color": "#768692",
"fontSize": "14px"},
),
],
style={"padding": "20px 24px 8px"},
),
dcc.Loading(type="circle", color="#005EB8", children=[
dcc.Graph(
id="trends-overview-chart",
config={"displayModeBar": False, "displaylogo": False},
style={"height": "500px"},
),
]),
],
)
def make_trends_detail():
"""Trends detail page — drug-level trends within a selected directorate."""
return html.Div(
id="trends-detail",
style={"display": "none"},
children=[
html.Div(
className="trends-detail__header",
children=[
html.Div(
style={"display": "flex", "alignItems": "center",
"justifyContent": "space-between", "gap": "12px",
"flexWrap": "wrap"},
children=[
html.Div(
style={"display": "flex", "alignItems": "center",
"gap": "12px"},
children=[
html.Button(
"\u2190 Back",
id="trends-back-btn",
className="tc-dashboard__back",
n_clicks=0,
),
html.H2(
id="trends-detail-title",
children="",
style={"margin": "0", "color": "#1E293B",
"fontSize": "18px",
"fontFamily": "Source Sans 3, system-ui, sans-serif"},
),
],
),
dmc.SegmentedControl(
id="trends-detail-metric-toggle",
data=[
{"value": "patients", "label": "Patients"},
{"value": "total_cost", "label": "Cost per Patient"},
{"value": "cost_pp_pa", "label": "Cost per Patient p.a."},
],
value="patients",
size="xs",
),
],
),
],
style={"padding": "20px 24px 8px"},
),
dcc.Loading(type="circle", color="#005EB8", children=[
dcc.Graph(
id="trends-detail-chart",
config={"displayModeBar": False, "displaylogo": False},
style={"height": "500px"},
),
]),
],
)