def make_button_with_popover(title, content, link=""):
"""
This makes a button that shows content on hover. Primary use is quickstart apps
and code examples
"""
id = title.replace(" ", "")
return html.Div(
[
dbc.Button(
title,
id=id,
color="light",
className="text-left ",
block=True,
),
dbc.Popover([
dbc.PopoverHeader(dcc.Link(title, href=link, target="_blank")),
dbc.PopoverBody(content, style={"padding": 30}),
],
id="popover" + id,
target=id,
trigger="legacy",
className="shadow-lg",
placement="right-start"
# placement="top"
),
], )
def generate_card(project_number, project_dictionary, spaces=0):
proj = project_dictionary[str(project_number)]
cardbody = [html.H4(dcc.Markdown(proj['title']), className="card-title"),
html.P(proj['desc'], className="card-text")]
for i in range(spaces):
cardbody.append(html.Hr())
cardbody.append(dbc.Row([
dbc.Col(html.A(html.Button("Take a look!", style={'color':'dark', 'hight':'1.5rem'}), href=proj['link']),),
dbc.Col([
dbc.Button('Technologies', id='popover-target'+str(project_number), style={'color':'primary', 'height':'2rem', 'vertical-align':'top'}),
dbc.Popover([
dbc.PopoverBody(dcc.Markdown(proj['technologies']))
],id='popover'+str(project_number), is_open=False, target='popover-target'+str(project_number))
])
])
)
card_content = [
dbc.CardImg(src=app.get_asset_url(proj['image']), top=True, style={'height':'14rem'}),
dbc.CardBody(cardbody),
]
return card_content
def macro_component():
"""
The main macro panel
:return:
"""
title = "Macro Data"
output_row = dbc.Row(
dbc.Tabs(
id="macro-tab-selector",
active_tab="ust-curve",
children=[
dbc.Tab(label="US Treasury Curve",
tab_id="ust-curve",
children=[subpanel.usd_treasury_curve()]),
dbc.Tab(
label="USD Swap Curve",
tab_id="usd-swap-curve",
children=[
subpanel.usd_swap_curve(),
dbc.Col([
html.A(
dbc.Button("Data Citations",
className="mr-1",
id="usd-swap-citations-button"))
],
width=4),
dbc.Popover(
[
dbc.PopoverHeader("USD Swap Citations"),
dbc.PopoverBody([
dbc.ListGroup([
dbc.ListGroupItem([
dbc.ListGroupItemHeading(
f"ICE USD Swap {yr} Yr"),
dbc.ListGroupItemText(
dl.macro.get_usd_swap_citation(
yr))
]) for yr in dl.macro.maturities
])
])
],
id="usd-swap-citations",
is_open=False,
target="usd-swap-citations-button",
)
]),
dbc.Tab(label="Coming Soon...",
tab_id="coming-soon",
disabled=True)
]))
obj = panel_template(title, output_row)
return obj
def popover_desc(btn):
return dbc.Popover(
[
dbc.PopoverHeader(f'{btn.capitalize()}'),
dbc.PopoverBody(f'{src_desc[btn]}')
],
id=f'popover-{btn}',
target=f'{btn}-btn',
placement=btn,
)
def make_popover(placement):
return dbc.Popover(
[
dbc.PopoverHeader("Header"),
dbc.PopoverBody(f"This is a {placement} popover"),
],
id=f"popover-{placement}",
target=f"popover-{placement}-target",
placement=placement,
)
def make_popover(popid, feature, content):
return dbc.Popover(
[
dbc.PopoverHeader(f"{feature}"),
dbc.PopoverBody(f"{content}"),
],
id=f"popover-{popid}",
is_open=False,
target=f"popover-{popid}-target",
)
def mod_criteria_button_crhr():
return [
dbc.Button(
"Click to modify criteria",
id="button-mod-dim-lv1-crhr",
className="mb-3",
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.8rem"
},
),
dbc.Popover(
[
dbc.PopoverHeader("Modify criteria"),
dbc.PopoverBody([
html.Div([
dbc.RadioItems(
options=[{
'label': c,
'value': c,
'disabled': False
} if c not in disable_list else {
'label': c,
'value': c,
'disabled': True
} for c in dimensions],
value="Medication Adherence",
labelCheckedStyle={"color": "#057aff"},
id="list-dim-lv1-crhr",
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem",
"padding": "1rem"
},
),
],
style={
"padding-top": "0.5rem",
"padding-bottom": "2rem"
})
]),
],
id="popover-mod-dim-lv1-crhr",
is_open=False,
target="button-mod-dim-lv1-crhr",
placement="top",
),
]
def mod_criteria_button(choice_list, lv='1'):
return [
dbc.Button(
"modify criteria",
id="button-mod-dim-lv" + lv,
className="mb-3",
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.8rem"
},
),
dbc.Popover(
[
dbc.PopoverHeader("Modify criteria"),
dbc.PopoverBody([
html.Div(
[
dbc.RadioItems(
options=[
{
'label': c,
'value': c
} for c in
choice_list #['Risk Status','Gender','Age Band']
],
value=choice_list[0],
labelCheckedStyle={"color": "#057aff"},
id="list-dim-lv" + lv,
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem",
"padding": "1rem"
},
),
],
style={
"padding-top": "0.5rem",
"padding-bottom": "2rem"
})
]),
],
id="popover-mod-dim-lv" + lv,
is_open=False,
target="button-mod-dim-lv" + lv,
placement="top",
),
]
def generate_popovers():
popovers = list()
for i in range(df_variables.shape[0]):
pp = dbc.Popover(
[
dbc.PopoverHeader(df_variables.iloc[i, :]["nom_variable"]),
dbc.PopoverBody(df_variables.iloc[i, :]["explication"]),
],
id=f"popover-{i}",
target=f"badge-{i}",
is_open=False,
)
popovers.append(pp)
return popovers
def create_legends_for(title="Node", legends={}):
# add title
_popover_legend_children = [dbc.PopoverHeader(f"{title} legends")]
# add values if present
if len(legends) > 0:
for key, value in legends.items():
_popover_legend_children.append(
# dbc.PopoverBody(f"Key: {key}, Value: {value}")
create_color_legend(key, value)
)
else: # otherwise add filler
_popover_legend_children.append(dbc.PopoverBody(f"no {title.lower()} colored!"))
#
return _popover_legend_children
def make_card(card_id, name, suffix, indicator_sources, indicator_header,
numerator_pairs):
card = dbc.Card(
[
dbc.CardBody(
[
html.H1(
indicator_header,
className="display-4",
style={
# "fontSize": 50,
"textAlign": "center",
"color": "#1cabe2",
},
),
html.H4(suffix, className="card-title"),
html.P(name, className="lead"),
html.Div(
fa("fas fa-info-circle"),
id=f"{card_id}_info",
# className="float-right",
style={
"position": "absolute",
"bottom": "10px",
"right": "10px",
},
),
],
style={
# "fontSize": 50,
"textAlign": "center",
},
),
dbc.Popover(
[
dbc.PopoverHeader(f"Sources: {indicator_sources}"),
dbc.PopoverBody(
dcc.Markdown(get_card_popover_body(numerator_pairs))),
],
id="hover",
target=f"{card_id}_info",
trigger="hover",
),
],
color="primary",
outline=True,
id=card_id,
)
return card
def upd_config_display(conf_id, tab, builder_algos, builder_sizes, builder_dataset, builder_traces, builder_lrs):
r=[]
conf={}
if tab == 'pick' and conf_id is not None:
conf = du.find_config(conf_id)
elif tab == 'build':
conf={ "cache_sizes": builder_sizes, "algorithms" : builder_algos,
"dataset": builder_dataset, "traces": builder_traces }
if builder_algos is not None:
for a in builder_algos:
if (a == 'cacheus' or a == 'lirs') and builder_lrs is not None: conf['cacheus, lirs'] = {"learning rate": builder_lrs}
r.extend(( dbc.PopoverHeader('Current config'),
dbc.PopoverBody(str(conf)) ,
html.Div(id='current-config', children = json.dumps(conf), style={'display': 'none'}) ) )
return r, (tab=='build' or conf_id)
def get_avalable_markets_popover(markets: list):
return dbc.Container([
dbc.Button("Markets Available In",
id="markets-popover-target",
color="secondary"),
dbc.Popover(
[
dbc.PopoverHeader("Markets"),
dbc.PopoverBody(", ".join([m.upper() for m in markets]
) if markets else "Not Available"),
],
id="markets-popover",
is_open=False,
target="markets-popover-target",
),
])
def serve_layout():
return html.Div(
style={'backgroundColor': '#FFFFFF'},
children=[
dbc.Row([dbc.Col(navbar)], align='center'),
dbc.Row(
style={'backgroundColor': '#FFFFFF'},
className='m-2',
children=[
dbc.Col(
html.Div(children=[
dbc.Button("Click for Fire Options",
id="popover-target",
color="primary"),
dbc.Popover(
[
dbc.PopoverHeader(
"Available Fire Hotspots in Ghana (Jan, 2020 to October, 2020)"
),
dbc.PopoverBody(children=tab_content),
],
id="popover",
is_open=False,
placement='bottom-end',
target="popover-target",
),
], ))
],
justify="end",
),
dbc.Row(style={'backgroundColor': '#FFFFFF'},
className='m-2',
children=[dbc.Col(dcc.Graph(id="map"))]),
dbc.Row([dbc.Col(html.Hr())], align='center'),
dbc.Row(style={'backgroundColor': '#FFFFFF'},
className='m-1',
children=[
dbc.Col(html.Div(children=graphMenu), md=3),
dbc.Col(html.Div(children=graph), md=9)
])
])
def createHelpPopover(identifier_key, img_src):
return html.Div([
dbc.Button(
id="popover-{}-target".format(identifier_key),
color="blue",
className='help-button',
children=[html.Img(src=img_src)],
),
dbc.Popover(
[
dbc.PopoverHeader(HELP_BTN[identifier_key]['header']),
dbc.PopoverBody(HELP_BTN[identifier_key]['body'],
style={'whiteSpace': 'pre-wrap'}),
],
id="popover-{}".format(identifier_key),
is_open=False,
target="popover-{}-target".format(identifier_key),
),
],
style={'display': 'inline-block'},
className="help-button")
def create_popover(info_file: str,
html_id: str,
button_title: str = "About This Chart") -> html.Div:
"""Create a HTMl button which provides a popover giving information about the chart of its parent div.
Registers the popover to a list which dynamically creates callbacks in the main application.
Args:
info_file: relative link to text file containing information about the popover in question.
html_id: specification of the HTMl id to toggle in click of the button
button_title: text to display on button
Returns: a html.Div containing a list of the button and popover dash HTML Component Objects.
"""
registered_popovers.append(html_id)
return html.Div([
dbc.Button(
button_title,
id=f"popover-target-{html_id}",
style={"fontSize": 14},
outline=True,
),
dbc.Popover(
[
dbc.PopoverBody(
dcc.Markdown(open(info_file, "r").readlines()),
style={"fontSize": 14},
),
],
id=f"popover-{html_id}",
is_open=False,
target=f"popover-target-{html_id}",
container="body",
placement="right-start",
),
])
## about
dbc.NavItem(
html.Div([
dbc.NavLink("Developed by itforecasts.com",
href=config.code,
target="_blank"),
#dbc.NavLink("Developed by itforecasts.com", href="/", id="about-popover", active=False),
dbc.Popover(
id="about",
is_open=False,
target="about-popover",
children=[
#dbc.Popover(id="about", is_open=False, target="www.itforecasts.com", children=[
#dbc.PopoverHeader("www.itforecasts.com"), dbc.PopoverBody(about.txt)
dbc.NavLink("www.itforecasts.com"),
dbc.PopoverBody(about.txt)
])
])),
## links
dbc.DropdownMenu(
label="Links",
nav=True,
children=[
dbc.DropdownMenuItem(
[html.I(className="fa fa-linkedin"), " Contacts"],
href=config.contacts,
target="_blank"),
dbc.DropdownMenuItem(
[html.I(className="fa fa-github"), " Website"],
href=config.code,
target="_blank")
className="my-svg"),
html.H6(className="control-title", children='Which restrictions?'),
dbc.Button(
'?',
className='query-button',
id='popover-control-target',
),
dbc.Popover(
[
dbc.PopoverHeader('Control'),
dbc.PopoverBody(
dcc.Markdown('''
The type of **control** determines how much we can reduce the **infection rate** of the disease (how quickly the disease is transmitted between people).
We consider control of **two risk groups**; high risk and low risk. High risk groups are more likely to get seriously ill if they catch the disease.
*For further explanation, read the [**Background**](/intro)*.
''',
style={'textAlign': 'justify'}), ),
],
id="popover-control",
is_open=False,
target="popover-control-target",
placement='right',
),
dcc.Dropdown(className="component",
id='preset',
options=[{
'label': presets_dict_dropdown[key],
render_kpi_card(covid_state, color)
for covid_state, color in zip(COVID_STATES, COVID_COLORS)
])
charts_row = dbc.Row(children=[
dbc.Col(dbc.Card(children=[
dbc.CardHeader(
dbc.Row(children=[
html.H5('Confirmed Cases',
className='card-title',
style={'text-align': 'center'}),
dbc.Popover(children=[
dbc.PopoverHeader('Infection Map'),
dbc.PopoverBody(
'Area of the bubble marks accumulative '
'number of cases in the region / country. Hover over '
'to see the actual numbers. Scroll to zoom in/out '
'and double click to reset view.')
],
id='map-popover',
is_open=False,
target='map-popover-target'),
dbc.Button('?',
id='map-popover-target',
className='button',
color='info')
],
align='center',
justify='between',
className='pl-2 pr-2')),
dbc.CardBody(children=[
),
])
''' The Following are the all the popover components.
They consist of the blue ? button, The popover itself with the header and the validation message
telling the user why/why not the current input is valid'''
mass_popover = html.Div([
dbc.Button(
"?",
id="mass-popover-target-FV",
color="info",
),
dbc.Popover(
[
dbc.PopoverHeader("Mass Input"),
dbc.PopoverBody([], id="mass_validation_message-FV"),
],
id="mass_popover-FV",
is_open=False,
target="mass-popover-target-FV",
),
], )
springConst_popover = html.Div([
dbc.Button(
"?",
id="springConst-popover-target-FV",
color="info",
),
dbc.Popover(
[
[
dbc.Col(dbc.Container(render_latex(expression=eq_expr)),
width=3
),
dbc.Col(
dbc.Input(
type="text",
id=id_eq,
placeholder=placeholder_eq
))], align="center")
,
dbc.Popover(
[
dbc.PopoverHeader("Error"),
dbc.PopoverBody("And here's some amazing content. Cool!", id=f"{id_eq}-popover-body"),
],
id=f"{id_eq}-popover",
is_open=False,
target=id_eq,
),
]
),
dbc.Container(render_latex(expression="",
id=f"{id_eq}-latex"
))
,
]
),
dbc.CardFooter(
[
dbc.Card(
dbc.CardBody(dbc.CardText("This content fades in and out"))),
id="fade",
is_in=True,
appear=False,
),
],
className="mt-2"),
html.Div(children=[
html.P([
"Click on the word ",
html.Span("popover", id="popover-target", className="text-info")
]),
dbc.Popover([
dbc.PopoverHeader("Popover header"),
dbc.PopoverBody("Popover body"),
],
id="popover",
is_open=False,
target="popover-target"),
],
className="mt-2"),
html.Div(
children=[
html.P([
"I wonder what ",
html.Span("floccinaucinihilipilification",
id="tooltip-target",
className="text-info"),
" means?",
]),
def make_button(placement):
return dbc.Button(
f"Popover on {placement}",
id=f"popover-{placement}-target",
className="mx-2",
)
app.layout = dbc.Container([
html.Div([
dbc.Button(
"Click to toggle popover", id="popover-target", color="danger"),
dbc.Popover([
dbc.PopoverHeader('Popover header'),
dbc.PopoverBody("And here's some amazing content. Cool!"),
],
id='popover',
is_open=False,
target='popover-target')
]),
html.Br(),
html.Div([make_button(p) for p in ["top", "left", "right", "bottom"]] +
[make_popover(p) for p in ["top", "left", "right", "bottom"]])
],
className='mt-3')
def toggle_popover(n, is_open):
if n:
return not is_open
def header():
return html.Div(
id='app-page-header',
children=[
html.Div(
children=[
html.A(
id='lsm-logo',
children=[
html.Img(style={
'height': '6%',
'width': '6%'
},
src='data:image/png;base64,{}'.format(
base64.b64encode(
open(f"{logo1path}",
'rb').read()).decode()))
],
href=f"{logo1URL}",
target="_blank", #open link in new tab
style={"margin-left": "10px"}),
html.Div(
children=[
html.
H5("Derivatives replication strategies central hub"
),
#html.H6("Cox-Ross-Rubinstein model")
],
style={
"display": "inline-block",
"font-family": 'sans-serif',
'transform': 'translateY(+32%)',
"margin-left": "10px"
}),
html.Div(children=[
dbc.Button("About",
id="popover-target",
outline=True,
style={
"color": "white",
'border': 'solid 1px white'
}),
dbc.Popover(children=[
dbc.PopoverHeader("About"),
dbc.PopoverBody([
f"{author}", f"\n {emailAuthor}",
html.Hr(),
f"This app was built for my Master's Thesis, under the supervision of {supervisor} ({emailSupervisor})."
]),
],
id="popover",
is_open=False,
target="popover-target"),
],
style={
"display": "inline-block",
"font-family": "sans-serif",
"marginLeft": "50%",
"margin-right": "10px"
}),
html.A(id="nova-logo",
children=[
html.Img(style={
"height": "9%",
"width": "9%"
},
src="data:image/png;base64,{}".format(
base64.b64encode(
open(f"{logo2path}",
"rb").read()).decode()))
],
href=f"{logo2URL}",
target="_blank",
style={})
],
style={"display": "inline-block"}),
],
style={
'background': bg_color,
'color': font_color,
"padding-bottom": "10px",
"padding-top": "-10px"
})
# App Instance
application = dash.Dash(name=config.name,
assets_folder=config.root+"/app/static",
external_stylesheets=[dbc.themes.SLATE,
config.fontawesome])
application.title = config.name
# Navbar
navbar = dbc.Nav(className="nav nav-pills", children=[
## logo/home
dbc.NavItem(html.Img(src=application.get_asset_url("logo.png"), height="40px")),
## about
dbc.NavItem(html.Div([
dbc.NavLink("How-to", href="/", id="about-popover", active=False),
dbc.Popover(id="about", is_open=False, target="about-popover", children=[
dbc.PopoverHeader("How it works"), dbc.PopoverBody(about.txt)
])
])),
## links
dbc.DropdownMenu(label="Links", nav=True, children=[
dbc.DropdownMenuItem([html.I(className="fa fa-linkedin"), " linkedin"], href=config.contacts, target="_blank"),
dbc.DropdownMenuItem([html.I(className="fa fa-github"), " Code"], href=config.code, target="_blank"),
dbc.DropdownMenuItem([html.I(className="fa fa-folder-open"), " Portfolio"], href=config.portfolio, target="_blank")
])
])
# ----------------------------------------------------------------------------
# Styling variables and definitions
# ----------------------------------------------------------------------------
align_center = {'textAlign' : 'center'}
# app instance
app = dash.Dash(name=config.name, assets_folder=config.root+'/application/static', external_stylesheets=[dbc.themes.LUX, config.fontawesome])
# app = dash.Dash(name=config.name, external_stylesheets=[dbc.themes.LUX, config.fontawesome])
app.title=config.name
# navbar
navbar = dbc.Nav(className = 'nav nav-pills pt-3 pl-2 bg-secondary', children=[
# logo/home
# dbc.NavItem(html.Img(src=app.get_asset_url('logo.png'),height='40px')),
dbc.NavItem(html.H2(config.name, id='nav-pills')),
# about
dbc.NavItem(className='',children=[html.Div([
dbc.NavLink('About', href='/',id='about-popover',active=False),
dbc.Popover(id='about',is_open=False,target='about-popover',children=[
dbc.PopoverHeader('How it works'),
dbc.PopoverBody(about.txt) #settings/about.py (txt = '...'')
])
])]),
# links
dbc.DropdownMenu(label='Links',nav=True,children=[
dbc.DropdownMenuItem([
html.I(className='fa fa-linkedin'),' Contacts'
],href=config.contacts, target='blank'),
dbc.DropdownMenuItem([
html.I(className='fa fa-github'),' Code'
],href=config.code, target='blank')
])
])
# Input
inputs = dbc.FormGroup([
"tc_bullet": "Bullet",
"tc_blitz": "Blitz",
"tc_classic": "Classical",
"tc_none": "Correspondence",
}
dropdown_game_type_dict = gt_dict = {
"gt_all": ".*",
"gt_std": "game",
"gt_tourney": "tournament",
}
popover_status = dbc.Popover([
dbc.PopoverHeader("Status of the Game"),
dbc.PopoverBody(
"Games can be over in a myriad of ways, either by checkmate, draw, player resignation, or when a player runs out of time. Filter the games by these conditions here."
),
],
trigger="hover",
target="dropdown_status",
placement="left")
popover_time_control = dbc.Popover([
dbc.PopoverHeader("Time Control Filter"),
dbc.PopoverBody(
"Players have a specific time to make their moves. The games in the dataset follow this convention: Bullet Games (0-3 minutes), Blitz(3-10 minutes), Classical(10 minutes+). Note: Lichess uses a slight different system today."
),
],
trigger="hover",
target="dropdown_time_control",
placement="left")
),
])
''' The Following are the all the popover components.
They consist of the blue ? button, The popover itself with the header and the validation message
telling the user why/why not the current input is valid'''
mass_popover = html.Div([
dbc.Button(
"?",
id="mass-popover-target-VI",
color="info",
),
dbc.Popover(
[
dbc.PopoverHeader("Mass Input"),
dbc.PopoverBody([], id="mass_validation_message-VI"),
],
id="mass_popover-VI",
is_open=False,
target="mass-popover-target-VI",
),
], )
springConst_popover = html.Div([
dbc.Button(
"?",
id="springConst-popover-target-VI",
color="info",
),
dbc.Popover(
[
tabs_maladies,
],
style={"padding": "0.5em 0 0.5em 0"},
)
pp_tableaux = dbc.Popover(
[
dbc.PopoverHeader("Coût par cas / coût par naissance"),
dbc.PopoverBody([
html.Span("Le "),
html.Span("coût par cas", style={"font-weight": "bold"}),
html.Span(
" désigne l’ensemble des coûts inhérents à l’occurence chez une mère d’une des trois maladies. "
),
html.Br(),
html.Span("Le "),
html.Span("coût par naissance", style={"font-weight": "bold"}),
html.Span(
" désigne le coût total rapporté au nombre de naissances, c’est-à-dire combien coûte "
),
html.Span("en moyenne", style={"font-style": "italic"}),
html.Span(" les maladies. "),
]),
],
id=f"popover-cout-cas",
target=f"badge-cout-cas",
is_open=False,
)
question_mark_tableaux = dbc.Badge("?",
pill=True,
'width': '5',
'height': '5',
'display': 'inline-block'
}),
html.Br(),
]),
])
],
className="mt-4")
body3 = dbc.Container([
dbc.NavbarSimple([
dbc.Popover([
dbc.PopoverHeader("Instruction"),
dbc.PopoverBody("""Change the slider to know the global state
from the data.
""")
],
id="popover2",
is_open=False,
target="popover-target2"),
],
brand="An Analysis on Unemployment",
brand_style={
'font-weight': 'bold',
'font-size': '30px'
}),
html.Br(),
dbc.Jumbotron([
html.H3("The Global Unemployment Rate (1991-2019)",
className="display-3"),
