def get_layout():
unique_id = "bob"
layout = html.Div([
html.Div([
html.Img(src='./assets/nucypher_logo.png'),
],
className='banner'),
html.Div([
html.Div([
html.Div([
html.Img(src='./assets/bob.png'),
],
className='two columns'),
html.Div([
html.Div([
html.H2('INSURER BOB'),
html.
P("Bob is Alicia's Insurer and will be granted access by Alicia "
"to access the encrypted vehicle data database and requests a re-encrypted ciphertext for "
"each set of timed measurements, which can then be decrypted using the Insurer's "
"private key."),
],
className="row")
],
className='five columns'),
],
className='row'),
],
className='app_name'),
html.Hr(),
html.Div([
html.H3('Properties'),
html.Div([
html.Div('Unique Bob Id:', className='two columns'),
html.Div(id='bob-unique-id',
children='{}'.format(unique_id),
className='one column'),
],
className='row'),
html.Br(),
html.Button('Generate Key Pair',
id='gen-key-button',
type='submit',
className='button button-primary'),
html.Div([
html.Div('Public Key:', className='two columns'),
html.Div(id='pub-key', className='seven columns'),
],
className='row'),
]),
html.Hr(),
html.Div(
[
html.H3('Vehicle Data from Encrypted DB'),
html.Div([
html.Button('Read Measurements',
id='read-button',
type='submit',
className='button button-primary',
n_clicks_timestamp='0'),
],
className='row'),
html.Div(id='measurements', className='row'),
#dcc.Interval(id='measurements-update', interval=1000, n_intervals=0),
],
className='row'),
# Hidden div inside the app that stores previously decrypted measurements
html.Div(id='latest-decrypted-measurements', style={'display':
'none'}),
])
return layout
def get_freq_and_cplans_cards_gsom():
children = []
children.append(get_freqmap_card_gsom())
children.append(html.Hr())
children.append(get_componentplans_card_gsom())
return html.Div(children)
def layout():
return html.Div(
id='oncoprint-body',
className='app-body',
children=[
dcc.Loading(parent_className='dashbio-loading',
children=dash_bio.OncoPrint(id='oncoprint-chart',
height=550,
data=[])),
html.Div(
id='oncoprint-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='oncoprint-tabs',
value='what-is',
children=[
dcc.Tab(label='About',
value='what-is',
children=html.Div(
className='control-tab',
children=[
html.H4(
className='what-is',
children='What is OncoPrint?'),
html.P("""
The OncoPrint component is used to view multiple genomic
alteration events through an interactive and zoomable
heatmap. It is a React/Dash port of the popular
oncoPrint() function from the Bioconductor R
package. Under the hood, the rendering is done with
D3 via Plotly.js. Plotly's interactivity allows
you to bind clicks and hovers to genetic events,
letting you create complex bioinformatics apps
or workflows that leverage crossfiltering.
"""),
html.P("""
Read more about the component here:
https://github.com/plotly/react-oncoprint
""")
])),
dcc.Tab(
label='Data',
value='data',
children=html.Div(
className='control-tab',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children='Select dataset'),
dcc.Dropdown(
id='oncoprint-dropdown',
className=
'oncoprint-select',
options=[{
'label':
'{}.json'.format(ds),
'value':
ds
} for ds in DATASETS],
value='cBioPortalData',
),
]),
html.Hr(
className='oncoprint-separator'),
html.Div([
html.H4('Event metadata'),
html.Div(id='oncoprint-events'),
])
])),
dcc.Tab(
label='View',
value='view',
children=html.Div(
className='control-tab',
children=[
html.H4('Layout'),
html.Div(
className='app-controls-block',
children=[
html.Div(className=
'app-controls-name',
children='Overview'),
daq.ToggleSwitch(
id=
'oncoprint-show-overview',
label=['hide', 'show'],
color='#009DFF',
size=35,
value=True),
]),
html.Div(
className='app-controls-block',
children=[
html.Div(className=
'app-controls-name',
children='Legend'),
daq.ToggleSwitch(
id='oncoprint-show-legend',
label=['hide', 'show'],
color='#009DFF',
size=35,
value=True),
]),
html.Div(
className='app-controls-block',
children=[
html.Div(className=
'app-controls-name',
children='Padding'),
dcc.Slider(
className='control-slider',
id=
'oncoprint-padding-input',
value=0.05,
min=0,
max=0.1,
step=0.01,
marks={
'0': '0',
'0.02': '0.02',
'0.04': '0.04',
'0.06': '0.06',
'0.08': '0.08',
'0.1': '0.1',
},
),
html.Div(
className=
'app-controls-desc',
children=
'Adjust padding (as percentage) '
'between two tracks.'),
]),
html.Hr(
className='oncoprint-separator'),
html.Div([
html.H4('Colors'),
html.P('Change default background '
'color for the tracks.'),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children='Track color'
),
daq.ColorPicker(
id=
'oncoprint-tracks-color',
value={
'hex': '#AAAAAA'
})
]),
html.Hr(
className='oncoprint-separator'
),
html.H6("Mutation colors"),
html.
P("Select a mutation type and a color "
"to customize its look."),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children='Mutation type'
),
dcc.Dropdown(
id=
'oncoprint-colorscale-mutation-dropdown',
options=[
{
'label':
mut_type,
'value':
mut_type
} for mut_type in
COLORSCALE_MUTATIONS_OPT
],
value=
COLORSCALE_MUTATIONS_OPT[
0],
),
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children=
'Mutation color'),
daq.ColorPicker(
id=
'oncoprint-mutation-color',
value={
'hex':
COLORSCALE_COLORS_OPT[
0]
})
])
])
]))
])
]),
dcc.Store(id='oncoprint-store'),
]),
def Add_Dash(server):
"""Create a Dash app."""
external_stylesheets = [
'/static/dist/css/styles.css',
'https://fonts.googleapis.com/css?family=Lato',
'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
]
external_scripts = [
'/static/dist/js/includes/jquery.min.js', '/static/dist/js/main.js'
]
# server = flask.flask(__name__)
# app = dash.Dash(__name__, requests_pathname_prefix='/lda/', external_stylesheets=[dbc.themes.BOOTSTRAP])
# app.layout = html.Div(children=[navbar, body])
# def Add_Dash(server):
# return dash_app.server
dash_app = Dash(
server=server, #external_stylesheets=[dbc.themes.BOOTSTRAP],
external_stylesheets=external_stylesheets,
external_scripts=external_scripts,
routes_pathname_prefix='/word_cloud/')
dash_app.index_string = html_layout
"""
# Page layout and contents
"""
global_df = load_data()
left_column = dbc.Jumbotron([
html.H4(children="Select host & dataset size", className="display-5"),
html.Hr(className="my-2"),
html.Label(
"Select percentage of dataset (higher is more accurate but also slower)",
className="lead",
),
dcc.Slider(
id="n-selection-slider",
min=1,
max=100,
step=1,
marks=make_n_marks(),
value=10,
),
# html.Div([
# dcc.Markdown(''' --- ''')]),
html.Label("\n\nSelect a host",
style={"marginTop": 100},
className="lead"),
dcc.Dropdown(id="bank-drop",
clearable=False,
style={"marginBottom": 50}),
html.Label("Select Conflict Score", className="lead"),
html.Div(dcc.RangeSlider(id="time-window-slider",
min=0,
max=0.3,
step=None,
marks={
0: '0',
0.01: '1',
0.05: '2',
0.1: '3',
0.2: '4',
0.3: '5',
},
value=[0.1, 0.3]),
style={"marginBottom": 50}),
])
lda_plot = dcc.Loading(id="loading-lda-plot",
children=[dcc.Graph(id="tsne-lda")],
type="default")
lda_table = dcc.Loading(
id="loading-lda-table",
children=[
dash_table.DataTable(
id="lda-table",
style_cell_conditional=[{
"if": {
"column_id": "Text"
},
"textAlign": "left",
"height": "auto",
"width": "50%",
}],
style_cell={
"padding": "5px",
"overflow": "hidden",
"textOverflow": "ellipsis",
"maxWidth": 0,
},
style_header={
"backgroundColor": "white",
"fontWeight": "bold"
},
style_data={
"whiteSpace": "normal",
"height": "auto"
},
filter_action="native",
page_action="native",
page_current=0,
page_size=5,
columns=[],
data=[],
)
],
type="default",
)
wordcloud_plots = [
dbc.CardHeader(html.H5("Most popular words in reference titles")),
dbc.CardBody([
dbc.Row([
dbc.Col(
dcc.Loading(
id="loading-wordcloud",
children=[dcc.Graph(id="bank-wordcloud")],
type="default",
),
md=8,
),
dbc.Col(
dcc.Loading(
id="loading-frequencies",
children=[dcc.Graph(id="frequency_figure")],
type="default",
)),
])
]),
]
top_banks_plot = [
dbc.CardHeader(html.H5("Top 20 domains")),
dbc.CardBody([
dcc.Loading(
id="loading-banks-hist",
children=[dcc.Graph(id="bank-sample")],
type="default",
)
]),
]
body = dbc.Container(
[
dbc.Row(
[
dbc.Col(left_column, md=5, align="center"),
],
style={"margin": "auto"},
),
dbc.Card(
[dbc.Col(wordcloud_plots)],
style={"margin": "auto"},
),
# dbc.Row([dbc.Col([lda_plot, lda_table])]),
],
className="mt-12",
)
dash_app.layout = html.Div(children=[body])
"""
# Callbacks
"""
@dash_app.callback(
[
# Output("time-window-slider", "marks"),
# Output("time-window-slider", "min"),
# Output("time-window-slider", "max"),
# Output("time-window-slider", "step"),
Output("time-window-slider", "value"),
],
[Input("n-selection-slider", "value")],
)
def populate_time_slider(value):
# print("repopulating time-window-slider")
max_date, min_date = calculate_dates(global_df)
print(max_date, min_date)
print('4/df_tables.ratio.max() --------------------- \n\n\n\n\n',
df_tables['Date received'].max())
print(make_marks(min_date, max_date), int(min_date), max(min_date), 1,
[int(min_date), int(max_date)])
return ([int(min_date), int(max_date)], )
@dash_app.callback(Output("bank-drop", "options"),
[Input("time-window-slider", "value")])
def populate_bank_dropdown(time_values):
print("bank-drop: TODO USE THE TIME VALUES TO LIMIT THE DATASET")
values, counts = calculate_full(global_df)
values = global_df.Company.head(100)
# print("repopulating dropdown")
return make_options(values)
@dash_app.callback(
[
Output("bank-wordcloud", "figure"),
Output("frequency_figure", "figure")
],
[
# Input("bank-sample", "clickData"),
Input("bank-drop", "value"),
Input("time-window-slider", "value"),
Input("n-selection-slider", "value"),
],
)
def update_wordcloud(value_drop, time_values, n_selection):
if value_drop:
selected_bank = value_drop
# elif value_click:
# selected_bank = value_click["points"][0]["x"]
else:
return {}, {}
print("redrawing bank-wordcloud...")
n = float(n_selection / 100)
print('n_selection ------------------------\n', n_selection)
print('n\n', n)
print("got time window:", str(time_values))
print("got n_selection:", str(n_selection), str(n))
# sample the dataset according to the slider
df_tables = load_data_all(selected_bank)
local_df = sample_data(df_tables, n)
if time_values is not None:
# local_df["Date received"] = local_df["Date received"]
local_df = local_df[(local_df["Date received"] >= time_values[0])
&
(local_df["Date received"] <= time_values[1])]
local_df = local_df[local_df["Company"] == selected_bank]
add_stopwords(selected_bank)
wordcloud, frequency_figure = plotly_wordcloud(local_df)
print("redrawing bank-wordcloud...done")
return (wordcloud, frequency_figure)
return dash_app.server
]
# Layout
app.layout = html.Div(children=[
html.H1(children='Python Dash',
style={
'textAlign': 'center',
'color': '#ef3e18'
}),
html.Div('Web dashboard for Data Visualization using Python',
style={'textAlign': 'center'}),
html.Div('Coronavirus COVID-19 Global Cases - 1/22/2020 to 3/17/2020',
style={'textAlign': 'center'}),
html.Br(),
html.Br(),
html.Hr(style={'color': '#7FDBFF'}),
html.H3('Interactive Bar chart', style={'color': '#df1e56'}),
html.Div(
'This bar chart represent the number of confirmed cases in the first 20 countries of selected continent.'
),
dcc.Graph(id='graph1'),
html.Div('Please select a continent',
style={
'color': '#ef3e18',
'margin': '10px'
}),
dcc.Dropdown(id='select-continent',
options=[{
'label': 'Asia',
'value': 'Asia'
}, {
disp = 'none'
button = 'Add Instrument Combination'
combinations.append(
html.Div(id=f'instrument-combination-{i}',
children=create_combination_selection(i),
style={'display': disp}),
)
combinations.append(
html.Button(id=f'combo-button-{i}',
children=button,
style={'display': 'block',
'width': '50%',
'margin': 'auto',
'marginTop': 10}),
)
combinations.append(html.Hr())
combo_init = html.Div(combinations)
# -----------
# Results
# -----------
crlb_init = html.Div([
# ............
# Summary
# ............
html.Div([
html.H4('Reference Star Summary:'),
dash_table.DataTable(id='ref-table',
columns=[{'name': i, 'id': i} for i
in ['name', 'Teff', 'logg', 'v_micro',
'[Fe/H]', '[alpha/Fe]']],
def create_app_ui():
# Create the UI of the Webpage here
colors = {
'background': 'white',
'text': '#999900'
}
main_layout = html.Div(style={'backgroundColor': colors['background']},children=[
html.H1('Terrorism Analysis with Insights', id='Main_title',style={'textAlign': 'center','color': colors['text'] }),
dcc.Tabs(id="Tabs", value="Map",parent_className='custom-tabs',className='custom-tabs-container',children=[
dcc.Tab(label="Map tool" ,id="Map tool",value="Map", className='custom-tab',selected_className='custom-tab--selected',children=[
dcc.Tabs(id = "subtabs", value = "WorldMap",children = [
dcc.Tab(label="World Map tool", id="World", value="WorldMap",className='custom-tab',selected_className='custom-tab--selected'),
dcc.Tab(label="India Map tool", id="India", value="IndiaMap",className='custom-tab',selected_className='custom-tab--selected')
],colors={
"border": "yellow",
"primary": "black",
"background": "cornsilk"
}),
html.Div([dcc.Dropdown(
id='month',
options=month_list,
placeholder='Select Month',multi=True),
], style={'width': '49%', 'display': 'inline-block','margin-top':'1em'}),
html.Div([dcc.Dropdown(
id='date',
placeholder='Select Day',multi=True
),
], style={'width': '49%', 'float': 'right', 'display': 'inline-block','margin-top':'1em'}),
html.Div([dcc.Dropdown(
id='region-dropdown',
options=region_list,
placeholder='Select Region',multi=True
),],style={'width': '49%', 'display': 'inline-block'}),
html.Div([dcc.Dropdown(
id='country-dropdown',
options=[{'label': 'All', 'value': 'All'}],
placeholder='Select Country',multi=True
),], style={'width': '49%', 'float': 'right', 'display': 'inline-block'}),
html.Div([ dcc.Dropdown(
id='state-dropdown',
options=[{'label': 'All', 'value': 'All'}],
placeholder='Select State or Province',multi=True
),],style={'width': '49%', 'display': 'inline-block'}),
html.Div([dcc.Dropdown(
id='city-dropdown',
options=[{'label': 'All', 'value': 'All'}],
placeholder='Select City',multi=True
),],style={'width': '49%', 'float': 'right', 'display': 'inline-block'}),
html.Div([dcc.Dropdown(
id='attacktype-dropdown',
options=attack_type_list,#[{'label': 'All', 'value': 'All'}],
placeholder='Select Attack Type',multi=True
),],style={'width': '49%', 'float': 'center', 'display': 'inline-block'}),
html.H5('Select the Year', id='year_title',style={
'textAlign': 'center',
'color': 'black',
'margin-top':'0.5em',
}),
html.Div([dcc.RangeSlider(
id='year-slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),max(year_list)],
marks=year_dict,
)],style={'color': 'red'}),
html.Br()
]),
dcc.Tab(label = "Chart Tool", id="chart tool", value="Chart", className='custom-tab',selected_className='custom-tab--selected',children=[
dcc.Tabs(id = "subtabs2", value = "WorldChart",children = [
dcc.Tab(label="World Chart tool", id="WorldC", value="WorldChart",className='custom-tab',selected_className='custom-tab--selected'),
dcc.Tab(label="India Chart tool", id="IndiaC", value="IndiaChart",className='custom-tab',selected_className='custom-tab--selected')],colors={
"border": "yellow",
"primary": "black",
"background": "cornsilk"
}),
html.Div([dcc.Dropdown(id="Chart_Dropdown", options = chart_dropdown_values, placeholder="Select option", value = "region_txt"), ],style={'width': '49%', 'display': 'inline-block','margin-top':'1em'}),
html.Div([dcc.Input(id="search", placeholder="Search Filter"),],style={'width': '50%','height':'50%', 'float': 'right', 'display': 'inline-block','margin-top':'1em','display':'flex'}),
html.Hr(),
dcc.RangeSlider(
id='cyear_slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),max(year_list)],
marks=year_dict,
step=None
),
html.Br()
]),
],colors={
"border": "yellow",
"primary": "black",
"background": "orange"
}),
html.Div(
dcc.Loading(
id='graph-object',
type="default",
#children=html.Div(id="loading-output-1",)
children = ["World Map is loading"]
),
),
html.H6('By: Sumit Dhar Dwivedi with Forsk Coding School', id='Mains_title',style={'textAlign': 'center','color': 'black' }),
],)
return main_layout
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'))))
# 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'),
html.Hr(), footer
])
# URL Routing for Multi-Page Apps: https://dash.plot.ly/urls
@app.callback(Output('page-content', 'children'), [Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/':
return index.layout
elif pathname == '/predictions':
return predictions.layout
elif pathname == '/insights':
return insights.layout
elif pathname == '/process':
return process.layout
else:
def create_app_ui():
# Create the UI of the Webpage here
main_layout = html.Div([
html.H1('Terrorism Analysis with Insights', id='Main_title'),
dcc.Tabs(
id="Tabs",
value="Map",
children=[
dcc.Tab(
label="Map tool",
id="Map tool",
value="Map",
children=[
dcc.Tabs(id="subtabs",
value="WorldMap",
children=[
dcc.Tab(label="World Map tool",
id="World",
value="WorldMap"),
dcc.Tab(label="India Map tool",
id="India",
value="IndiaMap")
]),
dcc.Dropdown(id='month-dropdown',
options=month_list,
placeholder='Select Month',
multi=True),
dcc.Dropdown(id='date-dropdown',
placeholder='Select Day',
multi=True),
dcc.Dropdown(id='region-dropdown',
options=region_list,
placeholder='Select Region',
multi=True),
dcc.Dropdown(id='country-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='Select Country',
multi=True),
dcc.Dropdown(id='state-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='Select State or Province',
multi=True),
dcc.Dropdown(id='city-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='Select City',
multi=True),
dcc.Dropdown(
id='attacktype-dropdown',
options=
attack_type_list, #[{'label': 'All', 'value': 'All'}],
placeholder='Select Attack Type',
multi=True),
html.H5('Select the Year', id='year_title'),
dcc.RangeSlider(id='year-slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br()
]),
dcc.Tab(label="Chart Tool",
id="chart tool",
value="Chart",
children=[
dcc.Tabs(
id="subtabs2",
value="WorldChart",
children=[
dcc.Tab(
label="World Chart tool",
id="WorldC",
value="WorldChart",
children=[
html.Br(),
html.Br(),
dcc.Dropdown(
id="Chart_Dropdown",
options=chart_dropdown_values,
placeholder="Select option",
value="region_txt"),
html.Br(),
html.Br(),
html.Hr(),
dcc.Input(
id="search",
placeholder="Search Filter"),
html.Hr(),
html.Br(),
dcc.RangeSlider(id='cyear_slider',
min=min(year_list),
max=max(year_list),
value=[
min(year_list),
max(year_list)
],
marks=year_dict,
step=None),
html.Br()
]),
dcc.Tab(label="India Chart tool",
id="IndiaC",
value="IndiaChart",
children=[])
]),
])
]),
dcc.Loading(dcc.Graph(id='graph-object', figure=go.Figure()))
])
return main_layout
def layout():
return html.Div(id='speck-body', className='app-body', children=[
dcc.Loading(className='dashbio-loading', children=html.Div(
id='speck-container',
children=[
dash_bio.Speck(
id='speck',
view={'resolution': 600, 'zoom': 0.3},
scrollZoom=True
)
]
)),
html.Div(id='speck-control-tabs', className='control-tabs', children=[
dcc.Tabs(id='speck-tabs', value='what-is', children=[
dcc.Tab(
label='About',
value='what-is',
children=html.Div(className='control-tab', children=[
html.H4(className='what-is', children='What is Speck?'),
html.P('Speck is a WebGL-based molecule renderer. By '
'using ambient occlusion, the resolution of '
'the rendering does not suffer as you zoom in.'),
html.P('You can toggle between molecules using the menu under the '
'"Data" tab, and control parameters related to '
'the appearance of the molecule in the "View" tab. '
'These parameters can be controlled at a low level '
'with the sliders provided, or preset views can be '
'applied for a higher-level demonstration of changing '
'atom styles and rendering.')
])
),
dcc.Tab(
label='Data',
value='datasets',
children=html.Div(className='control-tab', children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className='app-controls-name',
children='Preloaded'
),
dcc.Dropdown(
id='speck-molecule-dropdown',
className='speck-dropdown',
options=[
{'label': 'DNA',
'value': '{}dna.xyz'.format(DATAPATH)},
{'label': 'Caffeine',
'value': '{}caffeine.xyz'.format(DATAPATH)},
{'label': 'Methane',
'value': '{}methane.xyz'.format(DATAPATH)},
{'label': 'Testosterone',
'value': '{}testosterone.xyz'.format(DATAPATH)},
{'label': 'Gold nanoparticle',
'value': '{}au.xyz'.format(DATAPATH)},
{'label': 'Thiolated gold nanoparticle',
'value': '{}au_thiol.xyz'.format(DATAPATH)},
{'label': 'Benzene',
'value': '{}benzene.xyz'.format(DATAPATH)},
{'label': 'Protein (4E0O)',
'value': '{}4E0O.xyz'.format(DATAPATH)}
],
value='{}dna.xyz'.format(DATAPATH)
)
]
),
html.Div(id='speck-preloaded-uploaded-alert'),
dcc.Upload(
id='speck-file-upload',
className='control-upload',
children=html.Div([
"Drag and drop .xyz files, or click \
to select files."
])
),
html.A(
html.Button(
'Download sample .xyz data',
id='speck-file-download',
className='control-download'
),
href=os.path.join('assets', 'sample_data',
'speck_4QCI.xyz'),
download='4QCI.xyz'
)
])
),
dcc.Tab(
label='View',
value='view-options',
children=html.Div(className='control-tab', children=[
dcc.Checklist(
id='speck-enable-presets',
options=[{'label': 'Use presets', 'value': 'True'}],
value=[]
),
html.Hr(),
html.Div(id='speck-controls-detailed', children=default_sliders),
html.Div(
id='speck-controls-preset',
className='speck-controls',
children=[
html.Div(className='app-controls-block', children=[
html.Div(className='app-controls-name',
children='Rendering style'),
dcc.Dropdown(
id='speck-preset-rendering-dropdown',
className='speck-dropdown',
options=[
{'label': 'Default/reset',
'value': 'default'},
{'label': 'Toon',
'value': 'toon'},
],
value='default'
)
]),
html.Div(className='app-controls-block', children=[
html.Div(className='app-controls-name', children='Atom style'),
dcc.Dropdown(
id='speck-preset-atom-style-dropdown',
className='speck-dropdown',
options=[
{'label': 'Ball-and-stick',
'value': 'stickball'},
{'label': 'Licorice',
'value': 'licorice'}
],
value='default'
)
])
]
)
])
),
])
]),
dcc.Store(
id='speck-store-preset-rendering',
data=None
),
dcc.Store(
id='speck-store-preset-atom-style',
data=None
),
])
def linear_regression(n):
global df_cleaned
file = db.get('lr.file')
if file is None:
file = 'empty'
path = FileUtils.path('clean', file)
df_cleaned = pd.read_csv(path)
tdf = df_cleaned.head(10).round(4)
div = [
html.Div(children=[
html.H2(children='Cleaned Data: ' + file),
html.H2(children='Tag: Tag ' + str(db.get('tags')[file])),
dbc.Table.from_dataframe(tdf,
striped=True,
bordered=True,
hover=True,
style=common.table_style)
]),
html.Hr(),
html.H3(children='Variable Selection and Plotting'),
html.Div([
html.Div([
html.Div(id='lr-ordered-df', style={'display': 'none'}),
html.Hr(),
html.Label('Select X-axis variable for scatter plot'),
dcc.Dropdown(id='lr-x-var-plot',
options=[{
'label': i,
'value': i
} for i in df_cleaned.columns],
multi=False),
html.Label('Select Y-axis variable for scatter plot'),
dcc.Dropdown(id='lr-y-var-plot',
options=[{
'label': i,
'value': i
} for i in df_cleaned.columns],
multi=False),
html.Br(),
html.H2('Perform Linear Regression'),
html.Label('Select X variable from Dropdown'),
dcc.Dropdown(id='lr-x-var-selection',
options=[{
'label': i,
'value': i
} for i in df_cleaned.columns],
multi=True),
html.Label('Select Y variable from Dropdown'),
dcc.Dropdown(id='lr-y-var-selection',
options=[{
'label': i,
'value': i
} for i in df_cleaned.columns],
multi=False),
],
style={
'width': '48%',
'display': 'inline-block'
}),
html.Div([
html.Label('Scatter Plot'),
dcc.Graph(id='lr-scatter-plot'),
],
style={
'width': '48%',
'float': 'right',
'display': 'inline-block'
}),
]),
html.Hr(),
html.Div([
html.Div([], id='linear-regression-status'),
html.Br(),
html.H2('Statistics Summary Table'),
html.Table(id='lr-stats-table'),
html.H2('Linear Regression Coefficients'),
html.Table(id='lr-coeff-table'),
html.H2('Plot')
]),
html.Br(),
html.Div([
dcc.Graph(id='lr-y-ycap-plot', figure=y_ycap_fig),
dcc.Graph(id='lr-error-plot', figure=error_fig),
html.Div([], id='lr-error-mean')
]),
html.Div([
html.Hr(),
html.H2('ANOVA Table'),
html.Div([], id='lr-anova-table'),
]),
html.Div([
html.Hr(),
html.H2(
'Predict Data (pass comma separated) Independent Variables'),
html.Div([], id='lr-predict-ind-var'),
dbc.Input(id="lr-predict-data",
placeholder="x1,x2,x3,x4,x5, ...",
type="text"),
html.Br(),
dbc.Button("Predict", color="primary", id='lr-predict'),
html.Div([], id='lr-predict-display'),
html.Div([], id='lr-predict-data-do-nothing'),
]),
html.Div([
html.Hr(),
html.H2('Save Model'),
dbc.Input(id="lr-save-model",
placeholder="Model Name",
type="text"),
html.Br(),
dbc.Button("Save", color="primary", id='lr-save'),
html.Div([], id='lr-save-display'),
html.Div([], id='lr-save-model-do-nothing'),
])
]
return div
def create_app_ui():
main_layout = html.Div([
html.H1(children='Terrorism Analysis with Insights', id='Main_title'),
dcc.Tabs(id="Tabs",
value="Map",
children=[
dcc.Tab(label="Map tool",
id="Map tool",
value="Map",
children=[
dcc.Tabs(id="subtabs",
value="WorldMap",
children=[
dcc.Tab(label="World Map Tool",
id="World",
value="WorldMap"),
dcc.Tab(label="India Map tool",
id="India",
value="IndiaMap")
]),
dcc.Dropdown(id='month',
options=month_list,
placeholder="Select Month",
multi=True),
dcc.Dropdown(id='date',
placeholder="Select Day",
multi=True),
dcc.Dropdown(id='region_dropdown',
options=region_list,
placeholder="Select Region",
multi=True),
dcc.Dropdown(id='country_dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder="Select Country",
multi=True),
dcc.Dropdown(id='state_dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder="Select State",
multi=True),
dcc.Dropdown(id='city_dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder="Select City",
multi=True),
dcc.Dropdown(id='attack_type_dropdown',
options=attack_type_list,
placeholder="Select Attack Type",
multi=True),
html.Br(),
html.H5('Select the Year', id='year_title'),
dcc.RangeSlider(
id='year_slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br(),
]),
dcc.Tab(label="Chart Tool",
id="chart tool",
value="Chart",
children=[
dcc.Tabs(id="subtabs2",
value="WorldChart",
children=[
dcc.Tab(label="World Chart tool",
id="WorldC",
value="WorldChart"),
dcc.Tab(label="India Chart tool",
id="IndiaC",
value="IndiaChart")
]),
html.Br(),
dcc.Dropdown(id="Chart_Dropdown",
options=chart_dropdown_values,
placeholder="Select option",
value="region_txt"),
html.Br(),
html.Hr(),
dcc.Input(id="search",
placeholder="Search Filter"),
html.Hr(),
html.Br(),
dcc.RangeSlider(
id='cyear_slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br()
]),
]),
html.Div(id='graph_object', children=["Graph will be shown here...."])
])
return main_layout
def create_app_ui():
main_layout = html.Div([
html.Div([html.Img(src='/assets/Icon.png',style={'height':'150px','width':'170px'})], style= {'textAlign':'center'} ),
html.H1(id='main_title',children='Terrorism Analysis with Insights',style={'background-image':'url(military.jpg)','fontFamily':'Arial,Helvetica,sans-serif','font-size':70,'textAlign':'center','color':'White','background-color':'lime'}),
#html.H3(id='division',children=' Project by Bijayalaxmi Mohanty',style={'font-size':35,'textAlign':'right','color':'Red'}),
#html.Img(src='/assets/icon-military.jpg') ,
dcc.Tabs(id="Tabs", value="Map",style={'font-size':25,'textAlign':'center','color':'Black','background-color':'Yellow'} , children=[
dcc.Tab(label="Map tool" ,id="Map tool",value="Map",style={'font-size':25,'textAlign':'center','color':'Black','background-color':'Yellow'} ,children=[
dcc.Tabs(id = "subtabs", value = "WorldMap",style={'font-size':25,'textAlign':'center','color':'Black','background-color':'Yellow'} ,children = [
dcc.Tab(label="World Map tool", id="World", value="WorldMap",style={'font-size':25,'textAlign':'center','color':'Black','background-color':'Yellow'} ),
dcc.Tab(label="India Map tool", id="India", value="IndiaMap",style={'font-size':25,'textAlign':'center','color':'Black','background-color':'Yellow'} )
]),
html.Hr(),
html.H3('MAP FILTERS',id='slide_title',style={'textAlign':'center','color':'Black'} ),
dcc.Dropdown(
id='month',
options=month_list,
placeholder='Select Month',
style={'textAlign':'center','color':'Black','borderRadius':'15px','marginLeft':220,'marginRight':670,'borderColor':'Black'},
multi = True
),
dcc.Dropdown(
id='date',
options=date_list,
placeholder='Select Day',
style={'textAlign':'center','color':'Black','borderRadius':'15px','marginLeft':220,'marginRight':670,'borderColor':'Black'},
multi = True
),
dcc.Dropdown(
id='region-dropdown',
options=region_list,
placeholder='Select Region',
style={'textAlign':'center','color':'Black','borderRadius':'15px','marginLeft':220,'marginRight':670,'borderColor':'Black'},
multi = True
),
dcc.Dropdown(
id='country-dropdown',
options=[{'label': 'All', 'value': 'All'}],
placeholder='Select Country',
style={'textAlign':'center','color':'Black','borderRadius':'15px','marginLeft':220,'marginRight':670,'borderColor':'Black'},
multi = True
),
dcc.Dropdown(
id='state-dropdown',
options=[{'label': 'All', 'value': 'All'}],
placeholder='Select State or Province',
style={'textAlign':'center','color':'Black','borderRadius':'15px','marginLeft':220,'marginRight':670,'borderColor':'Black'},
multi = True
),
dcc.Dropdown(
id='city-dropdown',
options=[{'label': 'All', 'value': 'All'}],
placeholder='Select City',
style={'textAlign':'center','color':'Black','borderRadius':'15px','marginLeft':220,'marginRight':670,'borderColor':'Black'},
multi = True
),
dcc.Dropdown(
id='attacktype-dropdown',
options=attack_type_list,
placeholder='Select Attack Type',
style={'textAlign':'center','color':'Black','borderRadius':'15px','marginLeft':220,'borderColor':'Black','marginRight':670},
multi = True
),
html.H2('Select the Year', id='year_title'),
dcc.RangeSlider(
id='year-slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),max(year_list)],
marks=year_dict,
step=None
),
html.Br()
]),
dcc.Tab(label = "Chart Tool", id="chart tool", value="Chart",style={'font-size':30,'textAlign':'center','color':'Black','background-color':'Yellow'} , children=[
dcc.Tabs(id = "subtabs2", value = "WorldChart",style={'font-size':30,'textAlign':'center','color':'Black','background-color':''} ,children = [
dcc.Tab(label="World Chart tool", id="WorldC",style={'font-size':30,'textAlign':'center','color':'Black','background-color':'Yellow'} , value="WorldChart"),
dcc.Tab(label="India Chart tool", id="IndiaC",style={'font-size':30,'textAlign':'center','color':'Black','background-color':'Yellow'} , value="IndiaChart")]),
dcc.Dropdown(id="Chart_Dropdown", options = chart_dropdown_values, placeholder="Select option", value = "region_txt"),
html.Br(),
html.Br(),
html.Hr(),
dcc.Input(id="search", placeholder="YEAR FILTER"),
html.Hr(),
html.Br(),
dcc.RangeSlider(
id='cyear_slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),max(year_list)],
marks=year_dict,
step=None
),
html.Br()
]),
]),
html.Div(id = "graph-object", children ="Map is loading")
])
return main_layout
def layout():
return html.Div(
id='clustergram-body',
className='app-body',
children=[
dcc.Loading(className='dashbio-loading',
children=html.Div(id='clustergram-wrapper',
children=dcc.Graph(
id='clustergram',
style={'display': 'none'}))),
html.Div(
id='clustergram-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='clustergram-tabs',
value='what-is',
children=[
dcc.Tab(
label='About',
value='what-is',
children=html.Div(
className='control-tab',
children=[
html.H4(
className='what-is',
children='What is Clustergram?'),
html.
P('Clustergram is a combination of a heatmap and '
'dendrograms that allows you to display '
'hierarchical clustering data. '
'Clusters on the dendrograms are highlighted in '
'one color if they comprise data points '
'that share some minimal level of correlation.'
),
html.
P('In the "Data" tab, you can select a preloaded '
'dataset to display or, alternatively, upload one '
'of your own. A sample dataset is also available '
'for download in the tab.'),
html.
P('In the "Graph" tab, you can choose the '
'dimension(s) along which clustering will be '
'performed (row or column). You can also change '
'the threshold that determines the point at which '
'clusters are highlighted for the row and column '
'dendrograms, and choose which rows and columns '
'are used to compute the clustering.'
),
html.
P('In addition, you can highlight specific clusters '
'by adding annotations to the clustergram, and '
'choose whether to show or hide the labels for the '
'rows and/or columns.')
])),
dcc.Tab(
label='Data',
value='datasets',
children=html.Div(
className='control-tab',
children=[
html.Div(
'Preloaded dataset',
title=
'Choose from some pre-loaded datasets '
+ 'to view them on the heatmap.',
className=
'fullwidth-app-controls-name',
),
dcc.Dropdown(
id='clustergram-datasets',
options=[{
'label':
'Anderson\'s Iris Data',
'value': 'iris'
}, {
'label': 'mtcars',
'value': 'mtcars'
}, {
'label': 'Prostate cancer',
'value': 'prostatecancer'
}, {
'label':
'Lung cancer subtypes',
'value': 'lungcancer'
}],
value='prostatecancer'),
html.Br(),
html.Div(
'Upload dataset',
title=
'Upload your own dataset below.',
className='app-controls-name'),
html.Div(id='file-upload-name'),
html.Div(
id=
'clustergram-file-upload-container',
title=
'Upload your own dataset here.',
children=[
dcc.Upload(
id='file-upload',
className='control-upload',
children=html.Div([
"Drag and drop .soft files, or click \
to select files."
]),
accept='.soft'),
],
),
html.Div([
html.A(html.Button(
'Download sample .soft data',
id=
'clustergram-download-sample-data',
className='control-download'),
href=os.path.join(
'assets', 'sample_data',
'clustergram_GDS5826.soft'
),
download='GDS5826.soft')
]),
html.Hr(),
html.Div(id='clustergram-info'),
])),
dcc.Tab(
label='Graph',
value='graph',
children=[
html.Div(
className='control-tab',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
'Cluster by:',
title=
'Calculate dendrogram for row data, column '
'data, or both.',
className=
'app-controls-name'),
dcc.Dropdown(
id='cluster-checklist',
options=[{
'label': 'Row',
'value': 'row'
}, {
'label': 'Column',
'value': 'col'
}],
value=['row', 'col'],
multi=True)
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
'Hide labels:',
title=
'Hide labels for the row and/or column '
+ 'dendrograms.',
className=
'app-controls-name'),
dcc.Dropdown(
id='hide-labels',
options=[{
'label': 'Row',
'value': 'row'
}, {
'label': 'Column',
'value': 'col'
}],
multi=True,
value=['row']),
]),
html.Hr(),
html.Div(
className='app-controls-block',
children=[
html.Div(
'Color threshold:',
className=
'app-controls-name'),
html.Div(
className=
'app-controls-desc',
children=
'Change the threshold level that is used to '
+
'determine separate clusters.',
),
]),
html.Br(),
html.Div(
id='threshold-wrapper',
children=[
'Column: ',
dcc.Slider(
id='column-threshold',
className=
'control-slider',
min=0,
max=20,
step=0.5,
value=10),
html.Br(), 'Row: ',
dcc.Slider(
id='row-threshold',
className=
'control-slider',
min=0,
max=20,
step=0.5,
value=10)
]),
html.Br(),
html.Hr(),
html.Div(
id='add-group-markers',
children=[
html.Div(
className=
'app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children=
'Annotations:'
),
html.Button(
id=
'remove-all-group-markers',
children=
'Remove all',
n_clicks=0,
n_clicks_timestamp
=0),
html.Div(
className=
'app-controls-desc',
children=[
'Annotate your heatmap by labeling clusters; '
'below, you can choose a color for the annotation, '
'as well as text for the annotation. Then, click '
'on the row cluster or column cluster that you '
'wish to annotate.'
]),
]),
daq.ColorPicker(
id=
'clustergram-annot-color',
value={
'hex':
color_palette[0]
},
size=315),
dcc.Input(
id='annotation',
placeholder=
'annotation text',
type='text',
value=''),
]),
html.Br(),
html.Hr(),
html.Div(
className='app-controls-block',
children=[
html.Div(
'Rows to display:',
title=
'Select a subset of rows from the uploaded '
+
'or preloaded dataset to compute clustering on.',
className=
'fullwidth-app-controls-name'
),
dcc.Dropdown(
id='selected-rows',
multi=True,
value=[])
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
'Columns to display:',
title=
'Select a subset of columns from the uploaded '
+
'or preloaded dataset to compute clustering on.',
className=
'fullwidth-app-controls-name'
),
dcc.Dropdown(
id='selected-columns',
multi=True,
value=[]),
])
])
])
]),
dcc.Store(id='data-meta-storage'),
dcc.Store(id='fig-options-storage'),
dcc.Store(id='computed-traces'),
dcc.Store(id='curves-dict'),
dcc.Store(id='group-markers'),
])
])
style={'max-height': '128px',
'color': 'white',
}
),
className='d-flex justify-content-center',
style={'max-width': '100%',
'background-color': colors[0]},
),
dbc.Container(
html.Div(
[
html.Br(),
html.H5("Пивоварни", style={'text-align':'center',
'text-transform': 'uppercase'}),
html.Hr(), # dividing line
dbc.Row(
[
dbc.Col(tables, md=5
),
dbc.Col(charts
),
],
align="start",
justify='center',
),
html.Br(),
html.Br(),
],
def tableview():
return html.Div([
dbc.Row([
dbc.Col(
[
html.Div([
html.H4("Select Dimension",
style={
"font-size": "1rem",
"padding-left": "0.5rem",
"padding-top": "0.5rem"
}),
html.H5("First Dimension",
style={
"font-size": "0.8rem",
"color": "#919191",
"padding-left": "0.5rem",
"padding-top": "0.5rem"
}),
dcc.Dropdown(id="dropdown-dimension-1",
placeholder="...",
options=[{
"label": 'Service Category',
"value": 'Service Category'
}, {
"label": 'Sub Category',
"value": 'Sub Category',
'disabled': True
}] + [{
"label": k,
"value": k,
'disabled': True
} if len(dimension[k]) == 0 else {
"label": k,
"value": k,
'disabled': False
} for k in list(dimension.keys())],
value='Patient Health Risk Level',
clearable=False,
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem"
}),
html.H5("Second Dimension",
style={
"font-size": "0.8rem",
"color": "#919191",
"padding-left": "0.5rem",
"padding-top": "0.5rem"
}),
dcc.Dropdown(id="dropdown-dimension-2",
disabled=True,
placeholder="...",
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem"
}),
html.H5("Third Dimension",
style={
"font-size": "0.8rem",
"color": "#919191",
"padding-left": "0.5rem",
"padding-top": "0.5rem"
}),
dcc.Dropdown(id="dropdown-dimension-3",
disabled=True,
placeholder="...",
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem"
}),
html.H4("Select Measures",
style={
"font-size": "1rem",
"padding-left": "0.5rem",
"padding-top": "1rem"
}),
dcc.Dropdown(id="dropdown-measure-1",
options=[{
"label": k,
"value": k
} for k in measure],
value=[
'Diff % from Benchmark Total Cost',
'YTD Total Cost',
'Annualized Total Cost',
'Benchmark Total Cost'
],
placeholder="Select measures",
multi=True,
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem"
}),
]),
html.Hr(className="ml-1"),
html.Div([
html.H4("Filters",
style={
"font-size": "1rem",
"padding-left": "0.5rem",
"padding-top": "0.5rem"
}),
html.H5("Filter 1",
style={
"font-size": "0.8rem",
"color": "#919191",
"padding-left": "0.5rem",
"padding-top": "0.5rem"
}),
dcc.Dropdown(id="dimension_filter_selection_1",
options=[{
"label": 'Service Category',
"value": 'Service Category'
}, {
"label": 'Sub Category',
"value": 'Sub Category',
'disabled': True
}] + [{
"label": k,
"value": k,
'disabled': True
} if len(dimension[k]) == 0 else {
"label": k,
"value": k,
'disabled': False
} for k in list(dimension.keys())],
placeholder="Add a Filter",
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem"
}),
html.H5("", style={"font-size": "0.8rem"}),
dcc.Dropdown(
id="dimension_filter_1",
placeholder="Select Filter Value",
multi=True,
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem"
},
),
html.H5("Filter 2",
style={
"font-size": "0.8rem",
"color": "#919191",
"padding-left": "0.5rem",
"padding-top": "0.5rem"
}),
dcc.Dropdown(id="dimension_filter_selection_2",
options=[{
"label": k,
"value": k
} for k in list(dimension.keys())],
placeholder="Add a Filter",
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem"
}),
html.H5("", style={"font-size": "0.8rem"}),
dcc.Dropdown(id="dimension_filter_2",
placeholder="Select Filter Value",
multi=True,
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem"
}),
# html.H5("+ Add more Filter", style={"font-size":"1rem","color":"#1357DD","padding-left":"0.5rem", "padding-top":"0.5rem"}),
])
],
width=3,
style={"overflow-y": "scroll"}),
dbc.Col(
[
html.Div(
[
html.
P("*Default sorted by Diff % from Benchmark Total Cost",
style={"font-size": "0.6rem"}),
dash_table.DataTable(
id='datatable-tableview',
style_header={
'height': 'auto',
'width': 'auto',
'whiteSpace': 'normal',
'font-family': 'NotoSans-Condensed',
'font-size': 'auto',
'backgroundColor': '#dce7fc',
'color': '#1357DD'
},
style_cell={
'font-family': 'NotoSans-Regular',
'font-size': '0.8rem',
'textAlign': 'center'
},
#fixed_rows={ 'headers': True, 'data': 0 },
style_table={'textAlign': 'center'},
sort_action='native',
page_size=200,
style_data_conditional=[{
'if': {
'row_index': 'odd'
},
'backgroundColor':
'rgb(248, 248, 248)'
}],
)
],
style={
"padding-left": "1rem",
"padding-right": "1rem",
"padding-bottom": "1rem",
"overflow": "scroll",
'max-height': '60rem'
})
],
width=9,
),
])
])
app.layout = html.Div([
html.Div([
html.H1('DENVER TEMPERATURE RECORD',
className='twelve columns',
style={'text-align': 'center'}),
],
className='row'),
html.Div([
html.H4(id='title-date-range',
className='twelve columns',
style={'text-align': 'center'}),
],
className='row'),
html.Hr(style={
'margin': '0',
'margin-bottom': '5'
}),
html.Div([
html.Div(
[
html.Label('Select Product'),
dcc.RadioItems(
id='product',
options=[
{
'label': 'Temperature graphs',
'value': 'temp-graph'
},
{
'label': 'Climatology for a day',
'value': 'climate-for-day'
# TODO
# [/] Add Clear form fucntionality
# [ ] Add console logging functionality
# [ ] Add additional function notes and annotations
pio.templates.default = "plotly_dark"
app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY],
suppress_callback_exceptions=True)
content = html.Div(id="page-content", style=dvfo.content_style_1)
sidebar = html.Div(
[
html.H4("Data Viz 3000"),
html.Hr(style={'background-color': 'white'}),
html.P("Visualize any database data!"),
dbc.Nav(
[
dbc.NavLink("Data Viz", href="/dv", active="exact"),
dbc.NavLink("Settings", href="/st", active="exact"),
dbc.NavLink("Event Log", href="/el", active="exact"),
],
vertical=True,
pills=True,
),
html.P("Application developed by Nathan Meek",
style={
'position': 'absolute',
'bottom': '50px'
}),
def parse_contents(contents, filename, date):
content_type, content_string = contents.split(',')
decoded = base64.b64decode(content_string)
try:
if 'csv' in filename:
# Assume that the user uploaded a CSV file
df = pd.read_csv(io.StringIO(decoded.decode('utf-8')))
elif 'xls' in filename:
# Assume that the user uploaded an excel file
df = pd.read_excel(io.BytesIO(decoded))
except Exception as e:
print(e)
return html.Div(['There was an error processing this file.'])
corr = df.iloc[:, 2].corr(df.iloc[:, 1])
df['abs_errors'] = np.abs(df['baseline_spin'] - df['new_tech_spin'])
MAE2 = np.mean(df['abs_errors'])
percent_in_range2 = sum(
(df['new_tech_spin'] >= df['baseline_spin'] - MAE2)
& (df['new_tech_spin'] <= df['baseline_spin'] + MAE2)) / df.shape[0]
avg_miss2 = np.mean(df.loc[df['abs_errors'] > MAE, 'abs_errors'])
return html.Div([
html.H5(filename),
html.H6(datetime.datetime.fromtimestamp(date)),
dcc.Graph(id='jake',
figure={
'data': [
go.Scatter(x=df.iloc[:, 2],
y=df.iloc[:, 1],
text="(Baseline, New Tech)",
mode='markers',
opacity=0.7,
marker={
'size': 15,
'line': {
'width': 0.5,
'color': 'white'
}
})
],
'layout':
go.Layout(xaxis={
'type': 'log',
'title': df.iloc[:, 2].name + " (RPM)"
},
yaxis={'title': df.iloc[:, 1].name + " (RPM)"},
margin={
'l': 80,
'b': 40,
't': 0,
'r': 80
},
legend={
'x': 0,
'y': 1
},
hovermode='closest')
}),
html.H3(children=f"Correlation: {np.round(corr, 4)}",
style={
'textAlign': 'center',
'color': colors['black']
}),
html.H3(children=f"MAE: {np.round(MAE2, 4)} RPM",
style={
'textAlign': 'center',
'color': colors['black']
}),
html.H3(children=
f"Percent in MAE Range: {np.round(percent_in_range2, 4)*100}%",
style={
'textAlign': 'center',
'color': colors['black']
}),
html.H3(children=f"Average Miss: {np.round(avg_miss2, 4)} RPM",
style={
'textAlign': 'center',
'color': colors['black']
}),
html.Hr(), # horizontal line
# For debugging, display the raw contents provided by the web browser
html.Div('Raw Content'),
html.Pre(contents[0:200] + '...',
style={
'whiteSpace': 'pre-wrap',
'wordBreak': 'break-all'
})
])
vulcan_opts = [{'label':k, 'value':k} for k in vulcan_list]
content = dbc.Container(
[
dbc.Row(
dbc.Col(
dbc.Row(
[
dcc.Graph(id='map',config={'displayModeBar': False}, style={'width':'100%', 'height':'100vh'}),
html.Div(
[
dbc.Card(
[
html.H4('Volcano Eruption Explorer'),
html.Hr(),
dcc.Dropdown(
id='activity-select',
placeholder='Select activity evidence',
clearable=False,
options=vulcan_opts
),
dbc.Button('Explore',id='explore-button',color='secondary',
block=True, className='mt-4'),
html.Hr(),
html.P(id='count-display'),
html.Hr(className='mt-0'),
dcc.Markdown(id='info-display',className='py-0')
],
body=True,
style={'color':'#000000','backgroundColor':'#ffffff'},
def getUploadLayout(samples_folder):
def getCard(source):
return dbc.Card(
html.Div(
[dbc.CardImg(src=source)],
className="sample-img-card",
id={
'type': 'sample-img',
# 'source' : source.split("\\")[-1]
'source': source
}),
color="light",
outline=True,
style={
'margin-top': '10%',
'margin-bottom': '10%'
})
samples_layout = html.Div([
html.Div(html.Div(html.H3('Or select a sample image',
style={
'text-align': 'center',
'margin': '40px 0px'
}),
className='col-md-12 ml-auto mr-auto'),
className='row'),
html.Div(html.Div(
dbc.Row(dbc.Col(
dbc.Row(
[
dbc.Col(getCard(img_source), className="col-md-2")
for img_source in glob.glob(samples_folder[1:] + "/*")
],
style={
'overflowX': 'scroll',
'flex-wrap': 'nowrap',
'align-items': 'center',
'padding': '5px'
}),
className="col-md-10 align-self-center row-eq-height"),
className="justify-content-center"), ),
className='row'),
html.Div(id='sample-image-chosen', style={'display': 'none'})
])
upload_layout = html.Div([
html.Div(html.Div(html.Div(
html.H1('Please Upload Image to Inpaint',
style={
'text-align': 'center',
'margin': '40px 0px'
})),
className='col-md-12 ml-auto mr-auto'),
className='row'),
html.Hr(),
html.Div(
html.Div(
dcc.Upload(
id='upload-image',
children=html.Div([
html.P(
children='Drag and Drop or Click to Select Image',
id='upload-text')
],
className='upload-text-wrapper'),
style={
'height': '200px',
},
style_active={'borderColor': 'blue'},
accept='.png, .jpg, .jpeg',
# don't allow multiple files to be uploaded
multiple=False,
className='upload-section container-fluid'),
className="col-md-8 ml-auto mr-auto",
style={
'display': 'flex',
'justify-content': 'center',
}),
id='upload-section-wrapper',
className="row"),
html.Div(html.Div(html.A('Change Image',
id='change-upload',
style={'display': 'None'}),
className='col-md-8 ml-auto mr-auto'),
className='row'),
html.Div(id='upload-time-div', style={'display': 'none'}),
html.Div(html.Div(html.Div(id='upload-preview',
style={
'width': '100%',
'display': 'flex',
'align-items': 'center',
'justify-content': 'center'
}),
className='col-md-8 ml-auto mr-auto'),
className='row'),
samples_layout,
html.Div(html.Div([
html.Div(id='upload-alert-div', style={'margin-top': '30px'}),
dbc.Button('Inpaint Image',
color='primary',
size='lg',
className='mr-1',
id='inpaint-button',
block=True,
style={
'margin-top': '30px',
'font-weight': 'bold',
'padding': '10px'
})
],
className="col-md-10 ml-auto mr-auto"),
className="row"),
])
return upload_layout
{
'label': 'Coop',
'value': 'COOP'
},
{
'label': 'SingleFamily',
'value': 'SFAM'
},
{
'label': 'MultiFamily',
'value': 'MULTI'
},
],
values=['CONDO', 'COOP'])
]),
html.Hr(style={'opacity': 0}),
html.Hr(style={'opacity': 0}),
html.P('Closing Price'),
dcc.RangeSlider(
id='closingprice-slider',
marks={
i: '{}'.format(intWithCommas(i))
for i in range(0, 10000000, 500000)
},
min=0,
max=10000000,
value=[50000, 10000000],
# step=None,
#style={'width': 100, 'height': 10}
),
html.Hr(style={'opacity': 0}),
def body():
return html.Div(children=[
html.Div(id='left-column', children=[
dcc.Tabs(
id='tabs', value='About this App',
children=[
dcc.Tab(
label='About this App',
value='About this App',
children=html.Div(children=[
html.Br(),
html.H4('What is this app?', style={"text-align":"center"}),
html.P(
"""
This app computes the replication strategy of exchange options (also known as Margrabe options) on a set of given inputs, in the Black-Scholes-Merton (BSM) framework.
"""
),
html.P(
"""
The goal is to showcase that under the BSM model's assumptions (see "Model" tab), the price \(V_0\) given by the BSM formula is "arbitrage-free". Indeed, we show that in this case,
it is possible to build a strategy that
"""
),
html.Ul([html.Li("Can be initiated with \(V_0\) cash at time \(0\)."),
html.Li('Is self-financing (i.e., no need to "feed" the strategy with extra cash later'),
html.Li("Will deliver exactly the payoff of the option at maturity")
]),
html.Hr(),
html.H4("Type of options", style={"text-align":"center"}),
html.P([
"""
The considered options are exchange options, which give at maturity the right to exchange one risky asset for another. The option payoff is given by
$$\psi(T)=max(0,S_1(T)-S_2(T))$$
"""]),
html.Hr(),
html.P(
"""
Read more about options :
https://en.wikipedia.org/wiki/Option_(finance)
"""
),
])
),
dcc.Tab(
label="Model",
value="Model",
children=[html.Div(children=[
html.Br(),
html.H4("Model assumptions", style={"text-align":"center"}),
"The BSM main assumptions are:",
html.Ul([html.Li("It does not consider dividends and transaction costs"),
html.Li("The volatility and risk-free rate are assumed constant"),
html.Li("Fraction of shares can be traded")]),
html.P([
"""Under BSM, the two underlying asset's dynamics are modeled with a geometric Brownian motion:
$$dS_1(t) = \mu_1 S_1(t)dt+\sigma_1 S_1(t)dW_1(t)$$ $$dS_2(t) = \mu_2 S_2(t)dt+\sigma_2 S_2(t)dW_2(t) $$Where \(\mu_i\) is the drift, \(\sigma_i\) the volatility, \(dW_i(t)\) the increment of a Brownian motion and \(dW_1(t)dW_2(t)=\\rho dt\)"""]),
html.Hr(),
html.H4("Option price", style={"text-align":"center"}),
html.P([
"""
The exchange option BSM price was derived by Margrabe in his 1978 paper:
$$V_t = S_1(t)\Phi(d_1)-S_2(t)\Phi(d_2)$$ Where \(\Phi(.)\) is the standard normal cumulative distribution function,
\(d_1\) and \(d_2\) constants $$d_1=\\frac{1}{\hat{\sigma}\sqrt{T-t}}\left[ln(\\frac{S_1(t)}{S_2(t)})+\\frac{\hat{\sigma^2}}{2}(T-t)\\right]$$$$d_2=d_1-\hat{\sigma}\\sqrt{T-t}$$$$\hat{\sigma^2}=\sigma^2_1+\sigma_2^2-2\\rho\sigma_1\sigma_2$$
This pricing formula originate from the BSM partial differential equation, which is valid for any type of European option:
$$\\frac{\partial V_t}{\partial t}+\\frac{\sigma^{2}S^{2}_t}{2}\\frac{\partial^{2}V_t}{\partial S^{2}}+rS_t\\frac{\partial V_t}{\partial S} = rV_t$$
Where \(V_t=f(t,S_t)\) the price of the option at time t. To get the pricing formulas, solve the PDE with terminal condition the payoff \(\psi(X)\) of the desired European-type option.
"""]),
html.Hr(),
html.H4("Academic references", style={"text-align":"center"}),
"The main academic references used were:",
html.Ul([html.Li("Vrins, F. (2017-2018). Course notes for Derivatives Pricing. (Financial Engineering Program, Louvain School of Management, Université catholique de Louvain)"),
html.Li("Margrabe, W. (1978). The Value of an Option to Exchange One Asset for Another. Journal of Finance, 33, 177-186."),]),
])]),
#
dcc.Tab(
label="Appro-ach",
value="Appro-ach",
children=[html.Div(children=[
html.Br(),
html.H4("Methodology followed", style={"text-align":"center"}),
html.P([
"""
To prove that the BSM price is arbitrage-free, let us try to perfectly replicate it with a strategy. If the strategy is successful, then
the BSM price is unique and therefore arbitrage-free.
"""]),
html.Hr(),
html.H4("Stock simulation", style={"text-align":"center"}),
html.P([
"""
We use the analytical solution to the GBM SDE, using Îto: \(S_t=S_0exp((\mu-\\frac{\sigma^2}{2})t+\sigma W_t)\). Then, suppose that the stock price
observations are equally spaced: \(t_i=i\delta, i \in \{1,2,\dots,n\}, n=T/\delta\)\(,\\forall \delta>0\)
This corresponds to $$S_{t+\delta}=S_texp((\mu-\\frac{\sigma^2}{2})\delta+\sigma\sqrt{\delta}Z), Z\sim \mathcal{N}(0,1)$$
"""]),
html.Hr(),
html.H4("Replicating portfolio", style={"text-align":"center"}),
html.Label("Step 1", style={'font-weight': 'bold'}),
html.P([
"""
We infer the dynamics of the option price by applying 2D Ito's lemma to the BSM PDE. We simplify the notation, and complying with Ito \(V_t=f(t,S_1, S_2)\):
$$dV_t=[f_t+\\frac{1}{2}(f_{xx}\sigma_1^2S_1^2+2f_{xy}\sigma_1\sigma_2S_1S_2\\rho$$ $$+f_{yy}\sigma_2^2S_2^2)]dt+f_xdS_1+f_ydS_2$$ Where \(f_i\) are the partial derivatives relative to each stock.
"""]),
html.Label("Step 2", style={'font-weight': 'bold'}),
html.P([
"""
The randomness embedded in the stocks \(S_i(t)\) is taken care of by hedging away \(dS_i(t)\). Let us now
create a portfolio \(\Pi_t\) with starting cash the exchange option price. All the cash goes into the two stocks: at inception, we buy \(\Delta_1(t)\) and \(\Delta_2(t)\) shares at cost
\(\Delta_1(t)S_1(t)+\Delta_2(t)S_2(t)\). There is no cash remaining. If the strategy is financially self-sufficiant, then $$d\Pi_t=\Delta_1(t)dS_1(t)+\Delta_2(t)dS_2(t)$$
This means that the change in portfolio value results only from the gains/losses obtained by holding the stocks. When we rebalance the portfolio, we always sell some of one stock to buy some of the other.
The cash account is always at 0.
"""]),
html.Label("Step 3", style={'font-weight': 'bold'}),
html.P([
"""
Equating \(dV_t=d\Pi_t\), we observe that the portfolio will perfectly replicate the option price if $$\Delta_1(t)=f_x(t,S_1(t),S_2(t))$$ $$\Delta_2(t)=f_y(t,S_1(t),S_2(t))$$
"""]),
html.P([
"""
\(\Delta_i=f_i(t,S_1(t),S_2(t))\) indicates the number of shares to hold at any instant in order to replicate the BSM price.
Deriving the two, they are equal to \(\Delta_1(t) = \Phi(d_1)\) and \(\Delta_2(t)=-\Phi(d_2)\).
"""]),
html.P([
"""
Holding \(\Delta_1(t)\) and \(\Delta_2(t)\) at all times, we have found a strategy that perfectly replicates the BSM price, therefore proving it is the unique
price that prevents arbitrage opportunities.
"""]),
html.P([
"""
Indeed, because it is possible to generate the option’s payoff by being given exactly the cash amount \(V_0\) given by the BSM
formula, the option price must agree with \(V_0\). Otherwise, for \(k>0\), if the price of the option is \(V_0+k\), you can sell the option at \(V_0+k\), launch the strategy (which only requires \(V_0\)), and get a
profit of \(k\) today. At maturity, the strategy will deliver exactly the amount that you have to pay to the option’s buyer. If \(k<0\), do the opposite (buy the option, sell the strategy).
"""]),
])]),
#
#
dcc.Tab(
label='Inputs',
value='Inputs',
children=html.Div(children=[
html.Br(),
#
html.P(
"""
Place your mouse over any input to get its definition.
"""
),
#
html.Div(children=[html.Label('Spot price 1', title=list_input["Spot price"], style={'font-weight': 'bold', "text-align":"left", "width":"25%",'display': 'inline-block'} ),
dcc.Input(id="S1", value=100, debounce=True, type='number', style={"width":"16%", 'display': 'inline-block'}),
html.P("",id="message_S1", style={"font-size":12, "color":"red", "padding":5, 'width': '55%', "text-align":"left", 'display': 'inline-block'})
]
),
html.Div(children=[html.Label("Spot price 2", title=list_input["Spot price"], style={'font-weight': 'bold',"text-align":"left", "width":"25%",'display': 'inline-block'} ),
dcc.Input(id="S2", value=100, debounce=True, type='number', style={"width":"16%", 'display': 'inline-block'}),
html.P("",id="message_S2", style={"font-size":12, "color":"red", "padding":5, 'width': '55%', "text-align":"left", 'display': 'inline-block'})
],
),
#
html.Div([html.Label('Stocks correlation', title=list_input["Correlation"], style={'font-weight': 'bold', "display":"inline-block"}),
html.Label(id="correlation", style={"display":"inline-block"}),]),
#
dcc.Slider(id='corr', min=-1, max=1, step=0.01, value=0.30, marks={-1:"-1", 0:"0", 1:"1"}),
#
html.Div(children=[html.Label("Drift stock 1", title=list_input["Drift"], style={'font-weight': 'bold', 'display': 'inline-block'}),
html.Label(id="drift1", style={'display': 'inline-block'}),
]
),
#
dcc.Slider(id='mu1', min=-0.40, max=0.40, value=0.10, step=0.01, marks={-0.40: '-40%', 0:"0%", 0.40: '40%'}),
#
html.Div([html.Label('Volatility stock 1', title=list_input["Volatility"], style={'font-weight': 'bold', "display":"inline-block"}),
html.Label(id="sigma1", style={"display":"inline-block"}),]),
#
dcc.Slider(id='vol1', min=0, max=1, step=0.01, value=0.25, marks={0:"0%", 0.5:"50%", 1:"100%"}),
#
html.Div(children=[html.Label("Drift stock 2", title=list_input["Drift"], style={'font-weight': 'bold', 'display': 'inline-block'}),
html.Label(id="drift2", style={'display': 'inline-block'}),
]
),
#
dcc.Slider(id='mu2', min=-0.40, max=0.40, value=-0.10, step=0.01, marks={-0.40: '-40%', 0:"0%", 0.40: '40%'}),
#
html.Div([html.Label('Volatility stock 2', title=list_input["Volatility"], style={'font-weight': 'bold', "display":"inline-block"}),
html.Label(id="sigma2", style={"display":"inline-block"}),]),
#
dcc.Slider(id='vol2', min=0, max=1, step=0.01, value=0.10,marks={0:"0%", 0.5:"50%", 1:"100%"}),
#
html.Div([html.Label('Risk-free rate', title=list_input["Risk-free rate"], style={'font-weight': 'bold', "display":"inline-block"}),
html.Label(id="riskfree", style={"display":"inline-block"}),]),
dcc.Slider(id='Rf', min=0, max=0.1, step=0.01, value=0.03, marks={0:"0%", 0.05:"5%", 0.1:"10%"}),
#
html.Div([html.Label('Maturity', title=list_input["Maturity"], style={'font-weight':'bold', "display":"inline-block"}),
html.Label(id="matu", style={"display":"inline-block"}),]),
dcc.Slider(id='T', min=0.25, max=5, # marks={i: '{}'.format(i) for i in range(6)},
marks={0.25:"3 months", 2.5:"2.5 years", 5:"5 years"}, step=0.25, value=3.5),
#
html.Br(),
html.Div([
html.Label('Discretization step (dt)', title=list_input["Discretization step"], style={'font-weight': 'bold', "text-align":"left",'width': '50%', 'display': 'inline-block'}),
dcc.Input(id="dt", value=0.01, debounce=True, type='number', style={"width":"16%", 'display': 'inline-block'}),
html.P("",id="message_dt", style={"font-size":12, "color":"red", 'width': '34%', "text-align":"left", 'display': 'inline-block'})
]),
#
html.Div([
html.Label("Time between two rebalancing (in dt unit)", title=list_input["Rebalancing frequency"], style={'font-weight': 'bold', 'width': '50%', "text-align":"left", 'display': 'inline-block'}),
dcc.Input(id="dt_p", value=1,debounce=True, type='number', style={"width":"16%", 'display': 'inline-block'}),
html.P("",id="message_dt_p", style={"font-size":12, "color":"red", 'width': '34%', "text-align":"left", 'display': 'inline-block'})
]),
#
html.Div([html.Label('Transaction costs', title=list_input["Transaction costs"], style={'font-weight': 'bold', "text-align":"left",'width': '50%', 'display': 'inline-block'}),
dcc.Input(id="TransactionCosts", value=0, debounce=True, type='number', style={"width":"16%", 'display': 'inline-block'}),
html.Label(id="unit_TC", style={"padding":5, "display":"inline-block"})
]),
#
dcc.RadioItems(id="FixedOrPropor",
options=[{'label': 'No TC', 'value': 'NTC'},
{'label': 'Fixed TC', 'value': 'FTC'},
{'label': 'Proportional TC', 'value': 'PTC'}
],
value='NTC',
labelStyle={'padding':5, 'font-weight': 'bold', 'display': 'inline-block'}
),
#
html.Label(children=[dbc.Button("Change stock trajectory", id="ButtonChangeStockTrajectory", color="primary", className="mr-1",)],
title=list_input["Seed"]),
html.Div(children=[html.Label("The current stock trajectory scenario is: ", style={'display': 'inline-block', "padding":5}),
dcc.Input(id='seed', readOnly=False, debounce=True, value='1', min=1,max=500000, type='number', style={"width":"20%", 'display': 'inline-block'})
] #stockScenario
),
# html.Label(children=[dcc.Checklist(id = "seed",
# options=[{'label': 'New Brownian motion', 'value': "seed"}],
# value=[],
# labelStyle={'font-weight': 'bold', "text-align":"left", 'display': 'inline-block'}
# )],
# title=list_input["Seed"]),
#
#
html.Br(),
html.A('Download Data', id='download-link', download="rawdata.csv", href="", target="_blank"),
# html.P("""Note: requires excel decimal separator to be a dot.""", style={"font-size":12}),
])),
],),], style={'float': 'left', 'width': '25%', 'margin':"30px"}),
])
def create_app_ui():
main_layout = html.Div([
html.H1('Terrorism Analysis with Insights',
id='Main_title',
style={
'textAlign': 'center',
'color': 'LightPink',
'background-color': 'Maroon',
'font-family': 'Comic Sans Ms',
'Padding-top': '10px'
}),
dcc.Tabs(id="Tabs",
value="Map",
children=[
dcc.Tab(label="Map tool",
id="Map tool",
value="Map",
children=[
dcc.Tabs(id="subtabs",
value="WorldMap",
children=[
dcc.Tab(label="World Map tool",
id="World",
value="WorldMap"),
dcc.Tab(label="India Map tool",
id="India",
value="IndiaMap"),
],
colors={
"border": "Maroon",
"Primary": "gold",
"background": "Lime"
}),
dcc.Dropdown(id='month',
options=month_list,
placeholder='select month',
style={
'font-family':
('Impact', 'sans-serif'),
'textAlign':
'center',
'Width':
'50px',
'font-size':
'20px',
'letter-spacing':
'2px'
},
multi=True),
dcc.Dropdown(id='date',
placeholder='select date',
style={
'font-family':
('Impact', 'sans-serif'),
'textAlign':
'center',
'Width':
'50px',
'font-size':
'20px',
'letter-spacing':
'2px'
},
multi=True),
dcc.Dropdown(id='region-dropdown',
options=region_list,
placeholder='select region',
style={
'font-family':
('Impact', 'sans-serif'),
'textAlign':
'center',
'Width':
'50px',
'font-size':
'20px',
'letter-spacing':
'2px'
},
multi=True),
dcc.Dropdown(id='country-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='select country',
style={
'font-family':
('Impact', 'sans-serif'),
'textAlign':
'center',
'Width':
'50px',
'font-size':
'20px',
'letter-spacing':
'2px'
},
multi=True),
dcc.Dropdown(id='state-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='select state',
style={
'font-family':
('Impact', 'sans-serif'),
'textAlign':
'center',
'Width':
'50px',
'font-size':
'20px',
'letter-spacing':
'2px'
},
multi=True),
dcc.Dropdown(id='city-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='select city',
style={
'font-family':
('Impact', 'sans-serif'),
'textAlign':
'center',
'Width':
'50px',
'font-size':
'20px',
'letter-spacing':
'2px'
},
multi=True),
dcc.Dropdown(id='attack_type-dropdown',
options=attack_type_list,
placeholder='select attacktype',
style={
'font-family':
('Impact', 'sans-serif'),
'textAlign':
'center',
'Width':
'50px',
'font-size':
'20px',
'letter-spacing':
'2px'
},
multi=True),
html.H5('select the year',
id='year_title',
style={
'font-size': '20px',
'color': 'Maroon'
}),
dcc.RangeSlider(
id='year-Slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br()
]),
dcc.Tab(label="Chart Tool",
id="chart tool",
value="Chart",
children=[
dcc.Tabs(id="subtabs2",
value="WorldChart",
colors={
"border": "Maroon",
"Primary": "gold",
"background": "Lime"
},
children=[
dcc.Tab(label="World Chart tool",
id="WorldC",
value="WorldChart"),
dcc.Tab(label="India Chart tool",
id="IndiaC",
value="IndiaChart")
]),
dcc.Dropdown(id="Chart_Dropdown",
options=chart_dropdown_values,
placeholder="Select option",
value="region_txt"),
html.Br(),
html.Br(),
html.Hr(),
dcc.Input(id="search",
placeholder="Search Filter"),
html.Hr(),
html.Br(),
dcc.RangeSlider(
id='cyear-slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br()
]),
]),
html.Div(id="graph_object",
children="Graph will be shown here",
style={'color': 'Maroon'})
])
return main_layout
),
href="https://plot.ly",
),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(search_bar,
id="navbar-collapse",
navbar=True,
is_open=True),
], ),
dbc.Collapse(
dbc.Jumbotron([
html.H2('Welcome to Rabona Dashboard', className='display-3'),
html.
P('Rabona is a stats visualization tool powered that allows you to see players statistics TOP 5 european football leagues '
),
html.Hr(className='my-2'),
html.
P("Type player's name to see stats vizualization. You can change positional template and filter by league here. "
"You can see more details on a distplot when you click on single bar/attribute"
"Hide this message by clicking button below or just start typing player's name! "
),
dbc.Button("Got it",
id="collapse-button",
className="mb-3",
color="primary",
block=True),
],
id='jumbotron'), #jumbotron
id='collapse',
is_open=True) #collapse
,
def create_app_ui():
main_layout = html.Div(
style={'backgroundColor': colors['background']},
children=[
html.Br(),
html.H1(children="Terrorism Analysis with Insights",
id="Main_title",
style={
'textAlign': 'center',
'color': '#000080'
}),
html.Br(),
dcc.Tabs(
id="Tabs",
value="Map",
children=[
#Layout of your Map Tool
dcc.Tab(label="Map tool",
id="Map tool",
value="Map",
children=[
dcc.Tabs(id="subtab1",
value="WorldMap",
children=[
dcc.Tab(label="World Map tool",
id="World",
value="WorldMap"),
dcc.Tab(label="India Map tool",
id="India",
value="IndiaMap")
]),
html.Div([
dcc.Dropdown(id='month-dropdown',
options=month_list,
placeholder='Select Month',
style={
'textAlign': 'center',
'width': '100%'
},
multi=True),
dcc.Dropdown(id='date-dropdown',
placeholder="Select Date",
style={
'textAlign': 'center',
'width': '100%'
},
multi=True)
],
style=dict(display='flex')),
html.Div([
dcc.Dropdown(id='region-dropdown',
options=region_list,
placeholder="Select Region",
style={
'textAlign': 'center',
'width': '100%'
},
multi=True),
dcc.Dropdown(id="country-dropdown",
options=[{
'label': 'All',
'value': 'All'
}],
placeholder="Select Country",
style={
'textAlign': 'center',
'width': '100%'
},
multi=True)
],
style=dict(display='flex')),
html.Div([
dcc.Dropdown(
id="state-dropdown",
options=[{
'label':
'All',
'value':
'All'
}],
placeholder="Select State / Province",
style={
'textAlign': 'center',
'width': '100%'
},
multi=True),
dcc.Dropdown(id="city-dropdown",
options=[{
'label': 'All',
'value': 'All'
}],
placeholder="Select City",
style={
'textAlign': 'center',
'width': '100%'
},
multi=True)
],
style=dict(display='flex')),
dcc.Dropdown(id="attacktype-dropdown",
options=attack_type_list,
placeholder='Select Attack Type',
style={
'textAlign': 'center',
'width': '100%'
},
multi=True),
html.H4(children='Select the Year',
id='year_title',
style={
'textAlign': 'center',
'color': '#000080'
}),
dcc.RangeSlider(
id='year-slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br()
]),
#Layout of your Chart Tool
dcc.Tab(label="Chart Tool",
id="chart tool",
value="chart",
children=[
dcc.Tabs(id="subtab2",
value="WorldChart",
children=[
dcc.Tab(label="World Chart Tool",
id="WorldC",
value="WorldChart"),
dcc.Tab(label="India Chart Tool",
id="IndiaC",
value="IndiaChart")
]),
html.Br(),
dcc.Dropdown(id="Chart_Dropdown",
options=chart_dropdown_values,
placeholder="Select Option",
style={
'textAlign': 'center',
'width': '99%',
'display': 'inline-block',
'verticalAlign': 'middle',
'horizontalAlign': 'middle'
},
value="region_txt"),
html.Br(),
html.Br(),
html.Hr(),
dcc.Input(id="search",
placeholder="Search Filter",
style={
'textAlign': 'center',
'width': '60%',
'display': 'inline-block',
'verticalAlign': 'middle'
}),
html.Hr(),
html.Br(),
dcc.RangeSlider(
id='chart_year_slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br()
]),
]),
html.Div(id="graph-object",
children=":::::Graph will be shown here:::::",
style={
'textAlign': 'center',
'color': '#000080'
})
])
return main_layout
''',
className='red-links'),
rc.Markdown('''
The source is on GitHub at [plotly/dash-core-components](https://github.com/plotly/dash-core-components).
These docs are using version {}.
'''.format(dcc.__version__)),
rc.Markdown('''
```py
>>> import dash_core_components as dcc
>>> print(dcc.__version__)
{}
```
'''.format(dcc.__version__),
style=styles.code_container),
html.Hr(),
html.H2(
dcc.Link('Dropdown',
href=tools.relpath('/dash-core-components/dropdown'))),
rc.ComponentBlock('''import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)''',
style=styles.code_container),
rc.ComponentBlock('''import dash_core_components as dcc
def serve_layout():
return html.Div([header_pane, html.Hr(), default_plot_grid])
className="ml-2")),
],
align="center",
no_gutters=True,
),
href="https://plot.ly",
)
],
color="dark",
dark=True,
sticky="top",
)
LEFT_COLUMN = dbc.Jumbotron([
html.H4(children="Select bank & dataset size", className="display-5"),
html.Hr(className="my-2"),
html.Label("Select percentage of dataset", className="lead"),
html.P(
"(Lower is faster. Higher is more precise)",
style={
"fontSize": 10,
"font-weight": "lighter"
},
),
dcc.Slider(
id="n-selection-slider",
min=1,
max=100,
step=1,
marks={
0: "0%",
def masterApplication(mainApp):
bpmDict, dateOptions = collectHeartRateInformation()
caloricDict = collectCaloricInformation()
distanceDict = collectDistanceInformation()
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, server=mainApp, routes_pathname_prefix='/fitnessGrapher/', external_stylesheets=external_stylesheets)
colors = {
'background': 'white',
'text': 'red'
}
app.layout = html.Div(
style={'backgroundColor': colors['background']},
children=[
html.H2(
children='Fitness Understanding Tool (V1)',
style={
'text-align': 'center',
'color': colors['text']
}
),
html.Div(children='Please input a valid date:', style={'font-weight': 'bold'}),
dcc.Dropdown(
id='chosenDate',
options=dateOptions,
value='2019-07-11'
),
html.Hr(),
html.Div(id="output-graph"),
html.Div(children='Daily Metrics:', style={'text-align': 'center', 'color': colors['text']}),
html.Div(id='dateOutput', style={'font-weight': 'bold'}),
dash_table.DataTable(
id='table',
columns=[
{"name": 'Max Heart Rate (BPM)', "id": 'col1'},
{"name": 'Cumulative Distance (KM)', "id": 'col2'},
{"name": 'Net Calories Burned', "id": 'col3'}
],
style_cell={'textAlign': 'center'},
data=[{'col1': 0, 'col2': 0, 'col3': 0}]
)
]
)
def log(msg):
mainApp.logger.info(msg)
@app.callback(
Output('dateOutput', 'children'),
[Input('chosenDate', 'value')]
)
def loading_date(value):
return value + ':'
@app.callback(
Output('table', 'data'),
[Input('chosenDate', 'value')]
)
def loading_data(value):
x = max(list(bpmDict[value][1]))
y = distanceDict[value] / 100000
z = caloricDict[value]
return [{'col1': x, 'col2': y, 'col3': z}]
@app.callback(
Output("output-graph", "children"),
[Input('chosenDate', 'value')])
def update_output(chosenDate):
masterData = [{'x': list(bpmDict[chosenDate][0]), 'y': list(bpmDict[chosenDate][1]), 'type': 'line', 'name': 'BPM'}]
if (chosenDate == '2019-07-11'):
masterData.append({'x': ['07/11/19 23:26:22', '07/11/19 23:26:22'], 'y': [50, 170], 'name': 'Begin Workout', 'marker': {'color':'green'}})
masterData.append({'x': ['07/12/19 00:40:36', '07/12/19 00:40:36'], 'y': [50, 170], 'name': 'End Workout', 'marker': {'color':'green'}})
#log(chosenDate)
return dcc.Graph(
id='firstGraph',
figure={
'data': masterData,
'layout': {
'title': 'Heart Rate ~ Beats per minute : ' + chosenDate,
'plot_bgcolor': colors['background'],
'paper_bgcolor': colors['background'],
'xaxis': {
'tickvals': [],
},
'yaxis':{
'title':'BPM'
},
'font': {
'color': colors['text']
}
}
}
)
