layout = dbc.Container(
style={'background-image': 'url(/assets/img/fondo4.png)'},
fluid=True,
children=[
dbc.Row([dbc.Col()], style={'height': "90px"}),
dbc.Row([
dbc.Col(
[
html.Div(
[
html.H2("Filter by"),
],
style={
'marginBottom': 50,
'marginTop': 30,
"color": "white",
"text-align": "center"
}),
html.Div(
[
html.H2("Date Picker",
style={
"color": "white",
'marginBottom': 25,
'marginTop': 25,
"text-align": "center"
}),
dcc.DatePickerRange(
id="range-picker",
min_date_allowed=date(2019, 9, 1),
start_date=date(2019, 9, 1),
end_date=date(2019, 12, 31),
display_format='YYYY-MM-DD',
clearable=True,
calendar_orientation="horizontal", #vertical
start_date_placeholder_text='Start Date',
with_portal=False,
number_of_months_shown=2,
updatemode="bothdates",
minimum_nights=1,
reopen_calendar_on_clear=True,
),
],
style={
'marginBottom': 50,
'marginTop': 25
}),
html.Div(id='predicted-data',
style={'display': 'none'},
children=predicted_data),
html.Div(id='time-data',
style={'display': 'none'},
children=time_data),
],
width={"size": 2},
style={"background-color": "#42456f"},
className="col-md-2"),
dbc.Col(
className="col-md-10",
children=[
html.Header(
className="section-header",
children=[
html.H3('Predict de Traffic Incidents on Bogotá '),
#html.P('Check out the main roads between August and October')
]),
dbc.Row([
dbc.Col([
html.Div(
dcc.Graph(id="time-plot",
figure=fig_init,
animate=True))
])
]),
dbc.Row([
dbc.Col([
dbc.Alert([
"Take into account that the higher the prediction range, the lower the accuracy of predictions",
])
])
]),
dbc.Row([
dbc.Col([
kpi_component(
header="Average of Traffic Incidents predicted",
body=average_sinisters,
id_header="header-sinister",
id_body="mean-sinister",
color="primary"),
],
style={
'marginBottom': 25,
'marginTop': 25
}),
dbc.Col([
kpi_component(
header=
"The day with least Traffic Incidents predicted is...",
body="{}\nwith {} Traffic Incidents".format(
day_least_sinisters, num_least_sinisters),
id_header="header-sinister2",
id_body="min-sinister",
color="secondary"),
],
style={
'marginBottom': 25,
'marginTop': 25
}),
dbc.Col([
kpi_component(
header=
"Day with most Traffic Incidents predicted",
body="{}\nwith {} Traffic Incidents".format(
day_most_sinisters, num_most_sinisters),
id_header="header-sinister3",
id_body="max-sinister",
color="info"),
],
style={
'marginBottom': 25,
'marginTop': 25
})
]),
])
])
])
#Create navigation bar
navbar = dbc.Navbar(
dbc.Container(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src="/assets/ds4A-logo.png", height="25px")),
dbc.Col(dbc.NavbarBrand("", className="ml-2")),
],
align="center",
no_gutters=True,
),
href="/home",
),
dbc.NavbarToggler(id="navbar-toggler2"),
dbc.Collapse(
dbc.Nav(
# right align dropdown menu with ml-auto className
[dropdown], className="ml-auto", navbar=True
),
id="navbar-collapse2",
navbar=True,
),
]
),
color="#395CA3", #Company color
dark=True,
className="mb-4",
app.layout = dbc.Container(
[
dbc.Container(
[
html.H1(
"Sunny Streets Dashboard",
style={"textAlign": "center"},
className="display-3",
)
],
className="p-5 bg-light rounded-1 mt-3 mb-5",
),
dbc.Row(
[
dbc.Col(
[
html.H3("For Funders:"),
html.
P("Change dropdown and button values to see how your contribution can impact our work."
),
dcc.Dropdown(
id="bar-data",
clearable=False,
value="Activity",
options=[
{
"label": "Activity Center",
"value": "Activity"
},
{
"label": "Region",
"value": "Program"
},
],
),
],
width=5,
),
dbc.Col(
[html.P("")],
style={
"borderLeft": "6px solid red",
"height": "1100px",
"position": "absolute",
"left": "49.75%",
},
),
dbc.Col(
[
html.H3("For Volunteers:"),
html.
P("Use Maps for exploring services and shifts to choose a volunteer Activity Center best for you."
),
dcc.Dropdown(
id="map1-conslt-data",
clearable=False,
value="Medical Consults",
options=[
{
"label": "Medical Consults",
"value": "Medical Consults",
},
{
"label": "Patient Conversations",
"value": "Patient Conversations",
},
{
"label": "Referrals",
"value": "Referrals (Formal and informal)",
},
{
"label": "Substance use",
"value": "Substance use"
},
],
),
],
width=5,
),
],
justify="around",
),
dbc.Row(
[
dbc.Col(id="bar-col", children=[], width=5),
dbc.Col(id="map-conslt-col", children=[], width=5),
],
justify="around",
className="mb-3",
),
dbc.Row(
[
dbc.Col(
[
dcc.Dropdown(
id="hist-data",
clearable=False,
value="avg",
options=[
{
"label": "Average shift time",
"value": "avg"
},
{
"label": "Sum of shifts",
"value": "sum"
},
],
),
dcc.RadioItems(
id="checklist",
value="$10,000",
className="mt-1",
options=[{
"label": x,
"value": x
} for x in ("$0k", "$10,000", "$25,000", "$50,000")
],
),
html.Div(
id="thediv",
children=dcc.Dropdown(
id="activity-data",
clearable=False,
value="Beddown Event Brisbane CBD",
options=[{
"label": x,
"value": x
} for x in sorted(dfc.Activity.unique())],
),
),
],
width=5,
),
dbc.Col(width=5),
],
justify="around",
),
dbc.Row(
[
dbc.Col(id="hist-col", children=[], width=5),
dbc.Col(
[
dcc.Graph(
id="map2",
config={"displayModeBar": False},
figure=px.scatter_mapbox(
dfc_shift,
lat="Latitude",
lon="Longitude",
hover_data={
"Activity": True,
"Longitude": False,
"Latitude": False,
},
color="shift_start",
zoom=6,
labels={
"shift_start": "Shift Start Time"
},
).update_layout(
mapbox_style="carto-darkmatter",
margin={
"r": 0,
"t": 0,
"l": 0,
"b": 0
},
).update_traces(marker_size=20),
)
],
width=5,
),
],
justify="around",
),
dbc.Row(
[
dbc.Col(
[
html.Img(
src="/assets/image3.jpg",
style={
"maxHeight": "500px",
"maxWidth": "200px"
},
)
],
width=2,
),
dbc.Col(
[
html.Br(),
html.Br(),
html.Br(),
html.
H5("We are also always on the lookout for donations of medical equipment and supplies. If you can help in this area please contact us at [email protected]"
),
],
width=7,
),
],
justify="center",
className="mt-5 mb-2",
),
],
fluid=True,
)
US_country_df['Deaths'] = US_country_df['Deaths'].astype(int).apply(
lambda x: "{:,}".format(x))
US_country_df['Recovered'] = US_country_df['Recovered'].astype(int).apply(
lambda x: "{:,}".format(x))
US_country_df['Active'] = US_country_df['Active'].astype(int).apply(
lambda x: "{:,}".format(x))
US_country_df['Confirmed'] = US_country_df['Confirmed'].astype(
np.int64).apply(lambda x: "{:,}".format(x))
#title and contributors
US_title_contributors = dbc.Card([
dbc.CardBody([
dbc.Container([
html.H1(children='Remotely monitoring the COVID-19 pandemic: US',
className='mt-5 py-4 pb-3 text-center'),
html.
P("Dashboard contributors: Bianca A. Hernandez, Ningning Du, Neil Hsu, Youngjung Choi",
style={'font-weight': 'bold'},
className='mt-3 py-2 pb-1 text-center'),
])
])
])
#cards for tally us
US_first_card = dbc.Card([
dbc.CardBody(children=[
html.H4('Confirmed',
style={
'padding-top': '5px',
'font-weight': 'bold',
'color': '#5e4fa2'
}),
indicators = dbc.Container(
[
dbc.Row([
dbc.Col(
[
html.H2("Filters"),
html.Div(id='intermediate-value',
style={'display': 'none'},
children='indicators'),
dbc.Form([
dbc.FormGroup([
dbc.Label("Country", html_for="country"),
dcc.Dropdown(id="country",
options=[{
'label': item,
'value': item
} for item in [
x.country
for x in Country.query.all()
]],
value='United States'),
dbc.Label("Indicator",
html_for="indicator",
id='indicator_type'),
dcc.Dropdown(id="indicator",
options=[{
'label': item,
'value': item
} for item in [
x.indicator
for x in default_query.all()
]],
value='Real GDP'),
dbc.Label("Type", html_for="type"),
dcc.Dropdown(
id="type",
options=[{
'label': i,
'value': i
} for i in ("Candlesticks", "Line Chart",
"Area Chart")],
),
dcc.Graph(id="chart2", style={'height': 300})
],
className="mt-4")
])
],
lg=4,
),
html.Hr(className="my-2"),
dbc.Col([
html.H2("Economic Data"),
dcc.Graph(id="chart1", style={'height': 600}),
]),
])
],
className="mt-4",
)
dbc.Tab(gains_losses, label="Gains/Losses", tab_id='gains-losses'),
dbc.Tab(partial_stats, label="Partial Stats", tab_id='part-stats'),
dbc.Tab(basic_stats, label="Full Stats", tab_id='full-stats')
# dbc.Tab(
# html.Iframe(src=f'https://www.rbcgam.com/en/ca/products/mutual-funds/RBF900/detail',
# className='full-width'),
# label="Iframe", tab_id='iframe'
# )
],
id="tabs",
active_tab="gains-losses",
)
page_1 = dbc.Row([
dbc.Col(
[
report_title,
html.Br(),
html.Br(), metadata_cards,
html.Br(), page_1_tabs,
html.Br(),
html.Br()
# only here for demo purposes
],
className='shadow-page')
])
page_2 = gen_p2()
app.layout = dbc.Container([page_1, page_2])
app.layout = dbc.Container(
[
#1st ROW
dbc.Row([
dbc.Col(html.Div(Time_LED),
width={
"size": 6,
"offset": 3
},
style={'text-align': 'center'}),
]),
#2nd ROW
dbc.Row([html.P()]),
#3rd ROW
dbc.Row([
dbc.Col(
calendar,
width={'size': 3},
),
dbc.Col(
weather,
width={
'size': 3,
'offset': 6
},
#style={'backgroundColor':'white'}
),
]),
dbc.Row(),
dcc.Interval(
id='interval-component',
interval=1 * 1000, # in milliseconds
n_intervals=0),
#4th ROW
dbc.Row([
dbc.Col(Temp_Graph, width=4),
dbc.Col(
#maps,
News,
width={
'size': 3,
'offset': 5
},
align="center"
#style={'backgroundColor':'white'}
)
]),
#5th Row
dbc.Row([
dbc.Col(
#News,
width={'size': 5},
#style={'backgroundColor':'white'}
),
])
],
fluid=True)
body = dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.H2("Heading 2"),
html.P(
"""Donec id elit non mi porta gravida at eget metus.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non
mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
odio dui."""
),
dbc.Button("View details", color="secondary"),
],
md=4,
),
dbc.Col(
[
html.H2("Graph"),
dcc.Graph(
figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]}
),
]
),
]
)
],
className="mt-4",
)
dark=False)
# Footer docs:
# dbc.Container, dbc.Row, dbc.Col: https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout
# html.P: https://dash.plot.ly/dash-html-components
# fa (font awesome) : https://fontawesome.com/icons/github-square?style=brands
# mr (margin right) : https://getbootstrap.com/docs/4.3/utilities/spacing/
# className='lead' : https://getbootstrap.com/docs/4.3/content/typography/#lead
footer = dbc.Container(
dbc.Row(
dbc.Col(
html.P(
[
html.Span('Your Name', className='mr-2'),
html.A(html.I(className='fas fa-envelope-square mr-1'),
href='*****@*****.**'),
html.A(html.I(className='fab fa-github-square mr-1'),
href='https://github.com/dakotagporter'),
html.A(html.I(className='fab fa-linkedin mr-1'),
href='https://www.linkedin.com/in/dakotagporter'),
#html.A(html.I(className='fab fa-twitter-square mr-1'), href='https://twitter.com/<you>'),
],
className='lead'))))
# Layout docs:
# html.Div: https://dash.plot.ly/getting-started
# dcc.Location: https://dash.plot.ly/dash-core-components/location
# dbc.Container: https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout
app.layout = html.Div([
dcc.Location(id='url', refresh=False), navbar,
dbc.Container(id='page-content', className='mt-4'),
body = dbc.Container(
[
dbc.Row([
html.
P("Projections for infections and deaths in Indian States and for overall India are based in part on the model described in the following paper: ",
style={
"color": "#151516",
"font-size": "20px"
}),
]),
dbc.Row([
html.P(
dcc.Link(
"Hidden Parameters Impacting Resurgence of SARS-CoV-2 Pandemic",
href=
"https://www.medrxiv.org/content/10.1101/2021.01.15.20248217v1",
target="_blank",
style={
"color": "#6211FF",
"font-size": "20px"
}))
]),
dbc.Row([
html.Label([
'Projections on removal of lockdown can be found on this link ---> ',
html.A(
'here',
href=
'https://sars-covid-tracker-india.herokuapp.com/lockdown',
style={
"color": "#E60B1F",
'font-size': '20px'
})
],
style={
"color": "#151516",
'font-size': '20px'
})
]),
dbc.Row([
html.
P("Computing is provided by Chameleon Cloud, sponsored by NSF-USA",
style={"font-size": "10px"})
]),
dbc.Row([
html.
P("This data on confirmed cases and deaths has been updated on 9th June, 2021",
style={
"color": "#151516",
'font-size': '20px'
}),
]),
dbc.Row([html.Br()]),
dbc.Row([
dbc.Col([
html.H3(id="sim_ic", style={'display': 'inline-block'}),
html.Br(),
html.P("Cummulative", style={'display': 'inline-block'}),
daq.BooleanSwitch(id='sim_cum-ic',
on=False,
style={
'display': 'inline-block',
'size': '20%'
}),
html.Br(),
# html.P(id = "sim_ind_title", style = {'color':'green','display': 'inline-block'}),
dcc.Graph(id='sim_i_fig', figure=plot_total_cases(True))
]),
dbc.Col([
# html.H3(id = "sim_i_d", style = {'display': 'inline-block'}),
html.Br(),
html.P("Cummulative", style={'display': 'inline-block'}),
daq.BooleanSwitch(id='sim_cum-i_d',
on=False,
style={
'display': 'inline-block',
'size': '20%'
}),
html.Br(),
#html.P(id = "sim_ind_title2", style = {'color':'red','display': 'inline-block'}),
dcc.Graph(id='sim_i_fig2', figure=plot_total_deaths(True))
]),
]),
dbc.Row([
dcc.Dropdown(id='sim_st',
options=[
{
'label': 'Andaman and Nicobar',
'value': 'an'
},
{
'label': 'Andhra Pradesh',
'value': 'ap'
},
{
'label': 'Arunachal Pradesh',
'value': 'ar'
},
{
'label': 'Assam',
'value': 'as'
},
{
'label': 'Bihar',
'value': 'br'
},
{
'label': 'Chandigarh',
'value': 'ch'
},
{
'label': 'Chattisgarh',
'value': 'ct'
},
{
'label': 'Daman and Diu',
'value': 'dn_dd'
},
{
'label': 'Delhi',
'value': 'dl'
},
{
'label': 'Goa',
'value': 'ga'
},
{
'label': 'Gujarat',
'value': 'gj'
},
{
'label': 'Haryana',
'value': 'hr'
},
{
'label': 'Himachal Pradesh',
'value': 'hp'
},
{
'label': 'Jammu and Kashmir',
'value': 'jk'
},
{
'label': 'Jharkhand',
'value': 'jh'
},
{
'label': 'Karnataka',
'value': 'ka'
},
{
'label': 'Kerala',
'value': 'kl'
},
{
'label': 'Ladakh',
'value': 'ld'
},
{
'label': 'Lakshdweep',
'value': 'la'
},
{
'label': 'Madhya Pradesh',
'value': 'mp'
},
{
'label': 'Maharastra',
'value': 'mh'
},
{
'label': 'Manipur',
'value': 'mn'
},
{
'label': 'Meghalaya',
'value': 'ml'
},
{
'label': 'Mizoram',
'value': 'mz'
},
{
'label': 'Nagaland',
'value': 'nl'
},
{
'label': 'Odisha',
'value': 'or'
},
{
'label': 'Puducherry',
'value': 'py'
},
{
'label': 'Punjab',
'value': 'pb'
},
{
'label': 'Rajesthan',
'value': 'rj'
},
{
'label': 'Sikkim',
'value': 'sk'
},
{
'label': 'Tamil Nadu',
'value': 'tn'
},
{
'label': 'Telangana',
'value': 'tg'
},
{
'label': 'Tripura',
'value': 'tr'
},
{
'label': 'Uttarakhand',
'value': 'ut'
},
{
'label': 'Uttar Pradesh',
'value': 'up'
},
{
'label': 'West Bengal',
'value': 'wb'
},
],
value='dl',
style={
'color': 'black',
'width': '50%',
'display': 'inline-block',
'margin-left': '0.8%'
}),
]),
dbc.Row([
dbc.Col([
html.H3(id="sim_tc", style={'display': 'inline-block'}),
html.Br(),
html.P("Cummulative", style={'display': 'inline-block'}),
daq.BooleanSwitch(id='sim_cum-c',
on=False,
style={
'display': 'inline-block',
'size': '20%'
}),
html.Br(),
html.P(id="sim_title1",
style={
'color': 'green',
'display': 'inline-block'
}),
dcc.Graph(id='sim_fig', figure=plot_cases('dl', True))
]),
dbc.Col([
html.H3(id="sim_td", style={'display': 'inline-block'}),
html.Br(),
html.P("Cummulative", style={'display': 'inline-block'}),
daq.BooleanSwitch(id='sim_cum-d',
on=False,
style={
'display': 'inline-block',
'size': '20%'
}),
html.Br(),
html.P(id="sim_title2",
style={
'color': 'red',
'display': 'inline-block'
}),
dcc.Graph(id='sim_fig2', figure=plot_deaths('dl', True))
]),
]),
],
style={"height": "100vh"})
app.layout = dbc.Container(
[
## Navbar and Header
navbar,
html.Br(),
html.Div(style={'textAlign': 'center'},
children=[
html.H1([html.Strong('Crime Rates By State and Race')])
]),
html.Hr(style={'border': '2px solid white'}),
html.Br(),
## First two Graphs and jumbotron
dbc.Row([
dbc.Col(jumbotron, md=4),
dbc.Col([
dbc.Row([
dbc.Col(html.Div([
html.H3('Sum of Incidents'),
dcc.Graph(id='sum_indcident'),
html.Br()
],
style={'textAlign': 'center'}),
md=12),
]),
dbc.Row([
dbc.Col(html.Div([
html.H3('Average of Incident %'),
dcc.Graph(id='avg_%')
],
style={'textAlign': 'center'}),
md=12)
])
],
md=8)
],
align="center"),
html.Br(),
html.Br(),
## Total crimes % by race
dbc.Row([
dbc.Col(
html.Div([
html.H3('% of Race by All Crimes'),
dcc.Graph(id='total_crime',
figure=make_plotly_total_sums())
],
style={'textAlign': 'center'}))
]),
## US map of Crimes
dbc.Row([
dbc.Col(html.Div(
style={'textAlign': 'center'
},
children=[
dcc.Dropdown(
id='race',
options=[{
'label':
i + ' ',
'value': i
} for i in np.append(['All'], data['Race'].unique())],
value='All'),
html.Div(children=[html.Br()]),
dcc.Dropdown(id='crime',
options=[{
'label': i + ' ',
'value': i
} for i in data['Crime'].unique()],
value='Aggravated Assault'),
html.Div(children=[html.Br()]),
dcc.RadioItems(
id='rates',
options=[{
'label': 'Crime Rate by Racial Population ',
'value': 'race_pop'
}, {
'label': 'Crime Rate by Total Population ',
'value': 'total_pop'
}],
value='Crime Rate by Total Population ')
]),
md=5),
dbc.Col(html.Div(
[html.H3('Crime as % of Population'),
dcc.Graph(id='us_map')],
style={'textAlign': 'center'}),
md=7),
],
align="center"),
## Footer with Citation
html.Br(),
html.Br(),
html.Footer(
'United States Department of Health and Human Services (US DHHS), Centers for Disease Control and Prevention (CDC),'
'National Center for Health Statistics (NCHS), Bridged-Race Population Estimates, United States July 1st resident '
'population by state, county, age, sex, bridged-race, and Hispanic origin. Compiled from 1990-1999 bridged-race intercensal '
'population estimates (released by NCHS on 7/26/2004); revised bridged-race 2000-2009 intercensal population estimates (released by NCHS on 10/26/2012);'
' and bridged-race Vintage 2018 (2010-2018) postcensal population estimates (released by NCHS on 6/25/2019). Available on CDC WONDER Online Database.'
' Accessed at http://wonder.cdc.gov/bridged-race-v2018.html on Jun 9, 2020 5:27:20 PM'
)
],
fluid=True)
app.layout = dbc.Container(
[
html.H1('Phenology Library'),
html.P('Interactive mapping of NDVI signatures by land cover class.'),
# html.Hr(), #adds lines above and below the H1 and P
dbc.Row(
[
dbc.Col(
dcc.Graph(
id='map-graph',
# hoverData= {'points': [{'customdata': customdata}]}
# animate=True,
),
md=12),
],
align='center',
),
controls,
dbc.Row(
[
dbc.Col(dbc.Tabs(
[
dbc.Tab(label='Scatter', tab_id='scatter'),
dbc.Tab(label='BoxPlot', tab_id='boxplot'),
],
id='tabs',
),
html.Div(id='tab-content', className='p-4'),
md=6),
# ],
# ),
# dcc.Graph(
# id='all-lc-scatter'
# ),
# md=6),
dbc.Col(
dcc.Graph(
# TODO: Fix y axis range
id='ndvi-by-doy-scatter'),
md=6),
],
align='right',
),
],
fluid=True,
)
index_layout = dbc.Container([
navbar,
dbc.Row([
dbc.Col([
html.H3("explainerdashboard"),
dcc.Markdown(
"`explainerdashboard` is a python package that makes it easy"
" to quickly build an interactive dashboard that explains the inner "
"workings of a fitted machine learning model. This allows you to "
"open up the 'black box' and show customers, managers, "
"stakeholders, regulators (and yourself) exactly how "
"the machine learning algorithm generates its predictions."),
dcc.Markdown(
"You can explore model performance, feature importances, "
"feature contributions (SHAP values), what-if scenarios, "
"(partial) dependences, feature interactions, individual predictions, "
"permutation importances and even individual decision trees. "
"All interactively. All with a minimum amount of code."),
dcc.Markdown(
"Works with all scikit-learn compatible models, including XGBoost, Catboost and LightGBM."
),
dcc.Markdown(
"Due to the modular design, it is also really easy to design your "
"own custom dashboards, such as the custom example below."),
])
],
justify="center"),
dbc.Row([
dbc.Col([
html.H3("Installation"),
dcc.Markdown("""
You can install the library with:
```
pip install explainerdashboard
```
or:
```
conda install -c conda-forge explainerdashboard
```
""")
])
],
justify="center"),
dbc.Row([
dbc.Col([
dcc.Markdown("""
More information can be found in the [github repo](http://github.com/oegedijk/explainerdashboard)
and the documentation on [explainerdashboard.readthedocs.io](http://explainerdashboard.readthedocs.io).
""")
])
],
justify="center"),
dbc.Row([
dbc.Col([
html.H3("Examples"),
dcc.Markdown("""
Below you can find demonstrations of the three default dashboards for classification,
regression and multi class classification problems, plus one demonstration of
a custom dashboard.
"""),
])
],
justify="center"),
dbc.Row([
dbc.Col([
default_cards,
]),
]),
dbc.Row([dbc.Col([custom_cards])], justify="start")
])
dbc.NavItem(dcc.Link('Insights', href='/insights', className='nav-link')),
dbc.NavItem(dcc.Link('Process', href='/process', className='nav-link')),
],
sticky='top',
color='light',
dark=False
)
footer = dbc.Container(
dbc.Row(
dbc.Col(
html.P(
[
html.Span('Your Name', className='mr-2'),
html.A(html.I(className='fas fa-envelope-square mr-1'), href='mailto:<you>@<provider>.com'),
html.A(html.I(className='fab fa-github-square mr-1'), href='https://github.com/<you>/<repo>'),
html.A(html.I(className='fab fa-linkedin mr-1'), href='https://www.linkedin.com/in/<you>/'),
html.A(html.I(className='fab fa-twitter-square mr-1'), href='https://twitter.com/<you>'),
],
className='lead'
)
)
)
)
# For more explanation, see:
# Plotly Dash User Guide, URL Routing and Multiple Apps
# https://dash.plot.ly/urls
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
navbar,
app = Dash(__name__, external_stylesheets=[dbc.themes.LUMEN])
df = pd.read_csv('https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Dash_Interactive_Graphs/Candle_OHLC/oil_prices.csv')
df.Date = pd.to_datetime(df.Date)
app.layout = dbc.Container([
html.H1('Candlestick vs OHLC Charts', style={'textAlign': 'center'}),
dbc.Row([
dbc.Col([html.Label('Volume of oil over:'),
dcc.Input(id='oil-volume', type='number', min=80000,
max=700000, step=10000, value=80000)
], width=4),
]),
dbc.Row([
dbc.Col([html.Label('CandleStick Chart')], width=dict(size=4, offset=2)),
dbc.Col([html.Label('OHLC Chart')], width=dict(size=4, offset=2))
]),
dbc.Row([
dbc.Col([dcc.Graph(id='candle', figure={}, style={'height': '80vh'})], width=6),
dbc.Col([dcc.Graph(id='ohlc', figure={}, style={'height': '80vh'})], width=6)
]),
], fluid=True)
@callback(
Output(component_id='candle', component_property='figure'),
Output(component_id='ohlc', component_property='figure'),
Input(component_id='oil-volume', component_property='value')
def create_dashboard2(server):
external_stylesheets = [dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__,
server=server,
url_base_pathname='/dashboard2/',
external_stylesheets=external_stylesheets)
selected = []
atc_list = get_atc()
app.layout = html.Div(
className='total-container',
children=[
dbc.Container(
fluid=True,
children=[
html.Div(className='header',
children=[
html.H3(className='title',
children="연관 약품 분석 (빈도/관련도)")
]),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.Label('단일/복합처방 선택'),
dcc.Dropdown(id='select1',
className='select',
options=[{
'label': '단일',
'value': 'single'
}, {
'label': '복수',
'value': 'multi'
}],
placeholder='성분 개수',
searchable=False),
dbc.Label('AND/OR 조건선택'),
dcc.Dropdown(id='select2',
className='select',
searchable=False),
dbc.Label('품목선택'),
dcc.Dropdown(
id='elements',
className='select',
options=[{
'label': str(a) + ' : ' + str(b),
'value': str(a)
} for a, b in zip(atc_list[0], atc_list[1])
],
placeholder='원하는 성분 선택',
disabled=False,
multi=True,
value=None,
optionHeight=80,
),
dbc.Label('지지도 설정'),
dcc.Slider(id='num',
min=0.01,
max=40,
step=0.01,
value=10,
included=False,
marks={
i: str(i) + '%'
for i in range(10, 41, 10)
}),
html.Br(),
dbc.Button("연관 품목 조회",
id="submit_button",
n_clicks=0,
color="primary",
outline=True,
block=True,
loading_state={'is_loading': True}),
html.Br(),
dbc.Spinner(html.Div(id="alert-msg"))
],
body=True),
],
md=3),
dbc.Col(
[
dbc.Row([
dbc.Card([
dbc.CardBody([
dbc.Label('병용처방항목 필터링'),
dcc.Dropdown(
id='filter-freq-elements',
options=[{
'label':
str(a) + ' : ' + str(b),
'value':
str(a)
} for a, b in zip(
atc_list[0], atc_list[1])],
placeholder='필터링할 성분 선택',
disabled=False,
multi=True)
])
],
style={
'margin-bottom': '10px',
'width': '100%'
}),
dbc.Card(
[
dbc.CardBody([
html.Div(
id='freq-download-button',
children=[
html.
A(html.
Button(
'다운로드',
n_clicks=0),
id='freq_csv_link',
href=
"/dashboard2/download_freq_csv"
),
html.Span(
id='freq_len',
className=
'size_explain')
]),
dt.DataTable(
id='datatable-paging-freq',
columns=[{
'name': i,
'id': i,
'deletable': True
} for i in sorted(
df_freq.columns) if
i != 'total_set'],
page_current=0,
page_size=PAGE_SIZE,
page_action='custom',
sort_action='custom',
sort_mode='multi',
filter_action='custom',
filter_query='',
sort_by=[],
style_cell={
'whiteSpace': 'normal',
'height': 'auto'
},
style_table={
'minWidth': '100%',
'overflowX': 'auto'
})
])
],
style={
'width': '100%',
'minHeight': '500px',
'padding': '15px'
})
],
style={'margin-bottom': '40px'
}), #,md=4
dbc.Row([
dbc.Card([
dbc.CardBody([
dbc.Label('병용처방항목 필터링'),
dcc.Dropdown(
id='filter-asso-elements',
options=[{
'label':
str(a) + ' : ' + str(b),
'value':
str(a)
} for a, b in zip(
atc_list[0], atc_list[1])],
placeholder='필터링할 성분 선택',
disabled=False,
multi=True)
])
],
style={
'margin-bottom': '10px',
'width': '100%'
}),
dbc.Card(
[
dbc.CardBody([
html.Div(
id='asso-download-button',
children=[
html.
A(html.
Button(
'다운로드',
n_clicks=0),
id='asso_csv_link',
href=
"/dashboard2/download_asso_csv"
),
html.Span(
id='asso_len',
className=
'size_explain')
]),
dt.DataTable(
id='datatable-paging-asso',
columns=[
{
'name': i,
'id': i,
'deletable': True
} for i in sorted(
df_asso.columns)
if i != 'total_set'
],
page_current=0,
page_size=PAGE_SIZE,
page_action='custom',
sort_action='custom',
sort_mode='multi',
filter_action='custom',
filter_query='',
sort_by=[],
style_cell={
'whiteSpace': 'normal',
'height': 'auto'
},
style_table={
'minWidth': '100%',
'overflowX': 'auto'
})
])
],
style={
'width': '100%',
'minHeight': '500px',
'padding': '15px'
})
])
],
md=9) #,md=5
]),
html.Div(id='intermediate_freq', style={'display':
'none'}),
html.Div(id='intermediate_asso', style={'display': 'none'})
],
style={"margin": "auto"})
])
init_callback(app, atc_list)
return app
body = dbc.Container([
html.Div(dcc.Dropdown(id='yaxis',
options=[{
'label': i.title(),
'value': i
} for i in zones],
value='All'),
style={
'width': '48%',
'float': 'left',
'display': 'inline-block',
'padding-bottom': '5px'
}),
html.Button(id='submit-button',
n_clicks=0,
children='Submit',
style={
'fontSize': 18,
'display': 'inline-block'
}),
html.Div(dcc.Graph(id='map', figure=gen_map(df))),
html.Div(dcc.Graph(id='graph-lots'),
style={
'margin': 0,
'height': 900,
'height': '33%'
}),
html.Div([
dbc.Row([
dt.DataTable(
id='datatable-lots',
data=df.to_dict("records"),
columns=[{
"name": i,
"id": i,
"type": "text"
} for i in sorted(df.columns.difference(['geom']))],
row_selectable="multi",
sorting=True,
filtering=True,
selected_rows=[],
),
#style={'margin': 0, 'width':'100%', 'height': '33%', 'verticalAlign':'top'}
]),
html.Div(id='selected-indexes'),
])
])
body = dbc.Container(
[
html.Br(),
dbc.Row(
[
dbc.Col(
html.Div([
html.Br([]),
html.H5("Bienvenue!",
style={
'color': 'red',
'backgroundColor': 'white'
}),
html.Br([]),
html.P(
"\
Vous êtes sur la page d'acceuil du tutoriel de développement de dashbord en python avec Dash. \
Je vous présente ici les données du trafic web d'un site internet. Ce sont notamment les accès avec \
differents appareils (mac, android, iphone_ipad, autre_pc) que vous pouvez visualiser ici sur\
2 mois (Octobre - novembre) grâce à un sélecteur de date dans la table ci-dessous.",
style={"color": "#000406"},
),
html.P(
"\
Ces données ont par la suite été transformées pour interagir dynamiquement avec des graphiques. \
On y affiche des informations telles que: le nombre total d'accès à la plateform par appareil , \
les graphiques d'évolution des accès par appareil , par type d'appareil et par système d'exploitation sur plusieurs mois et années.\
Vous pouvez accéder au dashboard via la barre de navigation ou en cliquant directement ci-dessous.",
style={"color": "#000406"},
),
dbc.Row([
#Navlink dashbord
dbc.NavLink("Accès Dashbsoard",
href="/dashboard",
style={'color': 'blue'})
])
]),
style={
'color': 'red',
'backgroundColor': 'white'
})
],
justify="center",
align="center"),
html.Br(),
dbc.Row([dbc.Col(date_picker, lg=4),
dbc.Col(table, lg=8)]),
],
style={"height": "100vh"})
tab_1_layout = dbc.Container([
html.Br(),
# Se Crea la PRIMERA FILA:
dbc.Row([
# La primera fila solo incluye UNA COLUMNA, esta columna
# contiene el titulo de esta seccion:
html.Div([
html.H2('Featured Virtual Tours'),
],
style={'text-align': 'left'})
]),
html.Hr(), # Añade un linea horizontal
# Se Crea la SEGUNDA FILA:
dbc.Row([
# Solo contiene un columna que incluye un elemento
# MARKDOWN, que sera una pequeña descripcion de la seccion:
dbc.Col(
html.Div([
dcc.Markdown(id='markdown',
children='''
Immerse yourself in the city of your dreams. Click on any of the following virtual tours of properties currently available for sale in the most emblematic areas of Miami. Find the house or condo right for you and contact us to coordinate an appointment.
''')
]), ),
]),
dbc.Row([
dbc.Col(
html.Div([
html.Iframe(
src='https://player.vimeo.com/video/254172349?autoplay=1',
style={
'width': 525,
'height': 300,
'horizontal-align': 'center'
})
],
style={'text-align': 'left'}), ),
dbc.Col(
html.Div([
html.Iframe(
src='https://player.vimeo.com/video/245191755?autoplay=1',
style={
'width': 525,
'height': 300,
'horizontal-align': 'center'
})
],
style={'text-align': 'left'}), )
]),
html.Hr(), # Añade un linea horizontal
html.H2("Featured Properties"),
html.Hr(),
dbc.Row([
html.
P("Get yourself a little tour of your own through some of the most exclusive neighborhoods in Miami. Choose the key attributes of your ideal home or condo and get acquainted with the best buying opportunities available today."
)
]),
html.Hr(),
# Se Crea la TERCERA FILA:
dbc.Row([
# PRIMERA COLUMNA de la tercera fila, esta columna contiene el elemento de alarma
# que lo usamos para resaltar el texto de encabezado del RadioItem de ciudades:
dbc.Col(html.Div([dbc.Alert([
"Select city:",
], color='dark')]),
width={
'size': 2,
'offset': 2
},
align='center'),
# SEGUNDA COLUMNA de la tercera fila, esta columna contiene el elemento de alarma
# que lo usamos para resaltar el texto de encabezado del RadioItem de caracteristicas:
dbc.Col(html.Div([dbc.Alert([
"Select features:",
], color='dark')]),
width={
'size': 2,
'offset': 4
},
align='center')
]),
# Se Crea la CUARTA FILA:
dbc.Row(
[
# PRIMERA COLUMNA de la cuarta fila, esta columna contiene
# el elemento RadioItem para seleccionar una ciudad:
dbc.Col(html.Div([
dcc.RadioItems(id='city',
options=[{
'label': i,
'value': i
} for i in df_chalets['city'].unique()],
value='Coconut Grove',
labelStyle={'display': 'block'}),
],
style={
'fontFamily': 'arial',
'fontSize': 20,
}),
width={
'size': 2,
'offset': 2
}),
# SEGUNDA COLUMNA de la cuarta fila, esta columna contiene
# el elemento RadioItem para seleccionar una caracterisca:
dbc.Col(html.Div([
dcc.RadioItems(
id='characteristics',
options=[{
'label': i,
'value': i
} for i in df_chalets['characteristics'].unique()],
value='Garden',
labelStyle={'display': 'block'}),
],
style={
'fontFamily': 'arial',
'fontSize': 20
}),
width={
'size': 2,
'offset': 4
})
],
justify='start'),
html.Hr(), # Añade un linea horizontal
html.Br(),
# Se Crea la QUINTA FILA:
dbc.Row([
# Solo tiene una columna que va a incluir la imagen:
dbc.Col(html.Div([
html.Img(id='display-image',
src='children',
height=300,
style={'align': 'center'})
],
style={'text-align': 'left'}),
width={'offset': 3})
]),
])
body = dbc.Container([
dbc.Row([
dbc.Col(
html.Div(className='app-header',
children=[
html.Div('DENVER TEMPERATURE RECORD',
className="app-header--title"),
]), ),
]),
dbc.Row([
dbc.Col(html.Div('Select Product'), width=4),
dbc.Col(html.Div('Options')),
]),
dbc.Row([
dbc.Col(dcc.RadioItems(id='product',
options=[
{
'label': 'Daily data for a month',
'value': 'daily-data-month'
},
{
'label': 'Temperature graphs',
'value': 'temp-graph'
},
{
'label': 'Calendar day summaries',
'value': 'cal-day-summary'
},
],
value='daily_data_month'),
width={'size': 3}
# justify='around',
),
dbc.Col(html.Div(id='time-param'), width={'size': 1}),
dbc.Col(html.Div(id='year-picker'), width={'size': 1})
]),
dbc.Row([
dbc.Col(html.Div(id='graph-info-row')),
]),
dbc.Row([
dbc.Col(html.Div(id='period-picker'), width={'size': 3}),
dbc.Col(html.Div(id='graph-stuff'), width={'size': 8}),
]),
dbc.Row([
dbc.Col(html.H5('SELECT YEAR', style={'text-align': 'center'})),
]),
])
# -*- coding: utf-8 -*-
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from app import app
from apps.apputil import ANALYSIS_FINISHED_CONTAINER, get_graph
from metrics.ucecomparison import modelmetrics
layout = dbc.Container(
[
modelmetrics.ModelNodesNumber.ui_element(),
modelmetrics.ModelEdgesNumber.ui_element(),
# modelmetrics.ModelIndegree.ui_element(),
# modelmetrics.ModelOutdegree.ui_element(),
modelmetrics.ModelNodeConnectivity.ui_element(),
modelmetrics.ModelEdgeConnectivity.ui_element(),
modelmetrics.ModelAvgGraphDepth.ui_element(),
# modelmetrics.ModelMaxGraphDepth.ui_element(),
modelmetrics.ModelDensity.ui_element(),
],
className="tab_div tab-div-custom")
@app.callback(
Output(modelmetrics.ModelNodesNumber.get_ui_loading_id(), 'children'),
[Input(ANALYSIS_FINISHED_CONTAINER, 'children')])
def model_nodes_number_ctr(_):
return get_graph(modelmetrics.ModelNodesNumber.get_id())
@app.callback(
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''')),
id="collapse",className='nt-3 mb-3'
),
]
)
app.layout = html.Div([
dcc.Location(id="url", refresh=False),
navbar,
dbc.Jumbotron([
dbc.Container([
collapse,
html.Div(id="page-content"),
])
])
])
@app.callback(
dash.dependencies.Output("page-content", "children"),
[dash.dependencies.Input("url", "pathname")],
)
def display_page(pathname):
if pathname == "/":
return page_home
if pathname == "/page_1":
return page_1
app.layout = dbc.Container(
[
dcc.Location(id='url-input', refresh=False),
dcc.Location(id='url-output', refresh=False),
html.H1("Bitcoin KPIs"),
dbc.Container(
[
dbc.Row([
dbc.Col(html.H4("Date Range"), width=4),
dbc.Col(html.H4("Date Granularity"), width=3),
dbc.Col(html.H4("Log/Linear"), width=3)
],
justify="center"),
dbc.Row([
dbc.Col(dcc.DatePickerRange(
id='date-picker-range',
min_date_allowed=datetime.date(2009, 1, 3),
max_date_allowed=datetime.datetime.now() -
datetime.timedelta(1),
start_date=datetime.datetime.now() -
datetime.timedelta(365 * 4),
end_date=datetime.datetime.now()),
width={"size": 4}),
dbc.Col(dcc.Dropdown(id='date-granularity-picker',
options=[{
'label': 'Daily',
'value': 'day'
}, {
'label': 'Weekly',
'value': 'week'
}, {
'label':
'RHR Mode (Weekly Thurs-Weds)',
'value': 'rhr_week'
}, {
'label': 'Monthly',
'value': 'month'
}, {
'label': 'Yearly',
'value': 'year'
}, {
'label': 'Halving Era',
'value': 'halving_era'
}, {
'label': 'Market Cycle',
'value': 'market_cycle'
}],
value='week'),
width={"size": 3}),
dbc.Col(dcc.Dropdown(id='log-linear-picker',
options=[{
'label': 'Log Scale',
'value': 'log'
}, {
'label': 'Linear Scale',
'value': 'linear'
}],
value='linear'),
width={"size": 3})
],
justify="center"),
dbc.Row([dbc.Col([html.H4(" ")])], justify="center"),
dbc.Row(
[
# dbc.Col(
# html.H4("KPI Snapshot as of {}".format('do this')),
# width={"size": 2}
# ),
dbc.Col([
dbc.Tabs(
[
dbc.Tab(label='🔒 Security',
tab_id='security'),
dbc.Tab(label='📈 Block Space Economics',
tab_id='blockspace'),
dbc.Tab(label='💰 Value & Uptake',
tab_id='value'),
dbc.Tab(label='😎 Privacy & Fungibility',
tab_id='privacy'),
dbc.Tab(label='⚡ Layer 2',
tab_id='layer2'),
dbc.Tab(label='🔄 Cycles Comparison',
tab_id='cycles'),
dbc.Tab(label='✏️ Stack Stats️',
tab_id='stack-stats',
tab_style={
"color": 'rgb(242, 169, 0)'
},
label_style={
"color": 'rgb(242, 169, 0)'
}),
dbc.Tab(
label='🤔 About',
tab_id='about',
# tab_style={"color": 'rgb(0, 128, 0)'},
# label_style={"color": 'rgb(0, 128, 0)'}
),
dbc.Tab(
label='🤲 Donate',
tab_id='donate',
# tab_style={"color": 'rgb(242, 169, 0)'},
# label_style={"color": 'rgb(242, 169, 0)'}
),
],
id='tabs'),
dbc.Container(id='tabs-content', fluid=True)
]) #, width={"size": 10}
],
justify="center")
],
fluid=True)
],
fluid=True)
# -*- coding: utf-8 -*-
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from app import app
from apps.apputil import ANALYSIS_FINISHED_CONTAINER, get_graph
from analysis.playstorecorrelations import PlayStoreCorrelationsMetricAppAL
layout = dbc.Container([
dbc.Container([
PlayStoreCorrelationsMetricAppAL.ui_element(),
]),
],
className="tab_div tab-div-custom")
@app.callback(
Output(PlayStoreCorrelationsMetricAppAL.get_ui_loading_id(), 'children'),
[Input(ANALYSIS_FINISHED_CONTAINER, 'children')])
def correlations_metric_app_level_ctr(_):
return get_graph(PlayStoreCorrelationsMetricAppAL.get_id())
import dash_html_components as html
import dash_core_components as dcc
from layouts import heatmap, list_view
# Top level layout
layout = dbc.Container(
[
dbc.Container(html.H1("Spotify Trend Explorer"), fluid=True),
html.Hr(), # Horizontal line
dbc.Row(
[
dbc.Col(
heatmap.layout,
width=7,
), # className='column_left'
dbc.Col(
list_view.layout,
width=5,
)
],
no_gutters=True),
html.Hr(), # Horizontal line
dcc.Store(id='current_region', data=""),
dcc.Store(id='selected_countries', data=""),
dcc.Store(id='current_feature', data=""),
dcc.Store(id='current_date'),
dcc.Store(id='test'),
],
fluid=True)
about_layout = html.Div([
nav,
html.Div(
dbc.Container(
dbc.Row(
dcc.Markdown('''
# Uganda Covid-19 Dashboard
### Foreword
Hello and welcome, this is my second dashboard so far and I am borrowing implementations from my first dashboard to help speed things along which you can check out [here](https://african-covid19-dashboard.herokuapp.com/). The prime focus of this dashboard is as stated in the title to mainly visualize an overview of the 2019 Novel Coronavirus COVID-19 (2019-nCoV) epidemic as it relates to the Ugandan context.
This dashboard was built with Python using [Dash](https://dash.plotly.com/), with charts made in [Plotly](https://plotly.com/) and the Darkly theme of the app provided by [Bootswatch](https://bootswatch.com/darkly/).
The code behind the dashboard is available [here](https://github.com/TJMusiitwa/UG-Covid19-Dashboard). I welcome any suggestions and pull requests to help add more features or improve upon the dashboard.
### Data
The data used in this dashboard is provided by the [Johns Hopkins Center for Systems Science and Engineering](https://github.com/CSSEGISandData/COVID-19) Coronavirus repository.
Further information was provided by the [Ministry of Health](https://health.go.ug) & [Covid-19 Information Portal](https://covid19.gou.go.ug/)
### Inspiration
I would not have been able to create my this dashboard without some inspiration from the following sources, and I am highly grateful to them.
- [COVID-19 Tracker](https://github.com/ncov19-us/front-end)
### Contact
If you wish to contact me, I am available at this [email](mailto:[email protected])
'''),
justify="center",
), ))
])
]
home_layout = dbc.Container(
fluid=True,
children=[
html.H1('SBA Loan Data: 2000-2014'),
html.Hr(),
dbc.Row([
dbc.Col([
dash_table.DataTable(
id='datatable-home',
columns=[{'name': i, "id": i, 'type': table_type(df[i]) } for i in df.columns],
data=df.sample(10000).to_dict('records'),
sort_action='native',
fixed_rows={'headers': True, 'data': 0},
editable=False,
page_action='native',
filter_action='native',
)
])
]),
dbc.Row([
dbc.Col([
html.Div(id='app-2-display-value'),
dcc.Link('Go to Prediction Tool', href='/loan_prediction_tool/')
])
])
]
)
# input loan information, predict outcome, get k nearest loans from dataset
predictions_layout = dbc.Container(
dbc.Container(
[
html.Br(),
html.H1('一级标题', id='demo1'),
html.H2('二级标题'),
html.H3('三级标题'),
html.H4('四级标题'),
html.H5('五级标题'),
html.H6('六级标题'),
html.Br(), # 换行
html.Hr(), # 水平分割线
html.P('这是一段文字。' * 20),
html.P('这是另一段带有首行缩进的文字。' * 10, style={'text-indent': '3rem'}),
html.A('跳转到费弗里的Github仓库',
target='_blank',
href='https://github.com/CNFeffery/DataScienceStudyNotes'
), # 跳转到外部链接
html.Br(),
html.A('跳转到六级标题', href='#demo2'),
html.P([
'一段文字中出现了',
html.I('斜体'), '，以及代码片段',
html.Code('import dash'), '，还有一段',
html.U('带下划线的文字'), '，一段',
html.Mark('高亮标注文字'), '，以及另一段',
html.Mark('不同颜色的高亮标注文字。',
style={'background-color': 'lightblue'})
])
] + [html.Br()] * 50 +
[html.A('回到顶端一级标题', href='#demo1'),
html.H1('页内元素跳转示例标题', id='demo2')]))
]
),
dbc.FormGroup(
[
dbc.Label("Cluster count"),
dbc.Input(id="cluster-count", type="number", value=3),
]
),
],
body=True,
)
layout = dbc.Container(
[
html.H1("Iris k-means clustering"),
html.Hr(),
dbc.Row(
[
dbc.Col(controls, md=4),
dbc.Col(dcc.Graph(id="cluster-graph"), md=8),
],
align="center",
),
html.Hr(),
dbc.Row(
dbc.Col(make_dash_table(dataframe()), width={"size": 8, "offset": 3}),
align="center",
)
],
fluid=True,
)
def Homepage():
"""
The following function is used in the main.py file to build the layout of the web application.
It builds upon methods defined above or in alerts.py or navbar.py files to instantiate the various components.
"""
# Body container
body = dbc.Container(
[
# Markdown separator below the navigation bar
dbc.Row(dcc.Markdown('---')),
# Optional radio button to simulate alert events in debugging mode
dbc.Row(dbc.Col(id='live_alert_header_btn')),
# Main part of the page layout
dbc.Row([
# Left column containing the user selection area
dbc.Col(build_user_selection_area(),
id='user_selection_column',
md=3),
# Right column containing the map and various hidden components
dbc.Col(
[
# Map object added here
html.Div(build_alerts_map(), id='hp_map'),
# Interval object triggering api calls every 10 seconds
dcc.Interval(
id='interval-component',
interval=10 * 1000, # Timestep in milliseconds
n_intervals=0),
# Two placeholders updated by callbacks in main.py to trigger a change in map style
html.Div(
id='map_style_btn_switch_view'
), # Associated with the main map style button
html.Div(
id='alert_btn_switch_view'
), # Associated with the alert banner in risks mode
# Simple placeholder - Source of truth for the map style being viewed
html.Div(id='current_map_style', children='alerts'),
# Hidden html.Div storing the URL address of the detection frame of the latest alert
html.Div(id='img_url', style={'display': 'none'})
],
md=9),
]),
# Meteo graphs added here
display_meteo_graphs(display=False)
],
fluid=True,
)
# Instantiating navbar object from navbar.py
layout = html.Div([Navbar(), body])
return layout