FS2023-dashboard-design/dashboard3/main.py

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

# 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(
    {
        "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_1",
                                                            multi=False,
                                                        )
                                                    ],
                                                    width=6,
                                                ),
                                                dbc.Col(
                                                    [
                                                        dcc.Slider(
                                                            min=math.floor(
                                                                df["y"].min()
                                                            ),
                                                            max=math.ceil(
                                                                df["y"].max()
                                                            ),
                                                            id="min_value_1",
                                                        )
                                                    ],
                                                    width=6,
                                                ),
                                            ]
                                        ),
                                        dbc.Row(
                                            [
                                                dbc.Col(
                                                    [dcc.Graph(id="graph_1_1")], width=6
                                                ),
                                                dbc.Col(
                                                    [dcc.Graph(id="graph_1_2")], width=6
                                                ),
                                            ]
                                        ),
                                    ],
                                    className="tab_content",
                                ),
                            ],
                        ),
                        dcc.Tab(
                            label="Tab Two",
                            id="tab_2_graphs",
                            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")],
                        ),
                    ],
                )
            ],
            className="content",
        ),
    ]
)


@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_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:
        dff = df
    fig = px.scatter(dff, x="x", y="y")
    fig.update_layout(template="plotly_white")
    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)