def standard_layout(self, controls=[], visuals=[]) -> List:
"""
Return a basic layout with controls on the left and visuals in the
center of the screen.
:param controls: The controls (slicers etc.) of your dashboard as a `List`
:param visuals: The visuals (charts etc.) of your dashboard as a `List`
This function can be used in your implementation of dashboard() like
this::
def dashboard(self) -> List:
return standard_layout(
controls = [control1, control2, ...],
visuals = [visual1, visual2, ...]
)
"""
return [
Row([
Col(
width=12,
children=[
Div(className="slicers-card", children=controls)
],
),
]),
Row(
[
Col(width=12,
children=[Div(children=self.visuals_wrapper(visuals))])
],
justify="start",
),
]
def get_item_hud(hud_title='LCL FORECAST ANALYSIS', hud_1_0='', hud_1_1='') \
-> Container:
"""
:param hud_title: str top of HUD
:param hud_1_0: str Byline Position 1
:param hud_1_1: str Byline Position 2
:param
hud_1_2: str
:return:
Container: 'item-hud-container'
Row
Container:'item-hud-title-container'
Col
H1: 'hud-title'
Container: 'item-hud-byline-container'
Row
Navbar: item-hud-bar'
NavItem:
H2: 'hud-1-0'
H2: hud-1-1'
Row
Tabs: 'table-tabs-nav'
Tab: 'tab-all
"""
layout = Container(
fluid=True,
id='item-hud-container',
children=[
Row(
Container(
id='item-hud-title-container',
children=[Col(H1(id='hud-title', children=hud_title))])),
Container(
id='item-hud-byline-container',
style=VISIBILITY_HIDDEN,
children=[
Row([
Navbar(id='item-hud-bar',
children=[
NavItem(H2(hud_1_0, id='hud-1-0')),
NavItem(H2(hud_1_1, id='hud-1-1'))
])
]),
Row([
Tabs(
id='table-tabs-nav',
children=[Tab(tab_id='tab-all', label='All')],
)
],
id='item-hub-tabs-row')
]),
Div(id='datasource-1'),
Div(id='datasource-2')
])
return layout
def __init__(self):
super().__init__(
children=Row([
Col(Graph()),
Col(Dashboard(), width=3)
]),
style={'width': '99vw'},)
def get_html(self):
"""Glues individual setup components together
"""
return Div(children=self.components["navbar"].html + [
Row(
children=[
Col(
id="sidebar",
children=self.components["sidebar"].html,
width=3,
className="mt-4",
),
Col(width=1),
Col(
self.components["header"].html +
self.components["intro"].html +
self.components["tool_details"].html +
self.components["visualizations"].html +
self.components["additions"].html +
self.components["definitions"].html +
self.components["footer"].html,
width=8,
className="mt-4",
),
],
className="container",
),
])
def not_found() -> Div:
"""
Returns the 404 page not found page
"""
return Container([
Row([
Col([
H1('404 Page not found'),
internal_link('Home', href='/'),
])
])
])
def get_html(self):
"""Glues individual setup components together
"""
return Div(children=
self.components["navbar"].html
+ [Container(
children=Row(self.components["sidebar"].html + [Div(
id="page-wrapper",
children=self.components["index"].html
)]),
fluid=True,
className="mt-5",
)])
def standard_grid_layout(self, controls=[], visuals=[]) -> List:
"""
Returns a basic layout with controls on the left and visuals in a
2xn-grid next to it.
See :meth:`standard_layout` for details on how to implement.
"""
return [
Row([
Col(
width=12,
children=Div(className="slicers-card", children=controls),
),
]),
Row(
[
Col(width=6, children=self.visuals_wrapper(visuals[::2])),
Col(width=6, children=self.visuals_wrapper(visuals[1::2])),
],
justify="start",
),
]
def index() -> Div:
'''
Returns the app index page
'''
return Container([
Row([
Col([
H1('Welcome to the Index Page'),
P('You can visit a second page by'
' clicking the link below'),
internal_link('Hello Page', href='/hello'),
])
])
])
def get_main_layout(main_window_col_10,
side_menu_col_2,
top_navbar,
bottom_navbar=None):
"""
:param bottom_navbar: dash_bootstrap_components.Navbar
:param main_window_col_10: dash_bootstrap_components.
:param side_menu_col_2: dash_bootstrap_components.
:param top_navbar: dash_bootstrap_components.Navbar
:return:
"""
this_layout = Container(
[
Row(
Col([
top_navbar,
Row([side_menu_col_2, main_window_col_10])
# ,bottom_navbar
]))
],
fluid=True)
return this_layout
def get_led_display(led_id: str, led_label: str) -> Row:
value = 0.0
layout = Row([
Col([
p_text(children=led_label,
className='led-text',
style={'line-height': '2.3'})
]),
Col([
LEDDisplay(id=led_id,
className='led-display',
value=f'{value:06.0f}',
color='SeaGreen',
size=20)
])
],
style={'text-align': 'right'})
return layout
def hello() -> Div:
'''
Returns the hello page
'''
return Container([
Row([
Col([
H1('Hello, World!'),
Br(),
Input(id='hello_input',
value='',
type='text',
placeholder='Enter name',
debounce=True),
Br(),
Div(id='hello_output'),
internal_link('Home', href='/'),
])
])
])
Row(
[
Col(
[
Div(
[
'Date Range:',
Button( '1y', id='date-1yr',),
Button( '2y', id='date-2yr',),
Button( '3y', id='date-3yr',),
Button( '4y', id='date-4yr',),
Button( '5y', id='date-5yr',),
Button('All', id='date-all',),
],
className='control-header',
),
RangeSlider(
id='date-range',
min=0,
max=N,
value=[0, N],
marks={
d['index']: {
'label': (
d['Month']
if (int(d['Month'].split('/')[0]) % 3) == (umos.dt.month.values[0] % 3) or d['index'] + 1 == len(umos)
else ''
),
'style': {
'text-align': 'right',
'transform': 'translate(0,1.5em) rotate(-90deg)',
'transform-origin': '0 50% 0',
}
}
for d in marks.reset_index().to_dict('records')
},
),
],
className='control',
),
],
className='no-gutters',
),
"""
""" PREPARE APP """
external_stylesheets = [dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.layout = Div(
[
Div(html.H2('COVID-19 Data Visualization and Modeling',
style={'textAlign': 'center'}),
className='app-header'),
Row([
Col(
Div(
dcc.Markdown(explanatory_text,
style={'textAlign': 'center'})))
]),
Row(
[
Col(Div(Dropdown(
id='dropdown',
options=[{
'label': i,
'value': i
} for i in ['Recovered', 'Deaths', 'Confirmed', 'Active']],
value=cases[0]),
className='button'),
width=3),
Col(Div(Dropdown(
id='dropdown2',
def makeRoot_Contents():
return Container(
[
Div(id='store', hidden=True),
Modal([
ModalHeader([
B('Welcome to the Global Risk Management Visualization')
]),
ModalBody(
P([
B('Global risk data for everyone'),
P('It is frustrating when you can nott make a qualified assessment on the global risk position of a multinational corporation due to the enormous complexity of its operations. The global risk visualization addresses that challenge by offering the most intuitive options to interact with corporate risk data all in one place.'
),
B('Valuable insights through disparate data connections'
),
P('By connecting financial performance, global footprint, and national risk data for over 100 countries, the visualization helps you get a better sense of the political, economic and financial risks facing these organizations.'
),
Hr(),
B('Target Audience:'),
P('Investors, Students, Corporate Legal and Researchers'
),
Hr(),
B('Data Sources:'),
P('Yahoo Finance, PRS Global Risk Dataset, Orbis Global Footprint Dataset, and SAP Capital IQ M&A Dataset'
),
Hr(),
B('Team:'),
P('Jay Venkata, Keith Wertsching, and Pri Nonis'),
Hr(),
Iframe(
src=
'https://zoom.us/rec/play/vJYqcu-grzM3SIWW5ASDB_IqW9W9La6sgyke8qdYyx63VSZRYVCuMuYRMAI0fIKQL0LNUUuXXcgTFVo',
width=1106,
height=650)
])),
ModalFooter(Button('Close', id='close', className='ml-auto')),
],
id='modal',
size='xl',
is_open=True),
makeRoot_ToolsBar(),
Row(
[
Col(
makeCard('stock-plot', 'manda', hide=False),
width=12,
),
# Col(
# makeCard('table-plot', 'manda', hide = False),
# width = 3
# ),
],
className='manda'),
Row([
Col(makeCard('world-plot', 'risks', hide=True),
width=6,
style={'paddingRight': '0rem'}),
Col(makeCard('total-plot', 'risks', hide=True), width=6),
],
className='risks t1p'),
Row([
Col(makeCard('burst-plot', 'risks', hide=True),
width=3,
style={'paddingRight': '0rem'}),
Col(makeCard('trend-plot', 'risks', hide=True), width=9),
],
className='risks v1p'),
],
fluid=True,
style={})
layout = {
"autosize":True,
"automargin":True,
"margin":{"l":"30", "r":"30", "b":"50", "t":"80"},
"paper_bgcolor": "#555",
"plot_bgcolor": "rgba(1, 1, 1, 0.1)",
"titlefont": {"color": "#FFF"},
"xaxis": {"tickfont": {"color": "#FFF"}},
"yaxis": {"tickfont": {"color": "#FFF"}}
}
app.layout = html.Div([
Row([
Col([html.H1('Histogram Comparison for bme data',
style = {'margin-bottom':50, 'margin-top':20})],
width={"size": 12, "offset": 1})
]),
Row([
Col([
dcc.Graph(id='hist_1', style={'width':'95%','box-shadow':'2px 2px 2px grey'})
], width={"size": 4, "offset": 1}),
Col([
html.Div([
html.Div([
html.H3('Hist 1'),
dropdown('var_1', var),
Row([Col(html.H5('Q0: '), sm=1), Col(checklist('multi_Q0_1',dropdown_options.Q0))]),
Row([Col(html.H5('Q1: '), sm=1), Col(checklist('multi_Q1_1',dropdown_options.Q1))]),
Row([Col(html.H5('Q2: '), sm=1), Col(checklist('multi_Q2_1',dropdown_options.Q2))]),
Row([Col(html.H5('Q3: '), sm=1), Col(checklist('multi_Q3_1',dropdown_options.Q3))]),
