Hi, can I have one more question, please?
How can I split up the layout into two halves; the left side includes all input variables (bars, dropdownlinst…), the right side includes all figures (output variables). I am new to Dash and not sure how to change the layout. This is my code.
import dash
import dash_core_components as dcc #used for graphs
import dash_html_components as html
import dash_daq as daq
from dash.dependencies import Output,Input,State #deal with outputs inputs
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash
import dash_daq as daq
import dash_core_components as dcc
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)
colors = {
‘background’: ‘#ffffff’,
‘text’: ‘#7FDBFF’,
‘text2’:’#646464’
}
#Layout
app.layout = html.Div(style={‘backgroundColor’: colors[‘background’]}, children=[
html.H1(
children=‘Interactive Planning Dashboard’,
style={
‘textAlign’: ‘center’,
‘color’: colors[‘text’] }),
html.Div('Number of Patients',style={'padding': 35}),
daq.Slider(
id='Visits',
min=0,
max=500,
value=50,
handleLabel={"showCurrentValue": True,"label": "VALUE"},
step=1),
# sliders bar for in patient visits
html.Div('In Person Visits (%)',style={'padding': 35}),
daq.Slider(
id='VisitsPerson',
min=0,
max=100,
value=80,
handleLabel={"showCurrentValue": True,"label": "VALUE"},
step=1),
html.Div('Virtual Visits %',style={'padding': 35}),
daq.Slider(
id='Virtual',
min=0,
max=100,
value=20,
handleLabel={"showCurrentValue": True,"label": "VALUE"},
step=1),
html.Div('Duration of visit (min)',style={'padding': 35}),
daq.Slider(
id='Duration',
min=0,
max=50,
value=20,
handleLabel={"showCurrentValue": True,"label": "VALUE"},
step=1),
html.Div('Hours of Operations',style={'padding': 35}),
daq.Slider(
id='Hours',
min=0,
max=24,
value=8,
handleLabel={"showCurrentValue": True,"label": "VALUE"},
step=1),
html.Div('Use of Telebooth',style={'padding': 35}),
dcc.Dropdown(
id='dropdown',
options=[
{'label': 'Yes', 'value': 'Y'},
{'label': 'No', 'value': 'N'},
],
value='Y'),
html.Div('Targeted Utilization (%)',style={'padding': 35}),
daq.Knob(
id='Uti',
min=0,
max=100,
value=80
),
dcc.Graph(id='NumRooms'),
dcc.Graph(id='SF')
])
@app.callback(
Output(‘NumRooms’, ‘figure’),
[Input(‘Duration’, ‘value’),
Input(‘Visits’, ‘value’),
Input(‘Uti’, ‘value’),
Input(‘Hours’, ‘value’),
Input(‘dropdown’, ‘value’),
Input(‘Virtual’, ‘value’)
])
def update_graph(Duration,Visits,Uti,Hours,dropdown,Virtual):
if dropdown =='Y':
XAxis1= round((Visits*(1-(Virtual/100))*Duration)/(Hours*60*Uti/100))
XAxis2= round((Visits*(Virtual/100)*Duration)/(Hours*60*Uti/100))
else:
XAxis1= round((Visits*Duration)/(Hours*60*Uti/100))
XAxis2= 0
figure={
'data': [
{'x': ['KeyRooms', 'Virtual Rooms'], 'y': [XAxis1, XAxis2], 'type': 'bar', 'name': 'Key Rooms'},
],
'layout': {
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text2']
}
}
}
return figure
@app.callback(
Output(‘SF’, ‘figure’),
[Input(‘Duration’, ‘value’),
Input(‘Visits’, ‘value’),
Input(‘Uti’, ‘value’),
Input(‘Hours’, ‘value’),
Input(‘dropdown’, ‘value’),
Input(‘Virtual’, ‘value’)
])
def update_graph2(Duration,Visits,Uti,Hours,dropdown,Virtual):
if dropdown ==‘Y’:
SF1= (round((Visits*(1-(Virtual/100))Duration)/(Hours60Uti/100)))650
SF2= (round((Visits(Virtual/100)Duration)/(Hours60Uti/100)))40
else:
SF1= (round((VisitsDuration)/(Hours60Uti/100)))*650
SF2= 0
figure={
'data': [
{'x': ['KeyRooms', 'Virtual Rooms'], 'y': [SF1, SF2], 'type': 'bar', 'name': 'DGSF'},
],
'layout': {
'paper_bgcolor': colors['background'],
'font': {
'color': colors['text2']
}
}
}
return figure
if name == ‘main’:
app.run_server(debug=False)