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 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 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 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 card_main_volumn_based_measures(app): return dbc.Card(dbc.CardBody([ html.H1("Volume Based Measures", className="mb-3", style={"font-size": "1.5rem"}), html.Div( [ dbc.Button( "Edit Measures", id="button-add-measure", className="mb-3", style={ "background-color": "#38160f", "border": "none", "border-radius": "10rem", "font-family": "NotoSans-Regular", "font-size": "0.6rem" }, ), dbc.Popover( [ dbc.PopoverHeader("Eidt Measures"), dbc.PopoverBody([ html.Div([ dbc.Checklist( options=[ { 'label': "Market Share", 'value': "Market Share" }, { 'label': "Utilizer Count", 'value': "Utilizer Count" }, { 'label': "Avg Script (30-day adj) per Utilizer", 'value': "Avg Script (30-day adj) per Utilizer" }, { 'label': "Total Script Count (30-day adj) by Dosage (in thousand)", 'value': "Total Script Count (30-day adj) by Dosage (in thousand)" }, { 'label': "Total Units by Dosage (Mn)", 'value': "Total Units by Dosage (Mn)" }, ], value=[ "Market Share", "Utilizer Count", "Avg Script (30-day adj) per Utilizer" ], labelCheckedStyle={"color": "#057aff"}, id="checklist-add-measure", style={ "font-family": "NotoSans-Condensed", "font-size": "0.8rem", "padding": "1rem" }, ), ], style={ "padding-top": "0.5rem", "padding-bottom": "2rem" }), html.Div([ dbc.Button( "Comfirm", id="add-button-add-measure", className="mb-3", style={ "background-color": "#38160f", "border": "none", "border-radius": "10rem", "font-family": "NotoSans-Regular", "font-size": "0.6rem" }, ) ], style={"text-align": "center"}) ]), ], id="popover-add-measure", is_open=False, target="button-add-measure", placement="top", ), ], style={"text-align": "end"}, ), html.Div( [ card_sub1_volumn_based_measures( app, "Market Share", piechart_utilizer1, 'fig', 0.85), card_sub1_volumn_based_measures(app, "Utilizer Count", tbl_utilizer1, 'dash', 0.6), card_sub1_volumn_based_measures( app, "Avg Script (30-day adj) per Utilizer", bargraph_script_per_util, 'fig', 0.6), card_sub2_volumn_based_measures( app, "Total Script Count (30-day adj) by Dosage (in thousand)", bargraph_tot_script, bargraph_tot_script_split, 'fig', 'fig', 1, 1), card_sub2_volumn_based_measures( app, "Total Units by Dosage (Mn)", bargraph_tot_unit, bargraph_tot_unit_split, 'fig', 'fig', 1, 1), ], className="mb-3", ), ]), style={ "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)", "border": "none", "border-radius": "0.5rem" })