A snippet of the example:
I have 2 pages, app.py and pages_1,
app.py has 3 components, a button, date picker and Store. The button and date picker are BOTH used as Inputs of a callback in pages_1. Pages_1 will then use those inputs to run a process which updates a dropdown in pages_1 layout (the “non-existent component”) and the Store in app.py. That is pretty much it in a nutshell
app.py
import os
import dash
from dash import DiskcacheManager, page_container, page_registry
import dash_bootstrap_components as dbc
from datetime import datetime as dt
from dash.exceptions import PreventUpdate
from uuid import uuid4
import diskcache
from variables import *
from app_functions import *
launch_uid = uuid4()
cache = diskcache.Cache(r".../")
background_callback_manager = DiskcacheManager(cache, cache_by=[lambda: launch_uid], expire=100)
# default bootstrap theme
app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.BOOTSTRAP], suppress_callback_exceptions=True,
background_callback_manager=background_callback_manager)
# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {}
# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {}
sidebar = html.Div(
[
html.Br(),
html.Br(),
html.A(
html.Img(
src=app.get_asset_url('../'), height="150px"
),
title="ME "
),
html.Hr(),
dbc.Nav(
[
dbc.NavLink("Home", href="/", active="exact"),
dbc.NavLink("Pages 1", href="/pages_1", active="exact")
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
navbar = dbc.Navbar()
# content from pages
content = html.Div(dash.page_container, style=CONTENT_STYLE)
app.layout = html.Div([
sidebar, navbar,
dcc.Location(id="url"),
dcc.Loading(id='load',
type='default',
children=[
html.Div([dcc.Store(id='data_memory'),
dcc.Store(id='position_data_memory_eur', storage_type='local'),
dcc.Store(id='position_data_memory_jpy', storage_type='local'),
dcc.Store(id='eur_traded_memory'),
dcc.Store(id='jpy_traded_memory'),
dcc.Store(id='ccy_memory')])
], fullscreen=True),
dbc.Col(
html.Div(html.H3('Select the first effective:', style={'fontSize': 20}),
style={'margin-top': '10px','padding-left': '130px'}),
width={'size': 6, 'offset': 1}),
dbc.Row([
dbc.Col(html.Div(dcc.DatePickerSingle(id='date_picker',
max_date_allowed=dt.date(dt.today()),
initial_visible_month=dt.date(dt.today()),
display_format='MMM Do, YY',
placeholder='Select date',
persistence=True,
persistence_type='session',
persisted_props=['date'],
style={'margin-bottom': '10px','padding-left': '130px'})),
width={'size': 1, 'offset': 1}),
dbc.Col(html.Div(
dbc.Button("Refresh Trades", id="button_eur", className="me-1"), style={'margin-top': '6px'}),
width={'size': 2, 'offset': 1})
]
), content])
if __name__ == "__main__":
app.run(host='tz', port=8052, debug=True)
pages_1.py
import dash
from dash import dcc, html, callback
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from app_functions import get_api_data, generate_fx_points_graph
from variables import *
import plotly_express as px
dash.register_page(
__name__,
path='/pages_1',
title='Pages 1',
name='Pages 1'
)
layout = html.Div([
html.Hr(),
html.H3("EXE"),
html.Hr(),
dbc.Row(
dbc.Col(
html.Div(html.H3('Select the traded:', style={'fontSize': 20}),
style={'padding-left': '10px', 'margin-top': '20px'}),
width={'size': 6})),
# File selection dropdown
dbc.Row(
dbc.Col(
html.Div(dcc.Dropdown(id='ccy_dropdown',
multi=False,
placeholder='Select currency'),
style={'padding-left': '10px'}),
width={'size': 2})),
dbc.Row(
dbc.Col(
html.Div(dcc.Dropdown(id='fund_dropdown',
multi=False,
placeholder='Select fund',
options=[{'label': c, 'value': c} for c in ['INT', 'T2']],
value='INT'),
style={'padding-left': '10px'}),
width={'size': 2})),
dbc.Row(
dbc.Col(
html.Div(
dcc.Graph(id='fx_points_fig', style={'width': '95vh', 'height': '95vh'}
),
style={'margin-top': '50px', 'width': '95%'}
)
)
)
]
)
@callback([Output('data_memory', 'data'), Output('ccy_dropdown', 'options')],
[Input('button_eur', 'n_clicks'), State('date_picker', 'date')], prevent_initial_call=True) #background=True, cache_args_to_ignore=[0]
def update_latest_trades(but, date_value):
df = long_running_api_call
ccy_options = sorted(df['sec'].unique().tolist())
ccy_options_graph = [{'label': c, 'value': c} for c in ccy_options]
return datasets, ccy_options_graph
except:
return None, None
@callback(Output('fx_points_fig', 'figure'),
[Input('ccy_dropdown', 'value'), Input('button_eur', 'n_clicks'),
Input('fund_dropdown', 'value'), State('data_memory', 'data'), State('ccy_memory', 'data')])
def generate_fx_points_table(ccy, n, fund, data, data_wmr):
if ccy is None:
raise PreventUpdate
df = generate_values
fig = px.scatter(df, x='Date', y="Points")
return fig
Hope that makes sense, thanks for your help
