Creating an interactive menu

I’d like to make a dynamic menu in dash. I’m just not sure how to go about to create this.

This is what i’ve managed to do:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

all_options = {
    'Waterfall': {'query','Configuration'},
    'Line Chart': {'query', 'period', 'date_from', 'date_to', 'previous_year_aggregation', 'current_year_aggregation',
                   'multi_year_stat_aggregation'}
}
app.layout = html.Div([
    dcc.Dropdown(
        id='chart_type',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value='Waterfall'
    ),

    html.Hr(),

    dcc.Dropdown(id='chart_options'),

    html.Hr(),

    html.Div(id='display-selected-values')
])

@app.callback(
    Output('chart_options', 'options'),
    Input('chart_type', 'value'))
def set_chart_options(selected_chart):
    return [{'label': i, 'value': i} for i in all_options[selected_chart]]


@app.callback(
    Output('chart_options', 'value'),
    Input('chart_options', 'options'))
def set_chart_options_value(available_options):
    return available_options[0]['value']


@app.callback(
    Output('display-selected-values', 'children'),
    Input('chart_type', 'value'),
    Input('chart_options', 'value'))
def set_display_children(selected_chart, selected_option):
    return u'Chart:{}   Option:{}'.format(
        selected_chart, selected_option,
    )


if __name__ == '__main__':
    app.run_server(debug=True)

I am able to make 2 drop downlist where the values in the second list is dependant on the option chosen in the first drop down.

I’d like it to be like the picture attached where the user chooses a chart type and then the respective options show up and the user can type something next to these options

Any help would be really helpful!!!

1 Like