Plotly Dash-下拉影响多个选项卡

时间:2019-04-25 12:45:56

标签: python plotly-dash

我正在对仪表板应用程序进行原型设计,在其中配置其他工具。 该工具仅需要json作为输入。

现在我有一个下拉菜单-您可以在其中选择变量。 此下拉列表应会影响多个标签。

以下代码仅显示“错误加载依赖项”

import dash

import json

import dash_core_components as dcc

import dash_html_components as html

from dash.dependencies import Input, Output, State
metadata = dict(
    var1=['min', 'max', 'sum'],
    var2=['min', 'max', 'sum'],
    var3=['min', 'max', 'sum', 'mean', 'median'])

app = dash.Dash(__name__)
app.config['suppress_callback_exceptions']=True

app.layout = html.Div(
    [
        dcc.Dropdown(
            id='variables',
            options=[{'label': variable, 'value': variable} for variable in metadata],
            # value=metadata.columns[0],
            # labelStyle={'display': 'block'},
        ),
        dcc.Tabs(
            id='choose-variable-action',
            value='simple',
            children=[
                dcc.Tab(label='Simple', value='simple'),
                dcc.Tab(label='Ratio', value='ratio')]),
        html.Div(id='tabs-content'),
        # dcc.Dropdown(
        #     id='functions',
        #     multi=True,
        # ),
        html.Div('{}',
                 id='config',
                 # style={'display': 'none'},
                 ),
        html.Div('{}',
            id='functions-hidden',
            # style={'display': 'none'}
            )
    ]
)

def simple_tab_content():
    return html.Div([
        # html.H3('Simple'),
        dcc.Dropdown(
            id='functions',
            multi=True,
        )])
def ratio_tab_content():
    return html.Div([
        # html.H3('Ratio'),
    ])

@app.callback(
    output=Output('tabs-content', 'children'),
    inputs=[Input('choose-variable-action', 'value')])
def render_tab_content(tab):
    if tab == 'simple':
        return simple_tab_content()
    if tab == 'ratio':
        return ratio_tab_content()

@app.callback(output=Output('functions', 'options'),
              inputs=[Input('variables', 'value')])
def update_options(value):
    if value:
        return [{'label': i, 'value': i} for i in metadata[value]]
    return {}


@app.callback(output=Output('functions', 'value'),
              inputs=[Input('functions', 'options')],
              state=[State('variables', 'value'), State('config', 'children')])
def update_value(options, variable_value, jconfig):
    config = json.loads(jconfig)
    if variable_value in config:
        return config[variable_value]
    return None

@app.callback(
    output=Output('config', 'children'),
    inputs=[Input('variables', 'value'), Input('functions', 'value')],
    state=[State('config', 'children')])
def update_config(variable_value, functions_value, jconfig):
    config = json.loads(jconfig)
    if variable_value and functions_value:
        config[variable_value] = functions_value
    return json.dumps(config)


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

我跟踪了由连接到“函数”的回调引起的错误-因为此组件仅在选项卡上,而在其他任何地方都没有。

我现在正在考虑如何将数据存储在隐藏的div中,以便数据在任何地方都是持久的-如何实现?

0 个答案:

没有答案