import math
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import numpy as np
import pandas as pd
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# generate random normal distributed data for x and y
# and store it in a pandas DataFrame

df = pd.DataFrame({'y': np.random.normal(loc=0, scale=10, size=1000),
                   'x': np.random.normal(loc=10, scale=2, size=1000)})
df_min = math.floor(df["y"].min())
df_max = math.ceil(df["y"].max())

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=df_min,
                            max=df_max,
                            value=[df_min, df_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",
)

# Now the color selecion and the slider works for both diagrams
@app.callback(Output("graph_1", "figure"), Input("color", "value"), Input("range", "value"))

def update_graph_1(color, range):
    # this filter is used twice. This could be improved
    dff = df[(df['y'] > range[0]) & (df['y'] < range[1])]
    fig = px.histogram(dff, x="y", color_discrete_sequence=[color])
    fig.update_layout()
    return fig

@app.callback(Output("graph_2", "figure"), Input("color", "value"), Input("range", "value"))

def update_graph_2(color, range):
    dff = df[(df['y'] > range[0]) & (df['y'] < range[1])]
    fig = px.scatter(dff, x='x', y='y', color_discrete_sequence=[color])
    fig.update_layout()
    return fig

if __name__ == '__main__':
    app.run_server(debug=True, port=8000)