From 654ffafd8371812f79889d37ec82da24b6e33123 Mon Sep 17 00:00:00 2001
From: Marc Gauch <34353267+marcgauch@users.noreply.github.com>
Date: Fri, 12 May 2023 13:53:29 +0200
Subject: [PATCH] ADDED: Default code from Moodle

https://moodle.fhgr.ch/pluginfile.php/887638/mod_resource/content/1/Dashboard2_Buch_Code.txt
https://moodle.fhgr.ch/pluginfile.php/887639/mod_resource/content/1/Dashboard3_Buch_Code.txt
https://moodle.fhgr.ch/pluginfile.php/887640/mod_resource/content/1/Dashboard3_Buch_Code.css
---
 dashboard2/main.py  | 41 +++++++++++++++++++++++++++++++++++++++++
 dashboard3/main.css | 12 ++++++++++++
 dashboard3/main.py  | 41 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 dashboard2/main.py
 create mode 100644 dashboard3/main.css
 create mode 100644 dashboard3/main.py

diff --git a/dashboard2/main.py b/dashboard2/main.py
new file mode 100644
index 0000000..5b17d82
--- /dev/null
+++ b/dashboard2/main.py
@@ -0,0 +1,41 @@
+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)})
+
+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.callback(Output("graph_1", "figure"), Input("color", "value"))
+
+def update_graph_1(dropdown_value_color):
+    fig = px.histogram(df, x="y", color_discrete_sequence=[dropdown_value_color])
+    fig.update_layout()
+    return fig
+
+@app.callback(Output("graph_2", "figure"), Input("min_value", "value"))
+
+def update_graph_2(min_value):
+    dff = df[df['y']> min_value]
+    fig = px.scatter(dff, x='x', y='y')
+    fig.update_layout()
+    return fig
+
+if __name__ == '__main__':
+    app.run_server(debug=True, port=8000)
\ No newline at end of file
diff --git a/dashboard3/main.css b/dashboard3/main.css
new file mode 100644
index 0000000..631f8e5
--- /dev/null
+++ b/dashboard3/main.css
@@ -0,0 +1,12 @@
+.header {
+  margin: 0px 25px 25px 25px;
+  /* margin-top margin-right margin-bottom margin-left*/
+}
+
+.content {
+  margin: 0px 25px 25px 25px;
+}
+
+.tab_content {
+  margin-top: 60px;
+}
diff --git a/dashboard3/main.py b/dashboard3/main.py
new file mode 100644
index 0000000..a5a7fa5
--- /dev/null
+++ b/dashboard3/main.py
@@ -0,0 +1,41 @@
+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/
+
+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', 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"))
+
+def update_graph_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_2", "figure"),Input("min_value", "value"))
+
+def update_graph_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
+
+if __name__ == '__main__':
+    app.run_server(debug=True, port=8000)
\ No newline at end of file