Skip to content

Commit 5590ed7

Browse files
Amy-ReidyAmy-Reidy
authored
Merge pull request #65 from unicef-drp/help-text
Added help text
2 parents 20ee5db + 17a19da commit 5590ed7

File tree

3 files changed

+15741
-10
lines changed

3 files changed

+15741
-10
lines changed

‎dash_service/assets/main_bs5_popovers.css

Lines changed: 15647 additions & 1 deletion
Large diffs are not rendered by default.

‎dash_service/default_settings.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
# Your App's title. The value of this parameter will be propagated into
88
# `app.title`
9-
TITLE = "TransMonee Dashboard"
9+
TITLE = "TransMonEE Dashboard"
1010
SUB_TITLE = (
1111
": Monitoring the situation of children and women in Europe and Central Asia"
1212
)

‎dash_service/pages/transmonee.py

Lines changed: 93 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,38 @@
6868
}
6969

7070

71+
help_text = html.Div([
72+
html.Strong("How to use dashboard:"),
73+
html.P([
74+
"- Choose between two primary views for data exploration. ",
75+
html.Strong("'Explore using the Europe and Central Asia Child Rights Monitoring Framework'"),
76+
" allows you to select a domain and view indicators within each of its sub-domains, providing a structured approach aligned with child rights priorities. Alternatively, ",
77+
html.Strong("'Search by Indicator'"),
78+
" lets you select specific indicators from a dropdown menu and filter by SDG indicators and/or by specific domains or sub-domains."
79+
]),
80+
html.P([
81+
"- At the bottom of the page, there are ",
82+
html.Strong("Committee on the Rights of the Child Recommendations"),
83+
" which are related to each sub-domain. These recommendations have been organized by three different types of bottlenecks and can be filtered by country and year of report."
84+
]),
85+
html.P([
86+
"- Visualize data with bar charts and regional maps displaying the latest data for each country, or use line graphs to track historical trends."
87+
]),
88+
html.P([
89+
"- Enhance your analysis with filters for year range, country group, or individual countries. When disaggregated data is available, these options will appear on the chart."
90+
]),
91+
html.P([
92+
"- Hover over information icons to view definitions of indicators and sub-domains."
93+
]),
94+
html.P([
95+
"- To learn more about data availability for each indicator, hover over the ",
96+
html.Strong("'Countries with data'"),
97+
" and ",
98+
html.Strong("'Countries without data'"),
99+
" buttons to see which countries have data within the selected year range."
100+
]),
101+
])
102+
71103
# TODO: Move all of these to env/setting vars from production
72104

73105

@@ -1169,13 +1201,64 @@ def get_base_layout(**kwargs):
11691201
id={"type": "nav_buttons", "index": "indicator_view"},
11701202
className="nav-btn mb-2"
11711203
),
1204+
html.Div(
1205+
[
1206+
html.P(
1207+
"How to use dashboard",
1208+
style={
1209+
"display": "inline-block",
1210+
"textAlign": "center",
1211+
"position": "relative",
1212+
"color":"white",
1213+
"marginTop":"0px",
1214+
"marginBottom":"0px"
1215+
},
1216+
),
1217+
html.I(
1218+
id="help-button",
1219+
className="fas fa-question-circle",
1220+
style={
1221+
"display": "flex",
1222+
"alignContent": "center",
1223+
"flexWrap": "wrap",
1224+
"paddingLeft": "5px",
1225+
"color":"white"
1226+
},
1227+
),
1228+
dbc.Popover(
1229+
[
1230+
dbc.PopoverBody(
1231+
help_text,
1232+
id="help-popover",
1233+
)
1234+
],
1235+
target="help-button",
1236+
trigger="hover",
1237+
className="custom-popover",
1238+
style={
1239+
"overflowY": "auto",
1240+
"whiteSpace": "pre-wrap",
1241+
"opacity": 1,
1242+
"max-width":"600px"
1243+
},
1244+
delay={
1245+
"hide": 0,
1246+
"show": 0,
1247+
},
1248+
),
1249+
],
1250+
style={
1251+
"display": "inline-flex",
1252+
"marginTop":"10px",
1253+
},
1254+
),
11721255
], style={"display": "flex", "flexDirection": "column", "alignItems": "center"}),
11731256
lg=4, md=12, align="center",
11741257
),
11751258
],
11761259
justify="between",
11771260
align="center",
1178-
style={"background-color": '#00acef', "paddingBottom": 15, "minHeight": 200},
1261+
style={"background-color": '#00acef', "minHeight": 200},
11791262
),
11801263
html.Br(),
11811264
dbc.Row(
@@ -1189,11 +1272,12 @@ def get_base_layout(**kwargs):
11891272
# "Select ECA CRM Domain" text and Dropdown
11901273
html.Div(
11911274
[
1192-
html.P(
1193-
"Select ECA CRM Domain:",
1194-
style={"margin-bottom": "10px", "display": "inline-block", "margin-right": "10px"}
1195-
),
1196-
html.Label('Select ECA CRM Domain', htmlFor='domain-dropdown'),
1275+
#html.P(
1276+
#"Select ECA CRM Domain:",
1277+
#style={"margin-bottom": "10px", "display": "inline-block", "margin-right": "10px"}
1278+
#),
1279+
html.Label('Select ECA CRM Domain:', htmlFor='domain-dropdown',
1280+
style={"display": "inline-block", "margin-right": "10px"}),
11971281
dcc.Dropdown(
11981282
id="domain-dropdown",
11991283
options=domain_dropdown_options,
@@ -1212,8 +1296,8 @@ def get_base_layout(**kwargs):
12121296
html.Div(
12131297
[
12141298
html.Img(id="wheel-icon",src=wheel_icon_path, style={"margin-right": "5px", "margin-left": "15px", "height":"45px"}),
1215-
html.A("Learn more about ECA CRM Framework",
1216-
href="https://www.unicef.org/eca/europe-and-central-asia-child-rights-monitoring-framework",
1299+
html.A("Learn about ECA CRM Framework",
1300+
href="https://www.transmonee.org/child-rights-monitoring-framework",
12171301
target="_blank",
12181302
className= "tm-link",
12191303
style={"color": '#374EA2'}
@@ -1288,6 +1372,7 @@ def get_base_layout(**kwargs):
12881372
"overflowY": "auto",
12891373
"whiteSpace": "pre-wrap",
12901374
"opacity": 1,
1375+
"minWidth":"200px"
12911376
},
12921377
delay={
12931378
"hide": 0,

0 commit comments

Comments
 (0)