diff --git a/dashboard3/main.py b/dashboard3/main.py index 93797b4..a674867 100644 --- a/dashboard3/main.py +++ b/dashboard3/main.py @@ -7,6 +7,13 @@ import dash_bootstrap_components as dbc # new: plotly template="plotly_white", https://plotly.com/python/templates/ + +# Things done in here: +# 1: Copied first tab content into second +# 2: Changed IDs of everthing +# 3: changed plottypes for tab 2 +# 4: Added the 3rd tab + app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) df = pd.DataFrame( @@ -41,7 +48,7 @@ app.layout = html.Div( "blue", ], value="red", - id="color", + id="color_1", multi=False, ) ], @@ -56,7 +63,7 @@ app.layout = html.Div( max=math.ceil( df["y"].max() ), - id="min_value", + id="min_value_1", ) ], width=6, @@ -66,10 +73,10 @@ app.layout = html.Div( dbc.Row( [ dbc.Col( - [dcc.Graph(id="graph_1")], width=6 + [dcc.Graph(id="graph_1_1")], width=6 ), dbc.Col( - [dcc.Graph(id="graph_2")], width=6 + [dcc.Graph(id="graph_1_2")], width=6 ), ] ), @@ -81,7 +88,55 @@ app.layout = html.Div( dcc.Tab( label="Tab Two", id="tab_2_graphs", - children=[html.Div([], className="tab_content")], + children=[html.Div([ + dbc.Row( + [ + dbc.Col( + [ + dcc.Dropdown( + options=[ + "red", + "green", + "blue", + ], + value="red", + id="color_2", + multi=False, + ) + ], + width=6, + ), + dbc.Col( + [ + dcc.Slider( + min=math.floor( + df["y"].min() + ), + max=math.ceil( + df["y"].max() + ), + id="min_value_2", + ) + ], + width=6, + ), + ] + ), + dbc.Row( + [ + dbc.Col( + [dcc.Graph(id="graph_2_1")], width=6 + ), + dbc.Col( + [dcc.Graph(id="graph_2_2")], width=6 + ), + ] + ), + ], className="tab_content")], + ),dcc.Tab( + label="Tab Three", + id="tab_3_graphs", + children=[html.Div([html.Iframe(src="https://dashboard.m-g.tech", height="500px;", width="100%" )], className="tab_content")], ), ], ) @@ -92,15 +147,15 @@ app.layout = html.Div( ) -@app.callback(Output("graph_1", "figure"), Input("color", "value")) -def update_graph_1(dropdown_value_color): +@app.callback(Output("graph_1_1", "figure"), Input("color_1", "value")) +def update_graph_1_1(dropdown_value_color): fig = px.histogram(df, x="y", color_discrete_sequence=[dropdown_value_color]) fig.update_layout(template="plotly_white") return fig -@app.callback(Output("graph_2", "figure"), Input("min_value", "value")) -def update_graph_2(min_value): +@app.callback(Output("graph_1_2", "figure"), Input("min_value_1", "value")) +def update_graph_1_2(min_value): if min_value: dff = df[df["y"] > min_value] else: @@ -110,5 +165,23 @@ def update_graph_2(min_value): return fig +@app.callback(Output("graph_2_1", "figure"), Input("color_2", "value")) +def update_graph_2_1(dropdown_value_color): + fig = px.box(df, x="y", color_discrete_sequence=[dropdown_value_color]) + fig.update_layout(template="plotly_white") + return fig + + +@app.callback(Output("graph_2_2", "figure"), Input("min_value_2", "value")) +def update_graph_2_2(min_value): + if min_value: + dff = df[df["y"] > min_value] + else: + dff = df + fig = px.density_contour(dff, x="x", y="y") + fig.update_layout(template="plotly_white") + return fig + + if __name__ == "__main__": app.run_server(debug=True, port=8000)