I am relatively new to Plotly and Dash. I recently saw how easy it is to build web analytics dashboards using it. So I am developing a simple app using Tabs to deliver each section content. Unfortunately, the Tab does not render my content. I don’t know the reason for this. I will show each section snippet of my code so that you can understand very clearly as I could not find the issue in between the lines.
I started first by doing the normal stuffs:
from datetime import datetime
from datetime import date
from datetime import time
import pandas as pd
import plotly.express as px # (version 4.7.0)
import plotly.graph_objects as go
import dash # (version 1.12.0) pip install dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(
__name__,
meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
)
server = app.server
app.config["suppress_callback_exceptions"] = True
Next, I write the functions for the tabs to display in the app using build_tabs shown below
def build_tabs():
return html.Div(
id="tabs",
className="tabs",
children=[
dcc.Tabs(
id="app-tabs",
value="tab1",
className="custom-tabs",
children=[
dcc.Tab(
id="text1",
label="Some Text",
value="tab1",
className="custom-tab",
selected_className="custom-tab--selected",
),
dcc.Tab(
id="text2",
label="Some More Text",
value="tab2",
className="custom-tab",
selected_className="custom-tab--selected",
),
dcc.Tab(
id="text3",
label="More Text",
value="tab3",
className="custom-tab",
selected_className="custom-tab--selected",
),
dcc.Tab(
id="Text4",
label="Some More Text Here",
value="tab4",
className="custom-tab",
selected_className="custom-tab--selected",
)
],
)
],
)
I am now trying to structure the layout for the first tab - tab1
def month_options():
option_dates = []
for i in range(1,13):
month_dict = {}
month_dict["label"] = date(1,i,1).strftime("%B")
month_dict["value"] = date(1,i,1).month
option_dates.append(month_dict)
return option_dates
def tab1_layout():
return [html.Div(
[
html.Div([
dcc.Dropdown(
id="year",
options=[
{"label": "2019", "value": 2019},
{"label": "2020", "value": 2020}
],
value=2020,
style={"width": "50%"}
),
dcc.Dropdown(
id="month",
options= month_options(),
value=3,
style={"width": "50%"}
),
], style={"width": "100%", "display": "inline-block"}),
html.Div([
dcc.Graph(id="app-content")
], style={"width": "100%", "display": "inline-block"})
]
)]
def tab1_plot(selected_year, selected_month):
tab1_layout()
df_copy = df.copy()
df_copy["year"] = df_copy.date.dt.year
df_copy["month"] = df_copy.date.dt.month
df_copy = df_copy[(df_copy["month"] == selected_month) & (df_copy["year"] == selected_year)]
app_dist = df_copy["col"].value_counts()
fig = px.funnel_area(names=app_dist.keys().tolist(),
values=app_dist.tolist(),
template='plotly_dark')
return fig
Now the layout of the app:
app.layout = html.Div(
id="big-app-container",
children=[
build_banner(),
html.Div(
id="app-container",
children=[
build_tabs(),
# Main app
html.Div(id="app-content"),
],
),
],
)
Next the call back
# ------------------------------------------------------------------------------
# Connect the Plotly graphs with Dash Components
@app.callback(
Output("app-content", "children"),
[Input("app-tabs", "value"),
Input("year", "value"),
Input("month", "value")],
)
def render_tab_content(tab_switch, selected_year, selected_month):
if tab_switch == "tab1":
print(tab_switch)
return tab1_plot(selected_year = selected_year,
selected_month = selected_month)
if __name__ == '__main__':
app.run_server(debug=True, use_reloader=False)
Using the debug feature, I see it looks like this:
I wonder why the first tab set as default does not render the required results, this is for tab1 only and I cannot see the output, kindly advise what could be wrong?