Andrew Charlwood
10d47d616c
- Changed .main from min-height to height with overflow-y auto - Added flex chain: #view-container → #patient-pathways-view → .chart-card → dcc.Loading wrapper → #chart-container → #pathway-chart - All flex parents get min-height: 0 for proper flex shrinking - dcc.Graph set to responsive=True with flex: 1 and minHeight: 0 - Trust Comparison view scrolls naturally via .main overflow-y auto
101 lines
3.2 KiB
Python
101 lines
3.2 KiB
Python
"""Chart card component — tab bar, header, and dcc.Graph for charts."""
|
|
from dash import html, dcc
|
|
|
|
|
|
# Patient Pathways view: only Icicle + Sankey
|
|
TAB_DEFINITIONS = [
|
|
("icicle", "Icicle"),
|
|
("sankey", "Sankey"),
|
|
]
|
|
|
|
# Full set retained for Trust Comparison dashboard (Phase 10.8)
|
|
ALL_TAB_DEFINITIONS = [
|
|
("icicle", "Icicle"),
|
|
("market-share", "Market Share"),
|
|
("cost-effectiveness", "Cost Effectiveness"),
|
|
("cost-waterfall", "Cost Waterfall"),
|
|
("sankey", "Sankey"),
|
|
("dosing", "Dosing"),
|
|
("heatmap", "Heatmap"),
|
|
("duration", "Duration"),
|
|
]
|
|
|
|
|
|
def make_chart_card():
|
|
"""Return a chart card with tab bar and dcc.Graph.
|
|
|
|
Contains:
|
|
- Tab bar with 2 chart tabs (Icicle active by default, Sankey)
|
|
- Header with title and dynamic subtitle
|
|
- dcc.Loading wrapper around dcc.Graph for loading spinner
|
|
"""
|
|
tab_buttons = []
|
|
for tab_id, label in TAB_DEFINITIONS:
|
|
is_active = tab_id == "icicle"
|
|
class_name = "chart-tab chart-tab--active" if is_active else "chart-tab"
|
|
tab_buttons.append(
|
|
html.Button(
|
|
label,
|
|
id=f"tab-{tab_id}",
|
|
className=class_name,
|
|
n_clicks=0,
|
|
)
|
|
)
|
|
|
|
return html.Section(
|
|
className="chart-card",
|
|
**{"aria-label": "Patient pathway chart"},
|
|
children=[
|
|
# Tab bar
|
|
html.Div(
|
|
className="chart-card__tabs",
|
|
role="tablist",
|
|
children=tab_buttons,
|
|
),
|
|
# 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",
|
|
),
|
|
]
|
|
),
|
|
],
|
|
),
|
|
# Chart area with loading spinner
|
|
dcc.Loading(
|
|
type="circle",
|
|
color="#005EB8",
|
|
children=[
|
|
html.Div(
|
|
id="chart-container",
|
|
children=[
|
|
dcc.Graph(
|
|
id="pathway-chart",
|
|
style={"flex": "1", "minHeight": "0"},
|
|
responsive=True,
|
|
config={
|
|
"displayModeBar": True,
|
|
"displaylogo": False,
|
|
"modeBarButtonsToRemove": [
|
|
"lasso2d",
|
|
"select2d",
|
|
],
|
|
},
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
)
|