I want to have configuration tab where i select a values from multiple dropdowns and pass the values in other tabs to render a chart and table.I have tried dcc.store but i couldnt achieve it. IT would be very greatful for me if any one would help me with this sample code, where i can habe change to pass the based on the drop down selected in configuration tab, chart are created. Thank you in advance
This is what i have tried:
app.layout = html.Div(
id="big-app-container",
children=[
dcc.Store(id='store_1', storage_type='session'),
html.Div([
dcc.Tabs(id='app-tabs', value='tab1', children=[
dcc.Tab(
id="Specs-tab",
label="DashBoard",
value="tab1",
),
dcc.Tab(
id="Control-chart-tab",
label="tab2",
value="tab2",
),
dcc.Tab(
id="Configuration",
label="Configuration",
value="tab3",
),
]),
html.Div(id='tabs-example-content')
])
])
def configuration_layout(app):
return html.Div(className='row',
children=[
html.Div(className='four columns div-user-controls',
children=[
html.Div(
className='c',
children=[
dcc.Dropdown(id='slct_channel',
options=[
{"label": "select value A",
"value": "A"},
{"label": "select value B",
"value": "B"},
],
multi=False,
value='B',
),
],
),
])
])
def tab2_layout(app):
return html.Div(className='row', # Define the row element
children=[
# Define the left element
html.Div(className='six columns',
children=[
dcc.Graph(id='time_series',
figure=go.Figure(
{
"data": [
{
"x": A['Date'],
"y": A['values'],
"mode": "lines+markers",
}
],
"layout": {
"margin": dict(l=20, r=20, t=50, b=50),
"paper_bgcolor": "rgba(0,0,0,0)",
"plot_bgcolor": "rgba(0,0,0,0)",
"title":{'text': 'Yield', 'font': {'color': 'white'}'x':0.5},
"xaxis": dict(
showline=False, showgrid=False, zeroline=True
),
"autosize": True,
}
}
)
)
]),
@app.callback(Output('Control-chart-tab','children'),
Output('time_series', 'figure'),
[Input('slct_channel', 'value')],
State('slct_channel', 'value')
)
def updatetannenberg_graph(option_slctd):
if 'A' == option_slctd:
df = A
else:
df = B
layout = go.Layout(
paper_bgcolor='rgba(0, 0, 0, 0)',
plot_bgcolor='rgba(0, 0, 0, 0)',
margin={'b': 15},
hovermode='x',
autosize=True,
title={'text': 'Yield', 'font': {'color': 'white'}, 'x': 0.5},
xaxis= dict(
showline=False, showgrid=False, zeroline=True),
)
data = [
go.Scatter(x=df['Date'], y=df['values'])
]
fig = Figure(data=data, layout=layout)
return fig
@app.callback(Output('tabs-example-content', 'children'),
Input('app-tabs', 'value'))
def render_content(tab):
if tab == 'tab1':
return create_layout(app)
elif tab == 'tab2':
return tab2_layout(app)
elif tab == 'tab3':
return configuration_layout(app)