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"),