Hi,
I am having an issue with my second callback. It is supposed to get the value from dropdown which is initated in 1st callback and output it to layout. Here is the code:
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State, MATCH, ALL
import pandas as pd
from datetime import date
import datetime
import calendar
import random
external_stylesheets = [dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
def dropFunction(id):
data1 = [
'Preparative', 'Organizational', 'Maintenance', 'Thresold', 'Fitness',
'Game', 'Recovery'
]
return dcc.Dropdown(
id={
'type': 'dynamic-dropdown2',
'index': id },
options=[{
"label": x,
"value": x
} for x in data1],
#value=data1[0],
placeholder="Select the activity",
clearable=False,
)
def calendarGen(value, month):
days = calendar.monthcalendar(2021, month)
j = days
days = pd.DataFrame(days)
days.columns = [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday',
'Sunday'
]
result=[]
if value == 'Monday':
c=0
elif value=='Tuesday':
c=1
elif value=='Wednesday':
c=2
elif value=='Thursday':
c=3
elif value=='Friday':
c=4
elif value=='Saturday':
c=5
elif value=='Sunday':
c=6
for ind in days.index:
i = j[ind][c]
if days[value][ind] != 0:
result.append(
dbc.Card(
dbc.CardBody([
html.Div(
dbc.Button(children=days[value][ind],
id={
'type': 'dynamic-dropdown',
'index': i
},
color="link")), dropFunction(i)#Passing the index for the dropdown
])))
else:
result.append(dbc.Card(dbc.CardBody(html.Br())))
return result
my_calendar = html.Div([
dbc.Row(
dbc.Col(
dcc.Dropdown(
id="month",
options=[{
"label": x,
"value": x
} for x in calendar.month_name],
value=calendar.month_name[date.today().month],
clearable=False,
))),
html.Br(),
#dbc.Row(html.P(id="dbc-button")),
])
table_header = [
html.Thead(html.Tr([html.Th("KEY"), html.Th(dbc.Badge("RECOVERY", color="primary")), html.Th(dbc.Badge("PREPARATIVE", color="success")), html.Th(dbc.Badge("ORGANIZATIONAL", color="warning")), html.Th(dbc.Badge("MAINTENANCE", color="info")), html.Th(dbc.Badge("THRESOLD", color="light")), html.Th(dbc.Badge("FITNESS", color="dark")), html.Th(dbc.Badge("GAME", color="danger")) ]))
]
row1 = html.Tr([html.Td("RPE"), html.Td("<3"),html.Td("3-4"), html.Td("4-5"), html.Td("5-6"), html.Td("7-8"), html.Td("8-9"), html.Td("9-10")])
row2 = html.Tr([html.Td("VOL"), html.Td("<35min"), html.Td("35-45min"), html.Td("45-60min"), html.Td("45-75min"), html.Td("75-80min"), html.Td("80-100min"), html.Td("90min")])
row3 = html.Tr([html.Td("TL"), html.Td("<100"), html.Td("105-200"), html.Td("180-325"), html.Td("300-450"), html.Td("490-640"), html.Td("640-900"), html.Td(">810")])
row4 = html.Tr([html.Td("Readiness"), html.Td("<65"), html.Td(">77.5"), html.Td("66-75"), html.Td("70-80"), html.Td("75-85"), html.Td("82.5-95"), html.Td("87.5")])
row5 = html.Tr([html.Td("Recovery"), html.Td("n/a"), html.Td("12hr"), html.Td("<24hr"), html.Td("24hr"), html.Td("48hr"), html.Td("72hr"), html.Td(">72hr")])
table_body = [html.Tbody([row1, row2, row3, row4, row5])]
table = dbc.Table(table_header + table_body, bordered=True,
hover=True,
responsive=True,
striped=True,)
app.layout = html.Div([
dcc.Tabs(
id='tabs-example',
value='tab-1',
children=[
dcc.Tab(label='Session Reports', value='tab-1'),
dcc.Tab(label='TSB', value='tab-2'),
dcc.Tab(
label='Training Planner',
children=[
html.Div(my_calendar, id='monthChoice'),
dbc.Row([
dbc.Col(
[html.Div("Monday"),
html.Div(id='monday')]),
dbc.Col([html.Div("Tuesday"),
html.Div(id='tuesday')]),
dbc.Col([html.Div("Wednesday"),
html.Div(id='wednesday')]),
dbc.Col([html.Div("Thursday"),
html.Div(id='thursday')]),
dbc.Col([html.Div("Friday"),
html.Div(id='friday')]),
dbc.Col([html.Div("Saturday"),
html.Div(id='saturday')]),
dbc.Col([html.Div("Sunday"),
html.Div(id='sunday')])
], no_gutters=True),
html.Hr(),
html.Div(table),
html.Hr(),
html.Div(id="Output"),#Where the output is suppose to go
]),
dcc.Tab(label='Performance Prediction'),
dcc.Tab(label='Upload'),
dcc.Tab(label='Settings')
]),
html.Div(id='tabs-example-content')
])
@app.callback([Output("monday", "children"),Output("tuesday", "children"), Output("wednesday", "children"), Output("thursday", "children"), Output("friday", "children"), Output("saturday", "children"), Output("sunday", "children") ], [Input("month", "value")])
def table(value):
df = [
"January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"
]
print((value))
for i, month in enumerate(df):
if month == value:
break
i = i + 1
monday = calendarGen("Monday", i)
tuesday=calendarGen("Tuesday", i)
wednesday=calendarGen("Wednesday", i)
thursday=calendarGen("Thursday", i)
friday=calendarGen("Friday", i)
saturday=calendarGen("Saturday", i)
sunday=calendarGen("Sunday", i)
return monday,tuesday, wednesday, thursday, friday, saturday, sunday
@app.callback(Output('Output', 'children'),
[Input({'type': 'dynamic-dropdown2', 'index': MATCH}, 'value')]
)#This callback is the issue
def update_slider_example_min(input): #input
return input
if __name__ == '__main__':
app.run_server(host='0.0.0.0', port=random.randint(2000, 9000))
When I load my training page it is supposed to display a prototype of a calendar with dropdown in days, and when a value is selected in a dropdown it is suppose to display it in the output in the layout. But when clicked on training planner page, the days are not loading. They are loading again if I take out the second callback