import dash
from dash import Dash, dcc, html , get_relative_path
import dash_bootstrap_components as dbc
# Create app object=================================================================
app = Dash(__name__,
use_pages=True,
external_stylesheets=[dbc.themes.CYBORG,
dbc.icons.FONT_AWESOME] )
#===================================================================================
# Create popover for data not available
popover_content=dcc.Markdown("""
Data not available for the period from 5 February 2024 to 17 February 2024.
""")
pop_info = html.Div([
dbc.Button(
html.I(className="fas fa-info-circle", style={'color': '#2fa4e7'}),
id='info-data',
color='fff',
n_clicks=0),
dbc.Popover(
children=popover_content,
target='info-data',
body=True,
style={'maxHeight': '80px'},
trigger='hover'),
])
# Create navigation bar
nav = dbc.Nav(
[
dbc.NavLink("Overview", href=get_relative_path("/"), active="exact"),
dbc.NavLink("Hourly Demand", href=get_relative_path("/hourly_demand"), active="exact"),
dbc.NavLink("Weekly Demand", href=get_relative_path("/weekly_demand"), active="exact"),
dbc.NavLink("Daily Demand", href=get_relative_path("/daily_demand"), active="exact"),
dbc.NavLink("Temperature", href=get_relative_path("/temperature"), active="exact"),
dbc.DropdownMenu(
[dbc.DropdownMenuItem('Data Source', href='https://www.eia.gov/electricity/wholesalemarkets/index.php', target='_blank'),
dbc.DropdownMenuItem('Plotly Library', href='https://plotly.com/python/', target='_blank'),
dbc.DropdownMenuItem('Dash Library', href='https://dash.plotly.com/', target='_blank'),
html.Hr(),
dbc.DropdownMenuItem('Figure Friday', href='https://community.plotly.com/t/figure-friday-2024-week-49/89206', target='_blank')],
label="Sources",
nav=True),
])
# Create app layout=================================================================
app.layout = dbc.Container([
# Header
dbc.Row([
dbc.Col([
html.Div([html.H3('Electricity Demand in New England, US, for the Year 2024', style={'fontSize': '2rem'}),
pop_info], className='d-flex align-items-center justify-content-start'),
nav], width=9),
dbc.Col(html.Img(src='assets/power_electric_tr.png', style={'height': '100px'}),
width=3, className='d-flex align-items-center justify-content-end'),
], className='align-items-center border-bottom border-primary mt-3 mb-4'),
# Page content
dash.page_container,
])
if __name__ == '__main__':
app.run_server(debug=False)