[ # Use row and col to control vertical alignment of logo dbc.Row( [ dbc.Col((html.Img( src= 'https://prismic-io.s3.amazonaws.com/plotly-marketing-website/bd1f702a-b623-48ab-a459-3ee92a7499b4_logo-plotly.svg', height='30px')), width='auto'), dbc.Col( (dbc.NavbarBrand("Financial Dashboard")), width='auto') ], align='center', no_gutters=True, ), dbc.Row(dbc.Col(dbc.NavbarToggler(id='navbar-toggler'))), dbc.Row( dbc.Col( dbc.Collapse( dbc.Nav( dbc.Col([ nav_item, dropdown, ], width='auto'), className='ml-auto', navbar=True, ), id='navbar-collapse', navbar=True, ), )) ], ),
) #Ref: https://dash-bootstrap-components.opensource.faculty.ai/docs/components/navbar/ navbar = dbc.Navbar( dbc.Container( [ html.A( dbc.Row( [ dbc.Col(dbc.NavbarBrand('Home')), ], align = 'center', no_gutters = True, ), href='/home', ), dbc.NavbarToggler(id='navbar-toggler-product'), dbc.Collapse(dbc.Nav([product_dropdown],navbar=True), id="navbar-collapse-product", navbar=True,), dbc.NavbarToggler(id='navbar-toggler-order'), dbc.Collapse(dbc.Nav([order_dropdown],navbar=True), id="navbar-collapse-order", navbar=True,), dbc.NavbarToggler(id='navbar-toggler-customer'), dbc.Collapse(dbc.Nav([customer_dropdown],navbar=True), id="navbar-collapse-customer", navbar=True,), dbc.NavbarToggler(id='navbar-toggler-geography'),
align="center", ) # User row and col to control vertical alignment of logo/brand navbar = [ dbc.Row( [ # dbc.Col( # html.Img(src="assets/images/covid19-new-logo.png", height="30px") # ), dbc.Col( html.A( dbc.NavbarBrand([ html.P("COVID-19", className="navbar-brand-covid-19-text"), html.P("Tracker", className="navbar-brand-us-cases-text"), ]), className="page-title-link", href="/", )), ], align="center", no_gutters=True, ), dbc.NavbarToggler(id="navbar-toggler", className="navbar-toggler-1"), # dbc.Collapse(dropdown_bar, id="navbar-collapse", navbar=True), about_bar # dbc.NavbarBrand(about_bar), ]
def header(): search_bar = dbc.Row( [ dbc.Col( dbc.Button("Log Out", href="/logout", outline=True, color="dark", style={ "border-radius": "10rem", "width": "6rem", "height": "2rem", "font-size": "0.7rem" }, id="user-logout"), width="auto", ), ], no_gutters=True, className="ml-auto flex-nowrap mt-3 mt-md-0", align="center", ) header = dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col(html.Img( src=app.get_asset_url("profile_default3.png"), style={ "height": "2.5rem", "padding-top": "0px" }), style={"padding-right": "2rem"}, width="auto"), dbc.Col(html.Div([ html.H1("Kevin Scott", style={ "font-size": "1rem", "line-height": "0.6" }), html.H6("68 | Male", style={"font-size": "0.8rem" }), ], style={"padding-top": "0.5rem"}), width="auto"), dbc.Col(), ], align="center", no_gutters=True, ), ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(search_bar, id="navbar-collapse", navbar=True), ], color="#fff", sticky="top", expand=True, className="sticky-top", style={ "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)", "padding-left": "8rem", "padding-right": "8rem", "padding-top": "1rem", "padding-bottom": "1rem" } # dark=True, ) return header
], no_gutters=True, className="ml-auto flex-nowrap mt-3 mt-md-0", align="center", ) navbar = dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")), dbc.Col(dbc.NavbarBrand("Navbar", className="ml-2")), ], align="center", no_gutters=True, ), href="https://plot.ly", ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(search_bar, id="navbar-collapse", navbar=True), ], color="dark", dark=True, ) def get_navbar(): return navbar
* `Rec'd Rate` : Number of recovered divided by confirmed cases. ''' # top navbar navbar_layout = dbc.Navbar([ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row([ dbc.Col(html.Img(src=app.get_asset_url("logo.png"), height="60px",style={'stroke':'#508caf'})), dbc.Col(dbc.NavbarBrand("COVID-19", className="ml-2", style={'fontSize':'2em', 'fontWeight':'900', 'color':'#508caf'})), ],align="center",no_gutters=True), href='#'), dbc.NavbarToggler(id="navbar-toggler",className="ml-auto"), dbc.Collapse( dbc.Row([ dbc.NavLink("MAP", href='#'), dbc.NavLink("TIMELINE", href='#timeline', external_link=True), dbc.NavLink("PROGRESSION", href='#progression', external_link=True), dbc.NavLink("ABOUT", href='#about', external_link=True), ],no_gutters=True, className="ml-auto flex-nowrap mt-3 mt-md-0",align="center"), id="navbar-collapse", navbar=True), ],sticky="top",className='mb-4 bg-white',style={'WebkitBoxShadow': '0px 5px 5px 0px rgba(100, 100, 100, 0.1)',}) # add callback for toggling the collapse on small screens @app.callback( Output("navbar-collapse", "is_open"),
def get_header_contract(app, simulation_active, library_active, contract_active, Homepage_active): menu = dbc.Nav( [ dbc.NavItem( dbc.NavLink( "Contract Simulation", href="/vbc-demo/contract-optimizer/", className="nav-link", active=simulation_active, ), className="tab first", ), dbc.NavItem( dbc.NavLink( "Measures Library", href="/vbc-demo/contract-optimizer/measures-library/", className="nav-link", active=library_active, ), className="tab", ), dbc.NavItem( dbc.NavLink( "Contract Generator", #href="/vbc-demo/contract-optimizer/contract-generator/", className="nav-link", active=contract_active, ), className="tab", ), dbc.NavItem( dbc.NavLink("Back to Homepage", href="/vbc-demo/launch/", className="nav-link", active=Homepage_active), className="tab", ), ], pills=True, navbar=True, className="ml-auto flex-nowrap mt-3 mt-md-0", ) header = dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col( html.Img(src=app.get_asset_url("logo-demo.png"), style={ "height": "4rem", "padding-top": "1px" })), dbc.Col( dbc.NavbarBrand("Contract Optimizer", className="ml-2", style={ "font-family": "NotoSans-Black", "font-size": "1.5rem", "color": "#bfd4ff" })), ], align="center", no_gutters=True, ), ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(menu, id="navbar-collapse", navbar=True), ], color="#fff", sticky="top", expand=True, style={ "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)" } # dark=True, ) return header
def header(app): search_bar = dbc.Row( [ dbc.Col( dbc.Button("Log Out", outline=True, color="dark", style={ "border-radius": "10rem", "width": "6rem", "height": "2rem", "font-size": "0.7rem" }, id="logout-button"), width="auto", ), ], no_gutters=True, className="ml-auto flex-nowrap mt-3 mt-md-0", align="center", ) header = dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row([ dbc.Col(html.Img( src=app.get_asset_url("profile_default4.png"), style={ "height": "2.5rem", "padding-top": "0px" }), style={"padding-right": "2rem"}, width="auto"), dbc.Col(html.Div([ html.H1("Dr. Richard Smith", style={ "font-size": "1rem", "line-height": "0.6" }), html.H6("NPI : 0000000001", style={"font-size": "0.8rem"}), ], style={"padding-top": "0.5rem"}), width="auto"), dbc.Col(width=3), dbc.Col(html.Div([ html.H1("Area of Specialty", style={ "font-size": "0.8rem", "line-height": "0.6" }), html.H6("Cardiology", style={"font-size": "0.8rem"}), ], style={"padding-top": "0.5rem"}), width="auto"), dbc.Col(width=1), dbc.Col(html.Div([ html.H1("Organization", style={ "font-size": "0.8rem", "line-height": "0.6" }), html.H6("Demo Cardiology Physician Group", style={"font-size": "0.8rem"}), ], style={"padding-top": "0.5rem"}), width="auto"), ], align="center", no_gutters=True, style={"width": "50rem"}), ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(search_bar, id="navbar-collapse", navbar=True), ], color="#fff", sticky="top", expand=True, className="sticky-top", style={ "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)", "padding-left": "8rem", "padding-right": "8rem", "padding-top": "1rem", "padding-bottom": "1rem" } # dark=True, ) return header
def get_header(app: dash.Dash, data: GameData) -> html: """Layout for the header Arguments: app {dash.Dash} -- dash app instance data {GameData} -- game data Returns: html -- html layout """ logo = app.get_asset_url("logo.png") score_user, score_ai = count_score(data) header = dbc.Container( dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col(html.Img(src=logo, height="40px")), dbc.Col( dbc.NavbarBrand("Beat the AI - Car Edition", className="ml-2")), ], align="center", no_gutters=True, ), href="/", ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(dbc.Row( dbc.Col([ dbc.Button([ "You:", dbc.Badge( score_user, color="light", className="ml-1") ], className="mr-2"), dbc.Button([ "AI:", dbc.Badge( score_ai, color="light", className="ml-1") ], className="mr-2"), dbc.Button([ "Rounds:", dbc.Badge(str(data.current_round + 1) + '/' + str(data.max_rounds + 1), color="light", className="ml-1") ]) ]), no_gutters=True, className="ml-auto flex-nowrap mt-3 mt-md-0", align="center", ), id="navbar-collapse", navbar=True), ], color=COLOR_STATWORX, dark=True, ), className='mb-4 mt-4 navbar-custom') return header
def run_dash(path, search_criteria, mode=None): PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png" # instantiating dash application #app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) app = JupyterDash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) app.title = "Resume Analyzer" files = [f for f in listdir(path) if isfile(join(path, f))] nlp = en_core_web_sm.load() search_bar = dbc.Row( [ dbc.Badge( str(len(files)) + " Resume found", id="doc_info", href="#", color="warning", className="mr-1", ), dbc.Col( dbc.Button("Process ⚙️", color="primary", className="ml-2", id="button", n_clicks=1), width="12", ), ], no_gutters=True, className="ml-auto flex-nowrap mt-3 mt-md-0", align="center", ) navbar = dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")), dbc.Col( dbc.NavbarBrand("Resume Analyzer", className="ml-2")), ], align="center", no_gutters=True, ), href="https://shivanandroy.com", ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(search_bar, id="navbar-collapse", navbar=True), ], color="dark", dark=True, ) text = "**The table is filterable and sortable" summary = html.Div([ dbc.Row([ dbc.Col(dcc.Loading( html.Div([ html.Div(text, style={'font-size': '10px'}), dash_table.DataTable( id='table', sort_action="native", filter_action="native", style_cell={ 'font_family': 'Trebuchet MS', 'font_size': '15px', 'text_align': 'center' }, style_header={ 'backgroundColor': 'rgb(230, 230, 230)', 'fontWeight': 'bold' }, style_header_conditional=[{ 'if': { 'column_id': 'RANKING', }, 'backgroundColor': '#A8A8A8', 'color': 'black' }, { 'if': { 'column_id': 'TOTAL SCORE', }, 'backgroundColor': '#A8A8A8', 'color': 'black' }, { 'if': { 'column_id': 'RATING', }, 'backgroundColor': '#A8A8A8', 'color': 'black' }]) ])), width={ 'size': 10, 'offset': 1 }) ], align='end') ]) app.layout = html.Div([navbar, html.Br(), summary]) @app.callback( [Output("table", "columns"), Output("table", "data")], [Input("button", "n_clicks")], ) def toggle_navbar_collapse(n): if n is None: raise PreventUpdate else: files = [f for f in listdir(path) if isfile(join(path, f))] df = rank(path=path, search_criteria=search_criteria) return [{ "name": i, "id": i } for i in df.columns], df.to_dict('records') if mode == "browser": app.run_server(debug=True) if mode == "notebook": app.run_server(debug=True, mode="inline", width=950)
def get_layout(): result = met.Analysis('skeleton_output.tsv', 'Groups.csv') dropdown_comparison = [ ' vs. '.join(list(x)) for x in result.dme_comparisons() ] #print("met_comparison",result.dme_comparisons()) dropdown_list = [] for dropdown, met_comparison in zip(dropdown_comparison, result.dme_comparisons()): drop_dict = {} drop_dict['label'] = dropdown met_list = list(met_comparison) met_list = ','.join("'{0}'".format(comparison) for comparison in met_list) drop_dict['value'] = met_list dropdown_list.append(drop_dict) logo = 'data:image/png;base64,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' search_bar = dbc.Row( [ dbc.Col(dbc.Input(type="search", placeholder="Search")), dbc.Col( dbc.Button("Search", color="primary", className="ml-2"), width="auto", ), ], no_gutters=True, className="ml-auto flex-nowrap mt-3 mt-md-0", align="center", ) navbar = dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col(html.Img(src=logo, height="80")), dbc.Col(dbc.NavbarBrand("Metabolive", className="ml-2")), ], align="center", no_gutters=True, ), href="/login", ), dbc.NavItem( dbc.NavLink("Home", active=True, href="/", external_link=True)), dbc.NavItem( dbc.NavLink( "Logout", active=True, href="/logout", external_link=True)), dbc.NavItem( dbc.NavLink( "Contact Us", active=True, href="", external_link=True)), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(search_bar, id="navbar-collapse", navbar=True), ], color="dark", dark=True, ) jumbotron = dbc.Jumbotron([ html.H1("Metabolive Beta", className="display-3"), html. P("Beta testing for the interactive analysis of Metabolyze results."), ]) tab1_content = dbc.Card( dbc.CardBody([ dbc.Button("Hybrid", size="lg", outline=True, color="primary"), dbc.Button("Untargeted", size="lg", outline=True, color="primary"), dbc.Button("Global", size="lg", outline=True, color="primary") ]), className="mt-3", ) tab2_content = dbc.Card( dbc.CardBody([ dbc.Button("Run", outline=True, color="primary"), ]), className="mt-3", ) tabs = dbc.Tabs([ dbc.Tab(tab1_content, label="Metabolyze"), dbc.Tab(tab2_content, label="XIC Analysis") ]) #"'1e6 per mL','RPMI_PBS'" #[{'label': 'OLFR2 vs. GPI1', 'value': ['OLFR2', 'GPI1']}] button = html.Div([ dbc.Button("Submit", id="button"), html.Span(id="example-output"), ]) dropdown_processing = dcc.Dropdown( id='pipeline-dropdown', #options=[{'label':'OLFR2 vs. GPI1', 'value': "'OLFR2','GPI1'"}, {'label': 'GPI1 vs. OLFR2', 'value': "'GPI1','OLFR2'"}], options=[{ 'label': 'Ungrid', 'value': 'Ungrid' }], value="Ungrid" #value=["test"] ) dropdown_analysis = dcc.Dropdown( id='my-dropdown', #options=[{'label':'OLFR2 vs. GPI1', 'value': "'OLFR2','GPI1'"}, {'label': 'GPI1 vs. OLFR2', 'value': "'GPI1','OLFR2'"}], options=dropdown_list, #value=["test"] ) table = html.Div(id='output-data-upload') hidden_div = html.Div(id='intermediate-value', style={'display': 'none'}) volcano_graph = html.Div(id='volcano_graph') heatmap_graph = html.Div(id='heatmap_graph') pca_graph = html.Div(id='pca_graph') #graph = html.Div(id='graph') # def layout(): layout = html.Div([ navbar, jumbotron, tabs, dropdown_processing, dropdown_analysis, button, hidden_div, volcano_graph, heatmap_graph, pca_graph, table ]) return (layout)
def Navbar(): links = dbc.Row( [ dbc.DropdownMenu( className="nav-links-dd", color="link", label="Dataset", children=[ dbc.DropdownMenuItem("Data", href="/dataset"), dbc.DropdownMenuItem(divider=True), dbc.DropdownMenuItem("Insights", href="/interactive-graph"), ], ), dbc.DropdownMenu( className="nav-links-dd", color="link", label="Projections", children=[ dbc.DropdownMenuItem("Case Predictions", href="/projections"), dbc.DropdownMenuItem(divider=True), dbc.DropdownMenuItem("Policy Evaluation", href="/policies"), dbc.DropdownMenuItem(divider=True), dbc.DropdownMenuItem("Ventilator Allocation", href="/ventilator_allocation"), ], ), dbc.DropdownMenu( className="nav-links-dd", color="link", label="Risk Calculators", children=[ dbc.DropdownMenuItem("Mortality Risk Calculator", href="/mortality_calculator"), dbc.DropdownMenuItem(divider=True), dbc.DropdownMenuItem("Infection Risk Calculator", href="/infection_calculator") ]), dbc.DropdownMenu( className="nav-links-dd", color="link", label="About Us", children=[ dbc.DropdownMenuItem("The Team", href="/team"), dbc.DropdownMenuItem(divider=True), dbc.DropdownMenuItem("Collaborators", href="/collaborators"), dbc.DropdownMenuItem(divider=True), dbc.DropdownMenuItem("Contact Us", href="/contact"), ], ), dbc.Button( "In the Press", className="nav-links-dd", color="link", href="/press", ), ], id="navbar-links", style={"position": "static"}, no_gutters=True, className="ml-auto", ) navbar = dbc.Navbar( [ html.A( dbc.Row( [ dbc.Col( html.Img(src="assets/images/logo_black.png", height="60px")), ], align="center", ), href="/home", ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(links, id="navbar-collapse", navbar=True), ], id="navbar", color="black", dark=True, ) return navbar
def init_dashboard(server): # or create_dashboard # didn't need to be assets folder, static works well # I changed the name to assets to see if it sees all files in it external_stylesheets = ["/static/assets/style_withdash.css"] #external_stylesheets = [dbc.themes.BOOTSTRAP] ############ try later # try to create a function that call another file with this function # assume you have a "long-form" data frame # see https://plotly.com/python/px-arguments/ for more options #df = pd.DataFrame({ #"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"], #"Amount": [4, 1, 2, 2, 4, 5], #"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"] #}) #fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group") #------------------------------------------------------------------------- """Create a Plotly Dash dashboard.""" # Single function which contains the entirety of a Plotly Dash app in itself dash_app = dash.Dash( server=server, # Creating a route for Dash # of course, we could always pass / as our prefix routes_pathname_prefix='/dashapp/', external_stylesheets=external_stylesheets) #dash_app.css.append_css({ #"external_url":'dbc.themes.BOOTSTRAP' #"external_url":'https://codepen.io/chriddyp/pen/bWLwgP.css', #"external_url":"/static/assets/style_withdash.css" #}) #"""""""""""""""""""""""""""""""""""""""""""""""""""" #""""""""""""""""""""""""""""""""""""""""""""""""""""DATA GRAPHS""""""""""""""""""""""""""""""" # 2nd - Creating the body # Individuals components of the Graphs first ##urlDataPath = ('https://github.com/Juunicacio/Track-Turtle-App/tree/gh-pages/flask_plotlydash/static/data/') # url of the shapefiles as csv ##url_depthPointsDegree = 'https://raw.githubusercontent.com/Juunicacio/Track-Turtle-App/gh-pages/flask_plotlydash/static/data/%7B4%7D.degree_Acquisition_Time_Depth_Points_Tag_333A_Sept.csv' ##url_gpsPoints = 'https://raw.githubusercontent.com/Juunicacio/Track-Turtle-App/gh-pages/flask_plotlydash/static/data/%7B5%7D.reproj_Track_GPS_Points_Tag_333A_Sept.csv' # path for the Json files #path_depthPointsDegree = "/static/data/{7}.depthPointsDegree.json" #path_gpsPoints = "/static/data/{8}.gpsPointsDegree.json" # url (raw) path for Json files url_depthPointsDegree = 'https://raw.githubusercontent.com/Juunicacio/Track-Turtle-App/gh-pages/flask_plotlydash/static/data/%7B7%7D.depthPointsDegree.json' url_gpsPoints = 'https://raw.githubusercontent.com/Juunicacio/Track-Turtle-App/gh-pages/flask_plotlydash/static/data/%7B8%7D.gpsPointsDegree.json' #___________Not json file__________ #depthPointsDegree = pd.read_csv(path_depthPointsDegree) #gpsPoints = pd.read_csv(path_gpsPoints) # Depth Lon and Lat in degrees #xDegreeDepth = depthPointsDegree.geometry.x #yDegreeDepth = depthPointsDegree.geometry.y # GPS Lon and Lat in degrees #xDegreeGps = gpsPoints['GPS Longit'] #yDegreeGps = gpsPoints['GPS Latitu'] # Converted Decimals to Percentage just to use in the hovertext, for visualization, it don't work with the markers #layer1DepthsInPercentage = layer1Depths.apply(lambda x: '{:1.2f}%'.format(100 * x)) #---------------------------------- # Reading the Json files #with open(path_depthPointsDegree) as geofile: #jdata_depthPointsDegree = json.load(geofile) #with open(path_gpsPoints) as geofile: #jdata_gpsPointsDegree = json.load(geofile) # Reading the Json files from url responseDegree = requests.get(url_depthPointsDegree) responseGps = requests.get(url_gpsPoints) jdata_depthPointsDegree = responseDegree.json() jdata_gpsPointsDegree = responseGps.json() # FIRST ROW - Depth Lon and Lat in degrees (4326) #jdata_depthPointsDegree['features'][0]['geometry']['coordinates'][0] #jdata_depthPointsDegree['features'][0]['geometry']['coordinates'][1] # FIRST ROW - GPS Lon and Lat in degrees (4326) #jdata_gpsPointsDegree['features'][0]['geometry']['coordinates'][0] #jdata_gpsPointsDegree['features'][0]['geometry']['coordinates'][1] # FIRST ROW - Depth Acquisition time #jdata_depthPointsDegree['features'][0]['properties']['Acquisitio'] # FIRST ROW - GPS Acquisition time #jdata_gpsPointsDegree['features'][0]['properties']['Acquisitio'] # FIRST ROW - Depth Layer 1 #jdata_depthPointsDegree['features'][0]['properties']['Layer 1 Pe'] # CREATE A loop through Depth Lon[0] and Lat[1]-------- jxDegreeDepth = [] jyDegreeDepth = [] for i in jdata_depthPointsDegree['features']: lonDepth = i['geometry']['coordinates'][0] latDepth = i['geometry']['coordinates'][1] jxDegreeDepth.append(lonDepth) jyDegreeDepth.append(latDepth) # CREATE A loop through GPS Lon[0] and Lat[1] jxDegreeGps = [] jyDegreeGps = [] for i in jdata_gpsPointsDegree['features']: lonGps = i['geometry']['coordinates'][0] latGps = i['geometry']['coordinates'][1] jxDegreeGps.append(lonGps) jyDegreeGps.append(latGps) # Creating a loop for Depth Acquisition time ---------- jacquisitionDepth = [] for i in jdata_depthPointsDegree['features']: aquisDepth = i['properties']['Acquisitio'] jacquisitionDepth.append(aquisDepth) # Creating a loop for GPS Acquisition time jacquisitionGps = [] for i in jdata_gpsPointsDegree['features']: aquisGps = i['properties']['Acquisitio'] jacquisitionGps.append(aquisGps) """ ###### CREATE A FUNCTION THAT RUNS ALL OF THIS BLOCK FOR EACH LAYER 1-10 ################## # Looping through Layer 1 ----------------- jlayer1Depths = [] for i in jdata_depthPointsDegree['features']: layer1 = i['properties']['Layer 1 Pe'] jlayer1Depths.append(layer1) # Assigning variables for max and min float values in layer 1 percentage -------------------- jminPercLay1 = min(feature["properties"]['Layer 1 Pe'] for feature in jdata_depthPointsDegree['features']) jmaxPercLay1 = max(feature["properties"]['Layer 1 Pe'] for feature in jdata_depthPointsDegree['features']) # Converted Decimals of Layer 1 to Percentage just to use in the hovertext, for visualization, it don't work with the markers jlayer1DepthsInPercentage = [] for i in jdata_depthPointsDegree['features']: intNum_L1 = i['properties']['Layer 1 Pe']*100 percSymbol_L1 = '{:.2f}%'.format( intNum_L1 ) jlayer1DepthsInPercentage.append(percSymbol_L1) """ ########################################################################################### # Call function to return all the variables I need from the Depth data # Layer values (float), minimum Layer value (float), maximum Layer value (float), Layer values in Percentage jlayerDepths1, jminPercLay1, jmaxPercLay1, jlayerDepthsInPercentage1 = loadLayerData( 'Layer 1 Pe', jdata_depthPointsDegree) jlayerDepths2, jminPercLay2, jmaxPercLay2, jlayerDepthsInPercentage2 = loadLayerData( 'Layer 2 Pe', jdata_depthPointsDegree) jlayerDepths3, jminPercLay3, jmaxPercLay3, jlayerDepthsInPercentage3 = loadLayerData( 'Layer 3 Pe', jdata_depthPointsDegree) jlayerDepths4, jminPercLay4, jmaxPercLay4, jlayerDepthsInPercentage4 = loadLayerData( 'Layer 4 Pe', jdata_depthPointsDegree) jlayerDepths5, jminPercLay5, jmaxPercLay5, jlayerDepthsInPercentage5 = loadLayerData( 'Layer 5 Pe', jdata_depthPointsDegree) jlayerDepths6, jminPercLay6, jmaxPercLay6, jlayerDepthsInPercentage6 = loadLayerData( 'Layer 6 Pe', jdata_depthPointsDegree) jlayerDepths7, jminPercLay7, jmaxPercLay7, jlayerDepthsInPercentage7 = loadLayerData( 'Layer 7 Pe', jdata_depthPointsDegree) jlayerDepths8, jminPercLay8, jmaxPercLay8, jlayerDepthsInPercentage8 = loadLayerData( 'Layer 8 Pe', jdata_depthPointsDegree) jlayerDepths9, jminPercLay9, jmaxPercLay9, jlayerDepthsInPercentage9 = loadLayerData( 'Layer 9 Pe', jdata_depthPointsDegree) jlayerDepths10, jminPercLay10, jmaxPercLay10, jlayerDepthsInPercentage10 = loadLayerData( 'Layer 10 P', jdata_depthPointsDegree) """ # Making an histogram data for layer 1 -------------------------------------------------------- jgohistlayer1 = [go.Histogram(x=jlayerDepthsInPercentage1, #x = layerDepths1, #y=layerDepths1, opacity=0.4, marker=dict(color='orange'))] jlayout1 = go.Layout(barmode='overlay', title='Layer 1 histogram', yaxis_title='Count', xaxis_title='Layer 1 occurrence in %') # or 'Percentage (%) of occurrence in Layer 1' jfig1 = go.Figure( {"data": jgohistlayer1, "layout": jlayout1}) #py.iplot(jfig1, filename='Layer 1 histogram') --------- using when debugging in jupyter notebook """ jfig1 = generateHistogramGraph(jlayerDepthsInPercentage1, 1) jfig2 = generateHistogramGraph(jlayerDepthsInPercentage2, 2) jfig3 = generateHistogramGraph(jlayerDepthsInPercentage3, 3) jfig4 = generateHistogramGraph(jlayerDepthsInPercentage4, 4) jfig5 = generateHistogramGraph(jlayerDepthsInPercentage5, 5) jfig6 = generateHistogramGraph(jlayerDepthsInPercentage6, 6) jfig7 = generateHistogramGraph(jlayerDepthsInPercentage7, 7) jfig8 = generateHistogramGraph(jlayerDepthsInPercentage8, 8) jfig9 = generateHistogramGraph(jlayerDepthsInPercentage9, 9) jfig10 = generateHistogramGraph(jlayerDepthsInPercentage10, 10) # Box Plot with plotly.express - didn't work """ # Making Go Map for Layer 1 ------------------------------------------------------------------- jgomaptraceLayer1 = go.Figure(go.Scattermapbox( lat=jyDegreeGps, lon=jxDegreeGps, name = 'GPS Data', mode="markers+lines", marker = {'size': 8, 'color': 'yellow'}, # changed the size text = jacquisitionGps, hoverinfo='text' )) jgomaptraceLayer1.add_trace(go.Scattermapbox( lat=jyDegreeDepth, lon=jxDegreeDepth, name = 'Depth data from 0 to -5 meters deep', mode = "markers+lines", text = jlayerDepths1, marker = { 'colorscale':[[0, 'green'], [1, 'rgb(0, 0, 255)']], 'color': jlayerDepths1, 'cmax':jmaxPercLay1, 'cmin':jminPercLay1, 'size': jlayerDepths1, 'sizemin':0.1, 'sizemode': 'area', 'sizeref': jmaxPercLay1 / 6 **2, 'showscale':True, 'colorbar': { 'title': 'Layer 1 occurrence in %', # including a colorbar 'titleside':'top', 'x': 0, 'y': 0.5, 'tickformat': ".0%", # Formating tick labels to percentage on color bar 'tickfont': { 'color': '#000000', 'family':"Open Sans", 'size': 14 } } }, hoverinfo='text', hovertext = jlayerDepthsInPercentage1, #100 * x), #(lambda x: '{0:1.2f}%'.format(x)#{:. n%} opacity = 1 )) jgomaptraceLayer1.update_layout( margin ={'l':0,'t':0,'b':0,'r':0}, showlegend=False, # change if you want to see the legend * mapbox = { 'style': "stamen-terrain", 'center': {'lon': 10, 'lat': 37}, 'zoom': 5}) # the "fig" is jgomaptraceLayer1 """ jgomaptraceLayer1 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths1, jmaxPercLay1, jminPercLay1, jlayerDepthsInPercentage1, 1) jgomaptraceLayer2 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths2, jmaxPercLay2, jminPercLay2, jlayerDepthsInPercentage2, 2) jgomaptraceLayer3 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths3, jmaxPercLay3, jminPercLay3, jlayerDepthsInPercentage3, 3) jgomaptraceLayer4 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths4, jmaxPercLay4, jminPercLay4, jlayerDepthsInPercentage4, 4) jgomaptraceLayer5 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths5, jmaxPercLay5, jminPercLay5, jlayerDepthsInPercentage5, 5) jgomaptraceLayer6 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths6, jmaxPercLay6, jminPercLay6, jlayerDepthsInPercentage6, 6) jgomaptraceLayer7 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths7, jmaxPercLay7, jminPercLay7, jlayerDepthsInPercentage7, 7) jgomaptraceLayer8 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths8, jmaxPercLay8, jminPercLay8, jlayerDepthsInPercentage8, 8) jgomaptraceLayer9 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths9, jmaxPercLay9, jminPercLay9, jlayerDepthsInPercentage9, 9) jgomaptraceLayer10 = generateGeoMap(jyDegreeGps, jxDegreeGps, jacquisitionGps, jyDegreeDepth, jxDegreeDepth, jlayerDepths10, jmaxPercLay10, jminPercLay10, jlayerDepthsInPercentage10, 10) """ # Making Go Scatter for Layer 1 ------------------------------------------------------------------- jgoscattermapLayer1 = go.Figure() #for vender in temp.columns: jgoscattermapLayer1.add_trace( go.Scatter( x = jacquisitionDepth, y = jlayerDepthsInPercentage1, name='Layer 1: between 0 to -5 meters deep', showlegend=True, marker = dict( line = dict( width = 1, color = 'DarkSlateGrey') ) ) ) jgoscattermapLayer1.update_xaxes( rangeslider_visible=True, rangeselector=dict( buttons=list([ dict(count=1, label="1h", step="hour", stepmode="backward"), dict(count=1, label="1d", step="day", stepmode="backward"), dict(count=1, label="1m", step="month", stepmode="backward"), dict(count=2, label="2m", step="month", stepmode="backward"), dict(count=3, label="3m", step="month", stepmode="backward"), dict(step="all") ]) ) ) jgoscattermapLayer1.update_layout(title='Depth Occurrence', legend = {'orientation': 'h', 'x': 0.1 ,'y':1.4}, showlegend=False, # change if you want to see the legend * xaxis={'title': 'Datetime'}, yaxis={'title': 'Occurrence in %'} ) # the "fig" is jgoscattermapLayer1 """ jgoscatterGraph = generateScatterGraph() addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage1, 1, 0, -5) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage2, 2, -6, -10) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage3, 3, -11, -20) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage4, 4, -21, -30) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage5, 5, -31, -40) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage6, 6, -41, -50) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage7, 7, -51, -70) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage8, 8, -71, -90) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage9, 9, -91, -110) addScatterGraphTrace(jgoscatterGraph, jacquisitionDepth, jlayerDepthsInPercentage10, 10, -111, -4095) ######################################################## END DATA GRAPHS ###################### #dash_app.layout = html.Div ([ #dcc.Upload( #id='upload-data', #children=html.Div([ #'Drag and Drop or', #################### see it on my page #html.A('Select Files') #]), #style={ #'with': '100%', #'height': '60px', #etc #}, # Allow multiple files to be uploaded #multiple=True #), #html.Div(id='output-data-upload'), #] #) #html.Div([ #html.H1(children='Hello Dash'), #html.Div(children= 'Dash: A web application framework for Python'), #dcc.Graph( #id='example-graph', #figure=jfig #)], #id='dash-container' #) ############################################################# #def parse_data(contents, filename): #content_type, content_string = contents.split(',') #decoded = base64.b64decode(content_string) #try: #if 'csv' in filename: # Assume that the user uploaded a CSV or TXT file #df = pd.read_csv( #io.StringIO(decoded.decode('utf-8'))) #elif 'xls' in filename: # Assume that the user uploaded an excel file #df = pd.read_excel(io.BytesIO(decoded)) #elif 'txt' or 'tsv' in filename: # Assume that the user upl, delimiter = r'\s+'oaded an excel file #df = pd.read_csv( #io.StringIO(decoded.decode('utf-8')), delimiter = r'\s+') #except Exception as e: #print(e) #return html.Div([ #'There was an error processing this file.' #]) #return df #html.Div([ #dcc.Graph( #id='example-graph', #figure=fig #) #]) ############################################################################################### # Create Dash Layout # Page Layout stuff ------------------------------------------------------ # The final Layout of the page will be NavBar + Body # Before the Layout let's create separately each of them #"""""""""""""""""""""""""""""""""""""""""""""""""""" # 1st - Creating a NavBar with dropdown Items # Create the components that goes in the NavBar # make a reusable navitem for the different examples nav_item = dbc.NavItem( dbc.NavLink("example - Dash Udemy Course", href="https://www.udemy.com")) # make a reusable dropdown for the different examples dropdown = dbc.DropdownMenu(children=[ dbc.DropdownMenuItem("Plotly / Dash", href='https://dash.plot.ly/'), dbc.DropdownMenuItem( "Dash Bootstrap", href='https://dash-bootstrap-components.opensource.faculty.ai/') ], nav=True, in_navbar=True, label="Important Links") # Navbar Layout navbar = dbc.Navbar([ #dbc.Container([ dbc.Col(html.H1("Track Turtle App", className='ml-5')), dbc.NavbarToggler(id="navbar-toggler2"), dbc.Collapse( dbc.Nav([nav_item, dropdown], className="ml-auto", navbar=True), id="navbar-collapse2", navbar=True, ), # A is a link element html.A( dbc.Row( [ #dbc.Col(html.H2("Track Turtle App", className= 'ml-2 left_column')), dbc.Col( html.Img( src="/static/images/{2}.loggerhead_turtle.jpg", alt="Caretta caretta", height="50px")), ], align='center', no_gutters=True), href=('/'), className='ml-4 mr-5'), #]), #id="top_banner"), #color="dark", #dark=True, #className="banner"# mb-5" ]) ############################################################################################### dash_app.layout = html.Div( [ #html.Link(rel='stylesheet', href='/static/assets/style_withdash.css'), html.Link( rel='stylesheet', href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" ), html.Div([ navbar #html.Div([html.H2("Track Turtle App") #], className= 'left_column'), #html.Div([html.Img(src="/static/images/{2}.loggerhead_turtle.jpg", alt="Caretta caretta") #], className= 'right_column') ]), #className='banner'), # ----------------------- GRAPHS ------------------------------- html.Div( className='content-dash-container ml-5 mr-5 clear', children=[ #html.H1(className= 'text-center' ,children='Hello Dash'), #html.Div(id='top', className= 'row', children=[ dbc.Row([ dbc.Col( html.Div(className='graph_text col-xl', children=[ html.Div( className='graph_description', children=[ html.H1( className='text-center', children='Hello Dash'), html.P('Layer 1 Description'), ]), ]), ), dbc.Col( html.Div( className='graph_graph col-sm', children= [ #calling histogram graph layer 1 ------------------ dcc.Graph( id='hist_graph', figure= jfig1 #################################### callback ) # ------------------- end histogram) ]), #html.Div(className= 'clear'), ) ]), #]), # ----------------------- calling histogram graph layer 1 ------------------------------- #html.Div(id='div_hist_graph', children=[ #html.H1(children='Hello Dash'), #html.Div(children= 'Dash: A web application framework for Python'), #dcc.Graph( #id='hist_graph', #figure=jfig #) # ------------------- end histogram #]), # ----------------------- calling Map graph layer 1 ------------------------------- dbc.Row([ dbc.Col( html.Div( id='div_map_graph clear', children=[ html.H2(children='Layer 1 Map'), html.Div( children= 'Turtle Track Map - Occurrence between 0 to -5 meters deep' ), dcc.Graph(id='map_graph', figure=jgomaptraceLayer1 ) # ------------------- end Map ])) ]), dbc.Row([ dbc.Col( html.Div( id='div_scatter_graph clear', children=[ html.H2(children='Scatter'), html.Div(children='Depth Occurrence in %'), dcc. Graph( # calling Scatter graph layer 1 ------------------------------- id='scatter_graph', figure=jgoscatterGraph ) # ------------------- end Scatter ])) ]), ]) ], className=' container_dashpage') # Initialize callbacks after our app is loaded # Pass dash_app as a parameter ##init_callbacks(dash_app) return dash_app.server # app is loaded #def init_callbacks(dash_app): #@app.callback( # Callback input/output #) #def update_graph(rows): # Callback logic
# User row and col to control vertical alignment of logo/brand html.A( dbc.Row( [ dbc.Col(html.P("COVID-19", className="mobile-covid-19-text"), ), dbc.Col(html.P("US Cases", className="mobile-us-cases-text"), ), ], align="center", no_gutters=True, ), className="page-title-link", href="/", ), dbc.NavbarToggler(id="mobile-navbar-toggler"), dbc.Collapse( dbc.Card( html.Div( [ html.A( html.P("About", className="mobile-nav-header"), href="/about", className="hidden-menu-anchor-tag", ), # html.A(html.P("Resources", className="mobile-nav-header"), href="/resources", className="hidden-menu-anchor-tag"), # html.A(html.P("Github", className="mobile-nav-header"), href="/#", className="hidden-menu-anchor-tag"), ], className="hidden-menu-div", ), className="hidden-menu",
# this is the default navbar style created by the NavbarSimple component default = dbc.NavbarSimple( children=[nav_item, dropdown], brand="Default", brand_href="#", sticky="top", className="mb-5", ) # here's how you can recreate the same thing using Navbar # (see also required callback at the end of the file) custom_default = dbc.Navbar( dbc.Container([ dbc.NavbarBrand("Custom default", href="#"), dbc.NavbarToggler(id="navbar-toggler1"), dbc.Collapse( dbc.Nav([nav_item, dropdown], className="ml-auto", navbar=True), id="navbar-collapse1", navbar=True, ), ]), className="mb-5", ) # this example that adds a logo to the navbar brand logo = dbc.Navbar( dbc.Container([ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row(
import datetime as dt import dash_bootstrap_components as dbc import dash_html_components as html NAVBAR = dbc.Navbar([ html.A( dbc.Row([ dbc.Col(html.Img(src="assets/logo_only.png", height="40px")), dbc.Col(dbc.NavbarBrand("econuy", className="ml-2")), ]), href="/", ), dbc.NavbarToggler(id="navbar-toggler", n_clicks=0), dbc.Collapse( dbc.Row( dbc.Nav([ dbc.NavItem( dbc.NavLink("Monitor", href="/monitor/", external_link=True)), dbc.NavItem( dbc.NavLink("Interactivo", href="/interactive/", external_link=True)), dbc.NavItem(dbc.NavLink("Inicio", href="/", external_link=True)), ]), no_gutters=True, className="ml-auto flex-nowrap mt-3 mt-md-0", align="center",
def get_header_contract(app, acp, bec, pbp, bhp): menu = dbc.Nav( [ dbc.NavItem( dbc.NavLink( "Accountable Care Programs", href="/vbc-demo/contract-optimizer/", className="nav-link", active=acp, ), className="tab first", ), dbc.NavItem( dbc.NavLink( "Bundles & Episodes of Care", href="/vbc-demo/contract-optimizer-bundle/", className="nav-link", active=bec, ), className="tab", ), dbc.NavItem( dbc.NavLink( "Performance Based Payment", #href="/vbc-demo/contract-optimizer/", className="nav-link", active=pbp, ), className="tab", ), dbc.NavItem( dbc.NavLink( "Back to Homepage", href="/vbc-demo/launch/", className="nav-link", active=bhp, ), className="tab", ), ], pills=True, navbar=True, className="ml-auto flex-nowrap mt-3 mt-md-0", ) header = dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col( html.Img(src=app.get_asset_url("logo-demo.png"), style={ "height": "4rem", "padding-top": "1px" })), dbc.Col( dbc.NavbarBrand("Contract Optimizer", className="ml-2", style={ "font-family": "NotoSans-Black", "font-size": "1.5rem", "color": "#bfd4ff" })), ], align="center", no_gutters=True, ), ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(menu, id="navbar-collapse", navbar=True), ], color="#fff", sticky="top", expand=True, style={ "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)" } # dark=True, ) return header
def layout(dashboards, root_path): # Set up dash-app layout with dashboard links on the header. navbar_dropdown = dbc.Nav( dbc.DropdownMenu( children=[ dbc.DropdownMenuItem("Hi!", header=True, id=USER_GREETING_ID), dbc.DropdownMenuItem(divider=True), dbc.DropdownMenuItem("Admin", href="/admin", external_link=True), dbc.DropdownMenuItem("Logout", href=url_for("security.logout"), external_link=True), ], nav=True, in_navbar=True, label="Account", right=True, toggleClassName="btn btn-navbar", ), className="ml-auto, d-flex flex-row order-2 order-lg-3", ) collapse_menu = dbc.Collapse( dbc.Nav( [ dbc.NavItem(dbc.NavLink(d.title(), href=d.path()), id=d.path()) for d in dashboards ], className="mr-auto", navbar=True, ), id="navbar-collapse", className="order-3 order-lg-2", navbar=True, ) navbar = dbc.Navbar( dbc.Container([ dbc.NavbarToggler(id="navbar-toggler"), dbc.NavbarBrand( [ dhtml.Img( src=url_for("static", filename="logo.svg"), className="brand-icon", ) ], href=root_path, ), navbar_dropdown, collapse_menu, ], ), sticky="top", expand="lg", ) content = dhtml.Div(id="page-content") page = [ # represents the URL bar, doesn't render anything dcc.Location(id="url", refresh=False), navbar, content, ] return dhtml.Div(page)
def get_header_mgmt_aco(app, dashboard_active, drilldown_active, report_active, Homepage_active): menu_aco = dbc.Nav( [ dbc.NavItem( dbc.DropdownMenu( label='Accountable Care Programs', children=dbc.DropdownMenuItem( 'Bundles & Episodes of Care', href='/vbc-demo/contract-manager-bundle/'), )), dbc.NavItem( dbc.NavLink( "Dashboard", href="/vbc-demo/contract-manager/", className="nav-link", active=dashboard_active, ), className="tab first", ), dbc.NavItem( dbc.NavLink( "Drilldown", href="/vbc-demo/contract-manager-drilldown/", className="nav-link", active=drilldown_active, ), className="tab", ), dbc.NavItem( dbc.NavLink( "Report Generator", href="/vbc-demo/contract-manager/report-generator/", className="nav-link", active=report_active, ), className="tab", ), dbc.NavItem( dbc.NavLink( "Back to Homepage", href="/vbc-demo/launch/", className="nav-link", active=Homepage_active, ), className="tab", ), ], pills=True, navbar=True, className="ml-auto flex-nowrap mt-3 mt-md-0", ) header = dbc.Navbar( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col( html.Img(src=app.get_asset_url("logo-demo.png"), style={ "height": "4rem", "padding-top": "1px", "padding-left": "2rem" })), dbc.Col( dbc.NavbarBrand("Contract Manager", className="ml-2", style={ "font-family": "NotoSans-Black", "font-size": "1.5rem", "color": "#bfd4ff" })), ], align="center", no_gutters=True, ), ), dbc.NavbarToggler(id="navbar-toggler"), dbc.Collapse(menu_aco, id="navbar-collapse-mgmt", navbar=True), ], color="#fff", sticky="top", expand=True, className="sticky-top", style={ "box-shadow": "0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)" } # dark=True, ) return header
html.A( dbc.Row( [ dbc.Col(html.Img(src=PLOTLY_LOGO, height='30px'), width=2), dbc.Col(dbc.NavbarBrand('UK Covid-19 Tracker'), className='pl-2'), dbc.Col( id='live-update-text' ), # Dummy div used to force data updates on polling interval ], align='center', no_gutters=True, ), href='/', ), dbc.NavbarToggler(id='navbar-toggler'), dbc.Collapse(links_bar, id='navbar-collapse', navbar=True), ], color='dark', dark=True, ) # Main content div content = html.Div(id='page-content') def serve_layout(): ''' Main application layout function, called on every browser force refresh and app home page ''' print('\nSERVING LAYOUT')
def pageNavBar(page_content, side_nav_content=None): """""" # Home link nav_item = dbc.NavItem(dbc.NavLink("Inicio", href="/home")) # Dropdown for subjects dropdown = dbc.DropdownMenu( children=[ dbc.DropdownMenuItem("Temas", header=True), dbc.DropdownMenuItem("Probabilidad y Estadistica", href="/apps/A_probStat"), dbc.DropdownMenuItem("Simulación", href="/apps/B_simulation"), dbc.DropdownMenuItem("Cadenas de Markov", href="/apps/C_markov"), dbc.DropdownMenuItem("Filas de Espera", href="/apps/D_queues"), dbc.DropdownMenuItem("Camino Crítico", href="/apps/E_critPath"), dbc.DropdownMenuItem("Programación Lineal", href="/apps/F_linProg"), dbc.DropdownMenuItem("Inventarios", href="/apps/G_inventory"), dbc.DropdownMenuItem("Transporte", href="/apps/H_transport"), dbc.DropdownMenuItem("Apps 1", href="/apps/app1"), dbc.DropdownMenuItem("Entry 1"), dbc.DropdownMenuItem("Entry 2"), dbc.DropdownMenuItem(divider=True), dbc.DropdownMenuItem("Entry 3"), ], nav=True, in_navbar=True, label="More pages", ) # Navbar core design navbar = dbc.Navbar( # dbc.Container( [ html.A( # Use row and col to control vertical alignment of logo / brand dbc.Row( [ dbc.Col( dbc.NavbarBrand("Investigación Operativa", className="ml-2")), ], align="center", no_gutters=True, ), href="/home", ), dbc.NavbarToggler(id="navbar-toggler2"), dbc.Collapse( dbc.Nav([nav_item, dropdown], className="ml-auto", navbar=True), id="navbar-collapse2", navbar=True, ), ] # ) , color="primary", dark=True, sticky='top') # Structure page with/without side navbar if side_nav_content: structure = html.Div([ dbc.Row(dbc.Col(html.Div(navbar))), dbc.Row([ dbc.Col( html.Div(side_nav_content), width=2, className= "navbar navbar-expand-md navbar-light navbar-dark bg-secondary", style={ "height": "100vh", "align-items": "start" }), dbc.Col(html.Div(page_content)), ]), ]) else: structure = html.Div([ dbc.Row(dbc.Col(html.Div(navbar))), dbc.Row([ dbc.Col(html.Div(page_content)), ]), ]) return structure