У меня есть вопрос о том, как создать многостраничное приложение, используя тире. У меня есть два скрипта, которые работают автономно, и теперь я хотел бы интегрировать их. Пожалуйста, обратите внимание, что я новичок в тире и фляге.
Итак, я хочу, чтобы индексный скрипт вызывал скрипт ввода, а графический интерфейс в скрипте ввода должен быть помещен в 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)