Многостраничное тире приложение - PullRequest
0 голосов
/ 02 октября 2019

У меня есть вопрос о том, как создать многостраничное приложение, используя тире. У меня есть два скрипта, которые работают автономно, и теперь я хотел бы интегрировать их. Пожалуйста, обратите внимание, что я новичок в тире и фляге.

Итак, я хочу, чтобы индексный скрипт вызывал скрипт ввода, а графический интерфейс в скрипте ввода должен быть помещен в page_content html.Div индексного скрипта.

# index script
import os
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.figure_factory as ff
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash()
application = app.server

colors = {
    'background': '#7FDBFF',
    'text': '#111111'
    }

tab_style = {
        'color': '#0074D9',
        'text-decoration': 'underline',
        'margin': 30,
        'cursor':  'pointer'
        }

app.layout = html.Div(
        style={'backgroundColor': colors['background'],     'color': colors['text']}, children=[
        dcc.Location(id='url'),
        dcc.Link('Index', href='/', style=tab_style),
        dcc.Link('Input', href='/app/input', style=tab_style),
        html.Div(html.H1(children='XYZ', style={'textAlign': 'center'})),
        html.Div(style={'textAlign': 'center'}, id='page_content')
        ])

inputLayout = html.H3(
        children='Input')   # <- if inputLayout is a simple html.H or html.Div I can just assign it to a variable but how do I go about if the result of a more complicated script should go in here. So for example here I want to put the input script.

@app.callback(
        Output(component_id='page_content',  component_property='children'),
        [Input('url', 'pathname')]
        )

def display_page(pathname):
    if pathname == '/app/input':
        return inputLayout # <- call input script
    else:
        return 'This is a Dash application' 

if __name__ == '__main__':
    application.run(debug=True, port=9009)

# input script
import os
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.figure_factory as ff
import plotly.graph_objs as go
import pandas as pd
import numpy as np

app = dash.Dash()

colors = {
    'background': '#7FDBFF',
    'text': '#111111'
}

app.layout = html.Div(style={'backgroundColor':      colors['background']}, children=[

    html.Div(children='Parameters', style={
        'textAlign': 'left',
        'color': colors['text']
            }),

    html.Div(
            dcc.RadioItems(
            id='Parameters',
            options=[
                    {'label': 'X', 'value': 'X'},
                    {'label': 'Y', 'value': 'Y'}
                    ],
            value='X',
            labelStyle={'display': 'block'} # display radio items in list
            )),

    html.Div(
            html.Button('Execute', id='execute')
            ),
    html.Div(id='output')
])

@app.callback(
    Output('output', 'children'),
    [Input('execute', 'n_clicks')],
    state=[
            State('Parameters', 'value')
     ])

def compute(n_clicks, Parameters):
    if n_clicks == None:
        return "not started"
    elif Parameters == "X":
        df = extractData() # <- trigger some data extraction
        return "Running size of data {}".format(df.shape)
    else:
        return "No data: {}".format(Parameters)

def extractData():
    dfX = pd.DataFrame(columns=['x'])
    dfX['x'] = np.random.rand(1000) 
    return dfX     

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