Hello All,
I am trying to use dcc.Input & Datalist components to output bar chart figure,
Dataframe is filtered according selected date by the user,
As I’m using Datalist, I expect having list of dates suggested in Input box but it is not the case…
Here is code
app.py:
app = dash.Dash(__name__,
use_pages=True,
external_stylesheets=[dbc.themes.UNITED])
sidebar = dbc.Nav(
[dbc.NavLink(
[html.Div(page['name'], className='ms-2')],
href=page['path'],
active='exact') for page in dash.page_registry.values()],
vertical=True,
pills=True,
className='bg-light')
app.layout = dbc.Container([
html.Div([
dcc.Store(id='store-bees', data={}, storage_type='session'),
dcc.Store(id='store-selected-year', data={}, storage_type='session'),
dcc.Store(id='store-selected-state', data={}, storage_type='session')]),
dbc.Row([
dbc.Col(
html.Div("Input component tests",
style={'fontsize':100, 'textAlign': 'center', 'font-weight': 'bold'}))
]),
html.Hr(),
dbc.Row([
dbc.Col([
sidebar],
xs=4,
sm=4,
md=2,
lg=2,
xxl=2),
dbc.Col([
dash.page_container],
xs=8,
sm=8,
md=10,
lg=10,
xxl=10)])
],
fluid=True)
if __name__ == '__main__':
app.run(debug=True)
code for page_1:
layout = dbc.Container([
html.H2('tests with dcc.Input component'),
dash_table.DataTable(id='table', data=[],
page_size=15,
fixed_columns={'headers': True, 'data': 1},
style_cell={'padding': '5px'},
style_header={'backgroundColor': 'white','fontWeight': 'bold', 'border': '1px solid pink'},
style_data={ 'border': '1px solid blue' }),
html.Datalist(id='datalist-year', children=options_year),
html.Datalist(id='datalist-state', children=options_state),
dcc.Input(id='selected-year', list='datalist-year', value=new_df['Year'].unique()[0],
type='number', placeholder='select year...'),
#dcc.Input(id='selected-state', list='datalist-state', type='text',
#placeholder='select state...'),
dcc.Store(id='store-selected-year'),
#dcc.Store(id='store-selected-state'),
dcc.Graph(id='graph-initial', figure={})
])
"""callbacks"""
"""1. store dataframe """
@callback(
Output('store-bees', 'data'),
Input('store-bees', 'data')
)
def fn_store(data):
if data == {}:
data = new_df.to_dict('records')
return data
"""2. display dataframe"""
@callback(
[Output('table', 'data'),
Output('table', 'columns')],
Input('store-bees', 'data')
)
def fn_table(data):
new_df = pd.DataFrame(data)
return new_df.to_dict('records'), [{"name": col, "id": col} for col in new_df.columns]
"""3. store user's selected year value"""
@callback(
Output('store-selected-year', 'data'),
Input('selected-year', 'value'))
def fn_year(year):
return int(year)
# """4. store user's selected state value"""
# @callback(
# Output('store-selected-state', 'data'),
# Input('selected-state', 'value'))
# def fn_state(state):
# return state
"""5. filter dataframe based on stored values, output figure"""
@callback(
Output('graph-initial', 'figure'),
[Input('table', 'data'),
Input('store-selected-year', 'data')
]
)
def fn_figure(new_data, selected_year):
df = pd.DataFrame(new_data)
df_from_selected_year = df[df['Year'] == selected_year]
#df_from_selected_state = df_from_selected_year[df_from_selected_year['State'] == selected_state]
print(f'df_from_selected_year -- {df_from_selected_year.head()}')
fig = px.bar(df_from_selected_year,
x='State',
y='Value',
color='State',
hover_name='State')
return fig
Here is result
Error msg,
Invalid argument `value` passed into Option.
Expected `string`.
Was supplied type `number`.
Value provided: 2019
Could you help on this ?
Many thanks for your time !