Skip to content

Commit

Permalink
Merge pull request #200 from danielh7-cs9/main
Browse files Browse the repository at this point in the history 
#190 Outdoor comfort tab issue with bootstrap (updated)
  • Loading branch information
@FedericoTartarini
FedericoTartarini authored May 19, 2023
2 parents b339a2a + a652f5d commit 485a685
Showing 1 changed file with 120 additions and 100 deletions.
220 changes: 120 additions & 100 deletions my_project/tab_outdoor_comfort/app_outdoor_comfort.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
import dash_bootstrap_components as dbc
from my_project.global_scheme import (
outdoor_dropdown_names,
tight_margins,
month_lst,
container_row_center_full,
container_col_center_one_of_three,
)
from dash.dependencies import Input, Output, State
Expand All @@ -11,153 +14,159 @@
heatmap_with_filter,
thermal_stress_stacked_barchart,
)
from my_project.utils import generate_chart_name, generate_units_degree, generate_units,title_with_link, title_with_tooltip
from my_project.utils import (
generate_chart_name,
generate_units_degree,
generate_units,
title_with_link,
title_with_tooltip,
)


import numpy as np
from app import app


def layout_outdoor_comfort():
return html.Div(
className="container-col",
def inputs_outdoor_comfort():
return dbc.Row(
className="container-row full-width three-inputs-container",
children=[
html.Div(
className="container-row full-width three-inputs-container",
dbc.Col(
md=6,
sm=12,
children=[
html.Div(
className=container_col_center_one_of_three,
className="container-row center-block",
children=[
dbc.Button(
"Apply month and hour filter",
color="primary",
id="month-hour-filter-outdoor-comfort",
className="mb-2",
n_clicks=0,
html.H4(
children=["Select a scenario:"],
style={"flex": "30%"},
),
html.Div(
className=(
"container-row full-width justify-center mt-2"
),
children=[
html.H6("Month Range", style={"flex": "20%"}),
html.Div(
dcc.RangeSlider(
id="outdoor-comfort-month-slider",
min=1,
max=12,
step=1,
value=[1, 12],
marks={1: "1", 12: "12"},
tooltip={
"always_visible": False,
"placement": "top",
},
allowCross=False,
),
style={"flex": "50%"},
),
dcc.Checklist(
options=[
{"label": "Invert", "value": "invert"},
],
value=[],
id="invert-month-outdoor-comfort",
labelStyle={"flex": "30%"},
),
dcc.Dropdown(
id="tab7-dropdown",
style={
"flex": "60%",
},
options=[
{
"label": i,
"value": outdoor_dropdown_names[i],
}
for i in outdoor_dropdown_names
],
value="utci_Sun_Wind",
),
html.Div(id="image-selection", style={"flex": "10%"}),
],
),
],
),
dbc.Col(
md=6,
sm=12,
children=[
dbc.Button(
"Apply month and hour filter",
color="primary",
style={
"width": "100%",
},
id="month-hour-filter-outdoor-comfort",
className="mb-2",
n_clicks=0,
),
html.Div(
className="container-row full-width justify-center mt-2",
children=[
html.H6("Month Range", style={"flex": "5%"}),
html.Div(
className="container-row align-center justify-center",
children=[
html.H6("Hour Range", style={"flex": "20%"}),
html.Div(
dcc.RangeSlider(
id="outdoor-comfort-hour-slider",
min=0,
max=24,
step=1,
value=[0, 24],
marks={0: "0", 24: "24"},
tooltip={
"always_visible": False,
"placement": "topLeft",
},
allowCross=False,
),
style={"flex": "50%"},
),
dcc.Checklist(
options=[
{"label": "Invert", "value": "invert"},
],
value=[],
id="invert-hour-outdoor-comfort",
labelStyle={"flex": "30%"},
),
dcc.RangeSlider(
id="outdoor-comfort-month-slider",
min=1,
max=12,
step=1,
value=[1, 12],
marks={1: "1", 12: "12"},
tooltip={
"always_visible": False,
"placement": "top",
},
allowCross=False,
),
style={"flex": "50%"},
),
dcc.Checklist(
options=[
{"label": "Invert", "value": "invert"},
],
value=[],
id="invert-month-outdoor-comfort",
labelStyle={"flex": "30%"},
),
],
),
html.Div(
className=container_col_center_one_of_three,
className="container-row align-center justify-center",
children=[
html.H6("Hour Range", style={"flex": "5%"}),
html.Div(
className="container-row align-center justify-center",
children=[
html.H3(
children=["Select a scenario: "],
),
dcc.Dropdown(
id="tab7-dropdown",
style={
"width": "25rem",
"marginLeft": "1rem",
"marginRight": "2rem",
},
options=[
{
"label": i,
"value": outdoor_dropdown_names[i],
}
for i in outdoor_dropdown_names
],
value="utci_Sun_Wind",
),
html.Div(id="image-selection"),
dcc.RangeSlider(
id="outdoor-comfort-hour-slider",
min=0,
max=24,
step=1,
value=[0, 24],
marks={0: "0", 24: "24"},
tooltip={
"always_visible": False,
"placement": "topLeft",
},
allowCross=False,
),
style={"flex": "50%"},
),
dcc.Checklist(
options=[
{"label": "Invert", "value": "invert"},
],
)
value=[],
id="invert-hour-outdoor-comfort",
labelStyle={"flex": "30%"},
),
],
),
],
),
html.Div(id="outdoor-comfort-output"),
],
)


def outdoor_comfort_chart():
return html.Div(
children=[
html.Div(id="outdoor-comfort-output"),
html.Div(
children=title_with_link(
text="UTCI heatmap chart",
id_button="utci-charts-label",
doc_link="https://cbe-berkeley.gitbook.io/clima/documentation/tabs-explained/outdoor-comfort/utci-explained",
)
),

dcc.Loading(
html.Div(id="utci-heatmap"),
type="circle",
),

html.Div(
children=title_with_link(
text="UTCI thermal stress chart",
id_button="utci-charts-label",
doc_link="https://cbe-berkeley.gitbook.io/clima/documentation/tabs-explained/outdoor-comfort/utci-explained"
doc_link="https://cbe-berkeley.gitbook.io/clima/documentation/tabs-explained/outdoor-comfort/utci-explained",
)
),
dcc.Loading(
html.Div(id="utci-category-heatmap"),
type="circle",
),

html.Div(
className="container-row align-center justify-center",
children=[
Expand Down Expand Up @@ -186,7 +195,6 @@ def layout_outdoor_comfort():
),
],
),

dcc.Loading(
html.Div(id="utci-summary-chart"),
type="circle",
Expand All @@ -195,6 +203,18 @@ def layout_outdoor_comfort():
)


def layout_outdoor_comfort():
return (
dcc.Loading(
type="circle",
children=html.Div(
className="container-col",
children=[inputs_outdoor_comfort(), outdoor_comfort_chart()],
),
),
)


@app.callback(
Output("outdoor-comfort-output", "children"),
[
Expand Down

0 comments on commit 485a685

Please sign in to comment.