[
# 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
