Thanks @AnnMarieW for your great help!
It is really fun working on dash but I am really new… learning bit by bit.
My final question here to finalize this app: I want my table and 2 figures to be shown on the right side of the layout. Whereas, the input variables on the left side of the screen… I am REALLY struggling with that. Here is an example of my code, and I would appreciate it if you are able to split them for me into a right and left sides (this will help me learn it better)…
First the title:Interactive Planning Dashboard should stay in the middle
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)
colors = {
‘background’: ‘#ffffff’,
‘text’: ‘#7FDBFF’,
‘text2’:’#646464’
}
app.layout = html.Div(style={‘backgroundColor’: colors[‘background’]}, children=[
html.H1(
children=‘Interactive Planning Dashboard’,
style={
‘textAlign’: ‘center’,
‘color’: colors[‘text2’] }),
Code part where I have the input variables and should be the left side:
html.Div('Expected Number of Patients',style={'padding': 35}),
daq.Slider(
id='Visits',
min=0,
max=50000,
value=2000,
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),
… I have many inputs, but I am just showing an example
Part where I have the outputs (which should go to the right side):
html.Div(‘Program’,style={‘padding’: 35}),
dash_table.DataTable(
id=‘tableo’,
columns=[
{“name”: “Spaces”, “id”: “SP”},
{“name”: “Exam Rooms”, “id”: “Exam”},
{“name”: “Waiting”, “id”: “Waiting”},
{“name”: “Playroom”, “id”: “Playroom”},
{“name”: “Offices”, “id”: “Offices”},
{“name”: “Reception”, “id”: “Reception”},
{“name”: “Kiosk”, “id”: “Kiosk”},
{“name”: “Screening rooms”, “id”: “Screening”},
{“name”: “Isolation rooms”, “id”: “Isolation”},
{“name”: “Clean utility”, “id”: “Clean”},
{“name”: “Soild utility”, “id”: “Soild”},
{“name”: “Consult rooms”, “id”: “Consult”},
{“name”: “Medication room”, “id”: “Medication”},
{“name”: “Utility room”, “id”: “Utility”},
{“name”: “Storage”, “id”: “Storage”},
{“name”: “Lockers”, “id”: “Lockers”},
{“name”: “Nurse station”, “id”: “Nurse”},
{“name”: “Bariatric rooms”, “id”: “BR”},
{“name”: “Additional Spaces”, “id”: “AS”}
,
],
export_format='csv',
export_headers='display',
style_table={
'maxHeight': '50ex',
'overflowY': 'scroll',
'width': '100%',
'minWidth': '100%'},
),
dcc.Store(id=‘memory-output’),
html.Div(’’,style={‘padding’: 35}),
html.Div(children=’’’
Number of Clinics’’’, style={
‘textAlign’: ‘center’,
‘color’: colors[‘text2’]
}),
# start of graph
dcc.Graph(id=‘NumRooms’, figure=“figure1”),
#end graph
html.Div(children=’’’
Total Space Needed
‘’’, style={
‘textAlign’: ‘center’,
‘color’: colors[‘text2’]
}),
# start of graph
dcc.Graph(id=‘SF’, figure=“figure2”)
#end graph
])
Thank you so much!!