from tqdm import tqdm
from leitner import *
from datetime import datetime
from exocat import ExoCat, THECAT
import dash_core_components as dcc
import dash_html_components as html
cat = ExoCat()
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Experimental web-interface for exocat"
app.layout = html.Div(children=[
html.Div([
dcc.Tabs(id="tabs", value='study-tab', children=[
dcc.Tab(label='Study', value='study-tab'),
dcc.Tab(label='Overview', value='overview-tab'),
]),
html.Div(id='tabs-content')
])
])
#app.config['suppress_callback_exceptions']=True
@app.callback(Output('tabs-content', 'children'),
[Input('tabs', 'value')])
def render_content(tab):
if tab == 'study-tab':
return(study_layout)
elif tab == 'overview-tab':
return(overview_layout)
#elif tab == "edit-tab":
# return(tab_3.tab_3_layout)
assets_folder='assets',
external_stylesheets=[dbc.themes.CERULEAN])
server = app.server
app.title = 'Group112 Dash app: Unemployment'
app.config.suppress_callback_exceptions = True
# LAYOUT
app.layout = html.Div([
html.H3("Unemployment Across Industries", className="display-4"),
html.P("""These graphs display a framework for countries to examine
their unemployment rates/counts across industries.""",
className="display-5"),
dcc.Tabs(id='tabs',
value='tab-1',
children=[
dcc.Tab(label='Job Growth Across Industries', value='tab-1'),
dcc.Tab(label='Unemployment Throughout The Years',
value='tab-2'),
dcc.Tab(label='Seasonal Unemployment', value='tab-3'),
]),
html.Div(id='tabs-content')
])
# TABS FUNCTION
@app.callback(Output('tabs-content', 'children'), [Input('tabs', 'value')])
def render_content(tab):
if tab == 'tab-1':
return tab1.content
elif tab == 'tab-2':
return tab2.content
elif tab == 'tab-3':
options=[
{
'label': 'Machine ID',
'value': 'sequencerName'
},
{
'label': 'Machine Model',
'value': 'name_model'
},
],
value=None,
placeholder='Colour By'),
dcc.Graph(id='bar_sum', ),
dcc.Tabs(id="table_tabs",
value='grouped',
children=[
dcc.Tab(label='Grouped Data', value='grouped'),
dcc.Tab(label='All Data', value='all'),
]),
html.Div(id='table_tabs_content'),
html.Div(
id='raw_df_json',
style={'display': 'none'},
children=raw_df.to_json(date_format='iso', orient='records'),
),
html.Div(
id='df_group_sum',
style={'display': 'none'},
),
])
try:
vertical = False
if not vertical:
app.layout = html.Div(
[
dcc.Tabs(tabs=[
{
'label': 'Market Value',
'value': 1
},
{
'label': 'Usage Over Time',
'value': 2
},
{
'label': 'Predictions',
'value': 3
},
{
'label': 'Target Pricing',
'value': 4
},
],
value=3,
id='tabs',
vertical=vertical),
dcc.DatePickerSingle(id='my-date-picker-single',
min_date_allowed=dt(1995, 8, 5),
max_date_allowed=dt(2017, 9, 19),
initial_visible_month=dt(2017, 8, 5),
date=dt(2017, 8, 25)),
dcc.Tabs(
id='tabs-influencers',
value='tendencias',
children=[
dcc.Tab(
label='Tendencias de Apoyo',
value='tendencias',
children=[
html.Div([
dcc.RadioItems(
id='tendencia-seleccion',
options=[{
'label': 'Colombia',
'value': 'COL'
}, {
'label': 'Argentina',
'value': 'ARG'
}, {
'label': 'Mixto',
'value': 'CA'
}],
#value='COL',
labelStyle={'display': 'inline-block'})
]),
html.Div([dcc.Graph(id='tendencia-general')]),
html.Div([dcc.Graph(id='tendencia-user')]),
]),
dcc.Tab(
label='Emociones',
value='emociones',
children=[
html.Div([
dcc.RadioItems(
id='emociones-seleccion',
options=[{
'label': 'Colombia',
'value': 'COL'
}, {
'label': 'Argentina',
'value': 'ARG'
}, {
'label': 'Mixto',
'value': 'CA'
}],
#value='COL',
labelStyle={'display': 'inline-block'})
]),
html.Div([dcc.Graph(id='emociones-general')]),
html.Div([dcc.Graph(id='emociones-user')]),
html.H5('Análisis de polaridad'),
html.
P('Evolución de sentmientos respecto a los informes del Ministerio de Salud sobre la pandemia'
),
html.Div([dcc.Graph(id='emociones-minsalud')]),
]),
dcc.Tab(
label='Coherencia',
value='coherencia',
children=[
html.Div([
dcc.RadioItems(
id='coherencia-seleccion',
options=[{
'label': 'Colombia',
'value': 'COL'
}, {
'label': 'Argentina',
'value': 'ARG'
}, {
'label': 'Mixto',
'value': 'CA'
}],
#value='COL',
labelStyle={'display': 'inline-block'})
]),
html.Div([dcc.Graph(id='coherencia-general')]),
html.Div([dcc.Graph(id='coherencia-user')]),
]),
dcc.Tab(label='Histórico de seguidores',
value='seguidores',
children=[
html.Div([
dcc.RadioItems(
id='seguidores-seleccion',
options=[
{
'label': 'Colombia',
'value': 'COL'
},
{
'label': 'Argentina',
'value': 'ARG'
},
],
labelStyle={'display': 'inline-block'})
]),
html.Div([
dcc.Dropdown(
id='seguidores-list',
placeholder="Selecciona un usuario",
)
]),
html.Div([dcc.Graph(id='seguidores-fig')]),
]),
]), )
]
app.layout = html.Div(children=[
html.H1(children='ECS 272 Assignment 3. David Gros'),
html.H2(children='Data from Global Terrorism Dataset'),
html.Div("Use the tabs to select a visualization"),
dcc.Tabs(children=[
dcc.Tab(label="'Basic Visualization' Barplot",
children=[
html.H3("Visualization 1: Barplot of events by year"),
html.Label("Regions"),
build_region_dropdown(),
dcc.Graph(id='bar-graph'),
]),
dcc.Tab(label="'Advanced Visualization' Sankey",
children=[
html.H3("Visualization 2: Sankey of successful events"),
html.Label("Year"),
build_year_select(),
html.Br(),
dcc.Graph(id='sankey-graph')
])
])
])
@app.callback(Output('bar-graph', 'figure'),
[Input('region-dropdown', 'value')])
def update_bar_chart(selected_regions):
return {
dcc.Tabs([
dcc.Tab(label='Dash open-source',
children=[
rc.Markdown(examples['getting_started_graph.py'][0],
style=styles.code_container),
html.Div(examples['getting_started_graph.py'][1],
className="example-container",
style={
'paddingLeft': '20px',
'paddingRight': '35px',
'paddingBottom': '30px'
}),
]),
dcc.Tab(
label='Dash Enterprise Design Kit',
children=[
rc.Markdown('''
```python
import dash
import dash_design_kit as ddk # Only available on Dash Enterprise
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__)
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
controls = [
ddk.ControlItem(
dcc.Slider(
id=‘year-slider’,min=df[‘year'].min(),max=df['year'].max(),value=df['year'].min(),
marks={str(year): str(year) for year in df['year'].unique()},step=None
)
)
]
app.layout = ddk.App(show_editor=True, children=[
ddk.Card(width=100, children=ddk.Graph(id='graph-with-slider')),
ddk.ControlCard(controls, width=100, orientation=‘horizontal’),
])
@app.callback(
Output('graph-with-slider', 'figure'),
Input('year-slider', 'value'))
def update_figure(selected_year):
filtered_df = df[df.year == selected_year]
fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp",
size="pop", color="continent", hover_name="country",
log_x=True, size_max=55)
fig.update_layout(transition_duration=500)
return fig
if __name__ == '__main__':
app.run_server(debug=True)
```
''',
style=styles.code_container),
html.P('Default Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/default.png')),
html.P('Mars Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/mars.png')),
html.P('Neptune Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/neptune.png')),
html.P('Miller Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/miller.png')),
html.P('Extrasolar Theme'),
html.Img(
src=tools.relpath('/assets/images/ddk/extrasolar.png')),
html.P('Preset Themes'),
html.Img(
src=tools.relpath('/assets/images/ddk/theme-editor.png')),
]),
]),
dcc.Tabs(
id='segmentation-tabs',
value='segmentation-canvas-tab',
children=[
dcc.Tab(
label='Annotation tool',
value='segmentation-canvas-tab',
children=[
dash_canvas.DashCanvas(
id='canvas',
width=canvas_width,
height=canvas_height,
scale=scale,
filename=filename,
goButtonTitle='Segmentation'
),
image_upload_zone('upload-image'),
]),
dcc.Tab(
label='Segmentation result',
value='segmentation-result-tab',
children=[
dcc.Graph(
id='segmentation',
figure=image_with_contour(np.ones_like(img),
img > 0, shape=(height, width))
)
]),
dcc.Tab(
label='How to use this app',
value='segmentation-help-tab',
children=[
html.Img(id='segmentation-help',
src='assets/segmentation.gif',
width='100%'),
]
)
]
),
dcc.Tabs([
dcc.Tab(label='รายงานสรุปรายเดือน',
children=[
html.Br(),
html.H1("รายงานสิทธิรักษาพยาบาลข้าราชการย้อนหลัง",
style={
'text-align': 'center',
'color': '#17c0eb'
}),
html.Hr(),
Header(
'เงื่อนไขเสี่ยงที่ก่อให้เกิดการทุจริต - {0}'.format(
str(latest_date)), app),
dbc.Row([dbc.Col(fraud) for fraud in fraud_box]),
html.Br(),
html.Br(),
Header(
'ข้อมูลย้อนหลัง 3 เดือน - ({0} ถึง {1})'.format(
str(oldest_date), str(latest_date)), app),
dbc.Row([dbc.Col(graph) for graph in graph_comp]),
html.Br(),
html.Hr(),
Header(
'ข้อมูล ณ สิ้นเดือนก่อนหน้า - {0}'.format(
str(latest_date)), app),
dbc.Row([dbc.Col(graph2) for graph2 in graph_asof])
]),
dcc.Tab(
label='รายงานสรุปรายวัน',
children=[
html.Br(),
html.H1(
"รายงานสิทธิรักษาพยาบาลข้าราชการรายวัน - ถึงวันที่ {0}".
format(last_daily),
style={
'text-align': 'center',
'color': '#0c2461'
}),
html.Hr(),
Header('เงื่อนไขเสี่ยงที่ก่อให้เกิดการทุจริต', app),
dbc.Row(
[dbc.Col(fraud_daily) for fraud_daily in fraud_box_daily]),
html.Br(),
html.Br(),
Header('ข้อมูลรายวัน', app),
dbc.Row([dbc.Col(graph3) for graph3 in graph_daily_cnt]),
html.Hr(),
html.Br(),
dbc.Row([dbc.Col(graph4) for graph4 in graph_daily_amt])
])
])
from flask import session
from app import app
from dash_app import app_main, chksubtime
print(dcc.__version__) # 0.6.0 or above is required
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content'),
html.Div(id='inst_opeid', style={'display': 'none'}),
html.Div(dt.DataTable(rows=[{}]), style={'display': 'none'}),
html.Div(dcc.Graph(id='dummy_g1'), style={'display': 'none'}),
html.Div(dcc.RadioItems(), style={'display': 'none'}),
html.Div(dcc.Dropdown(), style={'display': 'none'}),
html.Div(dcc.Tabs(tabs=[{}]), style={'display': 'none'}),
html.Div(id='dummy_div1', style={'display': 'none'})
#The 5 lines above are super important to initiate the dcc or dt components so they
#can be displayed when called. Otherwise it'll show no error and just a white page
])
# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
[dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
pathname = str(pathname)
if pathname == '/demo':
return app_main.layout
html.Div(id="store-nclicks", style={'display': 'none'}),
# html.Div(id="store-nclicks"),
# html.Div(id="store-strategy"),
#html.Div(id="store-strategy", style={'display': 'none'}),
# html.Div(id="train-obj", style={'display': 'none'}),
# html.Div(id="store-nclicks"),
html.Div([
dcc.Tabs(
id='tabs',
value='tab-1',
children=[
dcc.Tab(
label='About',
value='tab-0',
children=html.Div(
className='control-tab',
children=[
html.H4(
className='tab-0',
children='The Active Learning Workflow'),
dcc.Markdown(intro_text),
])),
dcc.Tab(label='Training', value='tab-1'),
dcc.Tab(label='Labeling', value='tab-2'),
]),
html.Div(id='tabs-content'),
])
])
@app.callback(Output('tabs-content', 'children'), [Input('tabs', 'value')])
def render_content(tab):
dcc.Tabs(
id="tabs",
children=[
dcc.Tab(
label='Page One',
children=[
html.Div([
html.Div(
[
html.Div(
[
dcc.Dropdown(
id='crossfilter-xaxis-column',
options=[{
'label': i,
'value': i
} for i in available_indicators],
value=
'Fertility rate, total (births per woman)'
),
dcc.RadioItems(
id='crossfilter-xaxis-type',
options=[{
'label': i,
'value': i
} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={
'display': 'inline-block',
'marginTop': '15px'
})
],
style={
'width': '50%',
'display': 'inline-block',
'padding': '10px'
}),
html.Div(
[
dcc.Dropdown(
id='crossfilter-yaxis-column',
options=[{
'label': i,
'value': i
} for i in available_indicators],
value=
'Life expectancy at birth, total (years)'
),
dcc.RadioItems(
id='crossfilter-yaxis-type',
options=[{
'label': i,
'value': i
} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={
'display': 'inline-block',
'marginTop': '15px'
})
],
style={
'width': '49%',
'float': 'right',
'display': 'inline-block',
'padding': '10px'
})
],
style={
'borderBottom': 'thin lightgrey solid',
'backgroundColor': 'rgb(250, 250, 250)',
'padding': '10px 5px'
}),
html.Div([
html.Div(
[
dcc.Graph(
id='crossfilter-indicator-scatter',
hoverData={
'points': [{
'customdata': 'Japan'
}]
})
],
style={
'width': '47%',
'display': 'inline-block',
'padding': '20',
'border': '1px solid #ccc',
'marginRight': '10px'
}),
html.Div([
html.Div(
[dcc.Graph(id='x-time-series')],
style={
'padding': '10px',
'border': '1px solid #ccc',
'marginBottom': '20px'
}),
html.Div([dcc.Graph(id='y-time-series')],
style={
'padding': '10px',
'border': '1px solid #ccc'
})
],
style={
'display': 'inline-block',
'width': '47%'
}),
html.Div(dcc.Slider(
id='crossfilter-year--slider',
min=df['Year'].min(),
max=df['Year'].max(),
value=df['Year'].max(),
step=5,
marks={
str(year): str(year)
for year in df['Year'].unique()
}),
style={
'width': '47%',
'padding': '20px'
})
],
className='row',
style={
'padding': '15px',
'marginLeft': '0'
})
])
]),
dcc.Tab(
label='Page Two',
children=[
html.Div([dcc.Markdown(children=markdown_text)],
style={
'padding': '15px',
'marginTop': '10px'
}),
html.Div([
html.Div([
dcc.Graph(figure=go.Figure(data=[
go.Bar(x=[
1995, 1996, 1997, 1998, 1999, 2000, 2001,
2002, 2003, 2004, 2005, 2006, 2007, 2008,
2009, 2010, 2011, 2012
],
y=[
219, 146, 112, 127, 124, 180, 236,
207, 236, 263, 350, 430, 474, 526,
488, 537, 500, 439
],
name='Rest of world',
marker=go.bar.Marker(
color='rgb(55, 83, 109)')),
go.Bar(x=[
1995, 1996, 1997, 1998, 1999, 2000, 2001,
2002, 2003, 2004, 2005, 2006, 2007, 2008,
2009, 2010, 2011, 2012
],
y=[
16, 13, 10, 11, 28, 37, 43, 55, 56,
88, 105, 156, 270, 299, 340, 403,
549, 499
],
name='China',
marker=go.bar.Marker(
color='rgb(26, 118, 255)'))
],
layout=go.Layout(
title=
'US Export of Plastic Scrap',
showlegend=True,
legend=go.layout.
Legend(x=0, y=1.0),
margin=go.layout.
Margin(l=40,
r=0,
t=40,
b=30))),
style={'height': 300},
id='my-graph')
],
className='nine column',
style={
'padding': '15px',
'marginLeft': '20px'
}),
html.Div([
dash_table.DataTable(
id='table',
columns=[{
"name": i,
"id": i
} for i in df2.columns],
data=df2.to_dict('records'),
)
],
className='four column',
style={'padding': '15px'})
],
className='row'),
]),
dcc.Tab(
label='Page Three',
children=[
html.Div([
html.Div(
[
dcc.Graph(
id='life-exp-vs-gdp',
figure={
'data': [
go.Scatter(
x=df1[df1['continent'] ==
i]['gdp per capita'],
y=df1[df1['continent'] ==
i]['life expectancy'],
text=df1[df1['continent'] ==
i]['country'],
mode='markers',
opacity=0.7,
marker={
'size': 15,
'line': {
'width': 0.5,
'color': 'white'
}
},
name=i)
for i in df1.continent.unique()
],
'layout':
go.Layout(
xaxis={
'type': 'log',
'title': 'GDP Per Capita'
},
yaxis={'title': 'Life Expectancy'},
margin={
'l': 40,
'b': 40,
't': 10,
'r': 10
},
legend={
'x': 0,
'y': 1
},
hovermode='closest')
})
],
style={
'width': '80%',
'padding': '15px',
'display': 'inline-block',
'border': '1px solid #ccc'
}),
html.Div(
[
daq.Knob(
id='my-daq-knob', min=0, value=3, max=20)
],
style={
'padding': '15px',
'width': '20%',
'display': 'inline-block',
'verticalAlign': 'top'
})
],
style={
'marginTop': '15px',
'padding': '15px'
})
]),
dcc.Tab(
label='Page Four',
children=[
html.Div(
[
html.Div([
dcc.Dropdown(id='dropdown-update-layout',
value='grid',
clearable=False,
options=[{
'label':
name.capitalize(),
'value':
name
} for name in [
'grid', 'random', 'circle',
'cose', 'concentric'
]]),
cyto.Cytoscape(id='cytoscape-update-layout',
layout={'name': 'grid'},
style={
'width': '100%',
'height': '450px'
},
elements=elements)
])
],
style={
'width': '95%',
'padding': '15px',
'marginTop': '30px',
'border': '1px solid #ccc',
'marginLeft': '45px'
})
])
])
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Tabs(id='tabs-example',
value='tab-1',
children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('tabs-example-content', 'children'),
[Input('tabs-example', 'value')])
def render_content(tab):
if tab == 'tab-1':
return html.Div([html.H3('Tab content 1')])
elif tab == 'tab-2':
return html.Div([html.H3('Tab content 2')])
if __name__ == '__main__':
# fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.config['suppress_callback_exceptions'] = True
app.layout = html.Div(children=[
html.Div(html.H1(children='Bearing Fault Dashboard'), className='row'),
# the style here is internal CSS style
# example : <h1 style="text-align:center;color:red">......</h1>
# html.Div(children=' Dash: A web application framework for Python.',
# style = {'text-align':'center','color':'red'}, className = 'row'),
tab_change,
dcc.Tabs(id="tabs",
value='tab1',
children=[
dcc.Tab(label='Load Data and Draw', value='tab1'),
dcc.Tab(label='Classification', value='tab2'),
dcc.Tab(label='Database', value='tab3')
]),
html.Div(id='pages_content', children=page1_div),
# a html.Div
fileinfo_mem,
# just for notify tab is changing
])
@app.callback(
[Output('pages_content', 'children'),
Output('tab_change', 'children')], [Input('tabs', 'value')])
def render_content(tab):
def serve_layout():
# tickerlist = db.session.query(HistoricalPrice.TickerID).group_by(HistoricalPrice.TickerID).all()
obj_usertable = fetch_users()
user_optionList = fetch_users_options()
admin_layout = html.Div([
html.Div(id='signal-1', style={'display': 'none'}),
html.Div(id='signal-2', style={'display': 'none'}),
html.Div(id='signal-3', style={'display': 'none'}),
dcc.Tabs(
id='admin-tabs',
children=[
dcc.Tab(
id='admin-user-tab',
label='User Management',
children=[
html.Div(
[
html.Div(
[
html.Div(
[
html.H5('Add user:'******'UserID',
htmlFor='input-UserId'),
dcc.Input(
placeholder=
'User name, e.g. wmu100',
type='text',
value='',
id='input-UserId'),
html.Label(
'Password',
htmlFor='input-UserPassword'
),
dcc.Input(
placeholder=
'e.g. [email protected]',
type='password',
value='',
id='input-UserPassword'),
html.Label(
'User type',
htmlFor='input-UserType'),
dcc.Input(
placeholder=
'either student or admin',
type='text',
value='',
id='input-UserType'),
html.Label(
'First name',
htmlFor='input-UserFN'),
dcc.Input(
placeholder='e.g. Wei',
type='text',
value='',
id='input-UserFN'),
html.Label(
'Last name',
htmlFor='input-UserLN'),
dcc.Input(
placeholder='e.g. Dahai',
type='text',
value='',
id='input-UserLN'),
# html.Button('Add', id='adduser-button', n_clicks=0, className='button-primary'),
html.Button(
'Add',
id='adduser-button',
n_clicks=0,
className='button-primary',
style={
'margin-left': '10px'
}),
html.Br(),
html.Br(),
html.P(
html.
A('Go to general user (student) page',
href='/apps/main'))
],
className='six columns'),
html.Div(
[
# Modify
#
html.H5('Modify or drop user:'******'UserID',
htmlFor='user-dropdown'),
html.Div([
dcc.Dropdown(
id='user-dropdown',
options=user_optionList,
value='',
className=
'three columns'),
],
className=
'twelve columns'),
html.Label(
'Password',
htmlFor=
'input2-UserPassword'),
dcc.Input(
placeholder=
'e.g. [email protected]',
type='password',
value='',
id='input2-UserPassword'),
html.Label(
'User type',
htmlFor='input2-UserType'),
dcc.Input(
placeholder=
'either student or admin',
type='text',
value='',
id='input2-UserType'),
html.Label(
'First name',
htmlFor='input2-UserFN'),
dcc.Input(
placeholder='e.g. Wei',
type='text',
value='',
id='input2-UserFN'),
html.Label(
'Last name',
htmlFor='input2-UserLN'),
dcc.Input(
placeholder='e.g. Dahai',
type='text',
value='',
id='input2-UserLN'),
html.Button(
'Modify',
id='modifyuser-button',
n_clicks=0,
className='button-primary',
style={
'margin-left': '10px'
}),
html.Button(
'DROP',
id='deluser-button',
n_clicks=0,
className='button-primary',
style={
'margin-left':
'10px',
'background-color':
'#fa4f56'
})
],
className='six columns')
],
className='six columns'),
html.Div([
html.H5('All users in the system:'),
html.Span([obj_usertable],
id='user-data-area'),
html.
H5('Number of users accounts in the system:'
),
html.P(id='num-of-users'),
],
className='six columns')
],
className='twelve columns')
],
style=tab_style,
selected_style=tab_selected_style),
dcc.Tab(
id='admin-finance-tab',
label='Financial Data',
children=[
html.Div([
html.H4('Refresh historical data'),
html.
P('Please input stock tickers, separated by spaces, e.g. \'AAPL MSFT \''
),
html.
P('Please do not input apostrophes, commas, or any other special characters'
),
html.
P('When Refresh is clicked, all historical price data not included in the date range '
'below will be removed.'),
html.
P('The historical price of all stock tickers not '
'in your list will be removed.'),
html.
P('Currently, the system does not validate if there are empty data from Yahoo.'
),
html.
P('For example, if you input a date before the company got IPO, the system will report an error.'
),
html.P('Note: The ending date cannot be today.'),
dcc.Input(placeholder='Enter stock tickers',
type='text',
value='',
id='tickers-to-fetch'),
dcc.Input(placeholder='Start date (YYYY-MM-DD)',
type='text',
value='',
id='fetch-start-date'),
dcc.Input(placeholder='End date (YYYY-MM-DD)',
type='text',
value='',
id='fetch-end-date'),
html.Button('Refresh',
id='fetch-button',
n_clicks=0,
className='button-primary',
style={'margin-left': '10px'}),
html.H4('Current historical data in database'),
html.Div([
html.P([
'Tickers which contain historical price info in database: ',
html.Span(id='ticker-list')
])
])
],
className='six columns'),
html.Div(
[
html.H4('Historical Price in Database:'),
dcc.Dropdown(id='show-history-dropdown'),
dcc.Graph(id='finance-graph'),
# TODO
# html.Button('Export', id='export-button', n_clicks=0, className='button-primary')
],
className='six columns')
],
style=tab_style,
selected_style=tab_selected_style),
dcc.Tab(
id='admin-database-tab',
label='Database Management',
children=[
# html.Br(),
html.
H6('Please select a table in database to show its content:'
),
dcc.Dropdown(
id='app-1-dropdown',
options=[{
'label':
'DB table: {}'.format(i),
'value':
i
} for i in [
'Users', 'Orders', 'Portfolio', 'Position',
'Ticker', 'HistoricalPrice'
]],
value='Users',
className='six columns'),
html.Div(id='app-1-display-value',
className='six columns')
],
style=tab_style,
selected_style=tab_selected_style)
],
style=tabs_styles)
# dcc.Link('Go to App 2', href='/apps/app2')
])
return admin_layout
html.H1(children='Covid-19 Economic Impact Dashboard',
style={
'textAlign': 'center',
'color': '#ef3e18'
}
),
html.Div('Web dashboard created by Group 3, ITSC-3155', style={'textAlign': 'center'}),
html.Hr(style={'color': '#7FDBFF'}),
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Bar Charts', value='tab-1'),
dcc.Tab(label='Stackbar Charts', value='tab-2'),
dcc.Tab(label='Line Charts', value='tab-3'),
dcc.Tab(label='Multi-line Charts', value='tab-4'),
dcc.Tab(label='Bubble Charts', value='tab-5'),
dcc.Tab(label='Heat Maps', value='tab-6'),
dcc.Tab(label='Comparison Tool', value='tab-7'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(Output('tabs-example-content', 'children'),
[Input('tabs-example', 'value')])
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('This bar chart represents the Unemployment Rate by each State.', style={'textAlign': 'center'}),
dcc.Graph(id='graph2',
],
className="one-half column",
id="title",
),
],
id="header",
className="row flex-display",
style={
'width': '75%',
'margin': 25,
'textAlign': 'center'
}),
dcc.Tabs(id="tabs",
value='tab-1',
children=[
dcc.Tab(label='Day Wise', value='tab-1'),
dcc.Tab(label='Country Wise', value='tab-2'),
dcc.Tab(label='On World Map', value='tab-3'),
dcc.Tab(label='Weekly & Monthly report', value='tab-4'),
]),
html.Div(id='tabs-content')
])
@app.callback(Output('tabs-content', 'children'), [Input('tabs', 'value')])
def render_content(tab):
if tab == 'tab-1':
return day_wise_layout
elif tab == 'tab-2':
return country_wise_layout
elif tab == 'tab-3':
return world_map_layout
dcc.Tabs(
id="tabs-table",
value='Worldwide',
parent_className='custom-tabs',
className='custom-tabs-container',
children=[
dcc.Tab(
label='Worldwide',
value='Worldwide',
className='custom-tab',
selected_className='custom-tab--selected',
children=[
dash_table.DataTable(
# id='datatable-interact-location',
# Don't show coordinates
columns=[{"name": 'Country', "id": 'Country'}] +
[{"name": i, "id": i,
'type': 'numeric',
'format': Format(group=',')}
for i in WorldwildTable.columns[1:5]],
# But still store coordinates in the table for interactivity
data=WorldwildTable.to_dict("rows"),
# css= [{'selector': 'tr:hover', 'rule': 'background-color: #2674f6;'}],
row_selectable="single",
sort_action="native",
style_as_list_view=True,
style_cell={
'fontFamily': 'Roboto',
'backgroundColor': '#ffffff',
},
fixed_rows={
'headers': True, 'data': 0},
style_table={
'minHeight': '400px',
'height': '400px',
'maxHeight': '400px',
'overflowX': 'auto',
},
style_header={
'backgroundColor': '#ffffff',
'fontWeight': 'bold'
},
style_cell_conditional=[
{'if': {'column_id': 'Country'}, 'width': '35%'},
{'if': {'column_id': 'Active'}, 'width': '18%'},
{'if': {'column_id': 'Confirmed'}, 'width': '18%'},
{'if': {'column_id': 'Recovered'}, 'width': '18%'},
{'if': {'column_id': 'Deaths'}, 'width': '18%'},
{'if': {'column_id': 'Active'}, 'color': '#f0953f'},
{'if': {'column_id': 'Confirmed'}, 'color': '#f03f42'},
{'if': {'column_id': 'Recovered'}, 'color': '#2ecc77'},
{'if': {'column_id': 'Deaths'}, 'color': '#7f7f7f'},
{'textAlign': 'center'}
],
)
]
),
]
),
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
# for dyanmic
app.config['suppress_callback_exceptions'] = True
# Set up Tabs
app.layout = html.Div([
dcc.Tabs(id="tabs",
value='tab-1',
children=[
dcc.Tab(label='Setup', value='tab-1'),
dcc.Tab(label='Race', value='tab-2'),
dcc.Tab(label='Results', value='tab-3'),
]),
html.Div(id='tabs-content')
])
# Render Tabs
@app.callback(Output('tabs-content', 'children'), [Input('tabs', 'value')])
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Race Setup'),
dcc.Upload(id='upload-data',
html.Div(style={'display': 'inline','word-wrap': 'break-word'},children=issues_list_func(issues))
]),
html.Div(style={'width':'20%', 'display': 'inline-block', 'float':'right'},children=[
dcc.Markdown(d("""
ycvjgvhg
""")),
]),
])
app.layout = html.Div([
dcc.Tabs(id="tabs", value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1',children=html.Div([
html.H3('Tab content 1')
])),
dcc.Tab(label='Tab two', value='tab-2', children=tab2_content()),
]),
html.Div(id='tabs-content')
])
app.config.supress_callback_exceptions = True
#
# @app.callback(Output('tabs-content', 'children'),
# [Input('tabs', 'value')])
# def render_content(tab):
# if tab == 'tab-1':
# return html.Div([
# html.H3('Tab content 1')
# ])
# elif tab == 'tab-2':
p_df = dashboard_r2.p_df
q_df = dashboard_r2.q_df
table_df = dashboard_r2.table_df
# -- PART 2: LAYOUT -- #
app.layout = html.Div([
html.H1(children = 'ПРИБОРНАЯ ПАНЕЛЬ: ГРЭ-7', className = 'flex items-center bg-near-black gray ma0 pa2 h-auto flex-grow-0 f4'),
html.Div([
dcc.Tabs(id = 'tabs', value = 'dashboard_r2', vertical = 'vertical', className = 'flex-grow-0 mr3 pa0 bg-mid-gray gray w-auto f7',
children = [
dcc.Tab(label = 'R2', value = 'dashboard_r2', className = 'flex pa0 h-auto', selected_className = 'css_tab_selected'),
dcc.Tab(label = 'ПРОСТОИ', value = 'dashboard_downtime', className = 'flex pa0 h-auto', selected_className = 'css_tab_selected'),
dcc.Tab(label = 'ПЛАН', value = 'dashboard_plan', className = 'flex pa0 h-auto', selected_className = 'css_tab_selected'),
dcc.Tab(label = 'СПРАВКА', value = 'dashboard_reference', className = 'flex pa0 h-auto', selected_className = 'css_tab_selected'),
dcc.Tab(label = 'БУР. УСТАНОВКИ', value = 'dashboard_status', className = 'flex pa0 h-auto', selected_className = 'css_tab_selected'),
dcc.Tab(label = 'ТОиР', value = 'dashboard_repair', className = 'flex pa0 h-auto', selected_className = 'css_tab_selected')
], colors = {
'border': '#111111',
'primary': '#FFB700',
'background': '#000000'
}
),
html.Div(id = 'tab-content', className = 'flex flex-grow-1 flex-shrink-1 ma0', style = {'width': '97vw'}),
], className = 'flex flex-grow-1 pa0'),
# hidden divs inside the app that stores diate values
html.Div(id = 'intermediate-value-downtime', style = {'display': 'none'}),
html.Div(id = 'intermediate-var-storage', children = jsonified_types, style = {'display': 'none'}),
html.Div(id = 'intermediate-value-plan', style = {'display':'none'}),
html.Div(id = 'intermediate-value-repair', style = {'display': 'none'})
{'label': 'Dallas', 'value': 'Dallas', 'disabled': True},
{'label': 'Los Angeles', 'value': 'LA', 'disabled': True},
{'label': 'New York', 'value': 'NY', 'disabled': True},
{'label': 'Orlando', 'value': 'Orlando', 'disabled': True},
{'label': 'Philladelphia', 'value': 'Philladelphia', 'disabled': True},
{'label': 'Seattle', 'value': 'Seattle', 'disabled': True},
{'label': 'San Francisco', 'value': 'SF'},
{'label': 'St.Louis', 'value': 'SL', 'disabled': True}
],
placeholder = 'Select a City'
),
dcc.Tabs(id="tabs-navigation", value='graph-collection', children=[
dcc.Tab(label='General Info', value='general-info'),
#dcc.Tab(label='Visualize on Map', value='map'),
dcc.Tab(label='Prediction', value='prediction'),
]),
html.Div(id='graphs')
])
#These are the main and secondary pages in tab 1 and 2
@app.callback(
Output('graphs', 'children'),
[Input('tabs-navigation', 'value'),
Input('first-dropdown', 'value')
]
)
def update_graph(tab, dropdown):
belt_colours = get_belt_colours()
data_all = get_load_json_data_all()
path_bjj_image_intro = 'jonathan-borba-Yf1SegAI84o-unsplash.jpg'
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.layout = html.Div([
app_header(),
dcc.Tabs(id='tabs-example',
value='tab-description',
children=[
dcc.Tab(label='Intro', value='tab-description'),
dcc.Tab(label='See all answers', value='tab-overall'),
dcc.Tab(label='Select a group', value='tab-grouped'),
]),
html.Div(id='tabs-example-content')
])
@app.callback(
Output('pie-chart-gender-belt', 'figure'),
[Input('belt_dropdown', "value"),
Input('gender_dropdown', "value")])
def update_figure(belt, gender):
with open(f'Data/gender_belt/{gender}_{belt_colours[belt]}.json',
'r') as f:
file = json.load(f)
{'label': 3, 'value': 3},
{'label': 2, 'value': 2},
{'label': 1, 'value': 1},
],
value=3
),
dcc.Graph(id='timeline', animate=False)
], className="six columns"),
], className="row"),
html.Div([
html.Div([
html.H2('Topic Explorer', style={'textAlign': 'center', 'color': '#1C4E80'}),
dcc.Tabs(
tabs=[
{'label':'2D Plot', 'value':2},
{'label':'3D Plot', 'value':3}
],
value=2,
id='tabs'),
html.Div(id='tab-output')
],className="six columns"),
html.Div([
html.H2('Mean Topic Probability', style={'textAlign': 'center', 'color': '#1C4E80'}),
dcc.Graph(id='mean_probs',
figure={
'data': [
{'x': timelines_year.mean().values, 'y': topics, 'type': 'bar', 'orientation': 'h'}
]
}
)
], className="six columns"),
dcc.Tabs(
id="tabs",
value='tab-1',
children=[
dcc.Tab(
label='Data Pokemon',
value='tab-1',
children=[
html.Div([
html.Div([
html.P('Name : '),
dcc.Input(id='filternametable',
type='text',
value='',
style=dict(width='100%'))
],
className='col-4'),
html.Div([
html.P('Generation : '),
dcc.Dropdown(id='filtergenerationtable',
options=[
i for i in [{
'label': 'All Generation',
'value': ''
}, {
'label': '1st Generation',
'value': '1'
}, {
'label': '2nd Generation',
'value': '2'
}, {
'label': '3rd Generation',
'value': '3'
}, {
'label': '4th Generation',
'value': '4'
}, {
'label': '5th Generation',
'value': '5'
}, {
'label': '6th Generation',
'value': '6'
}]
],
value='')
],
className='col-4'),
html.Div([
html.P('Category : '),
dcc.Dropdown(id='filtercategorytable',
options=[
i for i in [{
'label': 'All Category',
'value': ''
}, {
'label': 'Legendary',
'value': 'True'
}, {
'label': 'Non-Legendary',
'value': 'False'
}]
],
value='')
],
className='col-4')
],
className='row'),
html.Br(),
html.Div([
html.Div([
html.P('Total : '),
dcc.RangeSlider(marks={
i: str(i)
for i in range(dfPokemon['Total'].min(
), dfPokemon['Total'].max() + 1, 100)
},
min=dfPokemon['Total'].min(),
max=dfPokemon['Total'].max(),
value=[
dfPokemon['Total'].min(),
dfPokemon['Total'].max()
],
className='rangeslider',
id='filtertotaltable')
],
className='col-9'),
html.Div([], className='col-1'),
html.Div([
html.Br(),
html.Button('Search',
id='buttonsearch',
style=dict(width='100%'))
],
className='col-2')
],
className='row'),
html.Br(),
html.Br(),
html.Br(),
html.Div([
html.Div([
html.P('Max Rows : '),
dcc.Input(id='filterrowstable',
type='number',
value=10,
style=dict(width='100%'))
],
className='col-1')
],
className='row'),
html.Center([
html.H2('Data Pokemon', className='title'),
html.Div(id='tablediv')
])
]),
dcc.Tab(
label='Categorical Plots',
value='tab-2',
children=[
html.Div([
html.Div([
html.P('Jenis : '),
dcc.Dropdown(id='jenisplotcategory',
options=[{
'label': i,
'value': i
} for i in ['Bar', 'Box', 'Violin']],
value='Bar')
],
className='col-3'),
html.Div([
html.P('X : '),
dcc.Dropdown(
id='xplotcategory',
options=[{
'label':
i,
'value':
i
} for i in ['Generation', 'Type 1', 'Type 2']],
value='Generation')
],
className='col-3'),
html.Div([
html.P('Y : '),
dcc.Dropdown(id='yplotcategory',
options=[{
'label': i,
'value': i
} for i in dfPokemon.columns[4:11]],
value='Total')
],
className='col-3'),
html.Div([
html.P('Stats : '),
dcc.Dropdown(id='statsplotcategory',
options=[
i for i in [{
'label': 'Mean',
'value': 'mean'
}, {
'label': 'Standard Deviation',
'value': 'std'
}, {
'label': 'Count',
'value': 'count'
}, {
'label': 'Min',
'value': 'min'
}, {
'label': 'Max',
'value': 'max'
}, {
'label': '25th Percentiles',
'value': '25%'
}, {
'label': 'Median',
'value': '50%'
}, {
'label': '75th Percentiles',
'value': '75%'
}]
],
value='mean',
disabled=False)
],
className='col-3')
],
className='row'),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
dcc.Graph(id='categorygraph')
]),
dcc.Tab(
label='Scatter Plot',
value='tab-3',
children=[
html.Div([
html.Div([
html.P('Hue : '),
dcc.Dropdown(id='hueplotscatter',
options=[{
'label': i,
'value': i
} for i in [
'Legendary', 'Generation',
'Type 1', 'Type 2'
]],
value='Legendary')
],
className='col-4'),
html.Div([
html.P('X : '),
dcc.Dropdown(id='xplotscatter',
options=[{
'label': i,
'value': i
} for i in dfPokemon.columns[4:11]],
value='Attack')
],
className='col-4'),
html.Div([
html.P('Y : '),
dcc.Dropdown(id='yplotscatter',
options=[{
'label': i,
'value': i
} for i in dfPokemon.columns[4:11]],
value='HP')
],
className='col-4')
],
className='row'),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
dcc.Graph(id='scattergraph')
]),
dcc.Tab(label='Pie Chart',
value='tab-4',
children=[
html.Div([
html.Div([
html.P('Group : '),
dcc.Dropdown(id='groupplotpie',
options=[{
'label': i,
'value': i
} for i in [
'Legendary', 'Generation',
'Type 1', 'Type 2'
]],
value='Legendary')
],
className='col-4')
],
className='row'),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
dcc.Graph(id='piegraph')
]),
dcc.Tab(
label='Histogram',
value='tab-5',
children=[
html.Div([
html.Div([
html.P('X : '),
dcc.Dropdown(id='xplothist',
options=[{
'label': i,
'value': i
} for i in dfPokemon.columns[4:11]],
value='Total')
],
className='col-4'),
html.Div([
html.P('Hue : '),
dcc.Dropdown(
id='hueplothist',
options=[{
'label':
i,
'value':
i
} for i in ['All', 'Generation', 'Legendary']],
value='All')
],
className='col-4'),
html.Div([
html.P('Standard deviation : '),
dcc.Dropdown(id='stdplothist',
options=[{
'label':
'{} Standard Deviation'.format(i),
'value':
i
} for i in ['1', '2 ', '3']],
value='2')
],
className='col-4')
],
className='row'),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
dcc.Graph(id='histgraph')
])
],
style={'fontFamily': 'system-ui'},
content_style={
'fontFamily': 'Arial',
'borderBottom': '1px solid #d6d6d6',
'borderLeft': '1px solid #d6d6d6',
'borderRight': '1px solid #d6d6d6',
'padding': '44px'
})
'-SSP/python/ssp_dashboard/style.css'
]
#
# DASH CONFIG - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - #
#
app = dash.Dash(__name__)
app.config['suppress_callback_exceptions'] = True
app.layout = html.Div([
dcc.Tabs(id="tabs",
value='tab-1',
children=[
dcc.Tab(label='Single Instance', value='tab-1'),
dcc.Tab(label='Live View', value='tab-3'),
dcc.Tab(label='Multiple Instances', value='tab-2'),
]),
html.Div(id='tabs-content')
])
#
# DASH COMPONENTS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - #
#
@app.callback(Output('tabs-content', 'children'), [Input('tabs', 'value')])
def render_root(tab):
if tab == 'tab-2':
return html.Div([render_multi_instance()])
dcc.Tabs(id='tabs', value='tab-1',children=[
dcc.Tab(label='Tips Data Set', value='tab-1',children=[
html.Div([
html.H1(children = 'Table Titanic'),
html.Table(
html.Tr([
html.Td([
html.P('Table: ')
]),
html.Td([
dcc.Dropdown(
id='ddl-table',
options=[{'label': 'titanic', 'value': 'titanic'},
{'label': 'titanicOutlierCalculation', 'value': 'outlier'}
],
value = 'titanic'
)
])
])
)
]),
html.Div([
dcc.Graph(
id='tableTitanic',
figure = {
'data':[
go.Table(
header=dict(
values=dfTitanic.columns,
font=dict(size=18),
height=30,
fill = dict(color='#46a3cb')
),
cells=dict(
values=[dfTitanic[col] for col in dfTitanic.columns],
height=30,
font=dict(size=16),
fill = dict(color='#e5e8ed')
)
)
],
'layout': go.Layout(height=600, margin={'t':10})
}
)
])
]),
dcc.Tab(label='Tips Data Set', value='tab-2',children=[
html.Div([
html.H1(children = 'Categorical Plot Ujian Titanic'),
html.Table(
html.Tr([
html.Td([
html.P('Type: '),
dcc.Dropdown(
id='ddl-plot-category',
options=[{'label': 'Bar', 'value': 'bar'},
{'label': 'Violin', 'value': 'violin'},
{'label': 'Box', 'value': 'box'}
],
value = 'bar'
)
]),
html.Td([
html.P('X axis: '),
dcc.Dropdown(
id='ddl-x-category',
options=[{'label': 'Survived', 'value': 'survived'},
{'label': 'Sex', 'value': 'sex'},
{'label': 'Ticket class', 'value': 'pclass'},
{'label': 'Embark Town', 'value': 'embark_town'},
{'label': 'Who', 'value': 'who'},
{'label': 'Outlier', 'value': 'outlier'}
],
value = 'sex'
)
])
]),
style = {
'width':'900px'
}
),
dcc.Graph(
id = 'categoricalPlot',
figure = {}
)
])
])
])
dcc.Tabs(
id='bottom-tabs',
children=[
dcc.Tab(
label='Top Players',
children=[
dcc.Loading(
id='loading-hhi',
children=[
dbc.Row(
children=[
dbc.Col(html.P(children='Top players to include'), md = 1),
dbc.Col(
dbc.InputGroup(
children=[
dbc.Input(id='hhi-input', type='number', min='1', max='20', value=10),
dbc.InputGroupAddon(
dbc.Button(id='hhi-submit-btn', children='Update', color='primary'),
addon_type='append'
)
]
), md=2
),
],style = {'marginTop' : 10}
),
dbc.Row(
children=[
dbc.Col(dcc.Graph(id='hhi-bar'), md=6),
dbc.Col(dcc.Graph(id='hhi-pie'), md=6)
]
)
],
type='default',
)
],
),
dcc.Tab(
label='Supply Curve',
children=[
dcc.Loading(
id='loading-supply',
children=[
dbc.Row(
children=[
dbc.Col(dcc.Dropdown(id='supply-owner-drop', clearable=False), md=4)
]
),
dbc.Row(
children=[
dbc.Col(dcc.Graph(id='supply-graph'))
]
)
]
)
],
),
dcc.Tab(
label='Phase3X4X',
children=[
dcc.Loading(
id='loading-phase',
children=[
dbc.Row(
children=[
dbc.Col(dcc.Dropdown(id='phase-utility-drop', clearable=False), md=4)
]
),
dbc.Row(
children=[
dbc.Col(dcc.Graph(id='phase-graph'))
]
)
]
)
],
),
],
)
dcc.Tabs(id="tabs", children=[
dcc.Tab(label='STOCK DISPLAY', children=[
html.Div(
className="row app-body",
children=[
# User Controls
html.Div(
className="three columns card",
children=[
html.Div(
className="bg-white user-control",
children=[
html.Div(
className="padding-top-bot",
children=[
html.H6("Stock Ticker"),
html.Br(),
dcc.Dropdown(placeholder='Enter/Select a Ticker',
id="ticker-dropDown",
options=[{'label': i, 'value': i}
for i in stock_id],
value='1101 台泥'
),
], style={'fontSize': 12},
),
html.Div(
className="padding-top-bot",
children=[
html.H6("Type of Plot"),
dcc.RadioItems(
id="chart-type",
options=[
{"label": "LSTM Model", "value": "lstm"},
{
"label": "Candle Stick",
"value": "candle",
},
],
value="candle",
labelStyle={
"display": "inline-block",
"padding": "12px 12px 12px 0px",
},
),
],
)
],
)
],
),
# Graph
html.Div(
className="nine columns card-left",
children=[
html.Div(
className="bg-white",
children=[
html.H5("Last Updated:"),
dcc.Input(id='h_date', value='0', type='hidden'),
html.Div(id='date', style={'marginLeft': '43px'}),
dcc.Graph(id="plot"),
]
)
],
),
dcc.Store(id="error", storage_type="memory"),
],
)
]),
dcc.Tab(label='STOCK SELECTION',
children=[html.Div([
html.Div([
html.Div([
html.H4("Filter for Stock Selection:"),
dcc.RadioItems(
id='filter-radio',
options=[{'label': i, 'value': i} for i in ['Long', 'Short', 'Long to Short',
'Short to Long']],
value='Long',
labelStyle={'display': 'inline-block', 'marginRight': '15px',
'marginTop': '0px'}
)
],
style={'width': '49%', 'display': 'inline-block'}),
html.H6("Long to Short / Short to Long for N Consecutive days:"),
html.Div(dcc.Slider(
id='days_slider',
min=1,
max=4,
value=2,
marks={i: '{}-day'.format(i) for i in range(1, 5)}
), style={'width': '46%', 'padding': '0px 0x 0px 0px',
'display': 'inline-block', 'margin': '5px 30px 5px 15px'})
], style={
'borderBottom': 'thin lightgrey solid',
'backgroundColor': 'rgb(250, 250, 250)',
'padding': '20px 10px'
}),
html.Div([
dash_table.DataTable(
id='datatable-interactivity',
#columns=[{"name": i, "id": i} for i in df.columns],
columns = [
{'id': '股票代號', 'name': '股票代號', 'type': 'text'},
{'id': '股票名稱', 'name': '股票名稱', 'type': 'text'},
{'id': '市值(億)', 'name': '市值(億)', 'type': 'numeric',
'format': {'specifier': '.2f'}},
{'id': '產業指數名稱', 'name': '產業指數名稱', 'type': 'text'},
{'id': '指數彙編分類', 'name': '指數彙編分類', 'type': 'text'}
],
style_cell_conditional=[
{'if': {'column_id': '股票代號'}, 'width': '15%'},
{'if': {'column_id': '股票名稱'}, 'width': '20%'},
{'if': {'column_id': '市值(億)'}, 'width': '15%'},
{'if': {'column_id': '產業指數名稱'}, 'width': '20%'},
{'if': {'column_id': '指數彙編分類'}, 'width': '30%'}
],
style_data_conditional=[{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}],
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'},
data=df.to_dict('records'),
page_current=0,
page_size=PAGE_SIZE,
page_action='custom',
sort_action='custom',
sort_mode='single',
sort_by=[],
row_selectable='single',
selected_rows=[]
)
], style={'width': '49%', 'display': 'inline-block', 'padding': '0 20',
'float': 'left', 'marginTop': '15px', 'fontSize': '12px'}),
html.Div([
dcc.Graph(id='datatable-interactivity-container', config={'displayModeBar': False}),
], style={'display': 'inline-block', 'width': '49%',
'padding-top': '15px'}),
])
]),
]),
html.P("""Made by James Liu, Lise Braaten, Tao Huang
of DSCI 532 group 111 as a collaborative project"""
),
dcc.Markdown(
"""data taken from [github](https://github.com/fivethirtyeight/data/tree/master/airline-safety),
originally used for
[this fiveThirtyEight article.](https://fivethirtyeight.com/features/should-travelers-avoid-flying-airlines-that-have-had-crashes-in-the-past/)"""
)
])),
])
app.layout = html.Div([
jumbotron,
dcc.Tabs(id='tabs',
value='tab-1',
children=[
dcc.Tab(label='Fatality rates per billion by airlines',
value='tab-1'),
dcc.Tab(label='Counts of different categories of incidents',
value='tab-2'),
]),
html.Div(id='tabs-content'), footer
])
@app.callback(Output('tabs-content', 'children'), [Input('tabs', 'value')])
def render_content(tab):
"""
retrieves the tab page depending on click.
Parameters
----------
tab: the tab value indicating tab 1 or 2