Hello, I am trying to render 2 dash apps using Flask, the problem I phase is one of the apps loses its callback interactivity aspects. Could you kindly assist below are the codes I am using.
Thanks in advance for your assistance!
app.py
from flask import Flask, render_template, redirect
from flask.helpers import url_for
from flask_bootstrap import Bootstrap
from dash_app.regions import create_regional_app
from dash_app.products import create_products_app
app = Flask(__name__)
create_regional_app(app)
create_products_app(app)
# Home route
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
region.py
import dash
from dash import Dash, html, dcc, Input, Output, callback, dash_table
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
import dash_app
import pandas as pd
data = pd.read_csv('data/sales_data.csv')
# print(data)
app = Dash()
def create_regional_app(flask_app):
dash_app = dash.Dash(
server=flask_app, name="Dashboard", url_base_pathname=("/dash/"), suppress_callback_exceptions=True,
)
dash_app.layout = html.Div(children=[
html.Div([
# Region dropdown
html.Label('Region:', style={'color': '#0C359E'}, ),
dcc.Dropdown(id='region_filter',
options=[{'label': 'All Regions', 'value': 'all_values'}] + [{'label': i, 'value': i}
for i in
(data['regions'].unique())],
value='all_values',
clearable=False,
disabled=False,
style={'display': True, 'width': '180px'},
multi=False,
searchable=True,
optionHeight=50,
className='dcc_compon'
),
# Sub Region > This will be dependent on Region Filter
html.Label('Town:', style={'color': '#0C359E'}),
dcc.Dropdown(id='town_filter',
options=[],
value='all_values',
clearable=False,
disabled=False,
style={'display': True, 'width': '180px'},
multi=False,
searchable=True,
optionHeight=50,
className='dcc_compon'
),
]),
])
# 1. callback to list Town based on Region selected
@callback(Output('town_filter', 'options', allow_duplicate=True),
[Input('region_filter', 'value')],
prevent_initial_call='initial_duplicate'
)
def update_region(town_filter):
data1 = data[data['regions'] == town_filter]
return [{'label': 'All Towns', 'value': 'all_values'}] + [{'label': i, 'value': i} for i in
data1['town'].unique()]
@callback(Output('town_filter', 'value', allow_duplicate=True),
[Input('town_filter', 'options')],
prevent_initial_call=True)
def update_town(town_filter):
return [k['value'] for k in town_filter][0]
products.py
import dash
from dash import Dash, html, dcc, Input, Output, callback, dash_table
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
import dash_app
import pandas as pd
data = pd.read_csv('data/sales_data.csv')
# print(data)
app = Dash()
def create_products_app(flask_app):
dash_app = dash.Dash(
server=flask_app, name="Products Dashboard", url_base_pathname=("/products/"), suppress_callback_exceptions=True,
)
dash_app.layout = html.Div(children=[
html.Div([
# Region dropdown
html.Label('Category:', style={'color': '#0C359E'}, ),
dcc.Dropdown(id='category_filter',
options=[{'label': 'All Categories', 'value': 'all_values'}] + [{'label': i, 'value': i}
for i in
(data['category'].unique())],
value='all_values',
clearable=False,
disabled=False,
style={'display': True, 'width': '180px'},
multi=False,
searchable=True,
optionHeight=50,
className='dcc_compon'
),
# Product > This will be dependent on Product Filter
html.Label('Product:', style={'color': '#0C359E'}),
dcc.Dropdown(id='product_filter',
options=[],
value='all_values',
clearable=False,
disabled=False,
style={'display': True, 'width': '180px'},
multi=False,
searchable=True,
optionHeight=50,
className='dcc_compon'
),
]),
])
# 1. callback to list Product based on Category selected
@callback(Output('product_filter', 'options', allow_duplicate=True),
[Input('category_filter', 'value')],
prevent_initial_call='initial_duplicate'
)
def update_region(product_filter):
data1 = data[data['category'] == product_filter]
return [{'label': 'All Products', 'value': 'all_values'}] + [{'label': i, 'value': i} for i in
data1['products'].unique()]
@callback(Output('product_filter', 'value', allow_duplicate=True),
[Input('product_filter', 'options')],
prevent_initial_call=True)
def update_town(product_filter):
return [k['value'] for k in product_filter][0]
datas sample
