className="app-header"),
html.Div([
dcc.Markdown(markdown_text),
html.Label([
"Select types of feeding strategies:",
dcc.Dropdown('my-dropdown',
options=opt_vore,
value=[df_vore[0]],
multi=True)
]),
html.Div(id="data", style={'display': 'none'}),
dcc.RangeSlider(id="range",
min=min_bodywt,
max=max_bodywt,
step=step_bodywt,
marks={
min_bodywt + i * step_bodywt: '{}'.format(
round(min_bodywt + i * step_bodywt, 2))
for i in range(10)
},
value=[min_bodywt, max_bodywt]),
dcc.Tabs(id="tabs",
value='tab-t',
children=[
dcc.Tab(label='Table', value='tab-t'),
dcc.Tab(label='Graph', value='tab-g'),
]),
html.Div(id="tabs-content")
],
className="app-body")
])
id="header",
className="row flex-display",
style={"margin-bottom": "25px"},
),
html.Div(
[
html.Div(
[
html.P(
"Filter by construction date (or select range in histogram):",
className="control_label",
),
dcc.RangeSlider(
id="year_slider",
min=1960,
max=2017,
value=[1990, 2010],
className="dcc_control",
),
html.P("Filter by well status:",
className="control_label"),
dcc.RadioItems(
id="well_status_selector",
options=[
{
"label": "All ",
"value": "all"
},
{
"label": "Active only ",
"value": "active"
html.Div([
#--scatterplot
#visibility: visible; left: 0%; width: 100%
html.Div([
dcc.Graph(id = 'scatter_plot'),
], style = {'display': 'inline-block', 'width': '65%'}),
#--horizontal dynamic barplot
html.Div([
dcc.Graph(id = 'bar_plot')
], style = {'display': 'inline-block', 'width': '35%'}),
]),
html.Div([
dcc.RangeSlider(
id='year-slider',
min=data.year_edited.min(),
max=data.year_edited.max(),
value = [data.year_edited.min(), data.year_edited.max()],
marks={str(year): str(year) for year in range(data.year_edited.min(), data.year_edited.max(), 5)}
)
], style = {'background-color': 'rgb(204, 230, 244)', 'font-weight': 'bold', 'visibility': 'visible', 'left': '0%', 'width': '49%', 'padding': '0px 20px 20px 20px'}),
#-- Footer section
html.Div([
#--footer section
html.Div([
html.Div([
html.H2(id = 'topic')], style = {'color':' rgb(35, 87, 137)'}),
html.Div([
html.Label(id = 'date')], style = {'color':' black', 'font-weight': 'bold', 'display': 'inline-block'}),
html.Div([
html.Label(id = 'author')], style = {'color':' black', 'font-weight': 'bold', 'display': 'inline-block', 'padding': '0px 0px 10px 35px'}),
html.Div([
),
], style={'marginBottom': 50, 'marginTop':0}),
# ********** ROW DEL SLIDER DE HORA *********
html.Div([
html.Header(className="section-header", children=[
html.H3('Move bar to filter the hour of the day between 5:00 to 22:00'),
]),
]),
dbc.Row([
# *********** SLIDER DE HORA **********
dbc.Col(
html.Div(
dcc.RangeSlider(
id="hour-slider",
marks=range_slider_marks,
min=min_hour_index,
max=max_hour_index,
value=[min_hour_index, max_hour_index]
), style={'marginBottom': 25, 'marginTop': 25})
)
]),
# ************ ROW DE LOS PLOT Y EL mapa2 **********
dbc.Row([
# COLUMNA DEL mapa2 (IZQUIERDA)
dbc.Col(
html.Div(
dcc.Graph(className="icon-box wow fadeInUp",id="mapa2", figure=bogota_map(mapa2, lat, lon, mapbox_token), style={"height": "100%"}), style={"height": "100%", "border":"2px #6c757d solid", "border-radius": "4px"}
)
),
# COLUMNA DE LOS PLOTS (DERECHA)
dbc.Col([
yaxis={'title': 'Stock price [$]'},
yaxis2={'title': 'Score [0-1]', 'overlaying': 'y', 'side': 'right', 'range': [0, 1]},
title={'text': 'Selection pending'},
)
}
)], style={'width': '100%',
'fontSize': '500%',
'paddingTop': '0%',
'paddingBottom':'0%',
'paddingLeft': '3%',
'display': 'inline-block'}
),
html.Div([
dcc.RangeSlider(id='range_slider',
marks={i: '{}'.format(i) for i in range(s['time_range'][0][0], s['time_range'][1][0]+1)},
min=s['time_range'][0][0],
max=s['time_range'][1][0],
value=[s['time_range'][0][0], s['time_range'][1][0]]
)], style={'width': '90%', 'padding-left': '5%', 'padding-right': '5%', 'fontSize': '100%'}
),
dcc.Markdown('''
### Visualization mode
Select the view of the database you would like to have.
**Company view** needs a ticker while **Portfolio view** displays the best portfolio found in the database over the time range calculated.
'''),
dcc.RadioItems(id='view_mode',
options=[
{'label': 'Company View', 'value': 'company_view'},
{'label': 'Portfolio View', 'value': 'pf_view'}
def make_global_design_geometry_form():
return html.Div(
children=[
html.Div(children=[
html.Label('Tail x',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='tail_x_input',
allowCross=False,
min=-1.0e4,
step=1.0,
max=1.0e4,
marks={
-10000: "-10 km",
10000: "10 km"
},
value=[-1.0e4, 1.0e4]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Tail y',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='tail_y_input',
allowCross=False,
min=-1.0e2,
step=1.0,
max=1.0e2,
marks={
-100: "-100 m",
100: "100 m"
},
value=[-1.0e2, 1.0e2]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Head x',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='head_x_input',
allowCross=False,
min=-1.0e4,
step=1.0,
max=1.0e4,
marks={
-10000: "-10 km",
10000: "10 km"
},
value=[-1.0e4, 1.0e4]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Head y',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='head_y_input',
allowCross=False,
min=-1.0e2,
step=1.0,
max=1.0e2,
marks={
-100: "-100 m",
100: "100 m"
},
value=[-100.0, -100.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(className='four rows')
],
className='four columns',
style={
'height': '400px',
# 'background-color':'#020202',
'color': '#fff'
})
def make_global_design_systems_form():
return html.Div(
children=[
html.Div(children=[
html.Label('Drive power (1)',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='drive_power_1_input',
allowCross=False,
min=0.0,
step=1.0,
max=1000.0,
marks={
0: "0",
1000: "1000 kW"
},
value=[0.0, 1000.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Drive power (2)',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='drive_power_2_input',
allowCross=False,
min=0.0,
step=1.0,
max=1000.0,
marks={
0: "0",
1000: "1000 kW"
},
value=[0.0, 1000.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Wrap angle (1)',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(
id='drive_wrap_angle_1_input',
allowCross=False,
min=0.0,
step=1.0,
max=360.0,
marks={
0: "0",
360: "360 °"
},
value=[0.0, 360.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Wrap angle (2)',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(
id='drive_wrap_angle_2_input',
allowCross=False,
min=0.0,
step=1.0,
max=360.0,
marks={
0: "0",
360: "360 °"
},
value=[0.0, 360.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Engine efficiency',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(
id='drive_engine_efficiency_input',
allowCross=False,
min=0.0,
step=5,
max=100.0,
marks={
0: "0",
100: "100 %"
},
value=[0.0, 100.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Takeup tension',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='takeup_tension_input',
allowCross=False,
min=0.0,
step=100.0,
max=1.0e6,
marks={
0: "0",
1000000: "1000 kN"
},
value=[0.0, 1.0e6]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(className='six rows', style={'display': 'hidden'})
],
className='four columns',
style={
'height': '400px',
# 'background-color':'#020202',
'color': '#fff'
})
]))
],
width=12)
]),
html.Br(),
dbc.Row([
dbc.Col([
dbc.Card(
dbc.CardBody([
html.P([
html.Div(
dcc.RangeSlider(
id='range-slider',
min=min(date_list),
max=max(date_list),
step=10,
value=[min(date_list),
max(date_list)],
marks=dic_date,
included=False)),
# html.Div(id='text-space')
])
]))
])
]),
html.H3('Age Related Factors'),
dbc.Row([
dbc.Col([
dbc.Card(
dbc.CardBody([
html.P([
style={
'borderBottom': 'thin lightgrey solid',
'backgroundColor': 'rgb(250, 250, 250)',
'padding': '1% 1%'
}),
# Plot
dcc.Graph(id='output-graph', figure=fig),
# Range slider
html.P(
[
html.Label("Time Period"),
dcc.RangeSlider(id='slider',
marks=date_mark,
min=0,
max=N + step,
value=[1, N + step])
],
style={
'width': '90%',
'fontSize': '100%',
'paddingLeft': '10%',
'display': 'inline-block',
})
])
@app.callback(Output('opt_ticker', 'options'), [Input('opt_sector', 'value')])
def update_ticker_options(selected_sector):
opts_ticker = get_stock(tbl_name, selected_sector)
),
dcc.Tab(
label='Find Movies...',
children=[
html.Div(
[
html.Div(
[
html.P(
'Filter by release year',
className='control_label',
),
dcc.RangeSlider(
id='year_slider',
min=1921,
max=2017,
value=[1921, 2017],
className='dcc_control',
),
html.P(
'Filter by ratings',
className='control_label',
),
dcc.RangeSlider(
id='rating_slider',
min=0,
max=295,
value=[5, 50],
className='dcc_control'),
html.P('Filter by genre',
className='control_label'),
html.Label('Moment Selection'),
html.Div(),
dcc.Dropdown(id='moment-drop',
options=[{
'label': y['play'],
'value': y['id']
} for _, y in base.iterrows()],
value="03acc4a7-9301-46a2-8fb9-75affab7ee59"),
html.Label('Lowest Ask w/ Lowest Serial'),
html.Div(id='lowest ask'),
html.Label('Serial Range'),
dcc.RangeSlider(
id='serial-slider',
min=0,
max=15000,
step=50,
marks={x: str(x)
for x in range(1000, 15000, 1000)},
value=[0, 15000],
),
html.Div(id='serial-output'),
html.Label('Price Range'),
dcc.RangeSlider(
id='price-slider',
min=0,
max=250000,
step=50,
marks={x: str(x)
for x in range(0, 250000, 10000)},
value=[0, 10000],
),
def contributions_layout(explainer, n_features=15, round=2, **kwargs):
"""returns layout for individual contributions tabs
:param explainer: ExplainerBunch to build layout for
:type explainer: ExplainerBunch
:type title: str
:param standalone: when standalone layout, include a a label_store, defaults to False
:type standalone: bool
:param hide_selector: if model is a classifier, optionally hide the positive label selector, defaults to False
:type hide_selector: bool
:param n_features: Default number of features to display in contributions graph, defaults to 15
:type n_features: int, optional
:param round: Precision of floats to display, defaults to 2
:type round: int, optional
:rtype: [dbc.Container
"""
if explainer.is_classifier:
index_choice_form = dbc.Form([
dbc.FormGroup([
html.Div([
dbc.Label(
'Range to select from (prediction probability or prediction percentile):',
html_for='prediction-range-slider'),
dcc.RangeSlider(id='prediction-range-slider',
min=0.0,
max=1.0,
step=0.01,
value=[0.5, 1.0],
allowCross=False,
marks={
0.0: '0.0',
0.1: '0.1',
0.2: '0.2',
0.3: '0.3',
0.4: '0.4',
0.5: '0.5',
0.6: '0.6',
0.7: '0.7',
0.8: '0.8',
0.9: '0.9',
1.0: '1.0'
},
tooltip={'always_visible': False})
],
style={'margin-bottom': 25})
]),
dbc.FormGroup([
dbc.RadioItems(id='include-labels',
options=[
{
'label': explainer.pos_label_str,
'value': 'pos'
},
{
'label':
'Not ' + explainer.pos_label_str,
'value': 'neg'
},
{
'label': 'Both/either',
'value': 'any'
},
],
value='any',
inline=True),
dbc.RadioItems(id='preds-or-ranks',
options=[
{
'label': 'Use predictions',
'value': 'preds'
},
{
'label': 'Use percentiles',
'value': 'ranks'
},
],
value='preds',
inline=True)
])
])
else:
index_choice_form = dbc.Form([
dbc.FormGroup([
html.Div([
html.Div([
dbc.Label(
'Range of predicted outcomes to select from:',
html_for='prediction-range-slider'),
dcc.RangeSlider(
id='prediction-range-slider',
min=min(explainer.preds),
max=max(explainer.preds),
step=np.float_power(10, -round),
value=[min(explainer.preds),
max(explainer.preds)],
marks={
min(explainer.preds):
str(np.round(min(explainer.preds), round)),
max(explainer.preds):
str(np.round(max(explainer.preds), round))
},
allowCross=False,
tooltip={'always_visible': False})
],
style={'margin-bottom': 25})
]),
],
style={'margin-bottom': 25}),
])
return dbc.Container([
dbc.Row([
dbc.Col([
html.H2('Display prediction for:'),
dbc.Input(id='input-index',
placeholder="Fill in index here...",
debounce=True),
index_choice_form,
dbc.Button("Random Index", color="primary", id='index-button'),
dcc.Store(id='index-store'),
], md=6),
dbc.Col([
dcc.Loading(id="loading-model-prediction",
children=[dcc.Markdown(id='model-prediction')]),
], md=6),
], align="start", justify="between"),
dbc.Row([
dbc.Col([
html.H3('Contributions to prediction'),
dbc.Label('Number of features to display:', html_for='contributions-size'),
html.Div([
dcc.Slider(id='contributions-size',
min = 1, max = len(explainer.columns),
marks = {int(i) : str(int(i))
for i in np.linspace(
1, len(explainer.columns_cats), 6)},
step = 1, value=min(n_features, len(explainer.columns_cats)),
tooltip = {'always_visible' : False}
),
], style={'margin-bottom':25}),
dbc.Label('(click on a bar to display pdp graph)'),
dcc.Loading(id="loading-contributions-graph",
children=[dcc.Graph(id='contributions-graph')]),
html.Div(id='contributions-size-display', style={'margin-top': 20}),
html.Div(id='contributions-clickdata'),
], md=6),
dbc.Col([
html.H3('Partial Dependence Plot'),
dbc.Label("Plot partial dependence plot (\'what if?\') for column:", html_for='pdp-col'),
dcc.Dropdown(id='pdp-col',
options=[{'label': col, 'value':col}
for col in explainer.mean_abs_shap_df(cats=True)\
.Feature.tolist()],
value=explainer.mean_abs_shap_df(cats=True).Feature[0]),
dcc.Loading(id="loading-pdp-graph",
children=[dcc.Graph(id='pdp-graph')]),
], md=6)
]),
dbc.Row([
dbc.Col([
html.H3('Contributions to prediction'),
dash_table.DataTable(
id='contributions_table',
style_cell={'fontSize':20, 'font-family':'sans-serif'},
columns=[{'id': c, 'name': c}
for c in ['Reason', 'Effect']],
),
], md=6),
]),
], fluid=True)
def rgslider(ide, var, n_marks):
limits = (var.min(), var.max())
return dcc.RangeSlider(id = ide, min=limits[0], max=limits[1],
step=(limits[1]-limits[0])/100, value = limits,
marks = {i:'{:.1f}'.format(i) for i in linspace(limits[0], limits[1], n_marks)})
[
dbc.Container([
dcc.Markdown(
d("""
**Recombination points:**
Slide to see graph for only part of the sequence.
""")),
]),
dbc.Container(
[
dcc.RangeSlider(
id='seq-slider',
min=0,
max=1000,
value=[0, 1000],
# step=None,
marks={
0: '0',
1000: '1'
},
pushable=30,
)
],
style={'padding-bottom': 20}),
],
className='pretty_container',
),
],
style={
'padding': 20,
'padding-left': 0,
'padding-top': 0
def render_page_content(pathname):
if pathname == "/":
return html.Div([
html.H1("Instruction"),
html.P(["Welcome to this Dash app"]),
html.P(["Here you will find two panels: one for the diabetes dataset and the second one regarding NBA dataset."]),
html.P(["In the NBA panel, you will have the opportunity to explore the different players and their charateristics. Firstly, you will be able to filter for Player Position and team, and you will visualize the data in a table. Also, you have the opportunity to choose to look at a plot, of this datapoints in two axes: MP and PTS. In this plot, you have the option to filter for a specific interval of points per match (in average). Please note that the plot is interactive, so you can see the information of every point when moving the pointer. You can also select with lasso as many points as you want and take a closer look at their information in a table on the bottom part of the page"]),
html.P(["Then, you have the panel for the diabetes dataset. First you can see a table with the information of each datapoint, where you can filter to see the people that has diabetes and the people that does not have diabetes ("0" for those who don´t have diabetes and "1" for those who do have it). You also have the chance to check at a plot of Blood Preassure against Glucose, and again you can choose between the people who has and does not have diabetes. Please note that, again, this plot is also interactive, so you can see the information of each datapoint when going through it with your mousse."]),
html.P(["This is the glosary for the NBA dataset abreviattions: The significance of the abrevations are: C--Center F--Foward G--Guard Rk -- Rank Pos -- Position Age -- Player's age on February 1 of the season Tm -- Team G -- Games GS -- Games Started MP -- Minutes Played Per Game FG -- Field Goals Per Game FGA -- Field Goal Attempts Per Game FG% -- Field Goal Percentage 3P -- 3-Point Field Goals Per Game 3PA -- 3-Point Field Goal Attempts Per Game 3P% -- 3-Point Field Goal Percentage 2P -- 2-Point Field Goals Per Game 2PA -- 2-Point Field Goal Attempts Per Game 2P% -- 2-Point Field Goal Percentage eFG% -- Effective Field Goal Percentage This statistic adjusts for the fact that a 3-point field goal is worth one more point than a 2-point field goal. FT -- Free Throws Per Game FTA -- Free Throw Attempts Per Game FT% -- Free Throw Percentage ORB -- Offensive Rebounds Per Game DRB -- Defensive Rebounds Per Game TRB -- Total Rebounds Per Game AST -- Assists Per Game STL -- Steals Per Game BLK -- Blocks Per Game TOV -- Turnovers Per Game PF -- Personal Fouls Per Game PTS -- Points Per Game"]),
])
elif pathname == "/page-1":
return [
dcc.Tabs([
dcc.Tab(label='Table', children=[
html.H1("NBA dataset"),
html.Label(["Select Position of the player",
dcc.Dropdown(
'mydropdown', options=opt_Pos, value=opt_Pos[0]['value'])
]),
html.Label(["Select Team of the player",
dcc.Dropdown('mydropdown2', options=opt_Tm,
value=opt_Tm[0]['value'], multi=True)
]),
dash_table.DataTable(
id='my-table',
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict("records")
)
]
),
dcc.Tab(label='Plot', children=[
html.Label(["Range of values for point per match (average):",
dcc.RangeSlider(id="rangeSlider",
max=40,
min=0,
step=1,
marks={m: m for m in [
x for x in range(41) if x % 5 == 0]},
value=[0, 40]
)
]),
dcc.Graph(id="graph"),
html.Div(id='selected_data_table')
])
])
]
elif pathname == "/page-2":
return [
html.Label(["Select diabetes or not:",
dcc.Dropdown('my-dropdown3', options=opt_Outcome,
value=[opt_Outcome[0]['value']])
]),
html.H1('Diabetes'),
dcc.Tabs(id="tabs", value='tab-t', children=[
dcc.Tab(label='Table', value='tab-t'),
dcc.Tab(label='Graph', value='tab-g'),
]),
html.Div(id='tabs-content')
]
# If the user tries to reach a different page, return a 404 message
return dbc.Jumbotron(
[
html.H1("404: Not found", className="text-danger"),
html.Hr(),
html.P(f"The pathname {pathname} was not recognised...")
]
)
checklist = dbc.Checklist(
id="continents",
options=[{
"label": i,
"value": i
} for i in df.continent.unique()],
value=df.continent.unique()[1:],
inline=True,
)
years = df.year.unique()
range_slider = dcc.RangeSlider(
id="slider_years",
min=years[0],
max=years[-1],
step=5,
marks={int(i): str(i)
for i in years},
value=[1982, years[-1]],
)
# These buttons are included to display the Bootstrap theme colors only
buttons = html.Div([
dbc.Button("Primary", color="primary", className="mr-1"),
dbc.Button("Secondary", color="secondary", className="mr-1"),
dbc.Button("Success", color="success", className="mr-1"),
dbc.Button("Warning", color="warning", className="mr-1"),
dbc.Button("Danger", color="danger", className="mr-1"),
dbc.Button("Info", color="info", className="mr-1"),
dbc.Button("Light", color="light", className="mr-1"),
dbc.Button("Dark", color="dark", className="mr-1"),
className="four columns",
style={"text-align": "center"}),
],
style={
'font-family': 'verdana',
'font-size': '125%',
"marginBottom": "50px",
"marginTop": "50px",
},
),
html.Div(
[
html.Label('Time Frame'),
dcc.RangeSlider(id='graphslider',
count=2,
min=uniquetime[0],
max=uniquetime[-1],
step=1,
value=[uniquetime[0], uniquetime[-1]]),
],
className="row",
style={
'font-family': 'verdana',
'font-size': '125%',
"marginBottom": "50px",
"marginTop": "50px",
"marginRight": "35%"
}),
html.Div(
className='row',
children=[
html.Div(
),
html.Label('Indicator'),
dcc.Dropdown(
id='mli-indicators',
options=[{'label': y, 'value': x} for x, y in indicator_codes_names],
value=['DT.NFL.BLAT.CD', 'DT.NFL.MLAT.CD', 'DT.NFL.MOTH.CD'],
multi=True
),
html.Label('Time window'),
dcc.RangeSlider(
id='mli-time-window-slider',
min=1970,
max=2018,
marks={i: 'Label {}'.format(i) if i == 1 else str(i)
for i in range(1970, 2018, 10)},
step=1,
value=[2008, 2018]
),
html.Div(id='mli-Range', children=[
html.Label('2000 - 2000'),
]),
indicator_line_chart,
])
@app.callback(Output('mli-world-map', 'figure'), [Input('mli-countries', 'value')])
def make_global_design_components_form():
return html.Div(
children=[
html.Div(children=[
html.Label('Belt speed',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='belt_speed_input',
allowCross=False,
min=0.0,
step=0.1,
max=10.0,
marks={
0: "0",
10: "10 m/s"
},
value=[0.0, 10.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Belt width',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='belt_width_input',
allowCross=False,
min=0.0,
step=0.1,
max=10.0,
marks={
0: "0",
10: "10 m"
},
value=[0.0, 10.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Belt strength',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='belt_strength_input',
allowCross=False,
min=0.0,
step=100.0,
max=5.0e3,
marks={
0: "0",
5000: "5000 N/mm"
},
value=[0.0, 5000.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Splice strength',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(
id='splice_strength_ratio_input',
allowCross=False,
min=0.0,
step=0.1,
max=100.0,
marks={
0: "0",
100: "100 %"
},
value=[0.0, 100.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Pulley radius (A)',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(
id='pulley_a_external_radius_input',
allowCross=False,
min=0.0,
step=0.1,
max=3.0,
marks={
0: "0",
3: "3 m"
},
value=[0.0, 3.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Pulley radius (B)',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(
id='pulley_b_external_radius_input',
allowCross=False,
min=0.0,
step=0.1,
max=3.0,
marks={
0: "0",
3: "3 m"
},
value=[0.0, 3.0]),
className='six columns')
],
className='two rows',
style={'background-color': '#191A1A'}),
html.Div(children=[
html.Label('Pulley radius (C)',
className='five columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(
id='pulley_c_external_radius_input',
allowCross=False,
min=0.0,
step=0.1,
max=3.0,
marks={
0: "0",
3: "3 m"
},
value=[0.0, 3.0]),
className='six columns')
],
className='two rows',
style={
'background-color': '#191A1A',
'display': 'hidden'
}),
html.Div(className='five rows', style={'display': 'hidden'})
],
className='four columns',
style={
'height': '400px',
# 'background-color':'#020202',
'color': '#fff'
})
def map_plot_selectors(self):
return (html.Div(
style={"marginRight": "10px"},
children=[
html.Div(
style={"width": "50%"},
children=[
html.Label(
style={"font-weight": "bold"},
children="Ensemble in map plot",
),
dcc.Dropdown(
id=self.uuid("map_ensemble"),
options=[{
"label": ens,
"value": ens
} for ens in list(
self.ertdatadf["ENSEMBLE"].unique())],
value=list(self.ertdatadf["ENSEMBLE"].unique())[0],
clearable=False,
persistence=True,
persistence_type="session",
),
],
),
wcc.FlexBox(children=[
html.Div(
style={"flex": 1},
children=[
html.Label(
style={"font-weight": "bold"},
children="Size by",
),
dcc.Dropdown(
id=self.uuid("map_size"),
options=[
{
"label": "Standard Deviation",
"value": "STDDEV",
},
{
"label": "Misfit",
"value": "ABSDIFF",
},
],
value="ABSDIFF",
clearable=False,
persistence=True,
persistence_type="session",
),
],
),
html.Div(
style={"flex": 1},
children=[
html.Label(
style={"font-weight": "bold"},
children="Color by",
),
dcc.Dropdown(
id=self.uuid("map_color"),
options=[
{
"label": "Misfit",
"value": "ABSDIFF",
},
{
"label": "Standard Deviation",
"value": "STDDEV",
},
{
"label": "Year",
"value": "YEAR",
},
],
value="STDDEV",
clearable=False,
persistence=True,
persistence_type="session",
),
],
),
]),
html.Label(
style={"font-weight": "bold"},
children="Date range",
),
html.Div(
style={
"width": "100%",
"height": "70px"
},
children=[
dcc.RangeSlider(
id=self.uuid("map_date"),
min=self.ertdatadf["DATE_IDX"].min(),
max=self.ertdatadf["DATE_IDX"].max(),
value=[
self.ertdatadf["DATE_IDX"].min(),
self.ertdatadf["DATE_IDX"].max(),
],
marks=self.date_marks(),
persistence=True,
persistence_type="session",
)
],
),
],
), )
def _local_design_support_form():
return html.Div(children=[
html.Div(children=[
html.Label('Support step',
className='four columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='support-step-input',
allowCross=False,
min=0.0,
step=1.0e-1,
max=1.0e1,
marks={
0: "0 m",
10: '10 m'
},
value=[1.0, 3.0]),
className='eight columns')
],
className='row'),
html.Div(children=[
html.Label('Support sector length',
className='four columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='support-sector-length-input',
allowCross=False,
min=0.1,
step=1.0e-2,
max=1.0,
marks={
0.1: '0.1 m',
1: '1 m'
},
value=[0.38, 0.38]),
className='eight columns')
],
className='row'),
html.Div(children=[
html.Label('Support sector width',
className='four columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(id='support-sector-width-input',
allowCross=False,
min=0.02,
step=1.0e-2,
max=1.0,
marks={
0.02: '0.02 m',
1: '1 m'
},
value=[0.1, 0.1]),
className='eight columns')
],
className='row'),
html.Div(children=[
html.Label('Support troughing angle',
className='four columns',
style={
'text-align': 'right',
'padding': '10px'
}),
html.Div(children=dcc.RangeSlider(
id='support-troughing-angle-input',
allowCross=False,
min=0.0,
step=5.0,
max=90.0,
marks={
0: '0°',
90: '90°'
},
value=[10.0, 45.0]),
className='eight columns')
],
className='row')
],
className='four columns')
"Male",
], # REQUIRED to show the plot on the first page load
options=[
{"label": "Female", "value": "Female"},
{"label": "Male", "value": "Male"},
],
multi=True,
placeholder="Select gender",
),
html.Br(),
dcc.Markdown("""_Age_"""),
dcc.RangeSlider(
id="age_slider",
min=df["Age"].min(),
max=df["Age"].max(),
value=[18, 60],
step=1,
marks={30: "30", 40: "40", 50: "50"},
tooltip={"always_visible": False, "placement": "bottom"},
),
],
style=SIDEBAR_STYLE,
width="auto"),
dbc.Col(
[
html.Iframe(
id="scatter",
style={
"border-width": "0",
"width": "200%",
# =============================================================================
html.Div([
html.Div([
# Filter Year
html.Span("Year", className="control_label"),
html.Span(id='output_year', className="filter-label"),
dcc.RangeSlider(
id='year_slider',
min=1979,
max=2017,
value=[1979, 2017],
marks={
1980: {'label': '1980'},
1985: {'label': '1985'},
1990: {'label': '1990'},
1995: {'label': '1995'},
2000: {'label': '2000'},
2005: {'label': '2005'},
2010: {'label': '2010'},
2015: {'label': '2015'}
},
included=True
),
# Filter Year
html.Span("Month", className="control_label"),
html.Span(id='output_month', className="filter-label"),
dcc.RangeSlider(
id='month_slider',
min=1,
'value': 'health_industry_usd'
}],
value='health_exp_perc'),
],
style={
'width': '25%',
'display': 'inline-block'
}),
html.Div([
dcc.RangeSlider(
id='perc_slider',
pushable=True,
updatemode='mouseup',
marks={k: {
'label': str(k) + '%'
}
for k in range(1, 19)},
min=1,
max=18,
step=1,
dots=True,
value=[12, 18]),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
],
style={
'width': '70%',
'float': 'right',
'display': 'inline-block',
def filter_layout(self) -> Optional[list]:
"""Makes dropdowns for each dataframe column used for filtering."""
if not self.use_filter:
return None
df = self.data
dropdowns = [html.H4("Set filters")]
for col in self.filter_cols:
if df[col].dtype == np.float64 or df[col].dtype == np.int64:
min_val = df[col].min()
max_val = df[col].max()
mean_val = df[col].mean()
dropdowns.append(
html.Div(
children=[
html.Details(
open=True,
children=[
html.Summary(col.lower().capitalize()),
dcc.RangeSlider(
id=self.uuid(f"filter-{col}"),
min=min_val,
max=max_val,
step=(max_val - min_val) / 10,
marks={
min_val: f"{min_val:.2f}",
mean_val: f"{mean_val:.2f}",
max_val: f"{max_val:.2f}",
},
value=[min_val, max_val],
),
],
)
]
)
)
else:
elements = list(self.data[col].unique())
dropdowns.append(
html.Div(
children=[
html.Details(
open=True,
children=[
html.Summary(col.lower().capitalize()),
wcc.Select(
id=self.uuid(f"filter-{col}"),
options=[
{"label": i, "value": i} for i in elements
],
value=elements
if self.filter_defaults is None
else [
element
for element in self.filter_defaults.get(
col, elements
)
if element in elements
],
size=min(15, len(elements)),
),
],
)
]
)
)
return dropdowns
total_journey_time_DD = dcc.RadioItems(options=time_measure(),
value='days',
id='total_journey_time_DD')
stages_date_picker = dcc.DatePickerRange(
min_date_allowed=dt(1995, 8, 5),
#max_date_allowed=dt(2017, 9, 19),
#initial_visible_month=dt(2017, 8, 5),
end_date=dt.now(),
start_date='2019-01-01',
id='stages_date_picker')
stages_slider = dcc.RangeSlider(
marks={i: '{}'.format(i)
for i in range(1, 31)},
min=1,
max=30,
value=[1, 30],
id='stages_slider')
journey_duration_min = dbc.Input(id="journey_duration_min",
placeholder="Journey Duration Min...",
type="number")
journey_duration_max = dbc.Input(id="journey_duration_max",
placeholder="Journey Duration Max...",
type="number")
list_filters = [
dbc.Alert("Service Type (Customer Table)",
color="secondary",
style={'padding': '5px 5px 5px 5px'}),
TIME_WINDOW_SELECTION = dbc.Card([
dbc.CardHeader("Wahl des Zeitfensters"),
dbc.CardBody([
html.P(
"Stelle das gewünschte Zeitfenster ein. Die Auswahl wirkt sich auf die unten angezeigten Kennzahlen und Graphen aus.",
className="card-text",
),
html.Hr(),
dcc.RangeSlider(
id='date-range-slider',
min=df['date'].min().value,
max=df['date'].max().value,
step=DAY_IN_NS,
value=[yyyymmdd2ns('20200601'), df['date'].max().value],
allowCross=False,
updatemode='drag',
marks={
df.date.min().value: df.date.min().strftime('%d.%m.%Y'),
yyyymmdd2ns('20200601'): '1. Juni',
df.date.max().value: df.date.max().strftime('%d.%m.%Y')
},
#persistence=True
),
html.Hr(),
dcc.Graph(
id="new_conf",
figure=fig_new_conf,
config={
'displayModeBar': False,
#'staticPlot': True
})
className='padding-bottom',
children=[
dcc.RangeSlider(
id="range-slider",
min=find_single_index_by_index(
make_combined_df('GOOGL'), 'Index', -1),
max=find_single_index_by_index(
make_combined_df('GOOGL'), 'Index', 0),
value=[
find_single_index_by_index(
make_combined_df('GOOGL'), 'Index', -1),
find_single_index_by_index(
make_combined_df('GOOGL'), 'Index', 0)
],
marks={
str(index):
{
'label': year_period,
'style': {
'fontSize':
9,
'writing-mode': 'vertical-lr',
'text-orientation': 'sideways'
}
}
for index, year_period in zip(
make_combined_df('GOOGL')['Index'],
make_combined_df('GOOGL')['Year_Peoriode'])
},
step=None)
]),
# Charts Div
def build_upper_left_panel():
return html.Div(
id="upper-left",
className="six columns",
children=[
html.Div(
id="grade-select-outer",
className="control-row-2",
children=[
html.Label("Select grade range"),
html.Div(id="grade-select-rangeslider",
children=[
dcc.RangeSlider(id="grade-select",
min=-1,
max=14,
step=1,
marks=grade_dict,
value=[1, 3]),
]),
],
),
html.Div(
id="region-select-outer",
className="control-row-2",
children=[
html.Label("Select areas"),
html.Div(id="region-select-dropdown-outer",
children=[
dcc.Dropdown(id="region-select",
options=[{
"label": i,
"value": i
} for i in locations],
multi=True,
searchable=True,
value=['California']),
]),
],
),
html.Div(
id="desc-container",
className="control-row-2",
children=[
html.Label(
"Enter a climb description or simply space-separated keywords"
),
html.Div(
id="desc-input",
children=[
dcc.Input(
id='desc-text',
type='text',
debounce=True,
value=
'example: classic highball with mantle finish')
],
),
],
),
html.Div(
id="order-container",
className="control-row-2",
children=[
html.Label("Order by:"),
html.Div(
id="order-input",
children=[
dcc.RadioItems(id='order-items',
options=[{
'label': i,
'value': i
} for i in [
'Closest Match', 'Most Popular',
'Highest Rated'
]],
value='Closest Match',
labelStyle={
'display': 'inline-block',
'margin': '10px'
})
],
),
],
),
],
)
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',
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 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.H4('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")]),
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")
])
return main_layout
