gauchmarc/FS2023-dashboard-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Aufgabe 6

Browse Source
This commit is contained in:
Marc Gauch 2023-05-12 16:16:05 +02:00
parent dd6de9c83b
commit 44be992d0a
1 changed files with 82 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
dashboard3/main.py
View File

@ -7,6 +7,13 @@ import dash_bootstrap_components as dbc
# new: plotly template="plotly_white", https://plotly.com/python/templates/ # 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]) app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
df = pd.DataFrame( df = pd.DataFrame(
@ -41,7 +48,7 @@ app.layout = html.Div(
"blue", "blue",
], ],
value="red", value="red",
id="color", id="color_1",
multi=False, multi=False,
) )
], ],
@ -56,7 +63,7 @@ app.layout = html.Div(
max=math.ceil( max=math.ceil(
df["y"].max() df["y"].max()
), ),
id="min_value", id="min_value_1",
) )
], ],
width=6, width=6,
@ -66,10 +73,10 @@ app.layout = html.Div(
dbc.Row( dbc.Row(
[ [
dbc.Col( dbc.Col(
[dcc.Graph(id="graph_1")], width=6 [dcc.Graph(id="graph_1_1")], width=6
), ),
dbc.Col( 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( dcc.Tab(
label="Tab Two", label="Tab Two",
id="tab_2_graphs", 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")) @app.callback(Output("graph_1_1", "figure"), Input("color_1", "value"))
def update_graph_1(dropdown_value_color): def update_graph_1_1(dropdown_value_color):
fig = px.histogram(df, x="y", color_discrete_sequence=[dropdown_value_color]) fig = px.histogram(df, x="y", color_discrete_sequence=[dropdown_value_color])
fig.update_layout(template="plotly_white") fig.update_layout(template="plotly_white")
return fig return fig
@app.callback(Output("graph_2", "figure"), Input("min_value", "value")) @app.callback(Output("graph_1_2", "figure"), Input("min_value_1", "value"))
def update_graph_2(min_value): def update_graph_1_2(min_value):
if min_value: if min_value:
dff = df[df["y"] > min_value] dff = df[df["y"] > min_value]
else: else:
@ -110,5 +165,23 @@ def update_graph_2(min_value):
return fig 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__": if __name__ == "__main__":
app.run_server(debug=True, port=8000) app.run_server(debug=True, port=8000)