diff --git a/dashboard2/main.py b/dashboard2/main.py index 5b17d82..145fd01 100644 --- a/dashboard2/main.py +++ b/dashboard2/main.py @@ -13,15 +13,44 @@ 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)}) -app.layout = html.Div([html.H1("Dashboard 2"), - 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="m-4") - +app.layout = html.Div( + [ + html.H1("Dashboard 2"), + dbc.Row( + [ + dbc.Col( + [ + dcc.Dropdown( + options=["red", "green", "blue"], + value="red", + id="color", + multi=False, + ) + ], + width=6, + ), + dbc.Col( + [ + dcc.RangeSlider( + min=math.floor(df["y"].min()), + max=math.ceil(df["y"].max()), + value=[math.floor(df["y"].min()), math.ceil(df["y"].max())], + id="range", + ) + ], + width=6, + ), + ] + ), + dbc.Row( + [ + dbc.Col([dcc.Graph(id="graph_1")], width=6), + dbc.Col([dcc.Graph(id="graph_2")], width=6), + ] + ), + ], + className="m-4", +) @app.callback(Output("graph_1", "figure"), Input("color", "value")) def update_graph_1(dropdown_value_color): @@ -29,10 +58,10 @@ def update_graph_1(dropdown_value_color): fig.update_layout() return fig -@app.callback(Output("graph_2", "figure"), Input("min_value", "value")) +@app.callback(Output("graph_2", "figure"), Input("range", "value")) -def update_graph_2(min_value): - dff = df[df['y']> min_value] +def update_graph_2(range): + dff = df[(df['y'] > range[0]) & (df['y'] < range[1])] fig = px.scatter(dff, x='x', y='y') fig.update_layout() return fig