Rendering Tabs in plotly- dash and Python

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:

image797×1018 36.7 KB

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?

1 post - 1 participant

Read full topic