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

FORMATTED: Original dashboard3 code from moodle

main
Marc Gauch 2023-05-12 15:34:38 +02:00
parent c01e729bd5
commit 95e6e86cd5
1 changed files with 87 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
dashboard3/main.py
View File

@ -9,33 +9,106 @@ import dash_bootstrap_components as dbc
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]) app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
df = pd.DataFrame({'y': np.random.normal(loc=0, scale=10, size=1000), 'x': np.random.normal(loc=10, scale=2, size=1000)}) df = pd.DataFrame(
{
"y": np.random.normal(loc=0, scale=10, size=1000),
"x": np.random.normal(loc=10, scale=2, size=1000),
}
)
app.layout = html.Div(
[
html.Div([html.H1("Dashboard 3")], className="header"),
html.Div(
[
dcc.Tabs(
id="tabs",
children=[
dcc.Tab(
label="Tab One",
id="tab_1_graphs",
children=[
html.Div(
[
dbc.Row(
[
dbc.Col(
[
dcc.Dropdown(
options=[
"red",
"green",
"blue",
],
value="red",
id="color",
multi=False,
)
],
width=6,
),
dbc.Col(
[
dcc.Slider(
min=math.floor(
df["y"].min()
),
max=math.ceil(
df["y"].max()
),
id="min_value",
)
],
width=6,
),
]
),
dbc.Row(
[
dbc.Col(
[dcc.Graph(id="graph_1")], width=6
),
dbc.Col(
[dcc.Graph(id="graph_2")], width=6
),
]
),
],
className="tab_content",
),
],
),
dcc.Tab(
label="Tab Two",
id="tab_2_graphs",
children=[html.Div([], className="tab_content")],
),
],
)
],
className="content",
),
]
)
app.layout = html.Div([html.Div([html.H1("Dashboard 3")], className="header"), html.Div([dcc.Tabs(id="tabs", children=[
dcc.Tab(label='Tab One', id="tab_1_graphs", children=[html.Div([
dbc.Row([dbc.Col([dcc.Dropdown(options=['red','green','blue'], value='red', id='color', multi=False)], width=6),
dbc.Col([dcc.Slider(min=math.floor(df['y'].min()),max=math.ceil(df['y'].max()),id="min_value")], width=6)]),
dbc.Row([dbc.Col([dcc.Graph(id="graph_1")],width=6),
dbc.Col([dcc.Graph(id="graph_2")],width=6)])], className="tab_content"),]),
dcc.Tab(label='Tab Two', id="tab_2_graphs",children=[html.Div([],className="tab_content")]),])], className="content")])
@app.callback(Output("graph_1", "figure"), Input("color", "value")) @app.callback(Output("graph_1", "figure"), Input("color", "value"))
def update_graph_1(dropdown_value_color): def update_graph_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_2", "figure"), Input("min_value", "value"))
def update_graph_2(min_value): def update_graph_2(min_value):
if min_value: if min_value:
dff = df[df['y'] > min_value] dff = df[df["y"] > min_value]
else: else:
dff = df dff = df
fig = px.scatter(dff, x='x', y='y') fig = px.scatter(dff, x="x", y="y")
fig.update_layout(template="plotly_white") fig.update_layout(template="plotly_white")
return fig return fig
if __name__ == '__main__':
app.run_server(debug=True, port=8000) if __name__ == "__main__":
app.run_server(debug=True, port=8000)