188 lines
8.2 KiB
Python
188 lines
8.2 KiB
Python
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)
|